/* ==========================================================================
   PracticeSheet, practicesheetapp.com
   Studio quiet: ink navy on manuscript cream, copper accent.
   Motifs: five line staff rules, metronome beat grid, measure numbering.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* brief palette */
  --bg: #FAF8F3;
  --surface: #FFFFFF;
  --ink: #141A2B;
  --primary: #26355C;
  --accent: #B5713C;
  --muted: #5F667A;

  /* derived tints and shades */
  --ink-soft: #2A3145;
  --primary-900: #101A33;
  --primary-800: #1A2647;
  --primary-600: #33456F;
  --primary-300: #8E9AB6;
  --primary-100: #DCE1EC;
  --primary-050: #EEF1F6;

  --accent-800: #7E4C24;
  --accent-600: #9C5E2F;
  --accent-300: #DDA679;
  --accent-100: #F0DECB;
  --accent-050: #F8EEE3;

  --cream-100: #FDFCF8;
  --cream-200: #F4F0E6;
  --cream-300: #EBE5D6;
  --rule: #DCD5C4;
  --rule-strong: #C6BCA5;

  /* staff and grid */
  --staff-line: rgba(38, 53, 92, 0.16);
  --staff-gap: 9px;
  --beat: 34px;

  /* spacing scale (musical: doubling like note values) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 88px;
  --s-10: 120px;

  /* radii, restrained and paper like */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* shadows, soft lamp light */
  --sh-1: 0 1px 2px rgba(20, 26, 43, 0.05);
  --sh-2: 0 2px 10px rgba(20, 26, 43, 0.06), 0 1px 2px rgba(20, 26, 43, 0.04);
  --sh-3: 0 14px 40px rgba(20, 26, 43, 0.09), 0 2px 6px rgba(20, 26, 43, 0.05);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* type */
  --font-display: "Sora", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Crimson Pro", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-md: clamp(1.08rem, 0.4vw + 1rem, 1.2rem);
  --t-lg: clamp(1.25rem, 0.6vw + 1.1rem, 1.45rem);
  --t-xl: clamp(1.5rem, 1vw + 1.2rem, 1.85rem);
  --t-2xl: clamp(1.85rem, 1.6vw + 1.35rem, 2.4rem);
  --t-3xl: clamp(2.25rem, 2.6vw + 1.5rem, 3.1rem);
  --t-4xl: clamp(2.6rem, 4vw + 1.4rem, 4.1rem);

  --wrap: 1180px;
  --wrap-narrow: 760px;
  --dur: 420ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.68;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* manuscript grain: faint five line staff bands plus a metronome beat grid */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(var(--staff-gap) - 1px),
      var(--staff-line) calc(var(--staff-gap) - 1px), var(--staff-line) var(--staff-gap)),
    repeating-linear-gradient(to right,
      transparent 0, transparent calc(var(--beat) * 4 - 1px),
      rgba(181, 113, 60, 0.10) calc(var(--beat) * 4 - 1px), rgba(181, 113, 60, 0.10) calc(var(--beat) * 4));
  background-size: 100% calc(var(--staff-gap) * 5 + 46px), 100% 100%;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.06) 42%, rgba(0,0,0,0.28));
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.06) 42%, rgba(0,0,0,0.28));
}

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

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--primary-900);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.14;
  margin: 0 0 var(--s-4);
  font-variant-numeric: lining-nums tabular-nums;
}

h1 { font-size: var(--t-4xl); letter-spacing: -0.03em; }
h2 { font-size: var(--t-3xl); letter-spacing: -0.024em; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

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

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

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

strong { font-weight: 700; color: var(--primary-900); }

hr { border: 0; height: 1px; background: var(--rule); margin: var(--s-7) 0; }

::selection { background: var(--accent-100); color: var(--primary-900); }

/* --------------------------------------------------------------------------
   3. Accessibility helpers
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -80px;
  z-index: 999;
  background: var(--primary-900);
  color: var(--cream-100);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  transition: top 180ms var(--ease);
}
.skip-link:focus { top: 0; color: var(--cream-100); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

section { padding-block: var(--s-9); }
section.tight { padding-block: var(--s-8); }

.section-head { max-width: 62ch; margin-bottom: var(--s-7); }
.section-head.center { margin-inline: auto; text-align: center; }

/* measure marker: sections are numbered like bars in a score */
.measure {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent-800);
  margin-bottom: var(--s-4);
}
.measure::before {
  content: "";
  width: 3px;
  height: 20px;
  background: var(--accent);
  box-shadow: 5px 0 0 -1px var(--primary-300);
}
.section-head.center .measure { justify-content: center; }

