/* ==========================================================================
   HOACovenant design system
   Neighborhood formal: brick red, lawn green, document cream.
   Bordered notice cards, plat map motifs, measured fades.
   ========================================================================== */

:root {
  /* core palette from the brief */
  --bg: #F8F6F2;
  --surface: #FFFFFF;
  --ink: #1D1A17;
  --primary: #8C3B2E;
  --accent: #4C7A45;
  --muted: #6B655D;

  /* derived brick tints and shades */
  --primary-900: #4A1D16;
  --primary-700: #6E2C22;
  --primary-500: #8C3B2E;
  --primary-300: #C08175;
  --primary-100: #EFDCD7;
  --primary-050: #F8EDEA;

  /* derived lawn tints and shades */
  --accent-800: #2C4A28;
  --accent-600: #3C6236;
  --accent-400: #79A271;
  --accent-200: #C6DCC1;
  --accent-050: #EDF3EB;

  /* document neutrals */
  --paper: #FFFDF9;
  --paper-edge: #E7E1D6;
  --rule: #D9D2C5;
  --rule-strong: #B9B0A0;
  --ink-soft: #3A342E;

  /* type */
  --font-display: "Frank Ruhl Libre", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Red Hat Text", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1: clamp(1.19rem, 1.12rem + 0.34vw, 1.38rem);
  --step-2: clamp(1.42rem, 1.3rem + 0.58vw, 1.74rem);
  --step-3: clamp(1.69rem, 1.5rem + 0.94vw, 2.2rem);
  --step-4: clamp(2.01rem, 1.71rem + 1.48vw, 2.78rem);
  --step-5: clamp(2.39rem, 1.92rem + 2.31vw, 3.5rem);

  /* spacing scale */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  /* radii, borders, shadows */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --border-hair: 1px solid var(--rule);
  --border-firm: 2px solid var(--ink);
  --shadow-card: 0 1px 0 var(--paper-edge), 0 10px 22px -18px rgba(29, 26, 23, 0.55);
  --shadow-lift: 0 2px 0 var(--paper-edge), 0 22px 40px -26px rgba(29, 26, 23, 0.6);
  --measure: 68ch;
  --wrap: 1180px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  /* plat map motif: lot lines drawn faintly across the whole document */
  background-image:
    linear-gradient(to right, rgba(140, 59, 46, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(140, 59, 46, 0.055) 1px, transparent 1px),
    linear-gradient(to right, rgba(76, 122, 69, 0.05) 1px, transparent 1px);
  background-size: 132px 100%, 100% 132px, 33px 100%;
  background-position: 0 0, 0 0, 0 0;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0 0 var(--s4);
  color: var(--ink);
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { margin: 0 0 var(--s4); max-width: var(--measure); }
a { color: var(--primary-700); text-underline-offset: 3px; }
a:hover { color: var(--primary-900); }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.15rem; }
li { margin-bottom: var(--s2); }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s6) 0; }

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

.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;
  left: var(--s4); top: -100px;
  z-index: 200;
  background: var(--primary);
  color: #fff;
  padding: 0.7rem 1.1rem;
  font-weight: 700;
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* --------------------------------------------------------------- layout */
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2rem, 880px); margin-inline: auto; }
main { display: block; }
section { padding-block: var(--s8); position: relative; }
@media (min-width: 900px) { section { padding-block: var(--s9); } }

.section-head { margin-bottom: var(--s7); max-width: 72ch; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--primary-700);
  margin: 0 0 var(--s3);
  padding: 0.3rem 0.6rem 0.3rem 0;
  border-bottom: 2px solid var(--primary-100);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 12px;
  border: 2px solid var(--accent-600);
  border-bottom-width: 4px;
  border-radius: 1px;
  transform: skewY(-6deg);
}
.lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 60ch; }
.muted { color: var(--muted); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
  padding: 0.85rem 1.35rem;
  border-radius: var(--r-md);
  border: 2px solid var(--primary-700);
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--primary-900);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), background-color 0.16s var(--ease);
}
.btn:hover { background: var(--primary-700); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 0 var(--primary-900); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--primary-900); }
.btn-ghost {
  background: transparent;
  color: var(--primary-700);
  border-color: var(--rule-strong);
  box-shadow: 0 2px 0 var(--paper-edge);
}
.btn-ghost:hover { background: var(--primary-050); color: var(--primary-900); border-color: var(--primary-300); }
.btn-lawn { background: var(--accent-600); border-color: var(--accent-800); box-shadow: 0 2px 0 var(--accent-800); }
.btn-lawn:hover { background: var(--accent-800); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.6rem 0.95rem; font-size: 0.9rem; }

