/* =========================================================
   IJ MACKAY — against correction
   Black plate + one magenta plate. Scroll is the register knob.
   ========================================================= */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  /* Archivo sets every h1 and .case-title — the LCP element on the case pages.
     `block` hid that text for up to 3s waiting on the font; `swap` paints the
     Arial fallback immediately and records LCP on it. */
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/switzer-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/switzer-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/switzer-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #000;
  --paper: #fff;
  --grey: #808080;
  --grey-hi: #b4b4b4;
  --line: #2a2a2a;
  --f: #ff0095;

  /* type ramp — 8 tokens, every font-size on the site references one */
  --t-caption: 11.5px;
  --t-label: 14.5px;
  --t-body: 17px;
  --t-lede: 22px;
  --t-h3: 30px;
  --t-h2: clamp(44px, 5.2vw, 76px);
  --t-hero: clamp(56px, 11vw, 150px);
  --t-ghost: clamp(110px, 23vw, 340px);

  /* 5 tracking values */
  --tr-tight: -0.045em;
  --tr-snug: -0.02em;
  --tr-flat: 0em;
  --tr-open: 0.04em;
  --tr-wide: 0.16em;

  /* 5 leading values */
  --lh-solid: 0.82;
  --lh-tight: 1.02;
  --lh-head: 1.2;
  --lh-lede: 1.35;
  --lh-body: 1.5;

  --m: 5vw;
  --gutter: 24px;
  --prose: 62ch;
}

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

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Switzer", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-flat);
  overflow-x: hidden;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

/* pre-hide the scroll-reveal state in CSS (render-blocking, applies before
   first paint) so there's no flash of fully-visible content that then snaps
   to hidden once the GSAP scripts at the bottom of body finally load and
   initRise() runs. Values must match the "from" state in initRise() exactly
   so GSAP's takeover is invisible. Escape hatches for when JS never runs
   the reveal at all: reduced-motion (initRise() returns immediately) and
   .no-motion (GSAP failed to load, boot() never calls initRise()). */
[data-rise] {
  opacity: 0;
  transform: translateY(26px);
}

.no-motion [data-rise] {
  opacity: 1;
  transform: none;
}

/* .no-motion covered [data-rise] but never .chapter, so a blocked or slow CDN
   left the Work section invisible and unclickable while the prose around it
   appeared normally. */
.no-motion .chapter {
  position: relative;
  inset: auto;
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-rise] {
    opacity: 1;
    transform: none;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--f);
  color: #000;
}

/* ---------- roles ---------- */

.label {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-label);
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: var(--tr-wide);
  line-height: var(--lh-head);
  text-transform: uppercase;
  color: var(--grey-hi);
  margin: 0;
}

.caption {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-caption);
  font-weight: 500;
  font-stretch: 88%;
  letter-spacing: var(--tr-wide);
  line-height: var(--lh-head);
  text-transform: uppercase;
  color: var(--grey);
  margin: 0;
}

.h2 {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-h2);
  font-weight: 800;
  font-stretch: 92%;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

.h3 {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-h3);
  font-weight: 700;
  font-stretch: 92%;
  line-height: var(--lh-head);
  letter-spacing: var(--tr-snug);
  text-wrap: balance;
  margin: 0;
}

.lede {
  font-size: var(--t-lede);
  line-height: var(--lh-lede);
  letter-spacing: var(--tr-snug);
  font-weight: 400;
  max-width: 30ch;
  margin: 0;
  text-wrap: pretty;
}

.body {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  max-width: var(--prose);
  color: var(--grey-hi);
  margin: 0;
  text-wrap: pretty;
}

.body strong {
  color: var(--paper);
  font-weight: 500;
}

.sec-light .body strong,
.chapter-light .body strong {
  color: var(--ink);
}

.f {
  color: var(--f);
}

/* prose links — the only inline links on the site, so they carry the same
   magenta rule as the enquiries address instead of relying on colour alone,
   which `a { color: inherit }` would swallow */
.inline-link {
  color: inherit;
  border-bottom: 1px solid var(--f);
  padding-bottom: 1px;
  transition: color 200ms ease;
}

.inline-link:hover,
.inline-link:focus-visible {
  color: var(--f);
}

/* ---------- persistent nav ---------- */

.nav {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  padding: 18px var(--m);
  mix-blend-mode: normal;
  pointer-events: none;
}

.nav > * {
  pointer-events: auto;
}

