/* ==========================================================================
   StencilIntake, flash sheet daylight design system
   Bone paper and blood red with traditional gold, ink black line work.
   Bebas Neue over Space Mono. Halftone grain, flash sheet frames, heavy rules.
   Everything is printed on paper. The footer is the one inked band.
   ========================================================================== */

:root {
  /* Core palette from the brief */
  --bg: #FAF6F0;
  --surface: #FFFFFF;
  --ink: #171313;
  --primary: #8C1C22;
  --accent: #B08A2E;
  --muted: #6B615C;

  /* Derived shades and tints, every one of them mixed for a paper ground */
  --bg-tint: #F2EADE;
  --bg-edge: #EAE0D0;
  --surface-2: #F8F3EB;
  --surface-3: #F1E9DC;
  --rule: #2A2320;
  --rule-soft: #D9CDBC;
  --ink-dim: #3B3230;
  --primary-deep: #6B1319;
  --primary-lift: #A82129;
  --primary-wash: rgba(140, 28, 34, 0.08);
  --accent-deep: #7A5C18;
  --accent-lift: #D9AE55;
  --accent-wash: rgba(176, 138, 46, 0.16);
  --bone-wash: rgba(23, 19, 19, 0.045);

  /* The inked footer band and the type that sits on coloured fills */
  --ink-deep: #120F0F;
  --on-dark: #FAF6F0;
  --on-dark-dim: #C6BBAF;
  --on-primary: #FFF6EE;

  /* Type */
  --font-display: "Bebas Neue", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --font-body: "Space Mono", "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
  --fs-100: 0.75rem;
  --fs-200: 0.8125rem;
  --fs-300: 0.9375rem;
  --fs-400: 1rem;
  --fs-500: 1.125rem;
  --fs-600: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  --fs-700: clamp(1.9rem, 1.4rem + 2.4vw, 3rem);
  --fs-800: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  --fs-900: clamp(3.4rem, 1.9rem + 6.4vw, 7rem);
  --lh-tight: 0.92;
  --lh-snug: 1.25;
  --lh-body: 1.72;
  --track-wide: 0.16em;
  --track-mega: 0.3em;

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Frames */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-pill: 999px;
  --rule-hair: 1px;
  --rule-mid: 2px;
  --rule-heavy: 4px;
  --rule-slab: 8px;

  --shadow-cut: 0 0 0 1px rgba(23, 19, 19, 0.07), 5px 5px 0 0 rgba(23, 19, 19, 0.10);
  --shadow-lift: 0 14px 34px rgba(23, 19, 19, 0.12);
  --shadow-gold: 0 0 0 1px var(--accent), 5px 5px 0 0 rgba(176, 138, 46, 0.28);

  --wrap: 1240px;
  --wrap-tight: 900px;

  /* Halftone dot field, the base texture of the whole site */
  --halftone: radial-gradient(circle at 1px 1px, rgba(23, 19, 19, 0.11) 1px, transparent 1.4px);
  --halftone-red: radial-gradient(circle at 1px 1px, rgba(140, 28, 34, 0.2) 1px, transparent 1.5px);
  --halftone-gold: radial-gradient(circle at 1px 1px, rgba(176, 138, 46, 0.26) 1px, transparent 1.5px);
  --halftone-inked: radial-gradient(circle at 1px 1px, rgba(250, 246, 240, 0.07) 1px, transparent 1.4px);
}

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

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

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    var(--halftone),
    linear-gradient(180deg, #FFFDFA 0%, var(--bg) 22%, var(--bg) 78%, var(--bg-edge) 100%);
  background-size: 4px 4px, 100% 100%;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  letter-spacing: 0.005em;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }

a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--primary); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
  color: var(--ink);
}
h1 { font-size: var(--fs-900); }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-600); }
h4 { font-size: var(--fs-500); letter-spacing: var(--track-wide); }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15rem; }
li { margin-bottom: var(--sp-2); }

strong { color: var(--primary); font-weight: 700; }
code, kbd { font-family: var(--font-body); color: var(--accent-deep); }

::selection { background: var(--primary); color: var(--on-primary); }

/* --------------------------------------------------------------- helpers */

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-5); }
.wrap-tight { width: 100%; max-width: var(--wrap-tight); margin-inline: auto; padding-inline: var(--sp-5); }

.skip-link {
  position: absolute; left: var(--sp-4); top: -200px; z-index: 999;
  background: var(--accent); color: var(--ink);
  font-family: var(--font-display); font-size: 1.25rem; letter-spacing: var(--track-wide);
  padding: var(--sp-3) var(--sp-5);
  border: var(--rule-mid) solid var(--ink);
  transition: top 120ms steps(2, end);
}
.skip-link:focus { top: var(--sp-4); color: var(--ink); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}

/* --------------------------------------------- eyebrow, rules and motifs */

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-100);
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: "";
  width: 34px; height: 0;
  border-top: var(--rule-heavy) double var(--primary);
}

.rule-heavy {
  border: 0;
  height: 0;
  border-top: var(--rule-slab) double var(--rule);
  margin: 0;
}

.slab-divider {
  height: 26px;
  background-image:
    linear-gradient(90deg, var(--primary) 0 33.333%, var(--accent) 33.333% 66.666%, var(--ink) 66.666% 100%);
  background-size: 96px 3px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  opacity: 0.92;
}

