/* place.photo landing. Tokens: tokens/base.css + studio mood (light set, data-theme="light"). Motion: motion/. */
body { font-size: var(--text-md); }
code, pre { font-family: var(--font-mono); font-size: 0.9em; }
:not(pre) > code { background: var(--paper-2); border: 1px solid var(--line); padding: 0 var(--space-1); border-radius: var(--radius-sm); white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--space-4); top: var(--space-2); z-index: 20; padding: var(--space-2) var(--space-4); background: var(--ink); color: var(--paper); border-radius: var(--radius-sm); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

/* ---- header ---- */
/* not sticky: it scrolls away with the page; positioned only so it stays above the hero's crowd, which reaches up behind it.
   A solid white bar across the page (owner, 2026-11-03); its bottom edge is the hero panels' border: a hairline with
   the soft white halo and shadow under it (--head-h is its height, used by the hero below it) */
:root { --head-h: 56px; }
.site-head {
  position: relative; z-index: 10; border-bottom: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 5px 0 0 color-mix(in srgb, var(--paper) 45%, transparent), var(--shadow-md);
}
.head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--head-h); }
@media (max-width: 480px) { [data-menu] .nav a { padding-inline: var(--space-2); } }
.nav a { white-space: nowrap; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); color: var(--ink); font-weight: 600; font-size: var(--text-md); letter-spacing: var(--tracking-tight); text-decoration: none; }
.brand-mark { color: var(--ink); flex: none; }
/* glass: the browser window's look (frosted paper, hairline border, soft halo, a light top edge), shared by the pieces
   being redesigned in that style */
:root {
  --glass-bg: color-mix(in srgb, var(--paper) 84%, transparent);
  --glass-blur: blur(16px) saturate(1.5);
  --glass-edge: inset 0 1px 0 hsl(0 0% 100% / 0.75), inset 0 -1px 0 hsl(0 0% 100% / 0.25);
  --glass-halo: 0 0 0 5px color-mix(in srgb, var(--paper) 45%, transparent);
}
.nav-glass { position: relative; padding: 5px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--paper-3) 74%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-edge), var(--shadow-md), var(--glass-halo); }
.nav { position: relative; display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 64px; padding: 0 var(--space-5); border-radius: var(--radius-pill); color: var(--ink); font-size: var(--text-base); font-weight: 550; text-decoration: none; transition: color var(--dur-fast, 150ms) var(--ease-out); }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the thumb: a brighter glass bead under one link; it glides between links and stretches a little on the way */
.nav-thumb { position: absolute; top: 5px; left: 0; height: 40px; width: var(--w, 0px); translate: var(--x, 0px) 0; border-radius: var(--radius-pill); background: linear-gradient(to bottom, hsl(0 0% 100% / 0.95), color-mix(in srgb, var(--paper) 80%, transparent)); box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.9), 0 0 0 1px hsl(var(--shadow-hue) 20% 10% / 0.06), 0 1px 3px hsl(var(--shadow-hue) 20% 10% / 0.16), 0 6px 16px hsl(var(--shadow-hue) 20% 10% / 0.12); opacity: 0; pointer-events: none; transition: translate 420ms cubic-bezier(0.3, 1.4, 0.5, 1), width 420ms cubic-bezier(0.3, 1.4, 0.5, 1), opacity 200ms var(--ease-out); }
.nav-thumb.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .nav-thumb { transition: opacity 150ms linear; } }
.nav-cta { display: none; }

/* menu tryouts (owner, 2026-11-02): ?menu=1..4 swaps the glass pill for another design (site.js sets data-menu) */
[data-menu] .nav-glass { padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
[data-menu] .nav-thumb { display: none; }
[data-menu] .nav a { min-width: 0; font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); }
[data-menu] .nav a:hover, [data-menu] .nav a[aria-current] { color: var(--ink); }

/* 1: an address bar, the menu reads as a URL: place.photo/url · tags · faq */
[data-menu="1"] .nav { align-items: center; gap: 0; padding: 0 var(--space-2) 0 var(--space-4); min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper); box-shadow: var(--shadow-sm); font-family: var(--font-mono); }
[data-menu="1"] .nav::before { content: "place.photo/"; color: var(--ink-3); font-size: var(--text-sm); }
[data-menu="1"] .nav li + li:not(.nav-cta)::before { content: "·"; color: var(--ink-3); padding-inline: 2px; }
[data-menu="1"] .nav a { min-height: 36px; padding: 0 var(--space-2); font-family: var(--font-mono); text-transform: lowercase; border-radius: var(--radius-sm); }
[data-menu="1"] .nav a:hover { background: var(--paper-2); }
[data-menu="1"] .nav a[aria-current] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* 2: plain links and one dark button */
[data-menu="2"] .nav { align-items: center; gap: var(--space-2); }
[data-menu="2"] .nav a { padding: 0 var(--space-3); }
[data-menu="2"] .nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
[data-menu="2"] .nav-cta { display: block; margin-left: var(--space-2); }
[data-menu="2"] .nav-cta a { gap: 0.35em; color: var(--ink); font-weight: 600; }
[data-menu="2"] .nav-cta a::after { content: "→"; transition: translate var(--dur-fast) var(--ease-out); }
[data-menu="2"] .nav-cta a:hover::after { translate: 3px 0; }