/* --------------------------------------------------- the notice card motif */
.notice {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
  padding: var(--s5);
}
/* the inner hairline rule that makes it read as a filed document */
.notice::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--rule);
  border-radius: 1px;
  pointer-events: none;
}
.notice > * { position: relative; z-index: 1; }
.notice-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin: calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s4);
  padding: 0.55rem 1.1rem;
  background: var(--primary-050);
  border-bottom: 2px solid var(--primary-300);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-900);
}
.notice-strip .seq {
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--accent-800);
}
/* survey corner ticks, the plat drawing detail */
.ticked { position: relative; }
.ticked::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(var(--accent-600), var(--accent-600)) 0 0 / 14px 2px no-repeat,
    linear-gradient(var(--accent-600), var(--accent-600)) 0 0 / 2px 14px no-repeat,
    linear-gradient(var(--accent-600), var(--accent-600)) 100% 0 / 14px 2px no-repeat,
    linear-gradient(var(--accent-600), var(--accent-600)) 100% 0 / 2px 14px no-repeat,
    linear-gradient(var(--accent-600), var(--accent-600)) 0 100% / 14px 2px no-repeat,
    linear-gradient(var(--accent-600), var(--accent-600)) 0 100% / 2px 14px no-repeat,
    linear-gradient(var(--accent-600), var(--accent-600)) 100% 100% / 14px 2px no-repeat,
    linear-gradient(var(--accent-600), var(--accent-600)) 100% 100% / 2px 14px no-repeat;
}
/* the stamped file seal */
.seal {
  width: 82px; height: 82px;
  display: grid;
  place-content: center;
  text-align: center;
  border: 2px solid var(--primary-300);
  border-radius: 50%;
  color: var(--primary-700);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.25;
  transform: rotate(-9deg);
  position: relative;
  background: radial-gradient(circle, var(--primary-050) 60%, transparent 61%);
}
.seal::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed var(--primary-300);
  border-radius: 50%;
}

/* --------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 92%, #fff);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(7px);
  transition: box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}
.site-header.is-stuck {
  box-shadow: 0 12px 26px -22px rgba(29, 26, 23, 0.85);
  background: color-mix(in srgb, var(--bg) 97%, #fff);
  border-bottom-color: var(--rule-strong);
}
.header-inner {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--s4);
  min-height: 70px;
  padding-block: 0.6rem;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark svg { width: 32px; height: 32px; flex: none; }
.wordmark:hover { color: var(--primary-700); }
.wordmark .mark-tag {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-800);
  border-left: 1px solid var(--rule-strong);
  padding-left: 0.55rem;
}
.site-nav { margin-left: auto; }
.site-nav ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0; padding: 0;
}
.site-nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--primary-700); border-bottom-color: var(--primary-300); }
.nav-toggle {
  display: none;
  margin-left: auto;
  background: var(--surface);
  border: 2px solid var(--rule-strong);
  border-radius: var(--r-md);
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; display: block; }
.header-cta { flex: none; white-space: nowrap; }
/* The last list item repeats the header button. Showing both on one row is what
   pushed the nav labels onto a second line, so this copy is drawer only. */
.site-nav .nav-cta { display: none; }

@media (max-width: 940px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .site-nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--surface);
    border-top: 1px solid var(--rule);
    border-bottom: 3px solid var(--primary);
    box-shadow: var(--shadow-lift);
    display: none;
    margin-left: 0;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s3) var(--s4) var(--s5);
    width: min(100% - 2rem, var(--wrap));
    margin-inline: auto;
  }
  .site-nav li { margin: 0; }
  .site-nav a {
    display: block;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .site-nav .nav-cta { display: block; margin-top: var(--s4); }
  .site-nav .nav-cta a {
    border: 2px solid var(--primary-700);
    background: var(--primary);
    color: #fff;
    text-align: center;
    border-radius: var(--r-md);
  }
}

/* --------------------------------------------------------------- hero */
.hero {
  padding-block: var(--s7) var(--s8);
  position: relative;
  overflow: hidden;
}
.hero::before {
  /* cul de sac arc, drawn like a plat sheet detail */
  content: "";
  position: absolute;
  right: -160px; top: -120px;
  width: 520px; height: 520px;
  border: 1px solid rgba(76, 122, 69, 0.28);
  border-radius: 50%;
  box-shadow: inset 0 0 0 34px rgba(248, 246, 242, 0.6), inset 0 0 0 35px rgba(140, 59, 46, 0.16);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  gap: var(--s7);
  align-items: start;
  position: relative;
  z-index: 1;
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s8); align-items: center; }
}
.hero h1 { margin-bottom: var(--s5); }
.hero h1 .accent-rule {
  display: block;
  width: 96px; height: 5px;
  margin-top: var(--s4);
  background: linear-gradient(to right, var(--primary) 0 48px, var(--accent-600) 48px 100%);
  border-radius: 2px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s6); }
