/* ============================================================
   CurbsideDrop design system
   Warm paper white, burnt orange, a mustard pop.
   Archivo Black over Space Grotesk. Sticker badges, tape,
   chunky black borders, hazard stripes, marquee ticker.
   Daylight build: the page is paper, the footer is the one
   piece of night left in it.
   ============================================================ */

:root{
  /* brief palette */
  --bg:#FFF7EE;
  --surface:#FFFFFF;
  --ink:#1B1712;
  --primary:#C2410C;
  --accent:#F5A524;
  --muted:#6E6357;

  /* derived shades and tints, all built on the light ground */
  --paper:#FFF7EE;          /* type and marks that sit on a saturated fill */
  --surface-2:#FDF3E7;
  --surface-3:#FAEEE0;
  --accent-tint:#FDF0D6;
  --line:#CDB392;           /* card and panel hairline, dark on light */
  --line-soft:#E3D0B7;      /* dashed micro rule */
  --rule:#B79C7C;           /* separator glyphs */
  --primary-deep:#8F2F09;   /* burnt orange at small text sizes */
  --primary-glow:rgba(194,65,12,.22);
  --accent-deep:#B87908;
  --accent-glow:rgba(245,165,36,.5);
  --ink-dim:#3B322A;
  --asphalt:#171310;        /* reserved: hazard tape and the footer */

  /* type */
  --font-display:"Archivo Black","Arial Black","Helvetica Neue",Impact,sans-serif;
  --font-body:"Space Grotesk","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --fs-xs:.78rem;
  --fs-sm:.9rem;
  --fs-base:1.02rem;
  --fs-md:1.14rem;
  --fs-lg:clamp(1.25rem,1rem + .8vw,1.5rem);
  --fs-xl:clamp(1.6rem,1.2rem + 1.6vw,2.2rem);
  --fs-2xl:clamp(2rem,1.4rem + 2.6vw,3.1rem);
  --fs-3xl:clamp(2.5rem,1.5rem + 4.4vw,4.6rem);
  --fs-num:clamp(2.6rem,1.6rem + 4vw,4.4rem);

  /* space */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:2.75rem; --s8:3.5rem; --s9:5rem; --s10:7rem;

  /* shape */
  --r-sm:3px;
  --r-md:6px;
  --r-lg:12px;
  --r-pill:999px;
  --bd:3px solid var(--ink);
  --bd-thin:2px solid var(--line);
  --sticker:6px 6px 0 0 var(--primary);
  --sticker-accent:6px 6px 0 0 var(--accent);
  --sticker-ink:5px 5px 0 0 var(--ink);
  --sticker-sm:4px 4px 0 0 var(--primary);
  --shadow-deep:0 18px 40px rgba(78,50,22,.16);
  --shadow-soft:0 10px 26px rgba(78,50,22,.10);

  --wrap:1180px;
  --ease:cubic-bezier(.2,.8,.28,1);
}

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

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

body{
  margin:0;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(194,65,12,.07), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(245,165,36,.13), transparent 38%),
    repeating-linear-gradient(115deg, rgba(27,23,18,.020) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(25deg, rgba(27,23,18,.030) 0 3px, transparent 3px 9px);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.62;
  letter-spacing:.005em;
  overflow-x:hidden;
}

h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin:0 0 var(--s4);
}
h1{font-size:var(--fs-3xl)}
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-lg);line-height:1.06}
h4{font-size:var(--fs-md);letter-spacing:.01em}
p{margin:0 0 var(--s4)}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0 0 var(--s4);padding-left:1.15rem}
li{margin-bottom:var(--s2)}
strong{color:var(--ink);font-weight:700}

a{color:var(--primary-deep);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--primary)}

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

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

.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-link{
  position:absolute;top:-200px;left:var(--s4);z-index:200;
  background:var(--accent);color:var(--ink);
  font-family:var(--font-display);text-transform:uppercase;
  padding:.7rem 1.1rem;border:var(--bd);box-shadow:var(--sticker-ink);
  text-decoration:none;
}
.skip-link:focus{top:var(--s4)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}

/* ---------- hazard tape rules and paper tape ---------- */
.tape-rule{
  height:14px;
  background:repeating-linear-gradient(135deg,var(--primary) 0 16px,var(--asphalt) 16px 32px);
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
}
.tape-rule--mustard{
  background:repeating-linear-gradient(135deg,var(--accent) 0 16px,var(--asphalt) 16px 32px);
}

.tape{
  position:absolute;
  display:inline-block;
  background:rgba(245,165,36,.94);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.09em;
  padding:.32rem 1.1rem;
  box-shadow:0 6px 14px rgba(78,50,22,.20);
  clip-path:polygon(2% 0,98% 3%,100% 96%,3% 100%);
}

/* ---------- sticker badge ---------- */
.badge{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.11em;
  color:var(--ink);
  background:var(--accent);
  border:3px solid var(--ink);
  padding:.42rem .95rem;
  border-radius:var(--r-pill);
  box-shadow:4px 4px 0 0 var(--primary);
  transform:rotate(-2.2deg);
  transition:transform .22s var(--ease);
}
.badge--orange{background:var(--primary);color:var(--paper);box-shadow:4px 4px 0 0 var(--accent)}
.badge--ghost{background:var(--surface);color:var(--primary-deep);border-color:var(--primary);box-shadow:4px 4px 0 0 var(--accent)}
.badge:hover{transform:rotate(2.4deg) scale(1.04)}

