/* ==========================================================================
   MicPrep, studio broadcast design system
   Warm paper shell, daylight foam panels, walnut amber ink and lamps.
   Display: Lexend. Body: Roboto Mono. Motifs: waveform rules, on air lamps,
   acoustic panel texture, mono timecode rails.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */
:root{
  /* brief palette */
  --bg:#FBF7F1;
  --surface:#FFFFFF;
  --ink:#1C1710;
  --primary:#96591A;
  --accent:#2E8F8C;
  --muted:#6F6558;

  /* derived paper shades, the room lit from the window */
  --bg-deep:#F1E9DC;
  --bg-lift:#F7F1E6;
  --surface-2:#FFFDF9;
  --surface-3:#FFF8EE;
  --surface-4:#F6EDDD;

  /* derived amber, lamp light down to walnut ink */
  --amber-100:#6E400F;
  --amber-200:#8A5117;
  --amber-600:#B4761200;      /* reserved */
  --amber-dim:#A87524;
  --amber-deep:#5C360B;
  --amber-glow:rgba(150,89,26,.30);
  --amber-wash:rgba(150,89,26,.08);

  /* derived teal */
  --teal-100:#175A58;
  --teal-dim:#23807D;
  --teal-wash:rgba(46,143,140,.10);

  /* text roles */
  --ink-soft:color-mix(in srgb, var(--ink) 78%, var(--bg));
  --ink-quiet:#5A5346;
  --ink-mute:var(--muted);

  /* lines and edges */
  --line:rgba(28,23,16,.12);
  --line-2:rgba(28,23,16,.20);
  --line-warm:rgba(150,89,26,.32);
  --edge-dark:rgba(28,23,16,.16);

  /* spacing scale */
  --s1:.25rem;
  --s2:.5rem;
  --s3:.75rem;
  --s4:1rem;
  --s5:1.5rem;
  --s6:2rem;
  --s7:3rem;
  --s8:4rem;
  --s9:6rem;
  --s10:8rem;

  /* radii */
  --r-xs:3px;
  --r-sm:6px;
  --r-md:10px;
  --r-lg:16px;
  --r-pill:999px;

  /* shadows, soft and neutral on paper */
  --sh-1:0 1px 2px rgba(28,23,16,.05), 0 8px 22px rgba(92,54,11,.07);
  --sh-2:0 2px 4px rgba(28,23,16,.05), 0 20px 48px rgba(92,54,11,.11);
  --sh-lamp:0 6px 18px rgba(150,89,26,.26);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(28,23,16,.06);

  /* type scale */
  --t-xs:.72rem;
  --t-sm:.82rem;
  --t-base:.95rem;
  --t-md:1.06rem;
  --t-lg:clamp(1.2rem,.9rem + .9vw,1.5rem);
  --t-xl:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);
  --t-2xl:clamp(1.9rem,1.3rem + 2.6vw,3rem);
  --t-3xl:clamp(2.3rem,1.4rem + 4vw,4rem);

  /* fonts */
  --font-display:"Lexend","Trebuchet MS","Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  /* rhythm */
  --wrap:74rem;
  --wrap-tight:56rem;
  --hdr:70px;

  /* waveform amplitude, driven by scroll in main.js */
  --amp:1;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr) + 1rem);
}

body{
  margin:0;
  background-color:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--t-base);
  font-weight:400;
  line-height:1.72;
  letter-spacing:.005em;
  overflow-x:hidden;
  position:relative;
}

/* ---------------------------------------------- 2. acoustic panel texture */
/* Studio foam in daylight: a quilted wedge grid where the lit face of each
   wedge is paper white and the shaded face is a whisper of walnut. Fixed, so
   the room stays still while the page scrolls past it. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    repeating-conic-gradient(from 45deg at 50% 50%,
      rgba(255,255,255,.62) 0% 25%, rgba(28,23,16,.030) 0% 50%),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.55) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(-45deg,
      rgba(28,23,16,.055) 0 1px, transparent 1px 15px);
  background-size:30px 30px, auto, auto;
  opacity:.9;
}
/* Warm walnut grain in the paper, vertical and slow. Multiplied, not
   screened, because on a light ground the grain has to darken to show. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(92,54,11,.055) 0 2px, transparent 2px 9px, rgba(92,54,11,.035) 9px 10px, transparent 10px 23px),
    radial-gradient(120% 70% at 50% -10%, rgba(150,89,26,.10), transparent 62%);
  mix-blend-mode:multiply;
  opacity:.6;
}

/* every real block sits above the room texture */
header,main,footer,.skip{position:relative;z-index:1}

/* -------------------------------------------------------- 3. typography */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 var(--s4);
  color:var(--ink);
}
h1{font-size:var(--t-3xl);font-weight:700;letter-spacing:-.035em}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-lg);letter-spacing:-.015em}
h4{font-size:var(--t-md);letter-spacing:-.01em}
p{margin:0 0 var(--s4)}
a{color:var(--amber-200);text-decoration:none;text-underline-offset:.22em}
a:hover{color:var(--amber-100);text-decoration:underline}
strong{font-weight:700;color:var(--ink)}
ul,ol{margin:0 0 var(--s4);padding-left:1.15rem}
li{margin:0 0 var(--s2)}
small{font-size:var(--t-sm)}
hr{border:0;height:1px;background:var(--line);margin:var(--s7) 0}
img{max-width:100%;height:auto;display:block}

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

.lead{
  font-size:var(--t-md);
  color:var(--ink-soft);
  line-height:1.8;
  max-width:60ch;
}
.quiet{color:var(--ink-quiet)}
.mute{color:var(--muted)}
.amber{color:var(--primary)}
.teal{color:var(--accent)}

/* mono timecode numerals, the studio counter */
.tc{
  font-family:var(--font-body);
  font-weight:500;
  font-variant-numeric:tabular-nums;
  letter-spacing:.14em;
  color:var(--primary);
  font-size:var(--t-xs);
}