/* Flash sheet frame: a doubled rule with corner nails, used on every panel */
.flash-frame {
  position: relative;
  background: var(--surface);
  border: var(--rule-mid) solid var(--rule);
  background-image: var(--halftone);
  background-size: 4px 4px;
}
.flash-frame::before {
  content: "";
  position: absolute; inset: 5px;
  border: 1px solid var(--rule-soft);
  pointer-events: none;
}
.flash-frame::after {
  content: "";
  position: absolute; inset: 5px;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--accent) 0 2px, transparent 2.5px),
    radial-gradient(circle, var(--accent) 0 2px, transparent 2.5px),
    radial-gradient(circle, var(--accent) 0 2px, transparent 2.5px),
    radial-gradient(circle, var(--accent) 0 2px, transparent 2.5px);
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: 4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px);
  opacity: 0.9;
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.72rem 1.6rem 0.6rem;
  border: var(--rule-mid) solid var(--ink);
  cursor: pointer;
  position: relative;
  transition: transform 90ms steps(2, end), background-color 90ms steps(2, end), color 90ms steps(2, end);
}
.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 5px 5px 0 0 rgba(23, 19, 19, 0.16), 0 0 0 1px var(--primary-deep);
}
.btn-primary:hover { background: var(--primary-deep); color: var(--on-primary); transform: translate(2px, 2px); box-shadow: 3px 3px 0 0 rgba(23, 19, 19, 0.16); }
.btn-ghost {
  background: var(--surface);
  color: var(--accent-deep);
  border-color: var(--accent-deep);
  box-shadow: 5px 5px 0 0 rgba(176, 138, 46, 0.24);
}
.btn-ghost:hover { background: var(--accent); color: var(--ink); transform: translate(2px, 2px); box-shadow: 3px 3px 0 0 rgba(176, 138, 46, 0.24); }
.btn-bone {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 5px 5px 0 0 rgba(140, 28, 34, 0.3);
}
.btn-bone:hover { background: var(--primary); color: var(--on-primary); transform: translate(2px, 2px); box-shadow: 3px 3px 0 0 rgba(140, 28, 34, 0.3); }
.btn-sm { font-size: 1.05rem; padding: 0.5rem 1.05rem 0.4rem; box-shadow: 4px 4px 0 0 rgba(23, 19, 19, 0.16); }
.btn-wide { width: 100%; }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(253, 250, 245, 0.94);
  border-bottom: var(--rule-heavy) solid var(--rule);
  backdrop-filter: blur(6px);
  transition: border-color 120ms steps(2, end), box-shadow 120ms steps(2, end);
}
.site-header.is-stuck {
  border-bottom-color: var(--primary);
  box-shadow: 0 6px 0 0 rgba(140, 28, 34, 0.18), var(--shadow-lift);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  min-height: 74px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
}
.wordmark svg { width: 34px; height: 34px; flex: 0 0 auto; }
.wordmark .mark-a { color: var(--primary); }
.wordmark b { color: var(--accent-deep); font-weight: 400; }
.wordmark:hover { color: var(--ink); }

.nav-toggle {
  display: none;
  background: var(--surface);
  border: var(--rule-mid) solid var(--rule);
  color: var(--ink);
  width: 46px; height: 42px;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 22px; height: 3px; background: currentColor; content: ""; position: relative;
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] { background: var(--primary); border-color: var(--primary-deep); color: var(--on-primary); }

.site-nav ul {
  display: flex; align-items: center; gap: var(--sp-5);
  list-style: none; margin: 0; padding: 0;
}
.site-nav a {
  font-family: var(--font-body);
  font-size: var(--fs-100);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  padding: var(--sp-2) 0;
  border-bottom: var(--rule-mid) solid transparent;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--primary); border-bottom-color: var(--primary); }
.header-cta { display: flex; align-items: center; gap: var(--sp-4); }

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding: clamp(var(--sp-7), 6vw, var(--sp-10)) 0 var(--sp-8);
  border-bottom: var(--rule-slab) double var(--rule);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--halftone-red);
  background-size: 7px 7px;
  opacity: 0.5;
  mask-image: radial-gradient(120% 90% at 12% 0%, #000 0%, transparent 68%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: center;
}
/* Home hero headline. Sized here, on the hero rule itself, instead of on the
   base h1 or --fs-900 so the 404, thanks and author headings keep their size.
   Same family and weight, still fluid, about a fifth smaller at desktop. */
.hero h1 {
  font-size: clamp(2.7rem, 1.55rem + 4.9vw, 5.4rem);
  margin-bottom: var(--sp-5);
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: var(--primary);
  -webkit-text-stroke: 1px var(--accent);
}
.hero-lede { font-size: var(--fs-400); color: var(--ink-dim); max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-6) 0 var(--sp-6); }

.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: var(--rule-mid) solid var(--rule);
  background: rgba(255, 255, 255, 0.86);
}
.trust-strip div {
  padding: var(--sp-4);
  border-right: 1px solid var(--rule-soft);
}
.trust-strip div:last-child { border-right: 0; }
.trust-strip b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: 0.05em;
  color: var(--accent-deep);
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.trust-strip span { font-size: var(--fs-100); color: var(--muted); letter-spacing: 0.06em; }

