/* ==========================================================================
   ToolboxProof design system
   Workshop industrial: sawdust tan ground, steel grey structure, safety
   yellow signal. Oswald stamped over Roboto. Blueprint rules, hard edges.
   ========================================================================== */

:root {
  /* brief palette */
  --bg: #F4F1EA;
  --surface: #FFFFFF;
  --ink: #1C1C1C;
  --primary: #2F4858;
  --accent: #F2B705;
  --muted: #6B6B6B;

  /* sawdust tints */
  --sawdust-100: #FAF8F3;
  --sawdust-200: #EDE8DC;
  --sawdust-300: #E1D9C6;
  --sawdust-400: #D2C7AD;

  /* steel shades derived from primary */
  --steel-900: #12212A;
  --steel-800: #1C303B;
  --steel-700: #243B48;
  --steel-600: var(--primary);
  --steel-500: #3E5C6E;
  --steel-400: #6E8B9B;
  --steel-300: #9DB2BE;
  --steel-200: #C8D5DC;
  --steel-100: #E6EDF1;

  /* safety yellow shades */
  --signal-700: #8C6A03;
  --signal-600: #C29303;
  --signal-500: var(--accent);
  --signal-300: #FFD849;
  --signal-100: #FBEEC2;

  --ink-soft: #35383A;
  --line: #C9C2B2;
  --line-strong: #3B3B3B;

  /* type */
  --font-display: "Oswald", "Arial Narrow", "Haettenschweiler", sans-serif;
  --font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.125rem, 0.4vw + 1.02rem, 1.3rem);
  --t-xl: clamp(1.35rem, 1vw + 1.1rem, 1.75rem);
  --t-2xl: clamp(1.7rem, 1.9vw + 1.2rem, 2.4rem);
  --t-3xl: clamp(2.1rem, 3.2vw + 1.2rem, 3.4rem);
  --t-4xl: clamp(2.5rem, 4.6vw + 1.1rem, 4.25rem);

  /* space */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 44px;
  --s8: 64px;
  --s9: 88px;
  --s10: 120px;

  /* structure */
  --wrap: 1200px;
  --wrap-narrow: 780px;
  --radius: 0px;
  --border: 2px solid var(--ink);
  --hairline: 1px solid var(--line);
  --hard: 8px 8px 0 var(--steel-800);
  --hard-sm: 5px 5px 0 var(--steel-800);
  --hard-accent: 6px 6px 0 var(--signal-500);
  --grid-unit: 34px;
  --header-h: 74px;
}

/* --------------------------------------------------------------------------
   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(--t-md);
  line-height: 1.68;
  overflow-x: hidden;
  /* blueprint grid: fine rules every unit, heavy rule every fifth */
  background-image:
    linear-gradient(to right, rgba(47, 72, 88, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(47, 72, 88, 0.055) 1px, transparent 1px),
    linear-gradient(to right, rgba(47, 72, 88, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(47, 72, 88, 0.10) 1px, transparent 1px);
  background-size:
    var(--grid-unit) var(--grid-unit),
    var(--grid-unit) var(--grid-unit),
    calc(var(--grid-unit) * 5) calc(var(--grid-unit) * 5),
    calc(var(--grid-unit) * 5) calc(var(--grid-unit) * 5);
  background-position: 0 0;
}
img { max-width: 100%; display: block; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: 0.005em;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: var(--t-4xl); font-weight: 700; letter-spacing: -0.012em; }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }
p { margin: 0 0 var(--s4); }
a { color: var(--steel-700); text-underline-offset: 3px; }
a:hover { color: var(--signal-700); }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.1rem; }
li { margin-bottom: var(--s2); }
strong { font-weight: 700; }
hr { border: 0; border-top: 2px solid var(--ink); margin: var(--s7) 0; }

:focus-visible {
  outline: 3px solid var(--signal-500);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--steel-800);
}
::selection { background: var(--signal-500); color: var(--ink); }

.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(--signal-500); color: var(--ink);
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.08em; font-size: var(--t-sm);
  padding: var(--s3) var(--s5); border: var(--border);
  box-shadow: var(--hard-sm); text-decoration: none;
  transition: top .18s linear;
}
.skip-link:focus { top: var(--s3); }

.wrap { width: min(100% - 2 * var(--s5), var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2 * var(--s5), var(--wrap-narrow)); margin-inline: auto; }

/* --------------------------------------------------------------------------
   stamped labels and rules
   -------------------------------------------------------------------------- */
.stamp {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--steel-800);
  border: 2px solid var(--steel-800);
  padding: 5px 12px 4px;
  background:
    repeating-linear-gradient(122deg, rgba(255,255,255,0.55) 0 3px, transparent 3px 7px),
    var(--signal-500);
  transform: rotate(-1.4deg);
  box-shadow: 3px 3px 0 rgba(28, 28, 28, 0.22);
}
.stamp--quiet {
  background:
    repeating-linear-gradient(122deg, rgba(255,255,255,0.6) 0 3px, transparent 3px 7px),
    var(--sawdust-300);
  color: var(--steel-800);
}
.stamp--dark {
  background:
    repeating-linear-gradient(122deg, rgba(255,255,255,0.10) 0 3px, transparent 3px 7px),
    var(--steel-800);
  color: var(--sawdust-100);
  border-color: var(--signal-500);
}

/* ruler: tick marks that draw open on reveal */
.ruler {
  --tick: 11px;
  height: 16px;
  width: 100%;
  max-width: 340px;
  margin: 0 0 var(--s5);
  border-top: 2px solid var(--ink);
  background-image:
    repeating-linear-gradient(to right, var(--ink) 0 2px, transparent 2px var(--tick));
  background-repeat: no-repeat;
  background-size: 100% 8px;
  background-position: 0 0;
  transform-origin: left center;
  transform: scaleX(0.06);
  transition: transform .85s cubic-bezier(.2,.7,.3,1);
}
.is-visible .ruler, .ruler.is-visible { transform: scaleX(1); }
.ruler--center { margin-inline: auto; transform-origin: center; }

