/* ============================================================
   EDITION8 — editorial.css
   Homepage-only EDITORIAL MONO system (Phase 2 redesign).
   Loaded AFTER styles.css and BEFORE mobile.css from index.html.
   Uses .ed-* namespace so other pages stay untouched.

   North star: refined Copenhagen / high-fashion editorial.
   PURE WHITE / BLACK MONOCHROME — zero chroma. Display emphasis is
   carried by a BOLD GEIST word (heavy geometric sans, echoing the
   EDITION8 / N°08 logo) set inside the upright Fraunces headline —
   serif headline + bold-sans accent — plus weight + whitespace,
   never colour and never italic.
   Reference: _directions.html (the canonical look).

   Tokens reused from styles.css:
     --paper/--paper-2/--ink/--ink-2/--rule/--rule-on-ink
     --mute-12/24/40/60 · --rule-red (now BLACK, kept for ABI)
     --font-serif (Fraunces) · --font-sans (Geist) · --font-mono (Geist Mono)
     --ease-* / --dur-* motion tokens
   2026.06 redesign · Istanbul
   ============================================================ */

/* ---------------- shared editorial primitives ---------------- */

:root {
  /* generous architectural rhythm */
  --ed-pad-x: clamp(28px, 5vw, 96px);
  --ed-rule:  1px solid var(--ink);
  --ed-hair:  1px solid var(--rule);
  --ed-ink:   var(--ink);
  --ed-grey:  var(--mute-60);   /* #6E6E6E feel — mono labels */
  --ed-faint: var(--mute-40);   /* #9B9B9B feel — secondary labels */
  --ed-ease:  var(--ease-expo); /* cubic-bezier(0.16,1,0.3,1) */

  /* Fraunces display scale — large, low-leading, slightly tight */
  --ed-disp-xl: clamp(3.4rem, 9vw, 9rem);
  --ed-disp-lg: clamp(2.8rem, 6.4vw, 6.4rem);
  --ed-disp-md: clamp(2.1rem, 4vw, 3.6rem);
  --ed-mono: var(--font-mono, 'Geist Mono', ui-monospace, monospace);
  --ed-serif: var(--font-serif, 'Geist', system-ui, sans-serif);
  --ed-sans:  var(--font-sans, 'Geist', system-ui, sans-serif);
}

body[data-page="home-editorial"] {
  background: var(--paper);
  overflow-x: clip;
}

/* hide any legacy intro/logodrop markup if it lingers */
body[data-page="home-editorial"] #intro,
body[data-page="home-editorial"] .logodrop { display: none !important; }

/* ---- mono eyebrow / index label — the recurring magazine voice ---- */
.ed-eyebrow,
.ed-section__num,
.ed-hero__index,
.ed-hero__corner,
.ed-cap__num,
.ed-cap__chips,
.ed-cap__more,
.ed-work__year,
.ed-work__type,
.ed-process__num,
.ed-proof__lbl,
.ed-proof__row-lbl,
.ed-proof__roster-label,
.ed-foot,
.ed-form__lbl,
.ed-contact__col-lbl,
.ed-cols__head,
.ed-cols__foot,
.ed-feature__caption {
  font-family: var(--ed-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 400;
  color: var(--ed-grey);
}

/* the recurring "+" / index plus — now ink, never coloured */
.ed-plus {
  color: var(--ed-grey);
  font-family: var(--ed-mono);
  font-weight: 400;
  display: inline-block;
  line-height: 1;
  transform: translateY(-0.04em);
}

/* display emphasis — BOLD GEIST, never coloured (canonical).
   Replaces the former Fraunces-italic emphasis: a heavy geometric sans
   word set inside the upright Fraunces headline echoes the EDITION8 / N°08
   logo (bold geometric), so serif headline + bold-sans accent reads as an
   intentional editorial contrast. Upright, ink, strictly monochrome. */
.ed-em,
.ed-section__title em,
.ed-hero__lede em,
.ed-cols__body em,
.ed-contact__lede em {
  font-family: var(--ed-sans);
  font-style: normal;
  font-weight: 750;
  letter-spacing: -0.018em;
  color: var(--ink);
}

/* ---- generic section header (sections 03..07) ---- */
.ed-section__head {
  padding: clamp(64px, 9vw, 150px) var(--ed-pad-x) clamp(28px, 4vw, 56px);
  display: grid;
  gap: clamp(18px, 2vw, 30px);
  border-top: var(--ed-hair);
}
.ed-section__head--split { grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) {
  .ed-section__head--split {
    grid-template-columns: 1fr auto;
    column-gap: clamp(32px, 4vw, 96px);
  }
  .ed-section__head--split > p { max-width: 30ch; text-align: right; align-self: end; }
}
.ed-section__num {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ed-grey);
}
.ed-section__title {
  font-family: var(--ed-serif);
  font-weight: 680;
  font-size: var(--ed-disp-lg);
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-transform: none;
  color: var(--ink);
  text-wrap: balance;
}
/* bold-sans emphasis sits visually a touch smaller than the serif cap-height;
   nudge size up so the heavy word holds its line in the Fraunces headline */
.ed-section__title em { font-weight: 750; font-size: 0.92em; }
.ed-section__lede,
.ed-section__aside {
  font-family: var(--ed-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.55;
  color: var(--ed-grey);
  max-width: 56ch;
  text-wrap: pretty;
}
.ed-section__aside a { color: var(--ink); text-underline-offset: 3px; }

/* ---- generic editorial actions ---- */
.ed-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
/* primary — solid black button */
.ed-cta--primary {
  padding: 17px 28px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  transition: background-color .4s var(--ed-ease), color .4s var(--ed-ease), transform .4s var(--ed-ease);
}
.ed-cta--primary:hover { background: var(--paper); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .ed-cta--primary:active { transform: scale(.98); }
}
.ed-cta__plus { transition: transform .4s var(--ed-ease); }
.ed-cta--primary .ed-cta__plus,
.ed-cta--primary .ed-cta__arrow { color: inherit; }
.ed-cta:hover .ed-cta__plus { transform: rotate(90deg); }
.ed-cta__arrow { transition: transform .4s var(--ed-ease); }
.ed-cta:hover .ed-cta__arrow { transform: translate(3px, -3px); }

/* ghost / underline link action */
.ed-cta--ghost {
  padding: 17px 4px;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  border-radius: 0;
}
.ed-cta--ghost:hover { color: var(--ed-grey); border-bottom-color: var(--ed-grey); }


/* ============================================================
   SECTION 01 — HERO  (white field, Fraunces statement, true film)
   ============================================================ */
.ed-hero {
  position: relative;
  padding-top: clamp(96px, 12vh, 150px);   /* clear sticky header + rail */
  padding-bottom: clamp(40px, 6vw, 110px);
  overflow: hidden;
  isolation: isolate;
}

/* top index / eyebrow row */
.ed-hero__index {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  flex-wrap: wrap;
  padding: 16px var(--ed-pad-x);
  border-top: var(--ed-hair);
  border-bottom: var(--ed-hair);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--ed-grey);
}

