/* ═══════════════════════════════════════════════════════════════
   devpatel35.com
   Cinematic delivery, editorial density. Scroll drives the page.
   Chrome is neutral by design — the only colour on the site comes
   out of the work itself.
   Hand-written. No framework, no CDN script, no build step.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1 · ground ─────────────────────────────────────────────── */

:root {
  --bg:     #08080a;
  --bg-1:   #0e0e11;
  --bg-2:   #16161a;
  --bg-3:   #1f1f24;

  --fg:     #f7f7f8;
  --fg-2:   #a0a0a8;
  --fg-3:   #6b6b74;
  --line:   rgba(255,255,255,.10);
  --line-2: rgba(255,255,255,.18);

  --sel:    rgba(255,255,255,.16);
  --shadow: 0 2px 8px rgba(0,0,0,.5), 0 30px 80px -40px rgba(0,0,0,1);

  /* the lit backdrop behind the hero portrait — see .open__portrait */
  --wash:   #22222a;

  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-mono: .6875rem;
  --t-sm:   .8125rem;
  --t-base: clamp(1rem, .2vw + .95rem, 1.0625rem);
  --t-lead: clamp(1.125rem, .7vw + .95rem, 1.5rem);
  --t-h3:   clamp(1.25rem, .8vw + 1.05rem, 1.75rem);
  --t-h2:   clamp(2rem, 3.6vw + .8rem, 4.5rem);
  --t-h1:   clamp(3rem, 11vw, 11rem);
  --t-say:  clamp(1.75rem, 4.4vw + .5rem, 5rem);

  --gut:  clamp(1.25rem, 5vw, 5rem);
  --max:  1440px;
  --rail: 3.25rem;

  --ease: cubic-bezier(.22, 1, .36, 1);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:     #fbfbfb;
  --bg-1:   #f2f2f3;
  --bg-2:   #e9e9ea;
  --bg-3:   #dededf;

  --fg:     #0a0a0b;
  --fg-2:   #5a5a62;
  --fg-3:   #8e8e97;
  --line:   rgba(10,10,11,.12);
  --line-2: rgba(10,10,11,.2);

  --sel:    rgba(10,10,11,.13);
  --shadow: 0 2px 8px rgba(10,10,11,.05), 0 30px 80px -40px rgba(10,10,11,.3);

  /* a black sweater on a white page separates by itself; nothing to light */
  --wash:   transparent;

  color-scheme: light;
}

/* ── 2 · base ───────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--rail); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;              /* never `hidden` — that makes body a scroll container */
  transition: background .5s var(--ease), color .5s var(--ease);
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

::selection { background: var(--sel); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--fg); color: var(--bg);
  padding: .8rem 1.2rem; font: 500 var(--t-mono)/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; border-radius: 4px;
}
.skip:focus { left: 1rem; top: 1rem; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

.m {
  font-family: var(--mono); font-size: var(--t-mono); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3);
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ── 3 · rail ───────────────────────────────────────────────── */

.rail {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--rail);
  display: flex; align-items: center; gap: 1rem; padding-inline: var(--gut);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease);
}
.rail[data-stuck] { border-bottom-color: var(--line); }
.rail__id { font: 500 var(--t-sm)/1 var(--sans); letter-spacing: -.01em; margin-right: auto; white-space: nowrap; }
.rail__nav { display: flex; gap: 1.75rem; }
.rail__nav a { font-size: var(--t-sm); color: var(--fg-2); transition: color .25s var(--ease); }
.rail__nav a:hover, .rail__nav a[aria-current] { color: var(--fg); }
.rail__tools { display: flex; align-items: center; gap: .5rem; margin-left: 1.5rem; }

.ib { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
  color: var(--fg-2); cursor: pointer; transition: color .25s, background .25s; }
.ib:hover { color: var(--fg); background: var(--bg-2); }
.ib svg { width: 15px; height: 15px; }
.kb { display: inline-flex; align-items: center; gap: .45rem; height: 2rem; padding-inline: .75rem;
  border-radius: 999px; cursor: pointer; background: var(--bg-2); color: var(--fg-2);
  font: 500 var(--t-mono)/1 var(--mono); letter-spacing: .1em; transition: color .25s, background .25s; }