/* 3: browser tabs, like the tab in the hero's browser window */
[data-menu="3"] .nav { gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-2); }
[data-menu="3"] .nav a { min-height: 34px; padding: 0 var(--space-4); border-radius: var(--radius-sm); }
[data-menu="3"] .nav a:hover { background: var(--paper-3); }
[data-menu="3"] .nav a[aria-current] { background: var(--paper); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }

/* 4: text only, a green dot marks where you are */
[data-menu="4"] .nav { gap: var(--space-5); }
[data-menu="4"] .nav a { gap: 7px; padding: 0; }
[data-menu="4"] .nav a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); scale: 0; transition: scale var(--dur-base) var(--ease-out); }
[data-menu="4"] .nav a[aria-current]::before { scale: 1; }
/* phones: menu 2 drops "URL guide" ("Try a URL" goes there too), then FAQ, then Tags as the bar narrows */
@media (max-width: 480px) { [data-menu="2"] .nav li:first-child { display: none; } [data-menu="2"] .nav { gap: 0; } [data-menu="2"] .nav-cta { margin-left: var(--space-1); } }
@media (max-width: 440px) { [data-menu="2"] .nav li:nth-child(3) { display: none; } }
@media (max-width: 360px) { [data-menu="2"] .nav li:nth-child(2) { display: none; } }
@media (max-width: 400px) { [data-menu="1"] .nav::before { content: "/"; } }
@media (max-width: 400px) { .nav a { min-width: 0; padding: 0 var(--space-3); } }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-min); padding: 0 var(--space-5); border-radius: var(--radius-pill); font-weight: 500; font-size: var(--text-base); text-decoration: none; border: 1px solid transparent; }
.btn-primary { background: var(--ink); color: var(--paper); transition: transform var(--dur-fast) var(--motion-emphasis), opacity var(--dur-base) var(--ease-in-out); }
.btn-primary:hover { opacity: 0.88; }
.btn-ghost { color: var(--ink); border-color: var(--line); background: color-mix(in srgb, var(--paper) 78%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--glass-edge), var(--shadow-sm); }
.btn-ghost:hover { background: var(--paper); }

.icon-btn { display: inline-grid; place-items: center; width: var(--target-min); height: var(--target-min); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper); color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { color: var(--ink); background: var(--paper-2); }
.icon-btn svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn .i-check, .icon-btn .i-play, .icon-btn.is-done .i-copy, .icon-btn[aria-pressed="true"] .i-pause { display: none; }
.icon-btn.is-done .i-check, .icon-btn[aria-pressed="true"] .i-play { display: block; }
.icon-btn.is-done { color: var(--accent); }

/* ---- hero ---- */
/* phones: headline, then the portrait, then the lede; wide screens: copy left, portrait right */
.hero { display: grid; gap: var(--space-8); padding-block: var(--space-10) var(--space-16); grid-template-areas: "head" "demo" "body"; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head demo" "body demo"; grid-template-rows: auto 1fr; column-gap: var(--space-16); row-gap: var(--space-6); padding-block: var(--space-20) var(--space-24); }
  .hero-head { align-self: end; }
}
.hero-head { grid-area: head; display: grid; gap: var(--space-6); justify-items: start; }