/* hero stage — type on the left, breathing film block on the right */
.ed-hero__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  padding: clamp(48px, 7vw, 110px) var(--ed-pad-x) 0;
  align-items: start;
}
@media (min-width: 980px) {
  /* side-by-side, FILM-DOMINANT: a BIG ~70%-width film on the right, with a
     compact bold statement beside it on the left. The film stays next to the
     headline — never dropped to the bottom — and fills the opening view. */
  .ed-hero__stage {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 1.6fr);
    column-gap: clamp(24px, 2.4vw, 42px);
    align-items: center;
    padding-top: clamp(36px, 4.5vw, 72px);
  }
  /* compact statement — fits the narrow left column, stays bold & modern, and
     no longer clips. NOTE: scoped under .ed-hero__stage so it OUTRANKS the base
     `.ed-hero__mark { font-size: var(--ed-disp-xl) }` that follows it in source. */
  .ed-hero__stage .ed-hero__mark { font-size: clamp(1.95rem, 2.6vw, 2.7rem); }
}

/* TYPE column */
.ed-hero__type {
  position: relative;
  min-width: 0;
}
.ed-hero__eyebrow {
  font-family: var(--ed-mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ed-grey);
  margin-bottom: clamp(24px, 3vw, 40px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* the LARGE Fraunces editorial statement */
.ed-hero__mark {
  font-family: var(--ed-serif);
  font-weight: 680;
  font-size: var(--ed-disp-xl);
  line-height: 0.98;
  letter-spacing: -0.014em;
  margin: 0;
  color: var(--ink);
  text-transform: none;
  text-wrap: balance;
}
.ed-hero__line { display: block; }
/* "signature." — bold geometric Geist inside the upright Fraunces headline.
   The brand-mark accent: heavy sans against serif, upright, ink only. */
.ed-hero__mark em {
  font-family: var(--ed-sans);
  font-style: normal;
  font-weight: 750;
  font-size: 0.9em;           /* match optical cap-height of the serif line */
  letter-spacing: -0.02em;
  color: var(--ink);          /* bold word stays BLACK, not coloured */
}

/* calm Geist sub */
.ed-hero__lede {
  font-family: var(--ed-sans);
  font-weight: 300;
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.5;
  max-width: 48ch;
  color: var(--ink-2);
  margin-top: clamp(26px, 3vw, 38px);
  text-wrap: pretty;
}
.ed-hero__lede em { color: var(--ink); }

/* refined actions */
.ed-hero__ctas {
  display: flex;
  gap: clamp(14px, 1.6vw, 26px);
  align-items: center;
  flex-wrap: wrap;
  margin-top: clamp(34px, 3.6vw, 52px);
}

/* mono index line under the statement — N°08 · ED.26 etc. */
.ed-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(16px, 2vw, 30px);
  margin-top: clamp(40px, 4.5vw, 64px);
  padding-top: 22px;
  border-top: var(--ed-hair);
  font-family: var(--ed-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ed-grey);
}
.ed-hero__meta b { color: var(--ink); font-weight: 500; }

/* FILM block — elegantly framed, TRUE colour (no filters) */
.ed-hero__card {
  position: relative;
  display: grid;
  gap: 12px;
  align-self: start;
  min-width: 0;
}
.ed-hero__card-frame {
  position: relative;
  aspect-ratio: 16 / 9;          /* hero film — native 16:9, no crop */
  background: var(--paper-2);
  overflow: hidden;
  border: var(--ed-hair);
}
@media (min-width: 980px) {
  .ed-hero__card-frame { aspect-ratio: 16 / 9; }
}
.ed-hero__video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ed-hero__card-caption {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--ed-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ed-grey);
  padding: 0 1px;
}
.ed-hero__card-caption span:last-child { color: var(--ink); }

/* clean true-colour viewfinder lens (chrome only — NEVER recolours the film) */
.ed-hero__lens {
  position: absolute;
  width: clamp(120px, 15vw, 220px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  /* viewfinder is chrome ON the film — stays a light ring in BOTH themes
     (var(--paper) flips to near-black in dark and the ring + plus disappear
     against the bright hero video) */
  border: 1px solid var(--cream-ink);
  pointer-events: none;
  z-index: 4;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(10,10,10,0.16), 0 18px 48px rgba(10,10,10,0.22);
  transition: opacity 360ms var(--ed-ease);
  opacity: 0;
}
.ed-hero__lens.is-on { opacity: 1; }
.ed-hero__lens::after {
  content: '+';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--cream-ink);
  font-family: var(--ed-mono);
  font-size: 13px;
  text-shadow: 0 1px 4px rgba(10,10,10,0.4);
}

/* bottom corner mark */
.ed-hero__rail {
  margin-top: clamp(48px, 7vw, 110px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--ed-pad-x);
  border-top: var(--ed-hair);
}
.ed-hero__corner {
  font-family: var(--ed-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ed-grey);
}
.ed-hero__corner b { color: var(--ink); font-weight: 500; }