.badge__dot{width:9px;height:9px;border-radius:50%;background:var(--ink);display:inline-block}
.badge--ghost .badge__dot{background:var(--primary)}
.badge--orange .badge__dot{background:var(--paper)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);
  font-size:var(--fs-sm);
  text-transform:uppercase;
  letter-spacing:.06em;
  text-decoration:none;
  padding:.92rem 1.5rem;
  border:3px solid var(--ink);
  border-radius:var(--r-md);
  background:var(--primary);
  color:var(--paper);
  box-shadow:5px 5px 0 0 var(--ink);
  cursor:pointer;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background-color .16s linear;
}
.btn:hover{transform:translate(-2px,-2px) scale(1.03);box-shadow:8px 8px 0 0 var(--ink);color:var(--ink);background:var(--accent)}
.btn:active{transform:translate(3px,3px) scale(.98);box-shadow:1px 1px 0 0 var(--ink)}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--ink);box-shadow:5px 5px 0 0 var(--primary)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);box-shadow:8px 8px 0 0 var(--primary)}
.btn--mustard{background:var(--accent);color:var(--ink);box-shadow:5px 5px 0 0 var(--primary)}
.btn--mustard:hover{background:var(--primary);color:var(--paper)}
.btn--sm{padding:.6rem 1rem;font-size:var(--fs-xs);box-shadow:4px 4px 0 0 var(--ink)}
.btn--block{width:100%}

/* A button is a button wherever it lands. The section scoped link colours
   below (.nav a, .prose a, .article-body a) outrank .btn on specificity and
   would otherwise repaint the label, dropping it to 2.4 to 1 against the
   burnt orange fill. Doubling the class wins the cascade without !important. */
a.btn.btn{color:var(--paper)}
a.btn.btn:hover{color:var(--ink)}
a.btn--ghost.btn--ghost{color:var(--ink)}
a.btn--ghost.btn--ghost:hover{color:var(--paper)}
a.btn--mustard.btn--mustard{color:var(--ink)}
a.btn--mustard.btn--mustard:hover{color:var(--paper)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:120;
  background:rgba(255,247,238,.88);
  backdrop-filter:blur(9px);
  border-bottom:3px solid var(--line);
  transition:box-shadow .2s linear,border-color .2s linear,background-color .2s linear;
}
.site-header.is-stuck{
  border-bottom-color:var(--primary);
  box-shadow:0 12px 26px rgba(78,50,22,.13);
  background:rgba(255,247,238,.97);
}
/* The header carries nine items on one line: wordmark, eight links and the
   CTA. The gaps, the nav type and the CTA type are all fluid on the same
   ramp so the row stays single from the drawer breakpoint up, instead of
   the links shrinking to min-content and breaking their labels in two. */
.header-inner{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:clamp(.375rem,1.38vw - .37rem,.9rem);min-height:78px}

.wordmark{display:inline-flex;flex:0 0 auto;align-items:center;gap:clamp(.35rem,.55vw,.6rem);text-decoration:none;color:var(--ink)}
.wordmark svg{flex:0 0 auto}
.wordmark__text{
  font-family:var(--font-display);font-size:clamp(.95rem,.64rem + .58vw,1.16rem);
  text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;
}
.wordmark__text span{color:var(--primary)}
.wordmark:hover .wordmark__text{color:var(--ink)}

.nav{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(.28rem,1.12vw - .32rem,.7rem)}
.nav a{
  color:var(--ink-dim);text-decoration:none;font-size:clamp(.69rem,.4rem + .535vw,.88rem);font-weight:600;
  letter-spacing:.02em;padding:.35rem 0;border-bottom:3px solid transparent;
  white-space:nowrap;flex:0 0 auto;
  transition:color .16s linear,border-color .16s linear;
}
.nav a:hover{color:var(--primary);border-bottom-color:var(--primary)}
/* Scoped to the header nav only: the CTA is the widest item on the row, so
   it rides the same ramp. .btn--sm elsewhere on the site is untouched. */
.nav .btn--sm{padding:.5rem clamp(.55rem,.78vw,.9rem);font-size:clamp(.64rem,.44rem + .376vw,.78rem)}

.nav-toggle{
  display:none;background:var(--surface);border:3px solid var(--ink);border-radius:var(--r-md);
  padding:.5rem .6rem;cursor:pointer;box-shadow:3px 3px 0 0 var(--primary);
}
.nav-toggle span{display:block;width:22px;height:3px;background:var(--ink);margin:4px 0}

