/* ===========================================================
   BAKE YOUR WEBSITE
   Packaging lithography — four flat plates on uncoated stock.
   No gradients. No photographs. No soft shadows. Where two ink
   fields meet, they multiply, because that is what ink does.
   =========================================================== */

/* ── 1. The plates ────────────────────────────────────────── */

:root {
  /* The original Bake Your Website palette, values as shipped. */
  --espresso:    #2C1810;
  --amber:       #C8954A;   /* fills, borders, accents */
  --amber-text:  #866331;   /* the same hue, dark enough to read on cream */
  --amber-light: #E8B86D;
  --cream:       #FDF8F3;
  --cream-dark:  #F2E8DC;
  --white:       #FFFFFF;
  --border:      #E8D9CC;

  --text:        #1A0F0A;
  --text-mid:    #5C3D2E;
  --text-light:  #8A6A58;

  /* Per-surface roles. Every section reassigns these; nothing below hard-codes
     a colour, so a surface is re-skinned in one line. */
  --field:     var(--cream);
  --ink:       var(--text);
  --ink-soft:  var(--text-mid);
  --rule:      var(--border);
  --rule-2:    rgba(44, 24, 16, .08);
  --accent:    var(--amber);
  --heading:   var(--espresso);

  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --text-face: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: var(--text-face);

  /* Matching the original type scale. */
  --d1: clamp(2rem, 5vw, 3.25rem);
  --d2: clamp(1.6rem, 3.5vw, 2.4rem);
  --d3: clamp(1.3rem, 2.8vw, 1.9rem);
  --d4: clamp(1.1rem, 2.2vw, 1.35rem);

  --t0:  1.05rem;
  --t-1: .96rem;
  --t-2: .85rem;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 18px; --s5: 26px;
  --s6: 38px; --s7: 56px; --s8: 80px; --s9: 116px;
  --sheet-pad: clamp(56px, 8vw, 96px);
  --gutter: clamp(20px, 4.4vw, 40px);
  --measure: 1140px;
  --spine: clamp(26px, 5vw, 58px);

  --radius:    10px;
  --radius-lg: 18px;
  --shadow:    0 4px 24px rgba(44, 24, 16, .10);
  --shadow-lg: 0 8px 40px rgba(44, 24, 16, .15);

  --hair: 1px;
  --rule-w: 1px;
  --rule-heavy: 2px;
  --tooth: none;
}

/* ── 2. Reset ─────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  background: var(--espresso);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--text-face);
  font-size: var(--t0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* The surfaces we did not draw still carry the press. */
::selection { background: var(--amber); color: var(--espresso); }
::marker { color: currentColor; }

:focus-visible {
  outline: var(--rule-heavy) solid var(--accent);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: var(--cream-dark); }
::-webkit-scrollbar-thumb { background: var(--espresso); border: 3px solid var(--cream-dark); }
::-webkit-scrollbar-thumb:hover { background: var(--amber); }
html { scrollbar-color: var(--espresso) var(--cream-dark); scrollbar-width: thin; }

/* ── 3. Lettering ─────────────────────────────────────────── */

.d1, .d2, .d3, .d4,
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--heading);
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}
.d1, h1 { font-size: var(--d1); }
.d2, h2 { font-size: var(--d2); }
.d3, h3 { font-size: var(--d3); }
.d4, h4 { font-size: var(--d4); line-height: 1.3; }

p { text-wrap: pretty; max-width: 68ch; }
p + p { margin-top: 1em; }

a { color: var(--amber-text); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--espresso); text-decoration: underline; }

strong, b { font-weight: 700; color: var(--espresso); }

.lede {
  font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 54ch;
}

/* The original section label: small, letterspaced, amber. */
.label {
  font-family: var(--text-face);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--amber-text);
  line-height: 1.3;
}

/* ── 4. Sheets ────────────────────────────────────────────── */
/* A section is a sheet. The sheet names its plate; everything
   inside reads its roles from that. */

.sheet {
  position: relative;
  background: var(--field);
  color: var(--ink);
  padding-block: var(--sheet-pad);
}

