/* =========================================================
   iamsaras.me — v3 "colour as object"
   One section per screen. Warm white page. Saturated colour lives on
   SURFACES — tiles, pills, bars — never as body-text colour. Text is
   always near-black on light surfaces or near-white on the dark page.
   That is what lets the palette be genuinely bright AND clear 4.5:1:
   the hue is a shape, the words sit on top of it.

   Chosen from a two-variant board on 2026-07-29 (Variant B).
   The three RULED-LINE kills from that review are permanent:
   · no 1px-grid card matrices (.figures/.values now gap + tiles)
   · no border-boxed white cards on a white page (tiles carry colour)
   · no decorative vertical rules (the canvas grid is gone too)
   The ONLY lines left are data: the year axis, the stage-flow track,
   the panel progress thread.

   TOKENS. Three closed sets, and nothing outside them:
   · TYPE  — 7 sizes, every font-size below is a var(--t-*).
   · SPACE — an 8-step rem scale plus two named panel-padding tokens.
   · COLOUR— four saturated hues + six pastel surfaces, two roles.
   ========================================================= */

:root {
  /* ---- type: 7 sizes, closed set. Display is DELIBERATELY oversized
     against a small body — scale contrast is the "modern" signal,
     not the hue (design review, 2026-07-29). ---- */
  --t-display: clamp(2.9rem, 8.6vw, 7rem);     /* h1 only */
  --t-title:   clamp(1.9rem, 4.2vw, 3.1rem);   /* h2, figures, mail, sheet nav */
  --t-lead:    clamp(1.05rem, 2.1vw, 1.42rem); /* pull quote, timeline detail head */
  --t-sub:     1rem;                           /* card/tile headings, lede */
  --t-body:    .875rem;                        /* prose, rows, table cells */
  --t-dense:   .75rem;                         /* chips, skills, bar labels */
  --t-tag:     .6875rem;                       /* every mono micro-label */

  --ls-tight:-0.045em; --tight:-0.045em;       /* --tight kept: legacy alias */
  --ls-label:.10em;    --ls-tag:.14em;

  /* ---- space: 8-step scale ---- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem;  --space-7:3rem;   --space-8:4rem;
  --pad-inline: clamp(1.15rem, 4vw, 4rem);
  --pad-shell-top:    clamp(5.5rem, 12vh, 8rem);
  --pad-shell-bottom: clamp(3.5rem, 8vh, 5rem);

  --rail: clamp(3.25rem, 5.5vw, 5.5rem);
  --radius:20px;
  --shadow:0 14px 40px rgba(16,16,24,.07);

  /* ---- colour ------------------------------------------------------
     FOUR saturated hues (shapes, bars, pills) + SIX pastel surfaces
     (tiles that text sits on). Two hues also carry MEANING:

     --accent-structure = BLUE #3B49F4. Timeline WORK bars, year axis,
                          progress ticks, focus rings, links on hover.
     --accent-human     = CORAL. The "open to work" pulse, avatars,
                          the hello pill. Person-signals only.

     HARD RULE, carried over intact: no hue except --accent-structure
     may encode timeline data (lane->shape, era->intensity,
     load->weight are the settled channels). Mint / sun / pastels are
     DECORATION and SURFACES only.

     CONTRAST MODEL: hues are surfaces. Ink #101018 measures on every
     pastel at 8:1+ and on all four saturated hues at 5.5:1+ (coral is
     the floor, 5.6). Blue is the ONLY hue ever used as small text, and
     it measures 5.8 on --bg. Nothing else may colour a word.
     ------------------------------------------------------------------ */
  --bg:#FAFAF7; --bg-2:#F1F0EA; --fg:#101018; --fg-soft:#3A3A48; --muted:#5E5E6A;
  --rule:rgba(16,16,24,.16); --rule-soft:rgba(16,16,24,.08);

  --hue-blue:#3B49F4;   --hue-blue-2:#2A36C8;
  --hue-purple:#8B5CF6; --hue-purple-2:#7443E8;
  --hue-green:#2BD9A0;  --hue-green-2:#18BD87;
  --hue-orange:#FF5A5F; --hue-orange-2:#F03F45;

  /* pastel surfaces + the text tokens that live on them. Tiles THEME:
     light pastel with ink text in light mode, deep muted hue with light
     text in dark. Nothing on a tile hardcodes a colour any more —
     everything goes through --tile-ink* so both themes stay legible. */
  --p-lav:#DDE1FF; --p-mint:#BFF3E2; --p-sand:#FFE3B3;
  --p-pink:#FFD6D7; --p-sky:#D2ECFF; --p-lilac:#EBDDFF;
  --tile-ink:#101018;
  --tile-ink-soft:rgba(16,16,24,.76);
  /* .68 not .55: at .55 the faint micro-labels (card numbers, fact keys,
     the .by lines) measured 3.86 on the lightest pastels. .68 -> 5.86. */
  --tile-ink-faint:rgba(16,16,24,.68);
  --chip-on-tile:rgba(255,255,255,.6);
  --chip-dim:rgba(16,16,24,.07);
  --chip-strong:rgba(255,255,255,.85);
  /* THE ANCHOR TILE (#person s1, #says q1) and the timeline's PAST bars are
     the two places where a theme can accidentally speak the other theme's
     language, so both are tokens, set per theme (owner, 2026-07-29).
     LIGHT is a pastel page: the anchor is the DEEPEST PASTEL (ink 11.02),
     not a saturated blue block, and a past bar is a soft neutral (13.64)
     rather than the charcoal it used to be. */
  --sticker-blue:#B9C2FF; --sticker-blue-ink:#101018;
  /* SURFACE hues vs TEXT hues — the distinction the dark theme kept losing.
     --hue-* are TEXT/line accents: pale in dark, so they read against the
     page. But three elements use a hue as a SURFACE WITH TEXT ON IT (the
     timeline bars, the diagram core, the hello pill), and a surface must go
     the other way: deep in dark, so light text sits on it. Those three use
     --accent-surface / --human-surface, never --hue-*.
     Thin accents (dots, rules, underlines, the progress bar) stay on
     --hue-* — a 2px line is not a surface. */
  --accent-surface:#3B49F4; --accent-surface-ink:#FAFAF7;
  --human-surface:#FF5A5F;  --human-surface-ink:#101018;
  --tl-past:#DCDBD4; --tl-past-ink:#101018; --tl-past-edge:rgba(16,16,24,.42);

  --accent-structure:var(--hue-blue); --accent-structure-2:var(--hue-blue-2);
  --accent-human:var(--hue-orange);   --accent-human-2:var(--hue-orange-2);
  --accent:var(--accent-structure); --accent-2:var(--accent-structure-2);

  --glow:rgba(59,73,244,.08);
  --surface:rgba(16,16,24,.045); --card:#FFFFFF;

  --font-display:"Helvetica Neue",Helvetica,Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme="dark"] {
  /* Dark is its own room, not the light room with the lights off: tiles
     become SATURATED versions of the same six hues (see below) and
     everything on a tile follows --tile-ink*. */
  --bg:#13141C; --bg-2:#1B1C27; --fg:#F1F1EC; --fg-soft:#C6C7D2; --muted:#A6A9BC;
  --rule:rgba(241,241,236,.18); --rule-soft:rgba(241,241,236,.08);

  /* Blue is the one hue used as text/bars against the page, so it is the
     one hue that changes for dark: #93A0FF measures 7.0 on this --bg. */
  --hue-blue:#93A0FF;   --hue-blue-2:#B4BDFF;
  --hue-purple:#C4B5FD; --hue-purple-2:#D6CCFE;
  --hue-green:#6EE7C0;  --hue-green-2:#98F0D4;
  --hue-orange:#FF8A8E; --hue-orange-2:#FFA8AB;

  --glow:rgba(147,160,255,.12);
  --surface:rgba(241,241,236,.06); --card:#1D1E2A;

  /* Dark tiles are SATURATED, not muted. First attempt used deep muted
     hues; the one tile that kept its saturation (the blue) was the only
     one that looked alive, so all six now match it (owner, 2026-07-29).
     Each is the darkest saturated point of its hue that still holds
     light text. Measured against #F1F1EC: lav 6.68 · lilac 6.07 ·
     mint 5.72 · sky 5.64 · sand 5.51 · pink 5.43.

     TWO CONSEQUENCES, both handled below:
     1. Faded text has far less room than it did on a near-black tile,
        so --tile-ink-soft/-faint run at .95/.90 here instead of
        .78/.58. Worst measured item: 4.67 (pink, faint).
     2. Chips on a tile must DARKEN it, not lighten it — a white tint
        raises the surface toward the text and killed contrast (3.84).
        Black tints instead: worst chip measures 7.67. */
  --p-lav:#3542C9; --p-mint:#0A6B52; --p-sand:#855700;
  --p-pink:#B03539; --p-sky:#12658F; --p-lilac:#6B3AC7;
  --tile-ink:#F1F1EC;
  --tile-ink-soft:rgba(241,241,236,.95);
  --tile-ink-faint:rgba(241,241,236,.90);
  --chip-on-tile:rgba(0,0,0,.24);
  --chip-dim:rgba(0,0,0,.22);
  --chip-strong:rgba(0,0,0,.34);
  /* DARK is a saturated page: the anchor keeps its saturated blue, and a
     past bar is a DEEP neutral (light text 11.49). It used to be --fg-soft,
     i.e. pale grey — a light-page colour sitting on a dark page. */
  --sticker-blue:#3542C9; --sticker-blue-ink:#F1F1EC;
  --tl-past:#2E3040; --tl-past-ink:#F1F1EC; --tl-past-edge:rgba(241,241,236,.42);
  /* Deep, because they carry text. #3542C9 holds #F1F1EC at 6.68,
     #B03539 at 5.43. Using --hue-blue here gave a PALE periwinkle bar with
     dark text — the light page's language on the dark page. */
  --accent-surface:#3542C9; --accent-surface-ink:#F1F1EC;
  --human-surface:#B03539;  --human-surface-ink:#F1F1EC;
}