/* ------------------------------------------------------ 4. layout helpers */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
.wrap-tight{width:100%;max-width:var(--wrap-tight);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.section-head{max-width:58ch;margin-bottom:clamp(2rem,4vw,3rem)}
.grid{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

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

.skip{
  position:absolute;left:var(--s4);top:-4rem;z-index:99;
  background:var(--primary);color:#FFFFFF;font-weight:700;
  padding:.7rem 1.1rem;border-radius:var(--r-sm);
  font-family:var(--font-display);letter-spacing:.02em;
  transition:top .18s ease;
}
.skip:focus{top:var(--s3);text-decoration:none;color:#FFFFFF}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-xs);
  box-shadow:0 0 0 5px rgba(46,143,140,.26);
}

/* --------------------------------------------------- 5. waveform hardware */
/* A strip of bars whose height responds to --amp, which main.js drives from
   scroll position. This is the site's signature rule. */
.wave{
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:42px;
  width:100%;
  overflow:hidden;
  --amp:1;
}
.wave i{
  display:block;
  flex:1 1 auto;
  min-width:2px;
  max-width:5px;
  border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,var(--primary),var(--amber-deep));
  height:calc(var(--h,30%) * var(--amp));
  transition:height .32s cubic-bezier(.2,.7,.3,1);
  opacity:.85;
}
.wave i:nth-child(12n+1){--h:22%}
.wave i:nth-child(12n+2){--h:58%}
.wave i:nth-child(12n+3){--h:34%}
.wave i:nth-child(12n+4){--h:82%}
.wave i:nth-child(12n+5){--h:46%}
.wave i:nth-child(12n+6){--h:96%}
.wave i:nth-child(12n+7){--h:38%}
.wave i:nth-child(12n+8){--h:70%}
.wave i:nth-child(12n+9){--h:26%}
.wave i:nth-child(12n+10){--h:60%}
.wave i:nth-child(12n+11){--h:44%}
.wave i:nth-child(12n+12){--h:18%}
.wave--teal i{background:linear-gradient(180deg,var(--accent),var(--teal-dim))}
.wave--thin{height:22px;gap:4px}
.wave--tall{height:74px}
.wave--fade{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}

/* a quieter waveform used as a horizontal divider */
.rule-wave{
  height:14px;
  width:100%;
  background-image:
    repeating-linear-gradient(90deg,
      var(--line-warm) 0 2px, transparent 2px 7px);
  -webkit-mask-image:repeating-linear-gradient(90deg,
      #000 0 2px, transparent 2px 7px),
    linear-gradient(180deg,transparent 0 2px,#000 2px 12px,transparent 12px);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  opacity:.8;
}

/* --------------------------------------------------------- 6. on air lamp */
.lamp{
  display:inline-block;
  width:.55rem;height:.55rem;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 3px var(--amber-glow);
  animation:lampPulse 2.8s ease-in-out infinite;
  flex:0 0 auto;
}
/* On paper a halo has nothing to glow into, so the lamp pulses as a ring of
   saturated colour instead of a blur. */
@keyframes lampPulse{
  0%,100%{opacity:.62;box-shadow:0 0 0 2px rgba(150,89,26,.16)}
  50%{opacity:1;box-shadow:0 0 0 5px rgba(150,89,26,.34)}
}
.lamp--teal{background:var(--accent);box-shadow:0 0 0 3px rgba(46,143,140,.30);animation-name:lampPulseTeal}
@keyframes lampPulseTeal{
  0%,100%{opacity:.62;box-shadow:0 0 0 2px rgba(46,143,140,.16)}
  50%{opacity:1;box-shadow:0 0 0 5px rgba(46,143,140,.34)}
}

.onair{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--line-warm);
  border-radius:var(--r-pill);
  padding:.28rem .7rem;
  background:linear-gradient(180deg,rgba(150,89,26,.13),rgba(150,89,26,.05));
  font-family:var(--font-body);
  font-size:var(--t-xs);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--amber-100);
  white-space:nowrap;
}

.eyebrow{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  font-family:var(--font-body);
  font-size:var(--t-xs);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 var(--s4);
}
.eyebrow .tc{letter-spacing:.24em}
.eyebrow::after{
  content:"";height:1px;flex:1 1 3rem;min-width:2rem;
  background:linear-gradient(90deg,var(--line-warm),transparent);
}

/* -------------------------------------------------------------- 7. header */
.site-header{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,rgba(251,247,241,.95),rgba(251,247,241,.78));
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease,background .25s ease,border-color .25s ease;
}
.site-header.is-stuck{
  background:rgba(251,247,241,.98);
  border-bottom-color:var(--line-warm);
  box-shadow:0 10px 30px rgba(92,54,11,.10);
}
.site-header::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:repeating-linear-gradient(90deg,var(--primary) 0 3px,transparent 3px 10px);
  opacity:.5;
}
.bar{
  display:flex;align-items:center;gap:var(--s5);
  min-height:var(--hdr);
}
.brand{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.12rem;
  letter-spacing:-.02em;
  color:var(--ink);
  margin-right:auto;
}
.brand:hover{color:var(--ink);text-decoration:none}
.brand svg{width:30px;height:30px;flex:0 0 auto;filter:drop-shadow(0 2px 4px rgba(92,54,11,.20))}
.brand b{font-weight:700}
.brand span{color:var(--primary)}

.nav{display:flex;align-items:center;gap:var(--s5)}
.nav a{
  font-family:var(--font-body);
  font-size:var(--t-sm);
  color:var(--ink-quiet);
  letter-spacing:.03em;
  padding:.4rem 0;
  position:relative;
}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:repeating-linear-gradient(90deg,var(--primary) 0 2px,transparent 2px 6px);
  transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
/* the header call to action is a button before it is a nav link, so it keeps
   the button's own ink on the amber rather than the nav link colour */