.section-head { max-width: 66ch; margin-bottom: var(--s7); }
.section-head .stamp { margin-bottom: var(--s5); }
.section-head p { color: var(--ink-soft); font-size: var(--t-lg); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .ruler { margin-inline: auto; transform-origin: center; }

section { padding-block: var(--s9); position: relative; }
.band-dark {
  background-color: var(--steel-800);
  color: var(--sawdust-100);
  background-image:
    linear-gradient(to right, rgba(244, 241, 234, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244, 241, 234, 0.07) 1px, transparent 1px);
  background-size: var(--grid-unit) var(--grid-unit);
  border-block: 3px solid var(--ink);
}
.band-dark h2, .band-dark h3 { color: var(--sawdust-100); }
/* Stamps are paragraphs too, so this band level paragraph colour used to win on
   specificity and print pale grey on the safety yellow ground. Excluding .stamp lets
   each stamp keep its own steel ink, which is what the yellow is drawn for. */
.band-dark p:not(.stamp) { color: #D9E1E6; }
.band-dark a { color: var(--signal-300); }
.band-tan {
  background-color: var(--sawdust-200);
  border-block: 3px solid var(--ink);
  background-image:
    repeating-linear-gradient(90deg, rgba(28,28,28,0.045) 0 1px, transparent 1px calc(var(--grid-unit) / 2));
}

/* --------------------------------------------------------------------------
   buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  text-decoration: none;
  padding: 14px 24px 12px;
  border: var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--hard-sm);
  transition: transform .14s linear, box-shadow .14s linear, background-color .14s linear;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--steel-800); color: var(--ink); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--steel-800); }
.btn-primary { background: var(--signal-500); color: var(--ink); }
.btn-primary:hover { background: var(--signal-300); }
.btn-dark { background: var(--steel-800); color: var(--sawdust-100); border-color: var(--ink); }
.btn-dark:hover { background: var(--steel-700); color: #fff; }
.btn-ghost { background: transparent; box-shadow: none; border-color: var(--ink); }
.btn-ghost:hover { background: var(--sawdust-300); box-shadow: none; transform: none; }
.btn-block { width: 100%; justify-content: center; }
.btn svg { width: 16px; height: 16px; flex: none; }

/* --------------------------------------------------------------------------
   header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: var(--sawdust-100);
  border-bottom: 3px solid var(--ink);
  transition: box-shadow .18s linear, background-color .18s linear;
}
.site-header.is-stuck { box-shadow: 0 6px 0 rgba(28, 28, 28, 0.12); background: var(--surface); }
.header-inner {
  display: flex; align-items: center; gap: var(--s5);
  min-height: var(--header-h);
  width: min(100% - 2 * var(--s5), var(--wrap));
  margin-inline: auto;
}
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--ink); }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.32rem; text-transform: uppercase; letter-spacing: 0.045em;
}
.brand-name span { color: var(--steel-600); }
.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: var(--s5); list-style: none; margin: 0; padding: 0; }
.nav-list a {
  font-family: var(--font-display); font-size: var(--t-sm); text-transform: uppercase;
  letter-spacing: 0.09em; text-decoration: none; color: var(--steel-800);
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.nav-list a:hover { border-bottom-color: var(--signal-500); color: var(--ink); }
.header-cta { margin-left: var(--s4); }
/* The header carries one call to action per width. The button inside the nav is the
   drawer copy, so it is held back on desktop where .header-cta already sits in the
   header row; below 900px the pair swaps over in the media query. */
.nav > .btn { display: none; }
.nav-toggle {
  display: none; margin-left: auto;
  width: 46px; height: 42px; padding: 0;
  background: var(--surface); border: var(--border); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 22px; height: 2px; background: var(--ink); content: "";
  position: relative;
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] { background: var(--signal-500); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 3px solid var(--ink);
    margin-left: 0; display: none; padding: var(--s5);
  }
  .nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li { border-bottom: var(--hairline); margin: 0; }
  .nav-list a { display: block; padding: var(--s4) 0; font-size: var(--t-base); }
  .header-cta { display: none; }
  .nav > .btn { display: inline-flex; margin-top: var(--s5); width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   hero
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--s8) var(--s9); border-bottom: 3px solid var(--ink); overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: 1.04fr 0.96fr; gap: var(--s8); align-items: center;
}
.hero h1 { margin-bottom: var(--s5); }
.hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--signal-500) 62% 92%, transparent 92%); }
.hero-lede { font-size: var(--t-lg); color: var(--ink-soft); max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s6) 0 var(--s7); }
.trust-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: var(--border); background: var(--surface); box-shadow: var(--hard-sm);
}
.trust-item { padding: var(--s4) var(--s4) var(--s4) var(--s5); border-right: var(--border); }
.trust-item:last-child { border-right: 0; }
.trust-item b {
  display: block; font-family: var(--font-display); font-size: 1.45rem;
  letter-spacing: 0.01em; line-height: 1.1;
}
.trust-item span { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted); }
.hero-figure { position: relative; }
.frame {
  border: 3px solid var(--ink); background: var(--surface); padding: 10px;
  box-shadow: var(--hard);
  position: relative;
}
.frame::before {
  content: ""; position: absolute; inset: -3px; pointer-events: none;
  border: 1px solid rgba(242, 183, 5, 0.85); margin: 5px;
}
.frame img { border: 1px solid var(--line); }
.plate {
  position: absolute; z-index: 3;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: var(--t-xs); letter-spacing: 0.16em; font-weight: 600;
  background: var(--steel-800); color: var(--sawdust-100);
  border: 2px solid var(--ink); padding: 7px 12px 6px;
}
.plate--tr { top: -16px; right: 18px; transform: rotate(1.6deg); }
.plate--bl { bottom: -18px; left: -14px; background: var(--signal-500); color: var(--ink); transform: rotate(-1.8deg); }
.plate b { display: block; font-size: 1.05rem; letter-spacing: 0.02em; }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-item { border-right: 0; border-bottom: var(--border); }
  .trust-item:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   problem
   -------------------------------------------------------------------------- */