*,*::before,*::after{box-sizing:border-box}

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--bg); }
@media (min-height:660px) and (min-width:700px){ html{ scroll-snap-type:y mandatory; } }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; scroll-snap-type:none; } }

body{
  margin:0; background:transparent; color:var(--fg);
  font-family:var(--font-display); font-variant-numeric:tabular-nums;
  line-height:1.5; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition:color .5s ease;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--accent-structure);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent-structure);outline-offset:3px;border-radius:4px}

.skip{position:fixed;left:-9999px;top:0;z-index:300;background:var(--fg);color:var(--bg);padding:var(--space-3) var(--space-4);font-family:var(--font-mono);font-size:var(--t-dense)}
.skip:focus{left:0}

/* ---------- living background ---------- */
#bg{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.wash{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  /* Two whispers of pastel, not four blobs of hue: the page itself stays
     warm white so the tiles are what carries the colour. Static. */
  background:
    radial-gradient(60vw 55vh at 88% 8%,  color-mix(in srgb,var(--p-lav)  55%,transparent), transparent 62%),
    radial-gradient(55vw 55vh at 6% 94%,  color-mix(in srgb,var(--p-mint) 45%,transparent), transparent 60%),
    var(--bg);
  transition:background .6s ease;
}
:root[data-theme="dark"] .wash{
  background:
    radial-gradient(60vw 55vh at 88% 8%,  rgba(147,160,255,.10), transparent 62%),
    radial-gradient(55vw 55vh at 6% 94%,  rgba(110,231,192,.07), transparent 60%),
    var(--bg);
}

/* ---------- chrome ---------- */
.masthead{
  position:fixed;top:0;left:0;right:0;z-index:60;height:66px;display:flex;align-items:center;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  background:color-mix(in srgb,var(--bg) 74%,transparent);
  box-shadow:0 1px 0 transparent;transition:box-shadow .35s ease,background .35s ease;
}
.masthead.stuck{box-shadow:0 10px 30px rgba(16,16,24,.08)}
:root[data-theme="dark"] .masthead.stuck{box-shadow:0 10px 30px rgba(0,0,0,.4)}
.shell{width:100%;max-width:1480px;margin-inline:auto;padding-inline:var(--pad-inline)}
.masthead .shell{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}

