/* =========================================================================
   ProofRoom, proofroomapp.com
   Design system: print viewing room. Warm paper white walls in daylight,
   near black ink and one deep magenta signal. Syne over DM Sans. Full bleed
   imagery held inside thin mat frames with crop marks.
   ========================================================================= */

:root {
  /* --- brief palette --------------------------------------------------- */
  --bg: #FAF7F8;
  --surface: #FFFFFF;
  --ink: #17141A;
  --primary: #A21A5B;
  --accent: #F2C14E;
  --muted: #6B6270;

  /* --- derived shades and tints ---------------------------------------- */
  --bg-deep: #17141A;       /* the one dark band on the site: the footer floor */
  --surface-2: #F6F1F4;
  --surface-3: #C7BFC9;     /* scrollbar thumb, dark enough to see on paper */
  --ink-soft: #322D38;      /* 13.4:1 on paper */
  --ink-quiet: #3E3846;     /* running body text, 10.6:1 on paper */
  --primary-lift: #7C1245;  /* hover: on a light ground the signal deepens */
  --primary-deep: #6A0F3B;
  --primary-veil: color-mix(in srgb, var(--primary) 10%, transparent);
  --primary-mist: color-mix(in srgb, var(--primary) 6%, transparent);
  --accent-ink: #8A5E0A;    /* accent at text weight, 5.3:1 on paper */
  --accent-deep: #B07C12;   /* accent at rule weight, 3.6:1 on paper */
  --accent-veil: color-mix(in srgb, var(--accent) 30%, transparent);
  --paper: #FFFFFF;
  --paper-warm: #F3EEF1;
  --frame-void: #EBE4E8;    /* the mat well a photograph sits in */

  /* --- lines ----------------------------------------------------------- */
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --line-soft: color-mix(in srgb, var(--ink) 9%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 28%, transparent);
  --line-signal: color-mix(in srgb, var(--primary) 55%, transparent);

  /* --- spacing scale --------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.75rem;
  --s-8: 4rem;
  --s-9: 5.5rem;
  --s-10: 7.5rem;

  /* --- radii ----------------------------------------------------------- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* --- shadow ---------------------------------------------------------- */
  --shadow-lift: 0 2px 5px rgba(23, 20, 26, 0.05), 0 18px 44px rgba(23, 20, 26, 0.10);
  --shadow-frame: 0 1px 0 rgba(23, 20, 26, 0.05), 0 22px 50px rgba(23, 20, 26, 0.11);
  --signal-ring: 0 0 0 1px var(--primary), 0 16px 36px color-mix(in srgb, var(--primary) 16%, transparent);

  /* --- type scale ------------------------------------------------------ */
  --font-display: "Syne", "Trebuchet MS", "Gill Sans", sans-serif;
  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: 1rem;
  --t-md: 1.0625rem;
  --t-lg: 1.25rem;
  --t-xl: 1.5rem;
  --t-2xl: 2rem;
  --t-3xl: 2.75rem;
  --t-4xl: clamp(2.4rem, 6.2vw, 4.4rem);
  --track-wide: 0.24em;

  /* --- layout ---------------------------------------------------------- */
  --wrap: 1220px;
  --wrap-narrow: 780px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --header-h: 74px;
}

/* =========================================================================
   Reset and base
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink-quiet);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.68;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Daylight: two soft lamps washing the paper wall, plus a print grain sheet
   over the whole page so flat whites never read as flat. */
body::before {
  content: "";
  position: fixed;
  inset: -20vh -10vw auto -10vw;
  height: 120vh;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52vw 46vh at 78% 4%, var(--primary-veil), transparent 68%),
    radial-gradient(44vw 38vh at 8% 24%, var(--accent-veil), transparent 72%),
    linear-gradient(180deg, var(--surface), transparent 42%);
  opacity: 0.75;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(23,20,26,0.07) 0.6px, transparent 0.9px),
    radial-gradient(circle at 62% 68%, rgba(23,20,26,0.05) 0.5px, transparent 0.9px),
    radial-gradient(circle at 84% 34%, rgba(23,20,26,0.09) 0.7px, transparent 1px);
  background-size: 7px 7px, 11px 11px, 13px 13px;
}

body > * { position: relative; z-index: 2; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: var(--t-4xl); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); }
h3 { font-size: var(--t-lg); letter-spacing: -0.015em; }
h4 { font-size: var(--t-base); letter-spacing: 0.02em; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration-color: var(--line-signal); text-underline-offset: 4px; }
a:hover { color: var(--primary-lift); }

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

strong { color: var(--ink); font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-8) 0; }

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

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

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