.kb:hover { color: var(--fg); background: var(--bg-3); }
.burger { display: none; }

.prog { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 101;
  background: var(--fg); transform-origin: left center; transform: scaleX(0); }

/* ── 4 · opening ────────────────────────────────────────────── */

/* the bottom padding is the scroll cue's seat — without it the contact pills
   wrap onto a second row on a laptop-height window and land on top of it */
.open { min-height: 100svh; display: grid; align-content: center; padding-block: var(--rail) 5.5rem; position: relative; }
.open__in { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(2rem,5vw,5rem); align-items: end; }
.open h1 { font-size: var(--t-h1); font-weight: 500; letter-spacing: -.05em; line-height: .86; }
.open h1 span { display: block; }
.open__sub { margin-top: clamp(1.25rem,2.5vw,2rem); font-size: var(--t-lead); color: var(--fg-2); max-width: 30ch; line-height: 1.4; }
.open__meta { margin-top: clamp(1.5rem,3vw,2.5rem); display: flex; flex-wrap: wrap; gap: .5rem; }

.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem; border-radius: 999px;
  background: var(--bg-2); color: var(--fg-2);
  font-size: var(--t-sm); white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
a.pill, button.pill { cursor: pointer; }
a.pill:hover, button.pill:hover { background: var(--bg-3); color: var(--fg); transform: translateY(-1px); }
.pill svg { width: 14px; height: 14px; }
.pill--live::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor;
  animation: beat 2.6s var(--ease) infinite; }
@keyframes beat { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Bounded by the viewport's height, not just its width: this is a tighter
   crop than the last portrait, so a width that looks right on a wide monitor
   runs off the bottom of a laptop. 64svh keeps him inside the opening screen
   at any window shape. */
.open__portrait {
  --pw: min(50vw, 740px, 74svh);
  width: var(--pw);
  /* The bottom of the portrait is a short feather. Let that strip hang below
     the layout instead of reserving space for it. */
  margin-bottom: calc(var(--pw) * -0.06);
  position: relative; isolation: isolate;
}
.open__portrait img { width: 100%; border-radius: 12px; }

/* He is wearing a black quarter-zip and the dark ground is #08080a, so a
   straight cutout has no silhouette below the chin — it reads as a head
   floating on the page. The fix is the one a studio would use: don't outline
   the subject, light the backdrop behind him. An elliptical falloff, brightest
   where the shoulders need an edge, gone well before it reaches anything else,
   so it reads as a lit wall rather than as a glow stuck to a PNG. */
.open__portrait::before {
  content: ""; position: absolute; z-index: -1;
  inset: -14% -16% -8%;
  background: radial-gradient(58% 54% at 50% 60%,
    var(--wash) 0%,
    color-mix(in srgb, var(--wash) 55%, transparent) 42%,
    transparent 73%);
}

.cue { position: absolute; left: var(--gut); bottom: 2rem; display: flex; align-items: center; gap: .6rem; }
.cue i { display: block; width: 1px; height: 40px; background: linear-gradient(var(--fg-3), transparent); }

/* the statement — one sentence at scale, arriving line by line */
.say { padding-block: clamp(6rem, 22vh, 16rem); }
.say p { font-size: var(--t-say); font-weight: 500; letter-spacing: -.04em; line-height: 1.08; max-width: 22ch; }
.say .ln { display: block; }
.say .q { color: var(--fg-3); }

/* ── 5 · featured work, pinned ──────────────────────────────── */

/* the scene is taller than the viewport so the sticky child has travel to pin
   through; without the extra height `position: sticky` is just a static block */
.feat { min-height: 185svh; view-timeline-name: --scene; view-timeline-axis: block; }

.feat__pin {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
  align-items: center; gap: clamp(2rem,5vw,5rem);
  padding: calc(var(--rail) + 2rem) var(--gut) 3rem;
  overflow: clip;
}
.feat__txt { display: grid; gap: 1.1rem; align-content: center; max-width: 46ch; min-width: 0; }
.feat__n { display: flex; align-items: center; gap: .8rem; }
.feat__n i { display: block; width: 2.5rem; height: 1px; background: var(--line-2); }
.feat h2 { font-size: var(--t-h2); font-weight: 500; letter-spacing: -.045em; }
.feat__thesis { font-size: var(--t-lead); color: var(--fg-2); line-height: 1.45; }
.feat__stats { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: .5rem; }
.feat__stat { display: grid; gap: .3rem; }
.feat__stat b { font: 500 clamp(1.5rem,2vw,2.1rem)/1 var(--mono); letter-spacing: -.04em; }
.feat__stat span { font: 500 var(--t-mono)/1.4 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3); max-width: 14ch; }
.feat__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.feat__tags span { font: 500 var(--t-mono)/1 var(--mono); letter-spacing: .06em;
  padding: .35rem .55rem; border-radius: 999px; background: var(--bg-2); color: var(--fg-3); }