/* ---------- ticker ---------- */
.ticker{
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  background:var(--primary);
  color:var(--paper);
  overflow:hidden;
  position:relative;
}
.ticker__track{
  display:flex;gap:0;width:max-content;
  animation:roll 38s linear infinite;
}
.ticker__item{
  font-family:var(--font-display);text-transform:uppercase;font-size:var(--fs-xs);
  letter-spacing:.13em;padding:.55rem 1.3rem;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.9rem;
}
.ticker__item::after{content:"";width:8px;height:8px;background:var(--paper);transform:rotate(45deg)}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.section{padding-block:clamp(3.5rem,7vw,6.5rem);position:relative}
.section--surface{background:var(--surface);border-top:3px solid var(--line);border-bottom:3px solid var(--line)}
.section--deep{
  background:
    repeating-linear-gradient(135deg, rgba(194,65,12,.045) 0 9px, transparent 9px 18px),
    var(--surface-3);
}
.section__head{max-width:62ch;margin-bottom:var(--s7);position:relative}
.section__head--center{margin-inline:auto;text-align:center}
.kicker{
  font-family:var(--font-display);text-transform:uppercase;font-size:var(--fs-xs);
  letter-spacing:.2em;color:var(--primary-deep);margin:0 0 var(--s3);
}
.lede{color:var(--muted);font-size:var(--fs-md);max-width:60ch}
.section__head--center .lede{margin-inline:auto}

.mark{
  background:linear-gradient(transparent 62%,var(--primary) 62% 92%,transparent 92%);
  padding-inline:.06em;
}
.mark--mustard{background:linear-gradient(transparent 62%,var(--accent) 62% 92%,transparent 92%)}
.outline-word{
  color:transparent;
  -webkit-text-stroke:2px var(--primary);
  text-shadow:none;
}

/* ---------- hero ---------- */
.hero{position:relative;padding-block:clamp(3rem,6vw,5.5rem) clamp(3rem,6vw,5rem);overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:auto -10% -30% -10%;height:420px;
  background:radial-gradient(ellipse at 50% 100%,rgba(245,165,36,.34),transparent 68%);
  pointer-events:none;
}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}
/* Home hero headline only. .hero exists on index.html alone, so this sizes
   the home h1 about a fifth below the shared --fs-3xl step, which stays put
   for every other h1: magazine, article, author and the status pages. */
.hero h1{font-size:clamp(2.05rem,1.2rem + 3.5vw,3.6rem);margin-bottom:var(--s5);text-wrap:balance}
.hero__sub{font-size:var(--fs-md);color:var(--ink-dim);max-width:54ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s4);margin-block:var(--s6) var(--s6)}

.trust{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  border-top:3px dashed var(--line);padding-top:var(--s5);
}
.trust__item{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--fs-sm);color:var(--ink-dim);max-width:20ch}
.trust__item svg{flex:0 0 auto;margin-top:2px}

.hero__media{position:relative}
.hero__frame{
  border:4px solid var(--ink);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:14px 14px 0 0 var(--primary),var(--shadow-deep);
  transform:rotate(-1.3deg);
  background:var(--surface);
}
.hero__frame img{width:100%;aspect-ratio:3/2;object-fit:cover}
.hero__tape-a{top:-16px;left:8%;transform:rotate(-5deg)}
.hero__tape-b{bottom:-14px;right:6%;transform:rotate(3.5deg);background:rgba(194,65,12,.95);color:var(--paper)}

.hero__chip{
  position:absolute;right:-10px;bottom:38px;z-index:3;
  background:var(--surface);border:3px solid var(--ink);border-radius:var(--r-md);
  padding:.7rem .95rem;box-shadow:6px 6px 0 0 var(--accent);
  transform:rotate(2.4deg);max-width:230px;
  transition:transform .25s var(--ease);
}
.hero__chip:hover{transform:rotate(-1.6deg) scale(1.03)}
.hero__chip strong{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:.1em;color:var(--primary-deep)}
.hero__chip span{font-size:var(--fs-xs);color:var(--muted);line-height:1.35;display:block}

/* ---------- grids and cards ---------- */
.grid{display:grid;gap:var(--s5)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  background:var(--surface);
  border:3px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s5);
  position:relative;
  transition:transform .22s var(--ease),border-color .22s linear,box-shadow .22s var(--ease);
}
.card:hover{transform:translateY(-4px) rotate(-.5deg);border-color:var(--primary);box-shadow:8px 8px 0 0 var(--primary)}
.card h3{margin-bottom:var(--s3)}
.card p{color:var(--muted);margin-bottom:0;font-size:var(--fs-sm)}
.card__cost{
  display:inline-block;margin-top:var(--s4);font-family:var(--font-display);
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink);background:var(--accent);padding:.28rem .7rem;border-radius:var(--r-sm);
  transform:rotate(-1.4deg);
}

/* icons */
.icon-plate{
  width:56px;height:56px;display:grid;place-items:center;
  background:var(--primary);border:3px solid var(--ink);border-radius:var(--r-md);
  box-shadow:4px 4px 0 0 var(--accent);
  margin-bottom:var(--s4);
  transform:rotate(-3deg);
  transition:transform .22s var(--ease);
}
.card:hover .icon-plate{transform:rotate(4deg) scale(1.06)}
.icon-plate svg{display:block}

/* ---------- steps ---------- */
.steps{display:grid;gap:var(--s5);grid-template-columns:repeat(2,minmax(0,1fr))}
.step{
  position:relative;background:var(--surface-2);border:3px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s6) var(--s5) var(--s5);
}
.step__n{
  position:absolute;top:-26px;left:var(--s5);
  font-family:var(--font-display);font-size:2.6rem;line-height:1;
  color:transparent;-webkit-text-stroke:3px var(--primary);
}
.step h3{margin-top:var(--s2)}
.step p{color:var(--muted);font-size:var(--fs-sm);margin-bottom:0}