.skip-link {
  position: absolute;
  top: -80px;
  left: var(--gutter);
  z-index: 999;
  background: var(--primary);
  color: #FFFFFF;
  padding: 0.7rem 1.15rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: top 160ms ease;
}
.skip-link:focus { top: 12px; color: #FFFFFF; }

/* =========================================================================
   Layout primitives
   ========================================================================= */

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

.section { padding-block: clamp(3.75rem, 8vw, var(--s-10)); position: relative; }
.section + .section { border-top: 1px solid var(--line-soft); }
.section-wall { background: linear-gradient(180deg, var(--paper-warm), var(--bg)); }
.section-surface { background: var(--surface); }

/* The frame number: a contact sheet index for every band of the page. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--muted);
  margin-bottom: var(--s-5);
}
.eyebrow .frame-no {
  color: #FFFFFF;
  background: var(--primary);
  padding: 0.2rem 0.45rem 0.16rem;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}
.eyebrow .rule {
  width: clamp(28px, 8vw, 84px);
  height: 1px;
  background: linear-gradient(90deg, var(--line-signal), transparent);
}

.section-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head p { color: var(--ink-quiet); font-size: var(--t-lg); line-height: 1.55; }

.lede { font-size: var(--t-lg); line-height: 1.56; color: var(--ink-soft); }

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  --btn-bg: var(--primary);
  --btn-fg: #FFFFFF;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.92rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: var(--r-1);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
/* the offset print border that slides under the button on hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 5px -5px -5px 5px;
  border: 1px solid var(--line-signal);
  opacity: 0;
  transition: inset 200ms ease, opacity 200ms ease;
  pointer-events: none;
}
.btn:hover { background: var(--primary-lift); color: #FFFFFF; transform: translateY(-2px); }
.btn:hover::after { inset: 7px -7px -7px 7px; opacity: 1; }
.btn:active { transform: translateY(0); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.btn-ghost::after { border-color: var(--line-strong); }

.btn-paper { --btn-bg: var(--paper); --btn-fg: var(--ink); border-color: var(--line-strong); }
.btn-paper:hover { background: var(--paper-warm); color: var(--ink); }

.btn-sm { padding: 0.62rem 1.05rem; font-size: 0.8125rem; }
.btn-block { display: flex; width: 100%; }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* =========================================================================
   Header
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid transparent;
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom-color: var(--line);
  box-shadow: 0 14px 32px rgba(23, 20, 26, 0.07);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.wordmark svg { width: 30px; height: 30px; display: block; }
.wordmark .mark-tail { color: var(--primary); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 40px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="false"] .icon-close { display: none; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  font-size: 0.9rem;
  color: var(--ink-quiet);
  text-decoration: none;
  padding: 0.4rem 0;
  position: relative;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--primary);
  transition: right 220ms ease;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { right: 0; }

.header-cta { margin-left: var(--s-4); }

/* Exactly one call to action in the header. The nav list carries its own so the
   mobile drawer keeps a button; above the drawer breakpoint that copy stays out
   of the row and .header-cta beside the nav is the only one on screen. */
.site-nav .nav-cta { display: none; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
    padding: var(--s-4) var(--gutter) var(--s-6);
    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(--line-soft); margin: 0; }
  .site-nav a { display: block; padding: 0.95rem 0; font-size: 1.05rem; }
  .site-nav .nav-cta { display: block; margin-top: var(--s-5); }
  .site-nav .nav-cta a { color: #FFFFFF; }
}

/* =========================================================================
   Mat frame: the core image component. A thin passe partout line, an inner
   hairline and four crop marks, exactly how a print gets trimmed.
   ========================================================================= */

.mat {
  position: relative;
  padding: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--surface), var(--paper-warm));
  box-shadow: var(--shadow-frame);
}
.mat::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--line-soft);
  pointer-events: none;
  z-index: 2;
}
.mat::after {
  content: "";
  position: absolute;
  inset: -9px;
  pointer-events: none;
  background:
    linear-gradient(var(--line-signal), var(--line-signal)) left top / 16px 1px no-repeat,
    linear-gradient(var(--line-signal), var(--line-signal)) left top / 1px 16px no-repeat,
    linear-gradient(var(--line-signal), var(--line-signal)) right bottom / 16px 1px no-repeat,
    linear-gradient(var(--line-signal), var(--line-signal)) right bottom / 1px 16px no-repeat;
}
.mat-figure { margin: 0; }
.mat-viewport {
  position: relative;
  overflow: hidden;
  background: var(--frame-void);
}
.mat-viewport img {
  width: 100%;
  display: block;
  transform-origin: var(--mx, 50%) var(--my, 50%);
  transition: transform 720ms cubic-bezier(0.18, 0.7, 0.24, 1), filter 720ms ease;
  will-change: transform;
}
.mat-viewport:hover img { transform: scale(1.07); filter: saturate(1.06) contrast(1.03); }
.mat-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.7rem;
  padding: 0 2px;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 600;
}
.mat-caption b { color: var(--accent-ink); font-weight: 700; }

/* sprocket rail, used on the edge of the proof strip */
.sprockets {
  height: 14px;
  background-image: repeating-linear-gradient(90deg,
    transparent 0 10px,
    color-mix(in srgb, var(--ink) 18%, transparent) 10px 20px);
  border-block: 1px solid var(--line-soft);
}

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
  position: relative;
  padding-top: clamp(2.75rem, 7vw, 5.25rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-signal), transparent);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-copy { max-width: 36rem; }