.nav a.btn-primary,.nav a.btn-primary:hover{color:#FFFFFF}

.nav-toggle{
  display:none;
  background:transparent;border:1px solid var(--line-2);
  color:var(--ink);border-radius:var(--r-sm);
  padding:.5rem .6rem;cursor:pointer;
}
.nav-toggle svg{width:20px;height:20px;display:block}

/* -------------------------------------------------------------- 8. buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--t-sm);
  letter-spacing:.01em;
  padding:.78rem 1.35rem;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  cursor:pointer;
  text-align:center;
  transition:transform .16s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn svg{width:16px;height:16px}

.btn-primary{
  background:linear-gradient(180deg,var(--primary),var(--amber-100));
  color:#FFFFFF;
  box-shadow:var(--sh-lamp),inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-primary:hover{
  background:linear-gradient(180deg,var(--amber-200),var(--amber-100));
  color:#FFFFFF;
  box-shadow:0 10px 26px rgba(150,89,26,.34),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-ghost{
  background:var(--surface);
  border-color:var(--line-2);
  color:var(--ink);
}
.btn-ghost:hover{border-color:var(--line-warm);background:rgba(150,89,26,.07);color:var(--ink)}
.btn-teal{
  background:var(--surface);border-color:rgba(46,143,140,.5);color:var(--teal-100);
}
.btn-teal:hover{background:var(--teal-wash);color:var(--teal-100);border-color:var(--accent)}
.btn-block{width:100%}
.btn-lg{padding:.95rem 1.7rem;font-size:var(--t-base)}

/* --------------------------------------------------------------- 9. panels */
.panel{
  position:relative;
  background:
    linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s5);
  box-shadow:var(--sh-1);
  overflow:hidden;
}
/* every panel carries a foam quilt in the corner and an amber hairline */
.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-conic-gradient(from 45deg at 50% 50%,
    rgba(255,255,255,.7) 0% 25%, rgba(28,23,16,.042) 0% 50%);
  background-size:22px 22px;
  opacity:.7;
  -webkit-mask-image:radial-gradient(120% 100% at 100% 0%,#000,transparent 70%);
  mask-image:radial-gradient(120% 100% at 100% 0%,#000,transparent 70%);
}
.panel::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:repeating-linear-gradient(90deg,var(--primary) 0 3px,transparent 3px 9px);
  opacity:.55;
}
.panel > *{position:relative}
.panel--teal::after{background:repeating-linear-gradient(90deg,var(--accent) 0 3px,transparent 3px 9px)}
.panel--flat{background:var(--surface);box-shadow:none}

/* ---------------------------------------------------------------- 10. hero */
.hero{
  padding-top:clamp(2.5rem,6vw,4.5rem);
  padding-bottom:clamp(3rem,6vw,5rem);
  position:relative;
}
.hero::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1100px,100%);height:520px;
  background:radial-gradient(60% 60% at 50% 0%,rgba(150,89,26,.11),transparent 70%);
  pointer-events:none;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,4vw,3.5rem);
  align-items:center;
}
/* The cold open headline stepped down about a quarter from the global h1
   size, so it stops towering over the photograph frame beside it. Scoped
   to the hero because every other page h1 keeps the --t-3xl step, and the
   16ch measure is kept so the line breaks land where they did before. */
.hero h1{
  font-size:clamp(1.8rem,1.1rem + 3.1vw,3.05rem);
  margin-bottom:var(--s5);
  max-width:16ch;
}
.hero h1 em{
  font-style:normal;
  color:var(--primary);
  position:relative;
  white-space:nowrap;
}
.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:-.12em;height:6px;
  background:repeating-linear-gradient(90deg,var(--primary) 0 3px,transparent 3px 8px);
  opacity:.55;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s6) 0 var(--s6)}

.trust{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.trust div{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  padding:.85rem 1rem;
  font-size:var(--t-xs);
  line-height:1.5;
  color:var(--ink-quiet);
  display:flex;gap:.5rem;align-items:flex-start;
}
.trust b{display:block;color:var(--ink);font-family:var(--font-display);font-size:var(--t-sm);font-weight:600}
.trust svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto;margin-top:.2rem}

/* hero photograph in a studio frame with an on air lamp */
.shot{
  position:relative;
  border-radius:var(--r-lg);
  /* No overflow clipping here. The prep sheet card is deliberately offset past
     the top right of the frame, and clipping the frame cut the top of its
     heading off at every width. The photograph and its light wash are rounded
     on themselves instead, so the frame still reads as one soft cornered
     block. --r-shot-in is the radius at the padding box, inside the 1px edge. */
  --r-shot-in:calc(var(--r-lg) - 1px);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-2);
  background:var(--surface);
}
.shot img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-shot-in);
  filter:saturate(1.02) contrast(1.03);
}
.shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:var(--r-shot-in);
  background:
    linear-gradient(180deg,rgba(251,247,241,.04),rgba(251,247,241,.18)),
    radial-gradient(70% 50% at 15% 12%,rgba(150,89,26,.16),transparent 60%);
}
.shot-tag{
  position:absolute;z-index:2;left:1rem;bottom:1rem;right:1rem;
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  font-size:var(--t-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--amber-100);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(251,247,241,.96));
  border:1px solid rgba(150,89,26,.24);
  border-radius:var(--r-sm);
  padding:.45rem .6rem;
  box-shadow:0 6px 18px rgba(92,54,11,.16);
}
.shot-tag .bar-mini{
  flex:1 1 4rem;height:12px;min-width:3rem;
  background:repeating-linear-gradient(90deg,rgba(150,89,26,.75) 0 2px,transparent 2px 6px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent);
  mask-image:linear-gradient(90deg,#000,transparent);
}

/* the floating prep sheet card over the hero photo */
.sheet{
  position:absolute;z-index:3;right:-.75rem;top:-1.25rem;
  width:min(255px,62%);
  background:linear-gradient(180deg,var(--surface-3),var(--surface));
  border:1px solid var(--line-warm);
  border-radius:var(--r-md);
  padding:.9rem 1rem;
  box-shadow:var(--sh-2);
  font-size:var(--t-xs);
  line-height:1.55;
}
.sheet h4{font-size:var(--t-sm);margin:0 0 .5rem}
.sheet ul{list-style:none;margin:0;padding:0}
.sheet li{display:flex;gap:.5rem;align-items:flex-start;margin:0 0 .35rem;color:var(--ink-quiet)}
.sheet li svg{width:13px;height:13px;color:var(--accent);flex:0 0 auto;margin-top:.28rem}
.sheet .tc{display:block;margin-bottom:.35rem}

/* ------------------------------------------------------------ 11. problems */
.pain-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.pain{
  background:linear-gradient(180deg,var(--surface),var(--bg-lift));
  border:1px solid var(--line);
  border-left:2px solid var(--amber-dim);
  border-radius:var(--r-sm);
  padding:var(--s5);
}
.pain h3{font-size:var(--t-md);margin-bottom:.6rem}
.pain p{font-size:var(--t-sm);color:var(--ink-quiet);margin-bottom:.9rem}
.cost{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--t-xs);
  letter-spacing:.06em;
  color:var(--primary);
  border-top:1px dashed var(--line-warm);
  padding-top:.6rem;
  width:100%;
}
.cost svg{width:14px;height:14px}