.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.8) 100%);
  opacity: 0;
  transition: opacity 0.4s linear;
  pointer-events: none;
}

.nav.is-lifted::before {
  opacity: 1;
}

.nav-mark {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-label);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  /* the name is there from the first frame and stays: the hero is a bare mark on
     black, so the wordmark in the nav is what says whose it is */
  color: var(--paper);
}

.nav-index {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-index a {
  position: relative;
  display: block;
  padding-block: 6px;
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-caption);
  font-weight: 600;
  font-stretch: 82%;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--grey);
  transition: color 0.35s linear;
}

.nav-index a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--f);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-index a:hover,
.nav-index a:focus-visible,
.nav-index a.is-current {
  color: var(--paper);
}

.nav-index a.is-current::after,
.nav-index a:hover::after,
.nav-index a:focus-visible::after {
  transform: scaleX(1);
}

.nav-out {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-out a {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-caption);
  font-weight: 600;
  font-stretch: 82%;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--grey-hi);
  transition: color 0.3s linear;
}

.nav-out a:hover,
.nav-out a:focus-visible {
  color: var(--f);
}

.nav-progress {
  position: fixed;
  z-index: 61;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--f);
}

/* ---------- hero: the press plate ---------- */

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--ink);
}

/* behind everything: magenta through the mark at rest, washed to white as the
   plate opens (js/site.js drives the colour) */
.hero-reveal {
  position: absolute;
  inset: 0;
  background: var(--f);
}

/* the film only breathes up mid-scroll; js/site.js drives the opacity */
.hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: grayscale(1) contrast(1.18) brightness(2.15);
}

.hero-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-chroma {
  mix-blend-mode: screen;
}

.hero-grain {
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  animation: drift 6s steps(6, end) infinite;
}

@keyframes drift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  20% {
    transform: translate3d(-2%, 1%, 0);
  }
  40% {
    transform: translate3d(1%, -2%, 0);
  }
  60% {
    transform: translate3d(-1%, -1%, 0);
  }
  80% {
    transform: translate3d(2%, 1%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.hero-ui {
  position: absolute;
  z-index: 3;
  inset: auto var(--m) 26px var(--m);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gutter);
}

.hero-ui .caption {
  color: var(--grey-hi);
}

.hero-cue {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-cue-track {
  position: relative;
  width: 96px;
  height: 2px;
  background: #3a3a3a;
}

.hero-cue-fill {
  position: absolute;
  inset: 0;
  background: var(--f);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- generic section frame ---------- */

.sec {
  position: relative;
  padding: clamp(84px, 12vh, 160px) var(--m);
}

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(28px, 5vh, 56px);
}

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ---------- statement (word sweep) ---------- */

.statement {
  padding-block: clamp(110px, 22vh, 240px);
}

.statement-copy {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-h2);
  font-weight: 700;
  font-stretch: 92%;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  max-width: 32ch;
  margin: 0;
}

/* the statement's rag is set by hand; below tablet width let it flow naturally */
@media (max-width: 720px) {
  .statement-copy br {
    display: none;
  }
  .statement-copy {
    max-width: 22ch;
    text-wrap: balance;
  }
}

.statement-copy .w {
  color: #3d3d3d;
}

.statement-foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(22px, 3vw, 48px);
  margin-top: clamp(48px, 8vh, 96px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.statement-foot p {
  margin: 8px 0 0;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--grey-hi);
}

/* ---------- chapter deck ---------- */

.deck {
  position: relative;
}

.deck-pin {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.deck-spines {
  position: absolute;
  z-index: 4;
  inset: 0 0 auto 0;
  padding-top: 62px;
}

.spine {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 0;
  overflow: hidden;
  padding-inline: var(--m);
  border-bottom: 1px solid var(--line);
  background: #000;
  color: var(--grey);
  will-change: height;
}

.spine .n,
.spine .t {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-caption);
  font-weight: 600;
  font-stretch: 82%;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

.spine .t {
  color: var(--grey-hi);
}

.spine .sweep {
  flex: 1;
  height: 1px;
  background: var(--f);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.spine:hover .sweep,
.spine:focus-visible .sweep {
  transform: scaleX(1);
}

.deck-stage {
  position: absolute;
  inset: 0;
}

.chapter {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: stretch;
  opacity: 0;
  will-change: transform, opacity, clip-path;
}

.chapter-fig {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
}

.chapter-fig img,
.chapter-fig video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chapter-fig.is-contain img {
  object-fit: contain;
  padding: clamp(28px, 6vw, 96px);
}

/* the Eagle overlay is the brand mark itself, not photography — it runs
   full-bleed on the plate at reduced weight so it reads as pattern next to
   the headline rather than competing with it */
.chapter-fig.is-pattern {
  background: #0a0a0a;
}

.chapter-fig.is-pattern img {
  opacity: 0.55;
}

/* a drawn mark sits on the plate, not in a black void */
.chapter-light .chapter-fig.is-contain {
  background: var(--paper);
}

/* A full-figure portrait cannot take the deck's usual cover crop: the column is
   wider than 2:3 at every desktop ratio, so cover cuts the head (86px in at
   1920x1080) and the boots. Fit by height instead, and keep the figure clear of
   .deck-spines — that stack is opaque black, pinned to the top of the stage, and
   has grown 62px + 5.5vh per exited card by the time this one is active. Fitting
   to the full stage height would park the head behind it. */
.chapter-fig.is-portrait img {
  object-fit: contain;
  padding: calc(62px + 22vh) 0 0;
}

/* Fitting by height leaves bars either side. Ground them in the portrait's own
   carpet colour (sampled from its edges) rather than paper, so the column still
   reads as an unbroken field of fuchsia instead of a letterboxed print. */
.chapter-light .chapter-fig.is-portrait {
  background: #b4124e;
}

.chapter-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: clamp(74px, 11vh, 132px) var(--m) clamp(40px, 7vh, 76px) clamp(30px, 4vw, 68px);
  border-left: 1px solid var(--line);
}

.chapter-n {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-caption);
  font-weight: 700;
  font-stretch: 82%;
  letter-spacing: var(--tr-wide);
  color: var(--f);
}

/* the same magenta measures 3.69:1 on the white chapter cards — below the
   4.5:1 AA floor. #c2007a is the nearest darkening that clears it (5.87:1). */
.chapter-light .chapter-n {
  color: #c2007a;
}

.chapter-name {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-h2);
  font-weight: 800;
  line-height: var(--lh-solid);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  margin: 0;
  font-variation-settings: "wdth" 100;
  text-wrap: balance;
}