/* Home hero headline, one step down from the global h1. Scoped to .hero instead
   of retuning --t-4xl, because that token also sizes the h1 on the magazine
   index, the author page and the prose pages, which keep their present size.
   Same face and weight, still fluid, about a fifth smaller at the desktop cap. */
.hero h1 { font-size: clamp(2rem, 4.9vw, 3.4rem); }
.hero h1 span.hl {
  color: var(--primary);
  display: inline-block;
  position: relative;
}
.hero h1 span.hl::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.06em;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent-deep));
}
.hero-sub { font-size: var(--t-lg); color: var(--ink-soft); line-height: 1.55; margin-top: var(--s-5); }
.hero .cta-row { margin-top: var(--s-6); }

.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  background: var(--line);
  border: 1px solid var(--line);
}
.trust-strip div {
  background: var(--surface);
  padding: 0.95rem 1rem;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--muted);
}
.trust-strip b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.hero-frame { position: relative; }
.hero-frame .mat { transform: rotate(-0.35deg); }
.hero-badge {
  position: absolute;
  right: -10px;
  bottom: 22px;
  z-index: 4;
  background: var(--surface);
  color: var(--ink-quiet);
  border: 1px solid var(--line);
  padding: 0.75rem 0.95rem;
  max-width: 15rem;
  box-shadow: var(--shadow-lift);
  font-size: var(--t-sm);
  line-height: 1.4;
}
.hero-badge b { display: block; font-family: var(--font-display); font-weight: 800; color: var(--primary-deep); }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; }
  .hero-badge { right: 8px; bottom: 12px; }
}
@media (max-width: 520px) {
  .trust-strip { grid-template-columns: 1fr; }
  .hero-badge { position: static; max-width: none; margin-top: var(--s-4); }
}

/* =========================================================================
   Problem cards
   ========================================================================= */

.pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
}
.pain {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  position: relative;
  transition: background-color 260ms ease;
}
.pain:hover { background: var(--paper-warm); }
.pain h3 { margin-bottom: 0.6rem; }
.pain p { font-size: var(--t-base); color: var(--muted); }
.pain .cost {
  display: inline-block;
  margin-top: var(--s-4);
  padding-top: 0.65rem;
  border-top: 1px solid var(--line-signal);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent-ink);
  letter-spacing: -0.01em;
}
.pain-index {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  color: var(--muted);
  display: block;
  margin-bottom: 0.9rem;
}

/* =========================================================================
   Steps
   ========================================================================= */

.steps-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before {
  content: "";
  position: absolute;
  left: 27px; top: 12px; bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, var(--line-signal), var(--line-soft));
}
.step {
  position: relative;
  padding-left: 4.6rem;
  padding-bottom: var(--s-7);
  margin: 0;
}
.step:last-child { padding-bottom: 0; }
.step .num {
  position: absolute;
  left: 0; top: -6px;
  width: 55px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--primary);
  background: var(--bg);
  padding-block: 4px;
}
.step h3 { margin-bottom: 0.45rem; }
.step p { color: var(--muted); font-size: var(--t-base); margin: 0; }
.step .meta {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-ink);
}

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

/* =========================================================================
   Features
   ========================================================================= */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
}
.feature {
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  padding: clamp(1.5rem, 2.8vw, 2.15rem);
  position: relative;
  transition: background-color 280ms ease, transform 280ms ease;
}
.feature::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--primary);
  transition: width 320ms ease;
}
.feature:hover { background: var(--paper-warm); }
.feature:hover::after { width: 100%; }
.feature-icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  margin-bottom: var(--s-4);
  color: var(--primary);
  background: var(--primary-mist);
}
.feature-icon svg { width: 24px; height: 24px; }
.feature h3 { margin-bottom: 0.5rem; }
.feature p { font-size: var(--t-base); color: var(--muted); margin: 0; }

/* =========================================================================
   Outcomes, presented as a horizontal proof strip that snaps like a
   lightbox of frames being pulled across a table.
   ========================================================================= */

.strip-shell { position: relative; }
.proof-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16.5rem, 1fr);
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-block: var(--s-5);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.proof-strip::-webkit-scrollbar { height: 6px; }
.proof-strip::-webkit-scrollbar-thumb { background: var(--surface-3); }
.outcome {
  scroll-snap-align: start;
  border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--surface), var(--bg));
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  min-height: 100%;
  position: relative;
}
.outcome::before {
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 9px; height: 9px;
  border: 1px solid var(--primary);
  transform: rotate(45deg);
}
.outcome .figure {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.outcome .figure em { font-style: normal; color: var(--primary); }
.outcome .label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--t-xs);
  color: var(--accent-ink);
  display: block;
  margin-bottom: var(--s-4);
}
.outcome p { font-size: var(--t-base); color: var(--muted); margin: 0; }