/* ---- hero reveal masks (uses .reveal hook from motion.js) ---- */
.ed-hero__line.reveal,
.ed-section__title.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-5) var(--ed-ease), transform var(--dur-5) var(--ed-ease);
  will-change: opacity, transform;
}
.ed-hero__line.reveal.is-in,
.ed-section__title.reveal.is-in { opacity: 1; transform: none; }
.ed-hero__caption.reveal { opacity: 0; transition: opacity var(--dur-5) var(--ed-ease) .3s; will-change: opacity; }
.ed-hero__caption.reveal.is-in { opacity: 1; }
/* card reveals OPACITY-ONLY so it never fights the transform-only parallax home.js writes */
.ed-hero__card.reveal { opacity: 0; transition: opacity var(--dur-6) var(--ed-ease) .2s; will-change: opacity; }
.ed-hero__card.reveal.is-in { opacity: 1; }

/* ============================================================
   FULL-BLEED VIDEO HERO  (MUG-style — film covers the viewport,
   statement + actions overlaid. TRUE colour: legibility comes from
   text-shadow on the TEXT, never a scrim/overlay on the film.)
============================================================ */
.ed-hero--full {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 540px;
  margin: 0; padding: 0;
  overflow: hidden;
  display: flex; align-items: flex-end;
  background: #000;
}
.ed-hero__media { position: absolute; inset: 0; z-index: 0; background: #000; }
.ed-hero--full .ed-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ed-hero__overlay {
  position: relative; z-index: 2;
  width: 100%; max-width: 1600px;
  padding: 0 var(--ed-pad-x) clamp(24px, 4vh, 44px);
  color: #fff;
}
/* small bold studio line, bottom-left — sits to the RIGHT of the corner logo */
.ed-hero__tagline {
  margin: 0;
  padding-left: clamp(46px, 5vw, 76px);
  font-family: var(--ed-sans);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 22px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 22px rgba(0,0,0,0.55);
  max-width: 30ch;
}
.ed-hero--full .ed-hero__mark {
  color: #fff;
  font-size: clamp(2.7rem, 6.6vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.022em;
  max-width: 16ch;
  text-shadow: 0 2px 44px rgba(0,0,0,0.45), 0 1px 8px rgba(0,0,0,0.3);
}
.ed-hero--full .ed-hero__mark em { color: #fff; font-weight: 800; }
.ed-hero--full .ed-hero__caption { max-width: none; }
.ed-hero--full .ed-hero__lede {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 20px rgba(0,0,0,0.5);
  margin-top: clamp(16px, 2.2vh, 26px);
  max-width: 44ch;
}
.ed-hero--full .ed-hero__lede em { color: #fff; }
.ed-hero--full .ed-hero__meta {
  margin-top: clamp(20px, 2.8vh, 32px);
  border-top: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.72);
}
.ed-hero--full .ed-hero__meta b { color: #fff; }
/* CTAs over film — fixed light treatment so they read on any frame */
.ed-hero--full .ed-cta--primary { background: #fff; color: #0A0A0A; border-color: #fff; }
.ed-hero--full .ed-cta--primary:hover { background: rgba(255,255,255,0.88); }
.ed-hero--full .ed-cta--ghost { color: #fff; border-color: rgba(255,255,255,0.55); }
.ed-hero--full .ed-cta--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.12); }

/* while the full hero fills the viewport, the fixed chrome floats transparent
   + white over the film (MUG-style). home.js toggles body.is-hero-cover via an
   IntersectionObserver on the hero. Reverts to the normal mono chrome on scroll. */
body.is-hero-cover .hd,
body.is-hero-cover .ed-nav-rail { background: transparent; }
body.is-hero-cover .ed-nav-rail {
  border-top-color: rgba(255,255,255,0.20);
  border-bottom-color: rgba(255,255,255,0.20);
}
body.is-hero-cover .logo { background: transparent; }
body.is-hero-cover .logo::before { background: transparent; }
body.is-hero-cover .logo img { filter: brightness(0) invert(1); mix-blend-mode: normal; } /* pure white over the dark hero */
body.is-hero-cover .hd__nav a,
body.is-hero-cover .hd__lang-btn,
body.is-hero-cover .hd__lang span,
body.is-hero-cover .hd__theme,
body.is-hero-cover .hd__nav-line,
body.is-hero-cover .ed-nav-item,
body.is-hero-cover .ed-nav-item__num,
body.is-hero-cover .ed-nav-rail__zoom { color: #fff; }
body.is-hero-cover .ed-nav-item { border-right-color: rgba(255,255,255,0.20); }
body.is-hero-cover .ed-nav-item__bar { background: rgba(255,255,255,0.55); }
body.is-hero-cover .hd__theme svg { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .ed-hero--full .ed-hero__video { /* still plays muted; poster handled in markup */ }
}

/* line-mask CLIP reveal wrapper stays fully shown (inner span rises) */
.ed-section__title.reveal--clip {
  opacity: 1; transform: none; transition: none; will-change: auto;
}


/* ============================================================
   SECTION 02 — DISCIPLINES (the five) — editorial card grid
   class hooks (.ed-cap*, data-grad) preserved for home.js fill
   ============================================================ */
.ed-cap {
  border-top: var(--ed-hair);
  padding-bottom: clamp(40px, 5vw, 96px);
}
.ed-cap__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: var(--ed-hair);
  border-bottom: var(--ed-hair);
  margin: 0 var(--ed-pad-x);
}
@media (min-width: 1024px) { .ed-cap__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ed-cap__card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 48px);
  border-right: var(--ed-hair);
  border-bottom: var(--ed-hair);
  background: var(--paper);
  min-height: clamp(300px, 32vw, 420px);
  cursor: pointer;
  overflow: hidden;
  transition: background-color .5s var(--ed-ease), color .5s var(--ed-ease),
              opacity var(--dur-5) var(--ease-cinema), transform var(--dur-5) var(--ease-cinema);
}
.ed-cap__card:nth-child(3n) { border-right: 0; }
@media (max-width: 1023px) {
  .ed-cap__card { border-right: var(--ed-hair); }
  .ed-cap__card:nth-child(3n) { border-right: var(--ed-hair); }
  .ed-cap__card:nth-child(2n) { border-right: 0; }
}
@media (max-width: 600px) {
  /* phones: one discipline per row. Two columns at this width crush each card
     to ~120px of content, which clips the serif display titles (Production →
     "Productior") and stacks the chips into a tall, oversized block. Full-width
     cards let every title render in full and sit the section centred between
     equal --ed-pad-x margins. */
  .ed-cap__grid { grid-template-columns: 1fr; }
  .ed-cap__card { padding: clamp(22px, 6vw, 30px); min-height: 0; }
  /* single column → no vertical rules; the per-card border-bottom alone divides
     them. Override the 2/3n border-right rules from the ≤1023px block too. */
  .ed-cap__card,
  .ed-cap__card:nth-child(2n),
  .ed-cap__card:nth-child(3n) { border-right: 0; }
  /* the desktop top gap above each title is oversized once cards are full-width */
  .ed-cap__num { margin-bottom: clamp(18px, 5vw, 28px); }
}

/* corner index "+" */
.ed-cap__card::before {
  content: '+';
  position: absolute; top: 16px; right: 18px;
  color: var(--ed-faint);
  font-family: var(--ed-mono);
  font-size: 15px;
  transition: transform .4s var(--ed-ease), color .4s var(--ed-ease);
}
.ed-cap__card:hover::before { transform: rotate(45deg); }

/* hover — invert to black ground (monochrome) */
.ed-cap__card:hover { background: var(--ink); color: var(--paper); }
.ed-cap__card:hover::before { color: var(--paper); }
.ed-cap__card:hover .ed-cap__num,
.ed-cap__card:hover .ed-cap__more { color: var(--paper); }
/* underline tracks the inverted text colour (--paper) so it stays visible on
   the --ink ground in BOTH themes (dark: ground=white, so a near-white literal
   would vanish) */
.ed-cap__card:hover .ed-cap__more { border-bottom-color: color-mix(in oklab, var(--paper) 50%, transparent); }
.ed-cap__card:hover .ed-cap__chips li { border-color: var(--rule-on-ink); color: var(--paper); }

/* click-to-fill (home.js .is-filled) — now a clean black invert, no gradient */
.ed-cap__card.is-filled { background: var(--ink); color: var(--paper); }
.ed-cap__card.is-filled::before { color: var(--paper); transform: rotate(45deg); }
.ed-cap__card.is-filled .ed-cap__num,
.ed-cap__card.is-filled .ed-cap__more { color: var(--paper); }
.ed-cap__card.is-filled .ed-cap__more { border-bottom-color: color-mix(in oklab, var(--paper) 50%, transparent); }
.ed-cap__card.is-filled .ed-cap__chips li { border-color: var(--rule-on-ink); color: var(--paper); }

.ed-cap__num {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ed-grey);
  margin-bottom: clamp(36px, 5vw, 72px);
}
.ed-cap__title {
  font-family: var(--ed-serif);
  font-weight: 340;
  font-size: var(--ed-disp-md);
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-bottom: 18px;
  color: inherit;
}
.ed-cap__copy {
  font-family: var(--ed-sans);
  font-weight: 300;
  font-size: clamp(14px, 0.95vw, 15.5px);
  line-height: 1.6;
  color: inherit;
  opacity: 0.74;
  margin-bottom: 22px;
  flex: 1;
  text-wrap: pretty;
}
.ed-cap__chips {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 22px;
}
.ed-cap__chips li {
  font-family: var(--ed-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 9px;
  border: var(--ed-hair);
  color: var(--ed-grey);
  transition: border-color .4s var(--ed-ease), color .4s var(--ed-ease);
}
.ed-cap__more {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--ed-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: color .4s var(--ed-ease);
}
.ed-cap__more .ed-plus { color: inherit; }

/* feature card (AI) — born inverted */
.ed-cap__card--feature { background: var(--ink); color: var(--paper); }
.ed-cap__card--feature::before { color: var(--paper); }
.ed-cap__card--feature .ed-cap__num { color: var(--ed-faint); }
.ed-cap__card--feature .ed-cap__chips li { border-color: var(--rule-on-ink); color: var(--paper); }
.ed-cap__card--feature .ed-cap__more { color: var(--paper); border-bottom-color: color-mix(in oklab, var(--paper) 50%, transparent); }
.ed-cap__card--feature:hover { background: var(--paper); color: var(--ink); }
.ed-cap__card--feature:hover::before { color: var(--ink); }
.ed-cap__card--feature:hover .ed-cap__num,
.ed-cap__card--feature:hover .ed-cap__more { color: var(--ink); }
.ed-cap__card--feature:hover .ed-cap__chips li { border-color: var(--rule); color: var(--ink); }

/* CTA card */
.ed-cap__card--cta {
  background: var(--paper-2);
  color: var(--ink);
  display: grid; align-content: space-between;
  cursor: default;
}
.ed-cap__card--cta::before { content: ''; }
.ed-cap__card--cta:hover { background: var(--paper-2); color: var(--ink); }
.ed-cap__cta-lede {
  font-family: var(--ed-serif);
  font-weight: 340;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-transform: none;
  text-wrap: pretty;
  color: var(--ink);
}
.ed-cap__cta-link {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: end;
  font-family: var(--ed-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  width: fit-content;
  transition: color .35s var(--ed-ease), border-color .35s var(--ed-ease), gap .35s var(--ed-ease);
}
.ed-cap__cta-link:hover { gap: 16px; }


/* ============================================================
   SECTION 02b — FEATURED FILM  (true colour, calm frame)
   ============================================================ */
.ed-feature {
  display: flex;
  justify-content: center;
  padding: clamp(72px, 9vw, 150px) var(--ed-pad-x);
  background: var(--paper);
  border-top: var(--ed-hair);
}
.ed-feature__frame {
  position: relative;
  width: 100%;
  max-width: 1500px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: var(--ed-hair);
  background: var(--paper-2);
}
.ed-feature__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* true-colour viewfinder — paper-toned chrome ring, NO recolour filter */
.ed-feature__lens {
  position: absolute;
  width: clamp(120px, 14vw, 200px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  /* viewfinder chrome ON the film — light ring in BOTH themes */
  border: 1px solid var(--cream-ink);
  pointer-events: none;
  z-index: 3;
  top: 50%;
  left: 38%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(10,10,10,0.18), 0 18px 48px rgba(10,10,10,0.28);
  transition: opacity 360ms var(--ed-ease);
  opacity: 0;
}
.ed-feature__lens.is-on { opacity: 1; }
.ed-feature__lens::after {
  content: '+';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--cream-ink);
  font-family: var(--ed-mono);
  font-size: 13px;
  text-shadow: 0 1px 4px rgba(10,10,10,0.45);
}
.ed-feature__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 16px clamp(16px, 2vw, 32px);
  /* gentle scrim ONLY over the caption strip (a UI chrome band), not a media filter */
  background: linear-gradient(to top, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 100%);
  font-family: var(--ed-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  /* over a permanently-dark scrim on the film — must stay light in BOTH themes
     (var(--paper) flips to near-black in dark and vanishes here) */
  color: var(--cream-ink);
  z-index: 2;
  pointer-events: none;
}
.ed-feature__tag { display: inline-flex; align-items: center; gap: 8px; }
.ed-feature__tag .ed-plus { color: var(--cream-ink); }
.ed-feature__credit { color: color-mix(in oklab, var(--cream-ink) 78%, transparent); }
@media (max-width: 700px) {
  .ed-feature__frame { aspect-ratio: 4 / 5; }
  .ed-feature__caption { font-size: 9.5px; padding: 12px 14px; gap: 8px; letter-spacing: 0.12em; }
  .ed-feature__credit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}


/* ============================================================
   SECTION 03 — SELECTED WORK  (true-colour gallery)
   .work + data-work preserved for the script.js lightbox.
   ============================================================ */
.ed-works {
  padding-bottom: clamp(40px, 5vw, 96px);
  border-top: var(--ed-hair);
  content-visibility: auto;
  contain-intrinsic-size: auto 1800px;
}
.ed-works__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 26px);
  padding: 0 var(--ed-pad-x) clamp(28px, 4vw, 56px);
  max-width: 1480px;
  margin: 0 auto;
}
@media (min-width: 900px) { .ed-works__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Synced 'recent works' grid — mirrors the works-page order, up to 5 across */
.ed-works__grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .ed-works__grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px)  { .ed-works__grid--five { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ed-works__grid--five { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.ed-work {
  position: relative;
  cursor: pointer;
  background: var(--paper-2);
  overflow: hidden;
  isolation: isolate;
  display: block;
  text-decoration: none;
  color: inherit;
}
.ed-work__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.ed-work__media img,
.ed-work__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;            /* preserves aspect — no squish, true colour */
  object-position: center;
  display: block;
  transition: transform 1.1s var(--ed-ease), opacity .8s var(--ed-ease);
}
.ed-work__media--alt { opacity: 0; }
.ed-work:hover .ed-work__media img:first-child { transform: scale(1.04); opacity: 0; }
.ed-work:hover .ed-work__media--alt { opacity: 1; transform: scale(1.04); }
.ed-work--video:hover .ed-work__media video { transform: scale(1.03); }

/* meta line — paper strip BELOW media (text/UI surface, mask allowed) */
.ed-work__meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 14px 16px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ed-mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  border-top: var(--ed-hair);
  overflow: hidden;
}
.ed-work__year   { color: var(--ed-grey); }
.ed-work__client { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.06em; }
.ed-work__type   { color: var(--ed-faint); }
@media (prefers-reduced-motion: no-preference) {
  .ed-work__year, .ed-work__client, .ed-work__type {
    transition: transform var(--dur-2) var(--ease-cinema);
  }
  .ed-work:hover .ed-work__year,   .ed-work:focus-within .ed-work__year   { transform: translateY(-2px); transition-delay: 0s; }
  .ed-work:hover .ed-work__client, .ed-work:focus-within .ed-work__client { transform: translateY(-2px); transition-delay: .04s; }
  .ed-work:hover .ed-work__type,   .ed-work:focus-within .ed-work__type   { transform: translateY(-2px); transition-delay: .08s; }
}

/* see-more rail */
.ed-works__cta-rail {
  display: flex; justify-content: center;
  padding: 0 var(--ed-pad-x);
  margin-top: clamp(16px, 2vw, 28px);
}
.ed-works__cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 17px 30px;
  border: 1px solid var(--ink);
  font-family: var(--ed-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  transition: background-color .4s var(--ed-ease), color .4s var(--ed-ease);
}
.ed-works__cta .ed-plus { color: inherit; }
.ed-works__cta:hover { background: var(--ink); color: var(--paper); }
.ed-works__cta:hover .ed-cta__arrow { transform: translate(3px, -3px); }
.ed-works__cta-meta {
  color: var(--ed-grey);
  border-left: var(--ed-hair);
  padding-left: 14px;
}
.ed-works__cta:hover .ed-works__cta-meta { color: color-mix(in oklab, var(--paper) 70%, transparent); border-left-color: color-mix(in oklab, var(--paper) 30%, transparent); }


/* ============================================================
   SECTION 04 — SYSTEM  (moving column grid — monochrome highlight)
   Drives off --active-col (1..6) on .ed-cols__frame (home.js).
   ============================================================ */
.ed-cols {
  position: relative;
  height: 380vh;                /* scroll runway for column scrub */
  background: var(--paper);
  border-top: var(--ed-hair);
}
.ed-cols__sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: grid; place-items: center;
  padding: clamp(24px, 4vw, 72px) clamp(20px, 4vw, 80px);
  overflow: hidden;
}
.ed-cols__frame {
  --active-col: 1;
  --col-count: 6;
  position: relative;
  width: 100%;
  max-width: 1280px;
  height: min(84vh, 880px);
  background: var(--paper);
  border: var(--ed-hair);
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.ed-cols__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(12px, 2vw, 32px);
  padding: 16px clamp(16px, 1.8vw, 26px);
  border-bottom: var(--ed-hair);
  font-family: var(--ed-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ed-grey);
}
.ed-cols__brand { color: var(--ink); display: inline-flex; align-items: center; gap: 7px; }
.ed-cols__brand .ed-plus { color: var(--ed-grey); }
.ed-cols__caption { text-align: center; color: var(--ed-faint); }
.ed-cols__progress-text { display: inline-flex; gap: 5px; align-items: baseline; color: var(--ed-grey); }
.ed-cols__progress-text em { color: var(--ink); font-style: normal; font-weight: 500; }

.ed-cols__stage { position: relative; overflow: hidden; isolation: isolate; }

/* moving highlight — a flat BLACK band that slides between columns (no gradient) */
.ed-cols__highlight {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: calc(100% / var(--col-count));
  background: var(--ink);
  transform: translate3d(calc((var(--active-col) - 1) * 100%), 0, 0);
  transition: transform var(--dur-1) linear;
  z-index: 1;
  will-change: transform;
}

.ed-cols__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--col-count), minmax(0, 1fr));
  height: 100%;
  z-index: 2;
}
.ed-col {
  border-right: var(--ed-hair);
  padding: 18px clamp(12px, 1.1vw, 18px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(10px, 0.9vw, 16px);
  position: relative;
  transition: color 0.5s var(--ed-ease);
}
.ed-col:last-child { border-right: 0; }
.ed-col__label {
  font-family: var(--ed-mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ed-grey);
  transition: color 0.5s var(--ed-ease);
}
.ed-col__body {
  font-family: var(--ed-serif);
  font-weight: 680;
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--ink);
  align-self: end;
  text-wrap: pretty;
  transition: color 0.5s var(--ed-ease), opacity 0.5s var(--ed-ease);
  opacity: 0.82;
}
.ed-col__body em { font-family: var(--ed-sans); font-style: normal; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.ed-col__stat {
  display: block;
  font-family: var(--ed-serif);
  font-weight: 680;
  font-size: clamp(2.2rem, 3.6vw, 3.6rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}
.ed-col__media {
  align-self: end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: var(--ed-hair);
  background: var(--paper-2);
}
.ed-col__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.8s var(--ed-ease);
}
.ed-col__cta {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: end;
  padding: 13px 16px;
  font-family: var(--ed-mono);
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  width: fit-content;
  transition: background-color 0.35s var(--ed-ease), color 0.35s var(--ed-ease);
}
.ed-col__cta .ed-plus { color: inherit; }
.ed-col__cta:hover { background: var(--ink); color: var(--paper); }

/* active column — text inverts to paper over the black highlight */
.ed-col.is-active { color: var(--paper); }
.ed-col.is-active .ed-col__label { color: color-mix(in oklab, var(--paper) 70%, transparent); }
.ed-col.is-active .ed-col__body { color: var(--paper); opacity: 1; }
.ed-col.is-active .ed-col__body em { color: var(--paper); }
.ed-col.is-active .ed-col__stat { color: var(--paper); }
.ed-col.is-active .ed-col__media { border-color: var(--rule-on-ink); }
.ed-col.is-active .ed-col__media img { transform: scale(1.02); }
.ed-col.is-active .ed-col__cta { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.ed-cols__foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(16px, 1.8vw, 26px);
  border-top: var(--ed-hair);
  font-family: var(--ed-mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ed-faint);
}
.ed-cols__foot-note { text-align: right; color: var(--ed-faint); }
.ed-cols__nums {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.ed-cols__num {
  position: relative;
  padding: 4px 0;
  color: var(--ed-faint);
  text-align: center;
  transition: color 0.4s var(--ed-ease);
}
.ed-cols__num.is-active { color: var(--ink); }
.ed-cols__num.is-active::after {
  content: '';
  position: absolute; left: 22%; right: 22%; bottom: -3px;
  height: 1px; background: var(--ink);
}

/* mobile / tablet — vertical stack version */
@media (max-width: 900px) {
  .ed-cols { height: 540vh; }
  .ed-cols__sticky { padding: 16px; }
  .ed-cols__frame { height: min(92vh, 720px); }
  .ed-cols__head { font-size: 10px; gap: 10px; padding: 12px 14px; }
  .ed-cols__caption { display: none; }
  .ed-cols__grid { grid-template-columns: 1fr; grid-template-rows: repeat(6, minmax(0,1fr)); }
  .ed-col { border-right: 0; border-bottom: var(--ed-hair); padding: 12px 16px; }
  .ed-col:last-child { border-bottom: 0; }
  .ed-col__media { aspect-ratio: 16 / 9; max-height: 84px; }
  .ed-col__body { font-size: 15px; }
  .ed-col__stat { font-size: 1.9rem; }
  .ed-cols__highlight {
    width: 100%;
    height: calc(100% / var(--col-count));
    transform: translate3d(0, calc((var(--active-col) - 1) * 100%), 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ed-cols__highlight { transition: none !important; }
}


/* ============================================================
   SECTION 05 — PROOF / NUMBERS  (big Fraunces numerals, count-up)
   ============================================================ */
.ed-proof {
  padding-bottom: clamp(40px, 5vw, 96px);
  border-top: var(--ed-hair);
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}
.ed-proof__strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--ed-hair);
  border-bottom: var(--ed-hair);
  margin: 0 var(--ed-pad-x);
}
@media (min-width: 900px) { .ed-proof__strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ed-proof__big {
  padding: clamp(36px, 4vw, 64px) clamp(20px, 2vw, 30px);
  border-right: var(--ed-hair);
  display: grid; gap: 14px; align-content: end;
  min-height: clamp(180px, 20vw, 280px);
}
.ed-proof__big:last-child { border-right: 0; }
@media (max-width: 899px) {
  .ed-proof__big:nth-child(2n) { border-right: 0; }
  .ed-proof__big:not(:nth-last-child(-n+2)) { border-bottom: var(--ed-hair); }
}
.ed-proof__num {
  font-family: var(--ed-serif);
  font-weight: 320;
  font-size: clamp(4rem, 9vw, 9.5rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex; align-items: flex-start;
}
.ed-proof__sym {
  font-size: 0.42em;
  font-weight: 360;
  margin-left: 0.06em;
  margin-top: 0.12em;
  color: var(--ed-grey);
}
.ed-proof__lbl {
  font-family: var(--ed-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ed-grey);
  max-width: 22ch;
}

.ed-proof__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 var(--ed-pad-x);
  border-bottom: var(--ed-hair);
}
@media (min-width: 900px) { .ed-proof__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ed-proof__card {
  padding: clamp(28px, 3vw, 44px);
  border-right: var(--ed-hair);
  display: grid; gap: 20px; align-content: start;
}
.ed-proof__card:last-child { border-right: 0; }
@media (max-width: 899px) {
  .ed-proof__card { border-right: 0; border-bottom: var(--ed-hair); }
  .ed-proof__card:last-child { border-bottom: 0; }
}
.ed-proof__card-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ed-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  border-bottom: var(--ed-hair);
  padding-bottom: 14px;
}
.ed-proof__card-head .ed-plus { color: var(--ed-grey); }
.ed-proof__client { color: var(--ink); }
.ed-proof__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ed-proof__row > div { display: grid; gap: 7px; }
.ed-proof__pop {
  font-family: var(--ed-serif);
  font-weight: 680;
  font-size: clamp(1.9rem, 2.8vw, 2.8rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.ed-proof__row-lbl {
  font-family: var(--ed-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ed-grey);
}
.ed-proof__card-foot {
  font-family: var(--ed-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ed-faint);
  margin-top: auto;
  border-top: var(--ed-hair);
  padding-top: 14px;
}

.ed-proof__roster {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 1.6vw, 28px);
  align-items: center;
  margin: 0 var(--ed-pad-x);
  padding: 22px 0;
  border-bottom: var(--ed-hair);
  overflow: hidden;
}
.ed-proof__roster-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ed-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ed-grey);
}
.ed-proof__roster-label .ed-plus { color: var(--ed-grey); }
.ed-proof__roster-marquee {
  font-family: var(--ed-serif);
  font-weight: 340;
  font-size: clamp(16px, 1.5vw, 24px);
  letter-spacing: -0.005em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ============================================================
   SECTION 06 — PROCESS / METHOD  (production map poster)
   ============================================================ */
.ed-process {
  padding-bottom: clamp(40px, 5vw, 96px);
  border-top: var(--ed-hair);
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}
.ed-process__map {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: var(--ed-hair);
  border-bottom: var(--ed-hair);
  margin: 0 var(--ed-pad-x);
}
@media (max-width: 1100px) { .ed-process__map { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .ed-process__map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ed-process__step {
  position: relative;
  padding: clamp(26px, 2.8vw, 44px) clamp(18px, 1.8vw, 28px);
  border-right: var(--ed-hair);
  display: grid; align-content: start; gap: 14px;
  min-height: clamp(230px, 26vw, 320px);
  transition: background-color .4s var(--ed-ease),
              opacity var(--dur-5) var(--ease-cinema), transform var(--dur-5) var(--ease-cinema);
}
.ed-process__step:last-child { border-right: 0; }
@media (max-width: 1100px) {
  .ed-process__step:nth-child(3n) { border-right: 0; }
  .ed-process__step:not(:nth-last-child(-n+3)) { border-bottom: var(--ed-hair); }
}
@media (max-width: 600px) {
  .ed-process__step:nth-child(2n) { border-right: 0; }
  .ed-process__step:nth-child(3n) { border-right: var(--ed-hair); }
  .ed-process__step:not(:nth-last-child(-n+2)) { border-bottom: var(--ed-hair); }
}
.ed-process__step:hover { background: var(--paper-2); }
.ed-process__num {
  font-family: var(--ed-mono);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ed-grey);
}
.ed-process__plus {
  position: absolute; top: 16px; right: 18px;
  font-size: 15px;
  color: var(--ed-faint);
  transition: transform .4s var(--ed-ease);
}
.ed-process__step:hover .ed-process__plus { transform: rotate(45deg); }
.ed-process__title {
  font-family: var(--ed-serif);
  font-weight: 340;
  font-size: clamp(1.7rem, 2.4vw, 2.6rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}
.ed-process__copy {
  font-family: var(--ed-sans);
  font-weight: 300;
  font-size: clamp(13px, 0.9vw, 14.5px);
  line-height: 1.55;
  color: var(--ed-grey);
  text-wrap: pretty;
}


/* ============================================================
   SECTION 07 — CONTACT / INQUIRY
   ============================================================ */
.ed-contact {
  padding-bottom: clamp(40px, 5vw, 96px);
  border-top: var(--ed-hair);
  background: var(--paper);
  content-visibility: auto;
  contain-intrinsic-size: auto 1400px;
}
.ed-contact__title {
  font-family: var(--ed-serif);
  font-weight: 320;
  font-size: clamp(3.6rem, 11vw, 13rem);
  display: block;
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-transform: none;
  color: var(--ink);
}
/* "meet." — bold Geist accent in the oversized Fraunces contact title */
.ed-contact__line1 em { font-family: var(--ed-sans); font-style: normal; font-weight: 760; font-size: 0.86em; letter-spacing: -0.02em; color: var(--ink); }
.ed-contact__line2 {
  display: inline-block;
  color: var(--ed-grey);
  font-weight: 300;
  margin-left: 0.12em;
  transform: translateY(-0.06em);
}

.ed-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 72px);
  padding: clamp(40px, 5vw, 80px) var(--ed-pad-x) 0;
  border-top: var(--ed-hair);
}
@media (min-width: 1024px) {
  .ed-contact__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: clamp(44px, 5vw, 100px);
    align-items: start;
  }
}
.ed-contact__form-col { display: block; min-width: 0; }
.ed-contact__lede {
  font-family: var(--ed-serif);
  font-weight: 340;
  font-size: clamp(19px, 1.7vw, 26px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 40ch;
  margin-bottom: clamp(32px, 3.4vw, 52px);
  text-wrap: pretty;
}
.ed-contact__lede em { font-family: var(--ed-sans); font-style: normal; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }

.ed-form { display: grid; gap: 22px; }
.ed-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 600px) { .ed-form__row { grid-template-columns: 1fr; } }
.ed-form__field { display: grid; gap: 9px; }
.ed-form__lbl {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ed-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ed-grey);
}
.ed-form__lbl .ed-plus { color: var(--ed-grey); }
.ed-form__input {
  font-family: var(--ed-sans);
  font-weight: 300;
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 13px 2px;
  outline: none;
  transition: border-color .25s var(--ed-ease);
  width: 100%;
}
.ed-form__input::placeholder { color: var(--ed-faint); }
.ed-form__input:focus { border-bottom-color: var(--ed-grey); }
.ed-form__input--area { resize: vertical; min-height: 120px; }
.ed-form__input--select {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.ed-cta--submit { margin-top: 10px; align-self: flex-start; }

/* right column — contact info */
.ed-contact__side {
  display: grid; gap: clamp(24px, 2.6vw, 40px);
  align-content: start; align-self: start;
}
.ed-contact__cols {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 2vw, 36px) clamp(16px, 1.4vw, 26px);
  padding: clamp(24px, 2.6vw, 36px) clamp(20px, 2vw, 30px);
  border: var(--ed-hair);
  background: var(--paper);
}
/* When the contact grid collapses to one column (≤1023px) the cols box spans
   full width — lay the four items out as a filled row instead of a sparse 2×2;
   drop back to 2-up on phones. */
@media (max-width: 1023px) { .ed-contact__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ed-contact__cols { grid-template-columns: 1fr 1fr; } }
.ed-contact__cols li { display: grid; gap: 8px; }
.ed-contact__col-lbl {
  font-family: var(--ed-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ed-grey);
  display: inline-flex; align-items: center; gap: 7px;
}
.ed-contact__col-lbl .ed-plus { color: var(--ed-grey); }
.ed-contact__col-val {
  font-family: var(--ed-sans);
  font-weight: 400;
  font-size: clamp(14px, 1vw, 16px);
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.45;
  text-decoration: none;
}
a.ed-contact__col-val { transition: color .25s var(--ed-ease); text-underline-offset: 3px; }
a.ed-contact__col-val:hover { color: var(--ed-grey); text-decoration: underline; }

/* footer rail */
.ed-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(14px, 1.6vw, 28px);
  padding: 20px var(--ed-pad-x);
  margin-top: clamp(48px, 5vw, 88px);
  border-top: var(--ed-hair);
  font-family: var(--ed-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ed-grey);
}
.ed-foot__cell { white-space: nowrap; }
.ed-foot__cell--brand { color: var(--ink); font-weight: 500; }
.ed-foot__cell--corner {
  margin-left: auto;
  color: var(--ink);
  font-weight: 500;
  border-left: var(--ed-hair);
  padding-left: clamp(14px, 1.6vw, 28px);
}
.ed-foot__sep { font-size: 12px; color: var(--ed-faint); }
@media (max-width: 600px) {
  .ed-foot__cell--corner { margin-left: 0; border-left: 0; padding-left: 0; }
}