/* Hero plate: photograph inside a flash sheet frame with a halftone screen */
.hero-plate { position: relative; }
.hero-plate .plate-frame {
  position: relative;
  border: var(--rule-heavy) solid var(--accent);
  outline: 1px solid var(--rule);
  outline-offset: 7px;
  background: var(--bg-tint);
  overflow: hidden;
}
.hero-plate img { filter: saturate(0.95) contrast(1.03) brightness(1.06); }
.hero-plate .plate-frame::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--halftone);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.plate-tag {
  position: absolute;
  right: -12px; bottom: 24px;
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: var(--track-wide);
  padding: 0.45rem 1rem 0.35rem;
  border: var(--rule-mid) solid var(--ink);
  box-shadow: 4px 4px 0 0 rgba(23, 19, 19, 0.18);
}
.plate-caption {
  margin-top: var(--sp-4);
  font-size: var(--fs-100);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------- sections */

.section { padding: clamp(var(--sp-7), 6vw, var(--sp-9)) 0; position: relative; }
.section-alt {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-tint) 100%);
  border-top: var(--rule-mid) solid var(--rule);
  border-bottom: var(--rule-mid) solid var(--rule);
}
.section-head { max-width: 62ch; margin-bottom: var(--sp-7); }
.section-head p { color: var(--ink-dim); font-size: var(--fs-400); }
.section-head-wide { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); align-items: end; }

/* Stencil numeral, the recurring motif for ordered content */
.stencil-num {
  font-family: var(--font-display);
  font-size: 4.4rem;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px var(--primary);
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: var(--sp-3);
}

/* ------------------------------------------------------------- pain cards */

.pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5);
}
.pain-card {
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border: var(--rule-mid) solid var(--rule);
  background: var(--surface);
  position: relative;
}
.pain-card::before {
  content: "";
  position: absolute; left: 0; top: 0; right: 0;
  height: var(--rule-heavy);
  background: linear-gradient(90deg, var(--primary) 0 50%, var(--accent) 50% 100%);
}
.pain-card h3 { font-size: 1.5rem; letter-spacing: 0.05em; color: var(--ink); }
.pain-card p { color: var(--ink-dim); font-size: var(--fs-200); }
.pain-cost {
  display: inline-block;
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: var(--accent);
  padding: 0.25rem 0.65rem 0.15rem;
}

/* ------------------------------------------------------------------ steps */

.steps-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: start;
}
.step-list { list-style: none; margin: 0; padding: 0; counter-reset: stepno; }
.step-list li {
  position: relative;
  padding: var(--sp-5) 0 var(--sp-5) 88px;
  border-bottom: 1px solid var(--rule-soft);
  margin: 0;
}
.step-list li:first-child { border-top: var(--rule-heavy) double var(--rule); }
.step-list li::before {
  counter-increment: stepno;
  content: "0" counter(stepno);
  position: absolute; left: 0; top: var(--sp-5);
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent-deep);
}
.step-list h3 { font-size: 1.45rem; margin-bottom: var(--sp-2); color: var(--accent-deep); }
.step-list p { color: var(--ink-dim); font-size: var(--fs-200); margin: 0; }

.section-plate .plate-frame {
  position: relative;
  border: var(--rule-heavy) solid var(--rule);
  outline: 1px solid var(--accent);
  outline-offset: 6px;
  overflow: hidden;
  background: var(--bg-tint);
}
.section-plate img { filter: saturate(0.92) contrast(1.04) brightness(1.05); }
.section-plate .plate-frame::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--halftone-gold);
  background-size: 5px 5px;
  opacity: 0.7;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.plate-note {
  margin-top: var(--sp-5);
  border-left: var(--rule-heavy) solid var(--primary);
  padding-left: var(--sp-4);
  font-size: var(--fs-200);
  color: var(--muted);
}

/* --------------------------------------------------------------- features */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  border: var(--rule-mid) solid var(--rule);
}
.feature-card {
  padding: var(--sp-6) var(--sp-5);
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-3) 100%);
  transition: background-color 100ms steps(2, end);
}
.feature-card:hover { background: var(--surface-2); }
.feature-icon {
  width: 54px; height: 54px;
  margin-bottom: var(--sp-4);
  color: var(--primary);
  border: var(--rule-mid) solid var(--rule);
  padding: 6px;
  background: var(--surface);
}
.feature-card h3 { font-size: 1.4rem; letter-spacing: 0.06em; }
.feature-card p { color: var(--ink-dim); font-size: var(--fs-200); margin: 0; }

/* --------------------------------------------------------------- outcomes */

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-5);
}
.outcome {
  padding: var(--sp-6) var(--sp-5);
  background: var(--surface);
  border: var(--rule-mid) solid var(--rule);
  border-top: var(--rule-slab) solid var(--primary);
  position: relative;
}
.outcome-figure {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 3.4vw, 4.6rem);
  line-height: 0.85;
  color: var(--accent-deep);
  letter-spacing: 0.01em;
  margin-bottom: var(--sp-3);
}
.outcome h3 { font-size: 1.2rem; letter-spacing: 0.1em; color: var(--ink); }
.outcome p { font-size: var(--fs-200); color: var(--ink-dim); margin: 0; }

/* ----------------------------------------------------------------- proof */