/* On a phone the strip stops being a strip. Pulling frames sideways parks
   three of the four proofs off the edge of the screen, so they stack down the
   page instead and every figure is readable without dragging. */
@media (max-width: 720px) {
  .proof-strip {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .outcome { scroll-snap-align: none; }
}

/* =========================================================================
   Testimonials and results
   ========================================================================= */

.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: var(--s-5);
}
.testimonial {
  position: relative;
  margin: 0;
  padding: clamp(1.6rem, 2.8vw, 2.2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--primary);
}
.testimonial::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--line-soft);
  pointer-events: none;
}
.testimonial p {
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-soft);
  position: relative;
}
.testimonial p::first-letter { color: var(--primary); font-weight: 700; }
.testimonial footer {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.5;
}
.testimonial footer b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.testimonial footer .place { color: var(--accent-ink); }

.results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  margin-top: var(--s-6);
  background: var(--line);
  border: 1px solid var(--line);
}
.results div { background: var(--surface); padding: 1.25rem 1.35rem; }
.results .n {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.03em;
  display: block;
  line-height: 1.05;
}
.results span.t { font-size: var(--t-sm); color: var(--muted); display: block; margin-top: 0.35rem; }

/* =========================================================================
   Pricing
   ========================================================================= */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: var(--s-5);
  align-items: stretch;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.8vw, 2.15rem);
  background: var(--surface);
  border: 1px solid var(--line);
}
.tier::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--line-soft);
  pointer-events: none;
}
.tier h3 { font-size: 1.35rem; margin-bottom: 0.2rem; }
.tier .who { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s-5); }
.tier .price {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--ink);
  line-height: 1;
}
.tier .price span { font-size: 0.95rem; font-family: var(--font-body); font-weight: 400; color: var(--muted); letter-spacing: 0; }
.tier ul { list-style: none; margin: var(--s-5) 0 var(--s-6); padding: 0; }
.tier li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--t-base);
  color: var(--ink-quiet);
  margin-bottom: 0.6rem;
}
.tier li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 9px; height: 9px;
  border: 1px solid var(--primary);
}
.tier .btn { margin-top: auto; }
.tier-featured {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--primary) 7%, var(--surface)));
  border-color: var(--primary);
  box-shadow: var(--signal-ring);
}
.tier-featured::after { border-color: color-mix(in srgb, var(--primary) 22%, transparent); }
.tier-featured h3, .tier-featured .price { color: var(--primary-deep); }
.tier-featured .who, .tier-featured .price span { color: var(--muted); }
.tier-featured li { color: var(--ink-quiet); }
.tier-featured li::before { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 26%, transparent); }
.tier-flag {
  position: absolute;
  top: -1px; right: -1px;
  background: var(--primary);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  z-index: 3;
}
.billing-note {
  margin-top: var(--s-6);
  font-size: var(--t-sm);
  color: var(--muted);
  border-left: 2px solid var(--accent-deep);
  padding-left: var(--s-4);
  max-width: 46rem;
}

/* =========================================================================
   FAQ
   ========================================================================= */

.faq-list { border-top: 1px solid var(--line); max-width: 54rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.35rem 0;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  text-align: left;
  cursor: pointer;
  transition: color 200ms ease;
}
.faq-q:hover { color: var(--primary-lift); }
.faq-sign {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  position: relative;
  border: 1px solid var(--line-strong);
  margin-top: 2px;
}
.faq-sign::before, .faq-sign::after {
  content: "";
  position: absolute;
  background: var(--primary);
  transition: transform 260ms ease, opacity 200ms ease;
}
.faq-sign::before { left: 5px; right: 5px; top: 50%; height: 1px; transform: translateY(-50%); }
.faq-sign::after { top: 5px; bottom: 5px; left: 50%; width: 1px; transform: translateX(-50%); }
.faq-q[aria-expanded="true"] .faq-sign::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }
.faq-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 340ms ease, opacity 260ms ease, padding 260ms ease;
  opacity: 0;
  padding-bottom: 0;
}
.faq-a[data-open="true"] { max-height: 40rem; opacity: 1; padding-bottom: 1.5rem; }
.faq-a p { font-size: var(--t-base); color: var(--muted); max-width: 46rem; }

/* =========================================================================
   Contact
   ========================================================================= */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-aside p { color: var(--ink-quiet); }
.contact-aside .hook { font-size: var(--t-lg); color: var(--ink); line-height: 1.5; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.contact-points { list-style: none; padding: 0; margin: var(--s-6) 0 0; }
.contact-points li {
  padding-left: 1.7rem;
  position: relative;
  font-size: var(--t-base);
  color: var(--muted);
  margin-bottom: 0.75rem;
}
.contact-points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 10px; height: 10px;
  border: 1px solid var(--accent-deep);
  border-radius: 50%;
}

