/* ==========================================================================
   CLAIRE BIRCHFIELD - Author brand
   Design system. Editorial / luxury-magazine.

   Aesthetic family: editorial magazine (Section 2.B of the taste system).
   No component library is used or implied. Native CSS + CSS Grid only,
   so every value below maps cleanly onto Squarespace Custom CSS.

   Palette is sampled directly from the book cover artwork:
     cover night ground   #25211F  ->  --night
     cover neon rose      #EA4E86  ->  --neon
     cover warm bokeh     #B43B2D  (informs the warm grade on photography)
   Neutrals (cream / ivory / black / taupe) are the client's stated brief.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. RESET */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

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

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--paper); }

/* --------------------------------------------------------------- 2. TOKENS */

:root {
  /* Surfaces and ink (light, the default) */
  --paper:      #F2EEE7;
  --paper-2:    #FAF8F4;
  --ink:        #1C1A19;
  --ink-2:      #57514B;
  --ink-3:      #6F675E;   /* 4.6:1 on --paper, safe for micro type */
  --rule:       #DBD4C8;
  --rule-soft:  #E6E0D6;
  --accent:     #B92A5E;   /* cover rose, deepened for AA on ivory */

  /* Fixed night surface. Identical in both colour schemes so the
     cinematic sections stay cinematic. */
  --night:      #131110;
  --night-2:    #1E1B19;
  --night-ink:  #F2EEE7;
  --night-ink-2:#B9B1A6;
  --night-ink-3:#948B80;
  --night-rule: rgba(242, 238, 231, 0.16);
  --neon:       #EA4E86;   /* exact cover value, dark grounds only */

  /* Type */
  --display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --prose:   "EB Garamond", "Iowan Old Style", Georgia, serif;
  --micro:   "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  /* Rhythm */
  --gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --shell:   1560px;
  --section: clamp(6rem, 13vw, 12.5rem);
  --section-tight: clamp(4rem, 8.5vw, 8rem);

  /* One radius system for the whole site: sharp. */
  --radius: 0px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.75s;

  /* Layers. The bar sits ABOVE the overlay so the close control stays
     reachable while the menu is open. */
  --z-menu: 110;
  --z-nav: 130;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="night"]) {
    --paper:     #131110;
    --paper-2:   #1B1917;
    --ink:       #F2EEE7;
    --ink-2:     #B9B1A6;
    --ink-3:     #948B80;
    --rule:      rgba(242, 238, 231, 0.16);
    --rule-soft: rgba(242, 238, 231, 0.09);
    --accent:    #EA4E86;
    --night:     #0B0A09;
    --night-2:   #161413;
    color-scheme: dark;
  }
}

/* The audiobook page is locked to night in both colour schemes. */
:root[data-theme="night"] {
  --paper:     #131110;
  --paper-2:   #1B1917;
  --ink:       #F2EEE7;
  --ink-2:     #B9B1A6;
  --ink-3:     #948B80;
  --rule:      rgba(242, 238, 231, 0.16);
  --rule-soft: rgba(242, 238, 231, 0.09);
  --accent:    #EA4E86;
  --night:     #0B0A09;
  --night-2:   #161413;
  color-scheme: dark;
}

/* --------------------------------------------------------------- 3. BASICS */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--prose);
  font-size: clamp(1.0625rem, 0.98rem + 0.28vw, 1.1875rem);
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}

body.menu-open { overflow: hidden; }

/* Skip link */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 0.85rem 1.4rem;
  font-family: var(--micro);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ 4. TYPOGRAPHY */

.display-xl,
.display-l,
.display-m,
.display-s {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  color: var(--ink);
  text-wrap: balance;
}

.display-xl {
  font-size: clamp(2.75rem, 1.1rem + 6.6vw, 6.1rem);
  line-height: 1.08; /* descender clearance for the italic clause */
  letter-spacing: -0.018em;
}