.sheet[data-plate='cream'] {
  --field: var(--cream); --ink: var(--text); --ink-soft: var(--text-mid);
  --rule: var(--border); --rule-2: rgba(44,24,16,.07);
  --accent: var(--amber); --heading: var(--espresso);
}
.sheet[data-plate='cream-2'] {
  --field: var(--cream-dark); --ink: var(--text); --ink-soft: var(--text-mid);
  --rule: #E2D2C2; --rule-2: rgba(44,24,16,.09);
  --accent: var(--amber); --heading: var(--espresso);
}
.sheet[data-plate='espresso'] {
  --field: var(--espresso); --ink: #F3E9E0; --ink-soft: #C3AC9B;
  --rule: rgba(243,233,224,.2); --rule-2: rgba(243,233,224,.1);
  --accent: var(--amber-light); --heading: var(--white);
}
.sheet[data-plate='espresso'] a { color: var(--amber-light); }
.sheet[data-plate='espresso'] .label,
.sheet[data-plate='espresso'] .declaration dt { color: var(--amber-light); }
.sheet[data-plate='amber'] {
  --field: var(--amber); --ink: #2C1810; --ink-soft: #5C3D2E;
  --rule: rgba(44,24,16,.26); --rule-2: rgba(44,24,16,.14);
  --accent: var(--espresso); --heading: var(--espresso);
}

.sheet-tight { padding-block: clamp(34px, 5vw, 64px); }


/* ── 5. The spine ─────────────────────────────────────────── */
/* One continuous printed rule down the whole sheet, carrying the
   section's own name. It is the page's running head, not decoration. */

.bed {
  width: min(100% - (var(--gutter) * 2), var(--measure));
  margin-inline: auto;
}

.spine-bed {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}
@media (min-width: 900px) {
  .spine-bed {
    grid-template-columns: var(--spine) minmax(0, 1fr);
    gap: 0 var(--s6);
  }
  .spine {
    position: sticky;
    top: 92px;
    align-self: start;
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    height: 0;
  }
  .spine-mark {
    writing-mode: vertical-rl;
    font-family: var(--text-face);
    font-size: var(--t-2);
    font-weight: 650;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
  }
  .spine::before {
    content: '';
    width: var(--rule-w);
    height: 56px;
    background: var(--accent);
    flex: none;
  }
}
/* Below the two-column breakpoint the running head stays a spine: a rule down
   the sheet's edge, never a label sitting above the heading. A kicker is the
   one thing this page refuses outright, and a rotated word has nowhere to live
   at 390. The mark stays in the accessibility tree as the section's name. */
@media (max-width: 899px) {
  /* Out to the trim edge. `.bed` is a positioned ancestor, so left:0 would
     put the rule against the copy and read as a coloured left border. */
  .spine {
    position: absolute;
    left: calc(var(--gutter) * -1);
    top: 0; bottom: 0;
    width: var(--rule-w);
  }
  .spine::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--rule-w);
    background: var(--accent);
  }
  .spine-mark {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .sheet { overflow-x: clip; }
}

/* ── 6. Feature band ──────────────────────────────────────── */

.overprint {
  position: relative;
  background: var(--espresso);
  color: #F3E9E0;
  padding-block: clamp(44px, 6vw, 72px);
}
.overprint-band { display: none; }
.overprint > .bed { position: relative; }
.overprint-word {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--d2);
  line-height: 1.25;
  color: var(--white);
  max-width: 22ch;
}
.overprint-note {
  color: #C3AC9B;
  max-width: 50ch;
  margin-top: var(--s5);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ── 7. The declaration panel ─────────────────────────────── */
/* What a package actually carries: a label, a rule, a value.
   Nothing here is described without being specified. */

.declaration {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--s3) var(--s6);
}
.sheet[data-plate='espresso'] .declaration { background: rgba(255,255,255,.05); border-color: var(--rule); box-shadow: none; }
.declaration > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px var(--s5);
  padding-block: var(--s4);
  border-bottom: var(--hair) solid var(--rule);
}
.declaration > div:last-child { border-bottom: 0; }
@media (min-width: 640px) {
  .declaration > div { grid-template-columns: minmax(140px, 9.5rem) minmax(0, 1fr); align-items: baseline; }
}
.declaration dt {
  font-family: var(--text-face);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--amber-text);
}
.declaration dd {
  margin: 0;
  font-size: clamp(1.02rem, .96rem + .4vw, 1.3rem);
  line-height: 1.35;
  font-weight: 500;
}
.declaration dd b { font-weight: 700; }
.declaration-lg dd { font-size: clamp(1.12rem, 1rem + .7vw, 1.6rem); }