.trust-strip {
  display: grid;
  gap: 0;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  overflow: hidden;
}
@media (min-width: 620px) { .trust-strip { grid-template-columns: repeat(3, 1fr); } }
.trust-strip li {
  list-style: none;
  margin: 0;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink-soft);
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
}
@media (min-width: 620px) {
  .trust-strip li { border-bottom: 0; border-right: 1px solid var(--rule); }
  .trust-strip li:last-child { border-right: 0; }
}
.trust-strip li:last-child { border-bottom: 0; }
.trust-strip svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--accent-600); }
.trust-strip b { font-family: var(--font-display); font-weight: 700; }

.hero-figure { position: relative; }
.hero-figure img {
  width: 100%;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lift);
  filter: saturate(1.02) contrast(1.02);
}
.hero-figure .seal {
  position: absolute;
  left: -26px; bottom: 34px;
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
@media (max-width: 640px) { .hero-figure .seal { left: 8px; bottom: -22px; width: 68px; height: 68px; font-size: 0.56rem; } }
.hero-figure figcaption {
  margin-top: var(--s3);
  font-size: 0.82rem;
  color: var(--muted);
  border-left: 3px solid var(--accent-200);
  padding-left: 0.7rem;
}

/* --------------------------------------------------------------- problem */
.band-cream { background: linear-gradient(to bottom, rgba(255, 253, 249, 0.92), rgba(248, 246, 242, 0)); }
.band-paper { background: var(--paper); border-block: 1px solid var(--paper-edge); }
.band-brick {
  background: var(--primary-900);
  color: #F3E7E3;
  border-block: 3px solid var(--primary-700);
}
.band-brick h2, .band-brick h3 { color: #FFF6F3; }
.band-brick .eyebrow { color: #E8BFB6; border-bottom-color: rgba(232, 191, 182, 0.35); }
.band-brick .eyebrow::before { border-color: var(--accent-400); }
.band-brick .lede, .band-brick p { color: #EBDCD7; }

.card-grid { display: grid; gap: var(--s5); }
@media (min-width: 700px) { .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) { .card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.pain-card { padding: var(--s5); }
.pain-card h3 { font-size: var(--step-1); margin-bottom: var(--s3); }
.pain-card p { font-size: 0.95rem; color: var(--ink-soft); margin-bottom: var(--s4); }
.pain-cost {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-700);
  border-top: 2px solid var(--primary-100);
  padding-top: var(--s3);
}
.pain-cost small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------- steps */
.steps-layout { display: grid; gap: var(--s7); }
@media (min-width: 1000px) { .steps-layout { grid-template-columns: 1.02fr 0.98fr; align-items: start; gap: var(--s8); } }
.step-list { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step-list li {
  position: relative;
  margin: 0 0 var(--s5);
  padding: 0 0 var(--s5) 4.2rem;
  border-bottom: 1px dashed var(--rule-strong);
}
.step-list li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.step-list li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: -2px;
  width: 3rem; height: 3rem;
  display: grid;
  place-content: center;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  color: var(--primary-900);
  background: var(--surface);
  border: 2px solid var(--primary-300);
  border-radius: var(--r-sm);
  box-shadow: 3px 3px 0 var(--primary-050);
}
.step-list h3 { font-size: var(--step-1); margin-bottom: var(--s2); }
.step-list p { font-size: 0.96rem; color: var(--ink-soft); margin-bottom: 0; }
.step-figure img {
  width: 100%;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
}
.step-figure figcaption {
  margin-top: var(--s3);
  font-size: 0.82rem;
  color: var(--muted);
  border-left: 3px solid var(--primary-100);
  padding-left: 0.7rem;
}

/* --------------------------------------------------------------- features */
.feature-card { padding: var(--s5); height: 100%; }
.feature-icon {
  width: 46px; height: 46px;
  display: grid;
  place-content: center;
  border: 2px solid var(--accent-200);
  border-radius: var(--r-sm);
  background: var(--accent-050);
  margin-bottom: var(--s4);
}
.feature-icon svg { width: 24px; height: 24px; color: var(--accent-800); }
.feature-card h3 { font-size: var(--step-1); margin-bottom: var(--s2); }
.feature-card p { font-size: 0.94rem; color: var(--ink-soft); margin-bottom: 0; }

/* --------------------------------------------------------------- outcomes */
.outcome { padding: var(--s5) var(--s5) var(--s5) var(--s6); border-left: 4px solid var(--accent-600); }
.outcome .figure {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.9rem + 2.2vw, 3.3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--primary-700);
  display: block;
  margin-bottom: var(--s2);
}
.outcome h3 { font-size: var(--step-1); margin-bottom: var(--s2); }
.outcome p { font-size: 0.94rem; color: var(--ink-soft); margin-bottom: 0; }

/* --------------------------------------------------------------- proof */
.testimonial {
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}
.testimonial blockquote { margin: 0 0 var(--s4); }
.testimonial p {
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 0;
}
.testimonial p::before { content: "\201C"; }
.testimonial p::after { content: "\201D"; }
.testimonial figcaption {
  margin-top: auto;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
}
.testimonial figcaption b { display: block; color: var(--ink); font-size: 0.95rem; }
.testimonial figcaption .place { color: var(--accent-800); font-weight: 600; }

.results-strip {
  display: grid;
  gap: 0;
  margin-top: var(--s7);
  border: 2px solid var(--primary-700);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
}
@media (min-width: 760px) { .results-strip { grid-template-columns: repeat(3, 1fr); } }
.results-strip div {
  padding: var(--s5);
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .results-strip div { border-bottom: 0; border-right: 1px solid var(--rule); }
  .results-strip div:last-child { border-right: 0; }
}
.results-strip div:last-child { border-bottom: 0; }
.results-strip b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem);
  color: var(--primary-700);
  line-height: 1.1;
}
.results-strip span { font-size: 0.86rem; color: var(--muted); }

/* --------------------------------------------------------------- pricing */
.price-grid { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 780px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
.tier { padding: 0; display: flex; flex-direction: column; height: 100%; }
.tier .tier-body { padding: var(--s5); display: flex; flex-direction: column; flex: 1; }
.tier .notice-strip { margin: 0 0 0; padding: 0.6rem 1.1rem; }
.tier h3 { font-size: var(--step-2); margin: var(--s4) 0 var(--s1); }
.tier .price {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.8rem + 1.7vw, 2.9rem);
  font-weight: 800;
  color: var(--primary-700);
  line-height: 1;
}
.tier .price span { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.tier .tier-for { font-size: 0.9rem; color: var(--ink-soft); margin: var(--s3) 0 var(--s4); }
.tier ul { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.tier ul li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: 0.55rem;
}
.tier ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--accent-600);
  border-bottom: 2px solid var(--accent-600);
  transform: rotate(-45deg);
}
.tier .btn { margin-top: auto; }
.tier-recommended {
  border: 2px solid var(--primary-700);
  box-shadow: var(--shadow-lift);
  position: relative;
}
.tier-recommended .notice-strip { background: var(--primary); color: #fff; border-bottom-color: var(--primary-900); }
.tier-recommended .notice-strip .seq { color: #F2D9D2; }
.tier-recommended::before { inset: 4px; border-color: var(--primary-100); }
.billing-note {
  margin-top: var(--s6);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  padding: var(--s4) var(--s5);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.billing-note p { margin: 0; max-width: none; }

/* --------------------------------------------------------------- faq */
.faq-list { border-top: 1px solid var(--rule-strong); max-width: 900px; }
.faq-item { border-bottom: 1px solid var(--rule-strong); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  text-align: left;
  background: transparent;
  border: 0;
  padding: 1.15rem 0.2rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.3;
}
.faq-q:hover { color: var(--primary-700); }
.faq-q .chev {
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-content: center;
  border: 2px solid var(--rule-strong);
  border-radius: var(--r-sm);
  transition: transform 0.22s var(--ease), border-color 0.22s var(--ease), background-color 0.22s var(--ease);
}
.faq-q .chev::before {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid var(--primary-700);
  border-bottom: 2px solid var(--primary-700);
  transform: translateY(-2px) rotate(45deg);
}
.faq-q[aria-expanded="true"] .chev { transform: rotate(180deg); background: var(--primary-050); border-color: var(--primary-300); }
.faq-a { padding: 0 0 1.3rem; }
.faq-a p { font-size: 0.96rem; color: var(--ink-soft); margin-bottom: 0.7rem; max-width: 72ch; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a[hidden] { display: none; }

/* --------------------------------------------------------------- form */
.contact-layout { display: grid; gap: var(--s7); }
@media (min-width: 1000px) { .contact-layout { grid-template-columns: 0.86fr 1.14fr; gap: var(--s8); align-items: start; } }
.contact-aside ul { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.contact-aside ul li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.93rem;
  color: var(--ink-soft);
  margin-bottom: var(--s4);
}
.contact-aside svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent-600); }
.form-shell { padding: var(--s6); }
@media (max-width: 520px) { .form-shell { padding: var(--s5) var(--s4); } }
.field-grid { display: grid; gap: var(--s4); }
@media (min-width: 640px) { .field-grid.two { grid-template-columns: repeat(2, 1fr); } }
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: var(--s4); }
.field label {
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--primary-900);
}
.field .hint { font-size: 0.8rem; color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--rule-strong);
  border-radius: var(--r-sm);
  padding: 0.7rem 0.8rem;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--primary-300); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--primary);
  background: var(--primary-050);
}
.field .err {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary-700);
  min-height: 1.1em;
}
.field .err:empty { min-height: 0; }
.consent { display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: var(--s5); }
.consent input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--primary); flex: none; }
.consent label { font-size: 0.88rem; color: var(--ink-soft); font-weight: 400; letter-spacing: 0; text-transform: none; }
.form-foot { margin-top: var(--s4); font-size: 0.87rem; color: var(--muted); }
.form-foot p { margin-bottom: 0.4rem; }