.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}
.testimonial {
  margin: 0;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--surface);
  border: var(--rule-mid) solid var(--rule);
  position: relative;
}
.testimonial::before {
  content: "";
  position: absolute; top: -1px; left: var(--sp-5); right: var(--sp-5);
  height: var(--rule-heavy);
  background: var(--accent);
}
.testimonial p {
  font-size: var(--fs-300);
  color: var(--ink);
  margin-bottom: var(--sp-5);
}
.testimonial footer {
  border-top: 1px solid var(--rule-soft);
  padding-top: var(--sp-4);
  font-size: var(--fs-100);
  line-height: 1.6;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.testimonial cite {
  display: block;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  color: var(--accent-deep);
}
.results-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border: var(--rule-heavy) double var(--rule);
  background: rgba(255, 255, 255, 0.86);
}
.results-strip div { padding: var(--sp-5); border-right: 1px solid var(--rule-soft); text-align: center; }
.results-strip div:last-child { border-right: 0; }
.results-strip b {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--primary);
  margin-bottom: var(--sp-2);
}
.results-strip span { font-size: var(--fs-100); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ---------------------------------------------------------------- pricing */

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--sp-5);
  align-items: stretch;
}
.price-card {
  display: flex; flex-direction: column;
  padding: var(--sp-6) var(--sp-5);
  background: var(--surface);
  border: var(--rule-mid) solid var(--rule);
  position: relative;
}
.price-card.is-featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF2DF 100%);
  box-shadow: var(--shadow-gold);
}
.price-flag {
  position: absolute; top: -15px; left: var(--sp-5);
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: var(--track-wide);
  padding: 0.28rem 0.8rem 0.18rem;
  border: var(--rule-mid) solid var(--ink);
}
.price-card h3 { font-size: 1.6rem; letter-spacing: 0.08em; margin-bottom: var(--sp-2); }
.price-tagline { font-size: var(--fs-100); color: var(--muted); letter-spacing: 0.06em; margin-bottom: var(--sp-5); }
.price-amount {
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--ink);
  display: flex; align-items: baseline; gap: var(--sp-2);
}
.price-amount small {
  font-family: var(--font-body);
  font-size: var(--fs-100);
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}
.price-list { list-style: none; margin: var(--sp-5) 0 var(--sp-6); padding: 0; border-top: 1px solid var(--rule-soft); }
.price-list li {
  font-size: var(--fs-200);
  color: var(--ink-dim);
  padding: var(--sp-3) 0 var(--sp-3) 26px;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
  margin: 0;
}
.price-list li::before {
  content: "";
  position: absolute; left: 0; top: 1.05rem;
  width: 13px; height: 13px;
  border: 2px solid var(--primary);
  transform: rotate(45deg);
}
.price-card .btn { margin-top: auto; }
.price-note {
  margin-top: var(--sp-6);
  border: var(--rule-mid) dashed var(--rule);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-200);
  color: var(--muted);
  text-align: center;
}

/* -------------------------------------------------------------------- faq */

.faq-list { border-top: var(--rule-heavy) double var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule-soft); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  background: transparent;
  border: 0;
  padding: var(--sp-5) 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.faq-q:hover { color: var(--primary); }
.faq-q .faq-sign {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border: var(--rule-mid) solid var(--primary);
  position: relative;
}
.faq-q .faq-sign::before, .faq-q .faq-sign::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  background: var(--primary);
  transform: translate(-50%, -50%);
}
.faq-q .faq-sign::before { width: 14px; height: 3px; }
.faq-q .faq-sign::after { width: 3px; height: 14px; transition: opacity 90ms steps(2, end); }
.faq-q[aria-expanded="true"] .faq-sign::after { opacity: 0; }
.faq-q[aria-expanded="true"] { color: var(--primary); }
.faq-a {
  padding: 0 0 var(--sp-5);
  max-width: 78ch;
  color: var(--ink-dim);
  font-size: var(--fs-200);
}
.faq-a[hidden] { display: none; }

/* --------------------------------------------------------------- contact */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: start;
}
.contact-hook p { color: var(--ink-dim); font-size: var(--fs-300); }
.contact-hook ul { list-style: none; padding: 0; margin-top: var(--sp-5); }
.contact-hook li {
  padding-left: 28px; position: relative; font-size: var(--fs-200); color: var(--muted);
}
.contact-hook li::before {
  content: "";
  position: absolute; left: 0; top: 0.55rem;
  width: 16px; height: 0;
  border-top: 3px double var(--accent);
}
.form-shell { padding: var(--sp-6) var(--sp-5); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-5); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field-full { grid-column: 1 / -1; }
.field label {
  font-size: var(--fs-100);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: var(--fs-200);
  color: var(--ink);
  background: var(--bg);
  border: var(--rule-mid) solid var(--rule);
  padding: 0.7rem 0.8rem;
  width: 100%;
  transition: border-color 90ms steps(2, end), background-color 90ms steps(2, end);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent-deep) 50%), linear-gradient(135deg, var(--accent-deep) 50%, transparent 50%);
  background-position: calc(100% - 18px) 1.15rem, calc(100% - 12px) 1.15rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--accent-deep); }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--surface); border-color: var(--primary); }
[aria-invalid="true"] { border-color: var(--primary-lift); background: var(--primary-wash); }
.consent-row input[aria-invalid="true"] { outline: 2px solid var(--primary-lift); outline-offset: 2px; }
.field-error {
  font-size: var(--fs-100);
  color: var(--primary-lift);
  letter-spacing: 0.06em;
  min-height: 1em;
}
.field-error:empty { display: none; }
.consent-row {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  border-top: 1px solid var(--rule-soft);
  padding-top: var(--sp-4);
}
.consent-row input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--primary); margin-top: 3px; }
.consent-row label { font-size: var(--fs-100); text-transform: none; letter-spacing: 0.02em; color: var(--ink-dim); line-height: 1.6; }
.form-foot {
  margin-top: var(--sp-5);
  font-size: var(--fs-100);
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------- author */

.byline {
  display: flex; align-items: center; gap: var(--sp-4);
  border: var(--rule-mid) solid var(--rule);
  border-left: var(--rule-slab) solid var(--accent);
  background: var(--surface);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-200);
  color: var(--muted);
  margin-top: var(--sp-7);
}
.byline b { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.08em; color: var(--ink); display: block; }

