/* GravenReach Media — shared tokens for the /work pages. Six colour triples (ground / letter / shade) plus ink on
   whitewash. One triple per section, hard switch at every boundary. */
@import url("/fonts.css");
:root {
  --ink: #151515;
  --whitewash: #EFEADF;

  --t1-ground: #FFC20E; --t1-letter: #D7262D; --t1-shade: #151515;
  --t2-ground: #00808F; --t2-letter: #F8F6EF; --t2-shade: #FFC20E;
  --t3-ground: #E5177B; --t3-letter: #FFFFFF; --t3-shade: #14306B;
  --t4-ground: #1E7B3A; --t4-letter: #F8F6EF; --t4-shade: #D7262D;
  --t5-ground: #F8F6EF; --t5-letter: #1D3FBF; --t5-shade: #D7262D;
  --t6-ground: #1D3FBF; --t6-letter: #FFC20E; --t6-shade: #E5177B;

  /* The self-hosted faces in /fonts.css are Archivo, Bodoni Moda (italic display) and Space Mono. */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-editorial: "Bodoni Moda", Georgia, serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --fs-body: 17px;      /* readability floor: nothing below 16px on a phone */
  --fs-small: 16px;
  --fs-h2: clamp(32px, 7vw, 64px);
  --fs-h1: clamp(44px, 11vw, 120px);
  --gutter: 16px;
  --measure: 62ch;
  --ease: cubic-bezier(.2,.7,.2,1);
}
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--whitewash); color: var(--ink); font-family: var(--font-body);
       font-size: var(--fs-body); line-height: 1.5; overflow-x: clip; }
img, video, canvas, svg { max-width: 100%; height: auto; display: block; }
.section { padding: 48px var(--gutter); position: relative; isolation: isolate; }
.t1 { background: var(--t1-ground); color: var(--t1-letter); }
/* Section grounds for t2 and t3 are darkened a few percent so 16px light body text clears 4.5:1
   (measured: #F8F6EF on #00808F = 4.33, white on #E5177B = 4.43). The display tokens above are unchanged. */