.chapter-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.chapter-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  margin-top: 6px;
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-label);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--paper);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--f);
  transition: color 0.3s linear, gap 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter-link:hover,
.chapter-link:focus-visible {
  color: var(--f);
  gap: 20px;
}

/* ---------- receipts ---------- */

.receipts {
  position: relative;
  background: var(--paper);
  color: var(--ink);
}

.receipts .caption {
  color: #5c5c5c;
}

.receipts-pin {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(84px, 13vh, 150px) 0 clamp(30px, 5vh, 54px);
  overflow: hidden;
}

.receipt-stat {
  padding-inline: var(--m);
}

.receipt-value {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-ghost);
  font-weight: 800;
  font-stretch: 84%;
  line-height: var(--lh-solid);
  letter-spacing: var(--tr-tight);
  font-variant-numeric: tabular-nums lining-nums;
  margin: 0;
}

.receipt-note {
  max-width: 34ch;
  margin: 14px 0 0;
  font-size: var(--t-lede);
  line-height: var(--lh-lede);
  letter-spacing: var(--tr-snug);
  color: #3c3c3c;
}

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: 10px;
}

.marquee-row {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee-row span {
  font-family: "Archivo", Arial, sans-serif;
  font-size: clamp(30px, 4.6vw, 68px);
  font-weight: 800;
  font-stretch: 125%;
  line-height: var(--lh-solid);
  letter-spacing: var(--tr-snug);
  text-transform: uppercase;
  padding-right: 0.34em;
  white-space: nowrap;
}

.marquee-row span:nth-child(4n + 2) {
  color: var(--f);
}

/* ---------- against correction (film window) ---------- */

.remains {
  position: relative;
}

.remains-pin {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.remains-window {
  position: relative;
  width: 100%;
  height: 100%;
}

.remains-window video,
.remains-window img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.remains-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.14) 42%, rgba(0, 0, 0, 0.86) 100%);
}

.remains-copy {
  position: absolute;
  z-index: 3;
  inset: auto var(--m) clamp(40px, 8vh, 92px) var(--m);
}

.remains-line {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-h2);
  font-weight: 500;
  font-stretch: 92%;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-snug);
  max-width: 26ch;
  margin: 0;
  text-wrap: balance;
}