/* --------------------------------------------------------------- byline */
.author-byline {
  display: flex;
  gap: var(--s4);
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid var(--rule-strong);
  border-left: 5px solid var(--accent-600);
  border-radius: var(--r-sm);
  background: var(--paper);
  padding: var(--s5);
  margin-top: var(--s7);
}
.author-byline img { width: 62px; height: 62px; border-radius: 50%; border: 2px solid var(--rule); flex: none; object-fit: cover; }
.author-byline p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); flex: 1 1 260px; }

/* --------------------------------------------------------------- footer */
.site-footer {
  background: var(--primary-900);
  color: #E8DCD8;
  border-top: 5px solid var(--accent-600);
  padding-top: var(--s8);
  margin-top: var(--s8);
}
.site-footer a { color: #F2E4E0; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: var(--s6); padding-bottom: var(--s7); }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--s7); } }
.footer-grid h2 {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #E1B6AC;
  margin-bottom: var(--s4);
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.6rem; font-size: 0.92rem; }
.footer-brand .wordmark { color: #FFF6F3; }
.footer-brand .wordmark .mark-tag { color: #C7D9C2; border-left-color: rgba(255, 246, 243, 0.35); }
.footer-brand p { font-size: 0.93rem; color: #DCCCC7; margin: var(--s4) 0 var(--s5); max-width: 38ch; }
.social-row { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.social-row a {
  width: 40px; height: 40px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(255, 246, 243, 0.35);
  border-radius: var(--r-sm);
  color: #F2E4E0;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.social-row a:hover { background: var(--primary-700); border-color: var(--primary-300); }
.social-row svg { width: 19px; height: 19px; }
.footer-base {
  border-top: 1px solid rgba(255, 246, 243, 0.2);
  padding-block: var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  justify-content: space-between;
  font-size: 0.86rem;
  color: #D3C0BB;
}
.footer-base p { margin: 0; max-width: none; }

/* --------------------------------------------------------------- inner pages */
.page-head {
  padding-block: var(--s7) var(--s6);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(to bottom, rgba(255, 253, 249, 0.95), rgba(248, 246, 242, 0));
}
.page-head .breadcrumb { font-size: 0.84rem; color: var(--muted); margin-bottom: var(--s4); }
.page-head .breadcrumb a { color: var(--primary-700); }
.prose { max-width: 74ch; }
.prose h2 {
  font-size: var(--step-3);
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 2px solid var(--primary-100);
}
.prose h2:first-of-type { margin-top: var(--s5); }
.prose h3 { font-size: var(--step-1); margin-top: var(--s5); }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { font-size: 0.97rem; color: var(--ink-soft); }
.prose p { color: var(--ink-soft); }
.fact-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--s5);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  font-size: 0.93rem;
}
.fact-table th, .fact-table td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.fact-table th { width: 38%; font-weight: 700; color: var(--primary-900); background: var(--primary-050); }
.fact-table tr:last-child th, .fact-table tr:last-child td { border-bottom: 0; }
.updated-stamp {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-800);
  border: 1px solid var(--accent-200);
  background: var(--accent-050);
  border-radius: var(--r-sm);
  padding: 0.35rem 0.7rem;
  margin-bottom: var(--s5);
}
.author-layout { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .author-layout { grid-template-columns: 300px 1fr; gap: var(--s8); align-items: start; } }
.author-portrait { position: sticky; top: 96px; }
.author-portrait img { width: 100%; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-card); }
.profile-links { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.profile-links li { margin-bottom: 0.55rem; }
.profile-links a { font-size: 0.92rem; font-weight: 600; }
.map-group { margin-bottom: var(--s6); }
.map-group ul { list-style: none; padding: 0; margin: 0; }
.map-group li {
  border-bottom: 1px dashed var(--rule-strong);
  padding: 0.8rem 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
}
.map-group li a { font-weight: 700; }
.center-panel { max-width: 640px; margin-inline: auto; text-align: center; }
.center-panel .seal { margin: 0 auto var(--s5); }
.center-panel p { margin-inline: auto; }
.center-panel .hero-actions { justify-content: center; }
.big-code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 2.6rem + 6vw, 7rem);
  font-weight: 800;
  line-height: 0.95;
  color: var(--primary-300);
  letter-spacing: 0.04em;
  margin: 0 0 var(--s4);
}

/* --------------------------------------------------------------- motion */
/* notice cards stack in sequence: measured fade with a small settle */
.reveal { opacity: 0; transform: translateY(20px) rotate(-0.35deg); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.62s var(--ease), transform 0.62s var(--ease);
  transition-delay: calc(var(--i, 0) * 95ms);
}
.no-js .reveal { opacity: 1; transform: none; }

@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; }
}