.display-l {
  font-size: clamp(2.1rem, 1.15rem + 3.9vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.014em;
}

.display-m {
  font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.display-s {
  font-size: clamp(1.35rem, 1.15rem + 0.85vw, 1.85rem);
  line-height: 1.26;
  letter-spacing: -0.006em;
}

/* The signature device: a clause of the headline drops into the italic of
   the same family. It is the typographic form of the wry aside that runs
   through Claire's prose. Italic needs descender clearance, hence the
   line-height floor and the padding reserve on the wrapper. */
.aside {
  font-style: italic;
  font-weight: 400;
}
.display-xl, .display-l, .display-m, .display-s { padding-bottom: 0.08em; }

.lede {
  font-family: var(--prose);
  font-size: clamp(1.18rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 34ch;
}

.prose { max-width: 52ch; color: var(--ink-2); }
.prose p + p { margin-top: 1.25em; }
.prose strong { font-weight: 500; color: var(--ink); }

.prose-lead {
  font-size: clamp(1.15rem, 1.02rem + 0.55vw, 1.4rem);
  line-height: 1.6;
  color: var(--ink);
}

/* Micro type: nav, labels, buttons, captions, metadata. */
.micro {
  font-family: var(--micro);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-3);
}

.eyebrow {
  font-family: var(--micro);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 1.6rem;
}

.caption {
  font-family: var(--micro);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  line-height: 1.6;
}

/* ---------------------------------------------------------------- 5. LAYOUT */

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

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.5rem);
}

section { position: relative; }

.band { padding-block: var(--section); }
.band-tight { padding-block: var(--section-tight); }

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  width: 100%;
}

/* Fixed night surface, used for the single deliberate theme moment
   on a light page. */
.is-night {
  background: var(--night);
  color: var(--night-ink);
  --ink: var(--night-ink);
  --ink-2: var(--night-ink-2);
  --ink-3: var(--night-ink-3);
  --rule: var(--night-rule);
  --rule-soft: rgba(242, 238, 231, 0.08);
  --accent: var(--neon);
  --paper: var(--night);
  --paper-2: var(--night-2);
}

/* ----------------------------------------------------------- 6. LINKS / CTA */

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