/* --------------------------------------------------------------- 12. steps */
.how-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps li{
  position:relative;
  padding:0 0 var(--s6) 3.4rem;
  counter-increment:step;
}
.steps li::before{
  content:"0" counter(step);
  position:absolute;left:0;top:-.1rem;
  width:2.4rem;height:2.4rem;
  display:grid;place-items:center;
  font-family:var(--font-body);
  font-size:var(--t-xs);
  font-weight:700;
  letter-spacing:.05em;
  color:var(--primary);
  border:1px solid var(--line-warm);
  border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(150,89,26,.14),transparent 70%),var(--surface);
  box-shadow:0 2px 6px rgba(92,54,11,.12);
}
.steps li::after{
  content:"";position:absolute;left:1.19rem;top:2.5rem;bottom:.4rem;width:1px;
  background:repeating-linear-gradient(180deg,var(--line-warm) 0 4px,transparent 4px 10px);
}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h3{font-size:var(--t-md);margin-bottom:.45rem}
.steps p{font-size:var(--t-sm);color:var(--ink-quiet);margin:0}

/* ------------------------------------------------------------ 13. features */
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.feat{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s5);
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
  position:relative;
  overflow:hidden;
}
.feat::before{
  content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;
  background-image:repeating-conic-gradient(from 45deg at 50% 50%,
    rgba(150,89,26,.10) 0% 25%, transparent 0% 50%);
  background-size:16px 16px;
  opacity:.6;
  pointer-events:none;
}
.feat:hover{border-color:var(--line-warm);transform:translateY(-3px);box-shadow:var(--sh-2)}
.feat-ico{
  width:42px;height:42px;border-radius:var(--r-sm);
  display:grid;place-items:center;
  margin-bottom:var(--s4);
  background:linear-gradient(180deg,rgba(150,89,26,.14),rgba(150,89,26,.05));
  border:1px solid var(--line-warm);
  color:var(--primary);
}
.feat-ico svg{width:21px;height:21px}
.feat h3{font-size:var(--t-md);margin-bottom:.5rem}
.feat p{font-size:var(--t-sm);color:var(--ink-quiet);margin:0}

/* ------------------------------------------------------------ 14. outcomes */
.out-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.out{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  padding:var(--s5);
  position:relative;
  overflow:hidden;
}
.out .num{
  font-family:var(--font-display);
  font-size:clamp(2rem,1.3rem + 2.2vw,2.9rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--primary);
  display:block;
  margin-bottom:.5rem;
}
.out h3{font-size:var(--t-sm);text-transform:uppercase;letter-spacing:.12em;color:var(--ink);font-family:var(--font-body);font-weight:500;margin-bottom:.6rem}
.out p{font-size:var(--t-sm);color:var(--ink-quiet);margin:0}
.out .wave{height:26px;margin-top:var(--s4);opacity:.55}

/* --------------------------------------------------------------- 15. proof */
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.testimonial{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s5);
  margin:0;
  position:relative;
  display:flex;flex-direction:column;
  box-shadow:var(--sh-1);
}
.testimonial::before{
  content:"";position:absolute;left:var(--s5);top:0;width:44px;height:3px;
  background:var(--primary);border-radius:0 0 3px 3px;
}
.testimonial p{font-size:var(--t-sm);line-height:1.8;color:var(--ink);margin:var(--s3) 0 var(--s5)}
.testimonial footer{
  margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--line);
  font-size:var(--t-xs);color:var(--muted);line-height:1.6;
}
.testimonial footer b{display:block;font-family:var(--font-display);font-size:var(--t-sm);color:var(--ink);font-weight:600}
.testimonial .mini-wave{
  height:16px;
  background:repeating-linear-gradient(90deg,var(--line-warm) 0 2px,transparent 2px 6px);
  -webkit-mask-image:linear-gradient(90deg,#000 0 55%,transparent);
  mask-image:linear-gradient(90deg,#000 0 55%,transparent);
}

.results{
  margin-top:var(--s6);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.results div{background:var(--bg-lift);padding:var(--s5);text-align:center}
.results b{
  display:block;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.5rem,1rem + 1.6vw,2.1rem);color:var(--teal-100);letter-spacing:-.03em;
}
.results span{display:block;font-size:var(--t-xs);color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:.4rem}

/* ------------------------------------------------------------- 16. pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);align-items:start}
.tier{
  background:linear-gradient(180deg,var(--surface),var(--bg-lift));
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s6) var(--s5);
  position:relative;
  display:flex;flex-direction:column;
  height:100%;
}
.tier h3{font-family:var(--font-body);font-size:var(--t-sm);letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--muted);margin-bottom:var(--s4)}
.tier .amt{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(2.2rem,1.6rem + 2vw,3rem);color:var(--ink);line-height:1;
}
.tier .per{font-size:var(--t-xs);color:var(--muted);letter-spacing:.08em;display:block;margin-top:.5rem}
.tier .who{font-size:var(--t-sm);color:var(--ink-quiet);margin:var(--s4) 0 var(--s5);min-height:3.4em}
.tier ul{list-style:none;margin:0 0 var(--s6);padding:0;font-size:var(--t-sm)}
.tier li{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.7rem;color:var(--ink-quiet)}
.tier li svg{width:15px;height:15px;color:var(--accent);flex:0 0 auto;margin-top:.32rem}
.tier .btn{margin-top:auto}
.tier--pick{
  border-color:var(--line-warm);
  background:linear-gradient(180deg,var(--surface-3),var(--surface));
  box-shadow:0 0 0 1px rgba(150,89,26,.22),0 20px 48px rgba(92,54,11,.14);
}
.tier--pick::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);
}
.pick-flag{
  position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--primary);color:#FFFFFF;
  font-family:var(--font-display);font-weight:700;
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .8rem;border-radius:var(--r-pill);
  box-shadow:0 4px 12px rgba(150,89,26,.3);
  white-space:nowrap;
}
.billing-note{
  margin-top:var(--s6);
  text-align:center;font-size:var(--t-sm);color:var(--ink-quiet);
  border-top:1px solid var(--line);padding-top:var(--s5);
}

/* ----------------------------------------------------------------- 17. faq */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;align-items:center;gap:var(--s4);
  background:transparent;border:0;cursor:pointer;
  padding:1.25rem 0;
  text-align:left;
  font-family:var(--font-display);
  font-weight:600;
  font-size:var(--t-md);
  color:var(--ink);
  letter-spacing:-.01em;
  transition:color .18s ease;
}
.faq-q:hover{color:var(--primary)}
.faq-q .tc{flex:0 0 auto}
.faq-q .q-txt{flex:1 1 auto}
.faq-ico{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-warm);display:grid;place-items:center;color:var(--primary);
  transition:transform .28s ease,background .22s ease;
}
.faq-ico svg{width:12px;height:12px}
.faq-q[aria-expanded="true"] .faq-ico{transform:rotate(45deg);background:rgba(150,89,26,.12)}
.faq-a{
  overflow:hidden;
  max-height:0;
  visibility:hidden;
  transition:max-height .34s ease,visibility 0s linear .34s;
}
.faq-a .faq-inner{padding:0 0 1.4rem 3.1rem;max-width:74ch;font-size:var(--t-sm);color:var(--ink-quiet);line-height:1.85}
.faq-a.is-open{max-height:44rem;visibility:visible;transition:max-height .34s ease,visibility 0s linear 0s}