/* the crowd: tilted columns of portraits drifting up and down behind the hero, washed with paper so the copy reads */
main { overflow-x: clip; }
/* the hero fills the screen below the header, the crowd fills it edge to edge (header included) */
.hero { position: relative; isolation: isolate; min-height: calc(100svh - var(--head-h)); align-content: center; }
@media (min-width: 900px) {
  .hero { grid-template-areas: "copy demo"; grid-template-rows: auto; align-items: center; }
  .hero-copy { grid-area: copy; display: grid; gap: var(--space-6); justify-items: start; align-self: center; }
  .hero-copy > :is(.hero-head, .hero-body) { grid-area: auto; } /* head and body stack in the copy column */
  /* the headline scales with its column so it keeps to three lines: Free placeholder / photos of people, / any size */
  .hero-copy { container-type: inline-size; }
  .hero-copy h1 { font-size: clamp(2.5rem, 10.6cqi, 4.5rem); }
}
@media (max-width: 899px) {
  .hero-copy { display: contents; }
  .hero-head { container-type: inline-size; }
  .hero-head h1 { font-size: clamp(2rem, 11cqi, 3.25rem); }
}
.crowd { position: absolute; z-index: -1; top: calc(-1 * var(--head-h)); bottom: 0; left: 50%; width: 100vw; translate: -50% 0; overflow: hidden; pointer-events: none; }
.crowd::after {
  content: ""; position: absolute; inset: 0;
  /* the wash from before (2026-11-02, the look the owner likes): brightest round the copy, then 72 %, then 45 % on
     every other face. Its centre follows the copy's column (the middle of the left 7/12 of the page width, as in the
     hero's grid) instead of a fixed 26 % of the screen, so on wide screens it stays under the text */
  --wrap-w: min(100vw - 2 * var(--space-5), var(--measure-page));
  --copy-x: calc((100vw - var(--wrap-w)) / 2 + (var(--wrap-w) - var(--space-16)) * 7 / 24);
  background:
    radial-gradient(60% 70% at var(--copy-x) 52%, color-mix(in srgb, var(--paper) 94%, transparent) 30%, color-mix(in srgb, var(--paper) 72%, transparent) 65%, color-mix(in srgb, var(--paper) 45%, transparent)),
    linear-gradient(to bottom, transparent 88%, var(--paper));
}
@media (max-width: 899px) { .crowd::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--paper) 78%, transparent), color-mix(in srgb, var(--paper) 78%, transparent) 90%, var(--paper)); } }
.wall { position: absolute; inset: -30% -20%; display: flex; gap: 10px; justify-content: center; rotate: -9deg; translate: 0 calc(var(--sy, 0) * 0.35px); will-change: translate; }
.col { flex: none; width: var(--w); translate: 0 calc(var(--sy, 0) * var(--k, 0) * 1px); }
.col:nth-child(3n) { margin-top: -90px; }
.col-track { display: flex; flex-direction: column; gap: 10px; animation: crowd-rise var(--dur) linear infinite; will-change: transform; }
.col:nth-child(even) .col-track { animation-direction: reverse; }
@keyframes crowd-rise { to { transform: translateY(calc(-50% - 5px)); } }
.wall.is-paused .col-track { animation-play-state: paused; }
.wall.is-still .col-track { animation: none; } /* drift off: every track at its start, so scrolling (--ty) has the whole loop */
.col-track img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); opacity: 0; transition: opacity var(--dur-reveal, 600ms) var(--ease-out); }
.col-track img.is-in { opacity: 1; }
/* hover and click (site.js): the faces take the pointer, and the one under it is copied above the wash at full strength */
.col-track img { pointer-events: auto; } /* the zoom cursor comes with .is-over-face: faces by the hero copy stay plain */
.crowd-lift { position: absolute; z-index: 1; height: auto; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); translate: -50% -50%; rotate: -9deg; scale: 0.98; opacity: 0; transition: opacity 220ms var(--ease-out), scale 320ms var(--ease-out); }
.crowd-lift.is-on { opacity: 1; scale: 1.06; }
@media (prefers-reduced-motion: reduce) { .col-track { animation: none; } }
/* whole page (site.js CROWD_PAGE): the crowd is fixed behind everything, its columns loop as the page scrolls (--ty),
   and a veil comes over it once the hero has scrolled away (--veil) so the sections read */
.crowd-page .hero { isolation: auto; }
.crowd-page .crowd { position: fixed; inset: 0; width: auto; translate: none; }
.crowd-page .wall { translate: none; }
.crowd-page .col { translate: 0 var(--ty, 0px); }
.crowd-page .crowd::after { opacity: calc(1 - var(--veil, 0)); background:
  radial-gradient(60% 70% at 26% 52%, color-mix(in srgb, var(--paper) 94%, transparent) 30%, color-mix(in srgb, var(--paper) 72%, transparent) 65%, color-mix(in srgb, var(--paper) 45%, transparent)),
  linear-gradient(to bottom, color-mix(in srgb, var(--paper) 70%, transparent), transparent var(--space-16)); }