.author-head {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.author-portrait {
  border: var(--rule-heavy) solid var(--accent);
  outline: 1px solid var(--rule);
  outline-offset: 6px;
  background: var(--bg-tint);
}
.prose { max-width: 76ch; }
.prose h2 { font-size: var(--fs-700); margin-top: var(--sp-8); }
.prose h3 { margin-top: var(--sp-6); color: var(--accent-deep); }
.prose p, .prose li { color: var(--ink-dim); font-size: var(--fs-300); }
.prose ul { padding-left: 1.2rem; }
.link-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); padding: 0; list-style: none; }
.link-row a {
  display: inline-block;
  border: var(--rule-mid) solid var(--rule);
  padding: 0.4rem 0.85rem;
  font-size: var(--fs-100);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  background: var(--surface);
}
.link-row a:hover { color: var(--ink); background: var(--accent); border-color: var(--accent); }

/* ------------------------------------------------------------- page shell */

.page-hero {
  padding: var(--sp-8) 0 var(--sp-7);
  border-bottom: var(--rule-slab) double var(--rule);
  background-image: var(--halftone-gold);
  background-size: 8px 8px;
}
.page-hero h1 { font-size: var(--fs-800); }
.page-hero p { color: var(--ink-dim); max-width: 68ch; }
.crumbs { font-size: var(--fs-100); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-4); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
.crumbs span { color: var(--muted); margin: 0 var(--sp-2); }

.map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); }
.map-block { border: var(--rule-mid) solid var(--rule); background: var(--surface); padding: var(--sp-5); }
.map-block h2 { font-size: 1.5rem; letter-spacing: 0.08em; border-bottom: var(--rule-heavy) double var(--rule); padding-bottom: var(--sp-3); }
.map-block ul { list-style: none; padding: 0; margin: 0; }
.map-block li { border-bottom: 1px solid var(--rule-soft); padding: var(--sp-3) 0; margin: 0; }
.map-block li:last-child { border-bottom: 0; }
.map-block a { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase; }
.map-block em { display: block; font-style: normal; font-size: var(--fs-100); color: var(--muted); line-height: 1.6; }

.status-card {
  text-align: center;
  border: var(--rule-heavy) double var(--accent);
  background: var(--surface);
  padding: clamp(var(--sp-6), 5vw, var(--sp-8)) var(--sp-5);
  background-image: var(--halftone);
  background-size: 4px 4px;
}
.status-card .stencil-num { font-size: clamp(4rem, 3rem + 6vw, 8rem); -webkit-text-stroke: 3px var(--primary); }
.status-card .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-6); }

/* ----------------------------------------------------------------- footer */

.site-footer {
  border-top: var(--rule-slab) double var(--rule);
  background-color: var(--ink-deep);
  background-image:
    var(--halftone-inked),
    linear-gradient(180deg, #1D1817 0%, var(--ink-deep) 100%);
  background-size: 4px 4px, 100% 100%;
  color: var(--on-dark);
  padding: var(--sp-8) 0 0;
}
.site-footer a { color: var(--on-dark); }
.site-footer a:hover { color: var(--accent-lift); }
.site-footer .wordmark { color: var(--on-dark); }
.site-footer .wordmark b { color: var(--accent-lift); }
.site-footer .wordmark:hover { color: var(--on-dark); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.15fr;
  gap: var(--sp-6);
  padding-bottom: var(--sp-7);
}
.footer-brand p { font-size: var(--fs-200); color: var(--on-dark-dim); max-width: 34ch; margin-top: var(--sp-4); }
.footer-col h2 {
  font-size: 1.1rem;
  letter-spacing: var(--track-wide);
  color: var(--accent-lift);
  border-bottom: var(--rule-mid) solid rgba(250, 246, 240, 0.22);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: var(--sp-3); }
.footer-col a { font-size: var(--fs-200); color: var(--on-dark); text-decoration: none; }
.footer-col a:hover { color: var(--accent-lift); text-decoration: underline; }
.footer-publisher { font-size: var(--fs-100); color: var(--on-dark-dim); margin-top: var(--sp-4); letter-spacing: 0.06em; }
.social-row { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); padding: 0; list-style: none; }
.social-row a {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--rule-mid) solid rgba(250, 246, 240, 0.28);
  background: transparent;
  color: var(--on-dark);
}
.social-row a:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.social-row svg { width: 18px; height: 18px; }
.footer-base {
  border-top: var(--rule-mid) solid rgba(250, 246, 240, 0.22);
  padding: var(--sp-5) 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between;
  font-size: var(--fs-100);
  color: var(--on-dark-dim);
  letter-spacing: 0.06em;
}
.footer-base a { color: var(--on-dark-dim); text-decoration: none; }
.footer-base a:hover { color: var(--accent-lift); }

/* ----------------------------------------------------------------- motion */
/* Ink bleed reveal: content soaks in from a blurred, clipped state.         */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  clip-path: inset(0 0 12% 0);
  transition: opacity 520ms ease-out, transform 520ms ease-out, filter 520ms ease-out, clip-path 520ms ease-out;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  clip-path: inset(0 0 0 0);
}
.reveal-d1 { transition-delay: 90ms; }
.reveal-d2 { transition-delay: 180ms; }
.reveal-d3 { transition-delay: 270ms; }

