/* ============================================================
   The Second Edit — "Editorial Quiet"
   Instrument Serif (display) + Inter (text)

   CONCEPT: an edit is a revision. The page is a marked-up
   manuscript that revises itself in front of the reader.
   Spec: docs/BRIEF.md
   ============================================================ */

:root {
  /* Beige + brown, keyed to the logo's ink. Every value measured
     against --paper; the accent carries small text so it must clear 4.5. */
  --paper:    #F3EDE4;   /* warm beige ground */
  --paper-2:  #E6DACA;   /* image bed / tint */
  --ink:      #2E1B0C;   /* the logo's espresso   14.1:1 */
  --ink-soft: #6B5442;   /* secondary text         6.1:1 */
  --accent:   #745637;   /* single accent          5.8:1 */
  --rule:     #DCCFBC;   /* hairlines */

  --font-display: "Instrument Serif", Georgia, serif;
  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  --size-headline: clamp(42px, 6.4vw, 92px);
  --size-pull: clamp(27px, 3.9vw, 52px);
  --size-h3: clamp(21px, 2.2vw, 29px);
  --size-body: 17px;
  --size-small: 15px;
  --size-label: 11px;

  --lh-headline: 1.02;
  --ls-headline: -0.018em;
  --lh-body: 1.65;
  --ls-label: 0.22em;

  --container: 1180px;
  --gutter: 22px;
  --section-y: 76px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (min-width: 900px) {
  :root { --gutter: 32px; --section-y: 116px; }
}
@media (max-width: 899px) {
  :root { --size-label: 15px; --ls-label: 0.16em; }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-text);
  font-size: var(--size-body);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

[id] { scroll-margin-top: 88px; }

/* Everything below degrades to a finished, static page. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }
.section + .section:not(.section--ink) { border-top: 1px solid var(--rule); }

/* ============================================================
   THE INVERSION — the one hard cut on the page
   ============================================================ */
.section--ink {
  background: var(--ink);
  color: var(--paper);
  border-top: 0;
}
.section--ink .label-text { color: rgba(243,237,228,0.60); }
.section--ink .label-num  { color: rgba(243,237,228,0.52); }
.section--ink .section-label::after { background: rgba(243,237,228,0.22); }
.section--ink .prose,
.section--ink .small { color: rgba(243,237,228,0.74); }
.section--ink .strike { color: rgba(243,237,228,0.50); }
.section--ink .revise { color: var(--paper); }
.section--ink .marginalia { color: rgba(243,237,228,0.42); }

/* ============================================================
   SIGNATURE 1 — the section label
   ============================================================ */
.section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 46px;
  font-size: var(--size-label);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.label-num {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: none;
}
.label-text { color: var(--ink-soft); white-space: nowrap; }
.section-label::after {
  content: ""; flex: 1; height: 1px;
  background: var(--rule);
  transform-origin: left center;
}
.js .section-label::after { transform: scaleX(0); }
.js .section-label.is-drawn::after {
  transform: scaleX(1);
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (prefers-reduced-motion: reduce) {
  .js .section-label::after { transform: scaleX(1) !important; }
}

/* ============================================================
   SIGNATURE 2 — the revision mark
   The struck rule is an absolutely-positioned pseudo-element, so it
   can never shift layout. With JS off it renders already struck.
   ============================================================ */
.strike { position: relative; color: var(--ink-soft); }
.strike::after {
  content: "";
  position: absolute;
  left: -0.015em; right: -0.015em;
  top: 0.545em;
  height: 0.048em;
  background: currentColor;
  transform-origin: left center;
}
.js .strike::after { transform: scaleX(0); }
.revise { color: var(--ink); }
.revise em { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .js .strike::after { transform: scaleX(1) !important; }
}

/* ============================================================
   SIGNATURE 3 — marginalia
   Small revision notes hanging in the margin, like a pencil note
   in the gutter of a proof. Desktop only — no room on a phone.
   ============================================================ */
.marginalia {
  display: none;
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  line-height: 1.35;
  color: var(--ink-soft);
}
@media (min-width: 1180px) {
  .marginalia {
    display: block;
    position: absolute;
    left: max(12px, calc((100vw - var(--container)) / 2 - 132px));
    width: 132px;
    padding-right: 22px;
    text-align: right;
  }
  .marginalia::after {
    content: "";
    position: absolute;
    right: 0; top: 0.72em;
    width: 12px; height: 1px;
    background: var(--rule);
  }
}

/* ---------- Type ---------- */
.headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-headline);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
}
.headline em, .pull em { font-style: italic; }