.how__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.how__frame{
  border:4px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:-12px 12px 0 0 var(--accent);transform:rotate(1.2deg);position:sticky;top:120px;
}
.how__frame img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* ---------- outcomes ---------- */
.outcome{
  border:3px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:var(--s5);position:relative;overflow:hidden;
}
.outcome::after{
  content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;
  background:repeating-linear-gradient(135deg,var(--accent) 0 7px,transparent 7px 14px);
  opacity:.55;transform:rotate(12deg);
}
.outcome__n{
  font-family:var(--font-display);font-size:var(--fs-num);line-height:.9;
  color:var(--primary);display:block;margin-bottom:var(--s3);
}
.outcome h3{font-size:var(--fs-md);margin-bottom:var(--s2)}
.outcome p{color:var(--muted);font-size:var(--fs-sm);margin-bottom:0}

/* ---------- testimonials ---------- */
.testimonial{
  margin:0;background:var(--surface-2);border:3px solid var(--ink);
  border-radius:var(--r-lg);padding:var(--s6) var(--s5) var(--s5);
  position:relative;box-shadow:7px 7px 0 0 var(--primary);
  transform:rotate(-.8deg);
  transition:transform .24s var(--ease),box-shadow .24s var(--ease);
}
.testimonial:nth-child(2){transform:rotate(.9deg);box-shadow:7px 7px 0 0 var(--accent)}
.testimonial:nth-child(3){transform:rotate(-.4deg)}
.testimonial:hover{transform:rotate(0deg) translateY(-5px);box-shadow:11px 11px 0 0 var(--accent)}
.testimonial__quote{font-size:var(--fs-md);color:var(--ink);margin-bottom:var(--s5)}
.testimonial figcaption{border-top:3px dashed var(--line);padding-top:var(--s4);font-size:var(--fs-sm);color:var(--muted)}
.testimonial figcaption b{display:block;font-family:var(--font-display);text-transform:uppercase;color:var(--ink);letter-spacing:.02em;font-weight:400}
.qmark{
  position:absolute;top:-20px;left:var(--s5);background:var(--accent);color:var(--ink);
  font-family:var(--font-display);font-size:1.4rem;line-height:1;padding:.3rem .6rem;
  border:3px solid var(--ink);border-radius:var(--r-sm);transform:rotate(-6deg);
}

.metrics{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border:3px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;margin-top:var(--s7);
  background:var(--accent-tint);
  box-shadow:var(--sticker-ink);
}
.metrics div{padding:var(--s5);border-right:3px solid var(--ink);text-align:center}
.metrics div:last-child{border-right:0}
.metrics b{display:block;font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,2.7rem);color:var(--primary);line-height:1}
.metrics span{font-size:var(--fs-sm);color:var(--muted)}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);align-items:start}
.tier{
  background:var(--surface);border:3px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s6) var(--s5);display:flex;flex-direction:column;height:100%;position:relative;
}
.tier--best{
  background:var(--surface-2);border-color:var(--primary);
  box-shadow:9px 9px 0 0 var(--primary);
  transform:translateY(-10px);
}
.tier__flag{
  position:absolute;top:-18px;right:var(--s5);
  background:var(--accent);color:var(--ink);border:3px solid var(--ink);border-radius:var(--r-sm);
  font-family:var(--font-display);font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.1em;padding:.3rem .75rem;transform:rotate(3deg);
}
.tier h3{margin-bottom:var(--s2)}
.tier__price{font-family:var(--font-display);font-size:clamp(2.2rem,4vw,3rem);line-height:1;color:var(--ink)}
.tier__per{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--muted);letter-spacing:0}
.tier__for{color:var(--primary-deep);font-size:var(--fs-sm);margin-block:var(--s3) var(--s4)}
.tier ul{list-style:none;padding:0;margin:0 0 var(--s5)}
.tier li{display:flex;gap:.6rem;font-size:var(--fs-sm);color:var(--ink-dim);margin-bottom:var(--s3)}
.tier li svg{flex:0 0 auto;margin-top:4px}
.tier .btn{margin-top:auto}
.pricing-note{
  margin-top:var(--s6);text-align:center;color:var(--muted);font-size:var(--fs-sm);
  border-top:3px dashed var(--line);padding-top:var(--s5);
}

/* ---------- faq ---------- */
.faq{max-width:850px;margin-inline:auto}
.faq__item{border:3px solid var(--line);border-radius:var(--r-lg);background:var(--surface);margin-bottom:var(--s4);overflow:hidden}
.faq__item:hover{border-color:var(--primary)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  background:transparent;border:0;color:var(--ink);text-align:left;cursor:pointer;
  font-family:var(--font-display);text-transform:uppercase;font-size:var(--fs-sm);
  letter-spacing:.02em;padding:var(--s5);line-height:1.25;
}
.faq__q:hover{color:var(--primary)}
.faq__sign{
  flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;
  background:var(--primary);color:var(--paper);border:3px solid var(--ink);border-radius:var(--r-sm);
  font-family:var(--font-display);font-size:1rem;line-height:1;
  transition:transform .2s var(--ease);
}
.faq__q[aria-expanded="true"] .faq__sign{transform:rotate(45deg);background:var(--accent);color:var(--ink)}
.faq__a{padding:0 var(--s5) var(--s5);color:var(--muted);font-size:var(--fs-sm);max-width:70ch}
.faq__a p:last-child{margin-bottom:0}
.faq__a[hidden]{display:none}