/* Flash frame flip: panels turn on their vertical axis as they enter. */
.flip-in {
  opacity: 0;
  transform: perspective(900px) rotateY(-16deg) translateZ(-40px);
  transform-origin: left center;
  transition: opacity 420ms steps(6, end), transform 420ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
.flip-in.is-in { opacity: 1; transform: perspective(900px) rotateY(0deg) translateZ(0); }

@keyframes bleed-line {
  from { background-size: 0% 3px; }
  to { background-size: 100% 3px; }
}
.bleed-rule {
  height: 3px;
  background-image: linear-gradient(90deg, var(--primary), var(--accent));
  background-repeat: no-repeat;
  background-size: 100% 3px;
  animation: bleed-line 900ms steps(12, end) both;
  margin-bottom: var(--sp-5);
}

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

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .steps-layout { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .section-head-wide { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface);
    box-shadow: var(--shadow-lift);
    border-bottom: var(--rule-heavy) solid var(--primary);
    padding: var(--sp-5);
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { border-bottom: 1px solid var(--rule-soft); }
  .site-nav a { display: block; padding: var(--sp-4) 0; font-size: var(--fs-200); }
  .header-cta .btn { display: none; }
  .header-inner { position: relative; }
  .author-head { grid-template-columns: 1fr; }
  .author-portrait { max-width: 240px; }
}

@media (max-width: 620px) {
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip div { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .trust-strip div:last-child { border-bottom: 0; }
  .field-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .results-strip div { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .step-list li { padding-left: 62px; }
  .step-list li::before { font-size: 2.3rem; }
  .plate-tag { right: 8px; }
}

@media (max-width: 400px) {
  .wrap, .wrap-tight { padding-inline: var(--sp-4); }
  .btn { font-size: 1.15rem; padding: 0.62rem 1.1rem 0.5rem; }
}

@media (min-width: 1500px) {
  :root { --wrap: 1360px; }
}

/* --------------------------------------------------- reduced motion, print */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .flip-in { opacity: 1; transform: none; filter: none; clip-path: none; }
  .bleed-rule { animation: none; }
}

@media print {
  body { background: #FFFFFF; color: #000000; }
  .site-header, .site-footer, .nav-toggle, .btn { display: none; }
}

/* ================================================================ magazine */
/* Ink and Ledger. Flash sheet panels, heavy rules and halftone, built only    */
/* from the tokens above. Nothing new is introduced here.                      */

.mag-index-hero {
  padding: clamp(var(--sp-7), 7vw, var(--sp-9)) 0 var(--sp-6);
  border-bottom: var(--rule-heavy) double var(--rule);
  background-image: var(--halftone-red);
  background-size: 6px 6px;
}
.mag-index-hero h1 { font-size: var(--fs-800); text-wrap: balance; }
.mag-index-note {
  font-size: var(--fs-200);
  color: var(--muted);
  max-width: 70ch;
  border-left: var(--rule-heavy) solid var(--primary);
  padding-left: var(--sp-4);
  margin-top: var(--sp-5);
}
.mag-index-note time { color: var(--accent-deep); }

.mag-standfirst {
  font-size: var(--fs-500);
  line-height: 1.62;
  color: var(--ink-dim);
  max-width: 66ch;
  margin-top: var(--sp-4);
}

.mag-index-list { padding-top: var(--sp-7); }

/* ------------------------------------------------------- index card grid */

.mag-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
}

.mag-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--rule-mid) solid var(--rule);
  box-shadow: var(--shadow-cut);
  position: relative;
}
.mag-card::after {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid var(--rule-soft);
  pointer-events: none;
}
.mag-card:hover { background: var(--surface-2); border-color: var(--accent); }

.mag-card-plate { display: block; border-bottom: var(--rule-heavy) solid var(--primary); }
.mag-card-plate img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04) brightness(1.04);
}
.mag-card:hover .mag-card-plate img { filter: saturate(1) contrast(1.02) brightness(1.1); }