/* --------------------------------------------------------------- print */
@media print {
  .site-header, .site-footer, .skip-link, .hero-actions { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   Notice and Cure: the magazine
   Same tokens, same notice card motif, longer measure for reading.
   ========================================================================== */

/* Tablet landscape up to small desktop. Seven nav entries, the wordmark and the
   button have to share one row here, so the whole row steps down together
   rather than letting any label break onto a second line. */
@media (min-width: 941px) and (max-width: 1160px) {
  .header-inner { gap: 0.7rem; }
  .wordmark { font-size: 1.08rem; gap: 0.45rem; }
  .wordmark svg { width: 28px; height: 28px; }
  .wordmark .mark-tag { font-size: 0.52rem; letter-spacing: 0.1em; padding-left: 0.45rem; }
  .site-nav ul { gap: 0.7rem; }
  .site-nav a { font-size: 0.8rem; }
  /* two classes so the smaller metrics win over .btn-sm without !important */
  .btn.header-cta { font-size: 0.84rem; padding: 0.55rem 0.8rem; }
}
.site-nav a[aria-current="page"] {
  color: var(--primary-700);
  font-weight: 700;
  border-bottom-color: var(--primary);
}

/* --------------------------------------------------------- masthead block */
.mag-head {
  background:
    linear-gradient(to bottom, var(--paper), rgba(248, 246, 242, 0));
  border-bottom: 1px solid var(--paper-edge);
  padding-block: var(--s6) var(--s7);
}
@media (min-width: 900px) { .mag-head { padding-block: var(--s7) var(--s8); } }
.mag-head-inner { max-width: 40rem; }
.mag-head-index .mag-head-inner { max-width: 46rem; }

.mag-crumb { margin-bottom: var(--s5); }
.mag-crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.55rem;
  list-style: none;
  margin: 0; padding: 0;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.mag-crumb li { margin: 0; }
.mag-crumb li + li::before {
  content: "/";
  margin-right: 0.55rem;
  color: var(--rule-strong);
}
.mag-crumb a { color: var(--primary-700); text-decoration: none; border-bottom: 1px solid var(--primary-100); }
.mag-crumb a:hover { border-bottom-color: var(--primary-300); }
.mag-crumb [aria-current="page"] { color: var(--ink-soft); font-weight: 600; }

.mag-head h1 { font-size: var(--step-4); margin-bottom: var(--s4); }
.mag-head-index h1 { font-size: var(--step-5); }
.mag-standfirst {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.42;
  color: var(--ink-soft);
  max-width: 34em;
  margin-bottom: var(--s5);
}
.mag-index-meta { font-size: 0.9rem; color: var(--muted); margin-bottom: 0; }
.mag-index-meta a { font-weight: 600; }

/* ------------------------------------------------------------------ byline */
.mag-byline {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding-top: var(--s4);
  border-top: 2px solid var(--primary-100);
}
.mag-byline-face {
  width: 48px; height: 48px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--rule);
  object-fit: cover;
}
.mag-byline-text { margin: 0; font-size: 0.94rem; max-width: none; }
.mag-byline-text a { font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--primary-100); }
.mag-byline-text a:hover { border-bottom-color: var(--primary-300); }
.mag-byline-meta { color: var(--muted); font-size: 0.84rem; }
.mag-sep {
  display: inline-block;
  width: 3px; height: 3px;
  margin: 0 0.5rem;
  vertical-align: 0.2em;
  background: var(--rule-strong);
  border-radius: 50%;
}