/* ---------------------------------------------------------------- 18. form */
.contact-shell{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
.form-card{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:var(--sh-2);
  position:relative;
  overflow:hidden;
}
.form-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:repeating-linear-gradient(90deg,var(--primary) 0 4px,transparent 4px 11px);
  opacity:.55;
}
.field{margin-bottom:var(--s4)}
.field label{
  display:block;font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.45rem;
}
.field .req{color:var(--primary)}
input[type=text],input[type=email],select,textarea{
  width:100%;
  background:var(--bg-deep);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--t-sm);
  padding:.72rem .85rem;
  transition:border-color .18s ease,box-shadow .18s ease;
}
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--primary) 50%),linear-gradient(135deg,var(--primary) 50%,transparent 50%);
  background-position:calc(100% - 18px) 1.15rem,calc(100% - 13px) 1.15rem;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:2.4rem;
}
textarea{min-height:8.5rem;resize:vertical;line-height:1.7}
input:hover,select:hover,textarea:hover{border-color:var(--line-warm)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(150,89,26,.2)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#B3341C;box-shadow:0 0 0 3px rgba(179,52,28,.16)}
.err{display:none;font-size:var(--t-xs);color:#A2311A;margin-top:.35rem;letter-spacing:.02em}
.err.is-shown{display:block}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.consent{display:flex;gap:.7rem;align-items:flex-start;margin:var(--s5) 0}
.consent input{width:1.05rem;height:1.05rem;margin-top:.35rem;accent-color:var(--primary);flex:0 0 auto}
.consent label{font-size:var(--t-xs);letter-spacing:0;text-transform:none;color:var(--ink-quiet);line-height:1.7;margin:0}
.form-foot{margin-top:var(--s5);font-size:var(--t-xs);color:var(--muted);line-height:1.8}

.contact-aside .panel{margin-bottom:var(--s4)}
.contact-aside h3{font-size:var(--t-md)}
.contact-aside ul{list-style:none;padding:0;margin:0;font-size:var(--t-sm)}
.contact-aside li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-quiet);margin-bottom:.7rem}
.contact-aside li svg{width:15px;height:15px;color:var(--primary);flex:0 0 auto;margin-top:.3rem}

/* -------------------------------------------------------------- 19. byline */
.byline{
  display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  border-radius:var(--r-sm);
  background:var(--surface);
  padding:var(--s5);
  font-size:var(--t-sm);
  color:var(--ink-quiet);
  margin-top:var(--s7);
}
.byline b{font-family:var(--font-display);color:var(--ink)}

/* -------------------------------------------------------------- 20. footer */
/* The single dark band on a daylight page: the booth with the room lights off,
   so the page closes on contrast instead of fading out. Every colour token is
   re-declared inside it, which lets the light rules above run unchanged. */
.site-footer{
  --ink:#F6F0E5;
  --ink-quiet:#D8CEBD;
  --muted:#B5AA98;
  --primary:#E2A54B;
  --accent:#6FC7C4;
  --amber-100:#F3D7A4;
  --amber-200:#EBBE72;
  --amber-dim:#C08F45;
  --amber-deep:#8A5717;
  --line:rgba(246,240,229,.13);
  --line-2:rgba(246,240,229,.22);
  --line-warm:rgba(226,165,75,.34);
  border-top:1px solid rgba(28,23,16,.16);
  background:linear-gradient(180deg,#241C12,#191309);
  color:var(--ink);
  padding-top:clamp(2.5rem,5vw,4rem);
  margin-top:clamp(3rem,6vw,5rem);
}
.foot-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:var(--s6);
  padding-bottom:var(--s7);
}
.foot-grid h4{
  font-family:var(--font-body);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--primary);margin-bottom:var(--s4);
}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:.6rem}
.foot-grid a{color:var(--ink-quiet);font-size:var(--t-sm)}
.foot-grid a:hover{color:var(--primary)}
.foot-note{font-size:var(--t-sm);color:var(--muted);max-width:34ch;margin:var(--s4) 0 var(--s5)}
.socials{display:flex;gap:.5rem;flex-wrap:wrap}
.socials a{
  width:36px;height:36px;border-radius:var(--r-sm);
  display:grid;place-items:center;
  border:1px solid var(--line-2);color:var(--ink-quiet);
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.socials a:hover{color:var(--primary);border-color:var(--line-warm);background:rgba(226,165,75,.12)}
.socials svg{width:16px;height:16px}
.publisher{font-size:var(--t-xs);color:var(--muted);margin-top:var(--s4)}
.base-bar{
  border-top:1px solid var(--line);
  padding:var(--s5) 0;
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  font-size:var(--t-xs);color:var(--muted);letter-spacing:.04em;
}
.base-bar a{color:var(--muted)}
.base-bar a:hover{color:var(--primary)}

/* --------------------------------------------------------- 21. inner pages */
.page-head{
  padding-top:clamp(2.5rem,5vw,4rem);
  padding-bottom:clamp(1.5rem,3vw,2.5rem);
  border-bottom:1px solid var(--line);
  position:relative;
}
.page-head::after{
  content:"";position:absolute;left:0;bottom:-1px;width:130px;height:2px;
  background:repeating-linear-gradient(90deg,var(--primary) 0 3px,transparent 3px 9px);
}
.prose{max-width:72ch}
.prose h2{font-size:var(--t-xl);margin-top:var(--s7)}
.prose h3{font-size:var(--t-md);margin-top:var(--s6)}
.prose p,.prose li{color:var(--ink-soft);font-size:var(--t-sm);line-height:1.9}
.prose ul{padding-left:1.1rem}
.dl{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:.6rem var(--s5);font-size:var(--t-sm);margin:0 0 var(--s6)}
.dl dt{color:var(--muted);letter-spacing:.06em}
.dl dd{margin:0;color:var(--ink)}
.map-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.map-card ul{list-style:none;padding:0;margin:0}
.map-card li{border-bottom:1px dashed var(--line);padding:.7rem 0}
.map-card li:last-child{border-bottom:0}
.map-card a{font-family:var(--font-display);font-weight:600;font-size:var(--t-sm)}
.map-card span{display:block;font-size:var(--t-xs);color:var(--muted);line-height:1.6;margin-top:.2rem}
.center-stage{
  min-height:52vh;display:grid;place-items:center;text-align:center;
  padding-block:clamp(3rem,7vw,6rem);
}
.center-stage .wave{max-width:420px;margin:0 auto var(--s6)}
.code-404{
  font-family:var(--font-display);font-weight:700;letter-spacing:-.05em;
  font-size:clamp(4rem,10vw,8rem);line-height:.9;color:var(--primary);
  margin:0 0 var(--s4);
}
.author-grid{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.portrait{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);
  box-shadow:var(--sh-2);background:var(--surface);
}
.portrait img{width:100%;height:auto;display:block}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:var(--s4) 0 var(--s5)}
.chip{
  font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:.28rem .7rem;color:var(--ink-quiet);
}