.t2 { background: #007C8A; color: var(--t2-letter); }
.t3 { background: #DC1676; color: var(--t3-letter); }
.t4 { background: var(--t4-ground); color: var(--t4-letter); }
.t5 { background: var(--t5-ground); color: var(--t5-letter); }
.t6 { background: var(--t6-ground); color: var(--t6-letter); }
.caption { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.4; max-width: var(--measure); }
.sample-label { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-small); padding: 6px 10px;
                border: 1.5px solid currentColor; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ==============================================================================================================
   Clickables. Every link, button and chip shows an affordance at rest (plate, underline or arrow) and changes on
   hover by moving, never by a fill swap alone. Motion is transform only. Hover motion runs only where the pointer
   can hover finely; keyboard focus shows the hover state; a press sinks the face onto its plate; under reduced
   motion the end states still apply, without the movement. No colour, type or layout of the pages changes.

   Hooks for markup written later (this file needs no edit for them):
     .pf        an opaque button or link becomes plate and face. Set --pf-plate when the section's default plate
                would match the face, and --pf-bw to the element's border width when it has a border.
     .pf-ghost  add with .pf when the button has no fill; set --pf-face to the colour behind it.
     .tlink     a text link with its own rest underline gains a drawn second line.
     .tarrow    an arrow element inside a link or button travels on hover and focus.
   This block owns ::before and ::after on every element it names; page styles leave those free.
   ============================================================================================================== */

/* Plate, drawn-line and face colours. Plates are the section's shade (t1: its red, since its shade is ink). Drawn
   lines use a colour that clears 3:1 on the ground (t3 and t4 use ink; t6 its yellow). */
.t1 { --pf-plate: var(--t1-letter); --pf-draw: var(--t1-letter); }
.t2 { --pf-plate: var(--t2-shade);  --pf-draw: var(--t2-shade); }
.t3 { --pf-plate: var(--t3-shade);  --pf-draw: var(--ink); }
.t4 { --pf-plate: var(--t4-shade);  --pf-draw: var(--ink); }
.t5 { --pf-plate: var(--t5-shade);  --pf-draw: var(--t5-shade); }
.t6 { --pf-plate: var(--t6-shade);  --pf-draw: var(--t6-letter); }
/* Playbook pages: header and closing box sit on the readout's own colour; the bands are whitewash; ink grounds. */
.k1 { --pf-kdraw: var(--t1-letter); } .k2 { --pf-kdraw: var(--t2-shade); } .k3, .k4 { --pf-kdraw: var(--ink); }
.k5 { --pf-kdraw: var(--t5-shade); }  .k6 { --pf-kdraw: var(--t6-letter); }
.band { --pf-draw: var(--t5-shade); }
header.top, div.close.mv { --pf-draw: var(--pf-kdraw, currentColor); }
header.hero.mv, footer.foot { --pf-draw: var(--t1-ground); }
.order.mv { --pf-plate: var(--t6-shade); --pf-draw: var(--t6-letter); }

/* ---- Plate and face: buttons, chips, cards, rows ---- */
a.cta, a.jump, a.btn, a.card, ul.jump a, .next a, .index a,
button.btn, button.ctl, button.dock, button.startbtn, button.more, .play .pill, .pf {
  --pf-t: 0px;
  position: relative; isolation: isolate; box-shadow: none;
  transform: translate(var(--pf-t), var(--pf-t));
  transition: transform 260ms var(--ease);
}
:is(a.cta, a.jump, a.btn, a.card, ul.jump a, .next a, .index a,
    button.btn, button.ctl, button.dock, button.startbtn, button.more, .play .pill, .pf)::before,
:is(a.cta, a.jump, a.btn, a.card, ul.jump a, .next a, .index a,
    button.btn, button.ctl, button.dock, button.startbtn, button.more, .play .pill, .pf)::after {
  content: ""; position: absolute; inset: calc(var(--pf-bw, 0px) * -1); z-index: -1; pointer-events: none;
  border-radius: inherit;
}
/* the plate: stays where it is while the face moves */
:is(a.cta, a.jump, a.btn, a.card, ul.jump a, .next a, .index a,
    button.btn, button.ctl, button.dock, button.startbtn, button.more, .play .pill, .pf)::before {
  background: var(--pf-plate, var(--ink));
  transform: translate(calc(var(--pf-off, 5px) - var(--pf-t)), calc(var(--pf-off, 5px) - var(--pf-t)));
  transition: transform 260ms var(--ease);
}
/* the face: a copy of the element's own fill and border, painted over the plate (zero specificity: order decides) */
:where(a.cta, a.jump, a.btn, a.card, ul.jump a, .next a, .index a,
    button.btn, button.ctl, button.dock, button.startbtn, button.more, .play .pill, .pf)::after {
  border: inherit; background: inherit;
}
/* buttons without a fill get a face in the colour behind them */
:where(button.btn:not(.primary):not(.more), a.btn.ghost, button.ctl:not(.primary), button.more:not(.btn),
    ul.jump a, .next a, .pf-ghost)::after { background: var(--pf-face, transparent); }
/* ...and where the page fills them on hover, the face takes that fill (hover only for a fine pointer, so a tap on a
   touch screen leaves the rest face; keyboard focus mirrors hover) */
button.more:not(.btn):is(:hover, :focus-visible)::after, ul.jump a:focus-visible::after, .next a:focus-visible::after { background: inherit; }
@media (hover: hover) and (pointer: fine) { ul.jump a:hover::after, .next a:hover::after { background: inherit; } }

/* sizes, borders and per-element colours, measured from each page's own rules */
a.card { --pf-plate: var(--s); --pf-off: 6px; }
.next a { --pf-plate: var(--g); --pf-face: var(--whitewash); --pf-bw: 2px; --pf-off: 6px; }
.k5 .next a { --pf-plate: var(--t5-shade); }
ul.jump a { --pf-plate: var(--t1-ground); --pf-face: var(--ink); --pf-bw: 1.5px; --pf-off: 4px; --pf-lift: 3px; }
a.btn { --pf-bw: 2px; }
a.btn.ghost { --pf-face: var(--t6-ground); }
button.btn { --pf-bw: 2px; }
button.btn:not(.primary):not(.more) { --pf-face: var(--t5-ground); }
.rewrite button.btn:not(.primary):not(.more) { --pf-face: #FFFFFF; }
button.ctl { --pf-plate: var(--ink); --pf-bw: 2px; }
button.ctl:not(.primary) { --pf-face: #007C8A; }
button.more:not(.btn) { --pf-face: var(--t5-ground); --pf-bw: 1.5px; }
button.startbtn { --pf-plate: var(--t5-shade); }
.t3 button.dock, .t3 .play .pill { --pf-plate: var(--t3-letter); }
.play .pill { --pf-off: 4px; --pf-lift: 3px; }
.t4.close a.cta { --pf-off: 6px; }
.hero-inner > a.jump:is(:hover, :focus-visible) { --pf-plate: var(--ink); }
button:disabled::before { opacity: 0; }

/* hover lifts the face off its plate; focus does the same; a press sinks it */
@media (hover: hover) and (pointer: fine) {
  :is(a.cta, a.jump, a.btn, a.card, ul.jump a, .next a, .index a, .pf,
      button.btn, button.ctl, button.dock, button.startbtn, button.more):not(:disabled):hover,
  .play:hover .pill {
    --pf-t: calc(var(--pf-lift, 4px) * -1); transform: translate(var(--pf-t), var(--pf-t)); box-shadow: none;
  }
}
:is(a.cta, a.jump, a.btn, a.card, ul.jump a, .next a, .index a, .pf,
    button.btn, button.ctl, button.dock, button.startbtn, button.more):focus-visible,
.play:focus-visible .pill {
  --pf-t: calc(var(--pf-lift, 4px) * -1); transform: translate(var(--pf-t), var(--pf-t)); box-shadow: none;
}
:is(a.cta, a.jump, a.btn, a.card, ul.jump a, .next a, .index a, .pf,
    button.btn, button.ctl, button.dock, button.startbtn, button.more):not(:disabled):active,
.play:active .pill {
  --pf-t: var(--pf-press, 2px); transform: translate(var(--pf-t), var(--pf-t)); box-shadow: none; transition-duration: 80ms;
}
:is(a.cta, a.jump, a.btn, a.card, ul.jump a, .next a, .index a, .pf,
    button.btn, button.ctl, button.dock, button.startbtn, button.more):not(:disabled):active::before,
.play:active .pill::before { transition-duration: 80ms; }

/* ---- Arrows that are their own element travel ---- */
a.card .card-foot > span:last-child, .next a .mono, a.cta > span:last-child, .tarrow { transition: transform 260ms var(--ease); }
.tarrow { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  a.card:hover .card-foot > span:last-child, a.cta:hover > span:last-child, :is(a, button):hover .tarrow,
  .next a:last-child:hover .mono { transform: translateX(4px); }
  .next a:first-child:not(:last-child):hover .mono { transform: translateX(-4px); }
}
a.card:focus-visible .card-foot > span:last-child, a.cta:focus-visible > span:last-child, :is(a, button):focus-visible .tarrow,
.next a:last-child:focus-visible .mono { transform: translateX(4px); }
.next a:first-child:not(:last-child):focus-visible .mono { transform: translateX(-4px); }

/* ---- Text links: the rest underline stays, a second line draws in under it ---- */
nav.bar a, nav.topbar a > span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
:is(a.home, .foot a:not([class]), footer a:not([class]), .src-list a, nav.bar a, div.close.mv a, .src a, .tlink),
nav.topbar a > span { position: relative; }
:is(a.home, .foot a:not([class]), footer a:not([class]), nav.bar a, div.close.mv a, .tlink)::after,
nav.topbar a > span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; pointer-events: none;
  background: var(--pf-draw, currentColor);
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform 260ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  :is(a.home, .foot a:not([class]), footer a:not([class]), nav.bar a, div.close.mv a, .tlink):hover::after,
  nav.topbar a:hover > span::after { transform: scaleX(1); transform-origin: 0 50%; }
}
:is(a.home, .foot a:not([class]), footer a:not([class]), nav.bar a, div.close.mv a, .tlink):focus-visible::after,
nav.topbar a:focus-visible > span::after { transform: scaleX(1); transform-origin: 0 50%; }
/* Source links wrap onto two or more lines, and one ::after can only sit under the last of them. They get the same
   3 px line as a shadow cloned onto every line box, in the same place (2 to 5 px under the text). It appears without
   travel: CSS cannot draw a separate line under each line of a wrapped link with transform alone. */
.src-list a, .src a { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.src-list a { padding-bottom: 2px; }
@media (hover: hover) and (pointer: fine) { .src-list a:hover, .src a:hover { box-shadow: 0 3px 0 0 var(--pf-draw, currentColor); } }
.src-list a:focus-visible, .src a:focus-visible { box-shadow: 0 3px 0 0 var(--pf-draw, currentColor); }

/* the wordmark gives a small strike */
nav.topbar a > svg { transform-origin: 50% 70%; }
@media (hover: hover) and (pointer: fine) { nav.topbar a:hover > svg { animation: pf-strike 420ms var(--ease) 1; } }
nav.topbar a:focus-visible > svg { animation: pf-strike 420ms var(--ease) 1; }
@keyframes pf-strike { 0%, 100% { transform: none; } 45% { transform: rotate(-8deg); } }

/* a centred "see the readout" link moves the way its arrow points */
a.to-readout { transition: transform 260ms var(--ease); }
@media (hover: hover) and (pointer: fine) { a.to-readout:hover { transform: translateY(3px); } }
a.to-readout:focus-visible { transform: translateY(3px); }

/* ---- Contents rows: an arrow at rest, a line drawn along the rule and the row travels on hover ---- */
.toc a { position: relative; }
.toc a > * { transition: transform 260ms var(--ease); }
.toc a::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; pointer-events: none;
  background: var(--pf-draw, currentColor); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 260ms var(--ease);
}
.toc a::after {
  content: "\2193"; content: "\2193" / ""; position: absolute; right: 0; top: 50%; font-family: var(--font-mono); font-size: 16px; font-weight: 400;
  line-height: 1; transform: translateY(-50%); transition: transform 260ms var(--ease); pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .toc a:hover > * { transform: translateX(8px); }
  .toc a:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
  .toc a:hover::after { transform: translateY(calc(-50% + 3px)); }
}
.toc a:focus-visible > * { transform: translateX(8px); }
.toc a:focus-visible::before { transform: scaleX(1); transform-origin: 0 50%; }
.toc a:focus-visible::after { transform: translateY(calc(-50% + 3px)); }

/* reduced motion: every state above still shows, nothing moves to get there */
@media (prefers-reduced-motion: reduce) {
  :is(a.cta, a.jump, a.btn, a.card, ul.jump a, .next a, .index a, button.btn, button.ctl, button.dock,
      button.startbtn, button.more, .play .pill, .pf, .toc a)::before,
  :is(a.home, .foot a:not([class]), footer a:not([class]), nav.bar a, div.close.mv a, .tlink, .toc a)::after,
  nav.topbar a > span::after { transition: none !important; }
  nav.topbar a > svg { animation: none !important; }
}