/* ------------------------------------------------------- the reading shell */
.mag-shell {
  width: min(100% - 2rem, 46rem);
  margin-inline: auto;
  padding-block: var(--s6) var(--s8);
}
@media (min-width: 900px) { .mag-shell { padding-block: var(--s7) var(--s9); } }

.mag-figure {
  margin: 0 0 var(--s6);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  padding: 6px;
  box-shadow: var(--shadow-card);
}
.mag-figure img { width: 100%; }
.mag-figure figcaption {
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.7rem 0.35rem 0.15rem;
  border-top: 1px solid var(--rule);
  margin-top: 6px;
}

/* --------------------------------------------------------- body typography */
.mag-prose { max-width: 68ch; font-size: 1.02rem; line-height: 1.72; }
.mag-prose p { color: var(--ink-soft); margin: 0 0 var(--s5); max-width: 68ch; }
.mag-prose h2 {
  font-size: var(--step-3);
  line-height: 1.18;
  margin: var(--s8) 0 var(--s4);
  padding-top: var(--s4);
  border-top: 2px solid var(--primary-100);
}
.mag-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mag-prose h3 {
  font-size: var(--step-1);
  margin: var(--s6) 0 var(--s3);
  color: var(--primary-900);
}
.mag-prose ul, .mag-prose ol { margin: 0 0 var(--s5); padding-left: 1.35rem; max-width: 66ch; }
.mag-prose li { margin-bottom: var(--s3); color: var(--ink-soft); }
.mag-prose li::marker { color: var(--accent-600); font-weight: 700; }
.mag-prose strong { color: var(--ink); }
.mag-prose a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; }
.mag-prose blockquote {
  margin: var(--s6) 0;
  padding: var(--s4) var(--s5);
  border-left: 4px solid var(--accent-600);
  background: var(--accent-050);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.45;
}
.mag-prose blockquote p:last-child { margin-bottom: 0; }
.mag-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--s6);
  font-size: 0.94rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
}
.mag-prose th, .mag-prose td {
  text-align: left;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.mag-prose th { background: var(--primary-050); color: var(--primary-900); font-weight: 700; }
.mag-prose tr:last-child td { border-bottom: 0; }

/* the contextual link the assembler drops between sections */
.mag-prose .inline-read {
  position: relative;
  margin: var(--s6) 0;
  padding: 0.85rem 1.05rem 0.85rem 1.15rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent-600);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
  max-width: none;
}
.mag-prose .inline-read a {
  display: inline;
  color: var(--primary-700);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--primary-100);
}
.mag-prose .inline-read a:hover { color: var(--primary-900); border-bottom-color: var(--primary-300); }