.lede {
  font-size: var(--t-md);
  color: var(--muted);
  max-width: 60ch;
}
.section-head.center .lede { margin-inline: auto; }

/* five line staff rule, used as a divider */
.staff-rule {
  height: calc(var(--staff-gap) * 4 + 1px);
  background-image: repeating-linear-gradient(to bottom,
    var(--staff-line) 0, var(--staff-line) 1px,
    transparent 1px, transparent var(--staff-gap));
  transform-origin: left center;
  margin-block: var(--s-6);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  padding: 0.95rem 1.55rem;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform 180ms var(--ease),
              box-shadow var(--dur) var(--ease);
}

.btn-primary {
  background: var(--primary);
  color: var(--cream-100);
  box-shadow: var(--sh-2);
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  /* a copper beat line that slides across on hover, like a metronome sweep */
  content: "";
  position: absolute;
  left: -30%;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--accent-300);
  opacity: 0;
  transition: left 520ms var(--ease), opacity 520ms var(--ease);
}
.btn-primary:hover { background: var(--primary-800); color: var(--cream-100); transform: translateY(-1px); }
.btn-primary:hover::after { left: 118%; opacity: 0.85; }

.btn-accent { background: var(--accent); color: #FFFFFF; box-shadow: var(--sh-2); }
.btn-accent:hover { background: var(--accent-600); color: #FFFFFF; transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--primary);
  border-color: var(--rule-strong);
}
.btn-ghost:hover { border-color: var(--primary); background: var(--cream-200); color: var(--primary-900); }

.btn-sm { padding: 0.6rem 1.05rem; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(9px);
  -webkit-backdrop-filter: saturate(140%) blur(9px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 0 var(--cream-300), 0 10px 26px rgba(20, 26, 43, 0.06);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 74px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--primary-900);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
}
.wordmark svg { flex: none; }
.wordmark span em { font-style: normal; color: var(--accent); }

.nav { margin-left: auto; }
.nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin: 0; padding: 0;
}
/* Plain text links only. The header CTA is an <a class="btn btn-primary">, and a
   bare ".nav a" selector outranks ".btn-primary" on specificity, so it used to
   repaint the button label in ink navy on the navy fill and hide it. Excluding
   .btn here lets the button keep its own colour, sweep and padding in every
   state, so no override stack is needed on the button side. */
.nav a:not(.btn) {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.35rem 0;
  position: relative;
}
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--ease);
}
.nav a:not(.btn):hover { color: var(--primary-900); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }

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

.nav-toggle {
  display: none;
  margin-left: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--primary);
}
.nav-toggle span {
  display: block;
  width: 19px; height: 1.5px;
  background: currentColor;
  position: relative;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0; width: 19px; height: 1.5px;
  background: currentColor;
  transition: transform 280ms var(--ease), opacity 200ms var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-block: var(--s-9) var(--s-8);
  position: relative;
  overflow: hidden;
}
.hero::before {
  /* metronome beat grid fading down the left margin */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 340px;
  background-image: repeating-linear-gradient(to right,
    rgba(38, 53, 92, 0.09) 0, rgba(38, 53, 92, 0.09) 1px,
    transparent 1px, transparent var(--beat));
  -webkit-mask-image: radial-gradient(120% 90% at 12% 0%, rgba(0,0,0,0.85), transparent 68%);
  mask-image: radial-gradient(120% 90% at 12% 0%, rgba(0,0,0,0.85), transparent 68%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: var(--s-8);
  align-items: center;
}
.hero h1 { margin-bottom: var(--s-5); max-width: 15ch; }
.hero h1 .accent-word {
  color: var(--accent-800);
  position: relative;
  white-space: nowrap;
}
.hero h1 .accent-word::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.06em;
  height: 3px;
  background: linear-gradient(to right, var(--accent), var(--accent-300));
  transform-origin: left center;
  animation: draw-line 1200ms var(--ease) 260ms both;
}
.hero-sub { font-size: var(--t-md); color: var(--ink-soft); max-width: 52ch; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-6);
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  list-style: none;
  margin: 0; padding-left: 0;
}
.trust-strip li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin: 0;
}
.trust-strip li svg { color: var(--accent); flex: none; }

/* manuscript mat around the photography */
.plate {
  position: relative;
  background: var(--surface);
  padding: 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
}
.plate img { border-radius: var(--r-xs); }
.plate::before, .plate::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 1px solid var(--accent);
  opacity: 0.7;
}
.plate::before { top: 5px; left: 5px; border-right: 0; border-bottom: 0; }
.plate::after { bottom: 5px; right: 5px; border-left: 0; border-top: 0; }