/* ---------- form ---------- */
.contact__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.form-panel{
  background:var(--surface);border:3px solid var(--ink);border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2.2rem);box-shadow:10px 10px 0 0 var(--primary);
}
.field{margin-bottom:var(--s4)}
.field label{display:block;font-family:var(--font-display);text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:.09em;color:var(--primary-deep);margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg);color:var(--ink);
  border:3px solid var(--ink);border-radius:var(--r-md);
  padding:.75rem .85rem;font-family:var(--font-body);font-size:var(--fs-sm);
  transition:border-color .16s linear,box-shadow .16s linear;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--primary)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--accent-glow);outline:none}
.field textarea{min-height:130px;resize:vertical}
.field [aria-invalid="true"]{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.err{display:block;color:var(--primary-deep);font-size:var(--fs-xs);margin-top:.35rem;font-weight:700}
.err:empty{display:none}
.consent{display:flex;gap:.7rem;align-items:flex-start;margin-block:var(--s5)}
.consent input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--primary);margin-top:2px}
.consent label{font-family:var(--font-body);text-transform:none;letter-spacing:0;color:var(--muted);font-size:var(--fs-sm)}
.form-after{margin-top:var(--s4);font-size:var(--fs-sm);color:var(--muted)}

.contact__aside li{color:var(--ink-dim);font-size:var(--fs-sm)}
.hook{font-size:var(--fs-lg);color:var(--ink);font-family:var(--font-display);text-transform:uppercase;line-height:1.1}

/* ---------- prose pages ---------- */
.prose{max-width:78ch}
.prose h2{margin-top:var(--s7);font-size:var(--fs-xl)}
.prose h3{margin-top:var(--s6);color:var(--primary)}
.prose p,.prose li{color:var(--ink-dim);font-size:var(--fs-sm)}
.prose a{color:var(--primary-deep)}
.page-head{padding-block:clamp(2.5rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem);border-bottom:3px solid var(--line)}
.crumbs{font-size:var(--fs-xs);color:var(--muted);margin-bottom:var(--s4);text-transform:uppercase;letter-spacing:.12em;font-family:var(--font-display)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--primary)}

.factbox{background:var(--surface-2);border:3px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);margin-block:var(--s5)}
.factbox dl{margin:0;display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:.55rem var(--s4)}
.factbox dt{font-family:var(--font-display);text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:.07em;color:var(--primary-deep)}
.factbox dd{margin:0;font-size:var(--fs-sm);color:var(--ink-dim)}

/* author page */
.author__grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(1.6rem,3.5vw,3rem);align-items:start}
.author__portrait{
  border:4px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:10px 10px 0 0 var(--primary);transform:rotate(-1.6deg);
}
.author__portrait img{width:100%;height:auto;display:block}
.author-byline{
  display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;
  border:3px dashed var(--line);border-radius:var(--r-lg);
  padding:var(--s5);margin-top:var(--s8);background:var(--surface);
}
.author-byline p{margin:0;font-size:var(--fs-sm);color:var(--muted);max-width:60ch}