.pull {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-pull);
  line-height: 1.1;
  letter-spacing: -0.012em;
}
.h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--size-h3); line-height: 1.16; }

.prose { color: var(--ink-soft); max-width: 58ch; }
.prose + .prose { margin-top: 1.15em; }
.prose strong { font-weight: 500; color: var(--ink); }
.small { font-size: var(--size-small); color: var(--ink-soft); }
.lead { font-size: 19px; line-height: 1.55; color: var(--ink-soft); max-width: 44ch; }
.accent { color: var(--accent); }

/* ============================================================
   MASKED LINE REVEAL — display type sets itself, like print
   .line is the mask; its child is what moves.
   ============================================================ */
.line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.line > span { display: block; will-change: transform; }
.js .line > span { transform: translateY(108%); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 17px 34px;
  font-size: var(--size-small);
  letter-spacing: 0.02em;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--paper);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
  transition: color 520ms var(--ease), border-color 520ms var(--ease);
}
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 520ms var(--ease);
}
/* Touch keeps the last-tapped element hovered, which leaves a button
   sitting filled as though it were still being pressed. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: scaleY(1); transform-origin: top center; }
  .btn:hover { border-color: var(--accent); }
}

.btn--ghost { background: transparent; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { color: var(--paper); } }

.section--ink .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .section--ink .btn:hover { color: var(--paper); border-color: var(--accent); } }

/* ---------- Spec list ---------- */
.spec { counter-reset: spec; display: grid; }
.spec > li {
  counter-increment: spec;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding-block: 24px;
  border-bottom: 1px solid var(--rule);
}
.spec > li:first-child { padding-top: 0; }
.spec > li:last-child { border-bottom: 0; }
.spec > li::before {
  content: counter(spec, upper-roman);
  font-family: var(--font-display);
  font-size: var(--size-small);
  line-height: 1.6;
  color: var(--accent);
}
.spec b { font-weight: 500; }
.spec span { color: var(--ink-soft); }

/* ============================================================
   IMAGE REVEAL — a mask wipe, like an image being printed
   ============================================================ */
.media { background: var(--paper-2); overflow: hidden; position: relative; }
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
  /* Rotation is baked into the pixels and EXIF is stripped, so nothing
     downstream can re-rotate these. Stated anyway. */
  image-orientation: none;
}
/* Adele's photographs come in exactly two native ratios. Matching them
   means no crop unless a crop is wanted. */
/* Ratios follow the treated crops. object-fit crops the rest. */
.media--57 { aspect-ratio: 5 / 7; }
.media--34 { aspect-ratio: 3 / 4; }
.media--45 { aspect-ratio: 4 / 5; }
.media--11 { aspect-ratio: 1 / 1; }
.media--43 { aspect-ratio: 4 / 3; }
.media--23 { aspect-ratio: 2 / 3; }

.js .media[data-wipe] { clip-path: inset(0 0 100% 0); }