/* ---------------------------------------------------------- 22. reveal fx */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}
.reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.21s}

/* -------------------------------------------------------- 23. responsive */
@media (max-width:1080px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .pain-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .out-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero-grid,.how-grid,.contact-shell,.author-grid{grid-template-columns:minmax(0,1fr)}
  .hero h1{max-width:22ch}
  .sheet{position:static;width:auto;margin-bottom:var(--s4)}
  /* Stacked, the prep sheet sits in the flow at the top of the frame and
     nothing hangs outside it, so the frame can clip its corners again and
     keep the soft cornered edge it has always had at this width. */
  .shot{overflow:hidden}
  .feat-grid,.quotes,.price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tier--pick{order:-1}
  .map-grid{grid-template-columns:minmax(0,1fr)}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(251,247,241,.99);
    border-bottom:1px solid var(--line-warm);
    padding:var(--s3) clamp(1rem,4vw,2.5rem) var(--s5);
    display:none;
    box-shadow:0 20px 40px rgba(92,54,11,.16);
  }
  .nav.is-open{display:flex}
  .nav a{padding:.85rem 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:var(--s4)}
  .nav-toggle{display:inline-flex;margin-left:auto}
  .brand{margin-right:0}
  .dl{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .dl dd{margin-bottom:.9rem}
}
@media (max-width:640px){
  /* the display line keeps its amber underscore, but a phone is too narrow to
     hold the emphasised phrase on one line without pushing the page sideways */
  .hero h1 em{white-space:normal}
  .pain-grid,.out-grid,.feat-grid,.quotes,.price-grid,.trust,.results,.field-row{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .trust div{border-bottom:1px solid var(--line)}
  .base-bar{flex-direction:column;gap:.5rem}
  .faq-a .faq-inner{padding-left:0}
  .faq-q{gap:.7rem;font-size:var(--t-base)}
}
@media (max-width:380px){
  :root{--t-base:.9rem}
  .btn{width:100%}
  .hero-cta .btn{width:100%}
}

/* ---------------------------------------------------- 24. reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
  .lamp{animation:none;opacity:1}
  .wave i{transition:none}
}

/* ------------------------------------------------------------- 25. print */
@media print{
  body::before,body::after,.site-header,.site-footer,.wave,.rule-wave{display:none}
  body{background:#fff;color:#000}
  .panel,.feat,.tier,.testimonial{border:1px solid #999;background:#fff;color:#000;box-shadow:none}
}

/* ==========================================================================
   26. THE GREEN ROOM, the magazine
   Same paper room, same amber lamps. The magazine reads like a printed
   run sheet: timecode eyebrows, waveform rules, one measure of body text.
   Built only from the tokens declared at the top of this file.
   ========================================================================== */

/* ----------------------------------------------------------- 26.1 measure */
:root{
  --measure:68ch;          /* 64 to 75 characters of Roboto Mono */
  --mag-col:46rem;         /* the article column, header and body aligned */
}

/* ------------------------------------------------------- 26.2 breadcrumbs */
.crumbs{padding-top:calc(var(--hdr) + var(--s5));padding-bottom:0}
.crumbs ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.crumbs li{margin:0;display:flex;align-items:center;gap:.45rem}
.crumbs li + li::before{
  content:"";width:14px;height:1px;background:var(--line-warm);display:block;flex:0 0 auto;
}
.crumbs a{color:var(--ink-quiet)}
.crumbs a:hover{color:var(--primary)}
.crumbs span[aria-current]{
  color:var(--muted);
  display:block;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------------------------------------------------- 26.3 article header */
.art{padding-block:clamp(2rem,4vw,3rem) clamp(3.5rem,7vw,6rem)}
.art-head{max-width:var(--mag-col);margin:0 auto var(--s6)}
.art-head h1{
  font-size:clamp(2rem,1.2rem + 3.4vw,3.2rem);
  margin:var(--s4) 0 var(--s5);
  text-wrap:balance;
}
.standfirst{
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(1.02rem,.94rem + .5vw,1.28rem);
  line-height:1.62;
  color:var(--ink-soft);
  max-width:56ch;
  margin:0 0 var(--s6);
}
.art-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);
  padding:var(--s4) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:var(--t-xs);
  color:var(--muted);
}
.art-meta-lines{
  margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem var(--s4);
  letter-spacing:.04em;
}
.art-by{color:var(--ink-quiet)}
.art-by a{font-family:var(--font-display);font-weight:600;color:var(--ink)}
.art-by a:hover{color:var(--primary)}
.art-dates{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem}
.art-dates time{color:var(--ink-quiet)}
.dot{
  width:4px;height:4px;border-radius:50%;background:var(--amber-dim);
  display:inline-block;flex:0 0 auto;
}
.art-head .wave{margin-top:var(--s5);opacity:.6}

/* --------------------------------------------------- 26.4 featured figure */
.art-figure{
  margin:0 auto var(--s7);
  max-width:var(--wrap);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--sh-2);
  position:relative;
}
.art-figure::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:repeating-linear-gradient(90deg,var(--primary) 0 3px,transparent 3px 9px);
  opacity:.75;
}
.art-figure img{width:100%;height:auto;filter:saturate(1.02) contrast(1.03)}
.art-figure figcaption{
  padding:var(--s3) var(--s5) calc(var(--s4) + 3px);
  font-size:var(--t-xs);
  color:var(--muted);
  line-height:1.7;
  background:var(--bg-lift);
  border-top:1px solid var(--line);
}