.plate-caption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  background: color-mix(in srgb, var(--primary-900) 92%, transparent);
  color: var(--cream-100);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-xs);
  border-left: 2px solid var(--accent);
}

/* the metronome: a real pendulum, driving the site pulse */
.metronome {
  position: absolute;
  left: -26px;
  bottom: 34px;
  width: 96px;
  height: 118px;
  background: var(--primary-900);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  box-shadow: var(--sh-3);
  display: grid;
  place-items: end center;
}
.metronome .arm {
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: 2px;
  height: 78px;
  margin-left: -1px;
  background: var(--accent-300);
  transform-origin: bottom center;
  animation: tick 1.32s steps(1, end) infinite alternate;
}
.metronome .arm::after {
  content: "";
  position: absolute;
  top: 18px; left: -5px;
  width: 12px; height: 8px;
  background: var(--accent);
  border-radius: 1px;
}
.metronome .beat {
  position: absolute;
  bottom: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 0.66s var(--ease) infinite;
}
.metronome .bpm {
  position: absolute;
  top: 62px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--primary-300);
}

@keyframes tick {
  from { transform: rotate(-13deg); }
  to { transform: rotate(13deg); }
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.95; }
  55% { transform: scale(1.9); opacity: 0.18; }
  100% { transform: scale(1); opacity: 0.95; }
}
@keyframes draw-line {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   8. Reveal on scroll, staff lines drawing in
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }
.reveal[data-delay="4"] { transition-delay: 360ms; }
.reveal[data-delay="5"] { transition-delay: 450ms; }

.staff-rule { transform: scaleX(0.04); transition: transform 1100ms var(--ease); }
.staff-rule.is-visible { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: var(--rule-strong); }
.card h3 { margin-bottom: var(--s-3); font-size: var(--t-lg); }
.card p { color: var(--muted); margin-bottom: 0; }
.card p + p { margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   10. Problem section
   -------------------------------------------------------------------------- */
.problem { background: var(--cream-200); border-block: 1px solid var(--rule); }
.problem .card { border-top: 3px solid var(--primary-100); }
.problem .card:hover { border-top-color: var(--accent); }

.cost-line {
  display: block;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--rule-strong);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-800);
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   11. How it works, numbered steps
   -------------------------------------------------------------------------- */
.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: var(--s-8);
  align-items: start;
}
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  position: relative;
  padding: 0 0 var(--s-6) var(--s-8);
  counter-increment: step;
  margin: 0;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 2px;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--primary-100);
  background: var(--surface);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: lining-nums;
}
.steps li::after {
  content: "";
  position: absolute;
  left: 21px; top: 50px;
  bottom: 8px;
  width: 1px;
  background: repeating-linear-gradient(to bottom,
    var(--rule-strong) 0, var(--rule-strong) 4px, transparent 4px, transparent 9px);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3 { margin-bottom: var(--s-2); font-size: var(--t-lg); }
.steps p { color: var(--muted); margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. Features
   -------------------------------------------------------------------------- */
.feature { position: relative; padding-top: var(--s-6); }
.feature-icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--primary-050);
  border: 1px solid var(--primary-100);
  color: var(--primary);
  margin-bottom: var(--s-4);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.feature:hover .feature-icon { background: var(--accent-050); border-color: var(--accent-100); color: var(--accent-800); }
.feature::before {
  content: "";
  position: absolute;
  top: 0; left: var(--s-6); right: var(--s-6);
  height: 5px;
  background-image: repeating-linear-gradient(to bottom,
    var(--staff-line) 0, var(--staff-line) 1px, transparent 1px, transparent 2px);
}

/* --------------------------------------------------------------------------
   13. Outcomes
   -------------------------------------------------------------------------- */
.outcomes { background: var(--primary-900); color: var(--cream-200); }
.outcomes h2, .outcomes h3 { color: var(--cream-100); }
.outcomes .measure { color: var(--accent-300); }
.outcomes .measure::before { background: var(--accent-300); box-shadow: 5px 0 0 -1px rgba(255,255,255,0.28); }
.outcomes .lede { color: var(--primary-300); }
.outcome {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: var(--s-5);
}
.outcome .figure {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--accent-300);
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  margin-bottom: var(--s-3);
}
.outcome h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.outcome p { color: var(--primary-300); font-size: 1rem; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Testimonials and results
   -------------------------------------------------------------------------- */
.testimonial {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: var(--sh-1);
  position: relative;
  display: flex;
  flex-direction: column;
}
.testimonial::before {
  content: "";
  display: block;
  height: 17px;
  margin-bottom: var(--s-5);
  background-image: repeating-linear-gradient(to bottom,
    var(--staff-line) 0, var(--staff-line) 1px, transparent 1px, transparent 4px);
  border-left: 2px solid var(--accent);
  padding-left: 6px;
}
.testimonial blockquote {
  margin: 0 0 var(--s-5);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink-soft);
  flex: 1;
}
.testimonial blockquote p:last-child { margin-bottom: 0; }
.attrib {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  border-top: 1px solid var(--cream-300);
  padding-top: var(--s-4);
}
.attrib .initials {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-050);
  border: 1px solid var(--primary-100);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.02em;
}
.attrib cite {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-900);
  display: block;
}
.attrib .role { font-size: 0.9rem; color: var(--muted); line-height: 1.4; }