/* ---------- Forms ---------- */
.field { display: grid; gap: 9px; }
.field label {
  font-size: var(--size-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input {
  width: 100%;
  min-height: 56px;
  padding: 16px 0;
  font: inherit;
  font-size: 16px;               /* below 16px iOS zooms on focus */
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  transition: border-color 420ms var(--ease);
}
.field input:focus { border-bottom-color: var(--ink); outline: none; }
.section--ink .field label { color: rgba(243,237,228,0.60); }
.section--ink .field input { color: var(--paper); border-bottom-color: rgba(243,237,228,0.32); }
.section--ink .field input:focus { border-bottom-color: var(--paper); }


/* ============================================================
   PRELOADER — the concept, performed before you land
   ============================================================ */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: var(--paper);
  display: grid;
  place-items: center;
  will-change: transform;
}
.preloader.is-done { display: none; }
.preloader__mark {
  font-family: var(--font-display);
  font-size: clamp(26px, 6vw, 54px);
  line-height: 1.15;
  text-align: center;
  padding-inline: var(--gutter);
}
.preloader__revise { display: block; opacity: 0; color: var(--ink); }
@media (max-width: 899px) { .preloader { display: none; } }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  background: rgba(243, 237, 228, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: transform 560ms var(--ease), border-color 400ms linear;
}
.site-header.is-scrolled { border-bottom-color: var(--rule); }
.site-header.is-hidden { transform: translateY(-101%); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 66px;
}
.header-logo { font-family: var(--font-display); font-size: 19px; letter-spacing: -0.01em; }
.header-cta { min-height: 44px; padding: 11px 20px; font-size: 13px; }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--section-y) 40px; border-top: 1px solid var(--rule); }
.footer-bottom {
  margin-top: 68px; padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--ink-soft);
}
.footer-social { display: flex; gap: 22px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================
   GRIDS — asymmetric by rule
   ============================================================ */
.hero { padding-top: 118px; padding-bottom: var(--section-y); }
.hero-grid { display: grid; gap: 40px; }
/* On a phone the hero image runs to both edges — it is the first thing
   that has to feel like a magazine rather than a landing page. */
.hero .media {
  margin-inline: calc(-1 * var(--gutter));
  width: calc(100% + 2 * var(--gutter));
}
@media (min-width: 900px) { .hero .media { margin-inline: 0; width: 100%; } }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 34px; }
.hero-meta span {
  font-size: var(--size-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-soft);
}

.two-col, .recog-grid, .proof-grid { display: grid; gap: 44px; }
.two-col > *, .recog-grid > *, .proof-grid > * { min-width: 0; }

@media (min-width: 900px) {
  .hero { padding-top: 152px; }
  /* The photograph is the second half of the hero, not a thumbnail beside it. */
  .hero-grid { grid-template-columns: 1fr 0.82fr; gap: 64px; align-items: center; }
  .two-col { grid-template-columns: 0.82fr 1.18fr; gap: 92px; }
  .recog-grid { grid-template-columns: 1fr 0.92fr; gap: 72px; align-items: center; }
  .proof-grid { grid-template-columns: 1.25fr 0.75fr; gap: 76px; align-items: center; }
}

/* ============================================================
   THE RAIL — capsules scroll sideways, like flicking a rack
   ============================================================ */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74vw;
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter));
  padding-bottom: 8px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

@media (min-width: 900px) {
  .rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    overflow: visible;
    padding-inline: 0;
    margin-inline: 0;
  }
  /* Break the row — never a uniform three-up. */
  .rail > *:nth-child(2) { margin-top: 60px; }
  .rail > *:nth-child(3) { margin-top: 26px; }
}

.rail-hint {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px;
  font-size: var(--size-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--ink-soft);
}
@media (min-width: 900px) { .rail-hint { display: none; } }

.capsule-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 15px; padding-top: 13px;
  border-top: 1px solid var(--rule);
}
.capsule-meta .small { font-size: 13px; }

/* ---------- The mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: start; }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  /* Stagger the tiles so the grid never reads as a product catalogue. */
  .mosaic > *:nth-child(2) { margin-top: 32px; }
  .mosaic > *:nth-child(4) { margin-top: 48px; }
  .mosaic > *:nth-child(6) { margin-top: 24px; }
}

/* ---------- Guarantee ---------- */
.guarantee { margin-top: 38px; padding: 26px 28px; border: 1px solid var(--rule); }
.guarantee p { color: var(--ink-soft); font-size: var(--size-small); }
.guarantee strong { color: var(--ink); font-weight: 500; }

/* ---------- Generic fade ---------- */
.js [data-fade] { opacity: 0; }


/* ============================================================
   FULL-BLEED BAND — one image allowed to take the whole width.
   Breaks the container rhythm exactly once, so it lands.
   ============================================================ */
.bleed {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}
/* Capped so a wide monitor can't turn one photograph into a whole screen
   of scrolling. object-fit crops rather than letterboxing. */