.form-shell {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  position: relative;
}
.form-shell::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--line-soft);
  pointer-events: none;
}
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-wide { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  padding: 0.72rem 0.85rem;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--primary) 50%), linear-gradient(135deg, var(--primary) 50%, transparent 50%);
  background-position: calc(100% - 20px) 1.25rem, calc(100% - 14px) 1.25rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--primary-lift);
  background: color-mix(in srgb, var(--primary) 8%, var(--bg));
}
.err {
  font-size: var(--t-sm);
  color: var(--primary-lift);
  min-height: 0;
  display: none;
}
.err.is-shown { display: block; }
.consent {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: var(--t-sm);
  color: var(--muted);
}
.consent input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; accent-color: var(--primary); }
.form-actions { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.form-note { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s-4); }
.form-note a { color: var(--accent-ink); }

@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Author byline block, used near the end of every page
   ========================================================================= */

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-5);
  align-items: center;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-deep);
  background: var(--surface);
  padding: 1.15rem 1.35rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: var(--t-sm);
  color: var(--muted);
}
.byline b { font-family: var(--font-display); color: var(--ink); font-size: 0.95rem; }
.byline a { color: var(--accent-ink); }

/* =========================================================================
   Footer
   ========================================================================= */

/* The single dark band on the site, kept from the original darkroom so the
   daylight page lands on a floor. Every inherited token is redeclared here:
   custom properties are substituted where they are declared, so the hairlines
   and text colours have to be restated to read light on ink. */
.site-footer {
  --ink: #F7F4F6;
  --ink-soft: #E4DFE6;
  --ink-quiet: #D8D2D9;
  --muted: #A79FAD;
  --surface: #221E27;
  --primary: #E8639C;
  --primary-lift: #FF93BF;
  --accent-ink: var(--accent);
  --accent-deep: var(--accent);
  --line: color-mix(in srgb, #F7F4F6 16%, transparent);
  --line-soft: color-mix(in srgb, #F7F4F6 10%, transparent);
  --line-strong: color-mix(in srgb, #F7F4F6 30%, transparent);
  --line-signal: color-mix(in srgb, #E8639C 55%, transparent);
  background: var(--bg-deep);
  border-top: 3px solid #A21A5B;
  color: var(--ink-quiet);
  padding-top: clamp(3rem, 6vw, 4.75rem);
  margin-top: 0;
}
/* the brand star is a hard coded fill in the markup: lift it on the dark floor */
.site-footer .wordmark svg [fill="#A21A5B"] { fill: var(--primary); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footer-brand .wordmark { margin-bottom: var(--s-4); }
.footer-brand p { font-size: var(--t-sm); color: var(--muted); max-width: 22rem; }
.social {
  display: flex;
  gap: 0.55rem;
  margin-top: var(--s-5);
  list-style: none;
  padding: 0;
}
.social li { margin: 0; }
.social a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--ink-quiet);
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.social a:hover { color: var(--bg-deep); background: var(--primary); border-color: var(--primary); }
.social svg { width: 17px; height: 17px; }

.footer-col h4 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--accent-ink);
  margin-bottom: var(--s-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.65rem; }
.footer-col a { font-size: 0.9rem; color: var(--muted); text-decoration: none; }
.footer-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.footer-col .pub { font-size: var(--t-sm); color: var(--muted); margin-top: var(--s-4); }

.footer-base {
  border-top: 1px solid var(--line);
  padding-block: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--s-5);
  justify-content: space-between;
  font-size: var(--t-sm);
  color: var(--muted);
}
.footer-base a { color: var(--muted); }

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

/* =========================================================================
   Prose pages: legal, privacy, terms, site map, thanks, 404
   ========================================================================= */

.page-head {
  padding-top: clamp(2.5rem, 6vw, 4.25rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--line);
}
.page-head p { color: var(--ink-quiet); max-width: 44rem; font-size: var(--t-lg); }
.page-head .stamp {
  display: inline-block;
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  padding: 0.3rem 0.6rem;
}

.prose { max-width: 48rem; padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.prose h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
}
.prose h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { font-size: 1.05rem; margin-top: var(--s-6); }
.prose p, .prose li { color: var(--ink-quiet); font-size: var(--t-base); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose a { color: var(--accent-ink); }
.prose .fact-list {
  list-style: none;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}
.prose .fact-list li {
  margin: 0;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
}
.prose .fact-list li:last-child { border-bottom: 0; }
.prose .fact-list b { font-family: var(--font-display); color: var(--ink); margin-right: 0.4rem; }

.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.map-card { border: 1px solid var(--line); background: var(--surface); padding: 1.4rem 1.5rem; }
.map-card h2 { font-size: 1.1rem; margin: 0 0 var(--s-4); border: 0; padding: 0; }
.map-card ul { list-style: none; margin: 0; padding: 0; }
.map-card li { margin-bottom: 0.9rem; font-size: var(--t-sm); color: var(--muted); }
.map-card a { font-family: var(--font-display); font-weight: 700; color: var(--ink); display: block; text-decoration: none; font-size: 0.95rem; }
.map-card a:hover { color: var(--primary-lift); }

/* author page */
.author-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
.author-portrait { position: sticky; top: calc(var(--header-h) + 20px); }
.author-portrait img { width: 100%; filter: grayscale(0.15) contrast(1.03); }
.author-portrait .mat-caption { justify-content: flex-start; }
.author-links { list-style: none; padding: 0; margin: var(--s-5) 0 0; }
.author-links li { margin-bottom: 0.55rem; }
.author-links a { font-size: var(--t-sm); color: var(--ink-quiet); text-decoration: none; display: flex; gap: 0.5rem; align-items: center; }
.author-links a::before { content: ""; width: 14px; height: 1px; background: var(--primary); flex: 0 0 auto; }
.author-links a:hover { color: var(--primary-lift); }
@media (max-width: 800px) {
  .author-layout { grid-template-columns: 1fr; }
  .author-portrait { position: static; max-width: 300px; }
}

/* thanks and 404 */
.center-panel {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}
.center-panel .code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 16vw, 8.5rem);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px var(--primary);
  margin-bottom: var(--s-5);
}
.center-panel .cta-row { justify-content: center; }
.center-panel ul { list-style: none; padding: 0; margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; }
.center-panel ul a { font-size: var(--t-sm); color: var(--accent-ink); }

/* =========================================================================
   Motion: frames rise out of the paper, the way a print comes up in the tray
   ========================================================================= */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 760ms cubic-bezier(0.2, 0.65, 0.3, 1), transform 760ms cubic-bezier(0.2, 0.65, 0.3, 1), filter 900ms ease;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal-img { filter: brightness(1.5) saturate(0.12) contrast(0.88); }
.reveal-img.is-in { filter: none; }
.reveal-d1 { transition-delay: 90ms; }
.reveal-d2 { transition-delay: 180ms; }
.reveal-d3 { transition-delay: 270ms; }
.reveal-d4 { transition-delay: 360ms; }

@keyframes daylight-drift {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.95; }
}
.hero::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -12%;
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 13%, transparent), transparent 64%);
  pointer-events: none;
  z-index: -1;
  animation: daylight-drift 9s ease-in-out infinite;
}