/* Editorial link: hairline sweeps in from the left on hover. */
.link {
  position: relative;
  display: inline-block;
  font-family: var(--micro);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 0.5rem;
}
.link::after,
.link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
}
.link::before { background: var(--rule); }
.link::after {
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.link:hover::after,
.link:focus-visible::after { transform: scaleX(1); }

.link-inline {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  transition: border-color 0.35s var(--ease);
}
.link-inline:hover { border-bottom-color: var(--accent); }

/* Buttons. One shape system: sharp corners, 1px stroke or solid fill. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  white-space: nowrap;
  font-family: var(--micro);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1.15rem 2.1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease), transform 0.18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-solid {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-solid:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFF8F3;
}

.btn-line {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* Over photography the outline button needs its own contrast floor. */
.btn-onphoto {
  background: rgba(19, 17, 16, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #F7F4EF;
  border-color: rgba(247, 244, 239, 0.62);
}
.btn-onphoto:hover {
  background: #F7F4EF;
  color: #131110;
  border-color: #F7F4EF;
}

.btn .ico { font-size: 1.05em; line-height: 1; transition: transform 0.4s var(--ease); }
.btn:hover .ico { transform: translateX(4px); }

.btn[disabled],
.btn.is-soon {
  pointer-events: none;
  opacity: 0.45;
}

/* ------------------------------------------------------------- 7. NAVBAR */

.nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  height: 74px;
  display: flex;
  align-items: center;
  transition: background-color 0.5s var(--ease), border-color 0.5s var(--ease),
              height 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.wordmark {
  font-family: var(--display);
  font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.15rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
.wordmark span { display: block; }
.wordmark small {
  display: block;
  font-family: var(--micro);
  font-size: 0.55rem;
  letter-spacing: 0.42em;
  margin-top: 0.42rem;
  color: var(--ink-3);
  text-transform: uppercase;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 2.6vw, 2.9rem);
}
.nav__link {
  font-family: var(--micro);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding-block: 0.4rem;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); }

/* Transparent-over-hero state (home page top). */
.nav--over {
  --ink: #F7F4EF;
  --ink-3: rgba(247, 244, 239, 0.72);
  --accent: var(--neon);
  color: #F7F4EF;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--rule);
  height: 66px;
}
.nav--over.is-stuck {
  --ink: var(--ink-fallback, #1C1A19);
}
/* When the over-hero bar sticks, or the menu opens behind it, it drops back
   to the page palette so it stays legible against paper. */
.nav--over.is-stuck,
body.menu-open .nav--over {
  --ink: #1C1A19;
  --ink-3: #6F675E;
  --accent: #B92A5E;
  color: #1C1A19;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="night"]) .nav--over.is-stuck,
  :root:not([data-theme="night"]) body.menu-open .nav--over {
    --ink: #F2EEE7;
    --ink-3: #948B80;
    --accent: #EA4E86;
    color: #F2EEE7;
  }
}
:root[data-theme="night"] .nav--over.is-stuck,
:root[data-theme="night"] body.menu-open .nav--over {
  --ink: #F2EEE7;
  --ink-3: #948B80;
  --accent: #EA4E86;
  color: #F2EEE7;
}
/* No blur panel behind the bar while the overlay is up. */
body.menu-open .nav { background: transparent; border-bottom-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Mobile menu trigger */
.nav__toggle {
  display: none;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--micro);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.5rem 0;
}
.nav__toggle i {
  display: block;
  width: 22px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: background-color 0.3s var(--ease);
}
.nav__toggle i::before,
.nav__toggle i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform 0.45s var(--ease);
}
.nav__toggle i::before { top: -6px; }
.nav__toggle i::after { top: 6px; }
body.menu-open .nav__toggle i { background: transparent; }
body.menu-open .nav__toggle i::before { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav__toggle i::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile overlay menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease);
  visibility: hidden;
}
body.menu-open .menu {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}
.menu__list { display: flex; flex-direction: column; gap: 0.4rem; }
.menu__list a {
  font-family: var(--display);
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.24;
  color: var(--ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
body.menu-open .menu__list a { opacity: 1; transform: none; }
.menu__foot {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
}
@media (min-width: 901px) {
  .menu { display: none; }
}

/* -------------------------------------------------------------- 8. HERO */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--night);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
  transform: scale(1.09);
  filter: saturate(0.86) contrast(1.03) brightness(0.96);
}
/* Scrim: bottom-left weighted so the type block always clears AAA. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(15, 13, 12, 0.84) 0%, rgba(15, 13, 12, 0.5) 30%, rgba(15, 13, 12, 0.1) 58%, rgba(15, 13, 12, 0.3) 84%, rgba(15, 13, 12, 0.56) 100%),
    linear-gradient(to right, rgba(15, 13, 12, 0.5) 0%, rgba(15, 13, 12, 0.1) 55%, rgba(15, 13, 12, 0) 100%);
}
.hero__body {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: clamp(3rem, 8vh, 6rem);
}
/* Sized so the line always resolves to two lines at desktop widths.
   The generic display-xl scale is too large for a headline this long. */
.hero__title {
  color: #FBF8F4;
  font-size: clamp(2.35rem, 5.6vw, 4.9rem);
  max-width: 26ch;
  text-shadow: 0 1px 40px rgba(10, 8, 7, 0.35);
}
.hero__sub {
  font-family: var(--micro);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(251, 248, 244, 0.86);
  margin-top: 1.9rem;
}
.hero__cta { margin-top: 2.6rem; }

/* Compact page hero for inner pages. The type column sits near the top of
   the band rather than centred against a tall plate, so the page title is
   the first thing read instead of floating mid viewport. */