/* sitemap page */
.map-group{background:var(--surface);border:3px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.map-group h2{font-size:var(--fs-lg);margin-top:0;color:var(--primary)}
.map-group ul{list-style:none;padding:0;margin:0}
.map-group li{border-bottom:2px dashed var(--line-soft);padding-block:.7rem}
.map-group li:last-child{border-bottom:0}
.map-group a{font-family:var(--font-display);text-transform:uppercase;font-size:var(--fs-sm);text-decoration:none;color:var(--ink)}
.map-group a:hover{color:var(--primary)}
.map-group span{display:block;color:var(--muted);font-size:var(--fs-xs)}

/* status pages */
.status{text-align:center;max-width:680px;margin-inline:auto;padding-block:clamp(3rem,8vw,6rem)}
.status .badge{margin-bottom:var(--s5)}
.status__cta{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:center;margin-top:var(--s6)}
.big404{font-family:var(--font-display);font-size:clamp(5rem,18vw,11rem);line-height:.82;color:transparent;-webkit-text-stroke:4px var(--primary);margin-bottom:var(--s4)}

/* ---------- footer ---------- */
/* The footer is the single dark band the daylight build keeps: night at the
   end of the service day, so the paper above it has somewhere to stop. */
.site-footer{
  background:var(--asphalt);
  color:#C9BAA6;
  border-top:5px solid var(--primary);
  padding-top:clamp(3rem,6vw,4.5rem);
}
.site-footer .wordmark{color:#FFF7EE}
.site-footer .wordmark__text{font-size:1.16rem}
.site-footer .wordmark:hover .wordmark__text{color:#FFF7EE}
.site-footer .wordmark__text span{color:var(--accent)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--s6)}
.footer h2,.footer h3{font-size:var(--fs-sm);letter-spacing:.12em;color:var(--accent);margin-bottom:var(--s4)}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin-bottom:.6rem}
.footer a{color:#C9BAA6;text-decoration:none;font-size:var(--fs-sm)}
.footer a:hover{color:var(--accent)}
.footer__line{color:#C9BAA6;font-size:var(--fs-sm);max-width:34ch;margin-block:var(--s4)}
.socials{display:flex;gap:.6rem;flex-wrap:wrap}
.socials a{
  width:42px;height:42px;display:grid;place-items:center;
  background:rgba(255,247,238,.10);border:3px solid rgba(255,247,238,.30);border-radius:var(--r-md);
  transition:transform .18s var(--ease),background-color .18s linear,border-color .18s linear;
}
.socials a:hover{background:var(--primary);border-color:#FFF7EE;transform:rotate(-6deg) scale(1.07)}
.socials svg{display:block}
.footer__base{
  margin-top:clamp(2.5rem,5vw,3.5rem);border-top:3px solid rgba(255,247,238,.20);
  padding-block:var(--s5);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  color:#C9BAA6;font-size:var(--fs-xs);
}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .hero__grid,.how__grid,.contact__grid{grid-template-columns:1fr}
  .how__frame{position:static;transform:rotate(0deg)}
  .tiers{grid-template-columns:1fr;gap:var(--s6)}
  .tier--best{transform:none}
  .footer__grid{grid-template-columns:1fr 1fr}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .author__grid{grid-template-columns:1fr;max-width:560px}
}
@media (max-width:860px){
  .nav-toggle{display:block}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:3px solid var(--primary);
    padding:var(--s4);
  }
  .nav.is-open{display:flex}
  .nav a{padding:.85rem .2rem;border-bottom:2px dashed var(--line-soft);font-size:var(--fs-sm);white-space:normal}
  .nav .btn{margin-top:var(--s4)}
  /* the row ramp above is for the one line desktop header; the drawer has
     the full width of the screen, so it goes back to reading size */
  .nav .btn--sm{padding:.6rem 1rem;font-size:var(--fs-xs)}
  .site-header{position:sticky}
  .header-inner{position:relative}
  .grid--3,.grid--2,.steps,.metrics{grid-template-columns:1fr}
  .metrics div{border-right:0;border-bottom:3px solid var(--ink)}
  .metrics div:last-child{border-bottom:0}
  .hero__chip{position:static;margin-top:var(--s5);transform:none;max-width:none}
}
@media (max-width:640px){
  .grid--4{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .hero__frame{transform:none;box-shadow:8px 8px 0 0 var(--primary)}
  .testimonial{transform:none}
  .factbox dl{grid-template-columns:1fr}
}

@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;
  }
  .ticker__track{animation:none}
  .js .reveal{opacity:1;transform:none}
}

@media print{
  .site-header,.ticker,.site-footer,.btn{display:none}
  body{background:#fff;color:#000}
}

/* ============================================================
   SERVICE WINDOW: the magazine
   Same paper, same tape, same sticker shadows. Only the
   rhythm changes, because these pages are read, not scanned.
   ============================================================ */

/* ---------- magazine masthead ---------- */
.mag-head{
  padding-block:clamp(2.5rem,5vw,4.25rem) clamp(1.75rem,3.5vw,2.75rem);
  border-bottom:3px solid var(--line);
  background:
    repeating-linear-gradient(115deg, rgba(194,65,12,.05) 0 2px, transparent 2px 9px),
    var(--surface);
}
.mag-head__inner{max-width:66ch}
.mag-head h1{margin-bottom:var(--s4);text-wrap:balance}
.mag-standfirst{
  font-size:var(--fs-md);
  color:var(--ink-dim);
  line-height:1.55;
  max-width:62ch;
  margin-bottom:0;
}
.mag-head__meta{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  margin-top:var(--s5);
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:var(--fs-xs);
  letter-spacing:.11em;
  color:var(--muted);
}
.mag-head__meta b{color:var(--primary-deep);font-weight:400}

/* ---------- index grid ---------- */
.mag-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s5);
}
.mag-card{
  display:flex;
  flex-direction:column;
  background:var(--surface-2);
  border:3px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  position:relative;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.mag-card:hover{
  transform:translate(-3px,-3px);
  border-color:var(--primary);
  box-shadow:8px 8px 0 0 var(--primary);
}
.mag-card__media{
  display:block;
  border-bottom:3px solid var(--line);
  background:var(--surface-3);
  overflow:hidden;
}
.mag-card__media img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  transition:transform .4s var(--ease);
}
.mag-card:hover .mag-card__media img{transform:scale(1.04)}
.mag-card__body{padding:var(--s5);display:flex;flex-direction:column;flex:1 1 auto}
.mag-card__angle{
  align-self:flex-start;
  display:inline-block;
  background:var(--accent);
  color:var(--ink);
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:var(--fs-xs);
  letter-spacing:.09em;
  padding:.3rem .6rem;
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 0 var(--primary);
  transform:rotate(-1.4deg);
  margin-bottom:var(--s4);
}
.mag-card__title{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:var(--fs-md);
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0 0 var(--s3);
}
.mag-card__title a{color:var(--ink);text-decoration:none}
.mag-card__title a:hover{color:var(--primary)}
.mag-card__dek{color:var(--muted);font-size:var(--fs-sm);margin-bottom:var(--s4)}
.mag-card__meta{
  margin-top:auto;
  padding-top:var(--s3);
  border-top:2px dashed var(--line-soft);
  display:flex;flex-wrap:wrap;gap:.5rem .9rem;
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:var(--fs-xs);
  letter-spacing:.1em;
  color:var(--muted);
}
.mag-card__meta .mag-card__read{color:var(--primary-deep)}