.wordmark{min-width:220px;font-size:var(--t-sub);font-weight:800;letter-spacing:var(--ls-tight);line-height:1}
.wordmark .a{color:var(--accent-structure)}
.wordmark small{display:block;margin-top:var(--space-1);font-family:var(--font-mono);font-size:var(--t-tag);font-weight:400;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

.nav{display:none;gap:clamp(var(--space-3),1.5vw,var(--space-5));align-items:center;font-size:var(--t-body)}
@media (min-width:900px){.nav{display:flex}}
.nav a{color:var(--muted);position:relative;padding-block:5px;transition:color .25s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;border-radius:2px;width:0;background:var(--hue-orange);transition:width .32s cubic-bezier(.22,1,.36,1)}
.nav a:hover,.nav a.on{color:var(--fg)}
.nav a:hover::after,.nav a.on::after{width:100%}

.tools{display:flex;gap:var(--space-2);align-items:center}
.tool-link{
  display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 var(--space-3);
  border-radius:999px;background:var(--fg);color:var(--bg);font-family:var(--font-mono);
  font-size:var(--t-tag);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  transition:transform .25s,background .25s;
}
.tool-link:hover{transform:translateY(-1px);background:var(--accent-structure);color:#fff}
.tool-link-pdf{background:var(--human-surface);color:var(--human-surface-ink)}
.btn-i{
  appearance:none;cursor:pointer;background:var(--surface);border:0;color:var(--fg);
  height:36px;min-width:36px;padding-inline:var(--space-2);display:inline-grid;place-items:center;
  border-radius:999px;font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:.06em;
  transition:background .25s,transform .25s;
}
.btn-i:hover{background:var(--p-lav);color:var(--tile-ink);transform:translateY(-1px)}
@media (max-width:1240px){.wordmark small{display:none}.wordmark{min-width:auto}}
@media (max-width:1040px){.tool-link{display:none}}

/* side dots */
.dots{position:fixed;right:clamp(.7rem,1.6vw,1.5rem);top:50%;z-index:55;transform:translateY(-50%);display:none;flex-direction:column;gap:var(--space-3)}
@media (min-width:820px) and (min-height:620px){.dots{display:flex}}
.dots button{appearance:none;background:transparent;border:0;cursor:pointer;width:26px;height:12px;padding:0;position:relative;display:grid;place-items:center}
.dots i{display:block;width:7px;height:7px;border-radius:50%;border:1px solid var(--muted);background:transparent;transition:all .35s cubic-bezier(.22,1,.36,1)}
.dots button[aria-current="true"] i{background:var(--accent-structure);border-color:var(--accent-structure);transform:scale(1.45);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-structure) 18%,transparent)}
.dots span{position:absolute;right:140%;white-space:nowrap;font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .3s,transform .3s}
.dots button:hover span,.dots button:focus-visible span{opacity:1;transform:none}

/* ---------- panels ---------- */
main{position:relative;z-index:1}
.panel{
  min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:0;
  position:relative;
}
.panel>.shell,.panel-rail{padding-block:var(--pad-shell-top) var(--pad-shell-bottom)}
.panel>.shell{grid-column:2;align-self:center}
@media (max-height:659px),(max-width:699px){
  .panel{min-height:0}
  .panel>.shell{padding-block:clamp(var(--space-6),10vh,var(--space-7))}
}

/* persistent panel rail. The border-right is gone (ruled-line kill);
   the index, name and progress thread carry the structure alone. */
.panel-rail{
  grid-column:1;grid-row:1;align-self:stretch;
  min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:clamp(var(--space-4),3vh,var(--space-6));
  font-family:var(--font-mono);font-size:var(--t-tag);line-height:1;
  letter-spacing:var(--ls-tag);text-transform:uppercase;color:var(--muted);
}
.panel-rail__index{flex:none}
.panel-rail__name{
  flex:none;writing-mode:vertical-rl;transform:rotate(180deg);
  white-space:nowrap;
}
.panel-rail__progress{
  position:relative;flex:1 1 auto;width:2px;min-height:var(--space-6);
  margin-top:auto;background:var(--rule-soft);border-radius:2px;
}
.panel-rail__progress::after{
  content:"";position:absolute;inset:0 0 auto;width:2px;height:0;border-radius:2px;background:var(--accent-structure);
}
.panel:nth-of-type(1) .panel-rail__progress::after{height:10%}
.panel:nth-of-type(2) .panel-rail__progress::after{height:20%}
.panel:nth-of-type(3) .panel-rail__progress::after{height:30%}
.panel:nth-of-type(4) .panel-rail__progress::after{height:40%}
.panel:nth-of-type(5) .panel-rail__progress::after{height:50%}
.panel:nth-of-type(6) .panel-rail__progress::after{height:60%}
.panel:nth-of-type(7) .panel-rail__progress::after{height:70%}
.panel:nth-of-type(8) .panel-rail__progress::after{height:80%}
.panel:nth-of-type(9) .panel-rail__progress::after{height:90%}
.panel:nth-of-type(10) .panel-rail__progress::after{height:100%}

/* rails */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.rail-ctrl{display:flex;align-items:center;gap:var(--space-2)}
.rail-ctrl .count{font-family:var(--font-mono);font-size:var(--t-tag);color:var(--muted);letter-spacing:.08em;min-width:64px;text-align:center}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(258px,30%);gap:clamp(var(--space-3),1.6vw,var(--space-4));overflow-x:auto;scroll-snap-type:x mandatory;padding:clamp(var(--space-4),3vw,var(--space-6)) 0 var(--space-4);scrollbar-width:thin}
@media (max-width:780px){.rail{grid-auto-columns:minmax(240px,82%)}}
.rail::-webkit-scrollbar{height:4px}
.rail::-webkit-scrollbar-thumb{background:var(--rule);border-radius:4px}

/* cards = pastel tiles. Text on a tile is ALWAYS ink, whatever the theme:
   the tile is a bright object, not a themed surface. Six pastels cycle. */