.pagehead { padding-top: calc(74px + clamp(2.5rem, 5vw, 4.5rem)); }
.pagehead__type { align-self: start; padding-top: clamp(1rem, 3vw, 3rem); }

/* Running head: keeps the section title beside a long read instead of
   leaving a tall empty column next to the prose. */
.sticky-head { position: sticky; top: calc(74px + 3rem); }
@media (max-width: 900px) { .sticky-head { position: static; } }

/* --------------------------------------------------- 9. THE COVER OBJECT */

/* The book is treated as a physical object: a spine edge on the left,
   a directional shadow, and on night surfaces a bloom that borrows the
   cover's own neon. This is the only materiality moment on the site. */
.cover {
  position: relative;
  display: block;
  width: 100%;
  transform-style: preserve-3d;
}
.cover img {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  box-shadow:
    0 2px 6px rgba(20, 16, 14, 0.14),
    0 24px 60px rgba(20, 16, 14, 0.28),
    0 60px 120px rgba(20, 16, 14, 0.2);
}
/* spine */
.cover::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 9px;
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(0, 0, 0, 0.32) 46%,
    rgba(0, 0, 0, 0.06) 100%);
  pointer-events: none;
}
/* The bloom is a drop-shadow rather than an oversized pseudo-element:
   an absolutely positioned glow with negative insets contributes to
   scrollable overflow and widens the page on narrow viewports. */
.is-night .cover img,
:root[data-theme="night"] .cover img {
  filter:
    drop-shadow(0 0 26px color-mix(in srgb, var(--neon) 34%, transparent))
    drop-shadow(0 0 72px color-mix(in srgb, var(--neon) 22%, transparent));
  transition: filter 0.8s var(--ease);
}
.is-night .cover:hover img,
:root[data-theme="night"] .cover:hover img {
  filter:
    drop-shadow(0 0 30px color-mix(in srgb, var(--neon) 46%, transparent))
    drop-shadow(0 0 92px color-mix(in srgb, var(--neon) 30%, transparent));
}

/* ------------------------------------------------------------ 10. FIGURES */

.fig { position: relative; overflow: hidden; }
.fig img { width: 100%; height: 100%; object-fit: cover; }
.fig--tall { aspect-ratio: 3 / 4; }
.fig--portrait { aspect-ratio: 4 / 5; }
.fig--wide { aspect-ratio: 16 / 9; }
.fig--cinema { aspect-ratio: 21 / 9; }
.fig--square { aspect-ratio: 1 / 1; }

.fig figcaption {
  margin-top: 1rem;
  font-family: var(--micro);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}

/* Full-bleed break */
.bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Runs the right edge of a figure out to the viewport edge. Used for the
   split heroes on About and Contact, so the portrait reads as a plate
   bleeding off the page rather than a boxed image. */
/* Percentage based bleeds resolve against the grid column, not the page,
   so the offset is computed from the shell instead: gutter plus whatever
   dead margin the max-width leaves at very wide viewports. */
.edge-right {
  margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--shell)) / 2)));
}
@media (max-width: 900px) { .edge-right { margin-right: 0; } }

/* Pulled out of the prose measure: the short beats that carry Claire's
   voice ("She did not.") are set in the display italic instead of being
   buried in the paragraph flow. */
.pullout {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.55rem, 1.15rem + 1.5vw, 2.3rem);
  line-height: 1.24;
  color: var(--ink);
  margin-block: 2.4rem !important;
  padding-bottom: 0.1em;
  max-width: 18ch;
}

/* ------------------------------------------------------- 11. PAGE SECTIONS */