.remains-line + .remains-line {
  position: absolute;
  inset: 0 auto auto 0;
}

.remains-works {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(54px, 9vh, 110px) var(--m) 0;
}

.work-card {
  display: block;
}

.work-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--line);
}

.work-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-card .caption {
  margin-top: 12px;
}

/* ---------- direction statement ---------- */

.direction {
  padding-block: clamp(110px, 20vh, 220px);
}

.direction-quote {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-h2);
  font-weight: 700;
  font-stretch: 92%;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  max-width: 24ch;
  margin: 0 0 clamp(30px, 5vh, 58px);
  text-wrap: balance;
}

.direction-quote .w {
  color: #3d3d3d;
}

.direction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* ---------- writing ---------- */

.post {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2.4vw, 40px);
  padding-block: clamp(20px, 2.6vh, 30px);
  border-top: 1px solid var(--line);
  transition: background-color 0.35s linear;
}

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

.post-title {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-h3);
  font-weight: 600;
  font-stretch: 92%;
  line-height: var(--lh-head);
  letter-spacing: var(--tr-snug);
  margin: 0;
  transition: color 0.3s linear;
}

.post:hover .post-title,
.post:focus-visible .post-title {
  color: var(--f);
}

.post-tag {
  color: var(--grey);
}

/* ---------- contact (static by rule) ---------- */

.contact {
  padding: clamp(90px, 16vh, 190px) var(--m) 40px;
  background: var(--paper);
  color: var(--ink);
}

.contact .caption {
  color: #5c5c5c;
}

.contact .body {
  color: #3a3a3a;
}

/* reusable white plate — any .sec can flip light with this modifier,
   same treatment as .receipts/.contact rather than a one-off per page */
.sec-light {
  background: var(--paper);
  color: var(--ink);
}

.sec-light .caption {
  color: #5c5c5c;
}

.sec-light .body {
  color: #3a3a3a;
}

/* individual chapter cards can flip white while the deck stage and spine
   nav stay black — the image half is untouched, only the text half flips */
.chapter-light .chapter-body {
  background: var(--paper);
  color: var(--ink);
}

.chapter-light .chapter-meta .caption {
  color: #5c5c5c;
}

.chapter-light .chapter-link {
  color: var(--ink);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(30px, 4vw, 70px);
  align-items: start;
}

.contact-mail {
  font-family: "Archivo", Arial, sans-serif;
  font-size: clamp(28px, 3.6vw, 54px);
  font-weight: 700;
  font-stretch: 88%;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  display: inline-block;
  border-bottom: 2px solid var(--f);
  padding-bottom: 4px;
  transition: color 0.3s linear;
  overflow-wrap: anywhere;
}

.contact-mail:hover,
.contact-mail:focus-visible {
  color: var(--f);
}


.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  padding: 34px var(--m);
  border-top: 1px solid var(--line);
}

/* ---------- case-study page bits ---------- */

.case-hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.case-hero video,
.case-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the copy sits at the foot of the frame, so the scrim is weighted there.
   A flat veil across the whole hero greys out the artwork — on a light
   source image it turns saturated colour to mud — so the middle stays clear
   and only the nav strip and the title bed carry any density. */
.case-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.16) 20%,
    rgba(0, 0, 0, 0.03) 34%,
    rgba(0, 0, 0, 0.34) 50%,
    rgba(0, 0, 0, 0.66) 68%,
    rgba(0, 0, 0, 0.88) 100%
  );
}

.case-hero-copy {
  position: absolute;
  z-index: 3;
  inset: auto var(--m) clamp(38px, 7vh, 84px) var(--m);
}

/* the kicker lands on artwork, not on a flat plate — grey disappears into it */
.case-hero-copy .caption {
  color: var(--grey-hi);
}

.case-title {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-hero);
  font-weight: 800;
  font-stretch: 100%;
  line-height: var(--lh-solid);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  margin: 10px 0 0;
}

/* a plain text header — no image, no scrim, just the title on the page background */
.case-header {
  padding: clamp(150px, 26vh, 260px) var(--m) clamp(60px, 9vh, 110px);
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 4vw, 74px);
  align-items: start;
}

.plate-figure {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--line);
  /* the UA sheet gives <figure> `margin: 1em 40px`. Instances only ever set
     margin-top inline, so without this the plate sits 40px inside every other
     element in the section and the edges stop lining up. */
  margin-inline: 0;
}