.results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: var(--s-7);
}
.results div { background: var(--cream-100); padding: var(--s-6); text-align: center; }
.results dt {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.4vw, 2.35rem);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.035em;
  font-variant-numeric: lining-nums tabular-nums;
}
.results dd { margin: var(--s-2) 0 0; color: var(--muted); font-size: 0.98rem; }

/* --------------------------------------------------------------------------
   15. Pricing
   -------------------------------------------------------------------------- */
.pricing { background: var(--cream-200); border-block: 1px solid var(--rule); }
.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  align-items: start;
}
.tier {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-1);
  position: relative;
}
.tier.featured {
  border-color: var(--accent);
  box-shadow: var(--sh-3);
  padding-top: var(--s-7);
}
.tier.featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(to right, var(--accent-800), var(--accent), var(--accent-300));
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.tier-flag {
  position: absolute;
  top: -13px; left: var(--s-6);
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-xs);
}
.tier h3 { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.tier .tier-for { color: var(--muted); font-size: 0.98rem; min-height: 3.1em; }
.price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-display);
  margin: var(--s-4) 0 var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--cream-300);
}
.price .amount {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--primary-900);
  letter-spacing: -0.045em;
  font-variant-numeric: lining-nums tabular-nums;
}
.price .per { font-size: 0.86rem; color: var(--muted); font-weight: 500; }
.tier ul { list-style: none; padding: 0; margin: 0 0 var(--s-6); flex: 1; }
.tier li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 1rem;
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}
.tier li::before {
  /* a quarter note head as the bullet */
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 9px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  transform: rotate(-22deg);
}
.tier li::after {
  content: "";
  position: absolute;
  left: 8px; top: 0.05em;
  width: 1.5px; height: 0.72em;
  background: var(--accent-600);
}
.billing-note {
  margin-top: var(--s-6);
  text-align: center;
  color: var(--muted);
  font-size: 0.98rem;
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq-list { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  background: none;
  border: 0;
  padding: var(--s-5) 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--primary-900);
  line-height: 1.4;
}
.faq-q:hover { color: var(--accent-800); }
.faq-q .sign {
  flex: none;
  width: 26px; height: 26px;
  position: relative;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-xs);
  margin-top: 2px;
}
.faq-q .sign::before, .faq-q .sign::after {
  content: "";
  position: absolute;
  background: var(--accent);
  left: 50%; top: 50%;
}
.faq-q .sign::before { width: 11px; height: 1.5px; margin: -0.75px 0 0 -5.5px; }
.faq-q .sign::after {
  width: 1.5px; height: 11px; margin: -5.5px 0 0 -0.75px;
  transition: transform 320ms var(--ease);
}
.faq-q[aria-expanded="true"] .sign::after { transform: scaleY(0); }
.faq-a {
  overflow: hidden;
  color: var(--muted);
  max-width: 76ch;
}
.faq-a[hidden] { display: none; }
.faq-a p { margin-bottom: var(--s-4); }
.faq-a p:last-child { margin-bottom: var(--s-5); }

/* --------------------------------------------------------------------------
   17. Contact and form
   -------------------------------------------------------------------------- */
.contact { background: var(--primary-900); color: var(--cream-200); position: relative; overflow: hidden; }
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to right,
    rgba(255, 255, 255, 0.055) 0, rgba(255, 255, 255, 0.055) 1px,
    transparent 1px, transparent var(--beat));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 70%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 70%);
  pointer-events: none;
}
.contact h2 { color: var(--cream-100); }
.contact .lede { color: var(--primary-300); }
.contact .measure { color: var(--accent-300); }
.contact .measure::before { background: var(--accent-300); box-shadow: 5px 0 0 -1px rgba(255,255,255,0.28); }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s-8);
  align-items: start;
}
.contact-aside ul { list-style: none; padding: 0; margin: var(--s-6) 0 0; }
.contact-aside li {
  padding-left: 1.7rem;
  position: relative;
  color: var(--primary-300);
  margin-bottom: var(--s-4);
}
.contact-aside li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 10px; height: 8px;
  border-radius: 50%;
  background: var(--accent-300);
  transform: rotate(-22deg);
}