/* lead card: article one gets the whole width and a bigger voice */
.mag-card.lead{
  grid-column:1 / -1;
  flex-direction:row;
  align-items:stretch;
  border-color:var(--primary);
  box-shadow:7px 7px 0 0 var(--accent);
}
.mag-card.lead:hover{box-shadow:11px 11px 0 0 var(--accent)}
.mag-card.lead .mag-card__media{
  flex:0 0 54%;
  border-bottom:0;
  border-right:3px solid var(--line);
}
.mag-card.lead .mag-card__media img{height:100%;aspect-ratio:auto;min-height:320px}
.mag-card.lead .mag-card__body{padding:clamp(1.5rem,3vw,2.5rem);justify-content:center}
.mag-card.lead .mag-card__title{font-size:var(--fs-xl);line-height:1.02}
.mag-card.lead .mag-card__dek{font-size:var(--fs-base);color:var(--ink-dim);max-width:52ch}
.mag-card.lead .mag-card__angle{background:var(--primary);color:var(--paper);box-shadow:3px 3px 0 0 var(--accent)}

/* ---------- article page ---------- */
.article-head{
  padding-block:clamp(2.25rem,4.5vw,3.5rem) var(--s5);
  border-bottom:3px solid var(--line-soft);
}
.article-head__inner{max-width:72ch}
.article-head h1{
  font-size:var(--fs-2xl);
  line-height:1.02;
  text-wrap:balance;
  margin-bottom:var(--s4);
}
.article-dek{
  font-size:var(--fs-md);
  color:var(--ink-dim);
  line-height:1.55;
  max-width:64ch;
  margin-bottom:var(--s5);
}
.byline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem .85rem;
  font-size:var(--fs-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  font-family:var(--font-display);
  color:var(--muted);
  padding-top:var(--s4);
  border-top:2px dashed var(--line);
}
.byline a{color:var(--primary-deep);text-decoration:none;border-bottom:2px solid var(--primary)}
.byline a:hover{color:var(--primary)}
.byline__sep{color:var(--rule);}
.byline__read{color:var(--primary-deep)}

.article-figure{
  margin:0 0 var(--s6);
  border:3px solid var(--ink);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--sticker);
  background:var(--surface-3);
}
.article-figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.article-figure figcaption{
  padding:.8rem var(--s4);
  border-top:3px solid var(--ink);
  background:var(--surface-2);
  font-size:var(--fs-xs);
  color:var(--muted);
  letter-spacing:.02em;
}

.article-shell{padding-block:clamp(2rem,4vw,3rem) clamp(3rem,6vw,5rem)}
.article-body{
  max-width:68ch;      /* lands between 64 and 75 characters at this size */
  margin-inline:auto;
  font-size:var(--fs-md);
  line-height:1.68;
  color:var(--ink-dim);
}
.article-body > p{margin-bottom:var(--s5)}
.article-body h2{
  font-size:var(--fs-xl);
  margin-top:var(--s8);
  margin-bottom:var(--s4);
  padding-top:var(--s4);
  border-top:3px solid var(--line);
  color:var(--ink);
  text-wrap:balance;
}
.article-body h3{
  font-size:var(--fs-lg);
  margin-top:var(--s6);
  margin-bottom:var(--s3);
  color:var(--primary);
}
.article-body ul,.article-body ol{margin-bottom:var(--s5);padding-left:1.35rem}
.article-body li{margin-bottom:var(--s3)}
.article-body li::marker{color:var(--primary)}
.article-body a{color:var(--primary-deep);text-decoration-thickness:2px}
.article-body a:hover{color:var(--primary)}
.article-body strong{color:var(--ink)}
.article-body blockquote{
  margin:var(--s6) 0;
  padding:var(--s5) var(--s5) var(--s5) calc(var(--s5) + 6px);
  background:var(--surface-2);
  border:3px solid var(--line);
  border-left:10px solid var(--primary);
  border-radius:var(--r-md);
  color:var(--ink);
  font-size:var(--fs-md);
}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body table{
  width:100%;
  border-collapse:collapse;
  margin:var(--s6) 0;
  font-size:var(--fs-sm);
  border:3px solid var(--line);
  background:var(--surface-2);
  display:block;
  overflow-x:auto;
}
.article-body th,.article-body td{
  text-align:left;
  padding:.7rem .85rem;
  border-bottom:2px solid var(--line-soft);
  border-right:2px solid var(--line-soft);
}
.article-body th{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:var(--fs-xs);
  letter-spacing:.07em;
  color:var(--ink);
  background:var(--accent);
}
.article-body tr:last-child td{border-bottom:0}
.article-body th:last-child,.article-body td:last-child{border-right:0}

/* the assembler's contextual links */
.inline-read{
  margin:var(--s6) 0;
  padding:var(--s4) var(--s5);
  background:var(--surface-2);
  border:3px solid var(--line);
  border-left:10px solid var(--accent);
  border-radius:var(--r-md);
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:var(--fs-xs);
  letter-spacing:.08em;
  color:var(--muted);
  line-height:1.5;
}
.inline-read a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:3px solid var(--primary);
}
.inline-read a:hover{color:var(--primary)}

