:root{
  --cream:#f4eee4; --paper:#faf6ef; --ink:#1a1614; --ink-soft:#3a322c;
  --ink-mute:#6f665a; --line:rgba(26,22,20,0.12); --line-strong:rgba(26,22,20,0.2);
  --plum-deep:#2a1820; --plum-mid:#4a2838;
  --rose:#e8b8b0; --rose-deep:#8a4956; --rose-pill:rgba(168,90,106,0.1);
  /* Inverse text on the .band gradient. Tokenised by QA-A11Y-003 so the guard
     can audit them; both were literals and had never been contrast-checked. */
  --band-text:#d6c8c2; --band-head:#fbf5f0; --band-end:#150b10;
  --display:'Cormorant Garamond','Iowan Old Style',Georgia,serif;
  --body:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink-soft);font-family:var(--body);
  font-weight:300;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.wrap{max-width:58rem;margin:0 auto;padding:0 26px}
p{margin:0}
.eyebrow{font-weight:500;font-size:11.5px;letter-spacing:3.2px;text-transform:uppercase;
  color:var(--ink-mute);margin:0}
h1,h2,h3{margin:0;text-wrap:balance}
em{font-style:italic}
a{color:var(--rose-deep)}

/* ---- the mark ---- */
.mark{display:block;color:var(--ink)}
.mark svg{display:block;height:15px;width:auto}
.mark-lg svg{height:19px}

nav{border-bottom:1px solid var(--line);position:sticky;top:0;
  background:rgba(244,238,228,0.96);backdrop-filter:blur(6px);z-index:10}
.nav-in{max-width:58rem;margin:0 auto;padding:20px 26px;display:flex;
  align-items:center;justify-content:space-between;gap:20px}
/* Lowercase italic, so the wordmark is the only tracked-caps object in the bar. */
.nav-links{display:flex;gap:22px;font-family:var(--display);font-style:italic;
  font-weight:400;font-size:16px;line-height:1}
.nav-links a{color:var(--ink-mute);text-decoration:none;white-space:nowrap}
.nav-links a:hover{color:var(--rose-deep)}

/* ---- landing ---- */
.hero{padding:96px 0 84px;display:flex;flex-direction:column;gap:28px}
h1{font-family:var(--display);font-weight:300;font-size:clamp(40px,7.4vw,70px);
  line-height:1.03;color:var(--ink);letter-spacing:-0.012em;max-width:22ch}
h1 em{font-weight:400;color:var(--rose-deep)}
.lede{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(21px,2.6vw,26px);line-height:1.42;color:var(--ink);max-width:30ch}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:10px}
.btn{display:inline-block;background:var(--plum-deep);color:var(--paper);
  text-decoration:none;padding:16px 32px;border-radius:12px;font-size:11.5px;
  letter-spacing:2.8px;text-transform:uppercase;font-weight:500;transition:background .15s}
.btn:hover{background:var(--plum-mid)}
.btn-note{font-size:13.5px;color:var(--ink-mute)}

.passage{padding:0 0 88px}
.passage-in{max-width:33rem;display:flex;flex-direction:column;gap:22px}
.said{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(25px,3.6vw,34px);line-height:1.28;color:var(--ink);
  border-left:1.5px solid var(--rose-deep);padding-left:22px}
.passage p.body{font-size:17px;color:var(--ink-soft)}

.band{background:linear-gradient(155deg,var(--plum-mid) 0%,var(--plum-deep) 58%,var(--band-end) 100%);
  color:var(--band-text);padding:92px 0}
.band-in{max-width:34rem}
.band .eyebrow{color:var(--rose)}
.band h2{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(29px,4.4vw,46px);line-height:1.16;color:var(--band-head);margin-top:18px}
.band h2 em{color:var(--rose);font-weight:400}
/* QA-WEB-001b, closed 2026-09-25. `.band p` is (0,1,1) and outranked `.eyebrow`
   (0,1,0), so it was silently overriding THREE of the eyebrow's declarations,
   not just the one first reported: font-size (17px vs 11.5px), margin-top (26px
   vs 0) and max-width (34ch vs none). The margin was the visible one — the
   eyebrow is the band's first child, so its 26px stacked on the band's 92px
   padding and made the top inset 118px against 92px at the bottom.
   Scoped away from the eyebrow rather than restating each overridden value on
   `.band .eyebrow`: a restated value is one that drifts, and the two body
   paragraphs genuinely do want the 26px rhythm. */