/* ------------------------------------------------------- call to action box */
.mag-cta { margin-top: var(--s8); }
.mag-cta h2 { font-size: var(--step-2); margin-bottom: var(--s3); }
.mag-cta p { font-size: 0.97rem; color: var(--ink-soft); }
.mag-cta .mag-cta-actions { margin: var(--s5) 0 var(--s3); max-width: none; }
.mag-cta .mag-cta-note { font-size: 0.85rem; color: var(--muted); margin-bottom: 0; }
@media (max-width: 420px) { .mag-cta .btn { width: 100%; } }

/* ------------------------------------------------------------- author box */
.mag-author {
  margin-top: var(--s6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  align-items: flex-start;
  background: var(--paper);
}
.mag-author > img {
  width: 96px; height: 96px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--rule-strong);
  object-fit: cover;
}
.mag-author > div { flex: 1 1 16rem; }
.mag-author-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--accent-800);
  margin-bottom: var(--s2);
}
.mag-author h2 { font-size: var(--step-1); margin-bottom: var(--s3); }
.mag-author p { font-size: 0.95rem; color: var(--ink-soft); }
.mag-author .mag-author-link { margin-bottom: 0; }
.mag-author .mag-author-link a { font-weight: 700; }

/* -------------------------------------------------------- read also block */
.mag-related { padding-block: 0; margin-top: var(--s8); }
.mag-related-head { margin-bottom: var(--s5); }
.mag-related-head h2 { font-size: var(--step-2); margin-bottom: 0; }
.mag-related-grid { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .mag-related-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.mag-rel-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.mag-rel-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.mag-rel-media { border-bottom: 2px solid var(--primary-100); }
.mag-rel-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mag-rel-body { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.mag-rel-title { font-size: 1.02rem; line-height: 1.24; margin-bottom: var(--s2); }
.mag-rel-title a { color: var(--ink); text-decoration: none; }
.mag-rel-title a:hover { color: var(--primary-700); text-decoration: underline; }
.mag-rel-dek {
  font-size: 0.87rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: var(--s3);
  max-width: none;
}
.mag-rel-meta {
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-800);
  margin: auto 0 0;
  max-width: none;
}
.mag-related-all { margin: var(--s5) 0 0; }
.mag-related-all a { font-weight: 700; }

/* ------------------------------------------------------------ index grid */
.mag-index { padding-block: var(--s7) var(--s6); }
.mag-grid { display: grid; gap: var(--s5); }
@media (min-width: 720px) { .mag-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .mag-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--s5); } }