@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 { opacity: 1; transform: none; filter: none; }
  .reveal-img { filter: none; }
  .mat-viewport:hover img { transform: none; }
  .proof-strip { scroll-snap-type: none; }
}

/* =========================================================================
   Small screens
   ========================================================================= */

@media (max-width: 640px) {
  body { font-size: 1rem; }
  /* Chromium can leave a balanced first line wider than its own container at
     phone widths, which pushes the page sideways. Plain wrapping, plus a break
     of last resort for a long domain, keeps every heading inside the gutter. */
  h1, h2, h3, h4 { text-wrap: wrap; overflow-wrap: break-word; }
  .hero-frame .mat { transform: none; }
  .step { padding-left: 3.6rem; }
  .step .num { width: 44px; font-size: 1.9rem; }
  .steps::before { left: 22px; }
  .footer-base { justify-content: flex-start; }
}

@media (min-width: 1440px) {
  :root { --wrap: 1320px; }
}

/* =========================================================================
   The Proof Sheet: the magazine. Index cards are contact sheet frames on the
   gallery wall, the article is a single print hung with a wide white mat.
   Everything below reuses the tokens, the mat frame and the crop mark
   vocabulary already declared at the top of this file.
   ========================================================================= */

/* --- breadcrumb ---------------------------------------------------------- */

.mag-crumbs {
  padding-top: clamp(1.1rem, 3vw, 1.9rem);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.mag-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mag-crumbs li { margin: 0; display: inline-flex; align-items: baseline; gap: 0.55rem; }
.mag-crumbs li + li::before {
  content: "";
  width: 12px;
  height: 1px;
  background: var(--line-signal);
  transform: translateY(-0.28em);
}
.mag-crumbs a { color: var(--muted); text-decoration: none; }
.mag-crumbs a:hover { color: var(--primary-lift); }
.mag-crumbs [aria-current="page"] {
  color: var(--ink-soft);
  display: inline-block;
  max-width: 34rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* small separator dot shared by every meta row in the magazine */
.mag-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--primary);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

/* --- magazine index: masthead ------------------------------------------- */

.mag-index-head { padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(1.75rem, 4vw, 2.75rem); }
.mag-index-head h1 { max-width: 16ch; }
.mag-index-standfirst { max-width: 46rem; }
.mag-index-note {
  max-width: 44rem;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-base);
  color: var(--muted);
}
.mag-index-note a { color: var(--accent-ink); }

.mag-index-grid-section { padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.mag-index-cta .lede { max-width: 46rem; }
.mag-index-cta .mag-cta-act { margin-top: var(--s-6); }

/* --- magazine index: the card grid --------------------------------------- */

.mag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
}

.mag-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  transition: background-color 280ms ease;
}
.mag-card::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--primary);
  transition: width 340ms ease;
  pointer-events: none;
}
.mag-card:hover { background: var(--paper-warm); }
.mag-card:hover::after { width: 100%; }