.band p:not(.eyebrow){margin-top:26px;font-size:17px;max-width:34ch}

.rail-sec{padding:88px 0}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:52px;max-width:30rem}
h2.cream{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(28px,4vw,40px);line-height:1.14;color:var(--ink)}
h2.cream em{color:var(--rose-deep);font-weight:400}
.rail{border-left:1px solid var(--rose-deep);display:flex;flex-direction:column;max-width:40rem}
.stop{padding:30px 0 30px 32px;position:relative;border-top:1px solid var(--line)}
.stop:first-child{border-top:none;padding-top:6px}
.stop::before{content:'';position:absolute;left:-4.5px;top:38px;width:8px;height:8px;
  border-radius:50%;background:var(--rose-deep)}
.stop:first-child::before{top:14px}
.stop h3{font-family:var(--display);font-style:italic;font-weight:400;
  font-size:24px;color:var(--ink);line-height:1.22}
.stop p{font-size:16.5px;color:var(--ink-soft);margin-top:9px;max-width:44ch}

.strip{border-top:1px solid var(--rose-deep);border-bottom:1px solid var(--rose-deep);
  padding:44px 0;margin:0 0 88px}
.strip-in{max-width:34rem;display:flex;flex-direction:column;gap:14px}
.obs{font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(21px,3vw,30px);line-height:1.36;color:var(--rose-deep)}
.obs-note{font-size:15.5px;color:var(--ink-mute);max-width:42ch}

.order{padding:0 0 88px}
.order-list{display:flex;flex-direction:column;max-width:42rem;margin-top:38px}
.step{display:grid;grid-template-columns:auto 1fr;gap:0 24px;
  padding:26px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .n{font-family:var(--display);font-style:italic;font-size:26px;
  color:var(--rose-deep);line-height:1;min-width:1.6rem}
.step h3{font-family:var(--display);font-style:italic;font-weight:400;
  font-size:22px;color:var(--ink)}
.step p{font-size:16.5px;margin-top:7px;max-width:46ch}

.close{padding:8px 0 100px}
.close-in{max-width:32rem;display:flex;flex-direction:column;gap:26px}
.close h2{font-family:var(--display);font-weight:300;font-size:clamp(34px,5.6vw,56px);
  line-height:1.06;color:var(--ink);letter-spacing:-0.01em}
.close h2 em{color:var(--rose-deep);font-weight:400}

/* ---- document pages ---- */
.doc{padding:64px 0 96px;max-width:38rem}
.doc h1{font-family:var(--display);font-weight:300;font-size:clamp(34px,5.4vw,52px);
  line-height:1.06;color:var(--ink);letter-spacing:-0.01em;margin-bottom:10px;max-width:none}
.doc h2{font-family:var(--display);font-style:italic;font-weight:400;font-size:26px;
  color:var(--ink);line-height:1.2;margin:52px 0 14px;padding-top:22px;
  border-top:1px solid var(--line)}
.doc h3{font-family:var(--body);font-weight:500;font-size:15px;color:var(--ink);
  margin:28px 0 8px}
.doc p{margin:0 0 16px;font-size:17px;color:var(--ink-soft)}
.doc ul,.doc ol{margin:0 0 18px;padding-left:22px}
.doc li{margin-bottom:9px;font-size:17px;color:var(--ink-soft)}
.doc strong{font-weight:500;color:var(--ink)}
.doc table{border-collapse:collapse;width:100%;margin:0 0 22px;font-size:15.5px}
.doc th,.doc td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);
  vertical-align:top}
.doc th{font-weight:500;font-size:11.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--ink-mute)}
.doc code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:14px;
  background:rgba(168,90,106,0.1);padding:1px 5px;border-radius:3px}