/* ── 8. Figures ───────────────────────────────────────────── */
/* The provenance raise: a measured figure prints solid, an expected
   one prints in outline. The page can never pass one off as the other. */

.fig {
  font-variant-numeric: tabular-nums lining-nums;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: .82;
  letter-spacing: -.028em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
  display: block;
}
.fig-est {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}
.fig-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  align-items: center;
  font-size: var(--t-2);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--ink-soft);
}
.fig-key span { display: inline-flex; align-items: center; gap: var(--s2); }
.fig-key i {
  width: 16px; height: 16px; flex: none; font-style: normal;
  background: var(--ink);
}
.fig-key i.outline { background: none; border: 2px solid var(--ink); }

/* A measured transformation: before, rule, after. One per row. */
.shift {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3) var(--s4);
}
.shift-from {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: .9;
  color: var(--ink-soft);
}
.shift-arrow { width: 34px; height: var(--rule-w); background: var(--accent); flex: none; align-self: center; }

/* ── 9. Items ─────────────────────────────────────────────── */
/* A specified item, full width, ruled. This replaces cards entirely:
   nothing on this site is a box of icon-plus-heading-plus-text. */

.items { border-top: var(--rule-heavy) solid var(--ink); }

.item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3) var(--s6);
  padding-block: var(--s6);
  border-bottom: var(--hair) solid var(--rule);
  text-decoration: none;
  color: inherit;
}
@media (min-width: 860px) {
  .items > .item {
    grid-template-columns: minmax(0, 7fr) minmax(0, 9fr) minmax(0, 5fr);
    align-items: start;
  }
}
.item-name { font-size: var(--d4); }
.item-body { color: var(--ink-soft); font-size: 1.01rem; line-height: 1.5; }
.item-body p { max-width: 54ch; }
.item-spec {
  font-family: var(--text-face);
  font-size: var(--t-2);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 650;
  line-height: 1.5;
}
.item-spec b { display: block; font-weight: 650; color: var(--ink); }
.item-spec span { color: var(--ink-soft); }

/* The row inverts, like a line struck in solid ink. Nothing moves, so
   nothing reflows. */
a.item { padding-inline: var(--s4); margin-inline: calc(var(--s4) * -1); transition: background .14s linear, color .14s linear; }
a.item:hover, a.item:focus-visible {
  background: var(--ink);
  color: var(--field);
}
a.item:hover .item-body, a.item:focus-visible .item-body,
a.item:hover .item-spec span, a.item:focus-visible .item-spec span { color: inherit; opacity: .78; }
a.item:hover .item-spec b, a.item:focus-visible .item-spec b { color: inherit; }

/* ── 10. Buttons ──────────────────────────────────────────── */

.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: 14px 30px;
  background: var(--amber);
  color: var(--espresso);
  border: 2px solid var(--amber);
  border-radius: var(--radius);
  font-family: var(--text-face);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.seal:hover, .seal:focus-visible {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--white);
  text-decoration: none;
}
.sheet[data-plate='espresso'] .seal { background: var(--amber); border-color: var(--amber); color: var(--espresso); }
.sheet[data-plate='espresso'] .seal:hover { background: var(--white); border-color: var(--white); color: var(--espresso); }

.stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 52px;
  padding: 14px 26px;
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  font-family: var(--text-face);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.stamp:hover, .stamp:focus-visible { background: var(--ink); color: var(--field); text-decoration: none; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

.roundel {
  display: grid;
  place-items: center;
  width: clamp(170px, 24vw, 220px);
  aspect-ratio: 1;
  flex: none;
  border: 2px solid var(--accent);
  border-radius: 50%;
  padding: var(--s5);
  text-align: center;
  background: var(--white);
  box-shadow: var(--shadow);
}
.roundel span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--espresso);
}
.roundel small {
  display: block;
  margin-top: var(--s2);
  font-family: var(--text-face);
  font-size: .82rem;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--text-mid);
}