.mag-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.mag-card:hover {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
  border-color: var(--primary-300);
}
.mag-card-media { border-bottom: 2px solid var(--primary-100); background: var(--paper); }
.mag-card-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mag-card-body { padding: var(--s5) var(--s4) var(--s4); display: flex; flex-direction: column; flex: 1; }
.mag-card-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
  max-width: none;
}
.mag-card-kicker .mag-angle { color: var(--primary-700); }
.mag-card-title { font-size: var(--step-1); line-height: 1.2; margin-bottom: var(--s3); }
.mag-card-title a { color: var(--ink); text-decoration: none; }
.mag-card-title a::after { content: ""; position: absolute; inset: 0; }
.mag-card-title a:hover { color: var(--primary-700); }
.mag-card-dek {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: var(--s4);
  max-width: none;
}
.mag-card-meta {
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-800);
  margin: auto 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  max-width: none;
}

/* the lead card: article one, given the front page treatment */
.mag-card.lead { border-width: 2px; border-color: var(--primary-300); }
.mag-card.lead .mag-card-media { border-bottom-color: var(--primary-300); }
.mag-card.lead .mag-card-title { font-size: var(--step-2); }
.mag-card.lead .mag-card-dek { font-size: 0.97rem; }
.mag-card.lead .mag-card-body { padding: var(--s5); }
.mag-card.lead .mag-card-kicker .mag-angle { color: var(--primary-900); }
@media (min-width: 720px) {
  .mag-card.lead { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .mag-card.lead .mag-card-media {
    flex: 1 1 52%;
    border-bottom: 0;
    border-right: 2px solid var(--primary-300);
  }
  .mag-card.lead .mag-card-media img { height: 100%; aspect-ratio: auto; min-height: 17rem; }
  .mag-card.lead .mag-card-body { flex: 1 1 48%; justify-content: center; padding: var(--s6); }
  .mag-card.lead .mag-card-title { font-size: var(--step-3); }
}

/* -------------------------------------------------------- index closing cta */
.mag-index-cta { padding-block: var(--s6) var(--s8); }
.mag-index-cta .mag-cta { margin-top: 0; max-width: 46rem; }

/* ------------------------------------------------- home page latest strip */
.mag-home-grid { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .mag-home-grid { grid-template-columns: repeat(3, 1fr); } }
.mag-home-all { margin-top: var(--s6); }

/* --------------------------------------------- author and site map listings */
.mag-list, .prose .mag-list { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.mag-list li, .prose .mag-list li {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.mag-list li:last-child { border-bottom: 0; }
.mag-list a { font-weight: 700; }
.mag-list time {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-800);
  margin-top: 0.2rem;
}

/* ------------------------------------------------------------ small screens */
@media (max-width: 420px) {
  .mag-shell { width: min(100% - 1.5rem, 46rem); }
  .mag-prose { font-size: 1rem; }
  .mag-prose h2 { font-size: var(--step-2); margin-top: var(--s7); }
  .mag-byline { flex-direction: row; align-items: flex-start; gap: var(--s3); }
  .mag-byline-face { width: 42px; height: 42px; }
  .mag-author { gap: var(--s4); }
  .mag-author > img { width: 72px; height: 72px; }
  .mag-card-body { padding: var(--s4) var(--s3) var(--s3); }
  .mag-card.lead .mag-card-body { padding: var(--s4) var(--s3) var(--s3); }
  .mag-figure { padding: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .mag-card, .mag-rel-card { transition: none; }
  .mag-card:hover, .mag-rel-card:hover { transform: none; }
}

@media print {
  .mag-cta, .mag-related, .mag-byline-face { display: none; }
  .mag-prose { max-width: none; }
}



/* 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: the wordmark would not shrink, so the flex row pushed the menu button
   past the right edge of the header. */
@media (max-width: 420px) {
  .header-inner { gap: 0.55rem; }
  .wordmark { min-width: 0; font-size: 1.02rem; overflow: hidden; }
  .wordmark span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-toggle { flex: none; }
}


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