@media (max-width: 899px) { .crowd-page .crowd::after { background: color-mix(in srgb, var(--paper) 78%, transparent); } }
.crowd-veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--paper) 86%, transparent); opacity: var(--veil, 0); }
.is-over-face body { cursor: zoom-in; }
.hero-body { grid-area: body; display: grid; gap: var(--space-6); justify-items: start; align-content: start; }
.demo { grid-area: demo; }
@media (min-width: 900px) { .demo { align-self: center; } }
h1 { font-size: var(--text-4xl); font-weight: 650; letter-spacing: var(--tracking-tighter); line-height: 1.05; }
@media (min-width: 600px) { h1 { font-size: var(--text-5xl); } }
.accent-text { color: var(--accent); }
.lede { font-size: var(--text-lg); color: var(--ink); max-width: 48ch; }
.lede strong { color: var(--ink); font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* the demo: a browser window; the address bar holds the URL, the page is the picture it returns. site.js cycles examples */
.demo { margin: 0; display: grid; width: 100%; max-width: 28rem; justify-self: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper-2); box-shadow: var(--shadow-lg), 0 0 0 6px color-mix(in srgb, var(--paper) 55%, transparent); grid-template-columns: minmax(0, 1fr); container-type: inline-size; }
.browser-top { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) 0 var(--space-4); }
.lights { display: flex; gap: 6px; flex: none; }
.lights i { width: 11px; height: 11px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--ink) 16%, transparent); }
.demo:hover .lights i:nth-child(1) { background: #ff5f57; }
.demo:hover .lights i:nth-child(2) { background: #febc2e; }
.demo:hover .lights i:nth-child(3) { background: #28c840; }
.tab { align-self: end; display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; margin-bottom: -1px; padding: var(--space-2) var(--space-4); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--paper); color: var(--ink-2); font-size: var(--text-sm); white-space: nowrap; }
.tab svg { flex: none; color: var(--ink); }
.demo-tools { display: flex; flex: none; gap: 2px; margin-left: auto; }
.demo-tools .icon-btn { width: 36px; height: 36px; border-color: transparent; background: transparent; }
.demo-tools .icon-btn:hover { background: var(--paper-3); }
.urlbar { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
/* the URL scales with the window, so the longest example still fits on one line */
.urlbar > .url { flex: 1; min-width: 0; font-size: clamp(11px, 3.7cqi, 15px); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: var(--paper-2); overflow: hidden; }
.urlbar .lock { flex: none; margin-left: var(--space-1); fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; }
.frame { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper-3); --motion-enter: var(--dur-reveal); }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame img + img { will-change: clip-path, transform; }
.url { font-size: var(--text-base); white-space: nowrap; color: var(--ink); background: none; border: 0; }
.url .host { color: var(--ink-3); }
.url .tag { color: var(--accent); }
/* each part swaps on its own (site.js): its width glides, the old text lifts out, the new one rises in */
.url .seg { position: relative; display: inline-flex; overflow: clip; overflow-clip-margin: 0.25em; vertical-align: bottom; }
.url .seg > span { position: relative; display: inline-block; white-space: pre; }
.url .seg > .out { position: absolute; left: 0; top: 0; }
/* a part that just changed glows once */
.url .seg > .hit::before { content: ""; position: absolute; inset: 0.05em -0.2em; z-index: -1; border-radius: var(--radius-sm); background: var(--accent-soft); animation: wd-flash 1400ms var(--ease-out) 300ms both; }
.url { isolation: isolate; }
.url .size { color: var(--ink); font-weight: 600; }
/* time to the next example: a page-load bar along the top of the page */
.tick { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
@media (max-width: 440px) {
  .browser-top { padding-left: var(--space-3); }
  .lights { display: none; }
  .tab { padding-inline: var(--space-3); }
  .urlbar { padding-inline: var(--space-2); }
  .urlbar .lock { display: none; }
  .urlbar > .url { padding-inline: var(--space-2); font-size: clamp(10.5px, 3.9cqi, 15px); }
}

/* ---- sections ---- */
.section { padding-block: var(--space-12); border-top: 1px solid var(--line); }
.hero + .section { border-top: 0; } /* the crowd's fade already ends the hero */
@media (min-width: 900px) { .section { padding-block: var(--space-20); } }
/* below the fold: skip layout and paint until a section comes near the viewport */
.section { content-visibility: auto; contain-intrinsic-size: auto 60rem; }
.section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-10); }
.eyebrow { color: var(--accent); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
h2 { font-size: var(--text-4xl); font-weight: 650; letter-spacing: var(--tracking-tighter); }
h3 { font-size: var(--text-lg); font-weight: 600; }
.section-lede { color: var(--ink-2); font-size: var(--text-lg); }

/* URL tuner: one 480 x 400 URL that gains a word per click; the picture on the right follows it */
.tuner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; margin: 0 0 var(--space-10);
  padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-2); }