.feat__go {
  justify-self: start; display: inline-flex; align-items: center; gap: .55rem; margin-top: .4rem;
  padding: .7rem 1.15rem; border-radius: 999px; background: var(--fg); color: var(--bg);
  font-size: var(--t-sm); font-weight: 500; cursor: pointer;
  transition: gap .25s var(--ease), transform .25s var(--ease);
}
.feat__go:hover { gap: .85rem; transform: translateY(-1px); }
.feat__go svg { width: 14px; height: 14px; }

.feat__media { position: relative; justify-self: center; width: 100%; }
.feat__media img { width: 100%; border-radius: 14px; box-shadow: var(--shadow); will-change: transform; }
.feat__media--phone { max-width: min(320px, 68%); }

/* ── 6 · the trace ──────────────────────────────────────────── */

.trace {
  --lab: 17.5rem;
  /* One timeline the playhead and every bar read. No `timeline-scope` here:
     declaring it on the same element that names the timeline makes the scope
     search descendants for that name, find nothing, and the timeline resolves
     to inactive. Descendants can see an ancestor's named timeline anyway. */
  view-timeline-name: --tl;
  view-timeline-axis: block;
}
.trace__axis { display: grid; grid-template-columns: var(--lab) minmax(0,1fr); padding-block: .7rem; }
.trace__ticks { position: relative; height: 1.1rem; }
.trace__ticks i { position: absolute; top: 0; translate: -50% 0;
  font: 500 var(--t-mono)/1 var(--mono); color: var(--fg-3); white-space: nowrap; }
.trace__ticks i:first-child { translate: 0 0; }
.trace__ticks i:last-child { translate: -100% 0; color: var(--fg-2); }

.trow {
  position: relative; display: grid; grid-template-columns: var(--lab) minmax(0,1fr);
  align-items: center; gap: 1rem; width: 100%; height: 2.6rem;
  border-top: 1px solid var(--line); cursor: pointer; text-align: left;
  transition: background .25s var(--ease);
}
.trow:hover { background: var(--bg-1); }
.trow__name {
  display: flex; align-items: baseline; gap: .55rem; min-width: 0;
  padding-left: .5rem; white-space: nowrap;   /* one line per row, always */
}
.trow__name b { font-size: var(--t-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.trow__name span { font: 500 var(--t-mono)/1 var(--mono); color: var(--fg-3);
  overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.trow__track { position: relative; height: 100%; padding-right: .5rem; }

/* the playhead: a hairline that sweeps the years as the section scrolls */
.trace__rows { position: relative; }
.trace__head {
  position: absolute; top: 0; bottom: 0; left: var(--lab); right: .5rem;
  pointer-events: none; z-index: 2; display: block;
}
.trace__head i {
  /* full-width carrier so translateX(100%) crosses the track; the visible
     hairline is the pseudo-element pinned to its leading edge */
  position: absolute; inset: 0; width: 100%; opacity: 0;
}
.trace__head i::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--fg) 14%, var(--fg) 86%, transparent);
}
.trace__head i::after {
  /* the playhead's wake stretches with scroll speed — max() of the signed
     velocity against its negation is just abs() in CSS */
  content: ""; position: absolute; top: 0; bottom: 0;
  width: calc(34px + max(var(--vel, 0) * 90px, var(--vel, 0) * -90px));
  left: calc(-34px - max(var(--vel, 0) * 90px, var(--vel, 0) * -90px));
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--fg) 14%, transparent));
}
.tbar { position: absolute; top: 50%; translate: 0 -50%; height: .55rem; border-radius: 999px;
  background: var(--fg-3); transform-origin: left center;
  transition: background .25s var(--ease), height .25s var(--ease); }