.problem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.problem-card {
  background: var(--surface); border: var(--border); padding: var(--s5);
  position: relative; box-shadow: var(--hard-sm);
}
.problem-card::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 8px, var(--signal-500) 8px 16px);
}
.problem-card h3 { margin-top: var(--s4); font-size: var(--t-lg); }
.problem-card p { font-size: var(--t-base); color: var(--ink-soft); margin-bottom: var(--s4); }
.cost {
  display: block; font-family: var(--font-display); font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: 0.09em;
  border-top: 2px solid var(--ink); padding-top: var(--s3); color: var(--steel-700);
}
.cost b { color: var(--ink); font-size: 1.05rem; }
@media (max-width: 1000px) { .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .problem-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   how it works and the wipe viewer
   -------------------------------------------------------------------------- */
.steps-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step {
  display: grid; grid-template-columns: 62px 1fr; gap: var(--s5);
  padding: var(--s5) 0; border-bottom: 2px dashed rgba(244, 241, 234, 0.35);
}
.step:last-child { border-bottom: 0; }
.step-num {
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 700;
  width: 56px; height: 56px; display: grid; place-items: center;
  border: 2px solid var(--signal-500); color: var(--signal-500);
  background: rgba(242, 183, 5, 0.08);
}
.step h3 { margin-bottom: var(--s2); }
.step p { margin-bottom: 0; font-size: var(--t-base); }

.wipe { margin: 0; }
.wipe-stage {
  position: relative; overflow: hidden;
  border: 3px solid var(--ink); background: var(--steel-900);
  box-shadow: var(--hard-accent);
}
.wipe-stage img { width: 100%; }
.wipe-img--before { filter: grayscale(1) contrast(1.12) brightness(0.86); }
.wipe-layer {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 58%);
  animation: toolboxWipe 14s linear infinite;
}
.wipe-layer img { height: 100%; object-fit: cover; }
.wipe-seam {
  position: absolute; top: 0; bottom: 0; left: 58%; width: 4px;
  background: var(--signal-500); box-shadow: 0 0 0 2px rgba(28, 28, 28, 0.6);
  animation: toolboxSeam 14s linear infinite;
}
.wipe-seam::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  background: var(--signal-500); border: 2px solid var(--ink);
}
@keyframes toolboxWipe {
  0%   { clip-path: inset(0 0 0 14%); }
  45%  { clip-path: inset(0 0 0 78%); }
  55%  { clip-path: inset(0 0 0 78%); }
  100% { clip-path: inset(0 0 0 14%); }
}
@keyframes toolboxSeam {
  0%   { left: 14%; }
  45%  { left: 78%; }
  55%  { left: 78%; }
  100% { left: 14%; }
}
.wipe-tag {
  position: absolute; bottom: 14px; z-index: 4;
  font-family: var(--font-display); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.18em;
  border: 2px solid var(--ink); padding: 5px 10px 4px;
}
.wipe-tag--a { left: 14px; background: var(--sawdust-100); color: var(--ink); }
.wipe-tag--b { right: 14px; background: var(--signal-500); color: var(--ink); }
.wipe figcaption {
  font-size: var(--t-sm); color: var(--muted); margin-top: var(--s4);
  border-left: 4px solid var(--signal-500); padding-left: var(--s4);
}
.band-dark .wipe figcaption { color: #C7D2D8; }
@media (max-width: 980px) { .steps-layout { grid-template-columns: 1fr; gap: var(--s7); } }

/* --------------------------------------------------------------------------
   features
   -------------------------------------------------------------------------- */
.features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.feature {
  background: var(--surface); border: var(--border); padding: var(--s6) var(--s5);
  position: relative; transition: transform .16s linear, box-shadow .16s linear;
}
.feature:hover { transform: translate(-3px, -3px); box-shadow: var(--hard-sm); }
.feature h3 { font-size: var(--t-lg); margin-bottom: var(--s3); }
.feature p { font-size: var(--t-base); color: var(--ink-soft); margin-bottom: 0; }
.icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border: 2px solid var(--ink); background: var(--sawdust-200); margin-bottom: var(--s4);
}
.icon svg { width: 28px; height: 28px; }
.icon svg * { vector-effect: non-scaling-stroke; }
.feature-tag {
  position: absolute; top: -2px; right: -2px;
  font-family: var(--font-display); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; background: var(--steel-800); color: var(--sawdust-100);
  padding: 4px 8px 3px; border: 2px solid var(--ink);
}
@media (max-width: 1000px) { .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .features-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   outcomes
   -------------------------------------------------------------------------- */
.outcomes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 3px solid var(--ink); background: var(--surface); }
.outcome { padding: var(--s6) var(--s5); border-right: 2px solid var(--ink); }
.outcome:last-child { border-right: 0; }
.outcome-num {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 3.6vw + 1rem, 3.5rem); line-height: 1;
  color: var(--steel-700); margin-bottom: var(--s3);
}
.outcome-num sup { font-size: 0.42em; vertical-align: super; color: var(--signal-600); }
.outcome h3 { font-size: var(--t-base); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--s3); }
.outcome p { font-size: var(--t-sm); color: var(--ink-soft); margin: 0; }
@media (max-width: 900px) {
  .outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outcome { border-bottom: 2px solid var(--ink); }
  .outcome:nth-child(2n) { border-right: 0; }
  .outcome:nth-child(n+3) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .outcomes { grid-template-columns: 1fr; }
  .outcome { border-right: 0; border-bottom: 2px solid var(--ink); }
  .outcome:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   testimonials and results
   -------------------------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-bottom: var(--s8); }