.mag-card-frame {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--frame-void);
  aspect-ratio: 3 / 2;
  border-bottom: 1px solid var(--line-soft);
}
.mag-card-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 720ms cubic-bezier(0.18, 0.7, 0.24, 1), filter 720ms ease;
}
.mag-card:hover .mag-card-frame img { transform: scale(1.05); filter: saturate(1.05) contrast(1.03); }

.mag-card-copy {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  flex: 1 1 auto;
}
.mag-card-angle {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-ink);
}
.mag-card-title {
  font-size: 1.2rem;
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0;
}
.mag-card-title a { color: var(--ink); text-decoration: none; }
.mag-card-title a:hover { color: var(--primary-lift); }
.mag-card-dek {
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.mag-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  margin: auto 0 0;
  padding-top: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the lead frame: the first article printed at exhibition size */
.mag-card.lead { grid-column: 1 / -1; }
.mag-card.lead::before {
  content: "Latest";
  position: absolute;
  top: 0; left: 0;
  z-index: 3;
  background: var(--primary);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
}
.mag-card.lead .mag-card-frame { aspect-ratio: 16 / 9; border-bottom: 0; }
.mag-card.lead .mag-card-title { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
.mag-card.lead .mag-card-dek { font-size: var(--t-lg); line-height: 1.5; color: var(--ink-quiet); max-width: 40rem; }
.mag-card.lead .mag-card-copy { padding: clamp(1.5rem, 3vw, 2.4rem); gap: 0.7rem; }

@media (min-width: 900px) {
  .mag-card.lead {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .mag-card.lead .mag-card-frame { height: 100%; aspect-ratio: auto; border-right: 1px solid var(--line-soft); }
  .mag-card.lead .mag-card-copy { justify-content: center; }
}

/* --- the three latest articles on the home page -------------------------- */

#magazine .mag-grid { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.mag-home-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-6);
}
.mag-home-foot .note { font-size: var(--t-sm); color: var(--muted); margin: 0; }

/* --- article page: header ------------------------------------------------ */

.mag-head { padding-top: clamp(1.75rem, 4vw, 3rem); }
.mag-head h1 { max-width: 20ch; font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
.mag-standfirst {
  max-width: 42rem;
  margin-top: var(--s-5);
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--ink-soft);
}

.mag-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--t-sm);
  color: var(--muted);
}
.mag-byline-mark {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: 1px solid var(--line-signal);
  background:
    linear-gradient(var(--primary), var(--primary)) center / 7px 1px no-repeat,
    linear-gradient(var(--primary), var(--primary)) center / 1px 7px no-repeat;
}
.mag-by { font-family: var(--font-display); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.mag-by a { color: var(--ink); text-decoration-color: var(--line-signal); }
.mag-by a:hover { color: var(--primary-lift); }
.mag-byline time { color: var(--ink-quiet); }

/* --- article page: the featured print ------------------------------------ */

.mag-figure-wrap { padding-top: clamp(1.75rem, 4vw, 2.75rem); }
.mag-figure .mat-viewport { aspect-ratio: 3 / 2; }
.mag-figure .mat-viewport img { height: 100%; object-fit: cover; }

/* --- article page: the body ---------------------------------------------- */

.mag-body-wrap {
  padding-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.mag-body {
  /* a printed measure: 64 to 75 characters a line, the way a book sets it */
  max-width: 65ch;
  margin-inline: auto;
  font-size: 1.075rem;
  line-height: 1.72;
  color: var(--ink-quiet);
}
.mag-body > *:first-child { margin-top: 0; }
.mag-body p { margin: 0 0 1.35em; }
.mag-body h2 {
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  line-height: 1.14;
  margin: 2.5em 0 0.7em;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-soft);
  position: relative;
}
.mag-body h2::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 44px;
  height: 1px;
  background: var(--primary);
}
.mag-body h2:first-child { margin-top: 0; }
.mag-body h3 {
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin: 2em 0 0.55em;
  color: var(--ink);
}
.mag-body ul, .mag-body ol { margin: 0 0 1.35em; padding-left: 1.35rem; }
.mag-body li { margin-bottom: 0.55em; }
.mag-body li::marker { color: var(--primary); }
.mag-body a { color: var(--accent-ink); text-decoration-color: color-mix(in srgb, var(--accent-ink) 55%, transparent); }
.mag-body a:hover { color: var(--primary-lift); }
.mag-body strong { color: var(--ink); }
.mag-body blockquote {
  margin: 2em 0;
  padding: 1.15rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--primary);
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.mag-body blockquote p:last-child { margin-bottom: 0; }
.mag-table-scroll, .mag-body .table-scroll { overflow-x: auto; }
.mag-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: var(--t-base);
  border: 1px solid var(--line);
  background: var(--surface);
}
.mag-body th, .mag-body td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}
.mag-body th {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--paper-warm);
}
.mag-body tr:last-child td { border-bottom: 0; }