.mag-card-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1 1 auto; }
.mag-card-angle {
  font-size: var(--fs-100);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0;
}
.mag-card-title { font-size: 1.55rem; letter-spacing: 0.05em; margin: 0; text-wrap: balance; }
.mag-card-title a { color: var(--ink); text-decoration: none; }
.mag-card-title a:hover { color: var(--primary); }
.mag-card-dek { font-size: var(--fs-200); color: var(--ink-dim); margin: 0; }
.mag-card-meta {
  margin: auto 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the lead card runs across the full grid, image beside the copy */
.mag-card.lead {
  grid-column: 1 / -1;
  flex-direction: row;
  border-color: var(--accent);
  box-shadow: var(--shadow-gold);
}
.mag-card.lead .mag-card-plate {
  flex: 0 0 52%;
  border-bottom: 0;
  border-right: var(--rule-heavy) solid var(--primary);
}
.mag-card.lead .mag-card-plate img { height: 100%; aspect-ratio: auto; min-height: 320px; }
.mag-card.lead .mag-card-body { padding: var(--sp-6); justify-content: center; gap: var(--sp-4); }
.mag-card.lead .mag-card-title { font-size: clamp(1.9rem, 1.3rem + 1.7vw, 2.9rem); }
.mag-card.lead .mag-card-dek { font-size: var(--fs-300); color: var(--ink); }
.mag-card.lead .mag-card-angle::after {
  content: "Lead story";
  margin-left: var(--sp-3);
  padding: 2px var(--sp-2);
  background: var(--primary);
  color: var(--on-primary);
}

.mag-index-cta { max-width: 74ch; }
.mag-index-cta p { color: var(--ink-dim); }
.mag-index-cta .btn { margin-top: var(--sp-4); }

/* --------------------------------------------------------- article header */

.mag-masthead {
  padding: var(--sp-7) 0 var(--sp-6);
  border-bottom: var(--rule-heavy) double var(--rule);
  background-image: var(--halftone-gold);
  background-size: 6px 6px;
}
.mag-masthead h1 { font-size: var(--fs-800); max-width: 20ch; text-wrap: balance; }
.mag-masthead .crumbs { max-width: 80ch; }

.mag-byline {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: var(--rule-mid) solid var(--rule);
  max-width: 66ch;
}
.mag-byline-portrait {
  width: 56px; height: 56px;
  flex: 0 0 auto;
  object-fit: cover;
  border: var(--rule-mid) solid var(--accent);
  filter: saturate(0.95) contrast(1.02) brightness(1.04);
}
.mag-byline-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.mag-byline-name a { color: var(--accent-deep); text-decoration: none; }
.mag-byline-name a:hover { text-decoration: underline; }
.mag-byline-meta {
  margin: var(--sp-1) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.mag-byline-meta time { color: var(--ink-dim); }

.mag-figure { margin: var(--sp-7) auto var(--sp-7); }
.mag-figure .plate-frame {
  position: relative;
  border: var(--rule-heavy) solid var(--ink);
  box-shadow: var(--shadow-lift);
  background: var(--bg-tint);
}
.mag-figure img { filter: saturate(0.95) contrast(1.03) brightness(1.05); }
.mag-figure .plate-tag { bottom: 10px; }

/* ------------------------------------------------------- article body type */

.mag-body {
  max-width: 68ch;
  margin-inline: auto;
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--ink-dim);
}
.mag-body > h2 {
  font-size: var(--fs-700);
  color: var(--ink);
  margin: var(--sp-8) 0 var(--sp-4);
  padding-top: var(--sp-4);
  border-top: var(--rule-heavy) double var(--rule);
}
.mag-body > h3 {
  font-size: var(--fs-600);
  color: var(--accent-deep);
  margin: var(--sp-6) 0 var(--sp-3);
}
.mag-body > p { margin: 0 0 var(--sp-5); }
.mag-body ul, .mag-body ol { margin: 0 0 var(--sp-5); padding-left: 1.3rem; }
.mag-body li { margin-bottom: var(--sp-3); }
.mag-body li::marker { color: var(--primary); }
.mag-body a { color: var(--accent-deep); }
/* a button inside the article body keeps the button's own type colour */
.mag-body a.btn-primary { color: var(--on-primary); }
.mag-body a.btn-ghost { color: var(--accent-deep); }
.mag-body a.btn-ghost:hover { color: var(--ink); }
.mag-body a.btn-bone { color: var(--bg); }
.mag-body a.btn-bone:hover { color: var(--on-primary); }

.mag-body blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  background: var(--surface);
  border-left: var(--rule-slab) solid var(--primary);
  color: var(--ink);
  font-size: var(--fs-400);
}
.mag-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-6);
  font-size: var(--fs-200);
  display: block;
  overflow-x: auto;
}
.mag-body th, .mag-body td {
  border: 1px solid var(--rule-soft);
  padding: var(--sp-3);
  text-align: left;
  vertical-align: top;
}
.mag-body th {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bg-tint);
  color: var(--accent-deep);
}
.mag-body tbody tr:nth-child(even) { background: var(--bone-wash); }

.inline-read {
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: var(--rule-mid) solid var(--rule);
  border-left: var(--rule-slab) solid var(--accent);
  font-size: var(--fs-200);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.inline-read a {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  display: inline-block;
}
.inline-read a:hover { text-decoration: underline; }

/* ----------------------------------------------------- call to action box */

.mag-cta {
  margin: var(--sp-8) 0 var(--sp-7);
  padding: var(--sp-6) var(--sp-5);
  background: var(--surface);
  border: var(--rule-mid) solid var(--primary-deep);
  box-shadow: var(--shadow-cut);
  background-image: var(--halftone-red);
  background-size: 5px 5px;
}
.mag-cta h2 { font-size: var(--fs-600); margin-bottom: var(--sp-4); color: var(--ink); }
.mag-cta p { color: var(--ink-dim); font-size: var(--fs-300); }

/* ---------------------------------------------------------- author box */

.mag-author {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-6) var(--sp-5);
  background: var(--bg-tint);
  border-top: var(--rule-heavy) double var(--rule);
  border-bottom: var(--rule-heavy) double var(--rule);
  margin-bottom: var(--sp-7);
}
.mag-author img {
  width: 160px; height: 160px;
  object-fit: cover;
  border: var(--rule-mid) solid var(--accent);
  filter: saturate(0.95) contrast(1.02) brightness(1.04);
}
.mag-author h2 { font-size: 1.7rem; letter-spacing: 0.08em; margin-bottom: var(--sp-3); }
.mag-author p { color: var(--ink-dim); font-size: var(--fs-200); }
.mag-author p + p { margin-top: var(--sp-4); }

/* ------------------------------------------------------- read also cards */