.card{scroll-snap-align:start;border:0;border-radius:var(--radius);background:var(--p-lav);color:var(--tile-ink);padding:clamp(var(--space-4),2.2vw,var(--space-5));display:flex;flex-direction:column;gap:var(--space-2);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .3s}
.rail .card:nth-child(6n+2){background:var(--p-mint)}
.rail .card:nth-child(6n+3){background:var(--p-sand)}
.rail .card:nth-child(6n+4){background:var(--p-pink)}
.rail .card:nth-child(6n+5){background:var(--p-sky)}
.rail .card:nth-child(6n+6){background:var(--p-lilac)}
.card:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:var(--shadow)}
.card-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2)}
.card-n{font-family:var(--font-mono);font-size:var(--t-tag);color:var(--tile-ink-faint);letter-spacing:.08em}
.card-tag{font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:.09em;text-transform:uppercase;color:var(--tile-ink);background:var(--chip-on-tile);border:0;border-radius:999px;padding:var(--space-1) var(--space-3)}
.card h3{margin:0;font-size:var(--t-sub);font-weight:800;letter-spacing:var(--ls-tight);line-height:1.22}
.card p{margin:0;font-size:var(--t-body);line-height:1.5;color:var(--tile-ink-soft)}
.card-link{align-self:flex-start;margin-top:auto;padding-top:var(--space-2);font-family:var(--font-mono);font-size:var(--t-tag);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tile-ink);text-decoration:none;border-bottom:1px solid currentColor}
.card-link:hover,.card-link:focus-visible{color:var(--accent-surface);border-bottom-color:currentColor}
.card .facts{margin-top:auto;padding-top:var(--space-3);display:grid;gap:var(--space-1)}
.card .fact{display:flex;justify-content:space-between;gap:var(--space-2);font-size:var(--t-dense)}
.card .fact dt{color:var(--tile-ink-faint);font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:.07em;text-transform:uppercase}
.card .fact dd{margin:0;color:var(--tile-ink);text-align:right;font-weight:700}

.diagram{width:100%;height:auto;display:block;max-height:min(30vh,290px);margin-top:var(--space-2)}
.diagram text{font-family:var(--font-mono);fill:var(--muted)}
.diagram .nd{fill:var(--card);stroke:var(--rule-soft)}
.diagram .core{fill:var(--accent-surface);stroke:var(--accent-surface)}
.diagram .lb{fill:var(--fg);font-weight:700}
.diagram .lb-i{fill:var(--accent-surface-ink);font-weight:700}
.diagram .ed{stroke:var(--rule);fill:none;stroke-width:1.4;stroke-dasharray:5 5}
.panel.seen .diagram .ed{stroke:color-mix(in srgb,var(--accent-structure) 62%,transparent);animation:flow 2.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-90}}
.diagram .gate{fill:none;stroke:var(--hue-orange);stroke-width:1.6}
.diagram .base{fill:var(--surface);stroke:var(--rule-soft)}