/* in a two-up grid the column already sets the measure; the 80ch cap is for a
   lone plate in article flow, and applying it here leaves the pair narrower
   than a full-bleed plate above it on wide screens. */
.split > .article-plate {
  max-width: none;
}

.plate-figure img {
  width: 100%;
  height: auto;
}

.ghost-word {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-ghost);
  font-weight: 800;
  font-stretch: 125%;
  line-height: var(--lh-solid);
  letter-spacing: var(--tr-tight);
  text-transform: uppercase;
  color: #131313;
  margin: 0;
  user-select: none;
  white-space: nowrap;
}

.next-chapter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: clamp(60px, 10vh, 120px) var(--m);
  border-top: 1px solid var(--line);
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  :root {
    --m: 6vw;
    --t-body: 16.5px;
    --t-lede: 20px;
    --t-h3: 25px;
  }

  .nav-index {
    display: none;
  }

  .chapter {
    grid-template-columns: 1fr;
    grid-template-rows: 46vh minmax(0, 1fr);
  }

  .chapter-body {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: clamp(22px, 4vh, 34px) var(--m) clamp(26px, 5vh, 44px);
    gap: 14px;
  }

  .post {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hero-ui {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-grain {
    animation: none;
  }

  .chapter {
    position: relative;
    inset: auto;
    opacity: 1;
    /* .chapter is pointer-events: none further down, released only by
       .is-active — a class initDeck() never gets to add here, because it
       returns early under reduced motion. Without this the whole deck is
       visible but unclickable, and the deck is the only route to the work. */
    pointer-events: auto;
  }

  .deck-pin,
  .remains-pin,
  .receipts-pin {
    height: auto;
  }

  .deck-stage {
    position: static;
  }

  .marquee-row {
    animation: none;
  }
}

/* ---------- utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.post.is-index:hover .post-title,
.post.is-index:focus-visible .post-title {
  color: inherit;
}

.chapter {
  pointer-events: none;
}

.chapter.is-active {
  pointer-events: auto;
}

a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--f);
  outline-offset: 3px;
}

/* no italics are loaded — accents are colour and weight, never a slant */
em,
i,
cite {
  font-style: normal;
}

.statement-copy em,
.direction-quote em {
  font-weight: 800;
}

.statement-copy,
.direction-quote {
  font-size: clamp(34px, 4.6vw, 66px);
}

.chapter-fig img {
  filter: contrast(1.06);
}


/* practice film is graded to the plate, like the hero */
.remains-window video,
.remains-window img {
  filter: grayscale(1) contrast(1.14) brightness(1.06);
}

/* stat plates: vertical centre, ordinal on the right rule */
.receipt-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--m);
}

.receipt-idx {
  margin-top: clamp(26px, 5vh, 60px);
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.22);
  font-family: "Switzer", Arial, sans-serif;
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: #5c5c5c;
  text-align: right;
}

.receipt-idx span {
  color: var(--ink);
}

/* over the deck the scrim goes opaque: a white card behind a fading
   gradient washes the links out to nothing */
.nav.is-solid::before {
  background: var(--ink);
  opacity: 1;
}

.nav.is-solid .nav-mark,
.nav.is-solid .nav-index a,
.nav.is-solid .nav-out a,
.nav.is-solid .nav-now {
  color: var(--grey-hi);
}

.nav.is-solid .nav-mark,
.nav.is-solid .nav-index a.is-current,
.nav.is-solid .nav-index a:hover,
.nav.is-solid .nav-index a:focus-visible,
.nav.is-solid .nav-out a:hover,
.nav.is-solid .nav-out a:focus-visible {
  color: var(--paper);
}

/* nav has to survive the white plate */
.nav.on-light::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0) 100%);
}

.nav.on-light .nav-mark,
.nav.on-light .nav-index a,
.nav.on-light .nav-out a,
.nav.on-light .nav-now {
  color: var(--ink);
}

.nav.on-light .nav-index a.is-current,
.nav.on-light .nav-index a:hover,
.nav.on-light .nav-index a:focus-visible {
  color: var(--ink);
}

.nav.on-light .nav-index a::after {
  background: var(--f);
}