/* ------------------------------------------------- 26.5 body typography */
.art-body{max-width:var(--measure);margin:0 auto}
.art-body > *{max-width:var(--measure)}
.art-body p{
  font-size:var(--t-md);
  line-height:1.78;
  color:var(--ink-soft);
  margin:0 0 var(--s5);
}
.art-body h2{
  font-size:clamp(1.45rem,1.1rem + 1.3vw,2rem);
  margin:var(--s8) 0 var(--s4);
  padding-top:var(--s5);
  position:relative;
  text-wrap:balance;
}
.art-body h2::before{
  content:"";position:absolute;left:0;top:0;width:74px;height:2px;
  background:repeating-linear-gradient(90deg,var(--primary) 0 3px,transparent 3px 9px);
}
.art-body h3{
  font-size:var(--t-lg);
  margin:var(--s7) 0 var(--s3);
  color:var(--ink);
}
.art-body ul,.art-body ol{margin:0 0 var(--s5);padding-left:1.35rem}
.art-body li{
  font-size:var(--t-md);
  line-height:1.72;
  color:var(--ink-soft);
  margin:0 0 var(--s3);
}
.art-body li::marker{color:var(--primary)}
.art-body a{color:var(--amber-200);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em}
.art-body a:hover{color:var(--amber-100)}
.art-body strong{color:var(--ink)}
.art-body blockquote{
  margin:var(--s6) 0;
  padding:var(--s5) var(--s5) var(--s5) var(--s6);
  background:var(--surface);
  border:1px solid var(--line);
  border-left:2px solid var(--primary);
  border-radius:0 var(--r-md) var(--r-md) 0;
  box-shadow:var(--sh-1);
}
.art-body blockquote p{
  font-family:var(--font-display);
  font-weight:300;
  font-size:var(--t-md);
  line-height:1.66;
  color:var(--ink);
  margin:0;
}
.art-body blockquote p + p{margin-top:var(--s3)}
.art-body table{
  width:100%;
  border-collapse:collapse;
  margin:var(--s6) 0;
  font-size:var(--t-sm);
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  overflow:hidden;
}
.art-body caption{
  caption-side:top;text-align:left;
  font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding-bottom:var(--s3);
}
.art-body th,.art-body td{
  padding:.7rem .9rem;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  line-height:1.6;
}
.art-body thead th{
  background:var(--surface-4);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:500;
  font-size:var(--t-xs);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.art-body tbody tr:last-child td{border-bottom:0}
.art-body tbody tr:nth-child(even){background:rgba(28,23,16,.028)}
.art-body td{color:var(--ink-soft)}

/* the contextual pointer the assembler drops between sections */
.inline-read{
  margin:var(--s6) 0;
  padding:.9rem 1.1rem .9rem 2.6rem;
  background:var(--bg-lift);
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--t-sm);
  line-height:1.7;
  color:var(--muted);
  position:relative;
}
.inline-read::before{
  content:"";position:absolute;left:1.05rem;top:1.35rem;
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(46,143,140,.18);
}
.art-body .inline-read a{color:var(--ink);text-decoration:none;font-family:var(--font-display);font-weight:600}
.art-body .inline-read a:hover{color:var(--primary);text-decoration:underline}

/* --------------------------------------------------- 26.6 call to action */
.art-cta{
  max-width:var(--mag-col);
  margin:var(--s8) auto 0;
  padding:clamp(1.6rem,4vw,2.4rem);
  background:
    radial-gradient(120% 130% at 100% 0%, var(--amber-wash), transparent 62%),
    var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  position:relative;
  overflow:hidden;
}
.art-cta::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--primary),var(--amber-dim) 55%,transparent);
}
.art-cta .onair{position:absolute;top:var(--s5);right:var(--s5)}
.art-cta h2{font-size:var(--t-xl);margin:var(--s3) 0 var(--s4);max-width:22ch}
.art-cta p{color:var(--ink-quiet);font-size:var(--t-sm);line-height:1.8;max-width:58ch}
.art-cta-act{margin:var(--s5) 0 0}
.art-cta-act .btn{max-width:100%}

/* ------------------------------------------------------- 26.7 author box */
.author-box{
  max-width:var(--mag-col);
  margin:var(--s6) auto 0;
  padding:clamp(1.3rem,3vw,1.9rem);
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  gap:var(--s5);
  align-items:start;
  background:var(--bg-lift);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.author-box img{
  width:140px;height:140px;object-fit:cover;
  border-radius:var(--r-md);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-1);
}
.author-box h2{font-size:var(--t-lg);margin:.2rem 0 var(--s3)}
.author-box p{font-size:var(--t-sm);line-height:1.8;color:var(--ink-quiet);margin:0 0 var(--s3)}
.author-box p:last-child{margin:0}
.author-box .eyebrow{margin-bottom:.4rem}