/* ── 11. Masthead ─────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--espresso);
  color: var(--cream);
  border-bottom: var(--rule-w) solid var(--amber);
}
.masthead-bed {
  width: min(100% - (var(--gutter) * 2), var(--measure));
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  gap: var(--s5);
  min-height: 66px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
  text-decoration: none;
  color: var(--cream);
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.22rem;
  letter-spacing: -.005em;
  line-height: 1;
}
.wordmark svg { width: 27px; height: 27px; flex: none; }
.wordmark em { font-style: normal; color: var(--amber); }

.nav { display: none; margin-left: auto; align-items: stretch; }
@media (min-width: 1040px) { .nav { display: flex; } }
.nav > a, .nav-group > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 15px;
  font-family: var(--text-face);
  font-size: var(--t-2);
  font-weight: 650;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  border-bottom: var(--rule-heavy) solid transparent;
  transition: color .12s linear, border-color .12s linear;
}
.nav > a:hover, .nav-group > button:hover { color: var(--amber); }
.nav > a[aria-current='page'] { border-bottom-color: var(--amber); color: var(--amber); }
.nav-cta {
  display: inline-flex; align-items: center;
  margin-left: var(--s3);
  padding: 0 20px;
  background: var(--amber);
  color: var(--espresso) !important;
  font-family: var(--text-face);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .12s linear;
}
.nav-cta:hover { background: var(--amber); color: #FFFFFF !important; }

.nav-group { position: relative; display: flex; }
.nav-group > button svg { width: 11px; height: 11px; transition: transform .14s linear; }
.nav-group[data-open] > button svg { transform: rotate(180deg); }
.nav-menu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 330px;
  background: var(--espresso);
  border: var(--rule-w) solid var(--amber);
  border-top: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .12s linear, visibility .12s;
}
.nav-group[data-open] .nav-menu { opacity: 1; visibility: visible; }
.nav-menu a {
  display: grid;
  gap: 2px;
  padding: 13px 17px;
  border-bottom: var(--hair) solid rgba(232,230,222,.16);
  color: var(--cream);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.12rem;
  line-height: 1;
}
.nav-menu a:last-child { border-bottom: 0; }
.nav-menu a small {
  font-family: var(--text-face);
  font-size: var(--t-2);
  font-weight: 450;
  text-transform: none;
  letter-spacing: 0;
  color: #C3AC9B;
  line-height: 1.4;
}
.nav-menu a:hover { background: var(--amber); color: var(--espresso); }
.nav-menu a:hover small { color: #2C1810; }

.menu-btn {
  display: flex; align-items: center; gap: var(--s2);
  margin-left: auto;
  padding: 0 var(--s4);
  background: var(--amber);
  color: var(--espresso);
  font-family: var(--text-face);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
@media (min-width: 1040px) { .menu-btn { display: none; } }

.drawer {
  position: fixed;
  inset: 66px 0 0;
  z-index: 55;
  background: var(--espresso);
  color: var(--cream);
  overflow-y: auto;
  padding-bottom: var(--s9);
  display: none;
}
[data-menu-open] .drawer { display: block; }
@media (min-width: 1040px) { .drawer { display: none !important; } }
.drawer a {
  display: block;
  padding: 17px var(--gutter);
  border-bottom: var(--hair) solid rgba(232,230,222,.18);
  color: var(--cream);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.75rem;
  line-height: 1;
}
.drawer a.sub {
  font-size: 1.12rem;
  font-weight: 700;
  padding-left: calc(var(--gutter) + 20px);
  color: #C3AC9B;
}
.drawer a:hover { background: var(--amber); color: var(--espresso); }
.drawer .seal { margin: var(--s6) var(--gutter) 0; width: calc(100% - var(--gutter) * 2); }

/* ── 12. Opening sheet ────────────────────────────────────── */