/* ============================================================
   RESPONSIVE — tablet & phone
   ============================================================ */
@media (max-width: 979px) {
  .ed-hero__stage { grid-template-columns: 1fr; align-items: start; }
  .ed-hero__card  { max-width: 100%; order: -1; }   /* film leads on stacked layouts */
  .ed-hero__card-frame { aspect-ratio: 16 / 9; }
}
@media (max-width: 720px) {
  /* The brand mark is a TALL stacked logo (~2.45:1). At the shared 56px mobile
     width it renders ~137px tall and its base (~155px) crashed down through the
     fixed nav rail INTO the hero index line (which starts ~110px). Dock it
     more compactly on the home so the mark clears the rail, and push the hero
     index down so it never sits under the logo. Scoped to the editorial home
     so other pages' chrome is untouched. */
  body[data-page="home-editorial"] .logo { width: 42px !important; }
  body[data-page="home-editorial"] .ed-hero { padding-top: 128px; }
  .ed-hero__index { font-size: 9.5px; gap: 10px; letter-spacing: 0.14em; }
  .ed-hero__rail  { flex-wrap: wrap; row-gap: 8px; }
  .ed-section__title { font-size: clamp(2.4rem, 11vw, 4rem); }
  .ed-contact__title { font-size: clamp(3rem, 16vw, 5.4rem); }
  .ed-cap__card { min-height: auto; padding: 26px 22px; }
  .ed-process__step { min-height: auto; }
  .ed-form__input { font-size: 16px; }      /* prevent iOS zoom */
  .ed-works__cta { padding: 16px 20px; font-size: 10.5px; gap: 10px; flex-wrap: wrap; }
  .ed-works__cta-meta { margin-left: 0; }
}
@media (max-width: 480px) {
  .ed-hero__mark { font-size: clamp(2.8rem, 15vw, 4.6rem); }
  .ed-hero__lens { width: 44vw; }
}


