:root {
  --bg: #120e0e;
  --bg-2: #1a1412;
  --ink: #f4ead6;
  --muted: #c4b49a;
  --gold: #dab26b;
  --gold-2: #f0d59a;
  --line: rgba(218, 178, 107, 0.28);
  --danger: #c45c4a;
  --max: 72rem;
  --col: 42rem;       /* prose measure: ~78 CPL at 18px Georgia (sitewide since 2026-09-03; was 38rem) */
  --col-wide: 56rem;  /* code blocks, tables, embeds, footer (was 46rem) */
  --pad: clamp(1.1rem, 4vw, 2.4rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
  font: 18px/1.55 Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-2); }
a:hover { color: #fff; }

.skip {
  position: absolute;
  left: -999px;
  top: 0;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 20;
  background: var(--gold);
  color: #120e0e;
  padding: 0.4rem 0.7rem;
}

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem max(var(--pad), calc((100% - var(--max)) / 2));
  background: rgba(18, 14, 14, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.brand {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--gold-2);
  text-decoration: none;
}
.brand span { display: block; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.watch {
  background: var(--gold);
  color: #120e0e;
  text-decoration: none;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font: 600 0.85rem/1.1 system-ui, sans-serif;
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  padding: 0.7rem max(var(--pad), calc((100% - var(--max)) / 2)) 0.9rem;
  border-bottom: 1px solid var(--line);
  font: 600 0.78rem/1 system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="true"] { color: var(--gold-2); }

.hero {
  padding: 3.2rem var(--pad) 2.4rem;
  max-width: calc(var(--col-wide) + 2 * var(--pad));
  margin: 0 auto;
}
.eyebrow {
  color: var(--gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font: 600 0.72rem/1.3 system-ui, sans-serif;
  margin: 0 0 0.7rem;
}
h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(2.3rem, 7vw, 4.4rem); margin: 0 0 0.8rem; text-wrap: balance; }
h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin: 0 0 0.7rem; text-wrap: balance; }
h3 { font-size: 1.25rem; margin: 1.4rem 0 0.4rem; color: var(--gold-2); }
.lede { font-size: 1.15rem; color: var(--muted); max-width: var(--col); }

.bleed {
  width: 100%;
  max-width: calc(var(--max) - 2 * var(--pad));
  margin: 0 auto;
  background: #000;
}
.bleed img { width: 100%; max-height: 78vh; aspect-ratio: 16 / 9; object-fit: cover; }
.cap {
  max-width: var(--col-wide);
  margin: 0 auto;
  padding: 0.7rem var(--pad) 0;
  color: var(--muted);
  font: 0.85rem/1.4 system-ui, sans-serif;
}

.sec {
  padding: 3.4rem 0 2.2rem;
  border-top: 1px solid var(--line);
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.prose { max-width: var(--col); margin-inline: auto; color: var(--ink); }
.prose p { color: var(--muted); }
.rule {
  font-style: italic;
  color: var(--gold-2);
  font-size: 1.25rem;
  border-left: 3px solid var(--gold);
  padding-left: 1rem;
}

.grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.4rem;
}
.cams { grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .cams { grid-template-columns: repeat(2, 1fr); }
  .five { grid-template-columns: repeat(6, 1fr); }
  .five article:first-child { grid-column: span 2; }
  .five article:nth-child(2) { grid-column: span 2; }
  .five article:nth-child(3) { grid-column: span 2; }
  .five article:nth-child(4) { grid-column: 2 / span 2; }
  .five article:nth-child(5) { grid-column: 4 / span 2; }
}
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.card figcaption, .card p {
  margin: 0;
  padding: 0.75rem 0.9rem 1rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.card strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 0.25rem; }

.goods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
  margin: 1.5rem 0;
}
@media (min-width: 800px) { .goods { grid-template-columns: repeat(4, 1fr); } }
.goods article {
  margin: 0;
  background: #161010;
  border: 1px solid var(--line);
  overflow: hidden;
}
.goods img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #0b0808;
  display: block;
}
.goods p {
  margin: 0;
  padding: 0.5rem 0.65rem 0.7rem;
  font: 0.78rem/1.3 system-ui, sans-serif;
  color: var(--muted);
}
.goods strong { display: block; color: var(--ink); font-size: 0.88rem; margin-bottom: 0.15rem; }