/* the address must never break mid-word */
.contact-mail {
  font-size: clamp(24px, 2.9vw, 44px);
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/* was `1.7fr 0.7fr auto` at a one-off 861px breakpoint — the third track was
   reserved for a .contact-portrait that no live page contains, so it rendered
   as a phantom empty column plus its gap. Breakpoint aligned to the 900px the
   rest of the file uses. */
@media (min-width: 901px) {
  .contact-grid {
    grid-template-columns: 1.7fr 0.7fr;
  }
}

.direction-quote {
  font-size: clamp(30px, 4vw, 58px);
}


/* mobile keeps a section-aware nav without the full index */
.nav-now {
  display: none;
}

@media (max-width: 900px) {
  .nav-now {
    display: block;
    font-family: "Switzer", Arial, sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--f);
    margin-right: auto;
    padding-left: 12px;
  }

  .statement {
    padding-block: clamp(90px, 14vh, 140px);
  }
}

@media (max-width: 900px) {
  .nav {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "mark out"
      "now  now";
    row-gap: 4px;
    align-items: center;
    padding-block: 10px 8px;
  }

  .nav-mark {
    grid-area: mark;
    white-space: nowrap;
    font-size: 12px;
  }

  .nav-out {
    grid-area: out;
    justify-self: end;
    gap: 14px;
  }

  .nav-out a {
    font-size: 9.5px;
  }

  .nav-now {
    grid-area: now;
    margin: 0;
    padding-left: 0;
    font-size: 9.5px;
  }

  .nav-now:empty {
    display: none;
  }
}


.plate-figure img {
  filter: contrast(1.08);
}

.case-hero video {
  filter: grayscale(1) contrast(1.16) brightness(1.95);
}

/* ---------- writing: listing + article body ---------- */

.post-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 5vh, 56px);
}

a.post {
  color: inherit;
  text-decoration: none;
}

a.post:hover .post-title,
a.post:focus-visible .post-title {
  color: var(--f);
}

.article-head {
  padding-bottom: 0;
}

/* sticky meta rail + wide main column — same asymmetric split as the
   engineering case-notes, so a single long-form piece doesn't read as
   one narrow column pinned to the left edge */
.article-layout {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.article-meta {
  position: sticky;
  top: 90px;
}

.article-title {
  margin-top: 0;
  max-width: none;
}

.article-body {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 32px);
  margin-top: clamp(28px, 5vh, 56px);
}

.article-body .body {
  max-width: 62ch;
}

/* art-practice imagery keeps its real colour — only case-study press
   plates get the grayscale grade. Images run wider than the text
   column on purpose — a deliberate rhythm break, not full prose width */
.article-plate {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--line);
  max-width: 80ch;
}

@media (max-width: 760px) {
  .article-layout {
    grid-template-columns: 1fr;
  }

  .article-meta {
    position: static;
  }
}

.article-plate img,
.article-plate video {
  width: 100%;
  height: auto;
  display: block;
}

.article-plate figcaption {
  padding: 14px 0 0;
}

/* ---------- image matrix: a grid survey of supporting work ---------- */

.image-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}

.image-matrix figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--line);
}

.image-matrix img {
  width: 100%;
  height: auto;
  display: block;
}

.image-matrix figcaption {
  padding: 12px 14px;
}

@media (max-width: 900px) {
  .image-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .image-matrix {
    grid-template-columns: 1fr;
  }
}

/* ---------- bento grid: varied-size tiles on white, packed dense ---------- */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: clamp(170px, 19vw, 260px);
  grid-auto-flow: dense;
  gap: clamp(10px, 1.5vw, 18px);
}

.bento-grid figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid #e2e2e2;
  grid-column: span 1;
  grid-row: span 2;
}

.bento-grid figure.is-square {
  grid-column: span 2;
  grid-row: span 3;
}

.bento-grid figure.is-wide {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-grid figure.is-big {
  grid-column: span 2;
  grid-row: span 4;
}

.bento-grid figure.is-hero {
  grid-column: span 4;
  grid-row: span 3;
}

.bento-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bento-grid figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 8px 10px;
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.94) 65%);
  color: var(--ink);
  font-size: 10.5px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.bento-grid figure:hover figcaption,
.bento-grid figure:focus-within figcaption {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .bento-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* a 4-column span in a 3-column grid widens the implicit grid and knocks
     every other tile out of alignment */
  .bento-grid figure.is-hero {
    grid-column: span 3;
  }
}