/* ============================================================
   THEME: dark variant — inherits inverted palette from styles.css.
   Tokens auto-flip; these keep specific monochrome pairs clean.
   ============================================================ */
/* Feature (AI) card in dark mode: the page ground is already black, so the
   "born inverted" black ground no longer reads as distinct. Re-theme it to a
   slightly raised panel (--paper-2) with NORMAL ink text — without resetting
   colour here the card inherited color:var(--paper) (= near-black in dark) and
   rendered near-black text on a near-black panel (invisible). */
[data-theme="dark"] .ed-cap__card--feature {
  background: var(--paper-2);
  color: var(--ink);
}
[data-theme="dark"] .ed-cap__card--feature::before { color: var(--ed-faint); }
[data-theme="dark"] .ed-cap__card--feature .ed-cap__num { color: var(--ed-grey); }
[data-theme="dark"] .ed-cap__card--feature .ed-cap__chips li { border-color: var(--rule); color: var(--ed-grey); }
[data-theme="dark"] .ed-cap__card--feature .ed-cap__more {
  color: var(--ink);
  border-bottom-color: color-mix(in oklab, var(--ink) 50%, transparent);
}
/* hover still inverts to a solid black panel with white text */
[data-theme="dark"] .ed-cap__card--feature:hover { background: var(--ink); color: var(--paper); }
[data-theme="dark"] .ed-cap__card--feature:hover::before { color: var(--paper); }
[data-theme="dark"] .ed-cap__card--feature:hover .ed-cap__num,
[data-theme="dark"] .ed-cap__card--feature:hover .ed-cap__more { color: var(--paper); }
[data-theme="dark"] .ed-cap__card--feature:hover .ed-cap__more { border-bottom-color: color-mix(in oklab, var(--paper) 50%, transparent); }
[data-theme="dark"] .ed-cap__card--feature:hover .ed-cap__chips li { border-color: var(--rule-on-ink); color: var(--paper); }
[data-theme="dark"] .ed-cap__card:hover { background: var(--ink); color: var(--paper); }
[data-theme="dark"] .ed-cols__highlight { background: var(--ink); }

/* reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .ed-hero__lens,
  .ed-feature__lens { transition: none !important; }
}