.form-card {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--s-7);
  box-shadow: var(--sh-3);
  color: var(--ink);
  border-top: 4px solid var(--accent);
}
.field { margin-bottom: var(--s-5); }
.field label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary-900);
  margin-bottom: var(--s-2);
  letter-spacing: -0.005em;
}
.field .hint { display: block; font-family: var(--font-body); font-weight: 400; color: var(--muted); font-size: 0.92rem; }
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: var(--ink);
  background: var(--cream-100);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  padding: 0.78rem 0.9rem;
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease), background-color 240ms var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; -webkit-appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--primary) 50%),
  linear-gradient(135deg, var(--primary) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--primary-050);
  outline: none;
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: #97361F;
  background: #FDF4F1;
}
.field-error {
  display: none;
  margin-top: var(--s-2);
  font-size: 0.92rem;
  color: #8B3018;
  font-family: var(--font-display);
  font-weight: 500;
}
.field-error.is-shown { display: block; }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  background: var(--cream-200);
  border: 1px solid var(--cream-300);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
}
.consent input { width: 20px; height: 20px; flex: none; margin-top: 3px; accent-color: var(--accent); }
.consent label { font-family: var(--font-body); font-size: 0.96rem; font-weight: 400; color: var(--ink-soft); margin: 0; }

.form-foot { margin-top: var(--s-5); font-size: 0.95rem; color: var(--muted); }
.form-foot a { color: var(--primary); }

/* --------------------------------------------------------------------------
   18. Author byline
   -------------------------------------------------------------------------- */
.byline {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--cream-100);
  border-radius: var(--r-sm);
  padding: var(--s-5);
  margin-top: var(--s-8);
}
.byline p { margin: 0; font-size: 0.98rem; color: var(--muted); }
.byline strong { display: block; font-family: var(--font-display); font-size: 0.95rem; color: var(--primary-900); }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--primary-900);
  color: var(--primary-300);
  padding-block: var(--s-9) var(--s-5);
  font-size: 0.98rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: var(--s-7);
}
.site-footer h2, .site-footer h3 {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-200);
  margin-bottom: var(--s-4);
}
.site-footer .wordmark { color: var(--cream-100); margin-bottom: var(--s-4); }
.site-footer .wordmark span em { color: var(--accent-300); }
.site-footer p { color: var(--primary-300); max-width: 34ch; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s-3); }
.site-footer a { color: var(--primary-300); text-decoration: none; }
.site-footer a:hover { color: var(--accent-300); text-decoration: underline; }

.social {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-5);
}
.social a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-sm);
  color: var(--cream-200);
  transition: background-color 260ms var(--ease), border-color 260ms var(--ease), color 260ms var(--ease);
}
.social a:hover { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }

.publisher-line { margin-top: var(--s-4); font-size: 0.9rem; color: var(--primary-300); }

.footer-base {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   20. Interior pages
   -------------------------------------------------------------------------- */
.page-head {
  padding-block: var(--s-8) var(--s-6);
  border-bottom: 1px solid var(--rule);
  background: var(--cream-200);
}
.page-head h1 { font-size: var(--t-3xl); max-width: 22ch; }
.page-head .lede { margin-bottom: 0; }

.breadcrumbs { font-size: 0.86rem; color: var(--muted); margin-bottom: var(--s-4); font-family: var(--font-display); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-800); text-decoration: underline; }

.prose { max-width: 74ch; }
.prose h2 { font-size: var(--t-xl); margin-top: var(--s-7); }
.prose h3 { font-size: var(--t-lg); margin-top: var(--s-6); }
.prose ul { padding-left: 1.3rem; }
.prose dt { font-family: var(--font-display); font-weight: 600; color: var(--primary-900); margin-top: var(--s-4); }
.prose dd { margin: var(--s-1) 0 0; color: var(--muted); }

.fact-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-5) 0;
  font-size: 1rem;
}
.fact-table th, .fact-table td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.fact-table th { font-family: var(--font-display); font-size: 0.86rem; font-weight: 600; color: var(--primary-900); width: 34%; }