.shot { margin: 1.5rem 0; }
.shot img { width: 100%; display: block; border: 1px solid var(--line); background: #0b0808; }
.shot-pair {
  display: grid;
  gap: 0.7rem;
  margin: 1.5rem 0;
}
@media (min-width: 800px) { .shot-pair { grid-template-columns: 1fr 1fr; } }
.shot-pair figure { margin: 0; }
.shot-pair img { width: 100%; display: block; border: 1px solid var(--line); background: #0b0808; }

.decal-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 1.5rem 0;
  padding: 0.7rem;
  border: 1px solid var(--line);
  background:
    repeating-conic-gradient(#241818 0% 25%, #0b0808 0% 50%)
    0 0 / 14px 14px;
}
@media (min-width: 800px) { .decal-board { grid-template-columns: repeat(5, 1fr); } }
.decal-board figure { margin: 0; background: transparent; }
.decal-board img { width: 100%; height: auto; display: block; }
.decal-board figcaption {
  padding: 0.35rem 0.1rem 0;
  font: 0.68rem/1.2 system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
}

.live-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
@media (min-width: 800px) { .live-strip { grid-template-columns: repeat(4, 1fr); } }
.live-strip figure { margin: 0; background: #000; }
.live-strip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.live-strip figcaption {
  padding: 0.4rem 0.5rem 0.6rem;
  font: 0.72rem/1.2 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}

.flow {
  display: grid;
  gap: 0.6rem;
  margin: 1.4rem 0;
}
.flow div {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 0.85rem 1rem;
}
.flow strong { color: var(--gold-2); display: block; }

.slider {
  position: relative;
  overflow: hidden;
  background: #000;
  max-height: min(78vh, 40rem);
}
.slider > img,
.slider .after img {
  width: 100%;
  max-height: min(78vh, 40rem);
  object-fit: cover;
  object-position: center top;
  display: block;
}
.slider .after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  overflow: hidden;
  border-right: 2px solid var(--gold);
}
.slider .after img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
.slider input[type="range"] {
  position: absolute;
  inset: auto 0 0.8rem 0;
  width: calc(100% - 2rem);
  margin: 0 1rem;
}

.sheet { display: grid; gap: 0.8rem; }
@media (min-width: 800px) { .sheet { grid-template-columns: 1fr 1fr; } }

.beats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
@media (min-width: 900px) { .beats { grid-template-columns: repeat(4, 1fr); } }
.beats figure { margin: 0; background: #000; }
.beats img { width: 100%; aspect-ratio: 9/16; object-fit: cover; }
.beats figcaption {
  padding: 0.5rem 0.6rem 0.7rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.decree {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--gold-2);
  margin: 0.4rem 0 1rem;
}

.yt {
  position: relative;
  background: #000;
}
.yt button {
  appearance: none;
  border: 0;
  padding: 0;
  width: 100%;
  background: #000;
  cursor: pointer;
  color: inherit;
}
.yt img { width: 100%; }
.yt span {
  position: absolute;
  inset: auto auto 1rem 1rem;
  background: var(--gold);
  color: #120e0e;
  padding: 0.45rem 0.7rem;
  font: 600 0.85rem/1 system-ui, sans-serif;
}

.slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
@media (min-width: 720px) { .slots { grid-template-columns: repeat(4, 1fr); } }
.slots div {
  border: 1px solid var(--line);
  padding: 1rem 0.8rem;
  text-align: center;
  background: var(--bg-2);
}
.slots b { display: block; font-size: 1.4rem; color: var(--gold-2); }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
@media (min-width: 800px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats div {
  padding: 1.1rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.stats b { display: block; font-size: 1.7rem; color: var(--gold-2); }
.stats span { color: var(--muted); font: 0.8rem/1.3 system-ui, sans-serif; }

.mock {
  display: grid;
  gap: 0.7rem;
}
@media (min-width: 800px) { .mock { grid-template-columns: repeat(3, 1fr); } }
.mock article {
  min-height: 9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  background: #161010;
}
.mock .ok { color: #8fcaa0; font: 600 0.75rem/1 system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.mock .no { color: #d7a07a; font: 600 0.75rem/1 system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.mock p { color: var(--muted); margin: 0.45rem 0 0; }

.lessons { list-style: none; padding: 0; margin: 1rem 0 0; }
.lessons li {
  border-top: 1px solid var(--line);
  padding: 1rem 0;
  color: var(--muted);
}
.lessons strong { color: var(--ink); display: block; margin-bottom: 0.25rem; }

.stage {
  width: 100%;
  background: #0b0808;
}
.stage svg { width: 100%; height: auto; display: block; }

.foot {
  padding: 2.4rem var(--pad) 3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.95rem;
}
.foot .wrap { display: grid; gap: 0.6rem; }
.foot a { color: var(--gold-2); }

.cache-note {
  margin: 0;
  padding: 0.7rem var(--pad);
  background: #2a1c12;
  color: var(--gold-2);
  font: 0.9rem/1.4 system-ui, sans-serif;
  border-bottom: 1px solid var(--line);
}

.faq { display: grid; gap: 1.4rem; max-width: 42rem; }
.faq article {
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
}
.faq h2 { font-size: 1.45rem; margin: 0 0 0.4rem; }
.faq p { color: var(--muted); margin: 0; }

.suggest-form {
  display: grid;
  gap: 1rem;
  max-width: 36rem;
  margin: 0 0 2.4rem;
}
.suggest-form label {
  display: grid;
  gap: 0.35rem;
  color: var(--gold-2);
  font: 600 0.8rem/1.2 system-ui, sans-serif;
  letter-spacing: 0.04em;
}
.suggest-form input,
.suggest-form select,
.suggest-form textarea {
  width: 100%;
  background: #0b0808;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 0.7rem 0.8rem;
  font: 1rem/1.4 Georgia, serif;
}
.suggest-form button {
  appearance: none;
  border: 0;
  background: var(--gold);
  color: #120e0e;
  padding: 0.75rem 1rem;
  font: 600 0.95rem/1 system-ui, sans-serif;
  cursor: pointer;
  justify-self: start;
}
.suggest-form .hp { position: absolute; left: -9999px; }
.form-status { color: var(--gold-2); min-height: 1.2em; }

.wall { display: grid; gap: 0.8rem; }
.wall article {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 0.9rem 1rem;
}
.wall .who { color: var(--gold); font: 600 0.72rem/1.2 system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.wall p { margin: 0.35rem 0 0; color: var(--muted); }

.examples .card p a { display: inline-block; margin-top: 0.35rem; }

.steps {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  max-width: 42rem;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 1.1rem 0 1.1rem 3.2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--gold);
  color: var(--gold-2);
  display: grid;
  place-items: center;
  font: 600 0.85rem/1 Georgia, serif;
}
.steps strong { display: block; color: var(--ink); margin-bottom: 0.25rem; }

.proof {
  margin: 1.4rem 0 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  background: var(--bg-2);
  max-width: 42rem;
}
.proof b { color: var(--gold-2); display: block; margin-bottom: 0.35rem; font: 600 0.75rem/1.2 system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; }
.proof p { margin: 0; color: var(--muted); }

.kit {
  width: 100%;
  max-width: 46rem;
  border-collapse: collapse;
  margin: 1.3rem 0 0;
  font: 0.95rem/1.45 system-ui, sans-serif;
}
.kit caption {
  caption-side: top;
  text-align: left;
  color: var(--gold-2);
  font: 600 0.75rem/1.2 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.kit th, .kit td {
  text-align: left;
  padding: 0.7rem 0.75rem 0.7rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.kit th {
  color: var(--gold-2);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.kit td:first-child { color: var(--ink); font-weight: 600; width: 42%; }
.kit td:last-child { color: var(--muted); }

/* ---- expansion 2026-09: code blocks, sidebar rail, dormant ad slots ---- */
.code { margin: 1.3rem 0 0; max-width: 46rem; border: 1px solid var(--line); background: #0b0808; }
.code figcaption {
  padding: 0.5rem 0.8rem;
  color: var(--gold-2);
  font: 600 0.72rem/1.2 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.code pre { margin: 0; padding: 0.9rem 1rem; overflow-x: auto; }
.code code, .prose code {
  font: 0.86rem/1.5 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  color: var(--ink);
}
.prose code { background: #0b0808; padding: 0.05rem 0.35rem; border: 1px solid var(--line); overflow-wrap: anywhere; }
.code pre code, .prose .code pre code { background: none; border: 0; padding: 0; white-space: pre; overflow-wrap: normal; }

/* sidebar rail: single column until 1100px, then main + 300px rail (only when the rail is filled) */
.wrap--rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.main-col { min-width: 0; width: 100%; max-width: var(--col-wide); margin-inline: auto; }
@media (min-width: 1100px) {
  .wrap--rail:has(.rail .ad-slot:not(:empty)) { grid-template-columns: minmax(0, 1fr) 300px; }
  .rail { position: sticky; top: 5rem; align-self: start; }
}
.rail:empty, .rail:not(:has(.ad-slot:not(:empty))) { display: none; }

/* dormant ad slots: reserved footprint (standard unit sizes) so a later fill never shifts the article.
   No ad script here; the boxes are intentionally invisible while empty. */
.ad-slot { display: block; box-sizing: content-box; margin-inline: auto; }
.ad-slot--top, .ad-slot--incontent { width: 100%; max-width: 728px; min-height: 90px; margin: 1.6rem auto; }
.ad-slot--top { margin: 1.2rem auto 0; }
@media (max-width: 767px) { .ad-slot--top, .ad-slot--incontent { max-width: 320px; min-height: 100px; } }
.ad-slot--rail { width: 300px; max-width: 100%; min-height: 250px; }
.rail .ad-slot--rail:empty { display: none; }
.ad-slot > * { max-width: 100%; }

/* ---- layout pass 2026-09-03: centred reading column, fitment, pictures ----
   Additive. Class names unchanged. Text blocks sit in a centred column (--col for prose,
   --col-wide for code/tables/steps); wide media (card grids, live strip, stage, slider) keep
   the full --max wrap so the house look survives. */

/* section headings and text-ish blocks share the centred column */
.sec .wrap > h2,
.sec .wrap > h3,
.sec .wrap > p,
.sec .wrap > .decree,
.sec .wrap > .form-status,
.steps, .proof, .faq, .lessons, .wall, .flow, .suggest-form,
.sec .wrap > .kit, .sec .wrap > .code {
  max-width: var(--col-wide);
  margin-left: auto;
  margin-right: auto;
}
.sec .wrap > h2, .sec .wrap > h3, .sec .wrap > p, .sec .wrap > .decree,
.steps, .proof, .flow, .faq, .lessons, .wall, .suggest-form, .sec .wrap > .form-status { max-width: var(--col); }
.faq { margin-left: auto; margin-right: auto; }
.suggest-form { margin: 0 auto 2.4rem; }

/* deep pages: everything inside .main-col shares the column; code + tables may run wider than prose */
.main-col > .prose, .main-col > .proof, .main-col > .ad-slot { margin-left: auto; margin-right: auto; }
.main-col .proof { max-width: var(--col); }
.code, .kit { margin-left: auto; margin-right: auto; }
@media (min-width: 56rem) {
  .prose .code, .prose .kit {
    max-width: none;
    width: calc(100% + (var(--col-wide) - var(--col)));
    margin-left: calc((var(--col-wide) - var(--col)) / -2);
  }
}

/* fitment: nothing may push the page sideways */
a, code, kbd { overflow-wrap: anywhere; }
p, li, td, th, dd, figcaption, summary { overflow-wrap: break-word; }
.nav a, .watch, .brand { overflow-wrap: normal; }
.code pre { max-width: 100%; overscroll-behavior-x: contain; scrollbar-width: thin; }
.kit { table-layout: auto; }
.kit th, .kit td { overflow-wrap: anywhere; }
.kit td:first-child { width: auto; min-width: 8rem; }
.grid, .live-strip, .beats, .sheet, .slots, .stats, .mock, .wall, .flow, .goods, .shot, .shot-pair, .decal-board { min-width: 0; }
.card, .card figcaption, .card p, .live-strip figure, .beats figure { min-width: 0; }
.stage, .slider, .yt { max-width: 100%; }
iframe, embed, object, canvas { max-width: 100%; }

/* pictures: responsive, no layout shift as they load */
img { max-width: 100%; height: auto; }
.card img, .live-strip img, .beats img { display: block; width: 100%; }
.yt img { aspect-ratio: 16 / 9; object-fit: cover; }
.slider > img, .slider .after img { aspect-ratio: 9 / 16; }
.card img { background: #000; }

/* rail: sticky under the header, never taller than the viewport */
.rail { max-height: calc(100vh - 6rem); overflow: auto; }

/* typography for long technical reading */
.prose p, .prose li { line-height: 1.6; }
.prose > p + p { margin-top: 0; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.3rem; color: var(--muted); }
.prose li + li { margin-top: 0.35rem; }
.code { margin-top: 1.3rem; margin-bottom: 1.3rem; }
.code pre { line-height: 1.55; }
.code code { color: #f7efe0; }
.kit { margin-bottom: 1.3rem; }

/* footer sits on the same centred column as the article */
.foot .wrap { max-width: var(--col-wide); }

/* very narrow screens: tighter gutters, smaller display type */
@media (max-width: 360px) {
  :root { --pad: 1rem; }
  body { font-size: 17px; }
  h1 { font-size: 2.1rem; }
}

/* ---- final pass 2026-09-03: YouTube embeds (additive; nothing above changed) ---- */
.embed { width: 100%; max-width: var(--col-wide); margin: 1.6rem auto; }
.embed .frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line);
  overflow: hidden;
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.embed figcaption { padding: 0.7rem 0 0; color: var(--muted); font: 0.85rem/1.4 system-ui, sans-serif; }
.embed--tall .frame { aspect-ratio: 9 / 16; max-width: 22rem; margin: 0 auto; }
@supports not (aspect-ratio: 16 / 9) {
  .embed .frame { height: 0; padding-top: 56.25%; }
  .embed--tall .frame { padding-top: 177.78%; }
}
/* inside a deep page's prose column, run as wide as code blocks do */
@media (min-width: 56rem) {
  .prose .embed {
    max-width: none;
    width: calc(100% + (var(--col-wide) - var(--col)));
    margin-left: calc((var(--col-wide) - var(--col)) / -2);
  }
}
/* homepage: sit on the same centred column as the section text */
.sec .wrap > .embed { max-width: var(--col-wide); margin-left: auto; margin-right: auto; }

/* ---- homepage pass 2026-09-03: fuller first viewport, wider measure. Scoped to body.home; additive.
   Article pages keep --col 38rem / --col-wide 46rem and the single-column hero. ---- */
.home { --col: 42rem; --col-wide: 56rem; }   /* ~78 CPL prose at 18px Georgia; tables/figures to 56rem */

/* hero: copy on the left, the live mosaic on the right, the six measured numbers across the bottom (from 1100px).
   Below 1100px it stacks: copy, numbers, stream. */
.home .hero { max-width: var(--max); padding: 2rem var(--pad) 2rem; }
.home .hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.1rem); margin-bottom: 0.8rem; }
.home .hero .lede { max-width: 48rem; font-size: 1.05rem; margin: 0 0 0.7rem; }   /* stacked: ~85 CPL cap; fills its column once the grid kicks in */
.home .hero .lede + .lede { margin-bottom: 0; }
.hero-copy { min-width: 0; }
.hero-media { max-width: none; margin: 1.6rem 0 0; min-width: 0; }
.hero-media figcaption { font-size: 0.82rem; }
@media (min-width: 1100px) {
  .home .hero {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 3rem;
    row-gap: 1.6rem;
    align-items: center;
  }
  .hero-copy { order: 1; }
  .home .hero .lede { max-width: none; }
  .hero-media { order: 2; margin: 0; }
  .keys { order: 3; grid-column: 1 / -1; margin-top: 0; }
}

/* key numbers: measured figures from the spec table, six tiles */
.keys {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
@media (min-width: 560px) { .keys { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .keys { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.keys li {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: 0.7rem 0.75rem 0.75rem;
  color: var(--muted);
  font: 0.78rem/1.3 system-ui, sans-serif;
}
.keys b {
  display: block;
  color: var(--gold-2);
  font: 500 1.45rem/1.1 Georgia, serif;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
  white-space: nowrap;
}
.keys span { display: block; }

/* 00 · the system: heading left, intro paragraph right (from 1100px), then the measured table as a full-width
   grid of cards from 800px (2 up), 3 up from 1100px */
.home #system .bleed { margin-top: 1.6rem; }
@media (min-width: 1100px) {
  .home #system .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 3rem; align-items: start; }
  .home #system .wrap > .eyebrow { grid-column: 1; margin-left: 0; margin-right: 0; }
  .home #system .wrap > h2 { grid-column: 1; margin-left: 0; margin-right: 0; max-width: none; }
  .home #system .wrap > .prose { grid-column: 2; grid-row: 1 / span 2; margin: 0.4rem 0 0; max-width: none; }
  .home #system .wrap > .prose p { margin: 0; }
  .home #system .wrap > .kit, .home #system .wrap > .bleed, .home #system .wrap > .proof { grid-column: 1 / -1; }
  .home #system .wrap > .proof { margin-left: auto; margin-right: auto; }
}
@media (min-width: 800px) {
  .home #system .kit { display: block; max-width: none; margin-left: 0; margin-right: 0; }
  .home #system .kit caption { display: block; }
  .home #system .kit thead { display: none; }
  .home #system .kit tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .home #system .kit tr { display: block; min-width: 0; border: 1px solid var(--line); background: var(--bg-2); padding: 0.9rem 1rem 1rem; }
  .home #system .kit td { display: block; border: 0; padding: 0; width: auto; min-width: 0; }
  .home #system .kit td:first-child {
    color: var(--gold-2);
    font: 600 0.72rem/1.2 system-ui, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
  }
}
@media (min-width: 1100px) {
  .home #system .kit tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 01 · what runs where: three cards side by side from 900px */
.where { display: grid; gap: 0.8rem; margin-top: 1.4rem; }
@media (min-width: 900px) { .where { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.where article { min-width: 0; border: 1px solid var(--line); background: var(--bg-2); padding: 0.9rem 1rem 1rem; }
.where b {
  display: block;
  color: var(--gold-2);
  font: 600 0.72rem/1.2 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.where p { margin: 0; color: var(--muted); }

/* 02 · the files, 13 · lessons: two columns of entries from 1000px */
@media (min-width: 1000px) {
  .home .lessons { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; row-gap: 0; }
  .home .lessons li { min-width: 0; }
}

/* ---- AI-visibility pass 2026-09-03: one recognisable treatment for the notes that say where a model did part of a
   step (gold rule), and where a person did all of it or no model is in the chain (muted rule). Additive. */
.ai-note { margin: 1.4rem 0 0; padding: 0.9rem 1.1rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--gold); background: var(--bg-2); max-width: var(--col); min-width: 0; }
.ai-note b { display: block; margin-bottom: 0.4rem; color: var(--gold-2); font: 600 0.72rem/1.2 system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.ai-note p { margin: 0; color: var(--muted); }
.ai-note p + p { margin-top: 0.6rem; }
.ai-note code, .ai-note a { overflow-wrap: anywhere; }
.ai-note--hand { border-left-color: var(--muted); }
.ai-note--hand b { color: var(--muted); }
.ai-note + .ai-note { margin-top: 0.8rem; }
.steps li > .ai-note { margin-top: 0.9rem; }
.sec .wrap > .ai-note, .main-col > .ai-note { margin-left: auto; margin-right: auto; }
.ai-li { border-left: 3px solid var(--gold); padding-left: 0.8rem; }
.ai-tag { display: block; margin-bottom: 0.3rem; color: var(--gold-2); font: 600 0.7rem/1.2 system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 360px) { .ai-note { padding: 0.8rem 0.85rem; } }

/* ---- sitewide pass 2026-09-03: article, hub and utility pages take the homepage's structure. Additive + corrective;
   no class renamed. Measure is now --col 42rem / --col-wide 56rem everywhere (:root). Hero: header.hero and the
   figure.bleed that follows it are wrapped in div.hero-band; from 1100px that is the homepage's 7/5 grid, copy left,
   picture right. Below 1100px it stacks exactly as it did. Two-column .kit tables become card grids from 800px
   (the homepage's #system treatment, minus the uppercase label so code-looking first cells stay legible).
   Lessons and FAQ entries run two-up from 1000px. Prose stays a single ~78 CPL measure; code, tables and embeds
   fill the 56rem column; nothing is stretched to the viewport. ---- */

/* hero type and rhythm: the same at every width as body.home */
.hero { padding: 2rem var(--pad) 2rem; }
.hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.1rem); margin-bottom: 0.8rem; }
.hero .lede { font-size: 1.05rem; max-width: 48rem; margin: 0 0 0.7rem; }
.hero .lede + .lede { margin-bottom: 0; }

/* hero band: header.hero + figure.bleed. Block below 1100px (unchanged stacking), 7/5 grid from 1100px. */
.hero-band { max-width: var(--max); margin: 0 auto; min-width: 0; }
@media (min-width: 1100px) {
  .hero-band {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 3rem;
    align-items: stretch;
    padding: 2rem var(--pad) 0.4rem;
  }
  .hero-band .hero { max-width: none; padding: 0; margin: 0; min-width: 0; align-self: center; }
  .hero-band .hero .lede { max-width: none; }
  .hero-band .bleed {
    max-width: none;
    width: 100%;
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: none;
  }
  .hero-band .bleed img {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 34rem;
    aspect-ratio: auto;
    object-fit: cover;
    background: #000;
  }
  .hero-band .cap { max-width: none; padding: 0.7rem 0 0; margin: 0; }
}

/* fixed widths that predate the variables now follow them */
.code, .kit { max-width: var(--col-wide); }
.steps, .proof, .faq { max-width: var(--col); }

/* deep pages: .main-col is the 56rem column. Text blocks sit centred at --col inside it; code, tables and embeds
   run the whole column. Replaces the negative-margin breakout for this context (no overflow maths). */
.main-col > .prose { max-width: none; }
.main-col .prose > :is(p, h2, h3, ul, ol, aside, a) { max-width: var(--col); margin-left: auto; margin-right: auto; }
.main-col .prose > p.cap { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.main-col .prose .code, .main-col .prose .kit,
.main-col .prose .goods, .main-col .prose .shot, .main-col .prose .shot-pair,
.main-col .prose .decal-board, .main-col .prose .stats, .main-col .prose .flow,
.main-col .prose .stage { width: auto; max-width: none; margin-left: 0; margin-right: 0; }
.main-col .prose .embed { width: 100%; max-width: none; margin-left: auto; margin-right: auto; }

/* hub pages keep the breakout for code/tables inside a centred .prose, but only once the wrap can hold 56rem */
@media (min-width: 56rem) and (max-width: 61rem) {
  .sec .wrap > .prose .code, .sec .wrap > .prose .kit { width: auto; max-width: none; margin-left: 0; margin-right: 0; }
  .sec .wrap > .prose .embed { width: 100%; margin-left: auto; margin-right: auto; }
}

/* two-column .kit tables as card grids from 800px: 2-up; 3-up from 1100px when they sit on the full wrap.
   Tables with three or more columns stay tables. Homepage excluded: its #system rules already do this. */
@media (min-width: 800px) {
  body:not(.home) .kit:not(:has(tr > :nth-child(3))) { display: block; }
  body:not(.home) .kit:not(:has(tr > :nth-child(3))) caption { display: block; }
  body:not(.home) .kit:not(:has(tr > :nth-child(3))) thead { display: none; }
  body:not(.home) .kit:not(:has(tr > :nth-child(3))) tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  body:not(.home) .kit:not(:has(tr > :nth-child(3))) tbody tr { display: block; min-width: 0; border: 1px solid var(--line); background: var(--bg-2); padding: 0.9rem 1rem 1rem; }
  body:not(.home) .kit:not(:has(tr > :nth-child(3))) td { display: block; border: 0; padding: 0; width: auto; min-width: 0; }
  body:not(.home) .kit:not(:has(tr > :nth-child(3))) td:first-child { color: var(--gold-2); font-weight: 600; font-size: 1rem; margin-bottom: 0.4rem; }
  body:not(.home) .sec .wrap > .kit:not(:has(tr > :nth-child(3))) { max-width: none; margin-left: 0; margin-right: 0; }
}
@media (min-width: 1100px) {
  body:not(.home) .sec .wrap > .kit:not(:has(tr > :nth-child(3))) tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* lessons and FAQ entries: two columns on the full wrap from 1000px (the homepage's .lessons treatment) */
@media (min-width: 1000px) {
  .sec .wrap > .lessons, .sec .wrap > .faq {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
    row-gap: 0;
  }
  .sec .wrap > .lessons li, .sec .wrap > .faq article { min-width: 0; }
  .sec .wrap > .faq { row-gap: 1.4rem; }
}

/* ---- sitewide nav v2 (2026-09-03): grouped sections, CSS-only <details> dropdowns, no JS ---- */
.nav { position: relative; overflow: visible; flex-wrap: wrap; row-gap: 0.55rem; align-items: center; }
.nav > a, .nav-group > summary { padding: 0.15rem 0; line-height: 1.2; }
.nav-group { position: static; }
.nav-group > summary {
  list-style: none; cursor: pointer; color: var(--muted); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.3rem; user-select: none;
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after {
  content: ""; width: 0.38em; height: 0.38em; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: translateY(-0.15em) rotate(45deg); transition: transform 0.15s; opacity: 0.8;
}
.nav-group[open] > summary::after { transform: translateY(0.1em) rotate(225deg); }
.nav-group > summary:hover, .nav-group[open] > summary, .nav-group > summary[aria-current="true"] { color: var(--gold-2); }
.nav-group > summary:focus-visible, .nav > a:focus-visible, .nav-panel a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.nav-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 12;
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line); border-top: 0;
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
  max-height: min(70vh, 30rem); overflow-y: auto;
  text-transform: none; letter-spacing: 0.01em; font: 500 0.95rem/1.35 system-ui, sans-serif;
}
.nav-panel a { display: block; padding: 0.55rem var(--pad); color: var(--ink); white-space: normal; border-top: 1px solid rgba(218,178,107,0.12); }
.nav-panel a:first-child { border-top: 0; }
.nav-panel a:hover { background: rgba(218,178,107,0.08); color: var(--gold-2); }
.nav-panel a[aria-current="page"] { color: var(--gold-2); }
.nav-panel a[aria-current="page"]::before { content: "\25B8\00a0"; }
.nav-panel a.nav-sub { padding-left: calc(var(--pad) + 1.1rem); color: var(--muted); }
.nav-panel a.nav-sub::before { content: "\2013\00a0"; opacity: 0.6; }
.nav-panel a.nav-sub[aria-current="page"]::before { content: "\25B8\00a0"; opacity: 1; }
@media (min-width: 720px) {
  .nav { flex-wrap: nowrap; }
  .nav-group { position: relative; }
  .nav-panel {
    left: -0.6rem; right: auto; top: calc(100% + 0.6rem); min-width: 17rem; max-width: min(24rem, calc(100vw - 2rem));
    border-top: 1px solid var(--line); border-radius: 4px; padding: 0.3rem 0;
  }
  .nav-panel a { padding: 0.5rem 1rem; }
  .nav-panel a.nav-sub { padding-left: 2rem; }
  .nav-group.nav-group--end .nav-panel { left: auto; right: -0.6rem; }
}
@media (min-width: 720px) and (max-width: 860px) {
  .nav { gap: 0.7rem; font-size: 0.72rem; letter-spacing: 0.04em; }
}

/* Shop workshop page — brighter read without changing the rest of the site */
body.page-shop {
  --bg: #1c1714;
  --bg-2: #262018;
  --ink: #faf3e6;
  --muted: #d4c4aa;
  --line: rgba(218, 178, 107, 0.34);
}
body.page-shop .top { background: rgba(28, 23, 20, 0.94); }
body.page-shop .bleed { background: #14100e; }
body.page-shop .goods article,
body.page-shop .shot img,
body.page-shop .shot-pair img,
body.page-shop .code,
body.page-shop .prose code { background: #14100e; }
body.page-shop .goods img { background: #1a1410; }
body.page-shop .decal-board {
  background:
    repeating-conic-gradient(#2c2220 0% 25%, #14100e 0% 50%)
    0 0 / 14px 14px;
}
body.page-shop .shot,
body.page-shop .shot-pair figure,
body.page-shop .goods article,
body.page-shop .flow-tile,
body.page-shop .stats > div {
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
body.page-shop .shot img,
body.page-shop .shot-pair img,
body.page-shop .goods img {
  transition: filter 320ms ease, transform 320ms ease;
}
body.page-shop .shot:hover img,
body.page-shop .shot-pair figure:hover img,
body.page-shop .goods article:hover img {
  filter: brightness(1.06);
}
body.page-shop .zone-map svg a { cursor: pointer; }
body.page-shop .zone-map svg a:hover rect { fill: #2a2018; }
body.page-shop .zone-section {
  margin: 2rem 0 1.5rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--line);
}
body.page-shop .zone-section h2 {
  font-size: 1.35rem;
  margin-bottom: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.65rem;
}
body.page-shop .zone-count {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.page-shop .zone-chips {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  padding: 0.35rem 0 0.75rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
body.page-shop .zone-chip {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0.65rem;
  align-items: center;
  min-width: 220px;
  max-width: 260px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #14100e;
  color: var(--ink);
  text-decoration: none;
  scroll-snap-align: start;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}
body.page-shop .zone-chip:hover {
  border-color: rgba(218, 178, 107, 0.65);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
body.page-shop .zone-chip img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 4px;
  background: #1a1410;
}
body.page-shop .zone-chip b {
  display: block;
  font-size: 0.9rem;
  color: var(--ink);
}
body.page-shop .zone-chip i {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  font-style: normal;
  margin-top: 0.12rem;
}
body.page-shop .catalog-fold {
  margin: 2.5rem auto 0;
  max-width: var(--wrap);
  padding: 0 1.25rem;
}
body.page-shop .catalog-fold summary {
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  color: var(--ink);
  padding: 0.75rem 0;
}
body.page-shop .catalog-table-wrap {
  overflow-x: auto;
  margin-top: 0.5rem;
}
body.page-shop .catalog-table { font-size: 0.82rem; min-width: 640px; }