.testimonial {
  background: var(--surface); border: var(--border); padding: var(--s6) var(--s5) var(--s5);
  position: relative; box-shadow: var(--hard-sm); display: flex; flex-direction: column;
}
.testimonial::before {
  content: ""; position: absolute; top: 0; left: var(--s5); width: 44px; height: 8px;
  background: var(--signal-500); border: 2px solid var(--ink); transform: translateY(-5px);
}
.testimonial blockquote { margin: 0 0 var(--s5); font-size: var(--t-base); color: var(--ink); }
.testimonial blockquote p:last-child { margin-bottom: 0; }
.who { margin-top: auto; border-top: 2px solid var(--ink); padding-top: var(--s4); }
.who b { display: block; font-family: var(--font-display); font-size: var(--t-lg); letter-spacing: 0.01em; }
.who span { display: block; font-size: var(--t-sm); color: var(--muted); }
.who .where { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--steel-600); margin-top: 4px; }
.results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 3px solid var(--ink); background: var(--steel-800); color: var(--sawdust-100); }
.result { padding: var(--s6) var(--s5); border-right: 2px solid rgba(244,241,234,0.28); }
.result:last-child { border-right: 0; }
.result b { display: block; font-family: var(--font-display); font-size: 2.4rem; color: var(--signal-500); line-height: 1; margin-bottom: var(--s2); }
.result span { font-size: var(--t-sm); color: #D3DDE2; }
@media (max-width: 900px) {
  .quotes { grid-template-columns: 1fr; }
  .results { grid-template-columns: 1fr; }
  .result { border-right: 0; border-bottom: 2px solid rgba(244,241,234,0.28); }
  .result:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   pricing
   -------------------------------------------------------------------------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
.tier {
  background: var(--surface); border: 3px solid var(--ink); padding: var(--s6) var(--s5) var(--s5);
  display: flex; flex-direction: column; position: relative;
}
.tier h3 { font-size: var(--t-xl); margin-bottom: var(--s2); }
.tier-line { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s5); min-height: 3.2em; }
.price { font-family: var(--font-display); font-weight: 700; font-size: 3.1rem; line-height: 1; color: var(--ink); }
.price small { font-family: var(--font-body); font-weight: 400; font-size: var(--t-sm); color: var(--muted); letter-spacing: 0; }
.price-rule { border-top: 2px solid var(--ink); margin: var(--s5) 0; }
.tier-list { list-style: none; margin: 0 0 var(--s6); padding: 0; }
.tier-list li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s3); font-size: var(--t-base); align-items: start; }
.tier-list li::before {
  content: ""; width: 14px; height: 14px; margin-top: 7px;
  background: var(--signal-500); border: 2px solid var(--ink);
}
.tier--rec { background: var(--sawdust-100); box-shadow: var(--hard); border-color: var(--ink); }
.tier--rec .price { color: var(--steel-700); }
.rec-flag {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%) rotate(-1.2deg);
  background: var(--signal-500); color: var(--ink); border: 2px solid var(--ink);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: var(--t-xs); padding: 6px 14px 5px; white-space: nowrap;
}
.tier .btn { margin-top: auto; }
.billing-note {
  margin-top: var(--s6); border: 2px dashed var(--ink); background: var(--sawdust-100);
  padding: var(--s5); font-size: var(--t-base); text-align: center;
}
@media (max-width: 940px) {
  .pricing-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .tier--rec { order: -1; }
}

/* --------------------------------------------------------------------------
   faq
   -------------------------------------------------------------------------- */
.faq-list { border-top: 3px solid var(--ink); }
.faq-item { border-bottom: 3px solid var(--ink); background: var(--surface); }
.faq-q {
  width: 100%; display: flex; gap: var(--s4); align-items: center; justify-content: space-between;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: var(--t-lg); font-weight: 500;
  color: var(--ink); padding: var(--s5) var(--s5) var(--s5) var(--s5);
}
.faq-q:hover { background: var(--sawdust-200); }
.faq-q .mark {
  flex: none; width: 30px; height: 30px; border: 2px solid var(--ink);
  background: var(--sawdust-200); position: relative;
}
.faq-q .mark::before, .faq-q .mark::after {
  content: ""; position: absolute; background: var(--ink);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.faq-q .mark::before { width: 14px; height: 2px; }
.faq-q .mark::after { width: 2px; height: 14px; transition: transform .18s linear; }
.faq-q[aria-expanded="true"] .mark { background: var(--signal-500); }
.faq-q[aria-expanded="true"] .mark::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a { padding: 0 var(--s5) var(--s5); max-width: 78ch; }
.faq-a p { font-size: var(--t-base); color: var(--ink-soft); margin-bottom: var(--s3); }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a[hidden] { display: none; }

/* --------------------------------------------------------------------------
   contact form
   -------------------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--s8); align-items: start; }
.contact-copy .checklist { list-style: none; padding: 0; margin-top: var(--s5); }
.contact-copy .checklist li { display: grid; grid-template-columns: 26px 1fr; gap: var(--s3); font-size: var(--t-base); }
.contact-copy .checklist li::before {
  content: ""; width: 16px; height: 16px; margin-top: 6px;
  background: var(--signal-500); border: 2px solid var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.form-card { background: var(--surface); border: 3px solid var(--ink); box-shadow: var(--hard); padding: var(--s6); }
/* The form column is far taller than the copy column, so the scroll reveal crossed its
   threshold later: the copy had already travelled up while the card was still offset
   down by the reveal, and the card read as sitting low. Scoped to this card so the site
   wide reveal is untouched: it keeps the fade, drops the travel, and stays pinned to the
   top of the row beside the copy. */
.contact-layout .form-card { align-self: start; transform: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label, .consent-label {
  font-family: var(--font-display); font-size: var(--t-sm); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--steel-800);
}
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: var(--t-base); color: var(--ink);
  background: var(--sawdust-100); border: 2px solid var(--ink); padding: 11px 12px;
  border-radius: 0; width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 49%, var(--ink) 50%); background-size: 12px 12px; background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--surface); }
