/* ============================================================================
   home.css — the scenes. Layout only; scrubbed values come from home.js.
   ========================================================================= */

/* ── image primitive ───────────────────────────────────────────────────── */

.plate {
  position: relative; overflow: hidden; background: var(--paper-2);
  box-shadow: var(--lift-2), var(--edge);
  transition: box-shadow 0.5s var(--ease);
}

/* a soft floor under the image so it does not end as a hard rectangle */
.plate::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, transparent 55%,
              color-mix(in srgb, var(--paper) 55%, transparent) 100%);
}

.plate img { width: 100%; height: 100%; object-fit: cover; will-change: transform; transform: scale(1.12); }

/* Only clip when JS is there to un-clip it. */
html.js .plate--reveal { clip-path: inset(0 0 100% 0); }

/* ── 00 · masthead ─────────────────────────────────────────────────────── */

.mast {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: 7rem clamp(1.2rem, 3vw, 2rem);
  overflow: clip;
}

.mast__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity 1.2s ease; }
.mast__gl.is-live { opacity: 1; }

.mast::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--paper) 3%,
              color-mix(in srgb, var(--paper) 55%, transparent) 30%, transparent 58%);
}

.mast__inner { position: relative; z-index: 2; width: 100%; }

.mast__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: end; }

@media (min-width: 900px) {
  .mast__grid { grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 380px); gap: clamp(2rem, 4vw, 4rem); }
}

.mast__say { max-width: 42ch; margin-bottom: clamp(1.2rem, 3vw, 2.2rem); }
.mast__say em { font-style: italic; color: var(--accent); }

.mast__name { font-size: clamp(2.8rem, 14vw, 15rem); }

/* ── the name climbs into the header ──────────────────────────────────────
   The hero sets the name at fifteen rem and the header sets it again at one,
   so at the top of the page it is the same words twice on one screen. Rather
   than hide either, the hero's copy travels into the header's place.

   A fixed stand-in does the travelling, not the <h1>: the heading stays in
   flow so the masthead's layout never moves, and the stand-in is free of the
   masks the entrance needed, of the section's overflow, and of the stacking
   context that would otherwise keep it underneath the header it is flying
   into. It is aria-hidden — the real <h1> and the real wordmark both stay
   where they were for anything that is not looking at pixels. */
.mark-fly {
  position: fixed; inset: 0; z-index: 91;
  pointer-events: none;
  contain: layout style;
}

.mark-fly span {
  position: absolute; top: 0; left: 0;
  display: block; white-space: nowrap;
  transform-origin: left top;
  font-family: var(--serif);
  font-variant-numeric: lining-nums;
  color: var(--ink);
  will-change: transform, font-size;
}
.mast__name .ln__i-mask:last-child { margin-left: clamp(0px, 6vw, 7rem); }

/* Once the plate takes a column, the name has to fit what is left of the
   line — at --t-mega it runs straight under the image. */
@media (min-width: 900px) {
  .mast__name { font-size: clamp(2.8rem, 10.8vw, 12rem); }
}

/* the first image arrives with the name, not four screens later */
.mast__plate { aspect-ratio: 4 / 5; max-height: 58vh; order: -1; }
@media (min-width: 900px) { .mast__plate { order: 0; max-height: 62vh; } }

.mast__foot {
  display: flex; flex-wrap: wrap; gap: 1rem 2.5rem;
  justify-content: space-between; align-items: end;
  margin-top: clamp(1.2rem, 3vw, 2rem);
  padding-top: 1rem; border-top: 1px solid var(--line);
}

.mast__meta { display: flex; flex-wrap: wrap; gap: 1rem 3rem; }
.mast__meta div { display: flex; flex-direction: column; gap: 0.3rem; }
.mast__meta b { font-family: var(--serif); font-variation-settings: 'opsz' 20; font-weight: 500; font-size: 1.05rem; letter-spacing: -0.012em; }
.mast__meta .live { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent); }
.mast__meta .live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: beat 2.4s infinite; }
@keyframes beat { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

.mast__scroll { display: flex; align-items: center; gap: 0.55rem; }
.mast__scroll svg { width: 11px; height: 18px; animation: nudge 1.9s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(5px); opacity: 0.35; } }

/* ── 01 · statement ────────────────────────────────────────────────────── */

.stmt { padding-block: clamp(5rem, 15vh, 10rem) clamp(3rem, 8vh, 5rem); }

.stmt__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }

@media (min-width: 980px) {
  .stmt__grid { grid-template-columns: repeat(12, 1fr); gap: 3rem; }
  .stmt__aside { grid-column: 1 / span 3; position: sticky; top: 22vh; align-self: start; }
  .stmt__body { grid-column: 5 / span 8; }
}

.stmt__big {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 60;
  font-weight: 500;
  font-size: clamp(1.55rem, 3.2vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -0.026em;
  text-wrap: pretty;
}

.stmt__big em { font-style: italic; color: var(--accent); }
.stmt__big .wd { opacity: 0.15; }

.stmt__note { margin-top: clamp(2rem, 5vw, 3.5rem); }

.stmt__aside dl { margin-top: 1.2rem; }
.stmt__aside dt { margin-top: 1.1rem; }
.stmt__aside dd { font-family: var(--serif); font-variation-settings: 'opsz' 18; font-weight: 500; font-size: 1.05rem; letter-spacing: -0.014em; margin-top: 0.15rem; }

/* a wide plate carrying the eye from the statement into the quote */
.strip { padding-inline: var(--pad); }
.strip .plate { aspect-ratio: 16 / 7; max-height: 62vh; }
.strip figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.8rem; }

/* ── 02 · quote ────────────────────────────────────────────────────────── */

.quote { position: relative; }

.quote__pin { position: relative; height: 100svh; display: grid; place-items: center; overflow: hidden; padding-inline: var(--pad); }

.quote__stage { position: relative; z-index: 2; width: 100%; max-width: var(--max); text-align: center; }

.quote__mark { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; gap: 1rem; padding: 0 var(--pad) clamp(1rem, 3vh, 2rem); }

.quote__line {
  display: block;
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144;
  font-weight: 600;
  font-size: clamp(1.6rem, 7.4vw, 7.6rem);
  line-height: 0.96;
  letter-spacing: -0.032em;
  white-space: nowrap;
  will-change: transform;
}

.quote__line--a { text-align: left; font-weight: 500; color: var(--mute); }
.quote__line--b { text-align: right; font-style: italic; }

.quote__pivot {
  display: block; text-align: center;
  font-family: var(--serif); font-variation-settings: 'opsz' 40;
  font-style: italic; font-weight: 500;
  font-size: clamp(0.95rem, 2.6vw, 2.3rem);
  line-height: 1; color: var(--accent);
  margin-block: clamp(0.4rem, 1.4vh, 1rem);
  will-change: transform;
}

/* one node on the right, a whole system on the left */
/* Given room to be seen: the network is the argument the quote is making, so
   it is allowed to sit over the block below it rather than be boxed in. */
.quote__signal {
  position: relative; z-index: 3;
  width: 100%; height: clamp(168px, 28vh, 340px);
  margin-block: clamp(1rem, 3vh, 2.2rem) clamp(-2.2rem, -3vh, -1rem);
  overflow: visible;
}

.quote__resolve { width: min(62ch, 88vw); margin: clamp(1.2rem, 3.5vh, 2.6rem) auto 0; text-align: center; }
.quote__resolve p { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); }
.quote__resolve b { color: var(--ink); font-weight: 500; }
.quote__cite { margin-top: 0.8rem; }

/* ── 03 · practice ─────────────────────────────────────────────────────── */

.work { padding-block: clamp(4rem, 12vh, 8rem) 0; }
.work__head { margin-bottom: clamp(2rem, 6vw, 4rem); }
.work__more { font-family: var(--mono); font-size: var(--t-lbl); letter-spacing: 0.06em; color: var(--mute); margin-top: 1.1rem; }
.work__more a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.work__more a:hover { border-bottom-color: var(--accent); }

.role {
  position: relative;
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.2rem, 5vw, 3.5rem);
  will-change: transform;
}

/* Sticky only while the runtime is live to scale and fade the card behind:
   without it the cards pile up at top:0, under the fixed nav. */
@media (min-width: 1024px) {
  html.motion .role {
    position: sticky; top: 0; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: clamp(4.5rem, 11vh, 6.5rem) clamp(2.5rem, 7vh, 4.5rem);
  }
}

.role__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; }

@media (min-width: 900px) {
  .role__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 4.5rem); }
  /* alternate which side the image sits on */
  .role:nth-of-type(even) .role__media { order: 2; }
}

/* full width on a phone, a real column on a desktop — never display:none */
.role__media { aspect-ratio: 4 / 3; max-height: 42vh; }
@media (min-width: 900px) { .role__media { aspect-ratio: 4 / 5; max-height: 58vh; } }

