/* The Everything Educator, v2.
 *
 * v1 was the default house style: cream ground, one accent, a serif display face, tasteful
 * rounded cards, a lot of air. Competent and interchangeable. v2 is built from the CATALOGUE
 * instead of from taste.
 *
 * THE PALETTE IS MEASURED, NOT CHOSEN. Chroma across all 133 live covers reads
 * orange 37.8% / yellow 18.4% / red 12.7% / blue 10% / magenta 8.6% / teal 5.3%, and
 * #FFD830 alone is 6.7% of every coloured pixel in the store. Sunny yellow is the brand.
 *
 * THE STRUCTURE IS THE COVER GRAMMAR. Every cover is one move: a loud patterned frame around a
 * black rounded plate carrying heavy white condensed caps. So the page runs full-bleed saturated
 * blocks, content on plates, chip badges off the EDITABLE pills, and the spaced-caps footer strip.
 *
 * SINGLE COMMITTED LOOK, deliberately. A colour-blocked design is hard to do twice and the joy
 * does not survive a naive inversion, so there is no dark palette. Every colour is painted
 * explicitly rather than inherited.
 */
:root{
  --sun:#FFD230; --amber:#FF9E1B; --tomato:#D53420; --berry:#C21E63;
  --teal:#0F766E; --navy:#1B3A5C; --ink:#14161B; --paper:#FDF7E9; --chalk:#fff;
  --soft:#5A5348; --line:#E4DCC8;
  --wrap:1400px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Archivo,system-ui,-apple-system,Segoe UI,sans-serif;
  font-variation-settings:"wdth" 100,"wght" 420;
  font-size:17.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.inner{max-width:var(--wrap);margin:0 auto;padding:0 44px}
.narrow{max-width:820px}
a{color:inherit}
:focus-visible{outline:3px solid var(--tomato);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px;
  border-radius:8px;text-decoration:none}

/* ── type ─────────────────────────────────────────────────────────────────────
 * One family. Archivo is variable on both width and weight, so the condensed black caps of the
 * covers and the plain body text come out of the same file: a smaller download than v1's two
 * families, and a system rather than a pairing. */
h1,h2,h3,.disp{text-transform:uppercase;font-variation-settings:"wdth" 74,"wght" 880;
  line-height:.94;letter-spacing:-.005em;margin:0;text-wrap:balance}
h1{font-size:clamp(38px,5.4vw,64px)}
h2{font-size:clamp(30px,4.2vw,50px)}
h3{font-size:21px;font-variation-settings:"wdth" 80,"wght" 820}
p{margin:0 0 1.05em}
.lede{font-size:18.5px;line-height:1.5;max-width:52ch}
.sub{font-size:17px;max-width:64ch;margin:12px 0 34px}
.eyebrow{display:inline-block;background:var(--ink);color:var(--sun);text-transform:uppercase;
  font-size:12.5px;letter-spacing:.13em;font-variation-settings:"wght" 750;
  padding:7px 13px;border-radius:6px;margin:0 0 18px}
.scrib{font-family:Caveat,cursive;font-size:24px;line-height:1}

/* ── the plate: the object on every cover ───────────────────────────────────── */
.plate{background:var(--ink);color:var(--chalk);border-radius:22px;padding:28px 32px 30px;
  box-shadow:0 14px 0 rgba(0,0,0,.13)}
.plate h1,.plate h2{color:#fff}
.plate em{font-style:normal;color:var(--sun)}

/* ── wordmark: "Everything" reversed out of the plate ───────────────────────── */
.brand{text-decoration:none;display:inline-flex;align-items:center;gap:11px}
.brand .mk{width:34px;height:34px;border-radius:8px;display:block}
.wm{font-variation-settings:"wdth" 70,"wght" 890;text-transform:uppercase;font-size:21px;
  line-height:1;letter-spacing:-.012em;white-space:nowrap;color:#fff}
.wm .pl{background:var(--sun);color:var(--ink);border-radius:.19em;padding:.055em .17em .085em;
  display:inline-block}

/* ── chrome ───────────────────────────────────────────────────────────────────
 * The topbar and footer are ink so the wordmark's plate inverts to sun, which is the lockup
 * that tested best on a dark ground. */
.topbar{background:var(--ink)}
.topbar .inner{display:flex;align-items:center;gap:26px;min-height:64px;flex-wrap:wrap}
.topbar nav{margin-left:auto;display:flex;gap:22px;font-size:14.5px;
  font-variation-settings:"wght" 620}
.topbar nav a{color:#fff;text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.topbar nav a:hover,.topbar nav a[aria-current]{color:var(--sun);border-bottom-color:var(--sun)}

.sitefoot{background:var(--ink);color:#B9B0A0;padding:46px 0 56px}
.sitefoot nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px;margin:22px 0 16px}
.sitefoot nav a{color:#E6DFD0;text-decoration:none}
.sitefoot nav a:hover{color:var(--sun)}
.sitefoot .fine{max-width:60ch;font-size:14px;color:#8E8676;margin:0}

/* ── generated doodle art ─────────────────────────────────────────────────────
 * Qwen on the local 4090, $0. Painted on white and composited with multiply so the ground drops
 * out, which is the same discipline the forms-art pipeline uses. No people in any of it: the
 * standing rule against generating minors makes a "happy classroom" a room, not a face. */
.band{height:96px;background:var(--paper) center/auto 100% repeat-x;mix-blend-mode:multiply;
  background-image:url(img/art/doodle-band.webp)}
.divider{background:var(--paper);border-bottom:6px solid var(--ink)}
.divider i{display:block;height:74px;background:center/auto 100% repeat-x;mix-blend-mode:multiply;
  background-image:url(img/art/doodle-scatter.webp)}

/* the spaced-caps strip, lifted straight off every cover footer */
.strip{background:var(--ink);color:var(--sun);text-align:center;padding:13px 24px;
  text-transform:uppercase;letter-spacing:.22em;font-size:12px;font-variation-settings:"wght" 700}

/* ── sections: colour is BLOCKED, not accented ──────────────────────────────── */
.sec{padding:60px 0 68px;border-bottom:6px solid var(--ink)}
.s-sun{background:var(--sun)}
.s-paper{background:var(--paper)}
.s-teal{background:var(--teal);color:#fff}
.s-berry{background:var(--berry);color:#fff}
.s-ink{background:var(--ink);color:#EDE7D8}
.s-teal h1,.s-teal h2,.s-berry h1,.s-berry h2,.s-ink h1,.s-ink h2{color:#fff}
.s-teal .sub,.s-teal .lede{color:#DDF2F0}
.s-berry .sub,.s-berry .lede{color:#FBE3EE}
.s-ink .sub,.s-ink .lede{color:#CFC7B6}
.s-teal a,.s-berry a,.s-ink a{color:#fff}
/* ...but a card is an <a> on a cream ground INSIDE those sections, and the .s-berry a rule (0,1,1)
   outranks .card (0,1,0), so every card title rendered white on cream and vanished. .cline
   survived only because it carries its own colour. Restore the card's own ground rules at a
   specificity that wins. Caught by the mobile look step, not by any automated check. */
.s-teal .card,.s-berry .card,.s-ink .card,
.s-teal .tile,.s-berry .tile,.s-ink .tile{color:var(--ink)}
.card .cname,.tile b{color:var(--ink)}

/* hero */
.hero{background:var(--sun);border-bottom:6px solid var(--ink);overflow:hidden}
.hero .inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  padding-top:52px;padding-bottom:60px}
/* The plate is a BANNER on the covers, never a column. Five lines of caps made it a slab of
   black that swallowed the yellow, so the headline is capped and the lede sits on the ground:
   ink on sun reads 11.6:1 and lets the colour breathe. */
.hero h1{font-size:clamp(36px,5vw,60px)}
.hero .lede{margin:22px 0 0;color:#2B2A24;max-width:46ch}

/* the pinned-card stack. Overlap buried two of three covers in the first pass -- a cover the
   buyer cannot read proves nothing -- so each card clears the one behind it by a title block. */
/* the hero board: taped cards that peel off and get replaced. See homePage() for the reasoning. */
.stack{position:relative;height:360px;margin-top:-8px}
.stack .slot{position:absolute;left:var(--x);top:var(--y);width:212px;height:212px}
.stack .pin{position:absolute;left:0;top:0;width:100%;display:block;text-decoration:none;
  transform:rotate(var(--r));transform-origin:50% -4%;
  opacity:0;visibility:hidden;pointer-events:none}
.stack .pin.is-on{opacity:1;visibility:visible;pointer-events:auto}
.stack .pin img{width:100%;height:auto;display:block;border-radius:11px;border:5px solid var(--ink);
  box-shadow:0 10px 22px rgba(0,0,0,.26);background:#fff}
/* the product name, for the pointer and for a screen reader. Never visible at rest: the covers
 * carry their own titles and a caption under each one turns the board into a table. */
.stack .pname{position:absolute;left:-9999px}
.stack .pin.is-on:hover img,.stack .pin.is-on:focus-visible img{box-shadow:0 14px 30px rgba(0,0,0,.34)}
/* the peeling card sits ABOVE the one arriving, so the move reads as a hand lifting one off a
 * board and the new one being revealed under it. Fading them into each other at equal z looked
 * like a crossfade with two ghosted covers, which is what a slideshow does. */
.stack .pin.is-peel{animation:peel .68s cubic-bezier(.42,0,.72,.32) forwards;z-index:6}
.stack .pin.is-stick{animation:stick .54s cubic-bezier(.22,1.32,.5,1) both;z-index:5}
@keyframes peel{
  0%{opacity:1;transform:rotate(var(--r)) translate3d(0,0,0) scale(1)}
  30%{opacity:1;transform:rotate(calc(var(--r) + 6deg)) translate3d(3px,-9px,0) scale(1.015)}
  64%{opacity:1}
  100%{opacity:0;transform:rotate(calc(var(--r) + 27deg)) translate3d(34px,72px,0) scale(.9)}
}
@keyframes stick{
  0%{opacity:0;transform:rotate(calc(var(--r) - 11deg)) translate3d(0,-36px,0) scale(1.07)}
  52%{opacity:1}
  72%{transform:rotate(calc(var(--r) + 2.4deg)) translate3d(0,5px,0) scale(.995)}
  100%{opacity:1;transform:rotate(var(--r)) translate3d(0,0,0) scale(1)}
}
.tape{position:absolute;left:50%;top:-13px;margin-left:-52px;width:104px;height:28px;
  background:rgba(255,255,255,.66);border-left:2px dashed rgba(0,0,0,.14);
  border-right:2px dashed rgba(0,0,0,.14);box-shadow:0 2px 5px rgba(0,0,0,.16);
  transform:rotate(-7deg);z-index:4}
.slot:nth-of-type(2) .tape{transform:rotate(5deg)}

/* Two-column editorial row: prose on one side, an OBJECT on the other. Exists because a 66ch
 * paragraph centred in a 1400px band leaves ~350px of dead ground on each side; measured on seven
 * sections across three pages before this was written. The paragraph keeps its reading width,
 * the row is what fills the band. */
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
.split.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.split.even{grid-template-columns:1fr 1fr;align-items:center}
.split>*{min-width:0}
.split .tiles{grid-template-columns:1fr}
.split h2{margin-bottom:18px}
.split .sub{margin-bottom:22px}
.stack.mini{height:330px;margin-top:0}
.stack.mini .scrib{left:auto;right:6px;bottom:0}
/* the caption is ink; on an ink ground that is black on black, which the first render proved */
.s-ink .stack .scrib{color:var(--sun)}
.s-berry .stack .scrib,.s-teal .stack .scrib{color:#fff}
/* a roster tile that is 500px wide, not 214, can afford body-size role text */
.split .tile span{font-size:15px;line-height:1.5}
.split .tile b{font-size:17px}
/* the expect list as four cards across the band, instead of a list down a narrow column */
.ticks.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:0 0 32px}
.ticks.cards li{max-width:none;background:var(--paper);color:var(--ink);border:4px solid var(--ink);
  border-radius:14px;padding:20px 20px 20px 58px;box-shadow:0 7px 0 rgba(0,0,0,.35);
  font-size:16px;line-height:1.45}
.ticks.cards li::before{left:19px;top:21px}
.ticks.cards li::after{left:26px;top:26px}
.stack .scrib{position:absolute;left:4px;bottom:-4px;transform:rotate(-3deg);color:var(--ink)}

/* buttons: hard shadow, no gradient, same object as a cover badge */
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 0}
.btn{display:inline-block;text-decoration:none;border-radius:10px;padding:14px 22px;
  font-variation-settings:"wght" 780;text-transform:uppercase;letter-spacing:.05em;font-size:14px;
  border:3px solid var(--ink);color:var(--ink);background:#fff;box-shadow:0 5px 0 var(--ink);
  transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--ink)}
.btn.primary{background:var(--tomato);color:#fff}
.btn.sun{background:var(--sun)}
.s-teal .btn,.s-berry .btn,.s-ink .btn{border-color:var(--ink);box-shadow:0 5px 0 rgba(0,0,0,.45)}
.s-teal .btn:hover,.s-berry .btn:hover,.s-ink .btn:hover{box-shadow:0 3px 0 rgba(0,0,0,.45)}

/* facts */
.facts{background:var(--teal);color:#fff;border-bottom:6px solid var(--ink)}
.facts .inner{display:grid;grid-template-columns:repeat(3,1fr);padding:0}
.facts div{padding:38px 30px;border-right:3px dashed rgba(255,255,255,.32)}
.facts div:last-child{border-right:0}
.facts b{display:block;font-variation-settings:"wdth" 74,"wght" 880;text-transform:uppercase;
  font-size:40px;line-height:.95;margin-bottom:8px}
.facts span{font-size:15.5px;color:#DFF3F1;display:block;max-width:30ch}

/* marquee of real covers */
.marquee{overflow:hidden;background:var(--paper);border-bottom:6px solid var(--ink);padding:20px 0}
.marquee .track{display:flex;gap:16px;width:max-content;animation:slide 60s linear infinite}
.marquee img{width:132px;height:132px;object-fit:cover;border-radius:10px;
  border:3px solid var(--ink);background:#fff}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* product cards: cream cards on a saturated ground, tilted like pinned work */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.card{background:var(--paper);border:4px solid var(--ink);border-radius:16px;overflow:hidden;
  text-decoration:none;color:var(--ink);display:block;box-shadow:0 9px 0 rgba(0,0,0,.22);
  transition:transform .12s}
.card:nth-child(odd){transform:rotate(-.7deg)}
.card:nth-child(even){transform:rotate(.6deg)}
.card:hover,.card:focus-visible{transform:rotate(0) translateY(-4px)}
.card .shot{display:block}
/* height:auto is LOAD BEARING. The img carries width="720" height="720" attributes for CLS, and
 * those map to presentational hints. width:100% overrides the width hint but the HEIGHT hint
 * survives, so without this the cover renders 272 wide by 720 tall: a square cover squeezed into a
 * tower with every letter on it distorted. aspect-ratio + object-fit keeps the row honest if a
 * non-square cover ever lands in the shelf. */
.card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;
  border-bottom:4px solid var(--ink)}
.cbody{display:block;padding:14px 15px 17px}
.chip{display:inline-block;background:var(--sun);border:2.5px solid var(--ink);border-radius:999px;
  padding:3px 10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  font-variation-settings:"wght" 800;margin-bottom:9px;color:var(--ink)}
.cname{display:block;font-variation-settings:"wdth" 84,"wght" 830;text-transform:uppercase;
  font-size:15px;line-height:1.14;margin-bottom:6px}
.cline{display:block;font-size:13.5px;color:var(--soft);line-height:1.4}

/* shelf lists */
.cols{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:start}
.col{margin-bottom:30px}
.col h3{margin-bottom:6px}
.col .note{font-size:14.5px;margin:0 0 14px;opacity:.85}
.shelves{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.shelves a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:999px;
  padding:7px 8px 7px 15px;font-size:14px;font-variation-settings:"wght" 640}
.shelves a:hover{background:var(--sun)}
.shelves a span{background:var(--ink);color:var(--sun);border-radius:999px;min-width:26px;
  text-align:center;padding:2px 7px;font-size:12px;font-variation-settings:"wght" 800}

/* resources tiles */
.axis{margin-bottom:52px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:16px}
/* a tile grid inside prose is followed by more prose, and with no bottom margin the next
 * paragraph butts straight into the bottom of the tiles. Caught by looking, not by the audit. */
.prose .tiles{margin-bottom:30px}
.steps + p{max-width:66ch;margin-top:26px}
/*
 * Fixed columns for a grid whose item count is KNOWN and small, so six areas land 3x3 rather
 * than auto-fill's 5 + one orphan on its own row. An orphan tile reads as a layout accident,
 * which is the same defect class as the 4+2 hole found by looking on 2026-08-23.
 */
/* eight expertise tiles beside a prose column: two-up, so the column is as tall as the prose
   and not a 1,700px stack next to 500px of text (the 08-25 layout audit's defect class) */
.tiles.two{grid-template-columns:1fr}
@media(min-width:700px){.tiles.two{grid-template-columns:repeat(2,1fr)}}
.split .tiles.two .tile span{font-size:14px}
.tiles.balanced{grid-template-columns:1fr}
@media(min-width:560px){.tiles.balanced{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.tiles.balanced{grid-template-columns:repeat(3,1fr)}}
.tile{display:block;text-decoration:none;background:var(--paper);color:var(--ink);
  border:4px solid var(--ink);border-radius:14px;padding:16px 17px;
  box-shadow:0 7px 0 rgba(0,0,0,.2);transition:transform .12s}
.tile:hover{transform:translateY(-3px)}
.tile b{display:block;font-variation-settings:"wdth" 82,"wght" 820;text-transform:uppercase;
  font-size:15px;line-height:1.15;margin-bottom:7px}
.tile span{font-size:13px;color:var(--soft)}
/* Region sits on its own line. Run inline it dangled after a wrapped sentence and read as debris. */
.tile .where{display:block;margin-top:6px;font-size:12px;letter-spacing:.02em}

/* practice areas: the disciplines the studio works across. Wider than a tile because
   each one carries a line of prose, and the count sits on a sun chip so the number
   reads as evidence rather than decoration. */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px}
.area{display:block;text-decoration:none;background:var(--paper);color:var(--ink);
  border:4px solid var(--ink);border-radius:16px;padding:19px 20px 20px;
  box-shadow:0 8px 0 rgba(0,0,0,.2);transition:transform .12s}
.area:hover,.area:focus-visible{transform:translateY(-4px)}
.area .ct{display:inline-block;background:var(--sun);border:2.5px solid var(--ink);
  border-radius:999px;padding:2px 11px;font-size:12.5px;font-weight:700;margin-bottom:10px}
.area b{display:block;font-variation-settings:"wdth" 80,"wght" 850;text-transform:uppercase;
  font-size:17px;line-height:1.14;margin-bottom:8px}
.area span.ln{display:block;font-size:14.5px;line-height:1.45;color:var(--soft)}

/* interior page header */
.pagehead{background:var(--sun);border-bottom:6px solid var(--ink);padding:52px 0 56px}
.pagehead .lede{color:#2B2A24;margin-top:20px}

/* prose */
.prose h2{font-size:clamp(24px,3vw,34px);margin:1.6em 0 .5em}
.prose > h2:first-child,.legal > h2:first-child{margin-top:0}
.prose p{max-width:66ch}
.ticks{list-style:none;padding:0;margin:0 0 1.4em;display:grid;gap:10px}
/* numbered steps: the number is the object, drawn as a cover badge rather than a list marker */
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.steps li{counter-increment:s;position:relative;background:#fff;border:4px solid var(--ink);
  border-radius:14px;padding:22px 20px 20px 22px;box-shadow:0 7px 0 rgba(0,0,0,.2)}
.steps li::before{content:counter(s);position:absolute;top:-17px;left:18px;width:34px;height:34px;
  background:var(--sun);border:3px solid var(--ink);border-radius:999px;display:grid;
  place-items:center;font-variation-settings:"wght" 850;font-size:15px;color:var(--ink)}
.steps b{display:block;text-transform:uppercase;font-variation-settings:"wdth" 84,"wght" 830;
  font-size:16px;line-height:1.14;margin:6px 0 7px;color:var(--ink)}
.steps span{display:block;font-size:15px;line-height:1.45;color:var(--soft)}
.ticks li{position:relative;padding-left:34px;max-width:64ch}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;
  border-radius:6px;background:var(--sun);border:2.5px solid var(--ink)}
.ticks li::after{content:"";position:absolute;left:7px;top:7px;width:8px;height:4px;
  border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(-45deg)}

/* email capture (built, and off until the site leaves GitHub Pages) */
.capture .plate{max-width:640px}
.signup{margin-top:18px}
.signup label{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.1em;
  font-variation-settings:"wght" 720;margin-bottom:8px}
.signup .row{display:flex;gap:10px;flex-wrap:wrap}
.signup input{flex:1 1 260px;padding:13px 15px;border:3px solid var(--ink);border-radius:10px;
  font:inherit;background:#fff;color:var(--ink)}
.signup button{padding:13px 22px;border:3px solid var(--ink);border-radius:10px;background:var(--sun);
  color:var(--ink);font:inherit;font-variation-settings:"wght" 800;text-transform:uppercase;
  letter-spacing:.05em;font-size:14px;cursor:pointer;box-shadow:0 5px 0 var(--ink)}
.signup button:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--ink)}
.fine{font-size:13.5px;margin-top:12px;opacity:.85}

/* legal pages stay quiet: a policy is read, not scanned */
.legal{background:var(--paper)}
.legal h2{font-size:22px;margin:2.1em 0 .45em}
.legal .updated{font-size:14px;color:var(--soft);margin:0 0 2.2em}
.legal ul{padding-left:20px}
.legal li{margin-bottom:.6em;color:var(--soft);max-width:66ch}
.legal li strong{color:var(--ink)}
.legal p{max-width:66ch}

/* ── responsive ─────────────────────────────────────────────────────────────── */
@media(max-width:960px){
  /* the desktop gutter is 44px so the page sits wide on a laptop; it has to step back down or a
   * 390px phone spends a quarter of its width on margin */
  .inner{padding:0 30px}
  .split,.split.rev,.split.even{grid-template-columns:1fr;gap:34px}
  .hero .inner{grid-template-columns:1fr}
  .stack{display:none}
  .grid{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:1fr}
  .facts .inner{grid-template-columns:1fr}
  .facts div{border-right:0;border-bottom:3px dashed rgba(255,255,255,.32)}
  .facts div:last-child{border-bottom:0}
}
@media(max-width:700px){
  .inner{padding:0 20px}
  /* a fixed bar height clipped the three-line brand at 390px, caught by the mobile look step */
  .topbar .inner{padding-top:12px;padding-bottom:12px;gap:6px 18px}
  .wm{font-size:17px;white-space:normal}
  .topbar nav{margin-left:0;gap:16px;font-size:13.5px}
  .band{height:64px}
  .divider i{height:54px}
  .sec{padding:46px 0 52px}
  .grid{grid-template-columns:1fr}
  .strip{letter-spacing:.14em;font-size:11px}
}

/* ── guides, freebies, FAQ ────────────────────────────────────────────────── */
/* The article column is the one place on this site with long prose, so it gets a real
   measure. Never past 66ch: a wider line loses the reader's return sweep, and that was
   already learned the expensive way on the v2 layout. */
.article{max-width:66ch}
.article h2{margin:2.2rem 0 .6rem;font-size:1.5rem;line-height:1.15}
.article h3{margin:1.6rem 0 .4rem;font-size:1.15rem}
.article p{margin:0 0 1rem;line-height:1.7}
.article ul,.article ol{margin:0 0 1.2rem;padding-left:1.2rem;line-height:1.7}
.article li{margin:.35rem 0}
.article img{display:block;width:100%;height:auto;border-radius:14px;margin:1.4rem 0;border:3px solid var(--ink)}
.article blockquote{margin:1.4rem 0;padding:.2rem 0 .2rem 1rem;border-left:5px solid var(--sun)}
.article a{color:var(--ink);text-underline-offset:3px}

.hero-lite{padding:3.2rem 0 2.6rem}
.hero-lite h1{margin:.3rem 0 .6rem;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.04}
.lede{font-size:1.1rem;line-height:1.55;max-width:60ch;margin:0 0 .8rem}
.kicker{font:700 .74rem/1 Archivo,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin:0}

.gcards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.gcard{display:block;padding:1.15rem 1.2rem;border:3px solid var(--ink);border-radius:16px;
  background:var(--chalk);color:var(--ink);text-decoration:none;box-shadow:5px 5px 0 var(--ink)}
.gcard h3{margin:0 0 .35rem;font-size:1.08rem;line-height:1.2}
.gcard p{margin:0 0 .6rem;font-size:.93rem;line-height:1.45;color:var(--soft)}
.gcard .more{font:700 .8rem/1 Archivo,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.gcard:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}

.freebs{display:flex;flex-wrap:wrap;gap:.55rem}
.freeb{display:inline-block;padding:.55rem .9rem;border:3px solid var(--ink);border-radius:999px;
  background:var(--chalk);color:var(--ink);text-decoration:none;font-weight:700;font-size:.92rem;
  box-shadow:3px 3px 0 var(--ink)}
.freeb:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}

.grab .plate{padding:1.6rem}
.faq{margin:0}
.faq dt{font-weight:800;margin:1.1rem 0 .3rem;font-size:1.02rem}
.faq dd{margin:0;line-height:1.65;color:var(--soft)}
.plainlist{margin:0;padding-left:1.1rem;line-height:1.9}