.field [aria-invalid="true"] { border-color: #A4331B; background: #FDF1EE; }
.err { font-size: var(--t-sm); color: #8E2C17; font-weight: 500; min-height: 0; }
.err:empty { display: none; }
.consent { grid-column: 1 / -1; display: grid; grid-template-columns: 26px 1fr; gap: var(--s3); align-items: start; }
.consent input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--steel-700); }
.consent-label { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: var(--t-sm); color: var(--ink-soft); }
.form-foot { grid-column: 1 / -1; border-top: 2px solid var(--ink); padding-top: var(--s5); }
.form-note { font-size: var(--t-sm); color: var(--muted); margin: var(--s4) 0 0; }
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: var(--s7); }
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: var(--s5); }
}

/* --------------------------------------------------------------------------
   author byline
   -------------------------------------------------------------------------- */
.byline {
  display: grid; grid-template-columns: 66px 1fr; gap: var(--s5); align-items: center;
  border: 2px solid var(--ink); background: var(--sawdust-100); padding: var(--s5);
  margin-top: var(--s8);
}
.byline-mark { width: 62px; height: 62px; border: 2px solid var(--ink); background: var(--signal-500); display: grid; place-items: center; }
.byline p { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); }
.byline b { font-family: var(--font-display); font-size: var(--t-lg); display: block; }

/* --------------------------------------------------------------------------
   footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--steel-900); color: var(--sawdust-200);
  border-top: 4px solid var(--signal-500);
  background-image:
    linear-gradient(to right, rgba(244, 241, 234, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244, 241, 234, 0.05) 1px, transparent 1px);
  background-size: var(--grid-unit) var(--grid-unit);
  padding-top: var(--s9);
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: var(--s7); padding-bottom: var(--s8); }
.footer-col h2, .footer-col h3 {
  font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--signal-500); margin-bottom: var(--s5);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--s3); }
.footer-col a { color: var(--sawdust-200); text-decoration: none; font-size: var(--t-sm); }
.footer-col a:hover { color: var(--signal-300); text-decoration: underline; }
.footer-brand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.footer-brand svg { width: 34px; height: 34px; }
.footer-brand span { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.25rem; letter-spacing: 0.045em; color: var(--sawdust-100); }
.footer-pitch { font-size: var(--t-sm); color: #B9C4CA; max-width: 34ch; }
.social { display: flex; gap: var(--s3); margin-top: var(--s5); }
.social a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 2px solid var(--steel-400); color: var(--sawdust-100);
  transition: background-color .14s linear, border-color .14s linear;
}
.social a:hover { background: var(--signal-500); border-color: var(--signal-500); color: var(--ink); }
.social svg { width: 19px; height: 19px; }
.publisher { font-size: var(--t-xs); color: #97A5AC; margin-top: var(--s4); }
.footer-base {
  border-top: 2px solid rgba(244, 241, 234, 0.18);
  padding: var(--s5) 0; display: flex; flex-wrap: wrap; gap: var(--s4);
  justify-content: space-between; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.1em; color: #93A1A8;
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   document pages
   -------------------------------------------------------------------------- */
.page-head { border-bottom: 3px solid var(--ink); padding-block: var(--s8) var(--s7); background: var(--sawdust-200); }
.page-head .stamp { margin-bottom: var(--s5); }
.page-head p { max-width: 62ch; color: var(--ink-soft); font-size: var(--t-lg); margin-bottom: 0; }
.crumbs { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: var(--s4); }
.crumbs a { color: var(--steel-700); }
.doc { padding-block: var(--s8); }
.doc-body { background: var(--surface); border: 3px solid var(--ink); padding: var(--s7); box-shadow: var(--hard-sm); }
.doc-body h2 { font-size: var(--t-2xl); margin-top: var(--s7); padding-top: var(--s5); border-top: 2px solid var(--ink); }
.doc-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.doc-body h3 { font-size: var(--t-lg); margin-top: var(--s5); }
.doc-body p, .doc-body li { font-size: var(--t-base); }
.doc-body dl { margin: 0 0 var(--s5); }
.doc-body dt { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: var(--t-sm); color: var(--steel-700); margin-top: var(--s4); }
.doc-body dd { margin: 0 0 var(--s2); }
.updated { font-size: var(--t-sm); color: var(--muted); border-left: 4px solid var(--signal-500); padding-left: var(--s4); }
@media (max-width: 700px) { .doc-body { padding: var(--s5); } }