.role__bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; padding-bottom: clamp(0.9rem, 2vw, 1.4rem); border-bottom: 1px solid var(--line); }
.role__no { font-family: var(--mono); font-size: var(--t-lbl); color: var(--accent); font-variant-numeric: tabular-nums; }
.role__co { font-size: clamp(1.7rem, 3.6vw, 3.4rem); flex: 1 1 auto; }
.role__when { font-family: var(--mono); font-size: var(--t-lbl); letter-spacing: 0.13em; text-transform: uppercase; color: var(--mute); font-variant-numeric: tabular-nums; }

.role__now {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono); font-size: var(--t-lbl); text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--on-accent); background: var(--accent); border-radius: 100px; padding: 0.24rem 0.7rem;
}

.role__title { font-family: var(--serif); font-variation-settings: 'opsz' 24; font-weight: 500; font-size: clamp(1.05rem, 1.6vw, 1.4rem); letter-spacing: -0.016em; margin-top: 1.2rem; }
.role__title em { font-style: italic; color: var(--accent); }

/* One claim, set big, is the whole card's hook — then a single line of
   substance and the tools underneath. Detail lives in the blog entry. */
.role__claim {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 72;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  line-height: 1.03;
  letter-spacing: -0.032em;
  margin-top: clamp(1.1rem, 2.4vw, 1.8rem);
  text-wrap: balance;
}

.role__claim em { font-style: italic; color: var(--accent); }

.role__line {
  font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2);
  max-width: 46ch; margin-top: clamp(0.7rem, 1.6vw, 1.1rem);
}

.role__line + .role__line { margin-top: 0.7rem; }

.role__tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem;
  margin-top: clamp(1rem, 2.2vw, 1.5rem);
}

.role__tags li {
  font-family: var(--mono); font-size: var(--t-lbl);
  letter-spacing: 0.06em; color: var(--mute);
  border: 1px solid var(--line); border-radius: 100px;
  padding: 0.2rem 0.62rem;
}

.role__tags li::before { content: none; }

/* ── 04 · guide (crossfade stack) ──────────────────────────────────────── */

.guide { position: relative; background: var(--paper-2); border-block: 1px solid var(--line); }

/* The readable default: six chapters, in order, nothing stacked on anything.
   This is what a phone gets and what every browser gets when the runtime is
   not driving the crossfade — reduced motion, no JS, or GSAP that failed. */
.guide__pin {
  height: auto; padding-block: clamp(3rem, 9vh, 5rem); padding-inline: var(--pad);
  display: flex; flex-direction: column; gap: clamp(1.2rem, 3vh, 2.2rem);
}

.guide__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem; }

.guide__stack { position: relative; display: flex; flex-direction: column; gap: clamp(2.5rem, 7vw, 4rem); }

.guide__item { position: static; display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: center; }
.guide__item .plate { aspect-ratio: 4 / 5; height: auto; }

/* Room for the two-column chapter, but still flowing down the page rather
   than crossfading in place — so the plate is capped, not page-tall. */
@media (min-width: 900px) {
  .guide__item { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: clamp(1.5rem, 4vw, 4rem); }
  .guide__item .plate { aspect-ratio: 3 / 2; max-height: 64vh; }
}

/* The pinned crossfade: only where there is room, and only while something is
   there to set the opacity that hides five of the six. */
@media (min-width: 900px) {
  html.motion .guide__pin { height: 100svh; justify-content: center; padding-block: 0; }
  html.motion .guide__stack { display: block; flex: 0 0 auto; height: clamp(320px, 62vh, 620px); }
  html.motion .guide__item {
    position: absolute; inset: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(1.5rem, 4vw, 4rem);
  }
  html.motion .guide__item .plate { aspect-ratio: auto; height: 100%; }
}

.guide__cap { max-width: 44ch; }
.guide__no { font-family: var(--mono); font-size: var(--t-lbl); color: var(--accent); }
/* a question, not a single word — smaller, and allowed to wrap */
.guide__name { font-family: var(--serif); font-variation-settings: 'opsz' 72; font-weight: 800; font-size: clamp(1.35rem, 3.1vw, 2.7rem); line-height: 1.02; letter-spacing: -0.03em; margin-top: 0.5rem; text-wrap: balance; }
.guide__name em { font-style: italic; }
.guide__note { font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); margin-top: 0.9rem; }