.tuner-text { display: grid; gap: var(--space-4); min-width: 0; }
.tuner-title { margin: 0; font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.tuner-url { margin: 0; font-family: var(--font-mono); font-size: clamp(0.95rem, 1.9vw, 1.4rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.t-host { color: var(--ink-3); }
.t-tag { color: var(--ink-3); opacity: 0.75; }
.t-size { color: var(--accent); font-weight: 650; }
/* every word keeps a subtle colour of its kind; a new word flashes a soft band of that colour (square, so words
   side by side read as one strip of colours) */
.t-parts > span { --k: var(--ink); display: inline-block; white-space: nowrap; vertical-align: bottom; color: var(--k); transition: background-color 0.9s var(--ease-in-out); }
:is(.tuner, .person, .examples, .ref, .use) [data-kind="gender"] { --k: hsl(214 55% 42%); }
:is(.tuner, .person, .examples, .ref, .use) [data-kind="age"] { --k: hsl(32 70% 36%); }
:is(.tuner, .person, .examples, .ref, .use) [data-kind="hair"] { --k: hsl(172 50% 30%); }
:is(.tuner, .person, .examples, .ref, .use) [data-kind="face"] { --k: hsl(270 35% 45%); }
:is(.tuner, .person, .examples, .ref, .use) [data-kind="beard"] { --k: hsl(95 35% 32%); }
:is(.tuner, .person, .examples, .ref, .use) [data-kind="mood"] { --k: hsl(340 45% 44%); }
:is(.tuner, .person, .examples, .ref, .use) [data-kind="clothes"] { --k: hsl(20 55% 40%); }
.t-parts .is-new { background: color-mix(in srgb, var(--k) 13%, transparent); }
/* every word of the story as a chip: added ones in their colour, the next one dark and asking to be clicked, the
   rest dashed and waiting. Only the next one can be clicked (owner: in order); with every word in, any starts over. */
.tuner-words { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tuner-word { --k: var(--ink); display: inline-flex; align-items: center; gap: 0.35em; padding: 0.4em 0.8em; border: 1px dashed var(--line);
  border-radius: 999px; background: transparent; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500;
  color: var(--ink-3); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
  border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.tuner-word::before { content: "+"; opacity: 0.6; }
.tuner-word:disabled { cursor: default; }
.tuner-word:enabled:active { transform: scale(0.96); }
.tuner-word.is-next { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }
.tuner-word.is-next::before { opacity: 1; }
.tuner-word.is-next:hover { transform: translateY(-1px); }
/* the next word breathes and sends out a soft ring, so it reads as the place to start; still while hovered */
.tuner-word.is-next { animation: word-pulse 1.8s var(--ease-out) infinite; }
.tuner-word.is-next:hover, .tuner-word.is-next:focus-visible { animation: none; }
@keyframes word-pulse {
  0% { scale: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 35%, transparent); }
  35% { scale: 1.05; }
  70% { scale: 1; box-shadow: 0 0 0 9px color-mix(in srgb, var(--ink) 0%, transparent); }
  100% { scale: 1; box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .tuner-word.is-next { animation: none; } }
.tuner-word.is-on { border: 1px solid color-mix(in srgb, var(--k) 45%, transparent); background: color-mix(in srgb, var(--k) 10%, var(--paper)); color: var(--k); }
.tuner-word.is-on::before { content: "✓"; opacity: 1; }
/* every word in: any of them starts over */
.is-done .tuner-word:hover::before { content: "↺"; }
/* the confetti stays inside the box */
.tuner { position: relative; overflow: hidden; }
/* two people the URL matches, side by side, each a 240 x 360 portrait */
.tuner-photo { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); width: clamp(240px, 24.5vw, 335px); margin: 0; }
.confetti { position: absolute; top: 50%; left: 50%; pointer-events: none; z-index: 2; }
.tuner-frame { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--paper-3); box-shadow: var(--shadow-md); }
/* always on their own layer: otherwise the wipe-in ends with a repaint off it that shifts the picture a fraction of a
   pixel, a visible snap */
.tuner-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
@media (max-width: 720px) {
  .tuner { grid-template-columns: 1fr; padding: var(--space-5); gap: var(--space-6); }
  .tuner-photo { width: 100%; gap: var(--space-2); }
}

/* examples: real renders at their true shape. Each row is as tall as its pictures allow: an item grows with its width
   to height ratio (--r), so a 1024 × 400 banner is wide, a 300 × 400 portrait narrow, all one height. Sets show
   avatars at their real pixel size. Phones: each row swipes sideways. */
.examples { display: grid; gap: var(--space-8); }
.ex-row { display: flex; gap: var(--space-4); align-items: flex-start; }
.ex { flex: var(--r) 1 0; min-width: 0; margin: 0; display: grid; gap: var(--space-3); }
.ex-pic { position: relative; aspect-ratio: var(--r); overflow: hidden; border-radius: var(--radius-lg); background: var(--paper-3); box-shadow: var(--shadow-md); transition: translate 450ms var(--ease-out), rotate 450ms var(--ease-out), box-shadow 450ms var(--ease-out); }
.ex-pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ex:hover .ex-pic { translate: 0 -4px; rotate: -0.6deg; box-shadow: var(--shadow-lg); }
.ex:nth-child(even):hover .ex-pic { rotate: 0.6deg; }
/* the size it was asked for, as a glass chip on the picture */
.ex-size { position: absolute; left: var(--space-2); top: var(--space-2); padding: 2px var(--space-2); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--paper) 78%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--glass-edge); font: 500 var(--text-xs)/1.5 var(--font-mono); color: var(--ink-2); }
/* transparent: a checkerboard shows through the cut-out */
.ex-clear { background-color: var(--paper); background-image: conic-gradient(var(--paper-3) 25%, transparent 0 50%, var(--paper-3) 0 75%, transparent 0); background-size: 16px 16px; }
/* sets: a few URLs at their real pixel size, inside small mock-ups of where you would use them (skeleton lines stand
   in for text). The tile is a soft studio surface; the mock-ups are white cards on it */
.ex-set .ex-pic { display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  background: radial-gradient(120% 90% at 20% 0%, var(--paper), var(--paper-2) 60%, var(--paper-3)); }
.ex-set img { display: block; flex: none; }
.ui-card { position: relative; display: flex; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-md); }
.ui-lines { display: grid; gap: 6px; align-content: center; flex: 1; min-width: 56px; }
.ui-lines b, .ui-lines i { display: block; height: 7px; border-radius: var(--radius-pill); background: var(--paper-3); }
.ui-lines b { width: 70%; height: 9px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.ui-lines i:last-child { width: 82%; }
/* the URL size each mock-up uses, as a small chip on its corner */
.ui-tag { position: absolute; top: -9px; right: 8px; padding: 1px 6px; border: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--paper); font-size: 10.5px; line-height: 1.6; }
/* 'ui': list row (48), comment (96), profile card (160), header (320 x 180) */
.ex-ui .ex-pic { gap: var(--space-4); }
.ui-col { display: grid; gap: var(--space-4); }
.ui-row { align-items: center; width: 220px; }
.ui-row img { border-radius: 50%; }
.ui-comment { align-items: flex-start; width: 220px; }
.ui-comment img { border-radius: var(--radius-md); }
.ui-profile { flex-direction: column; align-items: stretch; }
.ui-profile img, .ui-header img { border-radius: var(--radius-sm); }
.ui-header { flex-direction: column; }
/* 'pile': overlapping seeds; hover fans them out and shows which seed is which */
.ui-pile { display: flex; align-items: center; }
.ui-pile-face { position: relative; display: grid; justify-items: center; margin-left: -28px; transition: margin 500ms var(--ease-out), translate 500ms var(--ease-out); }
.ui-pile-face:first-child { margin-left: 0; }
.ui-pile-face img { border-radius: 50%; box-shadow: 0 0 0 4px var(--paper), var(--shadow-md); }
.ui-pile-face code { position: absolute; bottom: -24px; padding: 0; border: 0; background: none; font-size: var(--text-xs); color: var(--ink-3); opacity: 0; transition: opacity 300ms var(--ease-out); }
.ui-more { margin-left: var(--space-3); padding: 4px 10px; border-radius: var(--radius-pill); background: var(--paper); box-shadow: var(--shadow-sm); font: 500 var(--text-xs)/1.5 var(--font-mono); color: var(--ink-3); white-space: nowrap; }
.ex-pile:hover .ui-pile-face { margin-left: var(--space-2); translate: 0 -8px; }
.ex-pile:hover .ui-pile-face:first-child { margin-left: 0; }
.ex-pile:hover .ui-pile-face code { opacity: 1; }
@media (hover: none) { .ui-pile-face { margin-left: var(--space-1); } .ui-pile-face code { opacity: 1; } }
/* 'chat': each user word keeps its face */
.ui-chat { display: grid; gap: var(--space-2); width: min(100%, 320px); }
.ui-msg { display: flex; align-items: flex-end; gap: var(--space-2); }
.ui-msg img { border-radius: 50%; box-shadow: var(--shadow-sm); }
.ui-bubble { flex: 1; display: grid; gap: 6px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px; background: var(--paper); box-shadow: var(--shadow-sm); }
.ui-bubble strong { font: 600 var(--text-xs)/1.3 var(--font-mono); color: var(--ink); }
.ui-bubble i { display: block; width: var(--w); height: 7px; border-radius: var(--radius-pill); background: var(--paper-3); }
.ex figcaption { display: grid; gap: var(--space-1); }
.ex-url { font-size: var(--text-sm); background: none; border: 0; padding: 0; white-space: normal; }
.ex-url span { color: var(--k, var(--ink)); white-space: nowrap; } /* lines break only between the URL's parts */
.ex-url .host { color: var(--ink-3); }
.ex-url .size { color: var(--accent); font-weight: 650; }
.ex-note { color: var(--ink-2); font-size: var(--text-sm); }
.ex-note code { font-size: 0.9em; }
@media (max-width: 699px) {
  /* phones: each row is a strip you swipe sideways, pictures 210 px tall at their true shape, edge to edge */
  .examples { gap: var(--space-6); }
  .ex-row { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-5); margin-inline: calc(-1 * var(--space-5)); padding: var(--space-1) var(--space-5) var(--space-3); scrollbar-width: none; }
  .ex-row::-webkit-scrollbar { display: none; }
  .ex { flex: 0 0 auto; width: min(calc(var(--r) * 210px), 82vw); scroll-snap-align: start; }
  .ex-set { width: max-content; }
  .ex-set .ex-pic { aspect-ratio: auto; min-height: 210px; }
  .ex-set figcaption { contain: inline-size; max-width: 82vw; } /* the mock-up sets the width, the caption wraps on screen */
}