/* author page */
.author-grid { display: grid; grid-template-columns: 300px 1fr; gap: var(--s8); align-items: start; }
.portrait-frame { border: 3px solid var(--ink); background: var(--surface); padding: 8px; box-shadow: var(--hard-sm); position: relative; }
.portrait-frame img { border: 1px solid var(--line); }
.author-facts { list-style: none; margin: var(--s5) 0 0; padding: 0; border: 2px solid var(--ink); background: var(--sawdust-100); }
.author-facts li { margin: 0; padding: var(--s3) var(--s4); border-bottom: var(--hairline); font-size: var(--t-sm); }
.author-facts li:last-child { border-bottom: 0; }
.author-facts b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.09em; font-size: var(--t-xs); display: block; color: var(--steel-700); }
.profiles { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.profiles a { display: flex; gap: var(--s3); align-items: center; border: 2px solid var(--ink); background: var(--surface); padding: var(--s3) var(--s4); text-decoration: none; color: var(--ink); font-size: var(--t-sm); }
.profiles a:hover { background: var(--signal-500); }
@media (max-width: 860px) { .author-grid { grid-template-columns: 1fr; } }

/* site map */
.map-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.map-card { border: 2px solid var(--ink); background: var(--surface); padding: var(--s5); }
.map-card h2 { font-size: var(--t-xl); border-bottom: 2px solid var(--ink); padding-bottom: var(--s3); }
.map-card ul { list-style: none; padding: 0; margin: 0; }
.map-card li { border-bottom: var(--hairline); padding: var(--s3) 0; }
.map-card li:last-child { border-bottom: 0; }
.map-card a { font-family: var(--font-display); font-size: var(--t-base); text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; color: var(--steel-800); }
.map-card a:hover { color: var(--signal-700); text-decoration: underline; }
.map-card span { display: block; font-size: var(--t-sm); color: var(--muted); }
@media (max-width: 780px) { .map-grid { grid-template-columns: 1fr; } }

/* status pages */
.status { padding-block: var(--s10); text-align: center; }
.status .code { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 14vw, 9rem); line-height: 0.9; color: var(--steel-700); letter-spacing: -0.02em; }
.status .code span { color: var(--signal-500); }
.status p { max-width: 58ch; margin-inline: auto; color: var(--ink-soft); font-size: var(--t-lg); }
.status .hero-actions { justify-content: center; }

/* --------------------------------------------------------------------------
   reveal motion: ruler ticks and straight travel, no bounce
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s linear, transform .6s cubic-bezier(.22,.68,.28,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .07s; }
.reveal-d2 { transition-delay: .14s; }
.reveal-d3 { transition-delay: .21s; }
.reveal-d4 { transition-delay: .28s; }

@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; }
  .ruler { transform: scaleX(1); }
  .wipe-layer { animation: none; clip-path: inset(0 0 0 50%); }
  .wipe-seam { animation: none; left: 50%; }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .hero-actions { display: none; }
  body { background: #fff; }
}

/* ==========================================================================
   THE PUNCH LIST: magazine
   Same stamped, hard edged workshop language as the rest of the site. No new
   tokens, no new hues: sawdust ground, steel structure, safety yellow signal.
   ========================================================================== */

/* breadcrumb ------------------------------------------------------------- */
.mag-crumb { background: var(--sawdust-200); border-bottom: 2px solid var(--ink); padding-block: var(--s3); }
.mag-crumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-display); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--steel-700);
}
.mag-crumb li { margin: 0; display: flex; align-items: center; gap: var(--s2); }
.mag-crumb li + li::before { content: "/"; color: var(--muted); }
.mag-crumb a { color: var(--steel-800); text-decoration: none; border-bottom: 2px solid transparent; }
.mag-crumb a:hover { border-bottom-color: var(--signal-500); color: var(--ink); }
.mag-crumb [aria-current="page"] {
  color: var(--ink);
  max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* masthead --------------------------------------------------------------- */
.mag-masthead {
  background-color: var(--steel-800);
  color: var(--sawdust-100);
  border-bottom: 3px solid var(--ink);
  padding-block: var(--s8) var(--s7);
  background-image:
    linear-gradient(to right, rgba(244, 241, 234, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244, 241, 234, 0.07) 1px, transparent 1px);
  background-size: var(--grid-unit) var(--grid-unit);
}
.mag-masthead h1 { color: var(--sawdust-100); max-width: 20ch; }
.mag-masthead-stamp { margin-bottom: var(--s5); }
.mag-masthead .mag-standfirst { color: #D9E1E6; }
.mag-masthead .ruler { border-top-color: var(--signal-500); background-image: repeating-linear-gradient(to right, var(--signal-500) 0 2px, transparent 2px var(--tick, 11px)); }
.mag-masthead-facts {
  list-style: none; margin: var(--s6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 2px solid var(--signal-500);
}
.mag-masthead-facts li { margin: 0; padding: var(--s4) var(--s5); border-right: 2px solid var(--signal-500); }
.mag-masthead-facts li:last-child { border-right: 0; }
.mag-masthead-facts b {
  display: block; font-family: var(--font-display); font-size: 1.25rem;
  line-height: 1.15; color: var(--sawdust-100);
}
.mag-masthead-facts span {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--steel-300);
}

.mag-standfirst {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
  margin-bottom: var(--s5);
}

/* index grid ------------------------------------------------------------- */
.mag-index { padding-block: var(--s8) var(--s9); }
.mag-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }

.mag-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: var(--border);
  box-shadow: var(--hard-sm);
  transition: transform .14s linear, box-shadow .14s linear;
}
.mag-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--steel-800); }
.mag-card-shot { display: block; border-bottom: var(--border); overflow: hidden; }
.mag-card-shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mag-card-text { padding: var(--s5); display: flex; flex-direction: column; flex: 1; }
.mag-card-angle {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--steel-600);
  margin: 0 0 var(--s3); padding-bottom: var(--s3); border-bottom: 2px solid var(--ink);
}
.mag-card-title { font-size: var(--t-xl); margin-bottom: var(--s3); }
.mag-card-title a { color: var(--ink); text-decoration: none; }
.mag-card-title a:hover { color: var(--steel-700); text-decoration: underline; text-decoration-color: var(--signal-500); text-decoration-thickness: 3px; }
.mag-card-dek { font-size: var(--t-base); color: var(--ink-soft); margin-bottom: var(--s5); }
.mag-card-foot {
  margin: auto 0 0; padding-top: var(--s3); border-top: var(--hairline);
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--font-display); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted);
}
.mag-dot { width: 6px; height: 6px; background: var(--signal-500); border: 1px solid var(--ink); flex: none; }