.trow:hover .tbar { background: var(--fg); height: .75rem; }
.tbar--open { background: linear-gradient(90deg, var(--fg-3), transparent); }
.trow:hover .tbar--open { background: linear-gradient(90deg, var(--fg), transparent); }
.trow__when { position: absolute; top: 50%; translate: 0 -50%;
  font: 500 var(--t-mono)/1 var(--mono); color: var(--fg-3); white-space: nowrap;
  opacity: 0; transition: opacity .25s var(--ease); }
.trow:hover .trow__when { opacity: 1; }

/* ── 7 · cards ─────────────────────────────────────────────── */

/* One card pattern for roles and projects. Every card leads with a visual and
   ends with an explicit, always-visible action bar — a hover-only arrow is
   invisible on a touch screen, which is exactly how you lose people on a phone. */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(.85rem, 1.6vw, 1.25rem); }

.card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 16px; background: var(--bg-1);
  overflow: hidden; isolation: isolate;
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow); }
.card:active { transform: translateY(-1px) scale(.995); }          /* touch press */
.card:focus-within { border-color: var(--fg-3); }

.card__head { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; }
.card__logo {
  width: 30px; height: 30px; border-radius: 7px; flex: none; overflow: hidden;
  background: #fff; display: grid; place-items: center;
}
.card__logo img { width: 100%; height: 100%; object-fit: contain; }
.card__head b { font-size: var(--t-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__head .m { margin-left: auto; white-space: nowrap; }

.card__media {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  background: var(--bg-2); display: grid; place-items: center; padding: 1rem 1.1rem;
  border-block: 1px solid var(--line);
}
.card__media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease), filter .6s var(--ease), opacity .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.045); }
.card__media svg { width: 100%; height: auto; max-height: 100%; color: var(--fg-2); transition: color .4s var(--ease), transform .8s var(--ease); }
.card:hover .card__media svg { color: var(--fg-2); transform: scale(1.02); }

/* a soft wash that follows the pointer across the card */
.card__glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0;
  transition: opacity .4s var(--ease);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--fg) 9%, transparent), transparent 70%);
}
.card:hover .card__glow { opacity: 1; }

.card__body { padding: .95rem 1rem 1.1rem; display: grid; gap: .45rem; flex: 1; }
.card__body h3 { font-size: var(--t-h3); font-weight: 500; letter-spacing: -.03em; }
.card__body p { color: var(--fg-2); font-size: var(--t-sm); line-height: 1.55; }