/* values — the kit. Pastel tiles with a real gap; the 1px-rule grid is gone. */
.values{display:grid;gap:clamp(var(--space-3),1.4vw,var(--space-4));margin-top:clamp(var(--space-4),3vw,var(--space-6))}
@media (min-width:700px){.values{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1120px){.values{grid-template-columns:repeat(4,1fr)}}
.value{background:var(--p-lav);color:var(--tile-ink);border-radius:var(--radius);padding:clamp(var(--space-4),2.2vw,var(--space-5));display:flex;flex-direction:column;gap:var(--space-2);position:relative;overflow:hidden;transition:transform .3s}
.values .value:nth-child(4n+2){background:var(--p-mint)}
.values .value:nth-child(4n+3){background:var(--p-sand)}
.values .value:nth-child(4n+4){background:var(--p-sky)}
.value:hover{transform:translateY(-4px)}
.value .vn{font-family:var(--font-mono);font-size:var(--t-tag);color:var(--tile-ink-faint);letter-spacing:var(--ls-label);text-transform:uppercase}
.value h3{margin:0;font-size:var(--t-sub);font-weight:800;letter-spacing:var(--ls-tight);line-height:1.22}
.value p{margin:0;font-size:var(--t-body);line-height:1.5;color:var(--tile-ink-soft)}

/* the method — six moves as staggered tiles (Variant B board, kept 1:1).
   Odd tiles sit 14px lower; that offset IS the playfulness, no motion needed. */
/* SIX moves — the count is a fact (the framework has six stages, and he
   says six in an interview), so the differentiation from the other tile
   sections is done with SHAPE, not number. Widths run wide->narrow then
   narrow->wide across two rows, so the strip reads as a rhythm instead
   of a uniform six-across row that rhymes with #says and #glance. */
.moves{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(var(--space-3),1.4vw,var(--space-4));margin-top:clamp(var(--space-4),2.6vw,var(--space-6));align-items:stretch}
@media (min-width:1051px){
  .move:nth-child(1){grid-column:span 5}
  .move:nth-child(2){grid-column:span 4}
  .move:nth-child(3){grid-column:span 3}
  .move:nth-child(4){grid-column:span 3}
  .move:nth-child(5){grid-column:span 4}
  .move:nth-child(6){grid-column:span 5}
}
@media (max-width:1050px){.moves{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.moves{grid-template-columns:repeat(2,1fr)}}
.move{border-radius:var(--radius);padding:var(--space-4);color:var(--tile-ink);display:flex;flex-direction:column;gap:var(--space-2);min-height:150px;transition:transform .3s}
.move:hover{transform:translateY(-4px)}
.move.m1{background:var(--p-lav)}.move.m2{background:var(--p-mint)}.move.m3{background:var(--p-sand)}
.move.m4{background:var(--p-pink)}.move.m5{background:var(--p-sky)}.move.m6{background:var(--p-lilac)}
.move .mn{font-family:var(--font-mono);font-size:var(--t-tag);font-weight:700;color:var(--tile-ink-faint);letter-spacing:.1em}
.move h3{margin:0;font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:800;letter-spacing:var(--ls-tight)}
.move p{margin:0;font-size:var(--t-body);line-height:1.45;color:var(--tile-ink-soft)}

/* the person — a sticker board. Six values, six shapes: the one section
   where the tiles get to be a composition instead of a grid. Sizes and
   rotations differ on purpose (uniform size = flat, per the design
   review); the radii differ so each value has its own silhouette. */
.board{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(clamp(4.6rem,10vh,7rem),auto);gap:clamp(var(--space-3),1.4vw,var(--space-4));margin-top:clamp(var(--space-5),3vw,var(--space-6))}
.sticker{border-radius:var(--radius);padding:clamp(var(--space-4),2vw,var(--space-5));color:var(--tile-ink);display:flex;flex-direction:column;gap:var(--space-2);justify-content:flex-end;transition:transform .3s}
.sticker:hover{transform:translateY(-4px)}
.sticker h3{margin:0;font-size:clamp(1.15rem,1.9vw,1.7rem);font-weight:800;letter-spacing:var(--ls-tight);line-height:1.05}
.sticker p{margin:0;font-size:var(--t-body);line-height:1.45;color:var(--tile-ink-soft);max-width:34ch}
.sticker .by{font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:.09em;text-transform:uppercase;color:var(--tile-ink-faint);margin-top:var(--space-1)}
/* SEVEN stickers. Hierarchy comes from SIZE and from the one saturated
   anchor — NOT from shape. An earlier pass gave each tile its own
   silhouette (a dome, a teardrop, a leaf, a circle) and the result read
   as awkward rather than playful (owner, 2026-07-29), because seven
   competing outlines have no system behind them. One radius now, no
   rotations, everything on a strict 12-column grid:

     row 1-2 |  TRANSPARENCY (tall anchor)  | Structure  | Respect  |
     row 2   |                             | Accountab. | Integrity|
     row 3   |  Growth                     | the flaw   |  (empty) |

   The last three columns of row 3 stay empty on purpose, so the small
   honest card at the end has air around it instead of a neighbour. */
.sticker.s1{background:var(--sticker-blue);color:var(--sticker-blue-ink);justify-content:flex-end}
.sticker.s1 p{color:color-mix(in srgb,var(--sticker-blue-ink) 92%,transparent)}
.sticker.s1 .by{color:color-mix(in srgb,var(--sticker-blue-ink) 88%,transparent)}
.sticker.s1 h3{font-size:clamp(1.5rem,2.6vw,2.3rem)}
.sticker.s2{background:var(--p-lav)}
.sticker.s3{background:var(--p-mint)}
.sticker.s4{background:var(--p-pink)}
.sticker.s5{background:var(--p-lilac)}
.sticker.s6{background:var(--p-sand)}
/* the managed flaw: the only neutral surface on the board, and the
   smallest type. It should read as an aside, not as a seventh value. */
.sticker.s7{background:var(--card);box-shadow:var(--shadow);color:var(--fg)}
.sticker.s7 h3{font-size:var(--t-sub)}
.sticker.s7 p{color:var(--fg-soft);font-size:var(--t-dense)}
.sticker.s7 .by{color:var(--muted)}
@media (min-width:901px){
  .sticker.s1{grid-column:1/6;grid-row:1/3}
  .sticker.s2{grid-column:6/10;grid-row:1/2}
  .sticker.s3{grid-column:10/13;grid-row:1/2}
  .sticker.s4{grid-column:6/10;grid-row:2/3}
  .sticker.s5{grid-column:10/13;grid-row:2/3}
  .sticker.s6{grid-column:1/6;grid-row:3/4}
  .sticker.s7{grid-column:6/10;grid-row:3/4}
}
@media (max-width:900px){
  .board{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
  .sticker{min-height:9rem}
  .sticker.s1,.sticker.s7{grid-column:1/-1}
  .sticker.s7{min-height:0}
}
/* the register test, as a small tilted ink pill under the board */
.register{margin:clamp(var(--space-5),3vw,var(--space-6)) 0 0;display:flex}
.register span{display:inline-block;background:var(--fg);color:var(--bg);font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:.09em;text-transform:uppercase;border-radius:999px;padding:var(--space-2) var(--space-4);transform:rotate(-1deg)}

/* says — a WALL of seven quote tiles, all on screen at once. The old
   carousel showed one at a time behind a 6.5s timer, which hid the
   evidence this panel exists to present. Tile q1 is the same saturated
   blue as sticker s1 on #person, on purpose: Transparency is the
   headline value in both panels and the colour carries the link. */
.says{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(var(--space-3),1.3vw,var(--space-4));
  align-items:stretch;margin-top:clamp(var(--space-4),2.4vw,var(--space-5));
}
.quote{
  /* margin:0 is load-bearing: <figure> carries a UA margin of 1em 40px.
     It was invisible while these were position:absolute; as grid items
     it made every tile 80px narrower than its own column. */
  margin:0;
  display:flex;flex-direction:column;gap:var(--space-3);
  border-radius:var(--radius);padding:clamp(var(--space-3),1.6vw,var(--space-4));
  background:var(--p-lav);color:var(--tile-ink);
  transition:transform .3s;
}
.quote:hover{transform:translateY(-4px)}
.quote.q1{grid-column:span 2;background:var(--sticker-blue);color:var(--sticker-blue-ink)}
.quote.q2{background:var(--p-lav)}
.quote.q3{background:var(--p-mint)}
.quote.q4{background:var(--p-sand)}
.quote.q5{background:var(--p-sky)}
.quote.q6{background:var(--p-pink)}
.quote.q7{background:var(--p-lilac)}
/* The value each quote evidences — the SAME name used on #person. */
.quote .vlabel{
  align-self:flex-start;display:inline-flex;align-items:center;margin:0;
  font-family:var(--font-mono);font-size:var(--t-tag);line-height:1;
  letter-spacing:var(--ls-tag);text-transform:uppercase;color:var(--tile-ink);
  background:var(--chip-on-tile);border-radius:999px;padding:var(--space-2) var(--space-3);
}
/* chips on the anchor use the SAME theme tokens as every other tile: they
   lighten on the light page and darken on the dark one. Hardcoding a dark
   tint here fixed dark and broke light. */
.quote.q1 .vlabel{color:var(--sticker-blue-ink);background:var(--chip-on-tile)}
.quote blockquote{margin:0;font-size:var(--t-body);font-weight:600;letter-spacing:0;line-height:1.4;color:var(--tile-ink)}
.quote.q1 blockquote{font-size:var(--t-sub);color:var(--sticker-blue-ink)}
.quote blockquote::before{content:"\201C"}
.quote blockquote::after{content:"\201D"}
.quote figcaption{margin-top:auto;padding-top:var(--space-2);display:flex;align-items:center;gap:var(--space-2)}
.avatar{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--chip-strong);color:var(--tile-ink);font-weight:800;font-size:var(--t-dense);letter-spacing:-.02em}
.quote.q1 .avatar{background:var(--chip-strong);color:var(--sticker-blue-ink)}
.who b{display:block;font-size:var(--t-dense);font-weight:800;letter-spacing:var(--ls-tight)}
.who span{font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:.06em;text-transform:uppercase;color:var(--tile-ink-faint)}
.quote.q1 .who span{color:color-mix(in srgb,var(--sticker-blue-ink) 88%,transparent)}
@media (max-width:1050px){
  .says{grid-template-columns:repeat(2,1fr)}
  .quote.q1{grid-column:span 2}
}
@media (max-width:620px){
  .says{grid-template-columns:1fr}
  .quote.q1{grid-column:span 1}
}

/* talk */
.talk{display:grid;gap:clamp(var(--space-5),4vw,var(--space-7));margin-top:clamp(var(--space-4),2.5vw,var(--space-5))}
@media (min-width:880px){.talk{grid-template-columns:1.15fr 1fr;align-items:start}}
.mail{display:inline-block;max-width:100%;font-size:var(--t-title);font-weight:800;letter-spacing:var(--ls-tight);line-height:1.2;overflow-wrap:anywhere;position:relative;margin-top:clamp(var(--space-4),2.5vw,var(--space-5))}
.mail::after{content:"";position:absolute;left:0;bottom:.05em;width:100%;height:3px;border-radius:3px;background:var(--accent-structure);transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.mail:hover{color:var(--accent-structure)}
.mail:hover::after{transform:scaleX(1);transform-origin:left}
.rows{background:var(--card);border-radius:var(--radius);padding:var(--space-2) var(--space-4);box-shadow:var(--shadow)}
.rows a,.rows div{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--rule-soft);font-size:var(--t-body);transition:padding-left .3s cubic-bezier(.22,1,.36,1),color .25s}
.rows a:last-child,.rows div:last-child{border-bottom:0}
.rows a:hover{padding-left:var(--space-2);color:var(--accent-structure)}
.rows .k{font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted)}
.fine{margin-top:var(--space-4);font-size:var(--t-body);color:var(--muted);line-height:1.6}
.mini{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.mini span{font-size:var(--t-dense);color:var(--fg-soft);background:var(--surface);border:0;border-radius:999px;padding:var(--space-2) var(--space-3)}
.mini span.go{color:var(--tile-ink);background:var(--p-mint)}
/* Chips that sit ON a pastel tile (the kit) must NOT theme-flip: the tile
   stays light in dark mode, so themed text goes light-on-light and vanishes.
   On a tile, chip text is always ink — owned tools on a solid white chip,
   merely-used ones on an ink tint. */
.value .mini span{color:var(--tile-ink-soft);background:var(--chip-dim)}
.value .mini span.go{color:var(--tile-ink);background:var(--chip-strong);font-weight:700}

/* status */
.status{position:fixed;left:0;right:0;bottom:0;z-index:58;height:34px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--rule-soft);font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.status .shell{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.status .l,.status .r{display:flex;align-items:center;gap:var(--space-2);white-space:nowrap}
.status .sep{opacity:.4}
@media (max-width:640px){.status .sm{display:none}}
.bar{position:absolute;top:-2px;left:0;height:3px;width:0;border-radius:0 3px 3px 0;background:var(--accent-structure)}

/* sheet */
.sheet{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;padding:clamp(var(--space-4),4vw,var(--space-6));transform:translateY(-100%);visibility:hidden;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.sheet.open{transform:none;visibility:visible}
.sheet-top{display:flex;justify-content:space-between;align-items:center}
.sheet nav{margin:auto 0;display:flex;flex-direction:column;gap:var(--space-1)}
.sheet nav a{font-size:var(--t-title);font-weight:800;letter-spacing:var(--ls-tight)}
.sheet nav a i{font-family:var(--font-mono);font-size:var(--t-tag);font-style:normal;color:var(--accent-structure);letter-spacing:var(--ls-label);vertical-align:super;margin-right:var(--space-2)}
.sheet-foot{font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* reveal */
.up{opacity:1;transform:none}
.js .up{opacity:0;transform:translateY(20px)}
.js .hello .up{opacity:1!important;transform:none!important}
.js .panel.seen .up{opacity:1;transform:none;transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1)}
.panel.seen .up:nth-child(2){transition-delay:.06s}
.panel.seen .up:nth-child(3){transition-delay:.12s}
.panel.seen .up:nth-child(4){transition-delay:.18s}
.panel.seen .up:nth-child(5){transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  .up{opacity:1!important;transform:none!important}
  .tl-seg{transform:scaleX(1)!important}
  .tl-seg>span{opacity:1!important}
  .flow-track::after{width:83.34%!important;transition:none}
  .fstep::before{transform:scale(1)!important;opacity:1!important;background:var(--accent-structure)!important;border-color:var(--accent-structure)!important}
  .panel.seen .diagram .ed,.pulse,.hint::after{animation:none!important}
  .quote{opacity:1;transform:none}
}

.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:clamp(var(--space-4),2.4vw,var(--space-5))}
.eyebrow i{width:8px;height:8px;background:var(--hue-orange);border-radius:50%}

h1,h2{margin:0;letter-spacing:var(--ls-tight);line-height:1.02;font-weight:800}
h1{font-size:var(--t-display)}
h2{font-size:var(--t-title);max-width:20ch}
.lede{margin:clamp(var(--space-4),2.4vw,var(--space-5)) 0 0;max-width:54ch;color:var(--fg-soft);font-size:var(--t-sub);line-height:1.6}

/* hello */
.hello h1 em{font-style:normal;color:var(--accent-structure)}
/* the hello pill — coral, tilted, ink text (ink on coral measures 5.6:1) */
.hi{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--human-surface);color:var(--human-surface-ink);font-weight:700;font-size:var(--t-body);border-radius:999px;padding:var(--space-2) var(--space-4);transform:rotate(-2deg);margin-bottom:clamp(var(--space-4),2.4vw,var(--space-5))}
.hi .pulse{background:var(--human-surface-ink)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:clamp(var(--space-5),3vw,var(--space-6))}
.chip{font-weight:700;font-size:var(--t-body);letter-spacing:0;text-transform:none;color:var(--tile-ink);border:0;border-radius:999px;padding:var(--space-2) var(--space-4);display:inline-flex;align-items:center;gap:var(--space-2);background:var(--p-lav)}
.chips .chip:nth-child(2){background:var(--p-mint)}
.chips .chip:nth-child(3){background:var(--p-sand)}
.chips .chip:nth-child(4){background:var(--p-pink)}
.chip.live{background:var(--human-surface);color:var(--human-surface-ink)}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--hue-orange);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--hue-orange) 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hint{position:absolute;left:50%;bottom:clamp(var(--space-6),5vh,var(--space-7));transform:translateX(-50%);font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.hint::after{content:"";width:2px;border-radius:2px;height:34px;background:linear-gradient(var(--accent-structure),transparent);animation:drop 2.2s cubic-bezier(.22,1,.36,1) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* at a glance — six pastel tiles, big ink numbers. No 1px grid. */
.figures{display:grid;gap:clamp(var(--space-3),1.4vw,var(--space-4));margin-top:clamp(var(--space-5),3.5vw,var(--space-6));grid-template-columns:repeat(2,1fr)}
@media (min-width:680px){.figures{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1080px){.figures{grid-template-columns:repeat(6,1fr)}}
.figure{background:var(--p-lav);color:var(--tile-ink);border-radius:var(--radius);padding:clamp(var(--space-4),2.4vw,var(--space-5)) clamp(var(--space-3),1.8vw,var(--space-4));display:flex;flex-direction:column;gap:var(--space-2);transition:transform .3s}
.figures .figure:nth-child(2){background:var(--p-mint)}
.figures .figure:nth-child(3){background:var(--p-sand)}
.figures .figure:nth-child(4){background:var(--p-pink)}
.figures .figure:nth-child(5){background:var(--p-sky)}
.figures .figure:nth-child(6){background:var(--p-lilac)}
.figure:hover{transform:translateY(-4px)}
.figure .v{font-size:var(--t-title);font-weight:800;letter-spacing:var(--ls-tight);line-height:1}
.figure .v .u{color:var(--tile-ink-faint)}
.figure .l{font-size:var(--t-body);color:var(--tile-ink-soft);line-height:1.4}

.flow{margin-top:clamp(var(--space-5),4vw,var(--space-7));overflow-x:auto;padding-bottom:var(--space-1)}
.flow-track{min-width:660px;display:grid;grid-template-columns:repeat(6,1fr);position:relative;padding-top:30px}
.flow-track::before,.flow-track::after{content:"";position:absolute;top:11px;left:8.33%;height:3px;border-radius:3px}
.flow-track::before{right:8.33%;background:var(--rule-soft)}
.flow-track::after{width:0;background:var(--accent-structure);transition:width 1.7s cubic-bezier(.22,1,.36,1) .2s}
.panel.seen .flow-track::after{width:83.34%}
.fstep{text-align:center;position:relative;padding-inline:var(--space-1)}
.fstep::before{content:"";position:absolute;top:-25px;left:50%;margin-left:-6px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--rule);transform:scale(.4);opacity:0;transition:all .5s cubic-bezier(.22,1,.36,1)}
.panel.seen .fstep::before{transform:scale(1);opacity:1;background:var(--accent-structure);border-color:var(--accent-structure)}
.panel.seen .fstep:nth-child(1)::before{transition-delay:.25s}
.panel.seen .fstep:nth-child(2)::before{transition-delay:.52s}
.panel.seen .fstep:nth-child(3)::before{transition-delay:.79s}
.panel.seen .fstep:nth-child(4)::before{transition-delay:1.06s}
.panel.seen .fstep:nth-child(5)::before{transition-delay:1.33s}
.panel.seen .fstep:nth-child(6)::before{transition-delay:1.6s}
.fstep b{display:block;font-size:var(--t-body);font-weight:700}
.fstep span{display:block;margin-top:var(--space-1);font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* journey / timeline.
   The encoding is untouched: lane->shape, era->intensity, load->weight,
   and BLUE is still the only hue allowed to mean anything here. The axis
   line stays — it is data, not decoration. */
.journey{display:grid;gap:clamp(var(--space-4),3vw,var(--space-6))}
.tl-scroll{overflow-x:auto;padding-bottom:var(--space-2)}
.tl{min-width:940px}
.tl-years{
  position:relative;height:1.5rem;
  font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:.08em;color:var(--muted);
  border-bottom:1px solid var(--rule);
}
.tl-years span{position:absolute;bottom:var(--space-2);transform:translateX(-50%);white-space:nowrap}
.tl-years span:first-child{transform:none}
.tl-years span:last-child::after,.tl-years span::after{
  content:"";position:absolute;left:50%;top:calc(100% + 3px);width:1px;height:5px;background:var(--rule);
}
.tl-years span:first-child::after{left:0}
.tl-scale-note{
  margin:var(--space-3) 0 0;text-align:right;
  font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:var(--ls-tag);
  text-transform:uppercase;color:var(--muted);
}
.tl-lanes{position:relative;isolation:isolate;display:flow-root}
.tl-lane{position:relative;z-index:1;margin-top:var(--space-4)}
.tl-lane-name{font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--space-2)}
.tl-track{position:relative;height:46px}
.tl-seg{
  position:absolute;top:0;height:46px;min-width:26px;appearance:none;cursor:pointer;border:0;padding:0 var(--space-3);
  border-radius:12px;background:var(--accent-surface);color:var(--accent-surface-ink);
  display:flex;align-items:center;overflow:hidden;font-family:inherit;text-align:left;
  transform:scaleX(0);transform-origin:left;
  transition:transform .85s cubic-bezier(.22,1,.36,1),filter .25s,box-shadow .25s;
}
.panel.seen .tl-seg{transform:scaleX(1)}
.tl-seg>span{font-size:var(--t-dense);font-weight:700;white-space:nowrap;opacity:0;transition:opacity .4s ease .5s}
.tl-seg>.tl-load-label{
  flex:none;margin-left:auto;padding-left:var(--space-2);
  font-family:var(--font-mono);font-size:var(--t-tag);line-height:1;letter-spacing:.12em;text-transform:uppercase;
}
.panel.seen .tl-seg>span{opacity:1}
.tl-seg:hover{filter:brightness(1.08)}
.tl-seg[aria-pressed="true"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-structure) 30%,transparent)}
.tl-seg.parttime{top:20%;height:60%}
.tl-seg.past{background:var(--tl-past);color:var(--tl-past-ink);border:0}
.tl-seg.study{background:transparent;color:var(--accent-structure);border:1.5px dashed var(--accent-structure)}
.tl-seg.study.past{background:transparent;color:var(--muted);border:1.5px dashed var(--tl-past-edge)}