/* ---------- call to action ---------- */
.article-cta{
  max-width:68ch;
  margin:var(--s8) auto 0;
  background:var(--surface);
  border:3px solid var(--ink);
  border-radius:var(--r-lg);
  box-shadow:var(--sticker);
  padding:clamp(1.5rem,3.5vw,2.5rem);
  position:relative;
}
.article-cta .tape{position:absolute;top:-16px;left:var(--s5);transform:rotate(-3deg)}
.article-cta h2{font-size:var(--fs-lg);margin-bottom:var(--s3);margin-top:var(--s2)}
.article-cta p{color:var(--muted);font-size:var(--fs-sm);max-width:54ch}
.article-cta .btn{margin-top:var(--s2)}

/* ---------- author box ---------- */
.author-box{
  max-width:68ch;
  margin:var(--s7) auto 0;
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:var(--s5);
  align-items:start;
  background:var(--surface-2);
  border:3px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s5);
}
.author-box__portrait{
  border:3px solid var(--ink);
  border-radius:var(--r-md);
  box-shadow:var(--sticker-sm);
  overflow:hidden;
  background:var(--surface-3);
}
.author-box__portrait img{width:100%;height:auto;display:block}
.author-box h2{font-size:var(--fs-md);margin-bottom:var(--s2)}
.author-box__role{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:var(--fs-xs);
  letter-spacing:.1em;
  color:var(--primary-deep);
  margin-bottom:var(--s3);
}
.author-box p{color:var(--muted);font-size:var(--fs-sm)}
.author-box a{color:var(--primary-deep)}

/* ---------- read also ---------- */
.read-also{
  border-top:3px solid var(--line);
  margin-top:var(--s8);
  padding-top:var(--s7);
}
.read-also__head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s4);margin-bottom:var(--s5);
}
.read-also__head h2{font-size:var(--fs-xl);margin-bottom:0}
.read-also__head a{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:var(--fs-xs);letter-spacing:.1em;color:var(--primary-deep);text-decoration:none;
  border-bottom:3px solid var(--primary);
}
.read-also__head a:hover{color:var(--primary)}
.read-also__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.ra-card{
  display:flex;flex-direction:column;
  background:var(--surface-2);
  border:3px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.ra-card:hover{transform:translate(-3px,-3px);border-color:var(--primary);box-shadow:7px 7px 0 0 var(--accent)}
.ra-card img{width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:3px solid var(--line)}
.ra-card__body{padding:var(--s4);display:flex;flex-direction:column;flex:1 1 auto}
.ra-card__date{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:var(--fs-xs);letter-spacing:.1em;color:var(--muted);margin-bottom:var(--s2);
}
.ra-card h3{font-size:var(--fs-sm);line-height:1.14;margin-bottom:var(--s2)}
.ra-card h3 a{color:var(--ink);text-decoration:none}
.ra-card h3 a:hover{color:var(--primary)}
.ra-card p{color:var(--muted);font-size:var(--fs-xs);line-height:1.5;margin-bottom:0}

/* ---------- magazine teaser on the home page ---------- */
.mag-teaser__head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s5);margin-bottom:var(--s7);
}
.mag-teaser__head .section__head{margin-bottom:0}
.mag-teaser__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}

/* ---------- author page article list ---------- */
.pub-list{list-style:none;padding:0;margin:0}
.pub-list li{
  border-bottom:2px dashed var(--line-soft);
  padding-block:.85rem;
  display:flex;flex-wrap:wrap;gap:.4rem var(--s4);
  align-items:baseline;justify-content:space-between;
}
.pub-list li:last-child{border-bottom:0}
.pub-list a{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:var(--fs-sm);line-height:1.2;text-decoration:none;color:var(--ink);
}
.pub-list a:hover{color:var(--primary)}
.pub-list time{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:var(--fs-xs);letter-spacing:.1em;color:var(--muted);white-space:nowrap;
}

/* ---------- magazine responsive ---------- */
@media (max-width:1040px){
  .mag-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .read-also__grid,.mag-teaser__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mag-card.lead{flex-direction:column}
  .mag-card.lead .mag-card__media{flex:0 0 auto;border-right:0;border-bottom:3px solid var(--line)}
  .mag-card.lead .mag-card__media img{min-height:0;aspect-ratio:3/2}
}
@media (max-width:640px){
  .mag-grid{grid-template-columns:1fr}
  .read-also__grid,.mag-teaser__grid{grid-template-columns:1fr}
  .article-body{font-size:var(--fs-base)}
  .article-body table{font-size:var(--fs-xs)}
  .author-box{grid-template-columns:1fr;max-width:none}
  .author-box__portrait{max-width:150px}
  .article-figure{box-shadow:6px 6px 0 0 var(--primary)}
  .byline{font-size:.72rem;letter-spacing:.06em}
  .mag-card.lead .mag-card__title{font-size:var(--fs-lg)}
}
@media (max-width:400px){
  .mag-card__body{padding:var(--s4)}
  .article-cta{padding:var(--s4)}
  .article-cta .tape{left:var(--s3)}
  .read-also{padding-top:var(--s6)}
}



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