.opener { padding-block: clamp(44px, 6.5vw, 86px) clamp(52px, 7vw, 96px); }
.opener .d1 { max-width: 13ch; }
.opener .crumbs + h1, .opener .crumbs + .d1 { margin-top: var(--s5); }
.opener h1 + .lede, .opener .d1 + .lede { margin-top: var(--s5); }
.opener .declaration { margin-top: clamp(32px, 4.5vw, 54px); }
.opener .actions { margin-top: clamp(30px, 4vw, 46px); }

@media (min-width: 1040px) {
  .opener-bed { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s8); align-items: start; }
  .opener .declaration { margin-top: 0; }
  /* An opener with nothing in its second column runs full width instead of
     leaving half a plate blank. */
  .opener-bed:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
}

/* ── 13. Prose ────────────────────────────────────────────── */

.prose { max-width: 70ch; font-size: 1.07rem; line-height: 1.68; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  margin-top: 1.9em;
  padding-top: var(--s5);
  border-top: var(--rule-heavy) solid var(--ink);
}
.prose h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-top: 1.7em; }
.prose h2 + *, .prose h3 + * { margin-top: .65em; }
.prose p { max-width: none; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .5em; }
.prose li::marker { color: var(--accent); font-weight: 700; }
.prose a { text-decoration: underline; text-decoration-color: var(--accent); }
.prose a:hover { background: var(--amber); color: var(--espresso); text-decoration-color: var(--espresso); }
.prose strong { font-weight: 700; }
.prose blockquote {
  margin-block: 1.6em;
  padding: var(--s5) 0 var(--s5) var(--s5);
  border-left: var(--rule-heavy) solid var(--accent);
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: .96;
}
.prose blockquote p { max-width: 26ch; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-1); margin-block: 1.6em; }
.prose th, .prose td { padding: 11px 13px; text-align: left; border-bottom: var(--hair) solid var(--rule); }
.prose th {
  font-family: var(--text-face);
  font-size: var(--t-2); font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  border-bottom: var(--rule-w) solid var(--ink);
}
.prose code {
  font-family: var(--text-face);
  font-weight: 650;
  background: var(--amber);
  color: var(--espresso);
  padding: 1px 5px;
}
.prose hr { margin-block: 2em; border: 0; border-top: var(--rule-w) solid var(--rule); }
.prose img { margin-block: 1.6em; }

/* Pull-out inside prose — a printed side panel, not a tinted box. */
.callout {
  border-top: var(--rule-heavy) solid var(--ink);
  border-bottom: var(--rule-w) solid var(--ink);
  padding-block: var(--s5);
  margin-block: 1.8em;
}
.callout > :first-child { margin-top: 0; }
.callout p { font-size: 1.02rem; }

/* Legacy guide markup, re-plated. */
.prose .stat-num {
  display: block;
  margin-bottom: var(--s2);
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: .84;
  letter-spacing: -.025em;
}
.prose .results-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0;
  margin-block: 1.6em;
  border-top: var(--rule-heavy) solid var(--ink);
}
.prose .result-card { padding-block: var(--s5); border-bottom: var(--hair) solid var(--rule); }
.prose .result-card p { font-size: var(--t-1); line-height: 1.55; margin-top: var(--s3); color: var(--ink-soft); }
.prose .result-metric {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: .92;
}
.prose .step-list { list-style: none; padding: 0; display: grid; gap: 0; margin-block: 1.6em; border-top: var(--rule-heavy) solid var(--ink); }
.prose .step-list > li {
  display: grid; grid-template-columns: 46px 1fr; gap: var(--s4);
  padding-block: var(--s5); border-bottom: var(--hair) solid var(--rule);
}
.prose .step-list > li::marker { content: none; }
.prose .step-num {
  font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1;
  color: var(--accent);
}
.prose .step-list h3 { margin-top: 0; }
.prose .step-list h3 + p { margin-top: .45em; }

/* ── 14. Article furniture ────────────────────────────────── */

.article-head { padding-block: clamp(34px, 5vw, 66px) var(--s6); }
.article-meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  margin-top: var(--s5);
  font-size: var(--t-2); font-weight: 650;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-soft);
}
.tag {
  display: inline-flex;
  padding: 5px 11px;
  background: var(--accent);
  color: var(--cream);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}