.card__stats { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
.card__stats span {
  font: 500 var(--t-mono)/1 var(--mono); letter-spacing: .04em;
  padding: .3rem .5rem; border-radius: 999px; background: var(--bg-2); color: var(--fg-3);
}
.card__stats b { color: var(--fg); font-weight: 500; }

/* the affordance: a real, visible action bar */
.card__act {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1rem; border-top: 1px solid var(--line);
  background: var(--bg-2); color: var(--fg-2);
  font-size: var(--t-sm); font-weight: 500;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.card:hover .card__act { background: var(--fg); color: var(--bg); }
.card__act svg { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.card:hover .card__act svg { transform: translateX(4px); }

.card__link { position: absolute; inset: 0; z-index: 3; border-radius: 16px; }
.card__link:focus-visible { outline-offset: -4px; }

/* blur-up: the low-res copy sits behind until the full image decodes */
.card__media img[data-lazy] { filter: blur(14px); transform: scale(1.06); opacity: .7; }
.card__media img[data-loaded] { filter: none; opacity: 1; }

/* ── 9 · materials ──────────────────────────────────────────── */

.mrow { display: grid; grid-template-columns: 9rem minmax(0,1fr) 2.5rem; gap: 1rem; align-items: center; padding-block: .45rem; }
.mrow__t { font-size: var(--t-sm); color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow__b { height: .45rem; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.mrow__b i { display: block; height: 100%; background: var(--fg-3); border-radius: 999px; transform-origin: left center; }
.mrow:hover .mrow__b i { background: var(--fg); }
.mrow__n { font: 500 var(--t-sm)/1 var(--mono); color: var(--fg-3); text-align: right; }
.matgroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,200px),1fr));
  gap: 1.5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.matgroup { display: grid; gap: .5rem; align-content: start; }
.matgroup h4 { font: 500 var(--t-mono)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.matgroup p { font-size: var(--t-sm); color: var(--fg-2); line-height: 1.65; }

/* ── 10 · sections ──────────────────────────────────────────── */

.sec { padding-block: clamp(4rem, 10vw, 9rem); }
.sec--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
/* a section that is only a heading, introducing the pinned scene below it */
.sec--lead { padding-bottom: 0; }
.shead { display: grid; gap: .9rem; margin-bottom: clamp(1.75rem,3.5vw,3rem); max-width: 60ch; }
.shead h2 { font-size: var(--t-h2); font-weight: 500; letter-spacing: -.045em; }
.shead p { color: var(--fg-2); font-size: var(--t-lead); line-height: 1.45; }

/* ── 11 · document pages ────────────────────────────────────── */

.doc { padding-top: calc(var(--rail) + clamp(2rem,5vw,4rem)); }
.crumb { display: flex; align-items: center; gap: .5rem; margin-bottom: clamp(1.5rem,3vw,2.5rem); font-size: var(--t-sm); color: var(--fg-3); }
.crumb a:hover { color: var(--fg); }

.dochead { display: grid; gap: 1.2rem; padding-bottom: clamp(2rem,4vw,3rem); }
.dochead h1 { font-size: clamp(2.25rem,5.5vw,4.5rem); font-weight: 500; letter-spacing: -.05em; max-width: 18ch; }
.dochead__thesis { font-size: var(--t-lead); color: var(--fg-2); max-width: 60ch; line-height: 1.45; }
.dochead__pills { display: flex; flex-wrap: wrap; gap: .5rem; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,150px),1fr));
  gap: 1.5rem; padding-block: 1.25rem; border-block: 1px solid var(--line); }
.fact { display: grid; gap: .35rem; }
.fact dt { margin: 0; font: 500 var(--t-mono)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.fact dd { margin: 0; font-size: var(--t-sm); }
.fact dd a { border-bottom: 1px solid var(--line-2); }

.body { display: grid; gap: clamp(2.5rem,5vw,4rem); padding-block: clamp(2.5rem,5vw,4rem); }
.blk { display: grid; grid-template-columns: 9rem minmax(0,1fr); gap: clamp(1rem,2.5vw,2.5rem); align-items: start; }
.blk > .m { padding-top: .45rem; }
.blk__b { display: grid; gap: 1.1rem; }
.blk__b > p, .blk__b > ul { max-width: 68ch; }
.blk__b h2 { font-size: var(--t-h3); font-weight: 500; letter-spacing: -.03em; }
.blk__b p { color: var(--fg-2); line-height: 1.7; }
.blk__b strong { color: var(--fg); font-weight: 500; }
.blk__b ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
.blk__b ul li { position: relative; padding-left: 1.4rem; color: var(--fg-2); line-height: 1.65; }
.blk__b ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 1px; background: var(--fg-3); }
.blk__b code { font: 500 .875em/1 var(--mono); background: var(--bg-2); border-radius: 4px; padding: .15em .4em; }
.blk__b a:not(.pill) { border-bottom: 1px solid var(--line-2); }

.dec { display: grid; gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; }
.dec__r { background: var(--bg-1); padding: 1.1rem 1.25rem; display: grid; gap: .4rem; }
.dec__r strong { font-size: var(--t-sm); font-weight: 500; }
.dec__r p { color: var(--fg-2); font-size: var(--t-sm); line-height: 1.6; }
.dec__r[data-pick] { background: var(--bg-2); }

.vals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,130px),1fr)); gap: 1.5rem; }
.val { display: grid; gap: .4rem; }
.val b { font: 500 clamp(1.6rem,2.4vw,2.25rem)/1 var(--mono); letter-spacing: -.045em; }
.val span { font: 500 var(--t-mono)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }

.plan { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-1); overflow: hidden; }
.plan__c { padding: clamp(1rem,2.5vw,2rem); overflow-x: auto; }
.plan svg { width: 100%; min-width: 560px; height: auto; }
.plan figcaption { padding: .8rem 1.1rem; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--fg-3); }

.shots { display: grid; gap: 1rem; }
.shot { border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.shot img { width: 100%; }
.shot figcaption { padding: .8rem 1.1rem; font-size: var(--t-sm); color: var(--fg-3); }

.pager { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: var(--line);
  border-radius: 12px; overflow: hidden; margin-bottom: clamp(4rem,8vw,7rem); }
.pager a { background: var(--bg-1); padding: 1.4rem 1.5rem; display: grid; gap: .4rem; transition: background .3s var(--ease); }
.pager a:hover { background: var(--bg-2); }
.pager a:last-child { text-align: right; }
.pager a:only-child { grid-column: 1/-1; }
.pager strong { font-size: var(--t-h3); font-weight: 500; letter-spacing: -.03em; }

.toc { display: none; }
.docgrid { display: grid; }
@media (min-width: 1180px) {
  .docgrid { grid-template-columns: minmax(0,1fr) 11rem; gap: clamp(2rem,4vw,4rem); align-items: start; }
  .toc { display: block; position: sticky; top: calc(var(--rail) + 2rem); padding-top: clamp(2.5rem,5vw,4rem); }
  .toc ul { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .15rem; }
  .toc a { display: block; padding: .3rem 0; font-size: var(--t-sm); color: var(--fg-3); transition: color .25s; }
  .toc a:hover { color: var(--fg-2); }
  .toc a[aria-current] { color: var(--fg); }
}

/* ── 12 · résumé ────────────────────────────────────────────── */

.rz { display: grid; grid-template-columns: 9rem minmax(0,1fr); gap: clamp(1rem,2.5vw,2.5rem);
  align-items: start; padding-block: clamp(1.5rem,3vw,2.5rem); border-top: 1px solid var(--line); }
.rz__b { display: grid; gap: 1.5rem; }
.rz__i { display: grid; gap: .4rem; }
.rz__t { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.rz__t h3 { font-size: var(--t-h3); font-weight: 500; letter-spacing: -.03em; }
.rz__o { color: var(--fg-2); font-size: var(--t-sm); }
.rz__b ul { margin: .3rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.rz__b ul li { position: relative; padding-left: 1.3rem; color: var(--fg-2); font-size: var(--t-sm); line-height: 1.6; }
.rz__b ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 1px; background: var(--fg-3); }

/* ── 12b · document hero + shared-element navigation ────────── */

.dochero {
  margin: 0 0 clamp(1.5rem,3vw,2.5rem);
  border-radius: 16px; overflow: hidden; background: var(--bg-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
}
.dochero img { width: 100%; display: block; }
.dochero svg { width: 100%; height: auto; color: var(--fg-2); padding: clamp(1.5rem,4vw,3rem); }

/* Cross-document view transitions. The name is applied by script to exactly one
   element per page immediately before navigation — `view-transition-name` has to
   be unique in a document, so it cannot simply live on every card. */
@view-transition { navigation: auto; }

::view-transition-group(heromedia) {
  animation-duration: .62s;
  animation-timing-function: cubic-bezier(.22, 1, .30, 1);
}
/* let the two snapshots cross-fade underneath the shared morph */
::view-transition-old(heromedia),
::view-transition-new(heromedia) {
  height: 100%; width: 100%; object-fit: cover;
  animation-duration: .62s; animation-timing-function: cubic-bezier(.22, 1, .30, 1);
}
::view-transition-group(headline) { animation-duration: .52s; animation-timing-function: cubic-bezier(.22,1,.30,1); }

::view-transition-old(root) { animation: vt-out .3s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease) both; }
@keyframes vt-out { to   { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; } }

.rail { view-transition-name: rail; }
::view-transition-group(rail) { animation: none; }

/* ── 13 · palette + toast ───────────────────────────────────── */

.cmdk[hidden] { display: none; }
.cmdk { position: fixed; inset: 0; z-index: 200; display: grid; place-items: start center;
  padding: clamp(3rem,12vh,8rem) 1rem 1rem;
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: fade .18s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.cmdk__box { width: 100%; max-width: 540px; background: var(--bg-1); border: 1px solid var(--line-2);
  border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; animation: drop .24s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.cmdk__f { display: flex; align-items: center; gap: .7rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.cmdk__f svg { width: 15px; height: 15px; color: var(--fg-3); flex: none; }
.cmdk__f input { flex: 1; background: none; border: 0; outline: none; color: var(--fg); font: 400 1rem/1.2 var(--sans); }
.cmdk__f input::placeholder { color: var(--fg-3); }
.cmdk__l { max-height: min(50vh,22rem); overflow-y: auto; padding: .4rem; margin: 0; list-style: none; }
.cmdk__g { padding: .6rem .75rem .3rem; font: 500 var(--t-mono)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.cmdk__o { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: 8px; cursor: pointer; color: var(--fg-2); font-size: .9375rem; }
.cmdk__o svg { width: 14px; height: 14px; flex: none; opacity: .6; }
.cmdk__o[aria-selected="true"] { background: var(--bg-3); color: var(--fg); }
.cmdk__o .h { margin-left: auto; font: 500 var(--t-mono)/1 var(--mono); color: var(--fg-3); }
.cmdk__e { padding: 1.6rem .75rem; text-align: center; color: var(--fg-3); font-size: .9375rem; }
.cmdk__ft { display: flex; gap: 1rem; padding: .55rem 1.1rem; border-top: 1px solid var(--line); }
.cmdk__ft span { font: 500 var(--t-mono)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }

.toast { position: fixed; left: 50%; bottom: 2rem; z-index: 220; translate: -50% 1rem;
  padding: .65rem 1.1rem; border-radius: 999px; background: var(--fg); color: var(--bg);
  font-size: var(--t-sm); font-weight: 500; opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), translate .3s var(--ease); }
.toast[data-show] { opacity: 1; translate: -50% 0; }

/* ── 14 · footer ────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); padding-block: 3rem 4rem; }
.foot__in { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.foot__l { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.foot__l a { font-size: var(--t-sm); color: var(--fg-3); transition: color .25s; }
.foot__l a:hover { color: var(--fg); }

/* ── 15 · scroll-driven motion ──────────────────────────────── */

/* Native scroll timelines where supported: no JS, no rAF, compositor-driven.
   IntersectionObserver covers the rest. With JS off, everything is visible. */

@keyframes rise   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes grow   { from { transform: scaleX(0); }  to { transform: scaleX(1); } }
@keyframes zoomIn { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes sweep  { from { transform: translateX(0);    opacity: 0; }
                    6%   { opacity: .9; }
                    94%  { opacity: .9; }
                    to   { transform: translateX(100%); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [data-rise] {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
    /* each bar fills exactly as the playhead crosses it — the range is
       computed per-bar from where it sits on the axis */
    .tbar {
      animation: grow linear both;
      animation-timeline: --tl;
      animation-range: cover var(--from, 14%) cover var(--to, 84%);
    }
    .trace__head i {
      animation: sweep linear both;
      animation-timeline: --tl;
      animation-range: cover 14% cover 84%;
    }
    .mrow__b i {
      animation: grow linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 46%;
    }
    /* driven by the scene's own timeline: the image is pinned, so its own
       visibility never changes and view() on it would sit still */
    .feat__media img {
      animation: zoomIn linear both;
      animation-timeline: --scene;
      animation-range: entry 10% cover 70%;
    }
    .say .ln {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    .say .ln:nth-child(2) { animation-range: entry 6% cover 36%; }
    .say .ln:nth-child(3) { animation-range: entry 12% cover 42%; }
    .say .ln:nth-child(4) { animation-range: entry 18% cover 48%; }
  }

  @supports not (animation-timeline: view()) {
    [data-rise], .say .ln { opacity: 0; transform: translateY(24px); }
    [data-rise][data-in], .say .ln[data-in] {
      opacity: 1; transform: none;
      transition: opacity .8s var(--ease), transform .8s var(--ease);
      transition-delay: var(--d, 0ms);
    }
    .tbar, .mrow__b i { transform: scaleX(0); }
    .tbar[data-in], .mrow__b i[data-in] {
      transform: scaleX(1); transition: transform .9s var(--ease); transition-delay: var(--d, 0ms);
    }
  }
}

/* ── 16 · responsive ────────────────────────────────────────── */

@media (max-width: 1080px) {
  .trace { --lab: 13rem; }

}

@media (max-width: 820px) {
  .rail__nav { display: none; }
  .kb { display: none; }
  .burger { display: grid; place-items: center; gap: 4px; width: 2rem; height: 2rem; cursor: pointer; }
  .burger span { display: block; width: 15px; height: 1.5px; background: var(--fg-2); border-radius: 2px;
    transition: transform .3s var(--ease), opacity .2s; }
  .rail[data-open] .burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .rail[data-open] .burger span:nth-child(2) { opacity: 0; }
  .rail[data-open] .burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
  .rail[data-open] .rail__nav { position: fixed; inset: var(--rail) 0 auto 0; display: grid; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: .5rem var(--gut) 1.5rem; }
  .rail[data-open] .rail__nav a { padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }

  .open__in { grid-template-columns: 1fr; align-items: start; gap: 2rem; }
  /* set --pw, not width: the negative bottom margin is derived from it */
  .open__portrait { --pw: min(88%, 420px); order: -1; }
  /* no cue on a phone, so nothing to leave a seat for */
  .open { padding-bottom: 2rem; }
  .cue { display: none; }

  /* pinning on a phone fights the browser chrome and eats the screen */
  .feat { min-height: 0; }
  .feat__pin { position: static; grid-template-columns: minmax(0, 1fr); height: auto;
    padding: clamp(3rem,9vw,5rem) var(--gut); gap: 2rem; }
  .feat__txt { max-width: none; }
  .feat__stats { gap: 1rem 1.25rem; }
  .feat__media--phone { max-width: 62%; margin-inline: auto; }
  .feat__media img { animation: none !important; }

  .trace { --lab: 0rem; }
  .trace__axis { display: none; }
  .trow { grid-template-columns: minmax(0,1fr); height: auto; padding: .95rem .25rem; gap: .3rem; align-items: start; }
  .trow__track { display: none; }
  .trow__name { padding-left: 0; }
  .trow__name b { white-space: normal; }
  .trow__when { position: static; translate: none; opacity: 1; }


  .mrow { grid-template-columns: 7rem minmax(0,1fr) 2rem; gap: .75rem; }
  .blk { grid-template-columns: 1fr; gap: .6rem; }
  .rz { grid-template-columns: 1fr; gap: .6rem; }
  .pager { grid-template-columns: 1fr; }
  .pager a:last-child { text-align: left; }
  .foot__in { flex-direction: column; align-items: flex-start; }
}

/* ── 17 · motion off, print ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .feat { min-height: 0; }
  .feat__pin { position: static; height: auto; }
}

@media print {
  .rail, .cmdk, .toast, .prog, .cue { display: none !important; }
  body { background: #fff; color: #000; }
  .feat { min-height: 0; }
  .feat__pin { position: static; height: auto; }
  .sec { padding-block: 1.25rem; break-inside: avoid; }
  a { text-decoration: underline; }
}


/* ── 18 · pointer-reactive cards ────────────────────────────── */

/* A slight tilt toward the pointer. Transform only, so it stays on the
   compositor; the angles are written as custom properties by one shared
   pointermove handler. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card {
    transform: perspective(900px)
               rotateX(var(--rx, 0deg))
               rotateY(var(--ry, 0deg))
               translateY(var(--ty, 0px));
    transition: transform .4s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  }
  .card:hover { --ty: -3px; transition-duration: .12s; }
  .card__media img, .card__media svg { transform: translateZ(0); }
}

/* connectors carry a slow pulse, so an architecture reads as something with
   data moving through it rather than a static box diagram */
@media (prefers-reduced-motion: no-preference) {
  .plan .flow {
    stroke-dasharray: 5 7;
    animation: drift 2.6s linear infinite;
  }
  @keyframes drift { to { stroke-dashoffset: -24; } }
}

/* scroll velocity is published by script as --vel and read above by the
   playhead's wake. Kept to one use on purpose. */
.trace__head i { will-change: transform; }