/* reference */
/* reference: one row per kind of URL word. Tags are pills in their kind's colour (as in the URL everywhere on the page),
   each with a real face that has it (scripts/tag-faces.mjs); hovering a pill brings the face up large */
.ref { display: grid; margin: 0 0 var(--space-10); border-top: 1px solid var(--line); }
.ref > div { display: grid; gap: var(--space-3); padding-block: var(--space-5); border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .ref > div { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-6); align-items: start; } }
.ref { --k: var(--ink-2); } /* kind colours come from the shared [data-kind] rules; "other" keeps this grey */
.ref dt { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; font-weight: 600; }
.ref dt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
.ref dd { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ref .note { flex-basis: 100%; margin-top: var(--space-1); color: var(--ink-2); font-size: var(--text-base); }
.ref-tag { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 3px var(--space-3) 3px 3px; border: 1px solid color-mix(in srgb, var(--k) 26%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--k) 7%, var(--paper)); }
.ref-tag code { padding: 0; border: 0; background: none; color: var(--k); font-size: var(--text-sm); font-weight: 600; }
.ref-tag img { width: 28px; height: 28px; border-radius: 50%; transform-origin: 50% 100%; transition: scale 350ms var(--ease-out), translate 350ms var(--ease-out), box-shadow 350ms var(--ease-out); }
.ref-tag:hover { z-index: 2; }
.ref-tag:hover img { scale: 3; translate: 0 -12px; box-shadow: 0 0 0 1px var(--paper), var(--shadow-lg); } /* rises above the pill, the word stays readable */
.ref-tag-plain { padding-inline: var(--space-3); }
@media (prefers-reduced-motion: reduce) { .ref-tag img { transition: none; } }
/* synonyms: small cards, the words you may write on the left, what they mean on the right */
.syns { gap: var(--space-2); }
.syn { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); overflow: hidden; }
.syn code { padding: 0; border: 0; background: none; font-size: var(--text-sm); }
.syn-from { display: inline-flex; gap: var(--space-2); padding: 5px var(--space-3); color: var(--ink-3); }
.syn-from code { color: var(--ink-2); }
.syn-to { display: inline-flex; align-items: center; gap: 6px; align-self: stretch; padding: 5px var(--space-3); border-left: 1px solid var(--line); background: color-mix(in srgb, var(--k) 7%, var(--paper)); }
.syn-to::before { content: "→"; color: var(--ink-3); }
.syn-to code { color: var(--k); font-weight: 600; }
.fallback { display: grid; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--accent-soft); }
.fallback p { color: var(--ink-2); }