.doc hr{border:none;border-top:1px solid var(--line);margin:44px 0}
.doc blockquote{margin:0 0 20px;padding-left:20px;border-left:1.5px solid var(--rose-deep);
  font-family:var(--display);font-style:italic;font-size:19px;color:var(--ink)}
.doc-meta{font-size:13.5px;color:var(--ink-mute);margin-bottom:8px}
.doc-scroll{overflow-x:auto}

footer{border-top:1px solid var(--line-strong);padding:48px 0 64px;background:var(--paper)}
.foot-grid{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between;align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:24px;font-family:var(--display);
  font-style:italic;font-weight:400;font-size:16px;line-height:1}
.foot-links a{color:var(--ink-mute);text-decoration:none}
.foot-links a:hover{color:var(--rose-deep)}
.foot-note{font-size:13.5px;color:var(--ink-mute);max-width:30ch;margin-top:14px}

.nav-links a,.foot-links a{white-space:nowrap}

@media (max-width:700px){
  /* Stack: the mark gets its own line, the links sit centred beneath it.
     Three links no longer compete with the wordmark for one row. */
  .nav-in{flex-direction:column;align-items:center;gap:11px;
    padding:15px 22px 13px}
  .nav-links{gap:20px;font-size:15.5px;justify-content:center}

  .hero{padding:64px 0 56px}
  .doc{padding:44px 0 72px}
  .doc h2{font-size:23px;margin-top:40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── QA-A11Y-003 (2026-09-20, Wren) ─────────────────────────────────────────
 * Contrast, keyboard focus, and a skip link. Three notes worth keeping:
 *
 * 1. THE BINDING SURFACE IS --cream, NOT --paper. Both are painted behind body
 *    text, and cream is the darker of the two, so a colour tuned against paper
 *    still fails on cream. Measured before the fix: --rose-deep 4.20:1 on cream
 *    / 4.50 on paper; --ink-mute 3.43 / 3.68. My first pass solved against
 *    paper and produced two values that still failed AA on cream.
 *    After: --rose-deep #a25565 = 4.52 / 4.84, --ink-mute #766b60 = 4.50 / 4.82.
 *    Hue and saturation are held; only lightness moved, and the intended
 *    hierarchy (mute > rose > ink-soft > ink) is unchanged.
 *
 * 2. NO LARGE-TEXT EXEMPTION APPLIES. WCAG large text is >=18.66px bold or
 *    >=24px. The eyebrow is 11.5px uppercase, so it is normal text and needs
 *    the full 4.5:1 — the uppercase letterspacing makes it look larger than it
 *    counts.
 *
 * 3. :focus-visible, not :focus. A plain :focus rule paints an outline on
 *    mouse clicks too, which is why the ring tends to get deleted again later.
 * ------------------------------------------------------------------------ */

:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:2px;
}
/* Older engines with no :focus-visible support still get a visible ring rather
   than nothing; engines that DO support it drop this via the @supports guard. */
@supports not selector(:focus-visible){
  a:focus,button:focus,input:focus,textarea:focus,select:focus,[tabindex]:focus{
    outline:3px solid var(--ink); outline-offset:2px;
  }
}
/* The skip link is the first focusable thing on every page. Off-screen until
   focused rather than display:none, because display:none is not focusable. */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; z-index:100;
  font-family:var(--body); font-size:15px; font-weight:500;
  text-decoration:none; border-radius:0 0 4px 0;
}
.skip-link:focus{ left:0; }
/* main takes focus programmatically when the skip link is used; it must never
   show a ring for that, only for real keyboard navigation. */
main:focus{ outline:none; }
/* …and the jump must not land the first heading UNDER the sticky nav. Measured
   at 375px: nav is 70.5px tall while .doc padding-top is 44px, so 74% of the h1
   was hidden after using the skip link. scroll-margin-top on the target is the
   fix that does not touch layout in any other state. The value clears the nav
   at its tallest measured height plus a little air. */
main{ scroll-margin-top:84px; }