/* --------------------------------------------------------- 26.8 read also */
.also{padding-block:clamp(2.5rem,5vw,4rem) 0;max-width:var(--wrap)}
.also-head{max-width:var(--mag-col);margin:0 auto var(--s5)}
.also-head h2{font-size:var(--t-xl);margin:var(--s3) 0 0}
.also-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.also-card{
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.also-card:hover{border-color:var(--line-warm);transform:translateY(-3px);box-shadow:var(--sh-2)}
.also-card-media{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--bg-deep)}
.also-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.also-card:hover .also-card-media img{transform:scale(1.04)}
.also-card-body{padding:var(--s4);display:flex;flex-direction:column;gap:.55rem;flex:1 1 auto}
.also-card-title{font-size:var(--t-md);line-height:1.28;margin:0}
.also-card-title a{color:var(--ink)}
.also-card-title a:hover{color:var(--primary);text-decoration:none}
.also-card-dek{
  font-size:var(--t-xs);line-height:1.72;color:var(--ink-quiet);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.also-card-meta{margin:auto 0 0;font-size:var(--t-xs);color:var(--muted);letter-spacing:.06em;padding-top:.4rem}
.also-all{max-width:var(--mag-col);margin:var(--s5) auto 0}

/* ------------------------------------------------------ 26.9 the masthead */
.mag-masthead{padding-top:calc(var(--s5));padding-bottom:clamp(2rem,4vw,3rem)}
.mag-masthead h1{
  font-size:clamp(2.3rem,1.4rem + 4vw,4rem);
  margin:var(--s4) 0 var(--s5);
  max-width:14ch;
}
.mag-masthead .standfirst{max-width:52ch}
.mag-masthead-note{
  font-size:var(--t-sm);color:var(--muted);line-height:1.85;max-width:62ch;margin:0;
}
.mag-masthead .wave{margin-top:clamp(1.5rem,4vw,2.5rem)}

/* ------------------------------------------------------- 26.10 index grid */
.mag-list{padding-top:0}
.mag-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.2vw,1.6rem);
}
.mag-card{
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  position:relative;
  box-shadow:var(--sh-1);
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.mag-card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:repeating-linear-gradient(90deg,var(--amber-dim) 0 3px,transparent 3px 9px);
  opacity:0;transition:opacity .22s ease;z-index:2;
}
.mag-card:hover{border-color:var(--line-warm);transform:translateY(-4px);box-shadow:var(--sh-2)}
.mag-card:hover::before{opacity:1}
.mag-card:focus-within{border-color:var(--line-warm)}
.mag-card-media{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--bg-deep)}
.mag-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.mag-card:hover .mag-card-media img{transform:scale(1.05)}
.mag-card-body{
  padding:var(--s5);
  display:flex;flex-direction:column;gap:.6rem;flex:1 1 auto;
}
.mag-card .eyebrow{margin:0 0 .2rem}
.mag-card .eyebrow::after{display:none}
.mag-card-title{font-size:var(--t-lg);line-height:1.22;margin:0}
.mag-card-title a{color:var(--ink)}
.mag-card-title a:hover{color:var(--primary);text-decoration:none}
.mag-card-title a::after{content:"";position:absolute;inset:0;z-index:1}
.mag-card-dek{
  font-size:var(--t-sm);line-height:1.75;color:var(--ink-quiet);margin:0;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.mag-card-meta{
  margin:auto 0 0;padding-top:var(--s3);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;
  font-size:var(--t-xs);color:var(--muted);letter-spacing:.05em;
}
.mag-card-go{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-display);font-weight:600;font-size:var(--t-xs);
  letter-spacing:.06em;color:var(--primary);
}
.mag-card-go svg{width:15px;height:15px;transition:transform .22s ease}
.mag-card:hover .mag-card-go svg{transform:translateX(4px)}

/* the lead card, article one, runs the full width of the grid */
.mag-card.lead{grid-column:1 / -1;flex-direction:row;align-items:stretch}
.mag-card.lead .mag-card-media{flex:1 1 56%;aspect-ratio:auto;min-height:340px}
.mag-card.lead .mag-card-body{
  flex:1 1 44%;
  justify-content:center;
  padding:clamp(1.5rem,3.5vw,2.6rem);
  gap:.8rem;
}
.mag-card.lead .mag-card-title{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);line-height:1.16}
.mag-card.lead .mag-card-dek{font-size:var(--t-md);line-height:1.8;-webkit-line-clamp:6}
.mag-card.lead .mag-card-meta{margin-top:var(--s4)}

.mag-foot{padding-top:clamp(2.5rem,5vw,4rem)}
.mag-foot .art-cta{margin-top:0}

/* --------------------------------------------------- 26.11 magazine teaser
   The three card strip that sits on the home page before the contact form. */
.mag-teaser{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.mag-teaser .mag-card-title{font-size:var(--t-md)}
.mag-more{margin:var(--s6) 0 0}

/* -------------------------------------------------- 26.12 author page list */
.pub-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pub-list li{
  margin:0;padding:.85rem 0;
  border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem var(--s4);
}
.pub-list a{font-family:var(--font-display);font-weight:600;font-size:var(--t-sm);flex:1 1 24rem}
.pub-list time{font-size:var(--t-xs);color:var(--muted);letter-spacing:.06em;flex:0 0 auto}

/* ------------------------------------------------------ 26.13 responsive */
@media (max-width:1080px){
  .mag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .also-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
}
@media (max-width:900px){
  .mag-card.lead{flex-direction:column}
  .mag-card.lead .mag-card-media{min-height:0;aspect-ratio:3/2}
  .also-grid,.mag-teaser{grid-template-columns:repeat(2,minmax(0,1fr))}
  .art-figure{border-radius:var(--r-md)}
}
@media (max-width:640px){
  :root{--mag-col:100%}
  .mag-grid,.also-grid,.mag-teaser{grid-template-columns:minmax(0,1fr)}
  .art-body{max-width:100%}
  .art-body > *{max-width:100%}
  .art-body p,.art-body li{font-size:var(--t-base);line-height:1.8}
  .author-box{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .author-box img{width:96px;height:96px}
  .art-cta .onair{position:static;margin-bottom:var(--s3)}
  .crumbs span[aria-current]{max-width:22ch}
  .art-meta-lines{gap:.35rem var(--s3)}
}
@media (max-width:380px){
  .mag-card-body{padding:var(--s4)}
  .art-cta-act .btn{width:100%}
  .art-figure figcaption{padding-inline:var(--s4)}
  .crumbs ol{font-size:10px}
}

/* ------------------------------------------------ 26.14 magazine on the map
   The site map lists the magazine in a panel that runs the full grid width. */
.map-card--mag{grid-column:1 / -1}
.map-card--mag ul{columns:2;column-gap:var(--s6)}
.map-card--mag li{break-inside:avoid}
@media (max-width:760px){
  .map-card--mag ul{columns:1}
}



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


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