/* use it: an editor window (tabs per language, like the hero's browser window), what the snippet gives beside it, and
   the response headers as a network panel. Syntax stays quiet; the URL's words carry their kind colours */
.use { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .use { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .network { grid-column: 1 / -1; } }
.editor, .result, .network { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden; }
.editor { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); background: var(--paper); }
.ed-top { display: flex; align-items: flex-end; gap: var(--space-3); padding: var(--space-2) var(--space-2) 0 var(--space-4); background: var(--paper-2); border-bottom: 1px solid var(--line); }
.ed-top .lights { align-self: center; }
.ed-tabs { flex: 1 1 auto; display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ed-tab { flex: none; margin-bottom: -1px; padding: var(--space-2) var(--space-4); border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: none; color: var(--ink-3); font-family: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
.ed-tab:hover { color: var(--ink); }
.ed-tab[aria-selected="true"] { border-color: var(--line); background: var(--paper); color: var(--ink); }
.ed-copy { flex: none; align-self: center; margin-left: auto; width: 36px; height: 36px; border-color: transparent; background: transparent; }
.ed-panel { min-height: 11rem; }
.ed-panel pre { margin: 0; padding: var(--space-5); overflow-x: auto; font-size: var(--text-sm); line-height: 1.75; }
.ed-panel code { background: none; border: 0; padding: 0; white-space: pre; }
.tk-tag { color: var(--ink); font-weight: 600; }
.tk-attr, .tk-fn { color: var(--ink-2); }
.tk-p, .tk-str { color: var(--ink-3); }
.tk-url span { color: var(--k, var(--ink)); }
.tk-url .host { color: var(--ink-3); }
.tk-url .size { color: var(--accent); font-weight: 650; }
/* the result: the snippet's picture where it lands */
.result { position: relative; display: grid; min-height: 15rem; place-items: center; padding: var(--space-8) var(--space-6) var(--space-6);
  background: radial-gradient(120% 90% at 20% 0%, var(--paper), var(--paper-2) 60%, var(--paper-3)); }
.result-label { max-width: none; position: absolute; top: var(--space-3); left: var(--space-4); color: var(--ink-3); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.res { animation: res-in 450ms var(--ease-out); }
@keyframes res-in { from { opacity: 0; translate: 0 8px; } }
.res img { display: block; }
.res-profile { align-items: center; width: 280px; }
.res-profile img { border-radius: var(--radius-md); }
.res-nav { display: flex; align-items: center; gap: var(--space-4); width: 300px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-md); }
.res-logo { width: 22px; height: 22px; border-radius: 6px; background: var(--ink); }
.res-links { display: flex; gap: var(--space-3); flex: 1; }
.res-links i { width: 34px; height: 7px; border-radius: var(--radius-pill); background: var(--paper-3); }
.res-avatar { width: 64px; height: 64px; border-radius: 50%; background: center / cover; box-shadow: 0 0 0 3px var(--paper), var(--shadow-sm); }
.res-doc { display: grid; gap: 8px; width: 240px; padding: var(--space-4); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-md); }
.res-doc i, .res-doc b { display: block; height: 7px; border-radius: var(--radius-pill); background: var(--paper-3); }
.res-doc .res-h { width: 55%; height: 11px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.res-doc i:nth-of-type(2) { width: 80%; }
.res-portrait { margin: 4px 0; border-radius: var(--radius-sm); }
.res-team { display: grid; gap: var(--space-2); width: 240px; }
.res-person { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-sm); }
.res-person img { border-radius: 50%; }
.res-person > span { display: grid; gap: 5px; flex: 1; }
.res-person strong { font-size: var(--text-sm); }
.res-person i { display: block; width: 70%; height: 6px; border-radius: var(--radius-pill); background: var(--paper-3); }
@media (prefers-reduced-motion: reduce) { .res { animation: none; } }
/* the network panel: one request and its headers */
.network { background: var(--paper); }
.net-line { max-width: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); background: var(--paper-2); font-size: var(--text-sm); }
.net-method { font: 650 var(--text-xs)/1 var(--font-mono); color: var(--ink-2); }
.net-line code { background: none; border: 0; padding: 0; color: var(--ink); }
.net-status { padding: 2px 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font: 650 var(--text-xs)/1.5 var(--font-mono); }
.net-note { margin-left: auto; color: var(--ink-3); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.net-headers { display: grid; margin: 0; padding: var(--space-3) var(--space-5) var(--space-4); }
@media (min-width: 700px) { .net-headers { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); } }
.net-headers > div { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); padding-block: 6px; border-bottom: 1px dashed var(--line); font: var(--text-sm)/1.6 var(--font-mono); }
.net-headers dt { color: var(--ink-2); }
.net-headers dt::after { content: ":"; }
.net-headers dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.net-cmt { color: var(--ink-3); }