.toc { border-top: var(--rule-heavy) solid var(--ink); border-bottom: var(--rule-w) solid var(--ink); padding-block: var(--s5); }
.toc h2 {
  font-family: var(--text) !important;
  font-size: var(--t-2) !important;
  font-weight: 650 !important;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--s4) !important; padding: 0 !important; border: 0 !important;
}
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); counter-reset: toc; }
.toc li { counter-increment: toc; display: grid; grid-template-columns: 30px 1fr; gap: var(--s3); }
.toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-size: var(--t-2); font-weight: 650; color: var(--ink-soft);
  padding-top: 3px;
}
.toc a { text-decoration: none; font-weight: 550; }
.toc a:hover { background: var(--amber); color: var(--espresso); }

.crumbs { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: var(--t-2); font-weight: 650; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: 0; list-style: none; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs li + li::before { content: '/'; margin-right: var(--s2); opacity: .55; }

/* ── 15. Questions ────────────────────────────────────────── */

.qa { border-top: var(--rule-heavy) solid var(--ink); }
.qa details { border-bottom: var(--hair) solid var(--rule); }
.qa summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5);
  padding-block: var(--s5);
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  line-height: .96;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '';
  flex: none;
  width: 18px; height: var(--rule-w);
  margin-top: .55em;
  background: var(--accent);
  box-shadow: 0 0 0 0 transparent;
  transition: transform .16s linear;
}
.qa details:not([open]) summary::after {
  background:
    linear-gradient(var(--accent), var(--accent)) center / 100% var(--rule-w) no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / var(--rule-w) 18px no-repeat;
  height: 18px;
  margin-top: .3em;
}
.qa summary:hover { color: var(--accent); }
.qa-body { padding-bottom: var(--s6); max-width: 64ch; color: var(--ink-soft); }
.qa-body > * + * { margin-top: var(--s4); }
.qa-body a { text-decoration: underline; text-decoration-color: var(--accent); color: var(--ink); }

/* ── 16. Forms ────────────────────────────────────────────── */

.form { display: grid; gap: var(--s5); }
.field { display: grid; gap: var(--s2); }
.field > label {
  font-size: var(--t-2); font-weight: 650;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft);
}
.field > label .opt { font-weight: 450; letter-spacing: .06em; opacity: .75; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1.04rem;
  font-weight: 500;
  transition: background .12s linear, border-color .12s linear;
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(200, 149, 74, .22);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.field-row { display: grid; gap: var(--s5); }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-note { font-size: var(--t-1); color: var(--ink-soft); }

/* A direct line, printed as an item. */
.line {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
  padding-block: var(--s5);
  border-bottom: var(--hair) solid var(--rule);
  text-decoration: none;
  color: inherit;
}
.line:first-child { border-top: var(--rule-heavy) solid var(--ink); }
.line b { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: var(--d4); line-height: .94; }
.line span { color: var(--ink-soft); font-size: var(--t-1); max-width: 48ch; }
.line { padding-inline: var(--s4); margin-inline: calc(var(--s4) * -1); transition: background .14s linear, color .14s linear; }
.line:hover { background: var(--ink); color: var(--field); }
.line:hover span { color: inherit; opacity: .8; }

/* ── 17. Colophon ─────────────────────────────────────────── */

.colophon { background: var(--espresso); color: var(--cream); padding-block: var(--s8) var(--s6); }
.colophon a { color: #C3AC9B; text-decoration: none; }
.colophon a:hover { color: var(--amber); text-decoration: underline; }
.colophon-grid { display: grid; gap: var(--s7) var(--s6); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (min-width: 940px) { .colophon-grid { grid-template-columns: 2.2fr repeat(4, 1fr); } }
.colophon h2 {
  font-family: var(--text-face);
  font-size: var(--t-2);
  font-weight: 650;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--s4);
}
.colophon ul { list-style: none; padding: 0; display: grid; gap: var(--s3); font-size: var(--t-1); }
.colophon .wordmark { color: var(--cream); font-size: 1.3rem; }
.colophon p { color: #C3AC9B; font-size: var(--t-1); max-width: 34ch; margin-top: var(--s4); }
.colophon-base {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  justify-content: space-between;
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: var(--hair) solid rgba(232,230,222,.22);
  font-size: var(--t-2); letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
  color: #A8927F;
}

/* ── 18. Utilities ────────────────────────────────────────── */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute; top: 8px; left: 8px; z-index: 100;
  padding: 12px 18px; background: var(--amber); color: var(--espresso);
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: var(--t-2);
  transform: translateY(-180%);
}
.skip:focus { transform: none; }

.cols { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lead-split { display: grid; gap: var(--s6); }
@media (min-width: 980px) { .lead-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; } }

.stack > * + * { margin-top: var(--s5); }
.stack-tight > * + * { margin-top: var(--s3); }
.soft { color: var(--ink-soft); }
.mt4 { margin-top: var(--s4); }
.mt5 { margin-top: var(--s5); }
.mt6 { margin-top: var(--s6); }
.mt7 { margin-top: var(--s7); }

/* ── 19. Motion ───────────────────────────────────────────── */
/* One authored moment: the overprint slide. Everything else is
   already visible and stays visible. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .masthead, .colophon, .drawer, .menu-btn { display: none !important; }
  .sheet { background: #fff !important; color: #000 !important; }
}

/* ── 20. Sequences ────────────────────────────────────────── */
/* A numbered sequence, printed as a declaration. The numbers stay only
   where the order is real information — a seven-day build, a process in
   which step three cannot precede step two. */

.steps {
  border-top: var(--rule-heavy) solid var(--ink);
  counter-reset: step;
}
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: var(--s3) var(--s5);
  padding-block: var(--s5);
  border-bottom: var(--hair) solid var(--rule);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--text-face);
  font-size: var(--t-2);
  font-weight: 650;
  letter-spacing: .1em;
  color: var(--ink-soft);
  padding-top: .35em;
}
/* The number owns the first track; everything else belongs in the second.
   Without this, auto-placement drops the copy into a 2.6rem column and sets
   it two words to a line. */
