/* Direction F — INK
   Fork of Direction E (Material v3): same skeleton, content, and motion system —
   the material language swapped from machined chrome to ink pressed into paper.

   — every display-type moment runs through a live SVG ink-bleed pipeline
     (warp → dilate → blur → alpha threshold → paper-tooth displacement);
     UI text stays crisp. Defs live inline in each page.
   — hero name set in Erode 700, soaks in wet on load (ink.js animates the
     #ink-reveal primitives; markup defaults are the settled state)
   — hero panel is a live ink-wash: canvas metaballs under the #ink-goo filter
   — plates go from engraved metal to letterpress: printed bone stat with a
     double-strike ghost, rust registration marks
   — warmer blacks, heavier grain, fixed vignette — the cinematic grade */

:root {
  --void:#0a0908; --panel:#131110; --panel-2:#181613;
  --bone:#edeae3; --dim:#8e8e96; --faint:#5b5b63; --faint-text:#7c7c86;
  --line:rgba(237,234,227,.10); --line-2:rgba(237,234,227,.06);
  --mint:#a8d5b5; --blue:#b9c4dd; --rust:#ec2222;
  --r:20px; --r-lg:28px;
  --ease:cubic-bezier(.22,1,.36,1);
  --serif:'Erode', Georgia, serif;
  /* one typeface: Erode carries every layer, SF Mono the labels */
  --font-body:var(--serif); --font-display:var(--serif);
  --font-mono:"SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  background:var(--void); color:var(--bone);
  font-family:var(--serif); font-size:16px; line-height:1.6;
  overflow-x:hidden;
}
::selection { background:var(--bone); color:var(--void); }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
section[id] { scroll-margin-top:110px; }

.serif { font-family:var(--serif); font-weight:400; letter-spacing:0; }
.serif em, .serif i { font-style:italic; }
.mono { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
/* Erode carries the reading voice and the interface layer */
.nav, .btn, .skip { font-family:var(--font-body); }

/* ---------- focus layer ---------- */
a:focus-visible, .card:focus-visible, .c-item:focus-visible, .skip:focus-visible {
  outline:2px solid var(--bone); outline-offset:3px; border-radius:inherit;
}
a:focus:not(:focus-visible) { outline:none; }
.nav a:focus-visible { color:var(--bone); }
.skip {
  position:fixed; top:22px; left:22px; z-index:90; padding:11px 16px;
  background:var(--bone); color:var(--void); border-radius:999px;
  font-size:13px; font-weight:700; transform:translateY(-200%);
}
.skip:focus { transform:none; }

/* ---------- view transitions (card → cover morph, persistent nav) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .nav { view-transition-name: nav; }
  .card-vt { view-transition-name: cover; }
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration:.45s; animation-timing-function:var(--ease);
  }
  ::view-transition-group(cover) { animation-duration:.7s; animation-timing-function:var(--ease); }
}

/* ---------- atmosphere ---------- */
.grain {
  position:fixed; inset:0; z-index:70; pointer-events:none; opacity:.34;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="280" height="280"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/><feColorMatrix values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.45 0"/></filter><rect width="280" height="280" filter="url(%23n)"/></svg>');
  animation:grain 5s steps(5) infinite;
}
@keyframes grain {
  0%,100% { background-position:0 0; } 20% { background-position:70px 45px; }
  40% { background-position:-40px 90px; } 60% { background-position:110px -30px; }
  80% { background-position:-70px -60px; }
}
.glow {
  position:fixed; left:0; top:0; width:64vw; height:64vw; z-index:0; pointer-events:none;
  border-radius:50%; filter:blur(46px);
  background:radial-gradient(circle, rgba(237,234,227,.055) 0%, transparent 62%);
  transform:translate(calc(72vw - 32vw), calc(12vh - 32vw));
  will-change:transform;
}
/* cinematic vignette — corners fall away like a projected frame */
body::after {
  content:''; position:fixed; inset:0; z-index:69; pointer-events:none;
  background:radial-gradient(130% 105% at 50% 42%, transparent 52%, rgba(0,0,0,.42) 100%);
}

/* ---------- entrance choreography (all pages) ---------- */
.js .rise { animation:riseIn .9s var(--ease) both; }
.js .rise.d1 { animation-delay:.09s; }
.js .rise.d2 { animation-delay:.18s; }
.js .rise.d3 { animation-delay:.27s; }
.js .rise.d4 { animation-delay:.44s; }
@keyframes riseIn {
  from { opacity:0; transform:translateY(46px); }
  to   { opacity:1; transform:none; }
}

/* ---------- nav — floating glass pill, sliding highlight, filled current chip ---------- */
.nav {
  position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:60;
  display:flex; align-items:center; gap:2px; padding:7px;
  background:rgba(14,14,17,.6); border:1px solid var(--line);
  border-radius:999px;
  backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
  transition:background .4s linear, border-color .4s linear, box-shadow .4s linear;
}
.nav.scrolled {
  background:rgba(11,11,14,.84); border-color:rgba(237,234,227,.15);
  box-shadow:0 14px 44px rgba(0,0,0,.45);
}
.nav-hl {
  position:absolute; top:7px; left:0; height:calc(100% - 14px); width:60px;
  border-radius:999px; background:rgba(237,234,227,.09);
  border:1px solid rgba(237,234,227,.08);
  opacity:0; pointer-events:none;
  transition:transform .45s var(--ease), width .45s var(--ease), opacity .25s linear;
}
.nav a {
  position:relative; z-index:1; overflow:hidden; display:inline-block; white-space:nowrap;
  padding:11px 17px; border-radius:999px; font-size:13.5px; color:var(--dim);
  transition:color .3s linear, background .3s linear;
}
/* nav hovers speak ink — a fine stroke writes under the word, a pinprick
   blot at the pen-lift. Same grammar as every other small link. */
.nav a .w { display:inline-block; position:relative; }
.nav a:hover { color:var(--bone); }
.nav a .w::after {
  content:''; position:absolute; left:0; right:-.05em; bottom:-.16em;
  height:2px; border-radius:1px; background:var(--bone);
  transform:scaleX(0); transform-origin:0 50%; transition:transform .4s var(--ease);
  filter:url(#ink-line); pointer-events:none;
}
.nav a .w::before {
  content:''; position:absolute; right:-.42em; bottom:-.22em; width:5px; height:5px;
  border-radius:53% 47% 44% 56% / 49% 58% 42% 51%; background:var(--bone);
  transform:scale(0); transition:transform .35s var(--ease) .18s;
  filter:url(#ink-line); pointer-events:none;
}
.nav a:hover .w::after, .nav a:focus-visible .w::after { transform:scaleX(1); }
.nav a:hover .w::before, .nav a:focus-visible .w::before { transform:scale(1); }
.nav a.name .w::after, .nav a.name .w::before,
.nav a[aria-current] .w::after, .nav a[aria-current] .w::before { content:none; }
.nav a.name {
  display:inline-flex; align-items:center; gap:10px;
  color:var(--bone); font-weight:700; letter-spacing:-.01em; padding-left:9px;
}
.nav .orb {
  width:26px; height:26px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 42% 38%, var(--bone) 0 30%, rgba(237,234,227,.4) 46%, rgba(237,234,227,.08) 64%, transparent 72%), #0d0c0a;
  border:1px solid rgba(237,234,227,.25);
  box-shadow:inset 0 0 8px rgba(0,0,0,.5);
  transition:transform .9s var(--ease);
}
.nav a.name:hover .orb { transform:rotate(120deg); }
.nav a[aria-current] { color:var(--bone); }
.nav a[aria-current]:not(.name) {
  background:var(--bone); color:var(--void); font-weight:600;
}
.nav .stat {
  display:inline-flex; align-items:center; gap:8px; overflow:visible;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mint); padding:12px 16px 12px 14px; margin-left:4px;
  border-left:1px solid var(--line-2); border-radius:0 999px 999px 0;
}
.nav .stat .pip {
  width:7px; height:7px; border-radius:50%; background:var(--mint);
  box-shadow:0 0 10px var(--mint); animation:pip 2.6s ease infinite;
}
.nav .stat:hover { color:var(--bone); }

/* ---------- layout ---------- */
.wrap { position:relative; z-index:1; max-width:1440px; margin:0 auto; padding:0 clamp(18px,3.4vw,48px); }
.pad { padding-top:104px; }
section { margin-bottom:clamp(90px,11vw,170px); }

.sec-head {
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:18px;
  border-top:1px solid var(--line); padding-top:22px; margin-bottom:clamp(28px,4vw,52px);
}
.sec-head h2 {
  font-family:var(--serif); font-weight:700;
  font-size:clamp(44px,6vw,84px); line-height:1.0; letter-spacing:-.01em;
  text-wrap:balance;
}
.sec-head h2 em {
  font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:0; font-size:1.05em;
}

/* ---------- hero — the whole header is the ink story ---------- */
.hero { margin-bottom:clamp(70px,8vw,120px); }
.hero--full {
  position:relative; isolation:isolate; border-radius:var(--r-lg); overflow:hidden;
  min-height:min(calc(100svh - 126px), 1080px);
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(18px,2.6vw,30px);
  padding:clamp(20px,3vw,42px);
  background:
    repeating-linear-gradient(0deg, rgba(237,234,227,.016) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 20% -5%, rgba(237,234,227,.05), transparent 55%),
    linear-gradient(165deg, #15130f 0%, #0e0d0b 55%, #0a0908 100%);
}
.hero--full::before {
  content:''; position:absolute; inset:0; z-index:1; opacity:0; transition:opacity 1.6s linear;
  background:
    radial-gradient(38% 52% at 70% 30%, rgba(237,234,227,.14), transparent 70%),
    radial-gradient(24% 34% at 30% 74%, rgba(237,234,227,.08), transparent 70%),
    radial-gradient(16% 24% at 85% 66%, rgba(237,234,227,.07), transparent 70%);
}
.hero--full.live::before { opacity:.3; }
.hero--full::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(10,9,8,.78) 0%, rgba(10,9,8,.1) 30%, rgba(10,9,8,.08) 62%, rgba(10,9,8,.45) 100%);
}
.hero--full > * { position:relative; z-index:2; }
.hero--full .ink-canvas { z-index:0; }
.hero--full .hero-meta { margin-bottom:0; }
.hero--full .hero-name { margin:0 0 0 -.02em; mix-blend-mode:difference; }
.hero--full .fig { position:absolute; right:clamp(18px,2.6vw,34px); top:clamp(88px,13vh,150px); z-index:2; }
.hero--full .hp-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:26px; }
.hero-meta { display:flex; justify-content:space-between; gap:16px; margin-bottom:clamp(24px,3vw,44px); flex-wrap:wrap; }
.hero-meta a { padding:12px 0; margin:-12px 0; }
.hero-meta a:hover { color:var(--bone); }

/* the whole name is ONE pressed line — AJ HARRIS edge-to-edge, one size, so
   the lockup can't sit unbalanced. ink.js fits it to the measure exactly;
   the clamp is the no-JS fallback. */
.hero-name {
  position:relative; z-index:2;
  font-family:var(--serif); font-weight:700; letter-spacing:-.015em; line-height:.86;
  font-size:clamp(46px,15.4vw,230px); text-transform:uppercase;
  margin:0 0 -.08em -.02em;
}
.hero-name .line { display:block; }
.hero-name .sp { display:inline-block; width:.26em; }
.hero-name .lm { display:inline-block; }

/* live ink-wash panel (ink.js) — canvas runs through the #ink-goo threshold
   filter; a static CSS blot underneath carries no-JS and reduced motion */
.ink-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; opacity:0; transition:opacity 1.6s linear;
  filter:url(#ink-goo);
}
.hero--full.live .ink-canvas { opacity:1; }
/* the field needs a cursor to exist — on touch it can only draw faint washes,
   at the cost of re-running #ink-goo over the hero every frame (ink.js skips
   the loop to match) */
@media (pointer: coarse) { .ink-canvas { display:none; } }

.fig { color:rgba(237,234,227,.78); }
.hero-line {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(22px,2.6vw,40px); line-height:1.18; max-width:24ch;
  text-wrap:balance;
  text-shadow:0 1px 4px rgba(10,9,8,.7), 0 2px 22px rgba(10,9,8,.85);
}
.hero-line em { font-style:italic; }
.hero-facts { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }

.chip {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bone); padding:9px 15px; border-radius:999px;
  border:1px solid rgba(237,234,227,.22); background:rgba(8,8,10,.5);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.chip .pip { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint); animation:pip 2.6s ease infinite; }
@keyframes pip { 0%,100% { opacity:1; } 50% { opacity:.35; } }

.btn {
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  background:var(--bone); color:var(--void); font-weight:700; font-size:14px;
  padding:14px 22px; border-radius:999px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.btn .go-arr { display:inline-block; transition:transform .4s var(--ease); }
.btn:hover, .btn:focus-visible { transform:translateY(-2px); box-shadow:0 16px 44px rgba(237,234,227,.22); }
.btn:hover .go-arr, .btn:focus-visible .go-arr { transform:translateX(5px); }

/* ---------- marquee ---------- */
.marquee {
  overflow:hidden; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  padding:clamp(18px,2.6vw,34px) 0; margin-bottom:clamp(90px,11vw,170px);
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.mtrack { display:flex; width:max-content; animation:mslide 52s linear infinite; will-change:transform; }
.js .mtrack { animation:none; } /* JS drives it with scroll velocity */
.mtrack .half { display:flex; align-items:baseline; white-space:nowrap; }
.mtrack span {
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(40px,5.6vw,86px); line-height:1; color:var(--faint); padding-right:.55em;
}
.mtrack .dot { color:rgba(237,234,227,.18); font-style:normal; }
@keyframes mslide { to { transform:translateX(-50%); } }

/* ---------- work cards ---------- */
.grid {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(16px,2vw,26px); padding-bottom:30px; align-items:start;
}
.card {
  --mx:50%; --my:50%;
  position:relative; display:block; border-radius:var(--r-lg); overflow:hidden;
  background:var(--panel); border:1px solid var(--line-2);
  transition:transform .55s var(--ease), border-color .4s linear;
}
.card--wide { grid-column:1 / -1; }
.card:hover, .card:focus-visible { transform:translateY(-8px); border-color:var(--line); }
.card::after {
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(560px circle at var(--mx) var(--my), rgba(237,234,227,.075), transparent 42%);
  opacity:0; transition:opacity .45s linear;
}
.card:hover::after { opacity:1; }
.card .num {
  position:absolute; top:16px; left:20px; z-index:2;
  display:flex; align-items:baseline; gap:7px;
  font-family:var(--serif); font-style:italic; font-size:clamp(26px,2.4vw,36px);
  color:rgba(237,234,227,.8); text-shadow:0 2px 18px rgba(8,8,10,.8);
}
.card .num .fx {
  font-family:var(--font-mono); font-style:normal; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(237,234,227,.78);
}
/* the corner arrow is a blot that blooms — same mark the spine leaves at a chapter */
.card .go {
  position:absolute; top:16px; right:16px; z-index:2;
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--bone);
  border-radius:52% 48% 45% 55% / 50% 57% 43% 50%;
  opacity:0; transform:scale(.2) rotate(-14deg);
  transition:opacity .3s linear, transform .55s var(--ease);
  filter:url(#ink-lg);
}
.card:hover .go, .card:focus-visible .go { opacity:1; transform:scale(1) rotate(0deg); }
.card .go svg { width:16px; height:16px; stroke:var(--void); }

.card-media { position:relative; aspect-ratio:4/2.9; overflow:hidden; background:var(--panel-2); }
.card--wide .card-media { aspect-ratio:21/8; }
.card-media::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:var(--grain) 0 0 / 220px 220px, radial-gradient(80% 60% at 50% 110%, rgba(0,0,0,.45), transparent 70%); opacity:.28; mix-blend-mode:screen; }
.card-media .ph { z-index:2; }
.card-media > img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.82); transform:scale(1.05);
  transition:transform 1.4s var(--ease);
}
.card:hover .card-media > img { transform:scale(1.11); }

.device {
  position:absolute; left:13%; right:13%; bottom:-2px; height:66%;
  background:rgba(10,10,13,.92); border:1px solid rgba(237,234,227,.16); border-bottom:0;
  border-radius:14px 14px 0 0; box-shadow:0 30px 70px rgba(0,0,0,.55);
  transition:transform .9s var(--ease);
}
.card--wide .device { left:8%; right:8%; height:80%; }
.card:hover .device { transform:translateY(-10px); }
.device .bar { height:24px; display:flex; align-items:center; gap:5px; padding:0 11px; border-bottom:1px solid rgba(237,234,227,.08); }
.device .bar i { width:6px; height:6px; border-radius:50%; background:rgba(237,234,227,.2); }
.device .screen { padding:13px; display:flex; flex-direction:column; gap:9px; }
.device .screen b { height:8px; border-radius:4px; background:rgba(237,234,227,.12); width:72%; }
.device .screen b:nth-child(2) { width:46%; opacity:.7; }
.device .screen b:nth-child(3) { width:60%; opacity:.45; }
.device .screen .row { display:flex; gap:9px; }
.device .screen .row i { flex:1; height:36px; border-radius:7px; background:rgba(237,234,227,.06); border:1px solid rgba(237,234,227,.05); }
.device .screen .shot { width:100%; height:100%; object-fit:cover; object-position:top; filter:saturate(.72); }
.device:has(.shot) .screen, .device .screen:has(.shot) { padding:0; }
.device.phone { left:33%; right:33%; height:74%; border-radius:20px 20px 0 0; }
.card--wide .device.phone { left:38%; right:38%; height:82%; }
.device.phone .bar { justify-content:center; }
.device.phone .bar i { width:30px; height:4px; border-radius:2px; }