.author-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--s-8);
  align-items: start;
}
.author-portrait { position: sticky; top: 104px; }
.author-portrait img { border-radius: var(--r-md); border: 1px solid var(--rule); box-shadow: var(--sh-2); }
.author-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin-top: var(--s-5);
}
.author-card h2 { font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-800); margin-bottom: var(--s-3); font-family: var(--font-display); }
.author-card ul { list-style: none; padding: 0; margin: 0; }
.author-card li { margin-bottom: var(--s-2); font-size: 0.96rem; }

.map-group { margin-bottom: var(--s-7); }
.map-group ul { list-style: none; padding: 0; }
.map-group li {
  border-bottom: 1px solid var(--rule);
  padding: var(--s-3) 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s-4);
}
.map-group li a { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; text-decoration: none; }
.map-group li span { color: var(--muted); font-size: 0.98rem; }

.notice-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--s-7);
  box-shadow: var(--sh-2);
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.notice-panel .glyph { color: var(--accent); margin-bottom: var(--s-4); }
.notice-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }

.big-code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  color: var(--primary-100);
  line-height: 0.9;
  font-variant-numeric: lining-nums;
}

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .hero-grid, .how-grid, .contact-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .author-grid { grid-template-columns: 240px minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metronome { left: auto; right: 22px; bottom: -18px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--bg);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--sh-3);
    padding: var(--s-4) 0 var(--s-5);
    display: none;
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
  .nav li { border-bottom: 1px solid var(--cream-300); }
  .nav li:last-child { border-bottom: 0; padding-top: var(--s-4); }
  .nav a { display: block; padding: 0.85rem 0; font-size: 1rem; }
  .nav .btn { width: 100%; }
  .grid-3, .grid-4, .tiers, .results { grid-template-columns: 1fr; }
  .results { gap: 1px; }
  .author-grid { grid-template-columns: 1fr; }
  .author-portrait { position: static; max-width: 300px; }
  .map-group li { grid-template-columns: 1fr; gap: var(--s-1); }
  section { padding-block: var(--s-8); }
}

@media (max-width: 620px) {
  .grid-2, .field-row { grid-template-columns: 1fr; }
  .form-card { padding: var(--s-5); }
  .footer-grid { grid-template-columns: 1fr; }
  .metronome { display: none; }
  .plate { padding: 9px; }
  .hero { padding-block: var(--s-7) var(--s-7); }
  .trust-strip { gap: var(--s-3); flex-direction: column; }
}

/* --------------------------------------------------------------------------
   22. Reduced motion
   -------------------------------------------------------------------------- */
@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;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .staff-rule { transform: scaleX(1); }
  .metronome .arm { transform: rotate(0deg); }
  .hero h1 .accent-word::after { transform: scaleX(1); }
}

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

/* --------------------------------------------------------------------------
   23. Studio Hours, the magazine
   Same score as the rest of the site: cream paper, ink navy type, copper rest
   marks, five line staff rules used as section dividers.
   -------------------------------------------------------------------------- */

/* shared small parts ------------------------------------------------------ */
.mag-kicker {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent-800);
  margin: 0 0 var(--s-3);
}
.mag-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 var(--s-3);
  vertical-align: 0.18em;
}
.mag-standfirst {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
  margin-bottom: var(--s-5);
}

/* magazine index ---------------------------------------------------------- */
.mag-index-head h1 { max-width: 18ch; }
.mag-index-note {
  font-size: 1rem;
  color: var(--muted);
  max-width: 62ch;
  margin-bottom: 0;
}

.mag-index { padding-block: var(--s-8) var(--s-9); }

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

.mag-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--primary-100);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: box-shadow 260ms var(--ease), transform 260ms var(--ease), border-color 260ms var(--ease);
}
.mag-card:hover {
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
  border-top-color: var(--accent);
  border-color: var(--rule-strong);
}

.mag-card-media {
  display: block;
  position: relative;
  background: var(--cream-300);
  border-bottom: 1px solid var(--rule);
}
.mag-card-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.mag-card-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--staff-gap) * 4 + 1px);
  pointer-events: none;
  opacity: 0.55;
  background-image: repeating-linear-gradient(to bottom,
    rgba(250, 248, 243, 0.72) 0, rgba(250, 248, 243, 0.72) 1px,
    transparent 1px, transparent var(--staff-gap));
}

.mag-card-body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.mag-card-title {
  font-size: var(--t-lg);
  line-height: 1.2;
  margin-bottom: var(--s-3);
}
.mag-card-title a { color: var(--primary-900); text-decoration: none; }
.mag-card-title a:hover { color: var(--accent-800); text-decoration: underline; text-underline-offset: 4px; }
.mag-card-dek {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: var(--s-5);
}
.mag-card-meta {
  margin: auto 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--cream-300);
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: lining-nums;
}