/* 11a. Offset statement block */
.statement__mark {
  font-family: var(--display);
  font-size: clamp(2.4rem, 1.2rem + 4.6vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: -0.016em;
  max-width: 24ch;
  padding-bottom: 0.08em;
}

/* 11b. Quote band */
.quote {
  text-align: center;
  max-width: 26ch;
  margin-inline: auto;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.9rem, 1rem + 3.2vw, 3.4rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  padding-bottom: 0.1em;
  text-wrap: balance;
}
.quote__frame {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

/* 11c. Overlap split (image runs to the page edge, panel overlaps it) */
/* Both children are pinned to row 1 so the panel genuinely sits on top of
   the plate. Without the explicit row, grid auto-placement pushes the
   panel onto a second row and the overlap silently disappears. */
.overlap { position: relative; }
.overlap__media {
  grid-column: 1 / span 7;
  grid-row: 1;
  position: relative;
}
.overlap__panel {
  grid-column: 6 / span 7;
  grid-row: 1;
  background: var(--paper-2);
  padding: clamp(2rem, 4vw, 4.25rem);
  align-self: center;
  z-index: 2;
  border: 1px solid var(--rule-soft);
  box-shadow: -34px 0 70px rgba(28, 26, 25, 0.08);
}

/* 11d. Link tiles for retailers */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.tile {
  background: var(--paper);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.2rem;
  min-height: 190px;
  transition: background-color 0.45s var(--ease);
}
a.tile:hover { background: var(--paper-2); }
.tile__name {
  font-family: var(--display);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);
  line-height: 1.2;
}
.tile__meta {
  font-family: var(--micro);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.tile--live .tile__meta { color: var(--accent); }
.tile--soon { color: var(--ink-2); }

/* 11e. Detail clusters. Grouped, not a hairline-per-row table. */
.clusters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(2.4rem, 5vw, 4.5rem);
}
.cluster h3 {
  font-family: var(--micro);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.5rem;
}
.cluster dl { display: grid; gap: 0.9rem; }
.cluster dt {
  font-family: var(--micro);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cluster dd {
  font-family: var(--display);
  font-size: 1.22rem;
  line-height: 1.35;
  margin-bottom: 0.55rem;
}

/* 11f. Format display trio, sized asymmetrically so it never reads
   as three identical cards. */
.formats {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}
.format {
  background: var(--paper);
  padding: clamp(1.8rem, 3.4vw, 3rem) clamp(1.4rem, 2.6vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.format__n {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.2rem);
  line-height: 1.1;
}
.format__s {
  font-family: var(--micro);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --------------------------------------------------------------- 12. FORMS */

.form { display: grid; gap: 1.7rem; }
.field { display: grid; gap: 0.55rem; }
.field label {
  font-family: var(--micro);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.85rem 0 0.9rem;
  font-family: var(--prose);
  font-size: 1.05rem;
  color: var(--ink);
  transition: border-color 0.4s var(--ease);
}
.field textarea { resize: vertical; min-height: 8.5rem; line-height: 1.6; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.field:focus-within label { color: var(--ink); }
.field__help {
  font-family: var(--micro);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.field__error {
  font-family: var(--micro);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  display: none;
}
.field.has-error input,
.field.has-error textarea { border-bottom-color: var(--accent); }
.field.has-error .field__error { display: block; }

.form__status {
  font-family: var(--micro);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  min-height: 1.2em;
}
.form__status[data-state="ok"] { color: var(--accent); }

/* Inline signup: field and button share one baseline. */
.signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.4rem;
  align-items: end;
}
@media (max-width: 640px) {
  .signup { grid-template-columns: 1fr; }
  .signup .btn { justify-content: center; }
}

/* -------------------------------------------------------------- 13. FOOTER */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.foot__mark {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: 0.06em;
}
.foot h4 {
  font-family: var(--micro);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.3rem;
}
.foot ul { display: grid; gap: 0.75rem; }
.foot ul a {
  font-family: var(--micro);
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  color: var(--ink-2);
  transition: color 0.35s var(--ease);
}
.foot ul a:hover { color: var(--accent); }
.foot__bottom {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.5rem;
  justify-content: space-between;
  align-items: baseline;
}
.foot__bottom p {
  font-family: var(--micro);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --------------------------------------------------------------- 14. MOTION */
/* Everything below is gated on prefers-reduced-motion. Reveals are driven
   by IntersectionObserver in site.js, never by scroll listeners. */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.95s var(--ease) calc(var(--i, 0) * 90ms),
      transform 0.95s var(--ease) calc(var(--i, 0) * 90ms);
    will-change: transform, opacity;
  }
  .reveal.is-in { opacity: 1; transform: none; }

  .reveal-img { overflow: hidden; }
  .reveal-img img {
    transform: scale(1.06);
    opacity: 0;
    transition:
      transform 1.5s var(--ease),
      opacity 1.1s var(--ease);
    will-change: transform, opacity;
  }
  .reveal-img.is-in img { transform: scale(1); opacity: 1; }

  /* Hero entrance: the frame settles while the line rises out of it. */
  .hero__media img {
    transition: transform 2.4s var(--ease), opacity 1.4s var(--ease);
    opacity: 0;
  }
  .hero.is-ready .hero__media img { transform: scale(1); opacity: 1; }

  .hero__title,
  .hero__sub,
  .hero__cta {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  }
  .hero.is-ready .hero__title { opacity: 1; transform: none; transition-delay: 0.28s; }
  .hero.is-ready .hero__sub   { opacity: 1; transform: none; transition-delay: 0.46s; }
  .hero.is-ready .hero__cta   { opacity: 1; transform: none; transition-delay: 0.6s; }

  .fig--hover img { transition: transform 1.2s var(--ease); }
  .fig--hover:hover img { transform: scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu { transition: none; }
  .menu__list a { opacity: 1; transform: none; transition: none; }
}

/* ----------------------------------------------------------- 15. RESPONSIVE */

@media (max-width: 1100px) {
  .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__mark { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  /* Column spans are authored per section as inline styles so each layout
     can be read at a glance. Below the breakpoint every one of them has to
     collapse to a single column, which is what the !important is for. */
  .grid > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    align-self: auto !important;
  }
  .grid { row-gap: clamp(2rem, 7vw, 3rem); }

  .overlap__panel {
    margin-top: -3.5rem;
    margin-inline: clamp(0rem, 4vw, 2.5rem);
    box-shadow: 0 -20px 60px rgba(28, 26, 25, 0.08);
  }
  .formats { grid-template-columns: 1fr; }
  .hero { min-height: 92dvh; }
  .clusters { gap: 2.75rem; }
  .statement__mark, .lede, .prose, .hero__title, .quote { max-width: 100%; }

  /* The cover bloom spreads past the plate on wide layouts, where there is
     room for it. At phone widths the cover is full bleed, so the same spread
     pushes the document wider than the viewport. Keep it inside the box. */
  .is-night .cover::after,
  :root[data-theme="night"] .cover::after { inset: 6% 0 -5% 0; }
}

@media (max-width: 520px) {
  /* The wordmark does not wrap, so at narrow widths its intrinsic width
     plus the menu button sets the page's minimum width. Both shrink here
     to keep the header inside the viewport. */
  .wordmark { font-size: 0.8rem; letter-spacing: 0.2em; }
  .wordmark small { font-size: 0.48rem; letter-spacing: 0.3em; margin-top: 0.34rem; }
  .nav__inner { gap: 1rem; }
  .nav__toggle { font-size: 0.62rem; gap: 0.55rem; }
  .nav__toggle i, .nav__toggle i::before, .nav__toggle i::after { width: 20px; }
}

@media (max-width: 640px) {
  .tiles { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr; gap: 2.6rem; }
  .quote { max-width: 100%; }
  .hero__title { max-width: 100%; }
  .lede { max-width: 100%; }
}

/* Helpers */
.stack-sm > * + * { margin-top: 1.1rem; }
.stack-md > * + * { margin-top: 1.9rem; }
.stack-lg > * + * { margin-top: 3rem; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}