/* richer skeleton product UI inside the devices (until real screens land) */
.device { overflow:hidden; }
.screen.ui { flex-direction:row; gap:11px; height:calc(100% - 24px); }
.s-side { width:21%; display:flex; flex-direction:column; gap:8px; padding-top:3px; }
.s-side i { height:7px; border-radius:4px; background:rgba(237,234,227,.08); width:86%; }
.s-side i.on { background:rgba(237,234,227,.24); }
.s-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
.s-t { height:9px; width:38%; border-radius:4px; background:rgba(237,234,227,.17); }
.s-stats { display:flex; gap:8px; }
.s-stats i { flex:1; height:26px; border-radius:6px; background:rgba(237,234,227,.06); border:1px solid rgba(237,234,227,.07); }
.s-chart { flex:1; display:flex; align-items:flex-end; gap:6px; min-height:30px; }
.s-chart i {
  flex:1; border-radius:3px 3px 0 0;
  background:linear-gradient(to top, rgba(237,234,227,.05), rgba(237,234,227,.17));
  height:calc(var(--h) * 58%);
  transition:height .8s var(--ease); transition-delay:calc(var(--b) * 45ms);
}
.card:hover .s-chart i { height:calc(var(--h) * 100%); }
.screen.pui { flex-direction:column; gap:9px; height:calc(100% - 24px); }
.screen.pui .s-t { width:52%; }
.screen.pui .s-stats i { height:30px; }
.s-list { flex:1; display:flex; flex-direction:column; gap:7px; min-height:0; }
.s-list i { height:22px; flex:none; border-radius:6px; background:rgba(237,234,227,.06); border:1px solid rgba(237,234,227,.05); }
.s-tab { display:flex; gap:6px; margin-top:auto; }
.s-tab i { flex:1; height:5px; border-radius:3px; background:rgba(237,234,227,.08); }
.s-tab i.on { background:rgba(237,234,227,.26); }

.card-body { padding:clamp(18px,2vw,28px); }
.card--wide .card-body { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:end; }
.card--wide .card-body .outcomes { justify-content:flex-end; }
.tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.tag {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--line); border-radius:999px; padding:5px 11px;
}
.tag.shipped { color:var(--mint); border-color:rgba(168,213,181,.35); }
.tag.study { color:var(--blue); border-color:rgba(185,196,221,.3); }
.card-body h3 { font-weight:700; font-size:clamp(21px,1.9vw,27px); letter-spacing:-.015em; margin-bottom:8px; text-wrap:balance; }
.card--wide .card-body h3 { font-size:clamp(26px,2.6vw,40px); }
.card-body p { color:var(--dim); font-size:14.5px; line-height:1.5; max-width:52ch; margin-bottom:18px; text-wrap:pretty; }
.card--wide .card-body p { max-width:60ch; margin-bottom:0; }
.outcomes { display:flex; flex-wrap:wrap; gap:7px; }
.outcome {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  color:var(--bone); background:var(--panel-2); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px;
}
.outcome.year { color:var(--faint-text); background:transparent; }

/* ---------- how i work ---------- */
.approach { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); }
.acard {
  --mx:50%; --my:50%;
  position:relative; overflow:hidden; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--line-2);
  padding:clamp(22px,2vw,30px); padding-top:clamp(64px,5.4vw,84px); min-height:270px;
  transition:border-color .4s linear, background .4s linear; will-change:transform;
}
.acard:hover { border-color:var(--line); background:var(--panel-2); }
.acard::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx) var(--my), rgba(237,234,227,.06), transparent 45%);
  opacity:0; transition:opacity .45s linear;
}
.acard:hover::after { opacity:1; }
.acard .idx {
  position:absolute; top:-30px; right:2px;
  font-family:var(--serif); font-style:italic; font-size:clamp(96px,9vw,140px); line-height:1;
  color:rgba(237,234,227,.055); transition:color .6s linear, transform .8s var(--ease);
}
.acard:hover .idx { color:rgba(237,234,227,.12); transform:translateY(-6px); }
.acard h3 { font-family:var(--font-body); font-weight:500; font-size:clamp(19px,1.6vw,23px); letter-spacing:-.01em; margin-bottom:10px; }
.acard p { color:var(--dim); font-size:14.5px; line-height:1.5; text-wrap:pretty; }
.acard .rcpt { display:block; margin-top:14px; font-size:10px; color:var(--faint-text); letter-spacing:.12em; }

/* ---------- about ---------- */
.about-lede {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(24px,3vw,44px); line-height:1.22; letter-spacing:-.005em;
  max-width:30ch; margin-bottom:clamp(30px,4vw,52px); text-wrap:balance;
}
.about-lede em { font-style:italic; }
.about-lede .wd { opacity:.13; transition:opacity .3s linear; }
.about-lede .wd.on { opacity:1; }
.about-body { max-width:60ch; margin-left:clamp(0px,24vw,340px); }
.about-body p { color:var(--dim); font-size:16px; margin-bottom:18px; text-wrap:pretty; }
.about-body b { color:var(--bone); font-weight:600; }
.about-row { display:grid; grid-template-columns:clamp(0px,24vw,340px) minmax(0,60ch) clamp(32px,4.5vw,64px) clamp(150px,17vw,240px); align-items:start; }
.about-row .about-body { margin-left:0; grid-column:2; grid-row:1; }
.about-row .about-photo { grid-column:4; grid-row:1; }
.about-photo { position:relative; margin:6px 0 0; width:100%; aspect-ratio:4/5; border-radius:14px; background:var(--panel); }
.about-photo img { border-radius:14px; width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; filter:saturate(.8) contrast(1.02); transition:filter .5s ease; }
.about-photo:hover img { filter:none; }
@media (max-width:1100px) { .about-row { grid-template-columns:clamp(0px,12vw,180px) minmax(0,1fr) 36px 170px; } }
@media (max-width:860px) { .about-row { grid-template-columns:1fr; } .about-row .about-body, .about-row .about-photo { grid-column:1; grid-row:auto; } .about-row .about-photo { width:200px; margin:0 0 24px; } }

/* experience index */
.xp { border-top:1px solid var(--line); margin-top:clamp(36px,5vw,60px); }
.xp-item {
  display:grid; grid-template-columns:110px 1fr auto; align-items:baseline; gap:20px;
  border-bottom:1px solid var(--line); padding:22px 8px;
}
.xp-item .co { color:var(--bone); font-weight:600; font-size:16px; }
.xp-item .role { color:var(--dim); font-size:14.5px; text-align:right; }

/* ---------- contact strip ---------- */
.strip {
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  padding:clamp(46px,6.5vw,100px) clamp(24px,4.5vw,72px);
  border:1px solid var(--line-2);
}
.strip .bg { position:absolute; inset:0; }
.strip .bg img { position:absolute; inset:0; width:100%; height:112%; object-fit:cover; opacity:.6; filter:saturate(.75); will-change:transform; }
.strip .bg::after { content:''; position:absolute; inset:0; background:linear-gradient(115deg, rgba(8,8,10,.82) 25%, rgba(8,8,10,.3) 100%); }
.strip > *:not(.bg) { position:relative; z-index:1; }
.strip .fig { position:absolute; top:20px; right:24px; z-index:2; }
.strip h2 { font-family:var(--serif); font-weight:400; font-size:clamp(24px,3vw,44px); line-height:1.18; margin-bottom:clamp(22px,3vw,38px); max-width:30ch; text-wrap:balance; }
.strip h2 em { font-style:italic; }
.strip .em {
  display:inline-block; font-weight:900; letter-spacing:-.035em; line-height:1.1;
  font-size:clamp(19px,7vw,96px); white-space:nowrap;
  border-bottom:3px solid rgba(237,234,227,.25);
  transition:border-color .3s linear;
}
/* hover speaks ink (drawn stroke + blot below) — the printed rule stays put */
.strip .sub { margin-top:26px; color:var(--dim); font-size:14.5px; line-height:1.5; }
.strip .sub a { border-bottom:1px solid var(--line); transition:color .3s linear; }
.strip .sub a:hover { color:var(--bone); }

footer {
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line-2); padding:26px 0 34px;
}
footer b { color:var(--bone); font-weight:600; }
footer .clock { color:var(--faint-text); font-variant-numeric:tabular-nums; }
footer .f-links a { border-bottom:1px solid var(--line); transition:color .3s linear; }
footer .f-links a:hover { color:var(--bone); }

/* ---------- case study ---------- */
.cs-head { max-width:1100px; margin-bottom:clamp(36px,5vw,64px); }
.cs-kicker { display:flex; gap:10px; align-items:center; margin-bottom:22px; flex-wrap:wrap; }
.cs-title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(40px,6.2vw,92px); line-height:1.04; letter-spacing:-.01em;
  text-wrap:balance;
}
.cs-title em { font-style:italic; }
.cs-head .outcomes { margin-top:26px; }
.cover { position:relative; border-radius:var(--r-lg); overflow:hidden; height:clamp(300px,54vh,560px); margin-bottom:clamp(40px,5vw,70px); }
.cover img { position:absolute; inset:0; width:100%; height:118%; object-fit:cover; filter:saturate(.8); will-change:transform; }
.cover::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,8,10,.55), transparent 55%); }
.cover .fig { position:absolute; top:20px; right:24px; z-index:2; }

/* letterpress specimen plates — custom case covers, no stock imagery.
   Dark paper built from gradients; the stat is printed in bone ink with a
   double-strike ghost, corners carry rust registration marks. */
.plate {
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  height:clamp(300px,54vh,560px); margin-bottom:clamp(40px,5vw,70px);
  background:
    radial-gradient(120% 90% at 18% -4%, rgba(237,234,227,.07), transparent 55%),
    radial-gradient(90% 80% at 86% 112%, rgba(236,34,34,.05), transparent 60%),
    linear-gradient(165deg, #15130f 0%, #100f0c 48%, #0a0908 100%);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(237,234,227,.09), inset 0 -60px 120px rgba(0,0,0,.42);
}
.plate::before {
  content:''; position:absolute; inset:0; opacity:.8; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(237,234,227,.018) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(237,234,227,.012) 0 1px, transparent 1px 6px);
}
.plate .p-c { position:absolute; inset:16px; pointer-events:none; z-index:1; }
.plate .p-c i { position:absolute; width:14px; height:14px; border:0 solid rgba(236,34,34,.65); }
.plate .p-c i:nth-child(1) { top:0; left:0; border-top-width:1px; border-left-width:1px; }
.plate .p-c i:nth-child(2) { top:0; right:0; border-top-width:1px; border-right-width:1px; }
.plate .p-c i:nth-child(3) { bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; }
.plate .p-c i:nth-child(4) { bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }
.plate .fig { position:absolute; top:20px; right:24px; z-index:2; }
.plate .p-meta { position:absolute; top:20px; left:24px; z-index:2; color:var(--dim); }
.plate .p-stat {
  position:absolute; left:clamp(18px,3vw,44px); bottom:clamp(0px,1vw,10px); z-index:1;
  font-family:var(--serif); font-weight:700; letter-spacing:-.02em; line-height:.95;
  font-size:clamp(110px,21vw,320px); white-space:nowrap;
  color:rgba(237,234,227,.9);
  text-shadow:.05em .035em 0 rgba(237,234,227,.13); /* double-strike ghost */
}
.plate .p-stat em { font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0; font-size:.9em; }
.plate .p-sub {
  position:absolute; right:24px; bottom:24px; z-index:2; max-width:34ch; text-align:right;
  color:var(--faint-text); line-height:1.7;
}
@media (max-width:700px) {
  .plate .p-sub { left:24px; right:24px; text-align:left; max-width:none; bottom:18px; }
  .plate .p-stat { bottom:clamp(44px,15vw,80px); }
}

.meta {
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:26px 0; margin-bottom:clamp(56px,7vw,100px);
}
.meta div span { display:block; }
.meta .k { margin-bottom:8px; }
.meta .v { font-size:16px; color:var(--bone); }

.cs-sec { display:grid; grid-template-columns:200px 1fr; gap:clamp(24px,4vw,64px); margin-bottom:clamp(60px,7vw,100px); }
.cs-sec .lab { position:sticky; top:110px; align-self:start; }
.cs-sec h2 { font-family:var(--serif); font-weight:400; font-size:clamp(26px,2.6vw,38px); margin-bottom:16px; text-wrap:balance; }
.cs-sec p { color:var(--dim); font-size:16px; max-width:64ch; margin-bottom:16px; text-wrap:pretty; }
.cs-sec b { color:var(--bone); font-weight:600; }
.cs-fig { position:relative; border-radius:var(--r); overflow:hidden; margin:26px 0 8px; background:var(--panel); aspect-ratio:7/5; }
.cs-fig img { width:100%; height:100%; object-fit:cover; filter:saturate(.8); }
.cs-fig figcaption { position:absolute; top:14px; right:16px; color:rgba(237,234,227,.78); z-index:2; text-align:right; }
.cs-fig::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(8,8,10,.45), transparent 40%); }

.pull {
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(24px,3vw,44px); line-height:1.22; max-width:28ch;
  border-left:2px solid rgba(237,234,227,.25); padding-left:clamp(18px,2.5vw,36px);
  margin:clamp(40px,5vw,70px) 0; text-wrap:balance;
}
.next {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-top:1px solid var(--line); padding-top:34px;
}
.next a { font-family:var(--serif); font-weight:700; letter-spacing:-.01em; font-size:clamp(26px,3.4vw,52px); display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:18px; }
.next a em { font-style:italic; font-weight:400; letter-spacing:0; font-size:1.02em; }
.next a .go-arr { display:inline-block; transition:transform .4s var(--ease); }
.next a:hover .go-arr, .next a:focus-visible .go-arr { transform:translateX(12px); }

/* ---------- contact page ---------- */
.c-h1 {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,5.6vw,84px); line-height:1.08; max-width:20ch;
  margin-bottom:clamp(44px,6vw,80px); text-wrap:balance;
}
.c-h1 em { font-style:italic; }
.c-list { border-top:1px solid var(--line); margin-bottom:clamp(60px,8vw,110px); }
.c-item {
  display:grid; grid-template-columns:200px 1fr auto; align-items:center; gap:20px;
  border-bottom:1px solid var(--line); padding:clamp(22px,3vw,36px) 8px;
  transition:background .35s linear;
}
.c-item > * { transition:transform .5s var(--ease); }
.c-item:hover, .c-item:focus-visible { background:rgba(237,234,227,.03); }
.c-item:hover > *, .c-item:focus-visible > * { transform:translateX(14px); }
.c-item .v { font-weight:700; font-size:clamp(19px,2.4vw,32px); letter-spacing:-.015em; position:relative; }
.c-item .arr { opacity:0; transform:translateX(-8px); transition:opacity .35s linear, transform .5s var(--ease); }
.c-item:hover .arr, .c-item:focus-visible .arr { opacity:1; transform:translateX(6px); }
.c-item .arr svg { width:22px; height:22px; stroke:var(--bone); }

/* ---------- drawn glyphs ----------
   The site writes its arrows rather than importing them. Erode has no arrow
   glyphs, so a typed → or ↗ silently fell back to another font: a thin wiry
   hairline next to heavy serif text, in a vocabulary nothing else on the page
   shared. These are the same hand as .hand-path (1.7 round stroke through
   #ink-line) with no draw-on dash, because they sit inline in link text and
   have to be there on first paint. Sized in em so they track the type. */
.gl { width:1em; height:1em; vertical-align:-.13em; flex:none; overflow:visible; }
/* #ink-line is tuned for long drawn strokes; on a 1em glyph its displacement is
   proportionally huge and the arrow frays into pieces. #ink-glyph is the same
   hand at a quarter of the push, and the stroke runs a little heavier so it
   holds up next to the serif at text size. */