/* FAQ */
.faq { border-top: 1px solid var(--line); max-width: 52rem; }
.faq a, .terms a, .steps-list a { color: var(--accent); }
/* report: three numbered steps */
.steps-list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 720px) { .steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps-list li { counter-increment: step; display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-2); }
.steps-list li::before { content: counter(step); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 650; }
.steps-list p { color: var(--ink-2); }
.terms { display: grid; gap: var(--space-4); max-width: 52rem; color: var(--ink-2); }
.terms strong { color: var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--target-min); padding-block: var(--space-4); font-weight: 600; font-size: var(--text-md); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq details > p { padding-bottom: var(--space-5); color: var(--ink-2); }
.faq details[open] > p { animation: wd-reveal var(--motion-enter) var(--ease-out) backwards; }
.plus { position: relative; flex: none; width: var(--space-4); height: var(--space-4); transition: transform var(--motion-enter) var(--ease-in-out); }
.plus::before, .plus::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1.5px; margin-top: -0.75px; background: currentColor; border-radius: var(--radius-pill); }
.plus::after { transform: rotate(90deg); }
details[open] .plus { transform: rotate(45deg); }

/* footer */
.site-foot { border-top: 1px solid var(--line); padding-block: var(--space-10); color: var(--ink-2); font-size: var(--text-sm); }
.foot-row { display: grid; gap: var(--space-3); }
@media (min-width: 760px) { .foot-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.site-foot strong { color: var(--ink); font-weight: 600; }
.foot-links a { display: inline-block; padding-block: var(--space-3); }

/* ---- a crowd face, opened (site.js) ---- */
.person { width: min(100% - 2 * var(--space-5), 46rem); max-height: calc(100dvh - 2 * var(--space-5)); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lg); overflow: auto; }
.person:focus { outline: none; }
.person[open] { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); animation: person-in 320ms var(--ease-out); }
.person::backdrop { background: color-mix(in srgb, var(--ink) 35%, transparent); backdrop-filter: blur(6px); }
@keyframes person-in { from { opacity: 0; translate: 0 12px; scale: 0.97; } }
.person-img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.person-info { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-8) var(--space-6) var(--space-6); min-width: 0; }
.person-title { font-size: var(--text-2xl); font-weight: 650; letter-spacing: var(--tracking-tight); line-height: 1.1; padding-right: var(--space-8); }
.person-url { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-2); }
.person-url .url { flex: 1; min-width: 0; font-size: var(--text-sm); white-space: normal; line-height: 1.5; }
.person-url .url span { white-space: nowrap; }
.person-url .url span { color: var(--k, var(--ink)); }
.person-url .url .host { color: var(--ink-3); }
.person-url .url .size { color: var(--accent); font-weight: 650; }
.person-url .icon-btn { flex: none; border-color: transparent; background: transparent; }
.person-note { color: var(--ink-2); font-size: var(--text-sm); }
.person-note code { color: var(--accent); }
.person-sub { font-size: var(--text-xs, 0.75rem); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.person-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: calc(-1 * var(--space-2)) 0 var(--space-2); padding: 0; list-style: none; }
.person-tags li { --k: var(--ink-2); padding: var(--space-1) var(--space-3); border: 1px solid color-mix(in srgb, var(--k) 35%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--k) 8%, transparent); color: var(--k); font-size: var(--text-sm); font-weight: 500; }
.person .btn { justify-self: start; }
.person-close { position: absolute; top: var(--space-3); right: var(--space-3); background: color-mix(in srgb, var(--paper) 85%, transparent); }
@media (max-width: 599px) {
  .person[open] { grid-template-columns: minmax(0, 1fr); }
  .person-img { aspect-ratio: 4 / 3; height: auto; object-position: 50% 30%; }
  .person-info { padding: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) { .person[open] { animation: none; } }