.bleed .media { aspect-ratio: 4 / 5; max-height: 82vh; }
@media (min-width: 760px)  { .bleed .media { aspect-ratio: 16 / 10; } }
@media (min-width: 1200px) { .bleed .media { aspect-ratio: 3 / 2; } }

/* ============================================================
   SPLIT BAND — photograph against an ink panel, full width.
   Replaces the bare 100vw strip, which on a wide monitor was
   all width and no proportion.
   ============================================================ */
.split {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr;
}
.split__media { overflow: hidden; }
.split__media .media { aspect-ratio: 4 / 5; height: 100%; }
.split__panel {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(44px, 8vw, 92px) var(--gutter);
}
.split__panel .section-label { margin-bottom: 30px; }
.split__panel .label-text { color: rgba(243,237,228,0.60); }
.split__panel .label-num  { color: rgba(243,237,228,0.52); }
.split__panel .section-label::after { background: rgba(243,237,228,0.22); }
.split__panel .prose { color: rgba(243,237,228,0.74); }
.split__panel .strike { color: rgba(243,237,228,0.50); }
.split__panel .revise { color: var(--paper); }

@media (min-width: 860px) {
  .split { grid-template-columns: 1.15fr 1fr; }
  .split__media .media { aspect-ratio: auto; min-height: 68vh; }
  .split__panel { padding-inline: clamp(40px, 5vw, 84px); }
}

/* ============================================================
   PROOF — was top-heavy with a long dead column beneath the
   button. Now vertically centred, text column tightened so it
   cannot sprawl, and the photograph carries a caption.
   ============================================================ */
.proof-grid { align-items: center; }
.proof-copy { max-width: 34rem; }
.proof-figure { position: relative; }
.proof-figure figcaption {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.proof-figure figcaption .frame__no { font-family: var(--font-display); color: var(--accent); text-transform: none; }

@media (min-width: 900px) {
  .proof-grid { grid-template-columns: 1fr 0.62fr; gap: 84px; }
}

/* The two open sessions, as a ledger rather than a claim. */
.slots { margin-top: 34px; display: grid; gap: 0; max-width: 25rem; }
.slots li {
  display: flex; align-items: baseline; gap: 14px;
  padding-block: 15px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--size-small);
  color: var(--ink-soft);
}
.slots li:first-child { border-top: 1px solid var(--rule); }
.slots .n { font-family: var(--font-display); color: var(--accent); min-width: 1.6em; }
.slots .dash { flex: 1; height: 1px; background: var(--rule); }
.slots .state { letter-spacing: 0.18em; text-transform: uppercase; font-size: 10px; color: var(--accent); }

/* ---------- Magnetic buttons need a transform origin of their own ---------- */
.btn { will-change: transform; }

/* ---------- Scroll progress hairline in the header ---------- */
.progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.bleed-caption {
  margin-top: 16px;
  padding-inline: var(--gutter);
  font-size: var(--size-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
}

/* ---------- Header logo ---------- */
.header-logo img { height: 22px; width: auto; }
@media (min-width: 900px) { .header-logo img { height: 26px; } }
.site-footer .footer-logo img { height: 30px; width: auto; margin-bottom: 22px; }
.section--ink .footer-logo img,
.section--ink .header-logo img { filter: none; }

/* ---------- Bigger capsules ---------- */
@media (min-width: 900px) {
  .rail { gap: 40px; }
  .rail > *:nth-child(2) { margin-top: 72px; }
  .rail > *:nth-child(3) { margin-top: 30px; }
}
.rail { grid-auto-columns: 82vw; }
@media (min-width: 900px) { .rail { grid-auto-columns: auto; } }

/* ---------- Bigger mosaic ---------- */
.mosaic { gap: 12px; }
@media (min-width: 900px) { .mosaic { gap: 18px; } }


/* ============================================================
   THE CONTACT SHEET

   These are not campaign photographs and pretending otherwise
   fails. They're a personal archive, so they're presented as
   one: numbered frames, mixed scale, warm monochrome cut with
   colour. The weakness becomes the format.
   ============================================================ */
.sheet {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 12px;
  align-items: start;
}
@media (min-width: 760px) {
  .sheet { grid-template-columns: repeat(4, 1fr); gap: 40px 18px; }
  /* Nothing lines up twice — a contact sheet is hand-laid, not tabulated. */
  .sheet > *:nth-child(2)  { margin-top: 46px; }
  .sheet > *:nth-child(4)  { margin-top: 74px; }
  .sheet > *:nth-child(5)  { margin-top: 18px; }
  .sheet > *:nth-child(7)  { margin-top: 52px; }
  .sheet > *:nth-child(8)  { margin-top: 12px; }
}

.frame__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 9px;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.frame__no { font-family: var(--font-display); letter-spacing: 0.06em; color: var(--accent); text-transform: none; }

/* ============================================================
   FILM GRAIN — one texture over everything, so sixteen phones
   on sixteen days read as a single roll.
   ============================================================ */
body::after {
  content: "";
  position: fixed;
  inset: -4%;
  width: 108%; height: 108%;
  pointer-events: none;
  z-index: 900;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  animation: grain 8s steps(8) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 1.5%); }
  40% { transform: translate(1.5%, -2%); }
  60% { transform: translate(-1.5%, -1.5%); }
  80% { transform: translate(2%, 2%); }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }


/* ============================================================
   INK DRAWINGS

   Served as CSS masks rather than inlined SVG. Potrace produces filled
   outlines, not centre-lines, so these carry fill instead of stroke —
   which rules out the stroke-dashoffset draw-on the hand-drawn versions
   used. Masking keeps the colour under our control anyway (the paint is
   currentColor, the SVG only supplies the shape), keeps roughly 220KB of
   path data out of the HTML, and lets the browser cache each drawing.
   ============================================================ */
.ink {
  color: var(--ink);
  background-color: currentColor;
  -webkit-mask: var(--ink-src) center / contain no-repeat;
  mask: var(--ink-src) center / contain no-repeat;
  width: 100%;
}
.section--ink .ink,
.split__panel .ink { color: var(--paper); }

/* Reveal sweeps left to right — the closest thing to a drawn-on effect
   once the paths are fills. Set by JS only, so no-JS shows them whole. */
.js [data-ink] { clip-path: inset(0 100% 0 0); }

.rail .ink { padding-block: 6px; }

/* Spec-list marks — masks too, same as the drawings */
.spec > li { grid-template-columns: 30px 40px 1fr; gap: 12px; }
/* .spec span sets ink-soft and outranks a bare class, so scope it. */
.spec .spec-mark {
  width: 34px; height: 34px;
  color: var(--accent);
  background-color: currentColor;
  -webkit-mask: var(--ink-src) center / contain no-repeat;
  mask: var(--ink-src) center / contain no-repeat;
}
@media (max-width: 599px) {
  .spec > li { grid-template-columns: 26px 32px 1fr; gap: 10px; }
  .spec-mark { width: 28px; }
}


/* ============================================================
   DRAWING PLACEMENT

   On desktop the drawings sit in a column of their own and want real
   size — at 0.5fr the recognition piece read as a footnote beside a very
   wide paragraph. On a phone there is no column, so they centre in the
   measure instead of hugging the left edge.
   ============================================================ */
.ink { margin-inline: auto; }

/* Mobile: centred, and never wider than the text it sits with. */
@media (max-width: 899px) {
  .recog-grid .ink { max-width: 78%; }
  .rail .ink { max-width: 100%; }
}

@media (min-width: 900px) {
  .recog-grid .ink { max-width: 100%; }
}


/* ============================================================
   THE TWO OFFERS

   Priced as a ledger rather than as pricing cards — no boxes, no
   shadows, no "most popular" badge. The rule between name and figure
   is the same hairline the section labels use, so the price table
   reads as part of the page rather than bolted onto it.
   ============================================================ */
.offer { margin-bottom: 40px; }
.offer:last-of-type { margin-bottom: 30px; }