/* ── 05 · instruments ──────────────────────────────────────────────────── */

.inst { padding-block: clamp(4.5rem, 13vh, 9rem); }
.inst__intro { margin-bottom: clamp(2rem, 5vw, 3.5rem); }

.inst__row {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 0.9rem 1.6rem;
  padding-block: clamp(1rem, 2.4vw, 1.8rem);
  border-top: 1px solid var(--line);
  isolation: isolate; overflow: hidden;
}

.inst__row:last-of-type { border-bottom: 1px solid var(--line); }

.inst__row::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--accent); transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform 0.55s var(--ease);
}

.inst__row:hover::before { transform: scaleY(1); }
.inst__row:hover { color: var(--on-accent); }
.inst__row:hover .inst__no, .inst__row:hover .inst__items li { color: var(--on-accent); border-color: rgba(247, 248, 243, 0.42); }

.inst__no { font-family: var(--mono); font-size: var(--t-lbl); color: var(--mute); transition: color 0.4s ease; font-variant-numeric: tabular-nums; }
.inst__head { min-width: 0; }
.inst__name { font-family: var(--serif); font-variation-settings: 'opsz' 72; font-weight: 750; font-size: clamp(1.45rem, 3.4vw, 2.7rem); line-height: 0.98; letter-spacing: -0.034em; }
.inst__gloss { font-size: var(--t-sm); color: var(--mute); margin-top: 0.4rem; transition: color 0.4s ease; }
.inst__row:hover .inst__gloss { color: var(--on-accent); }
.inst__items { display: flex; flex-wrap: wrap; gap: 0.4rem; grid-column: 2; }

.inst__items li {
  font-family: var(--mono); font-size: var(--t-lbl); color: var(--mute);
  border: 1px solid var(--line); border-radius: 100px; padding: 0.22rem 0.65rem;
  transition: color 0.4s ease, border-color 0.4s ease;
}

@media (min-width: 900px) {
  .inst__row { grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
  .inst__items { grid-column: auto; justify-content: flex-end; }
}

/* ── 06 · blogs ────────────────────────────────────────────────────────── */

.blogs { padding-block: clamp(4rem, 12vh, 8rem); }
.blogs__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.blogs__empty { padding-block: 2.5rem; border-top: 1px solid var(--line); color: var(--mute); }

/* ── 03b · game (the backpressure sandbox under the quote) ─────────────── */

.game { padding-block: clamp(3.5rem, 10vh, 6.5rem); border-bottom: 1px solid var(--line); }

.game__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: end; }

@media (min-width: 900px) {
  .game__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
}

.game__copy p { margin-top: 0.9rem; }

.game__board {
  position: relative;
  border: 1px solid var(--line);
  background: var(--paper-2);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  touch-action: manipulation;
  transition: border-color 0.4s ease;
}

@media (min-width: 900px) { .game__board { aspect-ratio: 16 / 10; } }

.game.is-right .game__board { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.game.is-wrong .game__board { border-color: var(--line); }

.game__board canvas { width: 100%; height: 100%; display: block; outline: none; }
.game__board canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
body.cursor-on .game__board canvas { cursor: none !important; }

.game__hud {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem;
  padding: 0.5rem 0.8rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  font-family: var(--mono); font-size: var(--t-lbl);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute);
  font-variant-numeric: tabular-nums;
}

.game__hud b { color: var(--ink); font-weight: 400; }
.game.is-right .game__hud b { color: var(--accent); }

.game__controls { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; }

.game__btn {
  font-family: var(--mono); font-size: var(--t-lbl);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mute); background: transparent;
  border: 1px solid var(--line); border-radius: 100px;
  padding: 0.4rem 0.85rem; cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.game__btn:hover { color: var(--ink); border-color: var(--ink); }
.game__btn[aria-pressed='true'] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

.game__helpers { margin-top: clamp(1.2rem, 2.6vw, 1.8rem); padding-top: clamp(1rem, 2.2vw, 1.4rem); border-top: 1px solid var(--line); }
.game__helpers[hidden] { display: none; }
.game__helpers .game__controls { margin-top: 0.6rem; }
.game__note { font-size: var(--t-sm); color: var(--mute); margin-top: 0.8rem; max-width: 46ch; }

.game__board canvas { cursor: pointer; }

.game__verdict { margin-top: 0.9rem; min-height: 2.4em; }
.game.is-right .game__verdict { color: var(--accent); }
.game.is-wrong .game__verdict { color: var(--ink-2); }