/* lead card: full width, photograph beside the text */
.mag-card.lead {
  grid-column: 1 / -1;
  flex-direction: row;
  box-shadow: var(--hard);
  border-width: 3px;
}
.mag-card.lead:hover { box-shadow: 10px 10px 0 var(--steel-800); }
.mag-card.lead .mag-card-shot { flex: 1 1 52%; border-bottom: 0; border-right: 3px solid var(--ink); }
.mag-card.lead .mag-card-shot img { height: 100%; aspect-ratio: auto; min-height: 340px; }
.mag-card.lead .mag-card-text { flex: 1 1 48%; padding: var(--s7); justify-content: center; }
.mag-card.lead .mag-card-title { font-size: var(--t-2xl); }
.mag-card.lead .mag-card-dek { font-size: var(--t-lg); }
.mag-card.lead .mag-card-angle { color: var(--signal-700); }

.mag-index-foot {
  margin-top: var(--s8); padding: var(--s6);
  border: var(--border); background: var(--sawdust-200);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5);
  justify-content: space-between;
}
.mag-index-foot p { max-width: 62ch; margin: 0; color: var(--ink-soft); }

/* article ---------------------------------------------------------------- */
.mag-article { padding-block: var(--s7) var(--s9); }
.mag-head { max-width: 72ch; margin-bottom: var(--s6); }
.mag-kicker { margin-bottom: var(--s5); }
.mag-head h1 { font-size: var(--t-3xl); margin-bottom: var(--s5); }
.mag-byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5);
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  padding-block: var(--s3);
  font-family: var(--font-display); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted);
}
.mag-byline .mag-by { color: var(--ink); }
.mag-byline a { color: var(--steel-800); text-decoration: none; border-bottom: 2px solid var(--signal-500); }
.mag-byline a:hover { color: var(--signal-700); }
.mag-byline time { color: var(--ink-soft); }
.mag-read { margin-left: auto; color: var(--steel-700); }

.mag-figure { margin: 0 0 var(--s7); }
.mag-figure img { width: 100%; }
.mag-figure figcaption {
  margin-top: 10px; padding-top: var(--s2); border-top: var(--hairline);
  font-size: var(--t-sm); color: var(--muted);
}

/* body typography: measure held between 64 and 75 characters */
.mag-body { max-width: 70ch; font-size: var(--t-md); line-height: 1.72; }
.mag-body > * { max-width: 70ch; }
.mag-body h2 {
  font-size: var(--t-2xl); margin: var(--s8) 0 var(--s4);
  padding-top: var(--s4); border-top: 3px solid var(--ink);
}
.mag-body h3 { font-size: var(--t-xl); margin: var(--s6) 0 var(--s3); color: var(--steel-700); }
.mag-body p { margin: 0 0 var(--s5); }
.mag-body ul, .mag-body ol { margin: 0 0 var(--s5); padding-left: 1.35rem; }
.mag-body li { margin-bottom: var(--s3); }
.mag-body ul li::marker { color: var(--signal-600); }
.mag-body ol li::marker { font-family: var(--font-display); color: var(--steel-600); }
.mag-body a { color: var(--steel-700); text-decoration: underline; text-decoration-color: var(--signal-500); text-decoration-thickness: 2px; }
.mag-body a:hover { color: var(--signal-700); background: var(--signal-100); }
.mag-body strong { color: var(--ink); }
.mag-body blockquote {
  margin: var(--s6) 0; padding: var(--s5) var(--s6);
  background: var(--sawdust-200); border-left: 6px solid var(--signal-500);
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  font-size: var(--t-lg); line-height: 1.55;
}
.mag-body blockquote p:last-child { margin-bottom: 0; }
.mag-body table {
  width: 100%; border-collapse: collapse; margin: 0 0 var(--s6);
  background: var(--surface); border: var(--border); font-size: var(--t-sm);
  display: block; overflow-x: auto;
}
.mag-body caption {
  caption-side: top; text-align: left; padding-bottom: var(--s3);
  font-family: var(--font-display); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--steel-700);
}
.mag-body th, .mag-body td { padding: var(--s3) var(--s4); border-bottom: var(--hairline); text-align: left; vertical-align: top; }
.mag-body thead th {
  background: var(--steel-800); color: var(--sawdust-100);
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.09em; font-size: var(--t-xs); border-bottom: 2px solid var(--ink);
}
.mag-body tbody tr:nth-child(even) { background: var(--sawdust-100); }

/* the contextual link paragraphs the build places between sections */
.mag-body .inline-read {
  margin: var(--s6) 0; padding: var(--s4) var(--s5);
  background: var(--sawdust-100);
  border: 2px solid var(--ink); border-left: 8px solid var(--signal-500);
  box-shadow: var(--hard-sm);
  font-family: var(--font-display); font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.45;
  color: var(--steel-700);
}
.mag-body .inline-read a { color: var(--ink); text-decoration-thickness: 3px; }