@media (max-width: 560px) {
  .bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(110px, 30vw, 150px);
  }

  /* the caption below becomes static so it reads as a permanent label where
     there is no hover — but the figure keeps a definite grid height and
     overflow:hidden, so the caption it just revealed was being clipped away.
     Let the mobile tiles size to their content instead. */
  .bento-grid figure {
    overflow: visible;
    height: auto;
    grid-row: span 1;
  }

  .bento-grid figure.is-hero,
  .bento-grid figure.is-square,
  .bento-grid figure.is-big,
  .bento-grid figure.is-wide {
    grid-column: span 2;
  }

  .bento-grid img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .bento-grid figcaption {
    opacity: 1;
    transform: none;
    position: static;
    background: none;
    padding: 8px 0 0;
  }
}

/* bilingual: EN/FR run as paired columns, not a stacked afterthought */
.bilingual-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 48px);
  max-width: none;
}

.bilingual-pair .body {
  max-width: none;
}

.bilingual-pair .body:last-child {
  color: var(--grey);
}

.bilingual-movement {
  color: var(--f);
  margin: clamp(12px, 2vh, 20px) 0 0;
}

/* ---------- engineering case files (Eagle Portland, etc) ---------- */

.case-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vh, 72px);
  max-width: 960px;
}

.case-note {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding-top: clamp(28px, 4vh, 44px);
  border-top: 1px solid var(--line);
}

.case-note:first-child {
  border-top: none;
  padding-top: 0;
}

.case-note-meta {
  position: sticky;
  top: 90px;
  align-self: start;
}

.case-note-tag {
  color: var(--f);
}

.case-note-name {
  margin: 10px 0 0;
}

.case-note-loc {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 12px;
  color: var(--grey);
  margin-top: 8px;
  word-break: break-word;
}

.case-note-body {
  max-width: 62ch;
}

.case-snippet {
  display: block;
  overflow-x: auto;
  background: #0a0a0a;
  border: 1px solid var(--line);
  padding: 18px 22px;
  margin: 16px 0 0;
  max-width: 68ch;
  font-family: "Share Tech Mono", "SF Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.55;
  color: var(--grey-hi);
  white-space: pre;
}

@media (max-width: 760px) {
  .case-note {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .case-note-meta {
    position: static;
  }
}

.case-verdict {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--t-caption);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--paper);
  margin-top: 12px;
}

.case-verdict.honest {
  color: var(--grey);
}

.sec-light .case-verdict {
  color: var(--ink);
}

.sec-light .case-verdict.honest {
  color: #5c5c5c;
}

/* ---------- brand system: the foundation, then what's built on it ---------- */

.foundation-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.foundation-swatch {
  flex: 1 1 140px;
  min-width: 120px;
  padding: 18px 16px;
  background: var(--ink);
}

.foundation-chip {
  width: 100%;
  height: 40px;
  margin-bottom: 12px;
}

.foundation-name {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 12.5px;
  letter-spacing: var(--tr-open);
  text-transform: uppercase;
  color: var(--paper);
}

.foundation-hex {
  font-family: "Share Tech Mono", "SF Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--grey);
  margin-top: 4px;
}

.archetype-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (max-width: 900px) {
  .archetype-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .archetype-grid {
    grid-template-columns: 1fr;
  }
}

.archetype-card {
  background: var(--ink);
  padding: clamp(22px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.archetype-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.archetype-num {
  font-family: "Share Tech Mono", "SF Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--grey);
}

.archetype-house {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 10px;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--f);
  border: 1px solid var(--f);
  padding: 2px 7px;
  white-space: nowrap;
}

.archetype-name {
  font-family: "Archivo", Arial, sans-serif;
  font-weight: 800;
  font-stretch: 125%;
  font-size: 23px;
  line-height: 1.1;
  color: var(--paper);
  margin: 0;
}

.archetype-system {
  color: var(--grey-hi);
  margin-top: 6px;
}

.archetype-bar {
  height: 32px;
  width: 100%;
}

.archetype-desc {
  color: var(--grey);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
}

/* Skip link — the first tab stop on every page, and invisible until it takes
   focus, so nothing about the visual design changes. Without it a keyboard or
   screen-reader visitor tabs through the whole nav on every single page before
   reaching the content. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 18px;
  background: var(--ink, #000);
  color: var(--paper, #fff);
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.skip-link:focus {
  left: var(--m, 24px);
  top: 12px;
  outline: 2px solid var(--f, #ff0095);
  outline-offset: 2px;
}