/* ── the Life tutorial ─────────────────────────────────────────────────────
   Four before/after diagrams for the rules, and a coach line that follows
   what the visitor has actually done. Both are drawn from the same tokens as
   the board, so a theme swap needs no special case. */

.life__rules {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem clamp(0.8rem, 2vw, 1.4rem);
  margin-top: clamp(1.1rem, 2.4vw, 1.6rem);
}

/* Four across only while the copy column is full width. Past 900px it shares
   the row with the board, and four diagrams in half a column are too small to
   read — two rows of two are bigger there, not smaller. */
@media (min-width: 620px) and (max-width: 899px) {
  .life__rules { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.life__rule canvas { display: block; width: 100%; }
.life__rule .lbl { margin-top: 0.45rem; letter-spacing: 0.06em; line-height: 1.35; }
.life__rule .lbl b { color: var(--ink); font-weight: 400; }

.life__coach {
  margin-top: 1rem; min-height: 3.2em;
  color: var(--ink-2); letter-spacing: 0.05em; line-height: 1.5;
  text-transform: none; max-width: 46ch;
}

.life__coach b { color: var(--accent); font-weight: 400; }
.life__coach[data-done] { color: var(--mute); }

/* the step counter, so three instructions read as three and not as a wall */
.life__step {
  display: inline-block; margin-right: 0.5rem; padding: 0.1rem 0.4rem;
  border: 1px solid var(--accent); border-radius: 100px;
  color: var(--accent); font-variant-numeric: tabular-nums;
}

.life__wrapnote { margin-left: auto; }

/* the board is drawn on, so say so */
.life .game__board canvas { cursor: crosshair; }
body.cursor-on .life .game__board canvas { cursor: none !important; }

/* ── quote graphic: a system accreting from one node ───────────────────── */

#sig-edges { fill: none; stroke: var(--mute); stroke-width: 2.6; stroke-linecap: round; opacity: 0.95; }
#sig-nodes circle { fill: var(--ink); opacity: 0.95; }
#sig-seed { fill: var(--accent); }

/* ── section hooks ─────────────────────────────────────────────────────────
   One visual language for the marks that anchor a section, all of it drawn
   from the theme tokens so dark, light and no-JS need no special cases. */

.hook { display: block; width: 100%; height: auto; overflow: visible; }

.hook__fill { fill: var(--paper-2); stroke: var(--line); stroke-width: 1; }
.hook__line { fill: none; stroke: var(--line); stroke-width: 1; }
.hook__rule { fill: none; stroke: var(--mute); stroke-width: 1; }
.hook__acc  { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.hook__dot  { fill: var(--mute); }
.hook__dot--acc { fill: var(--accent); }

.hook__cap { font-family: var(--mono); font-size: 9px; letter-spacing: 0.11em; fill: var(--mute); }
.hook__cap--acc { fill: var(--accent); }

/* the layer stack sits above the position list, at the width of the column */
.hook--layers { max-width: 214px; margin-block: 1.4rem 0.4rem; }

/* the request path introduces the rows it describes */
.hook--path { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }

.hook--index { margin-block: clamp(1.2rem, 3vw, 2rem) 0; }

.hook--end { margin-block: clamp(1.6rem, 4vw, 2.6rem) clamp(1.2rem, 3vw, 2rem); }

/* ── depth ─────────────────────────────────────────────────────────────────
   The card stack is the one place a real perspective earns its keep: the
   cards behind genuinely recede rather than just shrinking. */

@media (min-width: 1024px) {
  html.motion .work { perspective: 1500px; perspective-origin: 50% 42%; }
  html.motion .role { transform-style: preserve-3d; }
}

.mast__plate { box-shadow: var(--lift-3), var(--edge); }
.strip .plate { box-shadow: var(--lift-3), var(--edge); }
.role__media { box-shadow: var(--lift-3), var(--edge); }
.guide__item .plate { box-shadow: var(--lift-3), var(--edge); }

/* grounds get a little modelling so a section is not one flat fill */
.guide::before,
.game::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(90% 60% at 50% 0%,
              color-mix(in srgb, var(--ink) 4%, transparent), transparent 70%);
}

.game { position: relative; }
.guide__pin, .game .wrap { position: relative; z-index: 1; }

/* the board and the instrument rows read as surfaces, not outlines */
.game__board { box-shadow: var(--lift-2), var(--edge); }
.inst__row { position: relative; }