.gl path { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:url(#ink-glyph); }
.sc-arrow .gl path { stroke-width:1.5; }
a .gl, .sc-lbl a .gl, .sc-open .gl { margin-left:.34em; }
.sc-arrow .gl { width:1.4em; height:1.4em; margin:0; }
.c-item .arr .gl { width:22px; height:22px; }
.card .go .gl { width:16px; height:16px; }
.card .go .gl path { stroke:var(--void); }

/* ---------- pressed-paper surface — shared by card media, strips, figure plates ---------- */
:root { --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.press {
  background:
    radial-gradient(130% 110% at 50% 50%, transparent 52%, rgba(0,0,0,.42) 100%),
    radial-gradient(60% 45% at 78% 18%, rgba(236,34,34,.11), transparent 70%),
    radial-gradient(110% 70% at 8% 96%, rgba(237,234,227,.075), transparent 62%),
    radial-gradient(38% 30% at 30% 40%, rgba(237,234,227,.035), transparent 70%),
    linear-gradient(165deg, #16140f 0%, #100f0c 48%, #0a0908 100%);
  isolation:isolate;
}
/* pressed paper: grain at two scales, the laid lines of the sheet, and a darker rim */
.press::before, .cs-fig.show::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    var(--grain) 0 0 / 220px 220px,
    var(--grain) 60px 40px / 440px 440px,
    repeating-linear-gradient(0deg, rgba(237,234,227,.03) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(237,234,227,.014) 0 1px, transparent 1px 7px);
  opacity:.15; mix-blend-mode:screen;
}
.press > *, .cs-fig.show > * { position:relative; }
/* figure plates — printed slots where real screens will land */
.cs-fig.fplate { aspect-ratio:7/3; display:grid; place-items:center; border:1px solid var(--line); }
.cs-fig.fplate::after { content:none; }
.fp-num {
  font-family:var(--serif); font-style:italic; font-size:clamp(56px,7vw,110px); line-height:1;
  color:rgba(237,234,227,.82);
  text-shadow:.05em .035em 0 rgba(237,234,227,.12);
}

/* ---------- the phone ----------
   One device body for every screen on the site — the live prototype, the
   captured states, the showcase, the work-card frames. Sized in percent and
   container units so it scales from a card thumbnail to the 390px live frame.
   The frame draws its own status strip (time + glyphs) under a dynamic island;
   --sb / --sbc tint the strip to whatever the screen's own header colour is. */
.ph {
  position:relative; aspect-ratio:390/844; border-radius:14% / 6.5%; container-type:inline-size;
  background:#0c0b0a; --sb:#fff; --sbc:#1c1b1e;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
/* the frame is written, not machined: a bone ink line run through the bleed
   filter, with the letterpress double-strike ghost beside it; the island is a
   blot dropped on the strip, the buttons are dabs off the edge */
.ph .rim {
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:4;
  border:clamp(1.5px, .75cqw, 3px) solid var(--bone); opacity:.94;
  filter:url(#ink-frame);
}
.ph .rim::after {
  content:''; position:absolute; inset:-4px; border-radius:inherit;
  border:1px solid rgba(237,234,227,.28); transform:translate(1.2cqw, 1cqw);
}
.ph::before, .ph::after { content:''; position:absolute; background:var(--bone); opacity:.9; filter:url(#ink-frame); }
.ph::before { left:-2.4%; top:19%; width:2.4%; height:15%; border-radius:3px 0 0 3px;
  background:linear-gradient(var(--bone) 0 43%, transparent 43% 57%, var(--bone) 57%); } /* volume */
.ph::after { right:-2.4%; top:24%; width:2.4%; height:9.5%; border-radius:0 3px 3px 0; }  /* power */
.ph .scr { position:absolute; inset:1.5% 3.2%; border-radius:11.4% / 5.3%; overflow:hidden; background:#fff; }
.ph .isl { position:absolute; top:1.3%; left:50%; width:32%; height:4.3%; transform:translateX(-50%);
  background:#000; border-radius:999px; z-index:3; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); } /* the island stays an island */
.ph .sb {
  position:absolute; top:0; left:0; right:0; height:5.4%; z-index:2;
  display:flex; align-items:center; justify-content:space-between; padding:0 7.5%;
  background:var(--sb); color:var(--sbc);
  font-family:var(--font-body); font-weight:700; font-size:3.7cqw; letter-spacing:-.01em;
}
.ph .sb svg { width:17cqw; height:auto; display:block; }
.ph .cap { position:absolute; top:5.4%; left:0; right:0; bottom:0; width:100%; height:94.6%; border:0; display:block; background:#fff; }
.ph img.cap, .ph video.cap { object-fit:cover; object-position:top; filter:saturate(.92); }
.ph .lab-in { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:6% 7% 7%;
  background:linear-gradient(to top, rgba(12,11,10,.85), transparent); color:var(--bone);
  font-family:var(--font-mono); font-size:3cqw; letter-spacing:.12em; text-transform:uppercase; }

/* ---------- real screens ----------
   The 48% study runs on its own material, re-set in the site's language:
   research plates (.rp — the Fullstory evidence, the report, the annotated
   original), a showcase and a state strip from the current prototype, and
   the prototype itself, live in the phone. */
.cs-fig.rp, .cs-fig.show, .cs-fig.phones, .cs-fig.live, .cs-fig.ba, .cs-fig.dec {
  aspect-ratio:auto; display:block; border:1px solid var(--line);
  padding:clamp(48px,4.4vw,62px) clamp(16px,2.4vw,30px) clamp(16px,2.4vw,30px);
}
.cs-fig.rp::after, .cs-fig.show::after, .cs-fig.phones::after, .cs-fig.live::after, .cs-fig.ba::after, .cs-fig.dec::after { content:none; }
.cs-fig .p-c { position:absolute; inset:14px; pointer-events:none; z-index:1; }
.cs-fig .p-c i { position:absolute; width:12px; height:12px; border:0 solid rgba(236,34,34,.6); }
.cs-fig .p-c i:nth-child(1) { top:0; left:0; border-top-width:1px; border-left-width:1px; }
.cs-fig .p-c i:nth-child(2) { top:0; right:0; border-top-width:1px; border-right-width:1px; }
.cs-fig .p-c i:nth-child(3) { bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; }
.cs-fig .p-c i:nth-child(4) { bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }
.cs-fig .rp-src { position:absolute; left:16px; top:14px; z-index:2; color:var(--faint-text); }

/* research plate innards */
.rp-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px 28px; margin-bottom:clamp(18px,2.4vw,30px); }
.rp-title { font-family:var(--serif); font-weight:400; font-size:clamp(20px,2vw,28px); line-height:1.15; max-width:26ch; text-wrap:balance; }
.rp-title em { font-style:italic; }
.rp-stats { display:flex; gap:clamp(18px,3vw,44px); }
.rp-stat { font-family:var(--serif); font-weight:700; font-size:clamp(38px,4.6vw,66px); line-height:.9; letter-spacing:-.02em; color:var(--bone); }
.rp-stat em { font-family:var(--serif); font-style:italic; font-weight:400; font-size:.7em; letter-spacing:0; }
.rp-stat small { display:block; margin-top:8px; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint-text); }
.rp-row { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(10px,1.6vw,20px); }
.rp-row.six { grid-template-columns:repeat(6, minmax(0,1fr)); }
.rp-tile { min-width:0; }
.rp-tile img { width:100%; height:auto; aspect-ratio:5/6; object-fit:cover; object-position:top; display:block;
  border-radius:10px; border:1px solid var(--line-2); filter:saturate(.7) contrast(1.02); }
.rp-row.scroll .rp-tile img { aspect-ratio:11/20; }
.rp-tile .k { display:block; margin-top:9px; font-family:var(--serif); font-size:clamp(16px,1.4vw,20px); line-height:1.15; color:var(--bone); }
.rp-tile .k b { font-weight:700; }
.rp-tile .n { display:block; margin-top:5px; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; line-height:1.5; color:var(--faint-text); }
.rp-sub { display:flex; align-items:baseline; gap:12px; margin:clamp(18px,2.4vw,30px) 0 12px; border-top:1px solid var(--line-2); padding-top:14px; }
.rp-sub .ch-n { font-family:var(--serif); font-style:italic; font-size:18px; color:rgba(237,234,227,.7); }

/* the report — set as type, not screenshotted */
.rp-rep { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(20px,3vw,48px); }
.rp-rep .lead { font-family:var(--serif); font-weight:400; font-size:clamp(19px,1.8vw,26px); line-height:1.3; text-wrap:pretty; }
.rp-rep .lead b { font-weight:700; }
.rp-rep .lead em { font-style:italic; }
.rp-rep ol { list-style:none; display:flex; flex-direction:column; gap:9px; }
.rp-rep li { position:relative; padding-left:26px; font-family:var(--serif); font-size:clamp(14px,1.1vw,16px); line-height:1.45; color:var(--dim); }
.rp-rep li::before { content:''; position:absolute; left:6px; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--rust); box-shadow:0 0 8px rgba(236,34,34,.6); }
.rp-rep li b { color:var(--bone); font-weight:600; }

/* the annotated original: the screen that was live, with the critique re-set beside it */
.rp-before { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr); gap:clamp(20px,3.4vw,56px); align-items:start; }
.rp-before .ph { width:min(300px, 100%); }
.mk { position:absolute; z-index:4; width:22px; height:22px; border-radius:50%; background:var(--rust); color:var(--bone);
  display:grid; place-items:center; font-family:var(--font-mono); font-size:10px; font-weight:700;
  box-shadow:0 0 0 3px rgba(12,11,10,.7), 0 0 14px rgba(236,34,34,.7); }
.crit { list-style:none; display:flex; flex-direction:column; gap:clamp(12px,1.6vw,20px); counter-reset:crit; }
.crit li { display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; }
.crit .no { width:22px; height:22px; border-radius:50%; background:var(--rust); color:var(--bone);
  display:grid; place-items:center; font-family:var(--font-mono); font-size:10px; font-weight:700; margin-top:2px; }
.crit b { display:block; font-family:var(--serif); font-weight:700; font-size:clamp(15px,1.25vw,18px); line-height:1.25; margin-bottom:3px; }
.crit p { font-family:var(--serif); font-size:clamp(13.5px,1.05vw,15.5px); line-height:1.45; color:var(--dim); text-wrap:pretty; }
.crit li.also b { display:inline; font-size:inherit; margin:0; }
.crit li.also { display:block; grid-column:1 / -1; margin-top:8px; padding-top:14px; border-top:1px solid var(--line-2);
  font-family:var(--serif); font-size:clamp(13.5px,1.05vw,15.5px); line-height:1.5; color:var(--faint-text); }
.rp-before .also b { color:var(--dim); font-weight:600; }

/* the showcase — three states of the current prototype, staged on the paper */
.cs-fig.show { padding-bottom:0; isolation:isolate; background:
  radial-gradient(70% 60% at 50% 100%, rgba(236,34,34,.12), transparent 70%),
  radial-gradient(120% 90% at 18% -4%, rgba(237,234,227,.07), transparent 55%),
  linear-gradient(165deg, #15130f 0%, #100f0c 48%, #0a0908 100%); }
.show-row { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); align-items:end; justify-items:center; max-width:1000px; margin:0 auto; padding:0 clamp(4px,3vw,40px); }
/* phones overflow their columns and overlap, so the plate stays tall at every width */
.show-row .ph { width:min(128%, 360px); max-width:none; margin-bottom:-12%; }
.show-row .ph:nth-child(2) { position:relative; z-index:2; }
.show-row .ph:nth-child(1) { transform:translateY(7%) rotate(-3deg); }
.show-row .ph:nth-child(3) { transform:translateY(7%) rotate(3deg); }
.show-row .ph:nth-child(2) { box-shadow:inset 0 0 0 1px rgba(237,234,227,.22), inset 0 0 0 4px #17150f, 0 40px 90px rgba(0,0,0,.65); }

/* the state strip and the live frame */
.cs-fig.phones .mo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,72px); align-items:center; max-width:1000px; margin:0 auto; }
.mo-ph .ph { width:min(380px, 100%); margin:0 auto; box-shadow:inset 0 0 0 1px rgba(237,234,227,.22), inset 0 0 0 4px #17150f, 0 40px 90px rgba(0,0,0,.6); }
.mo-ph video.cap { opacity:0; transition:opacity .55s var(--ease); }
.mo-ph video.cap.on { opacity:1; }
.mo-steps { list-style:none; display:flex; flex-direction:column; gap:clamp(6px,.8vw,10px); margin:0; padding:0; }
.mo-step { display:grid; grid-template-columns:22px 1fr; gap:14px; align-items:start; width:100%; text-align:left; padding:clamp(10px,1.2vw,14px) 0; background:none; border:0; border-top:1px solid var(--line-2); color:inherit; cursor:pointer; font:inherit; }
.mo-steps li:first-child .mo-step { border-top:0; }
.mo-step .no { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-mono); font-size:10px; color:var(--dim); border:1px solid var(--line-2); transition:background .3s, color .3s, border-color .3s; }
.mo-step.on .no { background:var(--rust); border-color:var(--rust); color:var(--bone); }
.mo-step .tx { position:relative; display:block; padding-bottom:6px; }
.mo-step b { display:block; font-family:var(--serif); font-weight:700; font-size:clamp(15px,1.3vw,19px); line-height:1.25; color:var(--dim); transition:color .3s; }
.mo-step.on b, .mo-step:hover b { color:var(--bone); }
.mo-step .tx > span { display:block; margin-top:3px; font-family:var(--serif); font-size:clamp(13.5px,1.05vw,15.5px); line-height:1.45; color:var(--faint-text); max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--ease), opacity .4s; }
.mo-step.on .tx > span { max-height:4em; opacity:1; }
.mo-step .bar { position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--line-2); transform-origin:left; }
.mo-step .bar::after { content:""; position:absolute; inset:0; background:var(--bone); transform:scaleX(var(--p, 0)); transform-origin:left; }
.mo-step:not(.on) .bar { opacity:0; }
.mo-step:focus-visible { outline:1px solid var(--rust); outline-offset:6px; }
@media (max-width:860px) { .cs-fig.phones .mo { grid-template-columns:1fr; } .mo-ph { order:-1; } }
.phw { display:flex; flex-direction:column; gap:10px; min-width:0; }
.phw .lab, .cs-fig .hint { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint-text); }
.cs-fig.live { display:grid; place-items:center; gap:14px; }
.cs-fig.live .ph { width:min(390px, 100%); box-shadow:inset 0 0 0 1px rgba(237,234,227,.22), inset 0 0 0 4px #17150f, 0 40px 90px rgba(0,0,0,.6); }
.cs-fig .open { position:absolute; left:16px; top:14px; z-index:2; color:var(--dim); transition:color .3s linear; }
.cs-fig .open:hover, .cs-fig .open:focus-visible { color:var(--bone); }
@media (max-width:860px) {
  .rp-row, .rp-row.six { grid-template-columns:repeat(3, minmax(0,1fr)); }
  .rp-rep, .rp-before { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .rp-row, .rp-row.six { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .rp-stats { flex-wrap:wrap; }
}

/* the work cards: real screens in the same phone; the 48% card carries two */
.device .screen:has(.shot) { height:calc(100% - 24px); }
.card-media .ph { position:absolute; transition:transform .9s var(--ease); }
.card--wide .card-media .ph.pl { left:26%; width:19%; bottom:-16%; }
.card--wide .card-media .ph.pr { left:56%; width:19%; bottom:-34%; }
.card:hover .card-media .ph { transform:translateY(-10px); }
.card:hover .card-media .ph.pr { transform:translateY(-20px); }
@media (max-width:860px) {
  .card--wide .card-media .ph.pl { left:12%; width:36%; bottom:-30%; }
  .card--wide .card-media .ph.pr { left:53%; width:36%; bottom:-48%; }
}

/* per-project micro-diagrams — each device screen shows that project's mechanism */
.s-steps { display:flex; gap:5px; }
.s-steps i { flex:1; height:5px; border-radius:3px; background:rgba(237,234,227,.07); }
.s-steps i.on { background:rgba(237,234,227,.3); }
.s-steps i.cur { background:rgba(237,234,227,.55); }
.u-status .s-list i { height:18px; }
.s-stats i.pay { background:rgba(237,234,227,.14); border-color:rgba(237,234,227,.3); }
.s-sw { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.s-sw i { aspect-ratio:1; border-radius:5px; background:rgba(237,234,227,var(--a,.08)); border:1px solid rgba(237,234,227,.06); }
.s-comp { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.s-comp i { border:1px solid rgba(237,234,227,.12); border-radius:7px; background:rgba(237,234,227,.04); min-height:22px; }
.s-comp i.b { border-radius:999px; background:rgba(237,234,227,.16); border:0; }
.s-comp i.g { position:relative; }
.s-comp i.g::after { content:''; position:absolute; right:5px; top:50%; transform:translateY(-50%); width:10px; height:10px; border-radius:50%; background:rgba(237,234,227,.28); }
.s-pill { display:flex; gap:5px; }
.s-pill i { flex:1; height:16px; border-radius:999px; background:rgba(237,234,227,.05); border:1px solid rgba(237,234,227,.08); }
.s-pill i.on { background:rgba(237,234,227,.24); border-color:transparent; }
.s-cards { flex:1; display:flex; gap:7px; min-height:0; overflow:hidden; }
.s-cards i { flex:0 0 44%; border-radius:9px; background:rgba(237,234,227,.06); border:1px solid rgba(237,234,227,.07); position:relative; }
.s-cards i::after { content:''; position:absolute; left:7px; bottom:6px; width:46%; height:5px; border-radius:3px; background:rgba(237,234,227,.3); }
.s-cmp { display:flex; gap:7px; }
.s-cmp i { flex:1; height:26px; border-radius:7px; background:rgba(237,234,227,.13); border:1px solid rgba(237,234,227,.18); }
.s-rows { flex:1; display:flex; flex-direction:column; gap:6px; min-height:0; }
.s-rows i { flex:none; height:13px; border-radius:4px; background:rgba(237,234,227,.05); border:1px solid rgba(237,234,227,.05); }

/* the Freshworks card isn't a link yet — don't promise a click it can't keep */
.card:not(a) { cursor:default; }
.card:not(a):hover { transform:none; border-color:var(--line-2); }
.card:not(a)::after { content:none; }
.card:not(a):hover .device { transform:none; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- the ink bleed — display type only; UI text stays crisp ----------
   Filters are defined inline in each page's <svg class="ink-defs">.
   #ink-reveal is the hero's own copy of the pipeline so ink.js can animate
   it without re-rasterizing every other filtered element. On fine pointers
   ink.js swaps the hero to per-letter filters (.il spans, one pipeline each)
   so single letters can swell with ink under the cursor. */
.hero-name { filter:url(#ink-reveal); }
.plate .p-stat { filter:url(#ink-xl); }
.sec-head h2, .cs-title, .c-h1, .fp-num, .mtrack, .next a .nt { filter:url(#ink-lg); }
.hero-name .il { display:inline-block; will-change:transform; }
/* letters lift + bleed past the line box; nowrap — split letters are atomic
   inlines and would otherwise soft-wrap. ink.js fits HARRIS to the measure. */
.hero-name .line { overflow:visible; white-space:nowrap; }

/* tertiary CTAs speak the spine's grammar: hover writes an ink stroke under
   the link left-to-right, then a blot blooms where the pen lifts. Sized in em
   so the giant email gets a fist of ink and the footer links get a fine line. */
.c-item .v .w { display:inline-block; } /* shrink to the text so the stroke hugs it */
.c-item .v .w, .strip .em, .strip .sub a, .f-links a, .next a .nt { position:relative; }
.c-item .v .w::after, .strip .em::after, .strip .sub a::after, .f-links a::after, .next a .nt::after {
  content:''; position:absolute; left:-.03em; right:-.08em; bottom:-.1em;
  height:clamp(2.5px, .08em, 9px); border-radius:2px; background:var(--bone);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--ease);
  filter:url(#ink-line); pointer-events:none;
}
.c-item .v .w::before, .strip .em::before, .strip .sub a::before, .f-links a::before, .next a .nt::before {
  content:''; position:absolute; right:-.36em; bottom:-.16em;
  width:clamp(5px, .19em, 20px); height:clamp(5px, .19em, 20px);
  border-radius:53% 47% 44% 56% / 49% 58% 42% 51%; background:var(--bone);
  transform:scale(0); transition:transform .4s var(--ease) .2s;
  filter:url(#ink-line); pointer-events:none;
}
.c-item:hover .v .w::after, .c-item:focus-visible .v .w::after,
.strip .em:hover::after, .strip .em:focus-visible::after,
.strip .sub a:hover::after, .strip .sub a:focus-visible::after,
.f-links a:hover::after, .f-links a:focus-visible::after,
.next a:hover .nt::after, .next a:focus-visible .nt::after { transform:scaleX(1); }
.c-item:hover .v .w::before, .c-item:focus-visible .v .w::before,
.strip .em:hover::before, .strip .em:focus-visible::before,
.strip .sub a:hover::before, .strip .sub a:focus-visible::before,
.f-links a:hover::before, .f-links a:focus-visible::before,
.next a:hover .nt::before, .next a:focus-visible .nt::before { transform:scale(1); }

/* ink-flood button — the blot blooms from where the cursor entered (--bx/--by via app.js) */
.btn {
  position:relative; overflow:hidden; border:1px solid transparent;
  transition:color .35s linear, border-color .35s linear, transform .5s var(--ease), box-shadow .5s var(--ease);
}
.btn::after {
  content:''; position:absolute; z-index:0;
  left:var(--bx,50%); top:var(--by,50%); width:14px; height:14px; margin:-7px 0 0 -7px;
  border-radius:50%; background:#0d0c0a;
  transform:scale(0); transition:transform .55s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform:scale(48); }
.btn .bl, .btn .go-arr { position:relative; z-index:1; }
.btn:hover, .btn:focus-visible {
  color:var(--bone); border-color:rgba(237,234,227,.3);
  box-shadow:0 16px 44px rgba(0,0,0,.5);
}

/* ---------- the ink story — chapters + spine ----------
   The site reads as one story written in ink: chapter labels (.ch) carry the
   copy; story.js writes a live ink line down the left gutter that blooms into
   a blot as each chapter is reached and lights its label. */
.ch { display:inline-flex; align-items:center; gap:10px; letter-spacing:.16em; transition:color .7s linear; }
.ch .cb {
  width:8px; height:8px; border-radius:50%; flex:none;
  background:rgba(237,234,227,.22);
  transition:background .7s linear, box-shadow .7s linear, transform .7s var(--ease);
}
.ch.lit { color:var(--bone); }
.ch.lit .cb { background:var(--rust); box-shadow:0 0 12px rgba(236,34,34,.8); transform:scale(1.25); }
.sec-head .ch { flex-basis:100%; order:-1; margin-bottom:2px; }
.strip .ch { margin-bottom:16px; }
.hero--full .ch { margin-bottom:clamp(12px,1.8vw,20px); }
.cs-sec .lab { transition:color .7s linear; }
.cs-sec .lab.lit { color:var(--bone); }

.spine { position:absolute; top:0; left:0; z-index:0; pointer-events:none; }
.spine path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.spine .sp-halo { stroke:rgba(237,234,227,.09); stroke-width:4.5; }
.spine .sp-main { stroke:rgba(237,234,227,.42); stroke-width:1.6; }
.spine .blot {
  fill:rgba(237,234,227,.6);
  transform:scale(0); transform-origin:center; transform-box:fill-box;
  transition:transform .8s var(--ease);
}
.spine .blot.on { transform:scale(1); }
.spine .tip { fill:#edeae3; opacity:0; transition:opacity .4s linear; }

/* ---------- reveals ---------- */
.js .rev { opacity:0; transform:translateY(30px); }
.js .rev.in { opacity:1; transform:none; transition:opacity .95s var(--ease), transform .95s var(--ease); }

/* ---------- responsive ---------- */
@media (max-width:960px) {
  .approach { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cs-sec { grid-template-columns:1fr; gap:14px; }
  .cs-sec .lab { position:static; }
  .meta { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .card--wide .card-body { display:block; }
  .card--wide .card-body p { margin-bottom:18px; }
  .card--wide .card-body .outcomes { justify-content:flex-start; }
  .about-body { margin-left:clamp(0px,12vw,180px); }
}
@media (max-width:860px) {
  .grid { grid-template-columns:1fr; }
  .card--wide .card-media { aspect-ratio:4/2.9; }
  .card--wide .device { left:13%; right:13%; height:66%; }
  .card--wide .device.phone { left:33%; right:33%; height:74%; }
  .card--wide .card-body h3 { font-size:clamp(21px,1.9vw,27px); }
  .hero--full .hp-foot { flex-direction:column; align-items:flex-start; }
  .hero--full { min-height:min(calc(100svh - 108px), 900px); }
  .hero--full .fig { position:static; margin-top:4px; }
  .hero-facts { justify-content:flex-start; }
  .about-body { margin-left:0; }
  .c-item { grid-template-columns:1fr; gap:6px; }
  .c-item .arr { display:none; }
  .xp-item { grid-template-columns:84px 1fr; }
  .xp-item .role { grid-column:2; text-align:left; margin-top:2px; }
}
@media (max-width:700px) {
  .cs-title { line-height:1.12; }
  .about-lede { line-height:1.26; }
  .c-h1 { line-height:1.16; }
  .next { flex-direction:column; align-items:flex-start; gap:12px; }
}
@media (max-width:700px) {
  .nav .stat { display:none; }
}
@media (max-width:520px) {
  .approach { grid-template-columns:1fr; }
  .nav a { padding:11px 12px; font-size:13px; }
  .nav .orb { width:22px; height:22px; }
}
@media (max-width:400px) {
  .nav { gap:2px; padding:6px; }
  .nav a { padding:11px 9px; font-size:12.5px; }
  .nav a.name { gap:7px; padding-left:8px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .grain, .chip .pip, .nav .stat .pip, .mtrack { animation:none; }
  .ink-canvas { display:none; }
  .js .rise { animation:none; }
  .js .rev { opacity:1; transform:none; }
  .about-lede .wd { opacity:1; }
  *, *::before, *::after { transition-duration:.01ms !important; transition-delay:0s !important; }
}

/* ---------- case-study cover + data plates + before/after ---------- */
.cs-fig.cover { height:auto; margin:0 0 clamp(40px,5vw,70px); }
.rp-two { display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,44px); margin-bottom:clamp(18px,2.4vw,30px); }
.rp-h { display:block; margin-bottom:12px; }
.fr { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto; align-items:center; gap:12px; padding:7px 0; border-bottom:1px solid var(--line-2); }
.fr:last-of-type { border-bottom:0; }
.fr .fl { font-family:var(--serif); font-size:clamp(13.5px,1.05vw,15.5px); line-height:1.3; color:var(--dim); }
.fr .fl em { display:block; font-style:normal; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint-text); margin-top:2px; }
.fr .fb { position:relative; height:clamp(7px,.7vw,10px); }
.fr .fb i { position:absolute; left:0; top:0; height:100%; width:var(--w); background:var(--bone); border-radius:2px; filter:url(#ink-line); opacity:.85; }
.fr.hot .fb i { background:var(--rust); opacity:1; }
.fr .fv { font-family:var(--serif); font-weight:700; font-size:clamp(16px,1.5vw,22px); letter-spacing:-.01em; color:var(--bone); min-width:3.2ch; text-align:right; }
.fr.hot .fv { color:var(--rust); }
.rp-note { margin-top:12px; font-family:var(--serif); font-style:italic; font-size:clamp(13.5px,1.05vw,15.5px); line-height:1.4; color:var(--faint-text); }
.rp-row.small { grid-template-columns:repeat(4, minmax(0,1fr)); max-width:720px; }
.rp-row.small .rp-tile img { aspect-ratio:11/20; }
.rp-row.small .rp-tile .k { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint-text); }
.cs-fig.ba { display:grid; place-items:center; gap:14px; }
.cs-fig.ba .hint { text-align:center; }
.ba-slide { display:flex; justify-content:center; width:100%; }
.ba-slide .ph { width:min(420px, 100%); touch-action:none; box-shadow:inset 0 0 0 1px rgba(237,234,227,.22), inset 0 0 0 4px #17150f, 0 40px 90px rgba(0,0,0,.6); }
.ba-layer { position:absolute; inset:0; }
.ba-layer.before { clip-path:inset(0 calc(100% - var(--x)) 0 0); }
.ba-layer.after  { clip-path:inset(0 0 0 var(--x)); }
.ba-bar { position:absolute; top:0; bottom:0; left:var(--x); width:2px; margin-left:-1px; background:var(--bone); filter:url(#ink-line); z-index:4; pointer-events:none; }
.ba-knob { position:absolute; left:50%; top:50%; width:12cqw; height:12cqw; transform:translate(-50%,-50%); border-radius:50%;
  background:#0a0908; border:1.5px solid var(--bone); box-shadow:0 8px 22px rgba(0,0,0,.55); }
.ba-knob::before { content:'‹  ›'; position:absolute; inset:0; display:grid; place-items:center; font-family:var(--serif); font-size:6cqw; letter-spacing:-.02em; color:var(--bone); white-space:pre; }
.ba-tag { position:absolute; bottom:3.5%; z-index:4; padding:5px 9px; border-radius:999px; background:rgba(10,9,8,.78); color:var(--bone); font-size:2.6cqw; letter-spacing:.14em; pointer-events:none; }
.ba-tag.l { left:5%; } .ba-tag.r { right:5%; }
.ba-range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:5; -webkit-appearance:none; appearance:none; }
.ba-range:focus-visible + * , .ba-slide:has(.ba-range:focus-visible) .ba-bar { background:var(--rust); }
.crit.two { display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,26px) clamp(18px,3vw,44px); margin-top:clamp(22px,3vw,40px); padding-top:clamp(18px,2.4vw,30px); border-top:1px solid var(--line-2); }
@media (max-width:860px) { .rp-two, .crit.two { grid-template-columns:1fr; } }


/* decisions: evidence, then the move */
.dec-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.dec-list li { display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(18px,3vw,48px); align-items:center; padding:clamp(22px,3vw,40px) 0; border-top:1px solid var(--line-2); }
.dec-list li:first-child { border-top:0; padding-top:0; }
.dec-list li:last-child { padding-bottom:0; }
.dec-list .st { display:block; font-family:var(--serif); font-weight:700; font-size:clamp(44px,5.6vw,84px); line-height:.95; letter-spacing:-.02em; color:var(--rust); }
.dec-list .sl { display:block; margin-top:8px; color:var(--dim); }
.dec-list p { margin-top:14px; font-family:var(--serif); font-size:clamp(15px,1.25vw,18px); line-height:1.45; color:var(--bone); text-wrap:pretty; max-width:34ch; }
.dec-list .dm { display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,22px); align-items:start; max-width:640px; width:100%; justify-self:end; }
.dec-list .dm figure { margin:0; min-width:0; }
.dec-list .dm .lbl { display:block; margin-bottom:8px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.dec-list .dm .now .lbl { color:var(--rust); }
.dec-list .dm img, .dec-list .dm video { display:block; width:100%; height:auto; border-radius:12px; background:#fff; filter:saturate(.92); box-shadow:inset 0 0 0 1px rgba(237,234,227,.22), 0 24px 50px rgba(0,0,0,.5); }
.dec-list .dm .was img { filter:saturate(.55) contrast(.96); opacity:.86; }
.dec-list li:nth-child(even) { grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr); }
.dec-list li:nth-child(even) .dm { justify-self:start; }
.dec-list li:nth-child(even) .dt { order:2; }
@media (max-width:860px) { .dec-list li, .dec-list li:nth-child(even) { grid-template-columns:1fr; } .dec-list li:nth-child(even) .dt { order:0; } .dec-list .dm { justify-self:start; max-width:560px; } }

/* validation: what the test would have measured */
.meas-lead { margin-top:18px; }
.meas { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; }
.meas li { position:relative; padding:9px 0 9px 22px; border-top:1px solid var(--line-2); font-family:var(--serif); font-size:clamp(14.5px,1.15vw,17px); line-height:1.45; color:var(--dim); }
.meas li::before { content:""; position:absolute; left:2px; top:1.05em; width:7px; height:7px; border-radius:50%; background:var(--rust); }

/* ---- design system specimens (cs-system) ---- */
.cs-fig.spec { aspect-ratio:auto; display:block; border:1px solid var(--line);
  padding:clamp(48px,4.4vw,62px) clamp(16px,2.4vw,30px) clamp(16px,2.4vw,30px); }
.cs-fig.spec::after { content:none; }
.ds-canvas { display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--line-2);
  filter:saturate(.5) contrast(1.04); opacity:.94; }
.ds-arch { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2.4vw,34px);
  margin:clamp(18px,2.4vw,30px) 0 0; border-top:1px solid var(--line-2); padding-top:clamp(14px,1.8vw,22px); }
.ds-arch .n { display:block; font-family:var(--serif); font-weight:700; font-size:clamp(30px,3.6vw,52px);
  line-height:.95; letter-spacing:-.02em; color:var(--rust); }
.ds-arch .l { display:block; margin-top:7px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); }
.ds-arch p { margin-top:9px; font-family:var(--serif); font-size:clamp(13px,1.05vw,15px); line-height:1.45; color:var(--faint-text); }
.ds-two { display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:clamp(20px,3.4vw,56px); align-items:center; }
.ds-two .shot { margin:0; min-width:0; }
.ds-two .shot img { display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--line-2);
  filter:saturate(.6) contrast(1.02); }
.ds-two .notes { min-width:0; }
.ds-def { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(11px,1.5vw,18px); }
.ds-def li { border-top:1px solid var(--line-2); padding-top:11px; }
.ds-def b { display:block; font-family:var(--serif); font-weight:700; font-size:clamp(15px,1.25vw,18px); line-height:1.25; margin-bottom:4px; }
.ds-def span { display:block; font-family:var(--serif); font-size:clamp(13.5px,1.05vw,15.5px); line-height:1.45; color:var(--dim); text-wrap:pretty; }
@media (max-width:860px) { .ds-arch { grid-template-columns:1fr; } .ds-two { grid-template-columns:1fr; } }
.ds-two .shot { position:relative; }
.ds-two .shot.cap img { max-height:clamp(380px,42vw,580px); object-fit:cover; object-position:top; }
.ds-two .shot.cap::after { content:''; position:absolute; left:1px; right:1px; bottom:1px; height:96px;
  border-radius:0 0 10px 10px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(18,17,15,0), var(--panel) 88%); }
@media (max-width:860px) { .ds-two .shot { max-width:340px; } }

/* ---- plan comparison (cs-comparison) ---- */
.cmp-pair { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(20px,5vw,80px); justify-items:center; max-width:860px; margin:0 auto; padding:clamp(8px,1.4vw,18px) 0 clamp(20px,2.6vw,34px); }
.cmp-pair .phw { width:min(390px, 100%); align-items:center; }
.cmp-pair .ph { width:100%; box-shadow:inset 0 0 0 1px rgba(237,234,227,.22), inset 0 0 0 4px #17150f, 0 40px 90px rgba(0,0,0,.6); }
.cmp-dir .cmp-pair .phw:nth-child(1) .ph { transform:rotate(-2deg); }
.cmp-dir .cmp-pair .phw:nth-child(2) .ph { transform:rotate(2deg); }
.cmp-pair .plab { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint-text);  text-align:center; margin-top:10px; }
.cmp-pair .plab a { color:var(--dim); margin-left:8px; white-space:nowrap; }
.cmp-pair .plab a:hover, .cmp-pair .plab a:focus-visible { color:var(--bone); }
.cmp-def { margin-top:clamp(22px,3vw,36px); display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:clamp(20px,3.4vw,48px); }
.cs-fig.show.cmp-dir, .cs-fig.show.cmp-live { padding-bottom:clamp(16px,2vw,28px); }
@media (max-width:700px) { .cmp-pair { grid-template-columns:1fr; } .cmp-def { grid-template-columns:1fr; } }

/* ---- show-first case study (sc-) ----
   One claim, a few sentences, one big visual per section. The words sit in a
   sticky column so the visual can carry the scroll. */
.sc-head { max-width:1060px; margin-bottom:clamp(28px,3.4vw,44px); }
.sc-dek { margin-top:18px; max-width:58ch; font-family:var(--serif); font-size:clamp(17px,1.45vw,21px); line-height:1.45; color:var(--dim); text-wrap:pretty; }
.sc-meta { display:flex; flex-wrap:wrap; gap:10px clamp(20px,3vw,44px); margin:24px 0 0; }
.sc-meta div { display:flex; flex-direction:column; gap:5px; }
.sc-meta dt { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint-text); }
.sc-meta dd { margin:0; font-size:14.5px; color:var(--bone); }

.sc-stage { position:relative; margin:0; border:1px solid var(--line); border-radius:18px; overflow:hidden; isolation:isolate;
  padding:clamp(26px,3.4vw,52px) clamp(16px,3vw,48px);
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(236,34,34,.13), transparent 70%),
    radial-gradient(120% 90% at 18% -4%, rgba(237,234,227,.06), transparent 55%),
    linear-gradient(165deg, #15130f 0%, #100f0c 48%, #0a0908 100%); }
.sc-stage .ph { box-shadow:inset 0 0 0 1px rgba(237,234,227,.22), inset 0 0 0 4px #17150f, 0 40px 90px rgba(0,0,0,.6); }
.sc-lbl { display:block; text-align:center; margin-top:16px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint-text); }
.sc-lbl a { color:var(--dim); margin-left:10px; white-space:nowrap; }
.sc-lbl a:hover, .sc-lbl a:focus-visible { color:var(--bone); }
.sc-lbl.on { color:var(--bone); }

/* hero: the whole story in three phones */
.sc-hero { padding-bottom:clamp(18px,2vw,26px); margin-bottom:clamp(90px,11vw,160px); }
.sc-trio { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(12px,4vw,64px); max-width:1040px; margin:0 auto; }
.sc-col { display:flex; flex-direction:column; align-items:center; min-width:0; }
.sc-trio .ph { width:min(290px, 100%); }
.sc-crop { width:100%; display:flex; justify-content:center; height:clamp(230px,31vw,450px); overflow:hidden; padding-top:4px;
  -webkit-mask-image:linear-gradient(#000 72%, transparent); mask-image:linear-gradient(#000 72%, transparent); }
.sc-count { display:flex; align-items:baseline; gap:10px; margin:0 0 clamp(12px,1.6vw,22px); }
.sc-count b { font-family:var(--serif); font-weight:700; font-size:clamp(40px,5.4vw,84px); line-height:.9; color:var(--rust); letter-spacing:-.03em; }
.sc-count span { font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.sc-hero .sc-col:last-child .sc-count b { color:var(--bone); }

/* sections */
.sc-sec { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,88px); align-items:start; margin-bottom:clamp(90px,11vw,160px); }
.sc-txt { position:sticky; top:120px; }
.sc-txt .lab { display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint-text); margin-bottom:18px; transition:color .7s linear; }
.sc-txt .lab.lit { color:var(--rust); }
.sc-txt h2 { font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.3vw,50px); line-height:1.06; letter-spacing:-.015em; margin-bottom:20px; text-wrap:balance; }
.sc-txt h2 em { font-style:italic; }
.sc-txt p { color:var(--dim); font-size:clamp(16px,1.2vw,18px); line-height:1.55; max-width:42ch; margin-bottom:14px; text-wrap:pretty; }
.sc-txt b { color:var(--bone); font-weight:600; }
.sc-txt .sc-quiet { font-size:14.5px; color:var(--faint-text); margin-top:22px; padding-top:16px; border-top:1px solid var(--line-2); }

.sc-one { display:flex; justify-content:center; }
.sc-one .ph { width:min(390px, 100%); }
.sc-ba { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px,4vw,56px); max-width:720px; margin:0 auto; }
.sc-ba .ph { width:min(320px, 100%); }
.sc-ba .sc-col:first-child .ph { opacity:.72; filter:saturate(.6); }

/* a pin on a real screen */
.sc-pin { position:absolute; z-index:5; width:0; height:0; }
.sc-pin i { position:absolute; left:-9px; top:-9px; width:18px; height:18px; border-radius:50%; border:2px solid var(--rust);
  box-shadow:0 0 0 4px rgba(236,34,34,.25), 0 0 18px rgba(236,34,34,.6); animation:sc-ping 2.4s var(--ease) infinite; }
.sc-pin span { position:absolute; left:26px; top:-9px; white-space:nowrap; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bone); background:var(--rust); padding:3px 8px 2px; border-radius:999px; }
@keyframes sc-ping { 0%,100% { transform:scale(1); } 50% { transform:scale(1.18); } }

/* the measurement: drawn, not described */
.sc-measure { display:flex; flex-direction:column; gap:clamp(34px,4vw,52px); justify-content:center; min-height:clamp(380px,38vw,560px); }
.m-k { display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:14px; }
.m-canvas { position:relative; height:clamp(96px,9vw,124px); }
.m-canvas > span { position:absolute; left:calc(var(--x) / 520 * 100%); width:calc(var(--w) / 520 * 100%); }
.m-screen { top:-10px; bottom:-10px; border:1.5px solid rgba(237,234,227,.55); border-radius:10px; }
.m-screen i { position:absolute; right:8px; top:-18px; font-style:normal; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint-text); }
.m-cell { top:0; height:calc(100% - 30px); display:grid; place-items:center; text-align:center; padding:4px 6px; border-radius:6px;
  background:#f5f4f0; color:#1d2329; font-family:var(--font-body); font-size:clamp(9.5px,.85vw,12px); line-height:1.25; font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.m-cell.lbl { background:transparent; color:var(--bone); box-shadow:none; justify-items:start; text-align:left; }
.m-cell.ghost { background:transparent; color:var(--rust); border:1.5px dashed var(--rust); box-shadow:none; }
.m-dim { bottom:0; height:18px; display:flex; align-items:center; justify-content:center; font-size:10px; letter-spacing:.06em; color:var(--dim);
  border-top:1px solid var(--line); }
.m-dim.over { color:var(--rust); border-top-color:rgba(236,34,34,.6); }
.m-dim.fit { color:var(--bone); }

@media (max-width:900px) {
  .sc-sec { grid-template-columns:1fr; gap:26px; }
  .sc-txt { position:static; }
  .sc-txt p { max-width:60ch; }
}
@media (max-width:560px) {
  .sc-count { flex-direction:column; gap:4px; align-items:center; }
  .sc-count span { font-size:8.5px; text-align:center; }
  .sc-pin span { display:none; }
}

/* ---- show-first components, second batch ---- */
.sc-hero .sc-col .sc-lbl { margin-top:clamp(10px,1.2vw,16px); }
.sc-canvas { padding:clamp(16px,2.4vw,34px); }
.sc-canvas > img { display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--line-2); filter:saturate(.55) contrast(1.04); }
.sc-stats { display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(20px,6vw,96px); margin-top:clamp(18px,2.4vw,30px); }
.sc-stats .sc-count { margin:0; }

/* before / after: a still of the old page beside a clip of the new one */
.sc-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,28px); align-items:start; max-width:640px; margin:0 auto; }
.sc-pair figure { margin:0; min-width:0; }
.sc-pair .lbl { display:block; margin-bottom:10px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.sc-pair .now .lbl { color:var(--rust); }
.sc-pair img, .sc-pair video { display:block; width:100%; height:auto; border-radius:12px; background:#fff;
  box-shadow:inset 0 0 0 1px rgba(237,234,227,.22), 0 24px 50px rgba(0,0,0,.5); }
.sc-pair .was img { filter:saturate(.55) contrast(.96); opacity:.86; }

/* scroll-depth evidence */
.sc-funnel { max-width:640px; margin:0 auto; }
.sc-funnel .rp-row.small { margin-top:clamp(20px,2.6vw,32px); max-width:none; }

/* the architecture, drawn */
.sc-tree { max-width:680px; margin:0 auto; }
.t-node { position:relative; border:1px solid var(--line); border-radius:14px; padding:clamp(14px,1.6vw,20px); background:rgba(237,234,227,.03); }
.t-node > b { display:block; font-family:var(--serif); font-weight:700; font-size:clamp(34px,3.6vw,54px); line-height:.9; color:var(--rust); letter-spacing:-.02em; }
.t-node.root > b { color:var(--bone); }
.t-node .l { display:block; margin-top:8px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.t-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.t-chips i { font-style:normal; font-size:12.5px; color:var(--bone); border:1px solid var(--line); border-radius:999px; padding:3px 10px; }
.t-node.root { max-width:440px; margin:0 auto; text-align:center; }
.t-node.root .t-chips { justify-content:center; }
.t-branches { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,24px); padding-top:48px; }
.t-branches::before { content:''; position:absolute; left:50%; top:0; height:24px; border-left:1.5px solid rgba(237,234,227,.35); }
.t-branches::after { content:''; position:absolute; left:25%; right:25%; top:24px; border-top:1.5px solid rgba(237,234,227,.35); }
.t-branches .t-node::before { content:''; position:absolute; left:50%; top:-24px; height:24px; border-left:1.5px solid rgba(237,234,227,.35); }

/* page specimens, kept small on purpose */
.sc-tiles { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(12px,2vw,24px); max-width:620px; margin:0 auto; }
.sc-tiles figure { margin:0; min-width:0; }
.sc-tiles img { display:block; width:100%; aspect-ratio:5/6; object-fit:cover; object-position:top; border-radius:10px; border:1px solid var(--line-2); filter:saturate(.6); }
.sc-tiles.tall img { aspect-ratio:11/20; }
.sc-tiles figcaption { margin-top:9px; font-family:var(--serif); font-size:clamp(15px,1.2vw,18px); color:var(--bone); }
.sc-shot { display:flex; justify-content:center; }
.sc-shot span { position:relative; display:block; width:min(340px, 100%); }
.sc-shot img { display:block; width:100%; max-height:clamp(420px,44vw,600px); object-fit:cover; object-position:top; border-radius:10px; border:1px solid var(--line-2); filter:saturate(.6); }
.sc-shot span::after { content:''; position:absolute; left:1px; right:1px; bottom:1px; height:110px; border-radius:0 0 10px 10px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(16,15,12,0), #100f0c 90%); }

/* a closing number */
.sc-big { display:grid; place-items:center; min-height:clamp(300px,32vw,460px); text-align:center; }
.sc-big .sc-count { flex-direction:column; align-items:center; gap:14px; margin:0; }
.sc-big .sc-count b { font-size:clamp(90px,13vw,200px); color:var(--bone); }

@media (max-width:560px) {
  .sc-tiles { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .t-branches { grid-template-columns:1fr; padding-top:24px; }
  .t-branches::before, .t-branches::after, .t-branches .t-node::before { display:none; }
  .sc-pair { gap:10px; }
}

/* design-system hero: real pages fanned on the stage, cut off at the bottom */
.sc-pages { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:clamp(10px,1.6vw,22px); align-items:start;
  max-width:1120px; margin:0 auto; height:clamp(220px,28vw,400px); overflow:hidden; padding:10px 6px 0;
  -webkit-mask-image:linear-gradient(#000 62%, transparent); mask-image:linear-gradient(#000 62%, transparent); }
.sc-pages img { display:block; width:100%; aspect-ratio:5/7; object-fit:cover; object-position:top; border-radius:10px;
  border:1px solid var(--line-2); filter:saturate(.65); box-shadow:0 24px 60px rgba(0,0,0,.55); }
.sc-pages img:nth-child(1) { transform:translateY(8%) rotate(-3deg); }
.sc-pages img:nth-child(2) { transform:translateY(3%) rotate(-1.5deg); }
.sc-pages img:nth-child(3) { transform:none; position:relative; z-index:1; }
.sc-pages img:nth-child(4) { transform:translateY(3%) rotate(1.5deg); }
.sc-pages img:nth-child(5) { transform:translateY(8%) rotate(3deg); }
.sc-hero .sc-stats { margin-top:clamp(6px,1vw,14px); }

/* a number laid over the whole canvas */
.sc-over { display:grid; }
.sc-over > * { grid-area:1 / 1; }
.sc-over > img { opacity:.55; }
.sc-over .sc-count { align-self:center; justify-self:center; flex-direction:column; align-items:center; gap:12px; margin:0; text-align:center;
  padding:clamp(18px,2.4vw,30px) clamp(24px,3.4vw,48px); border-radius:16px; background:rgba(10,9,8,.82); box-shadow:0 30px 80px rgba(0,0,0,.6); }
.sc-over .sc-count b { font-size:clamp(64px,8vw,128px); color:var(--bone); }
@media (max-width:560px) { .sc-pages { grid-template-columns:repeat(3, minmax(0,1fr)); } .sc-pages img:nth-child(n+4) { display:none; } }
/* the canvas carries a filter, which paints it above unpositioned siblings; lift the number back over it */
.sc-over .sc-count { position:relative; z-index:1; }

/* the research report, set as the document it was */
.sc-doc { max-width:500px; margin:0 auto; padding:clamp(24px,3vw,42px); border-radius:6px; background:#edeae3; color:#1a1815;
  transform:rotate(-1.2deg); box-shadow:0 40px 90px rgba(0,0,0,.6), inset 0 0 0 1px rgba(0,0,0,.06); font-family:var(--serif); }
.sc-doc .d-k { display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#6b645a; }
.sc-doc h3 { margin:8px 0 16px; font-weight:700; font-size:clamp(24px,2.4vw,34px); line-height:1.1; letter-spacing:-.01em; }
.sc-doc .d-find { margin:0 0 24px; padding-left:14px; border-left:3px solid var(--rust); font-size:clamp(15px,1.15vw,17px); line-height:1.5; }
.sc-doc .d-find b { font-weight:700; }
.sc-doc ol { list-style:none; margin:10px 0 0; padding:0; counter-reset:rec; }
.sc-doc li { position:relative; counter-increment:rec; padding:11px 0 11px 36px; border-top:1px solid rgba(0,0,0,.12); font-size:clamp(14.5px,1.1vw,16px); line-height:1.4; }
.sc-doc li::before { content:counter(rec); position:absolute; left:0; top:10px; width:22px; height:22px; border-radius:50%; border:1px solid #1a1815;
  display:grid; place-items:center; font-family:var(--font-mono); font-size:10px; }
.sc-doc li.hi { font-weight:700; }
.sc-doc li.hi::before { background:var(--rust); border-color:var(--rust); color:#edeae3; }

/* before / after phones where the before carries a pin: dim the screen, not the pin */
.sc-ba.pinned .sc-col:first-child .ph { opacity:1; filter:none; }
.sc-ba.pinned .sc-col:first-child .ph .cap { filter:saturate(.55); opacity:.82; }
.sc-pin.below span { left:0; top:16px; transform:translateX(-50%); }
@media (max-width:560px) { .sc-pin.below span { display:block; font-size:8px; padding:2px 6px 1px; } }
.sc-pin.above span { left:0; top:auto; bottom:16px; transform:translateX(-50%); }
@media (max-width:560px) { .sc-pin.above span { display:block; font-size:8px; padding:2px 6px 1px; } }

/* an outline around the part of an old screen a section is about; the words go in the caption, not on the screen */
.sc-mark { position:absolute; z-index:5; border:2px solid var(--rust); border-radius:9px; pointer-events:none;
  box-shadow:0 0 0 3px rgba(236,34,34,.22), 0 0 22px rgba(236,34,34,.45); animation:sc-mark 2.6s var(--ease) infinite; }
@keyframes sc-mark { 0%,100% { box-shadow:0 0 0 3px rgba(236,34,34,.22), 0 0 22px rgba(236,34,34,.45); } 50% { box-shadow:0 0 0 6px rgba(236,34,34,.12), 0 0 30px rgba(236,34,34,.6); } }
@media (prefers-reduced-motion:reduce) { .sc-mark, .sc-pin i { animation:none; } }
.sc-ba.pinned .sc-col:first-child .sc-lbl { color:var(--dim); }
/* the crop box has a fixed height; without this the flex row stretched every phone to it and squashed the screens */
.sc-crop { align-items:flex-start; }
.sc-crop .ph { flex:none; }

/* hero as a before → after */
.sc-duo { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(10px,3vw,48px); max-width:860px; margin:0 auto; }
.sc-duo .ph { width:min(300px, 100%); }
.sc-duo .sc-col:first-child .ph .cap { filter:saturate(.55); opacity:.82; }
.sc-arrow { font-family:var(--serif); font-size:clamp(30px,4vw,60px); line-height:1; color:var(--rust); }
.sc-hero .sc-duo .sc-lbl.on { color:var(--bone); }

/* the drop: two bars and the gap between them */
.sc-drop { max-width:560px; margin:0 auto; display:flex; flex-direction:column; justify-content:center; min-height:clamp(260px,26vw,380px); }
.sc-drop .fr { padding:14px 0; }
.sc-drop .fr .fl { font-size:clamp(15px,1.25vw,18px); }
.sc-drop .fr .fb { height:clamp(12px,1.1vw,16px); }
.sc-gap { display:flex; align-items:baseline; gap:12px; margin-top:clamp(16px,2vw,26px); }
.sc-gap b { font-family:var(--serif); font-weight:700; font-size:clamp(52px,6vw,92px); line-height:.9; color:var(--rust); letter-spacing:-.03em; }
.sc-gap span { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }

/* three places become one */
.sc-flow { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(12px,2.4vw,32px); max-width:720px; margin:0 auto; }
.f-col { display:flex; flex-direction:column; gap:10px; min-width:0; }
.f-k { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:2px; }
.f-box { border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:rgba(237,234,227,.03); }
.f-box b { display:block; font-family:var(--serif); font-weight:700; font-size:clamp(15px,1.25vw,18px); color:var(--bone); }
.f-box > span { display:block; margin-top:3px; font-size:clamp(13px,1vw,14.5px); line-height:1.4; color:var(--dim); }
.f-box.warn { border-style:dashed; border-color:rgba(236,34,34,.75); }
.f-box.warn b { color:var(--rust); }
.f-box.one { border-color:rgba(237,234,227,.4); padding:18px; box-shadow:0 30px 70px rgba(0,0,0,.45); }
.f-box.one ul { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.f-box.one li { position:relative; padding-left:18px; font-size:clamp(14px,1.1vw,16px); color:var(--bone); }
.f-box.one li::before { content:''; position:absolute; left:0; top:.5em; width:8px; height:8px; border-radius:50%; background:var(--rust); }

@media (max-width:640px) {
  .sc-flow { grid-template-columns:1fr; }
  .sc-flow .sc-arrow { transform:rotate(90deg); justify-self:center; }
  .sc-duo { gap:8px; }
  .sc-duo .sc-arrow { font-size:24px; }
}

/* ---------- the limit, animated: 2022 cells shrink to values and the third plan slides in ---------- */
.sc-morph { gap:22px; }
.sc-morph .m-canvas > span { transition:left .9s var(--ease), width .9s var(--ease), opacity .6s var(--ease), color .6s var(--ease), background-color .6s var(--ease), border-color .6s var(--ease); }
.sc-morph.is-b .m-canvas > span { left:calc(var(--x2, var(--x)) / 520 * 100%); width:calc(var(--w2, var(--w)) / 520 * 100%); }
.sc-morph .m-cell { overflow:hidden; }
.sc-morph .m-cell .a, .sc-morph .m-cell .b, .sc-morph .m-k .a, .sc-morph .m-k .b,
.sc-morph .m-dim .a, .sc-morph .m-dim .b { grid-area:1/1; transition:opacity .45s var(--ease); }
.sc-morph .m-k { display:grid; }
.sc-morph .m-dim { display:grid; place-items:center; }
.sc-morph .b { opacity:0; }
.sc-morph.is-b .a { opacity:0; }
.sc-morph.is-b .b { opacity:1; transition-delay:.35s; }
.sc-morph .m-cell.lbl { opacity:0; }
.sc-morph.is-b .m-cell.lbl { opacity:1; transition-delay:.3s; }
.sc-morph.is-b .m-cell.ghost { background:#f5f4f0; color:#1d2329; border-color:transparent; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.sc-morph.is-b .m-dim.over { color:var(--bone); border-top-color:var(--line); }
.m-ctl { display:flex; gap:6px; justify-content:center; }
.m-ctl button { font:inherit; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); background:none;
  border:1px solid var(--line); border-radius:999px; padding:7px 13px; cursor:pointer; transition:color .3s, border-color .3s, background-color .3s; }
.m-ctl button[aria-pressed="true"] { color:var(--ink, #111); background:var(--bone); border-color:var(--bone); }
.m-ctl button:focus-visible { outline:2px solid var(--rust); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .sc-morph .m-canvas > span, .sc-morph .a, .sc-morph .b { transition:none; } }
.sc-morph .m-k { margin-bottom:30px; }
.sc-morph .m-screen i { display:grid; }
.sc-morph .m-screen i > span { grid-area:1/1; justify-self:end; transition:opacity .45s var(--ease); }

/* ---------- phones: no phone-in-a-phone pairs, no scroll-trapping embeds ---------- */
.sc-flip, .sc-open, .m-only { display:none; }
@media (max-width:640px) {
  /* before / after share one spot; a switch flips between them, opening on After */
  .sc-flip { display:flex; gap:2px; width:max-content; margin:0 auto 18px; padding:3px; border:1px solid var(--line); border-radius:999px; }
  .sc-flip button { font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
    background:none; border:0; border-radius:999px; min-height:36px; padding:0 18px; cursor:pointer; transition:color .3s, background-color .3s; }
  .sc-flip button[aria-pressed="true"] { background:var(--bone); color:#141210; }
  .sc-flip button:focus-visible { outline:2px solid var(--rust); outline-offset:2px; }
  .sc-ba { grid-template-columns:1fr; gap:0; }
  .sc-ba > .sc-col { grid-area:1/1; transition:opacity .35s var(--ease), visibility 0s; }
  .sc-ba[data-show="after"] > .sc-col:first-child, .sc-ba[data-show="before"] > .sc-col:last-child {
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s var(--ease), visibility 0s .35s; }
  .sc-ba .ph, .sc-one .ph { width:min(300px, 88%); }

  /* live prototypes open full screen instead of scrolling inside the page */
  .ph .scr > iframe.cap { display:none; }
  .sc-open { display:block; position:absolute; top:5.4%; left:0; right:0; bottom:0; z-index:3; background:#fff; color:#141210; text-decoration:none; }
  .sc-open img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
  .sc-open::before { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(to bottom, rgba(20,18,16,0), rgba(20,18,16,.72)); }
  .sc-open span { position:absolute; left:50%; bottom:9%; transform:translateX(-50%); white-space:nowrap; font-size:10.5px; letter-spacing:.14em;
    text-transform:uppercase; background:var(--bone); color:#141210; border-radius:999px; padding:13px 20px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
  .d-only { display:none; }
  .m-only { display:inline; }

  /* heroes swipe sideways, the next phone peeking in */
  .sc-trio, .sc-duo { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 12% 4px; scrollbar-width:none; max-width:none; align-items:flex-start; }
  .sc-trio::-webkit-scrollbar, .sc-duo::-webkit-scrollbar { display:none; }
  .sc-trio > .sc-col, .sc-duo > .sc-col { flex:0 0 76%; scroll-snap-align:center; }
  .sc-duo > .sc-arrow { display:none; }
  .sc-trio .ph, .sc-duo .ph { width:100%; }
  .sc-hero .sc-crop { height:clamp(360px, 108vw, 460px); }
  .sc-count { flex-direction:row; gap:10px; align-items:baseline; }
  .sc-count span { font-size:10px; text-align:left; }
}

/* phones: the nav slides away while scrolling down so it never sits on top of a screen */
@media (max-width:640px) {
  .nav { transition:background .4s linear, border-color .4s linear, box-shadow .4s linear, transform .35s var(--ease), opacity .35s var(--ease); }
  .nav.nav-hide { transform:translate(-50%, calc(-100% - 26px)); opacity:0; pointer-events:none; }
}
@media (max-width:640px) and (prefers-reduced-motion:reduce) { .nav { transition:background .4s linear, opacity .2s linear; } .nav.nav-hide { transform:translateX(-50%); } }

/* ---------- the length of a section, drawn to scale: each column draws in, the long one takes longer ---------- */
.sc-len { display:grid; grid-template-columns:repeat(2, minmax(0,140px)); justify-content:center; align-items:start; gap:clamp(28px,7vw,96px); }
.sc-len .l-col { display:flex; flex-direction:column; gap:12px; min-width:0; }
.sc-len .l-k { display:flex; flex-direction:column; gap:4px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.sc-len .l-k b { font-family:var(--serif); font-weight:700; font-size:clamp(26px,2.6vw,36px); line-height:1; letter-spacing:-.02em; text-transform:none; color:var(--bone); }
.sc-len .l-col.hot .l-k b { color:var(--rust); }
.sc-len img { display:block; width:100%; height:auto; border-radius:8px; box-shadow:0 0 0 1px rgba(237,234,227,.18), 0 30px 70px rgba(0,0,0,.5); }
.js .sc-len img { clip-path:inset(0 0 100% 0 round 8px); transition:clip-path .9s var(--ease) .2s; }
.js .sc-len .l-col.hot img { transition-duration:2.4s; }
.js .sc-len.drawn img { clip-path:inset(0 0 0 0 round 8px); }
@media (prefers-reduced-motion:reduce) { .js .sc-len img { clip-path:none; transition:none; } }

/* ---------- desktop screens: a quiet browser frame, sized to 16:10 ---------- */
.sc-web { position:relative; margin:0 auto; width:min(980px, 100%); border-radius:12px; overflow:hidden; background:#0d0d10;
  box-shadow:inset 0 0 0 1px rgba(237,234,227,.18), 0 40px 90px rgba(0,0,0,.6); }
.sc-web .bar { position:relative; display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:#19191d; border-bottom:1px solid rgba(237,234,227,.08); }
.sc-web .bar i { width:9px; height:9px; border-radius:50%; background:rgba(237,234,227,.18); }
.sc-web .bar span { position:absolute; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:10px; letter-spacing:.04em;
  color:var(--dim); background:rgba(237,234,227,.06); border-radius:6px; padding:3px 14px; white-space:nowrap; max-width:70%; overflow:hidden; text-overflow:ellipsis; }
.sc-web .view { position:relative; aspect-ratio:16 / 10; overflow:hidden; background:#fff; }
.sc-web .view > img, .sc-web .view > video { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.sc-web.tall .view { aspect-ratio:auto; }
.sc-web.tall .view > img { height:auto; }
.sc-web .sc-mark { border-radius:6px; }

/* hero: the live page on a desktop, with the phone in front of it */
.sc-webduo { position:relative; max-width:1060px; margin:0 auto; padding-bottom:clamp(24px, 4vw, 56px); }
.sc-webduo .sc-web { width:86%; margin:0; }
.sc-webduo .ph { position:absolute; right:0; bottom:0; width:min(250px, 24%); }

/* three directions, the chosen one lit */
.sc-dirs { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(12px, 2vw, 24px); align-items:start; }
.sc-dirs .sc-web { width:100%; border-radius:8px; opacity:.6; filter:saturate(.55); transition:opacity .4s var(--ease), filter .4s var(--ease); }
.sc-dirs .sc-web .bar { height:16px; padding:0 7px; gap:4px; } .sc-dirs .sc-web .bar i { width:5px; height:5px; } .sc-dirs .sc-web .bar span { display:none; }
.sc-dirs .sc-web .view { aspect-ratio:2 / 1; }
.sc-dirs .pick .sc-web { opacity:1; filter:none; box-shadow:0 0 0 2px var(--rust), 0 30px 70px rgba(0,0,0,.55); }
.sc-dirs .sc-lbl { margin-top:12px; }

/* outcome: the prototype behind, the live page in front */
.sc-cascade { position:relative; padding-bottom:clamp(90px, 14vw, 180px); }
.sc-cascade .sc-web { width:80%; margin:0; }
.sc-cascade .sc-web:first-child { opacity:.7; }
.sc-cascade .sc-web + .sc-web { position:absolute; right:0; bottom:0; }

@media (max-width:640px) {
  .sc-webduo .sc-web { width:100%; }
  .sc-webduo .ph { position:relative; width:48%; margin:-34% 0 0 auto; }
  .sc-dirs { grid-template-columns:1fr; }
  .sc-web .bar span { font-size:9px; }
}
/* hero: keep the phone off the live page's pitch; it overlaps only the empty lower-right corner */
.sc-webduo { padding-bottom:22%; }
.sc-webduo .sc-web { width:84%; }
.sc-webduo .ph { width:20%; }
@media (max-width:640px) {
  .sc-webduo { padding-bottom:0; }
  .sc-webduo .sc-web { width:100%; }
  .sc-webduo .ph { width:48%; }
}

/* ---------- how I worked: the loop steps through Figma, Claude Code, a working page and my call ---------- */
.sc-loop { max-width:880px; margin:0 auto; }
.sc-loop ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(10px, 1.6vw, 20px); position:relative; }
.sc-loop li { position:relative; border:1px solid var(--line); border-radius:14px; padding:clamp(14px,1.6vw,20px); background:rgba(237,234,227,.03);
  transition:border-color .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); }
.sc-loop li + li::before { content:''; position:absolute; top:50%; right:100%; width:clamp(10px, 1.6vw, 20px); height:1px; background:var(--line); }
.sc-loop li .k { display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:22px; transition:color .5s var(--ease); }
.sc-loop li b { display:block; font-family:var(--serif); font-weight:700; font-size:clamp(16px,1.4vw,20px); color:var(--bone); }
.sc-loop li span:last-child { display:block; margin-top:6px; font-size:clamp(13px,1vw,14.5px); line-height:1.4; color:var(--dim); }
.sc-loop li.on { border-color:rgba(236,34,34,.9); background:rgba(236,34,34,.08); box-shadow:0 0 0 3px rgba(236,34,34,.16), 0 24px 60px rgba(0,0,0,.45); transform:translateY(-4px); }
.sc-loop li.on .k { color:var(--rust); }
.sc-loop .l-back { position:relative; margin:22px 4% 26px; height:28px; border:1px dashed var(--line); border-top:0; border-radius:0 0 14px 14px; }
.sc-loop .l-back span { position:absolute; left:50%; bottom:-22px; transform:translateX(-50%); padding:0 10px; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); white-space:nowrap; }
.sc-loop .l-back::after { content:''; position:absolute; left:-4px; top:-5px; width:8px; height:8px; border-radius:50%; background:var(--rust); opacity:0; }
.sc-loop.back .l-back { border-color:rgba(236,34,34,.7); }
.sc-loop.back .l-back span { color:var(--rust); }
@media (max-width:640px) {
  .sc-loop ol { grid-template-columns:1fr 1fr; }
  .sc-loop li + li::before { display:none; }
  .sc-loop li .k { margin-bottom:10px; }
}
@media (prefers-reduced-motion:reduce) { .sc-loop li { transition:none; transform:none!important; } }

/* ---------- two handoffs: 27 spec sheets fold away, one link and six widths arrive ---------- */
.sc-hand { max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:22px; }
.sc-hand .h-stage { display:grid; border:1px solid var(--line); border-radius:16px; padding:clamp(18px,3vw,34px); background:rgba(237,234,227,.02); }
.sc-hand .h-a, .sc-hand .h-b { grid-area:1/1; display:flex; flex-direction:column; gap:18px; transition:opacity .5s var(--ease); }
.sc-hand .h-cap b { display:block; font-family:var(--serif); font-weight:700; font-size:clamp(18px,1.7vw,24px); color:var(--bone); }
.sc-hand .h-cap span { display:block; margin-top:4px; font-size:clamp(13px,1vw,14.5px); color:var(--dim); }
.sc-hand .h-sheets { display:grid; grid-template-columns:repeat(9, minmax(0,1fr)); gap:6px; }
.sc-hand .h-sheets i { aspect-ratio:3 / 4; border-radius:3px; background:repeating-linear-gradient(180deg, rgba(237,234,227,.16) 0 2px, transparent 2px 7px) 18% 22% / 64% 60% no-repeat, rgba(237,234,227,.05);
  box-shadow:inset 0 0 0 1px rgba(236,34,34,.45); transition:transform .5s var(--ease), opacity .45s var(--ease); transition-delay:calc(var(--i) * 14ms); }
.sc-hand .h-link { display:flex; align-items:center; gap:10px; width:max-content; max-width:100%; padding:10px 16px; border-radius:999px; border:1px solid rgba(236,34,34,.9);
  box-shadow:0 0 0 3px rgba(236,34,34,.16); font-family:var(--font-mono); font-size:12px; color:var(--bone); transition:transform .6s var(--ease), opacity .5s var(--ease); }
.sc-hand .h-link i { width:8px; height:8px; border-radius:50%; background:var(--rust); }
.sc-hand .h-bps { display:flex; flex-direction:column; gap:7px; }
.sc-hand .h-bps span { display:flex; align-items:center; height:22px; width:var(--w); padding-left:9px; border-radius:5px; background:rgba(237,234,227,.07); box-shadow:inset 0 0 0 1px rgba(237,234,227,.16);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--dim); transform-origin:left; transition:transform .6s var(--ease), opacity .4s var(--ease); transition-delay:calc(.25s + var(--i) * 70ms); }
.sc-hand .h-b { opacity:0; pointer-events:none; }
.sc-hand .h-b .h-link { transform:translateY(10px); opacity:0; }
.sc-hand .h-b .h-bps span { transform:scaleX(.15); opacity:0; }
.sc-hand.is-b .h-a { opacity:0; transition-delay:.3s; }
.sc-hand.is-b .h-a .h-sheets i { transform:scale(.2); opacity:0; }
.sc-hand.is-b .h-b { opacity:1; pointer-events:auto; }
.sc-hand.is-b .h-b .h-link { transform:none; opacity:1; transition-delay:.2s; }
.sc-hand.is-b .h-b .h-bps span { transform:none; opacity:1; }
@media (max-width:640px) { .sc-hand .h-sheets { grid-template-columns:repeat(9, minmax(0,1fr)); gap:4px; } }
@media (prefers-reduced-motion:reduce) { .sc-hand *, .sc-hand .h-a, .sc-hand .h-b { transition:none!important; } }

/* ---------- how the work moved: six steps, each marked with who did it ---------- */
.sc-steps { max-width:880px; margin:0 auto; }
.sc-steps ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(10px, 1.6vw, 18px); counter-reset:step; }
.sc-steps li { position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; padding:clamp(14px,1.6vw,20px); background:rgba(237,234,227,.03);
  transition:border-color .5s var(--ease), background-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease); }
.sc-steps li .k { font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); transition:color .5s var(--ease); }
.sc-steps li b { display:block; margin-top:14px; font-family:var(--serif); font-weight:700; font-size:clamp(16px,1.4vw,20px); color:var(--bone); }
.sc-steps li .d { display:block; margin:5px 0 16px; font-size:clamp(13px,1vw,14.5px); line-height:1.4; color:var(--dim); }
.sc-steps .who { margin-top:auto; align-self:flex-start; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; border-radius:999px; border:1px solid var(--line); color:var(--dim); }
.sc-steps .who.ai { border-color:rgba(236,34,34,.55); color:#f36a60; background:rgba(236,34,34,.08); }
.sc-steps .who.me { border-color:rgba(237,234,227,.35); color:var(--bone); }
.sc-steps li.on { border-color:rgba(236,34,34,.9); background:rgba(236,34,34,.08); box-shadow:0 0 0 3px rgba(236,34,34,.16), 0 24px 60px rgba(0,0,0,.45); transform:translateY(-4px); }
.sc-steps li.on .k { color:var(--rust); }
.sc-steps .s-key { display:flex; gap:14px; justify-content:center; margin-top:20px; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
@media (max-width:640px) { .sc-steps ol { grid-template-columns:1fr 1fr; } }
@media (prefers-reduced-motion:reduce) { .sc-steps li { transition:none; transform:none!important; } }
/* ownership: every step is mine; Claude Code shows only as the tool on the steps it sped up */
.sc-steps .whos { margin-top:auto; display:flex; flex-wrap:wrap; gap:6px; }
.sc-steps .whos .who { margin-top:0; }
.sc-steps .who { white-space:nowrap; }
@media (max-width:640px) { .sc-steps .who { font-size:8.5px; letter-spacing:.08em; padding:4px 8px; } }

/* ---------- one big frame at a time: directions and handover views cycle, buttons pick ---------- */
.sc-tabs { max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.sc-tabs .t-stage { display:grid; }
.sc-tabs .t-stage > .sc-web { grid-area:1/1; width:100%; opacity:0; visibility:hidden; transition:opacity .6s var(--ease), visibility 0s .6s; }
.sc-tabs .t-stage > .sc-web.on { opacity:1; visibility:visible; transition:opacity .6s var(--ease), visibility 0s; }
.sc-tabs.wide .sc-web .view { aspect-ratio:1400 / 715; }
.sc-tabs.fit .sc-web .view { background:#2a2a2d; }
.sc-tabs.fit .sc-web .view > img { object-fit:contain; object-position:center; }
.sc-tabs .m-ctl { flex-wrap:wrap; }
@media (prefers-reduced-motion:reduce) { .sc-tabs .t-stage > .sc-web { transition:none; } }

/* =====================================================================
   Homepage personality: handwriting, a stamp, real screens that bleed in
   ===================================================================== */
@property --b { syntax:'<length-percentage>'; inherits:false; initial-value:0%; }

/* hero: a handwritten hello with a drawn arrow down into the name */
.hero--full .ch.hi { font-family:var(--serif); font-style:italic; font-size:clamp(20px,2vw,30px); letter-spacing:0; text-transform:none; color:var(--bone); gap:0; position:relative; filter:url(#ink-lg); }
.ch.hi .hi-arr { position:absolute; left:calc(100% + 6px); top:.2em; width:clamp(60px,6vw,96px); height:auto; overflow:visible; }

/* hand-drawn strokes draw in once seen */
.hand-path { fill:none; stroke:var(--bone); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; filter:url(#ink-line);
  stroke-dasharray:var(--len, 240); stroke-dashoffset:0; }
.js .hand-path { stroke-dashoffset:var(--len, 240); transition:stroke-dashoffset 1.1s var(--ease) .25s; }
.js .drawn .hand-path { stroke-dashoffset:0; }

/* the stamp: printed, a little crooked, turning slowly */
.stamp { position:absolute; z-index:3; right:clamp(18px,4vw,64px); top:clamp(70px,14vh,150px); width:clamp(96px,10vw,150px); aspect-ratio:1; color:var(--rust);
  transform:rotate(-12deg); filter:url(#ink-xl); opacity:.92; pointer-events:none; }
.stamp svg { width:100%; height:100%; overflow:visible; }
.stamp .ring { animation:stamp-turn 38s linear infinite; transform-origin:80px 80px; }
.stamp text { font-family:var(--font-mono); font-size:11.2px; letter-spacing:.2em; fill:currentColor; text-transform:uppercase; }
.stamp .mid { font-family:var(--serif); font-style:italic; font-size:34px; letter-spacing:0; }
@keyframes stamp-turn { to { transform:rotate(360deg); } }
@media (max-width:640px) { .stamp { top:62px; right:14px; width:84px; } }

/* the moving strip carries real screens between the words */
.mtrack { filter:none; }
.mtrack .half { align-items:center; }
.mtrack .half > span { filter:url(#ink-lg); }
.mtrack .tile { display:block; flex:none; margin-right:.9em; height:clamp(70px,8.4vw,128px); border-radius:9px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(237,234,227,.14), 0 18px 40px rgba(0,0,0,.5); transform:rotate(var(--r, -2deg)); background:#fff; }
.mtrack .tile:nth-child(3n) { --r:2.5deg; } .mtrack .tile:nth-child(4n+1) { --r:-3deg; }
.mtrack .tile img { display:block; height:100%; width:auto; filter:saturate(.8); }

/* cards: real screens soak in from a blot the first time they're seen */
.card-media > .device, .card-media > .ph { -webkit-mask-image:radial-gradient(circle at 50% 62%, #000 var(--b), transparent calc(var(--b) + 14%)); mask-image:radial-gradient(circle at 50% 62%, #000 var(--b), transparent calc(var(--b) + 14%)); --b:160%; }
.js .card-media > .device, .js .card-media > .ph { --b:0%; transition:--b 1.5s var(--ease) .1s, transform .9s var(--ease); }
.js .card-media.bled > .device, .js .card-media.bled > .ph { --b:160%; }
.js .card-media.bled > .ph.pr { transition-delay:.35s, 0s; }
@media (prefers-reduced-motion:reduce) { .js .card-media > .device, .js .card-media > .ph { --b:160%; transition:none; } .js .hand-path { stroke-dashoffset:0; transition:none; } .stamp .ring { animation:none; } }

/* handwritten margin notes on the work */
.card-media .note { position:absolute; z-index:4; left:clamp(16px,3vw,44px); top:clamp(40px,5vw,64px); max-width:15ch; pointer-events:none;
  font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.5vw,22px); line-height:1.15; color:var(--bone); transform:rotate(-4deg); }
.card-media .note > span { display:block; filter:url(#ink-lg); }
.card-media .note svg { display:block; width:clamp(70px,7vw,110px); height:auto; margin:6px 0 0 34%; overflow:visible; }
.card-media .note.r { left:auto; right:clamp(16px,3vw,44px); text-align:right; transform:rotate(3deg); }
.card-media .note.r svg { margin:6px 34% 0 auto; transform:scaleX(-1); }
@media (max-width:640px) { .card-media .note { font-size:15px; top:18px; left:14px; } .card-media .note svg { width:54px; } .card-media .note.r { right:14px; } }

/* card 05: two phones, like card 01 */
.card--wide .card-media .ph.pl.cmp { left:28%; } .card--wide .card-media .ph.pr.cmp { left:54%; }
/* small handwriting and the stamp need the fine line texture; the heavy one eats them */
.stamp { filter:url(#ink-line); }
.hero--full .ch.hi, .card-media .note > span { filter:url(#ink-line); }
@media (max-width:640px) { .stamp { top:auto; bottom:250px; right:16px; width:78px; } }

/* card 04: guide pages laid out like printed sheets */
.card-media > .sheets { position:absolute; inset:0; z-index:2; -webkit-mask-image:radial-gradient(circle at 50% 62%, #000 var(--b), transparent calc(var(--b) + 14%)); mask-image:radial-gradient(circle at 50% 62%, #000 var(--b), transparent calc(var(--b) + 14%)); --b:160%; }
.js .card-media > .sheets { --b:0%; transition:--b 1.5s var(--ease) .1s; }
.js .card-media.bled > .sheets { --b:160%; }
.sheets img { position:absolute; top:12%; width:24%; border-radius:6px; box-shadow:0 0 0 1px rgba(0,0,0,.08), 0 30px 60px rgba(0,0,0,.55); transition:transform .9s var(--ease); background:#fff; }
.sheets img:nth-child(1) { left:14%; transform:rotate(-5deg); }
.sheets img:nth-child(2) { left:38%; top:8%; transform:rotate(1.5deg); z-index:1; }
.sheets img:nth-child(3) { left:62%; top:16%; width:22%; transform:rotate(6deg); }
.card:hover .sheets img:nth-child(1) { transform:rotate(-7deg) translateY(-10px); }
.card:hover .sheets img:nth-child(2) { transform:rotate(0deg) translateY(-16px); }
.card:hover .sheets img:nth-child(3) { transform:rotate(8deg) translateY(-10px); }
@media (max-width:640px) { .sheets img { width:30%; } .sheets img:nth-child(1) { left:4%; } .sheets img:nth-child(2) { left:35%; } .sheets img:nth-child(3) { left:66%; width:28%; } }
/* phones: the margin notes collide with the card numbers, so they stay a desktop detail */
@media (max-width:640px) { .card-media .note { display:none; } }

/* ---------- the AJ mark: bone letterform, star in the accent ---------- */
.nav .logo { width:auto; height:24px; flex:none; overflow:visible; }
.nav .logo .lg-mark { fill:var(--bone); }
.nav .logo .lg-star { fill:var(--rust); transform-box:fill-box; transform-origin:center; transition:transform .9s var(--ease); }
.nav a.name:hover .logo .lg-star { transform:rotate(90deg) scale(1.12); }
@media (max-width:640px) { .nav .logo { height:20px; } }
.stamp .st-logo { fill:currentColor; }
@media (prefers-reduced-motion:reduce) { .nav .logo .lg-star { transition:none; } }

/* card 03 at full width: the live page in a narrower browser, the phone beside it */
.card--wide .card-media.dhw .device { left:12%; right:30%; height:88%; }
.card--wide .card-media.dhw .ph.pr.dh { left:66%; width:17%; bottom:-22%; }
@media (max-width:640px) {
  .card--wide .card-media.dhw .device { left:5%; right:28%; height:86%; }
  .card--wide .card-media.dhw .ph.pr.dh { left:64%; width:32%; bottom:-40%; }
}
.card--wide .card-media.dhw .device { width:auto; }
/* .press > * forces position:relative; the paired frame on card 03 has to stay absolute */
.card--wide .card-media.dhw.press > .device { position:absolute; }


/* ---------- how I work: quiet columns that match the rest of the page, no cards, no ghost numbers ---------- */
.approach { gap:clamp(20px,3vw,44px); }
.acard { background:none; border:0; border-top:1px solid var(--line); border-radius:0; padding:20px 0 0; transform:none!important; }
.acard:hover { background:none; border-color:var(--line); }
.acard::after { display:none; }
.acard .idx { position:static; display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--faint-text); margin-bottom:14px; transform:none; }
.acard:hover .idx { color:var(--faint-text); transform:none; }
.acard h3 { font-family:var(--serif); font-weight:700; font-size:clamp(20px,1.7vw,24px); }
@media (max-width:900px) { .approach { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px) { .approach { grid-template-columns:1fr; } }

/* nav: logo stands alone */
.nav a.name { gap:0; padding-left:14px; padding-right:14px; }
.nav .logo { height:26px; }
@media (max-width:640px) { .nav a.name { padding-left:10px; padding-right:10px; } .nav .logo { height:22px; } }

/* other work: two quieter pieces under the cards */
.others { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3vw,40px); }
.other { margin:0; display:flex; flex-direction:column; gap:22px; }
.o-media { position:relative; aspect-ratio:16/10; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#0a0a0d; }
.o-murm .o-clip { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.18); }
.o-dc { background:#e9e4dc; }
.o-dc .o-desk { position:absolute; left:6%; top:9%; width:80%; border-radius:8px; box-shadow:0 18px 40px rgba(0,0,0,.35); }
.o-dc .o-phone { position:absolute; right:5%; bottom:-14%; width:23%; border-radius:16px; border:4px solid #111; box-shadow:0 18px 40px rgba(0,0,0,.4); }
.other figcaption { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.other figcaption h3 { font-family:var(--serif); font-weight:700; font-size:clamp(22px,2vw,28px); margin:0; }
.other figcaption p { margin:0; max-width:52ch; }
@media (max-width:760px) { .others { grid-template-columns:1fr; } }

/* how i work: cards again, redrawn */
.approach { gap:clamp(14px,1.6vw,22px); }
.acard { position:relative; display:flex; flex-direction:column; min-height:300px; overflow:hidden;
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r); padding:clamp(22px,2vw,28px);
  transition:border-color .4s linear, background .4s linear; }
.acard:hover { background:var(--panel-2); border-color:var(--line); }
.acard::after { display:block; }
.acard .a-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:auto; padding-bottom:36px; }
.acard .a-glyph { width:80px; height:48px; overflow:visible; }
.acard .a-glyph .hand-path { transition:stroke-dashoffset 1.1s var(--ease) .25s, stroke .4s linear; }
.acard:hover .a-glyph .hand-path { stroke:var(--rust); }
.acard .idx { margin:0; }
.acard h3 { margin-bottom:10px; }
@media (max-width:900px) { .acard { min-height:250px; } }
@media (max-width:520px) { .acard { min-height:0; } .acard .a-top { padding-bottom:28px; } }
.acard .a-top { margin-bottom:0; padding-bottom:clamp(56px,6vw,84px); }
.acard .a-glyph { width:96px; height:58px; }

/* migration case study */
.mg-ba .mg-ba-view { position:relative; aspect-ratio:1600/1000; overflow:hidden; }
.mg-ba .mg-ba-view img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.mg-ba .mg-before { clip-path:inset(0 calc(100% - var(--x)) 0 0); }
.mg-bar { position:absolute; top:0; bottom:0; left:var(--x); width:2px; margin-left:-1px; background:var(--bone); box-shadow:0 0 0 1px rgba(0,0,0,.25); z-index:3; pointer-events:none; }
.mg-knob { position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%); border-radius:50%; background:#0a0908; border:1.5px solid var(--bone); box-shadow:0 8px 22px rgba(0,0,0,.5); }
.mg-knob::before { content:'‹ ›'; position:absolute; inset:0; display:grid; place-items:center; color:var(--bone); font-size:17px; }
.mg-tag { position:absolute; bottom:14px; z-index:3; padding:5px 10px; border-radius:999px; background:rgba(10,9,8,.8); color:var(--bone); font-size:10px; letter-spacing:.14em; text-transform:uppercase; pointer-events:none; }
.mg-tag.l { left:14px; } .mg-tag.r { right:14px; }
.mg-range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:4; -webkit-appearance:none; appearance:none; }
.mg-ba:has(.mg-range:focus-visible) .mg-knob { border-color:var(--rust); }

.mg-wall { display:flex; flex-direction:column; gap:12px; padding:clamp(18px,3vw,34px) 0; overflow:hidden; border:1px solid var(--line-2); border-radius:18px; background:var(--panel);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.mg-row { display:flex; gap:10px; width:max-content; animation:mg-slide 60s linear infinite; }
.mg-row.rev-dir { animation-direction:reverse; animation-duration:72s; }
.mg-row span { white-space:nowrap; padding:10px 16px; border-radius:999px; border:1px solid var(--line); color:var(--bone); font-size:15px; background:var(--panel-2); }
.mg-row span:nth-child(5n+2) { border-color:rgba(236,34,34,.45); }
@keyframes mg-slide { to { transform:translateX(-50%); } }

.mg-map { display:flex; justify-content:center; padding:clamp(18px,3vw,34px); border:1px solid var(--line-2); border-radius:18px; background:var(--panel); }
.mg-sheet { position:relative; width:min(340px,70%); border-radius:6px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.5); }
.mg-sheet img { display:block; width:100%; }
.mg-sheet .band { position:absolute; left:0; right:0; border:1.5px solid transparent; background:transparent; transition:background .35s linear, border-color .35s linear; }
.mg-sheet .band b { position:absolute; left:calc(100% + 14px); top:50%; transform:translateY(-50%); white-space:nowrap; font-size:10.5px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--faint-text); opacity:0; transition:opacity .35s linear; }
.mg-sheet { overflow:visible; }
.mg-sheet img { border-radius:6px; }
.mg-sheet .band.on { border-color:var(--rust); background:rgba(236,34,34,.12); }
.mg-sheet .band.on b { opacity:1; color:var(--bone); }

.mg-duo { display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,2vw,24px); align-items:start; }
.mg-duo .view { max-height:560px; overflow:hidden; }
@media (max-width:640px) { .mg-duo { grid-template-columns:1fr; } .mg-duo .sc-web + .sc-web { display:none; } .mg-sheet { width:62%; margin-right:30%; } .mg-row span { font-size:13px; } }
@media (prefers-reduced-motion:reduce) { .mg-row { animation:none; } }
.mg-map { height:clamp(420px,46vw,580px); overflow:hidden; align-items:flex-start; position:relative; }
.mg-sheet { transform:translateY(var(--ty,0px)); transition:transform 1s var(--ease); margin-top:clamp(18px,3vw,34px); }
@media (max-width:640px) { .mg-map { height:460px; } }
.mg-duo .view { aspect-ratio:auto; height:clamp(360px,40vw,540px); max-height:none; overflow:hidden; }
.mg-duo .view img { width:100%; height:auto; display:block; }
@media (max-width:640px) { .mg-duo .view { height:420px; } }

/* other work: each piece is a row, media first */
.others { grid-template-columns:1fr; gap:clamp(40px,6vw,88px); }
.other.row { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(22px,3.5vw,56px); align-items:center; }
.o-objs { aspect-ratio:auto; display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:6px; background:var(--panel); }
.o-objs .o-clip { width:100%; aspect-ratio:1500/1060; object-fit:cover; display:block; border-radius:12px; transform:none; background:#1d1d1f; }
@media (max-width:860px) { .other.row { grid-template-columns:1fr; } }
.o-f1 { background:#000; aspect-ratio:1400/760; }
.o-f1 .o-clip { width:100%; height:100%; object-fit:cover; display:block; transform:none; }
.o-flow { background:#f7f5f2; aspect-ratio:16/9; }
.o-flow .o-clip { width:100%; height:100%; object-fit:cover; display:block; transform:none; }

/* migration card: the 2024 page behind, the live page in front */
.card-media.mgw.press > .device { position:absolute; height:auto; aspect-ratio:1600/1024; }
.card-media.mgw .device.before { left:7%; top:9%; width:52%; right:auto; opacity:.8; }
.card-media.mgw .device.after { left:38%; top:24%; width:55%; right:auto; z-index:2; box-shadow:0 40px 80px rgba(0,0,0,.6); }
.card-media.mgw .device .shot { filter:none; }
.card-media.mgw .device .bar { position:relative; }
.card-media.mgw .device .bar span { position:absolute; left:50%; transform:translateX(-50%); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint-text); }
.card:hover .card-media.mgw .device.before { transform:translate(-8px,-8px); }
.card:hover .card-media.mgw .device.after { transform:translate(6px,-12px); }
@media (max-width:640px) { .card-media.mgw .device.before { left:4%; width:60%; } .card-media.mgw .device.after { left:34%; width:62%; top:30%; } }
.card-media.mgw .device.before { left:13%; top:17%; width:50%; }
.card-media.mgw .device.after { left:40%; top:37%; width:53%; }
@media (max-width:640px) { .card-media.mgw .device.before { left:6%; top:20%; width:62%; } .card-media.mgw .device.after { left:32%; top:42%; width:64%; } }
@media (min-width:1000px) {
  .card--wide .card-media.mgw .device.before { left:15%; top:12%; width:39%; }
  .card--wide .card-media.mgw .device.after { left:43%; top:27%; width:41%; }
}

/* flow row: the hero prototype inside a browser frame */
.o-flow { aspect-ratio:auto; background:var(--panel); padding:clamp(10px,1.4vw,18px); }
.o-web { border-radius:10px; overflow:hidden; background:#f7f5f2; box-shadow:0 30px 70px rgba(0,0,0,.45); }
.o-web .bar { height:26px; display:flex; align-items:center; gap:5px; padding:0 11px; background:#1d1c1a; position:relative; }
.o-web .bar i { width:7px; height:7px; border-radius:50%; background:rgba(237,234,227,.22); }
.o-web .bar span { position:absolute; left:50%; transform:translateX(-50%); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint-text); white-space:nowrap; }
.o-flow .o-clip { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; }

/* homepage cards, one system: screens rise out of the bottom edge, nothing covered, the front screen lifts more on hover */
.card--wide .card-media.dhw.press > .device { top:13%; bottom:-10%; height:auto; left:13%; right:auto; width:52%; }
.card--wide .card-media.dhw .ph.pr.dh { left:69%; width:17%; bottom:-30%; }
.card:hover .card-media.dhw > .device { transform:translateY(-10px); }
.card:hover .card-media.dhw > .ph.pr.dh { transform:translateY(-20px); }
.card-media.mgw.press > .device { aspect-ratio:auto; height:auto; right:auto; opacity:1; }
.card--wide .card-media.mgw .device.before { left:12%; width:44%; top:22%; bottom:-12%; }
.card--wide .card-media.mgw .device.after { left:44%; width:44%; top:11%; bottom:-12%; }
.card-media.mgw .device.before .shot { filter:brightness(.82) saturate(.85); }
.card:hover .card-media.mgw .device.before { transform:translateY(-10px); }
.card:hover .card-media.mgw .device.after { transform:translateY(-20px); }
@media (max-width:1100px) {
  .card--wide .card-media.dhw.press > .device { left:6%; width:60%; top:14%; }
  .card--wide .card-media.dhw .ph.pr.dh { left:68%; width:28%; bottom:-46%; }
  .card--wide .card-media.mgw .device.before { left:5%; width:58%; top:24%; }
  .card--wide .card-media.mgw .device.after { left:37%; width:58%; top:12%; }
}
/* screens inside card windows: full width, anchored to the top, running off the bottom edge */
.card-media.dhw .device .screen, .card-media.mgw .device .screen { overflow:hidden; background:#0f0f10; }
.card-media.dhw .device .shot, .card-media.mgw .device .shot { width:100%; height:auto; object-fit:initial; display:block; }
/* demo hub window: fill the frame when the card gets taller than the screenshot */
.card-media.dhw .device .shot { height:100%; object-fit:cover; object-position:top left; }
/* design system sheets: same language as the other cards, upright and rising out of the bottom edge */
.sheets img { top:auto; bottom:-18%; width:25%; transform:none; }
.sheets img:nth-child(1) { left:13%; transform:none; bottom:-30%; }
.sheets img:nth-child(2) { left:39%; transform:none; bottom:-12%; }
.sheets img:nth-child(3) { left:65%; width:25%; transform:none; bottom:-26%; }
.card:hover .sheets img:nth-child(1), .card:hover .sheets img:nth-child(3) { transform:translateY(-10px); }
.card:hover .sheets img:nth-child(2) { transform:translateY(-20px); }
@media (max-width:1100px) { .sheets img { width:30%; } .sheets img:nth-child(1) { left:4%; } .sheets img:nth-child(2) { left:35%; } .sheets img:nth-child(3) { left:66%; width:30%; } }
/* sheets anchored from the top so they load (a lazy image parked below the frame never does), each a full-height page running off the bottom */
.sheets img, .sheets img:nth-child(1), .sheets img:nth-child(2), .sheets img:nth-child(3) { bottom:auto; height:125%; object-fit:contain; object-position:top; background:#fff; }
.sheets img:nth-child(1) { top:24%; }
.sheets img:nth-child(2) { top:10%; }
.sheets img:nth-child(3) { top:20%; }


/* ---------- device swatch demo (cs-device) ----------
   The swatch row is real markup, not a screenshot: the Framer export was a
   palette PNG with a transparent background, so its dark label rendered dark
   on the dark page. Built live it also animates, and section 02 can push the
   same card through real colour-vision filters. Neutral sans on white so it
   reads as the product, not as this site. */
.dv-demo { width:100%; display:flex; flex-direction:column; gap:14px; align-items:center; }
.dv-sw { width:100%; max-width:430px; background:#fff; border:1px solid #d7dade; border-radius:10px;
  padding:clamp(15px,2.2vw,22px) clamp(16px,2.4vw,24px); font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; }
.dv-lbl { margin:0 0 14px; font-size:clamp(14px,1.15vw,16px); color:#1e242b; letter-spacing:0; }
.dv-lbl b { font-weight:700; }
.dv-row { display:flex; gap:clamp(10px,1.4vw,16px); }
.dv-dot { width:clamp(34px,3.2vw,44px); aspect-ratio:1; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--c); box-shadow:none; transition:box-shadow .32s var(--ease), transform .32s var(--ease); }
.dv-dot:focus-visible { outline:2px solid #0057b8; outline-offset:4px; }
/* the design: a ring on every swatch, plus an inner shadow so pale finishes read as objects. The selection ring is AT&T blue #0057b8, sampled from the live page */
.dv-demo[data-ring="1"] .dv-dot { box-shadow:inset 0 2px 5px rgba(0,0,0,.17), 0 0 0 1px #878c94; }
.dv-demo[data-ring="1"] .dv-dot[aria-current="true"] { box-shadow:inset 0 2px 5px rgba(0,0,0,.17), 0 0 0 2px #fff, 0 0 0 3px #0057b8; }
.dv-demo[data-ring="0"] .dv-dot[aria-current="true"] { box-shadow:0 0 0 2px #fff, 0 0 0 4px #454b52; }
.dv-ctl { display:flex; gap:8px; }

/* section 02: the same card, twice, under a colour-vision filter */
.dv-cvd { width:100%; display:flex; flex-direction:column; gap:16px; align-items:center; }
.dv-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.6vw,22px); width:100%; }
.dv-pair > div { display:flex; flex-direction:column; gap:9px; min-width:0; }
.dv-pair .dv-sw { max-width:none; filter:var(--vf,none); }
.dv-pair .mono { font-size:11px; color:var(--dim); }
@media (max-width:640px){ .dv-pair { grid-template-columns:1fr; } }

/* ---------- working gallery (cs-device 03) ---------- */
.gv { position:absolute; inset:0; display:flex; flex-direction:column; gap:12px; padding:18px 18px 16px; background:#fff; color:#1d2329; }
.gv-stage, .gl-stage { position:relative; flex:1; min-height:0; }
.gv-stage > img, .gl-stage > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transform:scale(.985);
  transition:opacity .45s var(--ease), transform .6s var(--ease); user-select:none; }
.gv-stage > img.on, .gl-stage > img.on { opacity:1; transform:none; }
.gv-nav, .gv-exp, .gv-x { position:absolute; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid #d7dade;
  background:#fff; color:#1d2329; cursor:pointer; padding:0; transition:border-color .2s, transform .2s var(--ease); }
.gv-nav:hover, .gv-exp:hover, .gv-x:hover { border-color:#0057b8; color:#0057b8; }
.gv-nav:active, .gv-exp:active, .gv-x:active { transform:scale(.94); }
.gv-nav .gl, .gv-exp .gl, .gv-x .gl { width:20px; height:20px; filter:none; }
.gv-prev { left:0; top:50%; margin-top:-20px; } .gv-next { right:0; top:50%; margin-top:-20px; }
.gv-exp { right:0; top:0; }
.gv-count { position:absolute; left:0; top:10px; font-size:10px; letter-spacing:.08em; color:#6b7178; }
.gv-count b { color:#1d2329; font-weight:400; }
.gv-strip { display:flex; gap:8px; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; padding:3px; flex:none; }
.gv-strip::-webkit-scrollbar { display:none; }
.gv-th { flex:none; width:56px; height:56px; padding:4px; border-radius:6px; border:1px solid #d7dade; background:#fff; cursor:pointer; transition:box-shadow .25s, border-color .25s; }
.gv-th img { width:100%; height:100%; object-fit:contain; display:block; }
.gv-th[aria-current="true"] { border-color:transparent; box-shadow:0 0 0 2px #0057b8; }
.gv button:focus-visible, .gv-box button:focus-visible { outline:2px solid #0057b8; outline-offset:3px; }
.gv-box { position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:clamp(12px,4vw,48px);
  background:rgba(10,9,8,.72); opacity:0; transition:opacity .4s var(--ease); }
.gv-box.open { opacity:1; }
.gv-sheet { position:relative; width:min(1100px,100%); height:min(820px,100%); background:#fff; border-radius:14px; display:flex; flex-direction:column; gap:14px;
  padding:64px clamp(12px,3vw,40px) 20px; color:#1d2329; transform:translateY(18px) scale(.97); transition:transform .5s var(--ease); }
.gv-box.open .gv-sheet { transform:none; }
.gv-x { right:16px; top:14px; }
.gv-sheet .gv-th { width:64px; height:64px; }
@media (max-width:640px) {
  .gv { padding:12px 10px 10px; gap:8px; }
  .gv-th { width:40px; height:40px; padding:3px; }
  .gv-nav, .gv-exp { width:32px; height:32px; } .gv-prev, .gv-next { margin-top:-16px; }
  .gv-sheet .gv-th { width:46px; height:46px; }
}
@media (prefers-reduced-motion: reduce) { .gv-stage > img, .gl-stage > img, .gv-box, .gv-sheet { transition:none; } }
.gv .gl path, .gv-box .gl path { filter:none; }
.gv-strip > :first-child { margin-left:auto; } .gv-strip > :last-child { margin-right:auto; }
.gv, .gv-box, .gv-sheet, .gv-th { box-sizing:border-box; }
.gv-box { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); } .gv-sheet { justify-self:center; min-width:0; } .gv-strip { min-width:0; max-width:100%; }

/* ---------- 404: the ink ran off ---------- */
.nf { min-height:calc(100svh - 220px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:18px; padding:60px 0 40px; }
.nf-ink { position:relative; filter:url(#nf-goo); padding:0 24px 15vh; margin-bottom:-12vh; color:var(--bone); line-height:.8; }
.nf-num { display:block; font-family:var(--font-display, 'Erode'), serif; font-weight:700; font-size:clamp(150px, 30vw, 380px); letter-spacing:-.02em; }
.nf-drop { position:absolute; top:calc(clamp(150px, 30vw, 380px) * .74); left:25%; width:clamp(14px, 2.4vw, 30px); aspect-ratio:1; margin-left:calc(clamp(14px, 2.4vw, 30px) / -2);
  border-radius:50%; background:currentColor; transform:translateY(0) scale(.2); animation:nf-drip 5.2s cubic-bezier(.55,0,.8,.45) infinite; }
.nf-drop.d2 { left:84%; animation-delay:2.1s; animation-duration:6.4s; }
.nf-drop.d3 { left:52%; animation-delay:3.7s; animation-duration:7.2s; width:clamp(10px,1.8vw,22px); }
@keyframes nf-drip {
  0%   { transform:translateY(0) scale(.2, .2); }
  35%  { transform:translateY(4px) scale(1, 1); }
  55%  { transform:translateY(22px) scale(.8, 1.35); }
  88%  { transform:translateY(7vh) scale(.55, .9); }
  100% { transform:translateY(8.5vh) scale(0, 0); }
}
.nf-h { font-size:clamp(34px, 5vw, 60px); line-height:1; margin:0; }
.nf-p { color:var(--dim); max-width:40ch; margin:0 0 10px; }
@media (prefers-reduced-motion: reduce) { .nf-drop { animation:none; transform:scale(.8); } }
@media (max-width:640px) { .nf-ink { filter:url(#nf-goo-s); } }

/* ---------- the photo's note: same hand as the hero's "Hi, I'm" ---------- */
.ap-note { position:absolute; left:14%; top:calc(100% - 6px); display:flex; align-items:flex-end; gap:2px; pointer-events:none; }
.ap-arr { width:46px; height:auto; overflow:visible; flex:none; }
.ap-note span { font-family:var(--serif); font-style:italic; font-size:clamp(18px,1.6vw,24px); color:var(--bone); white-space:nowrap; transform:translateY(8px);
  filter:url(#ink-line); clip-path:inset(-20% 100% -20% 0); transition:clip-path .7s var(--ease) .55s; }
.js .about-photo .hand-path { transition:stroke-dashoffset .7s var(--ease); }
.about-photo:not(.drawn) .ap-note span { transition-delay:0s; transition-duration:.35s; }
.about-photo.drawn .ap-note span { clip-path:inset(-20% -10% -20% 0); }
@media (max-width:860px) {
  .ap-note { left:calc(100% + 8px); top:auto; bottom:22%; }
  .ap-note { align-items:center; } .ap-arr { transform:rotate(-90deg) scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) { .ap-note span { transition:none; } }

/* phones: a tapped bead of ink, inside the name's filter so it merges */
.ink-tap { position:absolute; border-radius:50%; background:var(--bone); pointer-events:none; will-change:transform; }

/* the name waits for Erode. Measured in the fallback serif it jumped 25% when
   the face landed mid-entrance on a cold load. ink.js adds .up on arrival; the
   animation is the no-matter-what fallback, so the word can never stay hidden.
   Reduced motion never hides it (ink.js bails before it could reveal). */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-name { opacity:0; animation:hero-up .3s linear 1.9s forwards; }
  .js .hero-name.up { opacity:1; animation:none; transition:opacity .3s linear; }
}
@keyframes hero-up { to { opacity:1; } }