/* the lead card takes the full first row and turns on its side */
.mag-card.lead {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
  border-top-color: var(--accent);
  background: linear-gradient(180deg, var(--cream-100), var(--surface) 60%);
}
.mag-card.lead .mag-card-media { flex: 0 0 52%; border-bottom: 0; border-right: 1px solid var(--rule); }
.mag-card.lead .mag-card-media img { height: 100%; aspect-ratio: auto; min-height: 320px; }
.mag-card.lead .mag-card-body { padding: var(--s-7); justify-content: center; }
.mag-card.lead .mag-card-title { font-size: var(--t-2xl); letter-spacing: -0.022em; }
.mag-card.lead .mag-card-dek { font-size: var(--t-md); color: var(--ink-soft); max-width: 46ch; }
.mag-card.lead .mag-card-meta { margin-top: var(--s-5); }

.mag-index-cta {
  background: var(--primary-900);
  color: var(--cream-200);
  border-radius: var(--r-md);
  padding: var(--s-7);
  margin-top: var(--s-6);
  max-width: 780px;
}
.mag-index-cta h2 { color: var(--cream-100); font-size: var(--t-xl); }
.mag-index-cta .measure { color: var(--accent-300); }
.mag-index-cta .measure::before { background: var(--accent-300); box-shadow: 5px 0 0 -1px rgba(255, 255, 255, 0.28); }
.mag-index-cta p { color: var(--primary-300); }
.mag-index-cta p:last-child { margin-bottom: 0; }
.mag-index-cta .btn-primary { background: var(--accent); }
.mag-index-cta .btn-primary:hover { background: var(--accent-600); }

/* article header ---------------------------------------------------------- */
.mag-head { padding-block: var(--s-8) var(--s-7); }
.mag-head-inner { max-width: 74ch; }
.mag-head h1 { font-size: var(--t-3xl); max-width: 24ch; }

.mag-byline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: center;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-strong);
}
.mag-byline-mark {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-050);
  border: 1px solid var(--accent-100);
  color: var(--accent-800);
}
.mag-byline-who {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-900);
}
.mag-byline-who a { color: var(--primary-900); text-decoration: none; border-bottom: 1px solid var(--accent-300); }
.mag-byline-who a:hover { color: var(--accent-800); border-bottom-color: var(--accent); }
.mag-byline-meta {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: lining-nums;
}

/* featured photograph ----------------------------------------------------- */
.mag-figure-wrap { margin-top: calc(var(--s-7) * -1); }
.mag-figure { max-width: 960px; margin-inline: auto; }
.mag-figure img { width: 100%; }

/* article body ------------------------------------------------------------ */
.mag-shell { padding-top: var(--s-7); padding-bottom: var(--s-8); }

.mag-body {
  max-width: 68ch;
  margin-inline: auto;
  font-size: 1.14rem;
  line-height: 1.72;
}
.mag-body > p { margin-bottom: var(--s-5); }
.mag-body h2 {
  font-size: var(--t-xl);
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.mag-body h3 {
  font-size: var(--t-lg);
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
  color: var(--primary-800);
}
.mag-body ul, .mag-body ol { margin-bottom: var(--s-5); padding-left: 1.35rem; }
.mag-body li { margin-bottom: var(--s-3); }
.mag-body li::marker { color: var(--accent); }
.mag-body strong { color: var(--primary-900); }
.mag-body a { color: var(--primary); text-decoration-color: var(--accent-300); }
.mag-body a:hover { color: var(--accent-800); }

.mag-body blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-5) var(--s-6);
  background: var(--cream-200);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--ink-soft);
}
.mag-body blockquote p:last-child { margin-bottom: 0; }

.mag-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-6) 0;
  font-size: 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.mag-body th, .mag-body td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.mag-body thead th {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--primary-900);
  background: var(--cream-200);
}
.mag-body tbody tr:last-child td { border-bottom: 0; }

/* the contextual read on links placed inside the body */
.inline-read {
  margin: var(--s-6) 0;
  padding: var(--s-4) var(--s-5);
  background: var(--cream-100);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--font-display);
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--muted);
}
.inline-read a {
  color: var(--primary-900);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-300);
}
.inline-read a:hover { color: var(--accent-800); border-bottom-color: var(--accent); }

/* call to action after the body ------------------------------------------- */
.mag-cta {
  max-width: 68ch;
  margin: var(--s-8) auto 0;
  background: var(--cream-200);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: var(--sh-1);
}
.mag-cta h2 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.mag-cta p { color: var(--ink-soft); }
.mag-cta-actions { margin-bottom: 0; }

.mag-shell .staff-rule { max-width: 68ch; margin-inline: auto; }