.step::before { grid-column: 1; grid-row: 1; }
.step > * { grid-column: 2; }
.step h3 { font-size: var(--d4); }
.step p { color: var(--ink-soft); font-size: var(--t-1); line-height: 1.5; margin-top: var(--s3); max-width: 58ch; }

/* Figures sitting in a plain column, as on a spec sheet. */
.cols > div > .fig { margin-bottom: var(--s3); }
.cols > div > .item-spec { color: var(--ink-soft); }

/* A ruled section that also carries the running spine. */
@media (min-width: 980px) {
  .lead-split.spined {
    grid-template-columns: var(--spine) minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s6);
  }
}
@media (max-width: 979px) {
  .lead-split.spined > .spine { margin-bottom: calc(var(--s3) * -1); }
}

/* A spine can sit as the first child of any bed; everything else in that bed
   runs in the second column, so no wrapper element is needed. */
@media (min-width: 900px) {
  .spine-bed > :not(.spine) { grid-column: 2; }
}

/* A plan row the page recommends gets its own plate, not a label and a hope. */
.items > .item[data-featured] {
  background: var(--amber);
  color: var(--espresso);
  padding: var(--s6) var(--s5);
  margin-inline: calc(var(--s5) * -1);
  border-bottom-color: var(--espresso);
}
.item[data-featured] .item-body,
.item[data-featured] .item-spec,
.item[data-featured] li,
.item[data-featured] p { color: #5C3D2E; }
.item[data-featured] h3,
.item[data-featured] .item-name,
.item[data-featured] .item-spec b,
.item[data-featured] .item-spec strong { color: var(--espresso); }
.item[data-featured] .tag { background: var(--espresso); color: var(--amber); }
.item[data-featured] li::marker { color: var(--espresso); }
.item .seal, .item .stamp { margin-top: var(--s4); }

/* Four figures read as four, not three and a stray. */
.cols-4 { display: grid; gap: var(--s6) var(--s5); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* Plan feature lists are specifications, not bullets. */
.item ul { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.item li {
  display: grid; grid-template-columns: 16px 1fr; gap: var(--s3);
  font-size: var(--t-1); line-height: 1.45; color: var(--ink-soft);
}
.item li::before { content: ''; width: 10px; height: 2px; background: currentColor; margin-top: .62em; }

/* ── 22. The thumb rail ───────────────────────────────────── */
/* The confirmed reader is standing, holding a phone in one hand, two minutes
   between trays. The action has to be reachable without regripping, so on
   phones it rides the bottom of the screen on its own plate. It is the same
   single action the page already offers, never a second one. */

.thumbrail { display: none; }

@media (max-width: 899px) {
  .thumbrail {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--amber);
    border-top: var(--rule-heavy) solid var(--espresso);
  }
  .thumbrail .seal {
    display: flex;
    width: 100%;
    min-height: 58px;
    border-width: var(--rule-w);
  }
  /* Out of the way of the menu, and of the page's own closing action. */
  [data-menu-open] .thumbrail { display: none; }
  body { padding-bottom: 86px; }

  /* Slides up once the opener's own action has scrolled away. Same scroll
     timeline the overprint uses; with no support it simply stays in place. */
  @supports (animation-timeline: scroll()) {
    .thumbrail {
      animation: thumbrail-in linear both;
      animation-timeline: scroll();
      animation-range: 300px 520px;
    }
    @keyframes thumbrail-in {
      from { transform: translateY(100%); }
      to   { transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .thumbrail { animation: none; transform: none; }
    }
  }
}

/* An expectation, marked as one. The counterpart to a solid figure: the page
   must never let a reader mistake what we expect for what we measured.
   Drawn inline so it survives whatever display its parent sets. */
.est::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: .6em;
  border: 2px solid currentColor;
  position: relative;
  top: -1px;
}
.item-spec .tag { margin-bottom: var(--s2); }

/* ── 23. Hero ─────────────────────────────────────────────── */
/* Three ways in, ranked by how little effort each costs the reader:
   WhatsApp, the audit form, then a call. */

.opener { padding-block: clamp(48px, 7vw, 86px) clamp(48px, 7vw, 80px); }

/* The hero headline carries more than a section heading does. */
.opener .d1,
.opener h1 { font-size: clamp(2.4rem, 5.6vw, 3.9rem); line-height: 1.16; }
.opener .label { display: block; margin-bottom: var(--s4); }
.opener .lede { margin-top: var(--s5); max-width: 46ch; }
.opener .actions { margin-top: var(--s6); }
.opener-note {
  margin-top: var(--s4);
  font-size: .9rem;
  color: var(--text-light);
  max-width: 48ch;
}
.opener .seal svg { flex: none; }

@media (min-width: 1000px) {
  .opener-bed {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
}

/* The audit form is the hero's second column — a conversion element where a
   spec table used to sit. */
.lead-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(24px, 3vw, 34px);
}
.lead-card-title {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--espresso);
  line-height: 1.25;
}
.lead-card-sub {
  margin-top: var(--s3);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--text-mid);
  max-width: none;
}
.lead-card .form { margin-top: var(--s5); gap: var(--s4); }
.lead-card .field > label { color: var(--text-mid); }
.lead-card button.seal { width: 100%; margin-top: var(--s2); }
.lead-card .form-note { margin-top: calc(var(--s3) * -1); font-size: .84rem; }

/* ── 24. Trust strip ──────────────────────────────────────── */

.trust { padding-block: clamp(26px, 3vw, 38px); }
.trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s5) var(--s6);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.trust-list li { display: grid; gap: 3px; }
.trust-list b {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--espresso);
  line-height: 1.2;
}
.trust-list span { font-size: .9rem; color: var(--text-mid); line-height: 1.45; }

/* ── 25. Testimonials ─────────────────────────────────────── */

.quotes {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  margin: 0;
  padding: clamp(24px, 3vw, 32px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.quote-stars { color: #A97B35; font-size: 1.05rem; letter-spacing: 2px; line-height: 1; }
.quote blockquote {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-mid);
}
.quote blockquote::before { content: '\201C'; }
.quote blockquote::after  { content: '\201D'; }
.quote figcaption { margin-top: auto; display: grid; gap: 2px; }
.quote figcaption strong {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--espresso);
}
.quote figcaption span { font-size: .88rem; color: var(--text-light); }
.quote-result {
  margin: 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--amber-text);
  max-width: none;
}