.tl-detail{border:0;border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);padding:clamp(var(--space-4),2.4vw,var(--space-5));display:grid;gap:var(--space-3);min-height:170px;align-content:start}
.tl-detail .when{font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent-structure)}
.tl-detail h3{margin:0;font-size:var(--t-lead);font-weight:800;letter-spacing:var(--ls-tight)}
.tl-detail h3 small{display:block;font-size:var(--t-body);font-weight:400;color:var(--muted);margin-top:var(--space-1);letter-spacing:0}
.tl-detail p{margin:0;color:var(--fg-soft);font-size:var(--t-body);line-height:1.55;max-width:70ch}
.tl-detail .ind{font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.tl-detail .ind:empty{display:none}
.tl-skills{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.tl-skills:empty{display:none}
.skill{
  font-size:var(--t-dense);line-height:1.1;padding:var(--space-1) var(--space-3);
  border:0;border-radius:999px;
  color:var(--tile-ink);background:var(--p-lav);
}
.tl-stats{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.stat{font-family:var(--font-mono);font-size:var(--t-tag);letter-spacing:.05em;border:0;border-radius:999px;padding:var(--space-1) var(--space-3);color:var(--tile-ink);background:var(--p-mint)}
.stat b{color:var(--tile-ink);font-weight:800}

/* short laptops: buy back vertical room so every panel still fits one screen. */
@media (max-height:980px) and (min-width:700px){
  :root{
    --pad-shell-top:    clamp(4.75rem, 10vh, 6rem);
    --pad-shell-bottom: clamp(2.5rem, 5vh, 3.5rem);
  }
  #lab .lede{display:none}
  .rail{padding-top:var(--space-4)}
  .diagram{max-height:min(26vh,220px)}
  .figures .figure{padding-block:var(--space-4)}
  .flow{margin-top:var(--space-4)}
  .move{min-height:170px;padding:var(--space-4)}
  .board{grid-auto-rows:minmax(clamp(4rem,8.4vh,6rem),auto)}
  .register{margin-top:var(--space-4)}
}

/* very short screens (720p laptops): trim the tallest panels further */
@media (max-height:800px) and (min-width:700px){
  :root{
    --pad-shell-top:    var(--space-8);
    --pad-shell-bottom: var(--space-5);
  }
  .journey{gap:var(--space-4)}
  .tl-lane{margin-top:var(--space-2)}
  .tl-scroll{padding-bottom:0}
  .tl-scale-note{margin-top:var(--space-1)}
  .tl-track{height:38px}
  .tl-seg{height:38px}
  .tl-detail{min-height:120px;padding:var(--space-3);gap:var(--space-2)}
  .tl-detail h3{font-size:var(--t-sub)}
  .tl-detail p{font-size:var(--t-dense);line-height:1.45}
  .skill{font-size:var(--t-tag);padding:0 var(--space-2)}
  .diagram{max-height:min(22vh,175px)}
  .rail{padding-top:var(--space-3);padding-bottom:var(--space-2)}
  .card{padding:var(--space-4)}
  .card p{font-size:var(--t-dense)}
  .move{min-height:118px;gap:var(--space-1);padding:var(--space-3)}
  .moves{margin-top:var(--space-4)}
  .move h3{font-size:1.05rem}
  .quote{padding:var(--space-3);gap:var(--space-2)}
  .sticker{padding:var(--space-3);gap:var(--space-1)}
  .board{grid-auto-rows:minmax(clamp(3.4rem,7.6vh,5rem),auto);margin-top:var(--space-4)}
  #person .lede{margin-top:var(--space-3)}
}

@media (max-width:900px){
  .panel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .panel>.shell{
    grid-column:1;grid-row:2;
    padding-block-start:clamp(var(--space-5),4vh,var(--space-6));
  }
  .panel-rail{
    grid-column:1;grid-row:1;align-self:start;
    margin-top:66px;padding:clamp(.65rem,2.5vw,.85rem) var(--pad-inline);
    flex-direction:row;justify-content:space-between;gap:var(--space-4);
  }
  .panel-rail__name{writing-mode:horizontal-tb;transform:none;text-align:right;white-space:normal}
  .panel-rail__progress{display:none}
}

/* print — collapses into a clean CV. Point sizes, a different medium. */
@media print{
  :root{--bg:#fff;--card:#fff;--fg:#000;--fg-soft:#222;--muted:#555;--rule:#bbb;--rule-soft:#ddd;
        --accent-structure:#3B49F4;--hue-orange:#B4373B;--shadow:none;--radius:0;
        --p-lav:#fff;--p-mint:#fff;--p-sand:#fff;--p-pink:#fff;--p-sky:#fff;--p-lilac:#fff}
  @page{margin:14mm}
  html{scroll-snap-type:none}
  #bg,.wash,.masthead,.status,.dots,.sheet,.hint,.panel-rail,.rail-ctrl,.tools{display:none!important}
  .panel{min-height:0;padding:0 0 10pt;display:block;break-inside:avoid}
  h1{font-size:21pt}h2{font-size:13pt;max-width:none}
  .lede{font-size:9.5pt;max-width:none}
  .rail{display:grid;grid-auto-flow:row;grid-template-columns:repeat(2,1fr);overflow:visible;gap:6pt}
  .card,.value,.figure,.tl-detail,.move,.sticker,.quote{break-inside:avoid;border:1px solid #bbb}
  .quote{opacity:1!important;transform:none!important;border:1px solid #bbb}
  .says{grid-template-columns:repeat(2,1fr);gap:6pt}
  .up{opacity:1!important;transform:none!important}
  .tl-seg{transform:scaleX(1)!important}.tl-seg>span{opacity:1!important}
  a{color:#000}
}