/* author box -------------------------------------------------------------- */
.mag-author {
  max-width: 68ch;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--s-6);
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-6);
}
.mag-author img {
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  box-shadow: var(--sh-1);
  width: 160px;
  height: auto;
}
.mag-author h2 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.mag-author p { color: var(--muted); font-size: 1.02rem; }
.mag-author-link { margin-bottom: 0; }
.mag-author-link a { font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; }

/* read also --------------------------------------------------------------- */
.mag-related {
  background: var(--cream-200);
  border-top: 1px solid var(--rule);
  padding-block: var(--s-8);
}
.mag-related .section-head { margin-bottom: var(--s-6); }
.mag-related h2 { font-size: var(--t-xl); }

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

.mag-rel {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow 260ms var(--ease), transform 260ms var(--ease), border-color 260ms var(--ease);
}
.mag-rel:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: var(--rule-strong); }
.mag-rel-media { display: block; border-bottom: 1px solid var(--rule); background: var(--cream-300); }
.mag-rel-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mag-rel-body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1 1 auto; }
.mag-rel-title { font-size: 1.12rem; line-height: 1.24; margin-bottom: var(--s-3); }
.mag-rel-title a { color: var(--primary-900); text-decoration: none; }
.mag-rel-title a:hover { color: var(--accent-800); text-decoration: underline; text-underline-offset: 4px; }
.mag-rel-dek { color: var(--muted); font-size: 0.98rem; margin-bottom: var(--s-4); }
.mag-rel-meta {
  margin: auto 0 0;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: lining-nums;
}
.mag-related-all { margin: var(--s-6) 0 0; }
.mag-related-all a { font-family: var(--font-display); font-size: 0.94rem; font-weight: 600; }

/* the magazine block on the home page ------------------------------------- */
.magazine-section { background: var(--cream-200); border-block: 1px solid var(--rule); }
.magazine-section .mag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.magazine-actions { margin-top: var(--s-6); }
.magazine-actions a { font-family: var(--font-display); font-size: 0.96rem; font-weight: 600; }

/* the article list on the author page ------------------------------------- */
.mag-list { list-style: none; padding: 0; margin: 0; }
.mag-list li {
  border-bottom: 1px solid var(--rule);
  padding: var(--s-3) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-5);
  align-items: baseline;
}
.mag-list li a { font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; text-decoration: none; }
.mag-list li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.mag-list time {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}

/* magazine responsive ----------------------------------------------------- */
@media (max-width: 1080px) {
  .mag-grid, .mag-related-grid, .magazine-section .mag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-card.lead .mag-card-media { flex-basis: 46%; }
  .mag-card.lead .mag-card-body { padding: var(--s-6); }
}

@media (max-width: 860px) {
  .mag-card.lead { flex-direction: column; }
  .mag-card.lead .mag-card-media { flex: none; border-right: 0; border-bottom: 1px solid var(--rule); }
  .mag-card.lead .mag-card-media img { min-height: 0; aspect-ratio: 3 / 2; }
  .mag-card.lead .mag-card-body { padding: var(--s-5); }
  .mag-card.lead .mag-card-title { font-size: var(--t-xl); }
  .mag-figure-wrap { margin-top: 0; padding-top: var(--s-6); }
  .mag-author { grid-template-columns: 1fr; gap: var(--s-5); }
  .mag-author img { width: 120px; }
}

@media (max-width: 620px) {
  .mag-grid, .mag-related-grid, .magazine-section .mag-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .mag-head h1 { font-size: var(--t-2xl); }
  .mag-byline { grid-template-columns: 1fr; row-gap: var(--s-2); }
  .mag-byline-mark { display: none; }
  .mag-body { font-size: 1.08rem; }
  .mag-body h2 { margin-top: var(--s-7); }
  .mag-cta, .mag-author { padding: var(--s-5); }
  .mag-index-cta { padding: var(--s-5); }
  .mag-list li { grid-template-columns: 1fr; }
  .mag-body table { display: block; overflow-x: auto; }
}

@media (max-width: 400px) {
  .mag-card-body, .mag-rel-body { padding: var(--s-4); }
  .mag-card-title { font-size: var(--t-md); }
  .mag-card.lead .mag-card-title { font-size: var(--t-lg); }
  .mag-dot { margin: 0 var(--s-2); }
}



/* 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; 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; } }


/* Phone: reference tables and long identifiers on the legal and site map pages. */
@media (max-width: 560px) {
  table { display: block; overflow-x: auto; max-width: 100%; }
  td, th { overflow-wrap: anywhere; }
}


/* 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%; }
}