/* the contextual sibling link dropped between two sections */
.mag-body .inline-read,
.inline-read {
  margin: 2em 0;
  padding: 0.85rem 1.1rem 0.85rem 1.25rem;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-deep);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--muted);
}
.inline-read a { color: var(--ink); text-decoration-color: var(--line-signal); }
.inline-read a:hover { color: var(--primary-lift); }

/* --- article page: call to action ---------------------------------------- */

.mag-cta {
  max-width: 65ch;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding: clamp(1.6rem, 3.2vw, 2.4rem);
  position: relative;
  background: linear-gradient(165deg, var(--surface), var(--paper-warm));
  border: 1px solid var(--line);
  border-top: 2px solid var(--primary);
}
.mag-cta::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--line-soft);
  pointer-events: none;
}
.mag-cta-kicker {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--accent-ink);
  margin-bottom: 0.7rem;
}
.mag-cta h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 0.75rem; }
.mag-cta p { color: var(--ink-quiet); font-size: var(--t-base); }
.mag-cta-act { margin-top: var(--s-5); }
.mag-cta-act .btn { text-align: center; }

/* --- article page: the author box ---------------------------------------- */

.mag-author {
  max-width: 65ch;
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  padding: clamp(1.4rem, 2.8vw, 2rem);
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: clamp(1.1rem, 2.6vw, 1.75rem);
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-deep);
}
.mag-author img {
  width: 116px;
  height: 116px;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  padding: 5px;
  background: var(--bg);
  filter: grayscale(0.15) contrast(1.03);
}
.mag-author-kicker {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.mag-author h2 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.mag-author p { font-size: var(--t-base); color: var(--muted); }
.mag-author-link { margin-top: var(--s-4); }
.mag-author-link a { color: var(--accent-ink); font-size: var(--t-sm); }

/* --- article page: Read also --------------------------------------------- */

.mag-related { border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--paper-warm), var(--bg)); }
.mag-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1px;
  background: var(--paper-warm);
  border: 1px solid var(--line);
}
.mag-rel {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  padding-bottom: clamp(1.1rem, 2.2vw, 1.5rem);
  transition: background-color 280ms ease;
}
.mag-rel:hover { background: var(--paper-warm); }
.mag-rel-frame {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--frame-void);
  aspect-ratio: 3 / 2;
  margin-bottom: clamp(1rem, 2vw, 1.35rem);
  border-bottom: 1px solid var(--line-soft);
}
.mag-rel-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 720ms cubic-bezier(0.18, 0.7, 0.24, 1);
}
.mag-rel:hover .mag-rel-frame img { transform: scale(1.05); }
.mag-rel-title {
  font-size: 1.05rem;
  line-height: 1.2;
  margin: 0 clamp(1.1rem, 2.2vw, 1.5rem) 0.5rem;
}
.mag-rel-title a { color: var(--ink); text-decoration: none; }
.mag-rel-title a:hover { color: var(--primary-lift); }
.mag-rel-dek {
  margin: 0 clamp(1.1rem, 2.2vw, 1.5rem) 0.85rem;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--muted);
}
.mag-rel-meta {
  margin: auto clamp(1.1rem, 2.2vw, 1.5rem) 0;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.mag-related-all { margin-top: var(--s-6); }
.mag-related-all a { color: var(--accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }

/* --- author page and site map listings ----------------------------------- */

.mag-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; border-top: 1px solid var(--line-soft); }
.mag-list li {
  margin: 0;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.mag-list a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  display: block;
}
.mag-list a:hover { color: var(--primary-lift); }
.mag-list .meta {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--t-sm);
  color: var(--muted);
}

/* --- narrow screens, down to 360px --------------------------------------- */

@media (max-width: 720px) {
  .mag-grid, .mag-related-grid { grid-template-columns: 1fr; }
  .mag-author { grid-template-columns: 1fr; }
  .mag-author img { width: 96px; height: 96px; }
  .mag-body { font-size: 1.02rem; }
  .mag-crumbs [aria-current="page"] { max-width: 18rem; }
}

@media (max-width: 420px) {
  .mag-head h1 { font-size: clamp(1.85rem, 8.5vw, 2.4rem); }
  .mag-card.lead .mag-card-title { font-size: 1.5rem; }
  .mag-card.lead .mag-card-dek { font-size: var(--t-base); }
  .mag-body h2 { font-size: 1.35rem; }
  .mag-cta-act .btn, .mag-index-cta .btn { width: 100%; }
  .mag-byline { gap: 0.35rem 0.6rem; font-size: var(--t-xs); }
  .mag-crumbs [aria-current="page"] { max-width: 13rem; }
}



/* A button keeps its own label colour wherever it lands. Link rules scoped to
   the nav, the prose pages and the magazine are more specific than .btn and
   would otherwise repaint the label of a button sitting inside them. */
a.btn, a.btn:hover, a.btn:focus-visible { color: var(--btn-fg); }

/* 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;
  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 + li { margin-top: 0; }
.site-network a { font-size: 0.86rem; color: var(--muted); 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%; }
}