.mag-related-wrap {
  padding: var(--sp-8) 0 var(--sp-9);
  border-top: var(--rule-heavy) solid var(--primary);
  background: var(--bg-tint);
}
.mag-related-head { margin-bottom: var(--sp-6); }
.mag-related-head h2 { font-size: var(--fs-700); }
.mag-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.mag-rel {
  background: var(--surface);
  border: var(--rule-mid) solid var(--rule);
  display: flex;
  flex-direction: column;
}
.mag-rel:hover { border-color: var(--accent); background: var(--surface-2); }
.mag-rel-plate { display: block; border-bottom: var(--rule-mid) solid var(--primary-deep); }
.mag-rel-plate img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04) brightness(1.03);
}
.mag-rel:hover .mag-rel-plate img { filter: saturate(1) contrast(1.02) brightness(1.09); }
.mag-rel-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.mag-rel-date {
  margin: 0;
  font-size: var(--fs-100);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.mag-rel-title { font-size: 1.3rem; letter-spacing: 0.05em; margin: 0; }
.mag-rel-title a { color: var(--ink); text-decoration: none; }
.mag-rel-title a:hover { color: var(--primary); }
.mag-rel-dek { margin: 0; font-size: var(--fs-100); color: var(--muted); line-height: 1.65; }
.mag-related-more {
  margin-top: var(--sp-6);
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.mag-related-more a { text-decoration: none; border-bottom: var(--rule-mid) solid var(--primary); }

/* --------------------------------------------- home page magazine section */

.home-mag-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.home-mag-foot { margin-top: var(--sp-6); }

/* ------------------------------------ published article list, author page */

.author-articles {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  border-top: var(--rule-mid) solid var(--rule);
}
.author-articles li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: var(--rule-hair) solid var(--rule-soft);
}
.author-articles a {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  flex: 1 1 20ch;
}
.author-articles a:hover { color: var(--primary); text-decoration: underline; }
.author-articles time {
  font-size: var(--fs-100);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ----------------------------------------------- magazine responsive rules */

@media (max-width: 1080px) {
  .mag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-related, .home-mag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-card.lead .mag-card-plate img { min-height: 260px; }
}

@media (max-width: 780px) {
  .mag-grid { grid-template-columns: 1fr; }
  .mag-related, .home-mag-grid { grid-template-columns: 1fr; }
  .mag-card.lead { flex-direction: column; }
  .mag-card.lead .mag-card-plate {
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: var(--rule-heavy) solid var(--primary);
  }
  .mag-card.lead .mag-card-plate img { aspect-ratio: 3 / 2; min-height: 0; height: auto; }
  .mag-card.lead .mag-card-body { padding: var(--sp-5); }
  .mag-author { grid-template-columns: 1fr; }
  .mag-author img { width: 120px; height: 120px; }
  .mag-masthead h1 { max-width: none; }
}

@media (max-width: 480px) {
  .mag-body { font-size: var(--fs-300); }
  .mag-byline { flex-wrap: wrap; gap: var(--sp-3); }
  .mag-byline-meta { gap: var(--sp-1) var(--sp-3); }
  .mag-card-body, .mag-rel-body { padding: var(--sp-4); }
  .mag-card-title { font-size: 1.35rem; }
  .mag-cta { padding: var(--sp-5) var(--sp-4); }
  .mag-author { padding: var(--sp-5) var(--sp-4); }
  .inline-read { padding: var(--sp-4); }
  .mag-figure { margin: var(--sp-6) auto; }
  .mag-figure .plate-frame { border-width: var(--rule-mid); }
  .author-articles a { font-size: 1.15rem; }
  .author-articles li { padding: var(--sp-3) 0; }
  .mag-index-hero h1 { font-size: var(--fs-700); }
  .mag-masthead h1 { font-size: var(--fs-700); }
}



/* Network strip: five sibling products, rotated so every site is linked the same
   number of times. Spans the full footer grid rather than adding a fifth column,
   because each footer declares a fixed column count and a fifth item would wrap. */
.site-network { grid-column: 1 / -1; flex-basis: 100%; width: 100%;
  margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.site-network h2 { font: inherit; font-size: 0.72rem; font-weight: 600; color: var(--accent-lift);
  letter-spacing: 0.09em; text-transform: uppercase; margin: 0 0 0.7rem; opacity: 0.72; }
.site-network ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-network li { margin-bottom: 0; }
.site-network li + li { margin-top: 0; }
.site-network a { font-size: 0.86rem; text-decoration: none; opacity: 0.9;
  border-bottom: 1px solid transparent; }
.site-network a:hover, .site-network a:focus-visible { opacity: 1; border-bottom-color: currentColor; }
@media (max-width: 620px) { .site-network ul { gap: 0.45rem 1.1rem; } }


/* Decorative bleed guard. Several sections intentionally hang a rotated or offset
   pseudo element past the viewport edge. overflow-x: clip contains them without
   creating a scroll container, so position: sticky keeps working, unlike overflow
   hidden. Genuine content overflow is still reported by the element level check in
   the browser pass. */
html { overflow-x: clip; }
body { overflow-x: clip; }


/* Wide content on phones. Class names for the prose wrapper differ from site to site,
   so this targets tables and pre blocks directly: they scroll inside their own box
   rather than pushing cells past the right edge, per the build contract. */
@media (max-width: 700px) {
  table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { overflow-wrap: anywhere; }
  pre { overflow-x: auto; max-width: 100%; }
}