.offer__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.offer__for {
  font-size: var(--size-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.offer > .small { margin-top: 10px; }

.tiers { margin-top: 14px; display: grid; }
.tiers li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-block: 13px;
  border-bottom: 1px solid var(--rule);
}
.tiers li:last-child { border-bottom: 0; }
.t-name { font-size: var(--size-small); color: var(--ink); white-space: nowrap; }
.t-rule { flex: 1; height: 1px; background: var(--rule); }
.t-price {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

/* The choice that applies to both, and the founding-rate note. */
.offer-note {
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.offer-note strong { color: var(--ink); font-weight: 500; }

/* The deliverables now sit under both offers rather than beside one. */
.spec-block { margin-top: clamp(56px, 8vw, 96px); }
@media (min-width: 900px) {
  .spec-block { max-width: 62%; }
  .spec-block .spec > li { grid-template-columns: 30px 40px 1fr; }
}
@media (max-width: 899px) {
  .label-num,
  .footer-bottom,
  .frame__meta { font-size: 15px; }
  .label-text { min-width: 0; white-space: normal; }
  .t-name { white-space: normal; }
  .tiers li { align-items: end; }
}


/* ============================================================
   THE ENQUIRY FORM

   Same construction as the ReGlow Wellness forms: underlined fields
   rather than boxes, uppercase tracked labels, a two-up row that
   collapses on mobile, and an inline success panel that replaces the
   form in place instead of navigating away.
   ============================================================ */
.book-grid { display: grid; gap: 52px; }
@media (min-width: 900px) {
  .book-grid { grid-template-columns: 0.78fr 1.22fr; gap: 88px; align-items: start; }
}

/* What happens next — the same ledger as the price tiers. */
.next { margin-top: 34px; display: grid; }
.next li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--size-small);
  color: var(--ink-soft);
}
.next li:first-child { border-top: 1px solid var(--rule); }
.next__n { font-family: var(--font-display); color: var(--accent); }

/* Two fields side by side above 48em, stacked below. */
.field--row { display: grid; gap: 26px; margin-bottom: 26px; }
@media (min-width: 48em) { .field--row { grid-template-columns: 1fr 1fr; gap: 26px 34px; } }
.book-form .field { margin-bottom: 26px; }
.field--row .field { margin-bottom: 0; }

.field textarea {
  width: 100%;
  min-height: 7.5rem;
  padding: 16px 0;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  resize: vertical;
  transition: border-color 420ms var(--ease);
}
.field textarea:focus { border-bottom-color: var(--ink); outline: none; }

.field select {
  width: 100%;
  min-height: 56px;
  padding: 16px 1.6rem 16px 0;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 420ms var(--ease);
  /* chevron drawn in the accent so the control still reads as ours */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23745637' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.15rem center;
}
.field select:focus { border-bottom-color: var(--ink); outline: none; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(46, 27, 12, 0.32); }

/* Safari renders an empty date input as blank; keep it legible. */
.field input[type="date"] { color: var(--ink); }
.field input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.45; cursor: pointer; }

.form-fine {
  margin: 6px 0 30px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 42ch;
}


/* Shown only when she arrives from the diagnostic. */
.from-quiz {
  margin: 4px 0 18px;
  padding: 12px 16px;
  border-left: 2px solid var(--accent);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--paper-2);
}
.from-quiz strong { color: var(--ink); font-weight: 500; }

/* Footer closes on the wordmark and one last way in, rather than a
   capture form — the whole funnel runs through the questionnaire now. */
.footer-close { max-width: 34rem; }


/* ============================================================
   FOOTER DOODLES — the garment drawings, under everything else.
   Masks like every other .ink, so they take the paper's ink colour
   and cost one cached SVG each.
   ============================================================ */
.footer-ink {
  margin-top: 34px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: clamp(10px, 3vw, 34px);
}
.footer-ink .ink {
  flex: 0 1 auto;
  width: clamp(38px, 11vw, 74px);
  aspect-ratio: 1 / 1;
  color: var(--ink-soft);
  opacity: 0.40;
  margin-inline: 0;
}
/* Six squares below 380px leaves each of them a thumbnail. Drop two. */
@media (max-width: 400px) {
  .footer-ink .ink:nth-child(5) { display: none; }
  .footer-ink .ink:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .footer-ink .ink { transition: opacity 0.4s ease; }
  .footer-ink:hover .ink { opacity: 0.5; }
}