/* call to action ---------------------------------------------------------- */
.mag-cta { margin: var(--s8) 0 0; }
.mag-cta-inner {
  background-color: var(--steel-800); color: var(--sawdust-100);
  border: 3px solid var(--ink); box-shadow: var(--hard);
  padding: var(--s7);
  background-image:
    linear-gradient(to right, rgba(244, 241, 234, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244, 241, 234, 0.07) 1px, transparent 1px);
  background-size: var(--grid-unit) var(--grid-unit);
}
.mag-cta-stamp { margin-bottom: var(--s5); }
.mag-cta h2 { color: var(--sawdust-100); font-size: var(--t-xl); max-width: 26ch; }
/* same specificity trap as .band-dark p: the stamp keeps its own steel ink */
.mag-cta p:not(.stamp) { color: #D9E1E6; max-width: 66ch; margin-bottom: var(--s6); }

/* author box -------------------------------------------------------------- */
.mag-author {
  margin-top: var(--s8);
  display: grid; grid-template-columns: 220px 1fr; gap: var(--s6);
  align-items: start;
  border: var(--border); background: var(--surface);
  box-shadow: var(--hard-sm); padding: var(--s6);
}
.mag-author-portrait { border: 2px solid var(--ink); background: var(--sawdust-100); padding: 7px; }
.mag-author-portrait img { width: 100%; height: auto; border: 1px solid var(--line); }
.mag-author-text h2 { font-size: var(--t-xl); margin: var(--s4) 0 var(--s3); }
.mag-author-text p { color: var(--ink-soft); }
.mag-author-text p:last-child { margin-bottom: 0; }

/* read also --------------------------------------------------------------- */
.mag-related { margin-top: var(--s9); padding-top: var(--s6); border-top: 3px solid var(--ink); }
.mag-related > h2 { font-size: var(--t-2xl); }
.mag-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.mag-rel {
  background: var(--surface); border: var(--border); box-shadow: var(--hard-sm);
  display: flex; flex-direction: column; padding-bottom: var(--s5);
  transition: transform .14s linear, box-shadow .14s linear;
}
.mag-rel:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--steel-800); }
.mag-rel-shot { display: block; border-bottom: var(--border); }
.mag-rel-shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mag-rel-title { font-size: var(--t-lg); margin: var(--s5) var(--s5) var(--s3); }
.mag-rel-title a { color: var(--ink); text-decoration: none; }
.mag-rel-title a:hover { color: var(--steel-700); text-decoration: underline; text-decoration-color: var(--signal-500); text-decoration-thickness: 3px; }
.mag-rel-dek { font-size: var(--t-sm); color: var(--ink-soft); margin: 0 var(--s5) var(--s4); }
.mag-rel-date {
  margin: auto var(--s5) 0; padding-top: var(--s3); border-top: var(--hairline);
  font-family: var(--font-display); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted);
}

/* home page magazine teaser ------------------------------------------------ */
.mag-teaser-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.mag-teaser-foot { margin-top: var(--s7); display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

/* author page article list -------------------------------------------------- */
.mag-list { list-style: none; margin: var(--s5) 0 0; padding: 0; border: 2px solid var(--ink); background: var(--surface); }
.mag-list li { margin: 0; padding: var(--s4) var(--s5); border-bottom: var(--hairline); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: baseline; justify-content: space-between; }
.mag-list li:last-child { border-bottom: 0; }
.mag-list a { font-family: var(--font-display); font-size: var(--t-base); text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; color: var(--steel-800); max-width: 62ch; }
.mag-list a:hover { color: var(--signal-700); text-decoration: underline; }
.mag-list time { font-family: var(--font-display); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); flex: none; }

/* responsive --------------------------------------------------------------- */
@media (max-width: 1040px) {
  .mag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mag-card.lead { flex-direction: column; }
  .mag-card.lead .mag-card-shot { border-right: 0; border-bottom: 3px solid var(--ink); }
  .mag-card.lead .mag-card-shot img { min-height: 0; aspect-ratio: 3 / 2; }
  .mag-card.lead .mag-card-text { padding: var(--s6); }
  .mag-related-grid, .mag-teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .mag-masthead-facts { grid-template-columns: 1fr; }
  .mag-masthead-facts li { border-right: 0; border-bottom: 2px solid var(--signal-500); }
  .mag-masthead-facts li:last-child { border-bottom: 0; }
  .mag-author { grid-template-columns: 1fr; }
  .mag-author-portrait { max-width: 200px; }
}
@media (max-width: 700px) {
  .mag-grid, .mag-related-grid, .mag-teaser-grid { grid-template-columns: 1fr; }
  .mag-article { padding-block: var(--s6) var(--s8); }
  .mag-head h1 { font-size: var(--t-2xl); }
  .mag-body h2 { margin-top: var(--s7); }
  .mag-read { margin-left: 0; }
  .mag-crumb [aria-current="page"] { max-width: 26ch; }
  .mag-cta-inner { padding: var(--s5); }
  .mag-author { padding: var(--s5); }
  .mag-index-foot { padding: var(--s5); }
}
@media (max-width: 400px) {
  .mag-card-text, .mag-card.lead .mag-card-text { padding: var(--s4); }
  .mag-rel-title, .mag-rel-dek, .mag-rel-date { margin-inline: var(--s4); }
  .mag-body .inline-read { padding: var(--s3) var(--s4); }
  .mag-byline { font-size: 0.7rem; letter-spacing: 0.08em; }
}

/* author page: published articles list */
.mag-published { max-width: 74ch; }
.mag-published h2 { font-size: var(--t-2xl); }
.mag-published > p { color: var(--ink-soft); }



/* 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%; min-width: 0;
  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;
  /* the footer ground is steel 900, so the heading takes the same safety yellow as the
     other footer headings at full strength instead of a faded currentColor */
  color: var(--signal-500); opacity: 1; }
/* Five names on one row: no wrapping, and if the row is wider than the footer at some
   width it scrolls sideways inside its own box rather than stacking. */
.site-network ul { list-style: none; margin: 0;
  display: flex; flex-wrap: nowrap; gap: 0 1.5rem;
  /* a little vertical padding so the focus ring is not clipped by the scroll box */
  padding: 6px 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.site-network li + li { margin-top: 0; }
.site-network li { margin-bottom: 0; }
/* The generic a colour is steel 700, near invisible on the steel 900 footer, because
   these links sit outside .footer-col. Sawdust at full opacity with medium weight, and
   no brand name breaks mid word. */
.site-network a { font-size: 0.86rem; text-decoration: none; opacity: 1;
  color: var(--sawdust-100); font-weight: 500; white-space: nowrap;
  border-bottom: 1px solid transparent; }
.site-network a:hover, .site-network a:focus-visible { color: var(--signal-300); border-bottom-color: currentColor; }
@media (max-width: 620px) { .site-network ul { gap: 0 1.1rem; } }


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


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