/* Thornwork Rituals — design system: Plate (I), Spread (III), Rubric (VI), Chapel (IX).
   Paper by day, charcoal and gilt by night. Every page ends in the dark. */

:root {
  --paper: #efe6d2; --paper-2: #e6dbc2; --ink: #1a1612; --ink-2: #4a4239; --ink-3: #6b6152; --rule: #8f836d; --rule-soft: #cbbfa4;
  --accent: #8a5a14; --on-primary: #efe6d2;
  --night: #0b0a08; --night-2: #15130f; --cream: #e9dfc8; --cream-2: #a89d86; --amber: #d9a441; --line: #3a352c;
  --display: "IM Fell English", Georgia, serif; --caps: "IM Fell English SC", Georgia, serif; --body: "EB Garamond", Georgia, serif; --label: "Cinzel", Georgia, serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
}
html[data-theme="dark"] { --paper: #0b0a08; --paper-2: #15130f; --ink: #e9dfc8; --ink-2: #a89d86; --ink-3: #8c8270; --rule: #3a352c; --rule-soft: #2a2620; --accent: #d9a441; --on-primary: #0b0a08; }

* { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 19px/1.6 var(--body); transition: background .25s, color .25s; }
html:not([data-theme="dark"]) body { background-image: radial-gradient(ellipse at 20% 10%, rgba(255,250,235,.7), transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(120,90,40,.10), transparent 60%); }
img, svg { max-width: 100%; display: block; } a { color: inherit; } code { font-family: ui-monospace, monospace; font-size: .85em; }
p, li { text-wrap: pretty; max-width: 68ch; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0 0 var(--s4); text-wrap: balance; }
.container { max-width: 1180px; margin: 0 auto; padding-inline: 32px; } .container--wide { max-width: 1240px; } .container--narrow { max-width: 780px; }
.text-muted, .u-muted { color: var(--ink-2); } .mono { font-family: var(--label); letter-spacing: .14em; text-transform: uppercase; font-size: .68em; }
.text-center { text-align: center; } .mt-4 { margin-top: var(--s4); } .mt-6 { margin-top: var(--s6); } .mt-8 { margin-top: var(--s8); } .mb-8 { margin-bottom: var(--s8); }
.only-mobile { display: none; } @media (max-width: 720px) { .only-mobile { display: block; } }
.u-offscreen { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.u-text-sm { font-size: 16px; } .u-text-base { font-size: 18px; } .u-note { color: var(--ink-2); font-style: italic; } .u-justify-center { justify-content: center; }
.u-label, .u-label-wide, .u-label-tight, .u-mono-label, .u-mono-kicker { font-family: var(--label); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.u-mono-kicker { margin-bottom: var(--s4); } .u-footnote { color: var(--cream-2); font-size: 15px; margin-top: var(--s4); max-width: 40ch; }
.u-inline { display: inline; } .u-inline-def { display: inline; margin: 0; } .u-self-start { justify-self: start; }
.u-muted-lg-mb-8, .u-muted-lg-mb-6 { color: var(--ink-2); font-size: 20px; margin: 0 0 var(--s6); } .u-muted-mb-6 { color: var(--ink-2); margin-bottom: var(--s6); }
.u-grid-8 { display: grid; gap: var(--s6); } .u-sm-grid-3 { font-size: 16px; display: grid; gap: var(--s3); } .u-base-mt-8 { margin-top: var(--s8); }

/* labels in Cinzel — the Lantern's voice on the Plate Book's page */
.eyebrow, .section-eyebrow, .page-header__eyebrow, .hero__eyebrow, .entry__number, .step__num, .stat__label, .u-mono-kicker, .btn, .nav a, .brand__sub, .site-footer h2, .site-footer__colophon, .preview-tag, figcaption, .oath footer, .form label, .form legend {
  font-family: var(--label); letter-spacing: .18em; text-transform: uppercase; }

/* ---- header ---- */
.site-header { border-bottom: 1px solid var(--ink); padding: 16px 0; position: relative; z-index: 5; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.brand__mark { width: 32px; height: 32px; flex: none; } .brand__wordmark { font-family: var(--display); font-size: 26px; line-height: 1; display: block; }
.brand__sub { display: block; font-size: 10px; color: var(--ink-2); margin-top: 5px; letter-spacing: .22em; }
.nav { display: flex; align-items: center; gap: 18px; }
.nav a { text-decoration: none; font-size: 11px; letter-spacing: .14em; color: var(--ink-2); border-bottom: 1px solid transparent; padding-bottom: 3px; white-space: nowrap; }
.nav a:hover { color: var(--ink); border-color: var(--ink); } .nav a[aria-current="page"] { color: var(--ink); border-color: var(--accent); }
.nav-toggle { display: none; }
.theme-toggle { background: none; border: 1px solid var(--rule); color: var(--ink); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; flex: none; }
.theme-toggle svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.4; } .theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: block; } html[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (max-width: 1180px) {
  .nav-toggle { display: grid; flex: none; gap: 6px; background: none; border: 1px solid var(--rule); width: 40px; height: 36px; padding: 0 10px; cursor: pointer; align-content: center; }
  .nav-toggle span { display: block; height: 1px; background: var(--ink); }
  .nav { display: none; } .nav.is-open { display: flex; position: fixed; inset: 69px 0 0 0; background: var(--paper); flex-direction: column; align-items: flex-start; padding: 32px; gap: 22px; z-index: 4; overflow: auto; }
  .nav.is-open a { font-size: 14px; } .nav.is-open .btn--header { margin-top: 8px; } }

/* ---- buttons ---- */
.btn { display: inline-block; padding: 13px 22px; border: 1px solid var(--ink); text-decoration: none; font-size: 11px; color: var(--ink); background: transparent; line-height: 1; cursor: pointer; }
.btn:hover { background: var(--ink); color: var(--paper); } .btn--primary { background: var(--ink); color: var(--on-primary); } .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--on-primary); }
html[data-theme="dark"] .btn--primary { background: transparent; border-color: var(--amber); color: var(--amber); } html[data-theme="dark"] .btn--primary:hover { background: var(--amber); color: var(--night); }
.btn--ghost { border-color: var(--rule); } .btn--header { padding: 11px 16px; } .hero__actions, .btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- hero (home) ---- */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 0 56px; align-items: center; padding-block: var(--s8) var(--s8); position: relative; }
.hero > :not(.plate) { grid-column: 1; } .hero.container--wide { max-width: 1180px; } .hero .plate { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
.hero__eyebrow { font-size: 12px; color: var(--accent); margin: 0 0 var(--s5); }
.hero__title { font-size: clamp(42px, 5.4vw, 72px); font-style: italic; margin-bottom: var(--s6); }
.hero__lede { font-size: 21px; margin: 0 0 var(--s4); max-width: 56ch; } .hero__lede.u-note { font-size: 19px; margin-bottom: var(--s6); }
.plate { margin: 0; position: relative; }
.plate img { width: 100%; height: auto; aspect-ratio: 1; }  /* ink only — the paper is keyed out, so it prints straight onto the page */
.plate figcaption { margin-top: -6px; text-align: center; font-size: 10px; color: var(--ink-2); }

/* ---- page header (inner pages) ---- */
.page-header { padding-block: var(--s8) var(--s7); border-bottom: 1px solid var(--rule-soft); position: relative; }
.page-header::after { content: ""; position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); background: var(--paper); padding: 0 14px; font-size: 17px; color: var(--ink-2); }
.page-header__eyebrow { font-size: 12px; color: var(--accent); margin: 0 0 var(--s4); }
.page-header__title { font-size: clamp(38px, 4.8vw, 64px); font-style: italic; } .page-header__lede { font-size: 21px; color: var(--ink-2); margin: 0; max-width: 60ch; }

/* ---- sections ---- */
main > section, main > div > section { padding-block: var(--s8); } .hero + section, .page-header + section { padding-top: var(--s8); }
.section-eyebrow { display: block; font-size: 12px; color: var(--accent); margin: 0 0 var(--s4); }
.section-title { font-size: clamp(30px, 3.6vw, 48px); } .section-lede { font-size: 20px; color: var(--ink-2); max-width: 62ch; margin: 0 0 var(--s7); }
.grid { display: grid; gap: 0; } .grid--2 { grid-template-columns: 1fr 1fr; } .grid--3 { grid-template-columns: repeat(3, 1fr); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .hero, .grid--2, .grid--3, .two-col { grid-template-columns: 1fr; } .hero .plate { grid-column: 1; grid-row: auto; } }

/* entries (services, home trio, about lineages) — plates in a ruled table */
.grid > .entry { border-left: 1px solid var(--rule-soft); padding: 34px 28px; } .grid > .entry:first-child { border-left: 0; }
.grid { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.entry__number { display: block; font-size: 11px; color: var(--accent); margin: 0 0 var(--s2); }
.entry__title { font-size: 26px; margin: 0 0 var(--s3); } .entry__price { font-family: var(--caps); letter-spacing: .04em; font-size: 18px; color: var(--ink-2); margin: 0 0 var(--s4); }
.entry__body { margin: 0 0 var(--s4); color: var(--ink-2); font-size: 17px; }
.entry__list { margin: 0 0 var(--s5); padding-left: 1.1em; font-size: 16px; color: var(--ink-2); } .entry__list li { margin-bottom: 4px; }
.entry .btn { margin-top: auto; }
.entry--featured { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--ink); background: var(--paper-2); }
@media (max-width: 900px) { .grid > .entry { border-left: 0; border-top: 1px solid var(--rule-soft); } .grid > .entry:first-child { border-top: 0; } }
/* services page: the grids get their own rules, not the home trio's */
.grid--2 > .entry { display: flex; flex-direction: column; }

/* stats */
.stat { text-align: center; padding: 22px 16px; border: 1px solid var(--line); } .u-grid-8 { grid-template-columns: repeat(2, 1fr); }
.stat__num { display: block; font-family: var(--display); font-size: 46px; line-height: 1; color: var(--amber); } .stat__label { font-size: 10px; color: var(--cream-2); display: block; margin-top: 8px; }

/* steps (how it works) */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; border-top: 1px solid var(--ink); }
.step { display: grid; grid-template-columns: 96px 1fr; gap: var(--s6); padding: var(--s6) 0; border-bottom: 1px solid var(--rule-soft); }
.step__num { font-family: var(--display); font-size: 40px; color: var(--accent); line-height: 1; letter-spacing: 0; text-transform: none; } .step__title { font-size: 26px; margin: 0 0 var(--s2); } .step__body { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) { .step { grid-template-columns: 1fr; gap: var(--s2); } }

/* callout / oath */
.callout { border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: 4px; padding: var(--s5) var(--s6); margin: var(--s6) 0; background: var(--paper-2); font-size: 17px; }
.oath { margin: 0; padding: var(--s7) 8%; text-align: center; font-family: var(--display); font-style: italic; font-size: clamp(22px, 2.4vw, 31px); line-height: 1.35; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.oath p { margin: 0 auto; max-width: none; } .oath footer, .oath cite { display: block; font-style: normal; font-size: 11px; margin-top: var(--s5); color: var(--ink-2); font-family: var(--label); letter-spacing: .18em; text-transform: uppercase; }
.verified-mark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--label); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.verified-mark svg { width: 18px; height: 18px; }

/* ledger table (pricing) */
.table-scroll { overflow-x: auto; } .ledger { width: 100%; border-collapse: collapse; font-size: 17px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.ledger th { text-align: left; font-family: var(--label); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); padding: 14px 12px; border-bottom: 1px solid var(--ink); font-weight: 400; }
.ledger td { padding: 18px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; } .ledger tr:last-child td { border-bottom: 0; }
.ledger .num { font-family: var(--caps); font-size: 20px; white-space: nowrap; } .ledger td.u-rule-top { padding-top: var(--s8); border-top: 1px solid var(--ink); }
.ledger strong { font-family: var(--display); font-weight: 400; font-size: 20px; }

/* faq */
.faq details { border-top: 1px solid var(--rule-soft); padding: var(--s4) 0; } .faq details:last-child { border-bottom: 1px solid var(--rule-soft); }
.faq summary { cursor: pointer; font-family: var(--display); font-size: 24px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--accent); font-family: var(--caps); } .faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-2); margin: var(--s3) 0 0; }

/* longform (essays) */
.longform { font-size: 20px; } .longform h2 { font-size: 32px; margin-top: var(--s7); } .longform p { margin: 0 0 var(--s5); } .longform ul { padding-left: 1.2em; } .longform li { margin-bottom: 6px; } .longform a { text-decoration-color: var(--accent); }
.notice-text::before { content: ""; display: block; width: 64px; border-top: 1px solid var(--accent); margin-bottom: var(--s6); }

/* blog index cards */
.post-card, .card { border-top: 1px solid var(--ink); padding: var(--s5) 0; } .post-card h2, .card h2, .card h3 { font-size: 26px; } .card__meta, .post-card__meta { font-family: var(--label); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }

/* form (request) */
.form { display: grid; gap: var(--s5); } .form__row { display: grid; gap: var(--s2); } .form__row--split { grid-template-columns: 1fr 1fr; gap: var(--s5); }
.form label { font-size: 11px; color: var(--ink-2); } .form .req { color: var(--accent); } .form .help { font-size: 15px; color: var(--ink-3); margin: 0; font-family: var(--body); letter-spacing: 0; text-transform: none; }
.form input[type="text"], .form input[type="email"], .form select, .form textarea { font: 18px var(--body); color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); padding: 12px 14px; width: 100%; }
.form textarea { min-height: 180px; resize: vertical; } .form :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form__checkbox { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; } .form__checkbox label { font-family: var(--body); letter-spacing: 0; text-transform: none; font-size: 17px; color: var(--ink); }
.form__checkbox input { width: 18px; height: 18px; margin-top: 5px; accent-color: var(--accent); }
.form__notice { border-left: 2px solid var(--accent); padding: var(--s3) var(--s5); background: var(--paper-2); font-size: 17px; }
.form__result { display: none; } .form button.btn { justify-self: start; }
@media (max-width: 640px) { .form__row--split { grid-template-columns: 1fr; } }

/* ---- the night band: Look III, always night, both themes. Feathered edge into the paper. ---- */
.night, .u-surface-band, .u-surface-top { background: var(--night); color: var(--cream); position: relative; --ink: var(--cream); --ink-2: var(--cream-2); --ink-3: #8c8270; --accent: var(--amber); --paper: var(--night); --paper-2: var(--night-2); --rule: var(--line); --rule-soft: var(--line); --on-primary: var(--night); }
.u-surface-band, .u-surface-top { margin-top: var(--s8); padding-block: var(--s9) !important; border-top: 1px solid var(--line); }
.u-surface-band::before, .u-surface-top::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--amber) 30%, var(--amber) 70%, transparent); opacity: .7; }
.night .btn, .u-surface-band .btn, .u-surface-top .btn { border-color: var(--cream-2); color: var(--cream); background: transparent; } .night .btn:hover, .u-surface-band .btn:hover, .u-surface-top .btn:hover { border-color: var(--amber); color: var(--amber); background: transparent; }
.night .btn--primary, .u-surface-band .btn--primary, .u-surface-top .btn--primary { border-color: var(--amber); color: var(--amber); } .night .btn--primary:hover, .u-surface-band .btn--primary:hover, .u-surface-top .btn--primary:hover { background: var(--amber); color: var(--night); }
.u-surface-band .callout, .u-surface-top .callout, .u-surface-band .form__notice { background: var(--night-2); }
.night-plate { width: min(100%, 360px); height: auto; margin: 0 auto var(--s4); grid-column: 1 / -1; }
html[data-theme="dark"] .u-surface-band, html[data-theme="dark"] .u-surface-top { background: var(--night-2); }

/* ---- footer ---- */
.site-footer { padding: var(--s7) 0 var(--s8); border-top: 1px solid var(--line); font-size: 16px; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s6); }
.site-footer h2 { font-size: 10px; color: var(--amber); margin: 0 0 var(--s4); font-family: var(--label); }
.site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin: 0; } .site-footer a { display: block; width: fit-content; text-decoration: none; padding-block: 4px; color: var(--cream); }
.site-footer a:hover { color: var(--amber); } .site-footer .brand__wordmark { font-size: 20px; }
.site-footer__colophon { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); font-size: 10px; color: var(--cream-2); }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* tiers (design page) */
.tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.tier { padding: var(--s6) var(--s6); border-left: 1px solid var(--rule-soft); } .tier:first-child { border-left: 0; } .tier--featured { background: var(--paper-2); }
.tier__name { font-size: 28px; margin: 0 0 var(--s2); } .tier__price { font-family: var(--caps); font-size: 22px; color: var(--accent); margin: 0 0 var(--s4); } .tier__note { color: var(--ink-2); font-size: 16px; } .tier__list { padding-left: 1.1em; color: var(--ink-2); font-size: 17px; }
@media (max-width: 800px) { .tier-grid { grid-template-columns: 1fr; } .tier { border-left: 0; border-top: 1px solid var(--rule-soft); } .tier:first-child { border-top: 0; } }
.entry__title a { text-decoration: none; } .entry__title a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
/* blog index: two-column entries need bottom rules between rows */
.grid--2 > .entry:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }

/* pass-two fixes */
.ledger th { white-space: nowrap; } .step, .faq details, .tier, .entry { max-width: none; }
.grid--2 > .entry .btn, .entry .btn { align-self: flex-start; }
.callout .mono, .callout .mono dd, .u-inline-def { font-family: var(--body); letter-spacing: 0; text-transform: none; font-size: 17px; }
.callout .mono dt { font-family: var(--label); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-right: 6px; }
.text-center p, .text-center .section-lede { margin-inline: auto; }
/* ---- pass three: the two looks share one page instead of taking turns ----
   A book spread: the hero's text page is paper, its facing plate page is night (mirrored in dark mode).
   Every inset plate on the page is the other look: night plates on paper, paper plates on night. */
body, main { overflow-x: clip; }
:root { --facing: #0b0a08; --facing-ink: #e9dfc8; --facing-ink-2: #a89d86; }
html[data-theme="dark"] { --facing: #efe6d2; --facing-ink: #1a1612; --facing-ink-2: #4a4239; }
.hero { padding-block: 0; min-height: 560px; }
.hero > :not(.plate) { position: relative; z-index: 1; }
.hero > .hero__eyebrow { padding-top: var(--s8); } .hero > .hero__actions { padding-bottom: var(--s8); }
.hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(52.4% + 28px); right: calc(50% - 50vw); background: var(--facing); }
.hero .plate { padding: var(--s7) 0 var(--s7) 40px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.plate img { filter: none; } html:not([data-theme="dark"]) .plate img { filter: invert(1) hue-rotate(180deg) brightness(.92); }
.plate figcaption { color: var(--facing-ink-2); margin-top: 6px; }
@media (max-width: 900px) {
  .hero { min-height: 0; } .hero::before { display: none; }
  .hero > .hero__actions { padding-bottom: var(--s7); }
  .hero .plate { background: var(--facing); margin: 0 -32px; padding: var(--s6) 32px; } }
/* header: the one lantern on the paper header */
html:not([data-theme="dark"]) .btn--header { background: var(--night); border-color: var(--night); color: var(--amber); } html:not([data-theme="dark"]) .btn--header:hover { background: var(--amber); border-color: var(--amber); color: var(--night); }
/* inset plates: oath, callouts, the featured service and tier */
.oath, .callout, .entry--featured, .tier--featured { --ink: #e9dfc8; --ink-2: #a89d86; --ink-3: #8c8270; --accent: #d9a441; --paper: #0b0a08; --paper-2: #15130f; --rule: #3a352c; --rule-soft: #3a352c; --on-primary: #0b0a08; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: 5px; }
html[data-theme="dark"] .oath, html[data-theme="dark"] .callout, html[data-theme="dark"] .entry--featured, html[data-theme="dark"] .tier--featured { --ink: #1a1612; --ink-2: #4a4239; --ink-3: #6b6152; --accent: #8a5a14; --paper: #efe6d2; --paper-2: #e6dbc2; --rule: #8f836d; --rule-soft: #cbbfa4; --on-primary: #efe6d2; }
.u-surface-band .oath, .u-surface-band .callout, .u-surface-top .oath, .u-surface-top .callout { --ink: #1a1612; --ink-2: #4a4239; --ink-3: #6b6152; --accent: #8a5a14; --paper: #efe6d2; --paper-2: #e6dbc2; --rule: #8f836d; --rule-soft: #cbbfa4; --on-primary: #efe6d2; }
.oath { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.oath footer, .oath cite { color: var(--accent); }
.callout { margin: var(--s6) 6px; }
.grid > .entry--featured { margin: 6px; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.tier--featured { margin: 6px; border-left: 1px solid var(--rule); }
.entry--featured .entry__number, .entry--featured .entry__price, .tier--featured .tier__price { color: var(--accent); }
.entry--featured .btn:hover, .tier--featured .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-primary); }

/* the mark: facing colours flip on night grounds */
.night, .u-surface-band, .u-surface-top, .mark-cell.night, .lockup.night { --facing: #efe6d2; --facing-ink: #1a1612; --facing-ink-2: #4a4239; }
html[data-theme="dark"] .night, html[data-theme="dark"] .u-surface-band, html[data-theme="dark"] .u-surface-top { --facing: #efe6d2; --facing-ink: #1a1612; }
.hero .plate figcaption { color: var(--facing-ink-2); }
.mark-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); }
.mark-cell { padding: var(--s7); display: grid; place-items: center; gap: var(--s5); border-top: 1px solid var(--rule-soft); } .mark-cell:nth-child(-n+2) { border-top: 0; }
.mark-cell.night { background: var(--night); color: var(--cream); --ink-2: var(--cream-2); }
.mark-box { display: inline-block; } .mark-box svg { display: block; width: 100%; height: 100%; } .mark-row { display: flex; align-items: flex-end; gap: var(--s6); }
.lockups { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s7); border: 1px solid var(--ink); }
.lockup { display: flex; align-items: center; gap: 18px; padding: var(--s7); } .lockup.night { background: var(--night); color: var(--cream); }
.lockup__word { display: block; font-family: var(--display); font-size: 36px; line-height: 1; } .lockup__sub { display: block; font-family: var(--label); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; margin-top: 8px; opacity: .75; }
@media (max-width: 800px) { .mark-grid, .lockups { grid-template-columns: 1fr; } .mark-cell:nth-child(2) { border-top: 1px solid var(--rule-soft); } }

/* =====================================================================
   I · III · VI · IX — Plate Book + Lantern + Rubric + Chapel
   Paper pages are a manuscript: vermilion rubrics, pilcrows, a drop cap, drolleries in the gutter.
   Night pages are a chapel: charcoal stone instead of black, gilt hairlines, one arch.
   ===================================================================== */
:root { --night: #1d1c1a; --night-2: #262421; --line: rgba(176,141,60,.45); --amber: #c9a04a; --gilt: #b08d3c; --red: #a3261b;
  --facing: #1d1c1a; --facing-ink: #e9dfc8; --facing-ink-2: #a89d86; --facing-accent: #b08d3c; }
html[data-theme="dark"] { --paper: #1d1c1a; --paper-2: #262421; --rule: rgba(176,141,60,.45); --rule-soft: rgba(176,141,60,.28); --accent: #c9a04a;
  --facing: #efe6d2; --facing-ink: #1a1612; --facing-ink-2: #4a4239; --facing-accent: #a3261b; }
.night, .u-surface-band, .u-surface-top { --accent: var(--amber); --rule: var(--line); --rule-soft: var(--line); --facing: #efe6d2; --facing-ink: #1a1612; --facing-ink-2: #4a4239; --facing-accent: #a3261b; }
html:not([data-theme="dark"]) body { background-image: none; }

/* rubrics: the manuscript's red voice on paper; gilt on the night */
.section-eyebrow, .page-header__eyebrow, .hero__eyebrow, .entry__number, .step__num, .u-mono-kicker, .card__meta, .post-card__meta {
  font-family: var(--caps); letter-spacing: .08em; text-transform: none; font-size: 17px; color: var(--red); }
.section-eyebrow::before, .page-header__eyebrow::before, .hero__eyebrow::before { content: "¶ "; }
.entry__number { font-size: 19px; } .step__num { font-family: var(--display); font-size: 40px; color: var(--red); }
html[data-theme="dark"] .section-eyebrow, html[data-theme="dark"] .page-header__eyebrow, html[data-theme="dark"] .hero__eyebrow, html[data-theme="dark"] .entry__number, html[data-theme="dark"] .step__num,
.night .section-eyebrow, .u-surface-band .section-eyebrow, .u-surface-top .section-eyebrow, .u-surface-band .entry__number, .u-surface-top .entry__number { color: var(--amber); }
.oath .section-eyebrow, .callout .section-eyebrow { color: var(--accent); }
.verified-mark, .form .req, .longform a, .entry__title a:hover { color: var(--red); text-decoration-color: var(--red); }
html[data-theme="dark"] .verified-mark, html[data-theme="dark"] .form .req { color: var(--amber); }
.nav a[aria-current="page"] { border-color: var(--red); } html[data-theme="dark"] .nav a[aria-current="page"] { border-color: var(--amber); }
.page-header::after { color: var(--red); } html[data-theme="dark"] .page-header::after { color: var(--amber); }
.notice-text::before { border-color: var(--red); } .form__notice { border-left-color: var(--red); } html[data-theme="dark"] .form__notice { border-left-color: var(--amber); }
.btn--primary:hover { background: var(--red); border-color: var(--red); }
html:not([data-theme="dark"]) .btn--header { background: var(--night); color: var(--amber); } html:not([data-theme="dark"]) .btn--header:hover { background: var(--red); border-color: var(--red); color: var(--paper); }

/* drop cap on the hero and page ledes */
.hero__lede:not(.u-note)::first-letter, .page-header__lede::first-letter { font-family: var(--display); color: var(--red); font-size: 3.4em; float: left; line-height: .78; padding: 6px 10px 0 0; }
html[data-theme="dark"] .hero__lede:not(.u-note)::first-letter, html[data-theme="dark"] .page-header__lede::first-letter { color: var(--amber); }

/* the gutter: paper sections keep a manuscript margin for the drolleries */
main { position: relative; }
.marginalia { display: none; }
@media (min-width: 1100px) {
  .page-header .container, .page-header + section .container, .hero + section .container { padding-left: 190px; position: relative; }
  .hero + section .container .section-lede { max-width: 62ch; }
  .marginalia { display: block; position: absolute; left: 36px; top: 12px; width: 112px; z-index: 1; pointer-events: none; }
  .marginalia img { width: 100%; height: auto; }
  html[data-theme="dark"] .marginalia img { filter: invert(1) hue-rotate(180deg) brightness(.85); }
  .page-header { overflow: visible; } }
@media (min-width: 1100px) and (max-width: 1250px) { .marginalia { width: 96px; } .page-header .container, .page-header + section .container, .hero + section .container { padding-left: 160px; } }

/* the chapel arch on the facing page */
.hero .plate { padding: var(--s7) 0 var(--s7) 40px; }
.arch { width: min(100%, 400px); margin: 0 auto; aspect-ratio: 3 / 4; border: 1px solid var(--facing-accent); border-radius: 50% 50% 0 0 / 38% 38% 0 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; background: transparent; }
.arch img { width: 92%; height: auto; margin-bottom: 4%; }
.plate figcaption { color: var(--facing-ink-2); }
.arch::before { display: none; }
@media (max-width: 900px) { .arch { width: min(100%, 320px); } }

/* chapel light in the night bands */
.candelabra { width: 190px; height: auto; margin: 0 auto var(--s5); opacity: .9; }
.u-surface-band::before, .u-surface-top::before { background: linear-gradient(90deg, transparent, var(--gilt) 30%, var(--gilt) 70%, transparent); opacity: .8; }
.stat { border-color: var(--line); } .stat__num { color: var(--amber); }
.site-footer { border-top-color: var(--line); } .site-footer h2 { color: var(--amber); } .site-footer__colophon { border-top-color: var(--line); }
.night .btn, .u-surface-band .btn, .u-surface-top .btn { border-color: rgba(233,223,200,.5); }
.night .btn--primary, .u-surface-band .btn--primary, .u-surface-top .btn--primary { border-color: var(--amber); color: var(--amber); }
.night .btn--primary:hover, .u-surface-band .btn--primary:hover, .u-surface-top .btn--primary:hover { background: var(--amber); color: var(--night); }
.oath, .callout, .entry--featured, .tier--featured { --paper: #1d1c1a; --paper-2: #262421; --rule: rgba(176,141,60,.45); --rule-soft: rgba(176,141,60,.45); --accent: #c9a04a; border-color: var(--gilt); outline-color: rgba(176,141,60,.5); }
html[data-theme="dark"] .oath, html[data-theme="dark"] .callout, html[data-theme="dark"] .entry--featured, html[data-theme="dark"] .tier--featured,
.u-surface-band .oath, .u-surface-band .callout, .u-surface-top .oath, .u-surface-top .callout { --paper: #efe6d2; --paper-2: #e6dbc2; --rule: #8f836d; --rule-soft: #cbbfa4; --accent: #a3261b; border-color: #8f836d; outline-color: #8f836d; }
.oath footer, .oath cite { color: var(--accent); }
.theme-toggle { border-color: var(--rule); }

/* edit: no colour switch on the plate. The facing page is gone; the engraving prints on the same ground as the text. */
.hero::before { display: none; }
.hero { min-height: 0; }
.hero .plate { padding: var(--s6) 0 var(--s6) 40px; background: transparent; }
html:not([data-theme="dark"]) .plate img { filter: none; }
html[data-theme="dark"] .plate img { filter: invert(1) hue-rotate(180deg) brightness(.92); }
.arch { border-color: var(--red); } html[data-theme="dark"] .arch { border-color: var(--gilt); }
.plate figcaption { color: var(--ink-2); }
@media (max-width: 900px) { .hero .plate { background: transparent; margin: 0; padding: var(--s5) 0; } }

/* ---- imagery pass ---- */
.brand__mark { width: 40px; height: 40px; } .site-footer .brand__mark { width: 34px; height: 34px; }
.mark-big { width: 100%; height: 100%; display: block; } .mark-box svg { color: inherit; }
.page-header .container { position: relative; }
.page-header .container:has(.niche) { padding-right: 280px; min-height: 300px; display: flex; flex-direction: column; justify-content: center; }
.niche { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); width: 200px; aspect-ratio: 3 / 4; border: 1px solid var(--red); border-radius: 50% 50% 0 0 / 38% 38% 0 0; display: flex; align-items: flex-end; justify-content: center; } html[data-theme="dark"] .niche { border-color: var(--gilt); }
.page-header__art { width: 78%; height: auto; margin-bottom: 8%; }
html[data-theme="dark"] .page-header__art, html[data-theme="dark"] .entry__art, html[data-theme="dark"] .plate-wide img { filter: invert(1) hue-rotate(180deg) brightness(.9); }
.plate-wide { margin: var(--s7) auto 0; max-width: 1180px; padding: 0 32px; } .plate-wide img { width: 100%; height: auto; }
.entry__art { width: 88px; height: 88px; margin: 0 0 var(--s3) -6px; }
.grid--2 .entry__art { width: 110px; height: 110px; }
.entry--featured .entry__art { filter: invert(1) hue-rotate(180deg) brightness(.9); } html[data-theme="dark"] .entry--featured .entry__art { filter: none; }
@media (max-width: 720px) { .page-header .container:has(.niche) { padding-right: 32px; min-height: 0; display: block; } .niche { position: static; transform: none; width: 120px; margin-bottom: var(--s5); } }
@media (min-width: 1100px) { .page-header .container.container--narrow:has(.niche) { max-width: 1180px; } }

/* rule-mark: the sprig sits in the section rule, replacing the fleuron */
.page-header::after { width: 48px; height: 26px; bottom: -13px; padding: 0; }
.rule-mark { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); width: 24px; height: 24px; color: var(--red); z-index: 1; } .rule-mark svg { width: 100%; height: 100%; display: block; }
html[data-theme="dark"] .rule-mark { color: var(--gilt); }

/* ---- utilities carried over from the first build ---- */
.skip-link { position: absolute; top: -100px; left: 16px; background: var(--ink); color: var(--paper); padding: 12px 16px; z-index: 100; font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.skip-link:focus, .skip-link:focus-visible { top: 12px; outline: 2px solid var(--accent); outline-offset: 2px; }
.italic { font-style: italic; } .u-center { text-align: center; } .u-mb-4 { margin-bottom: var(--s4); } .u-mx-auto { margin-inline: auto; }
.u-display-italic { font-family: var(--display); font-style: italic; font-size: 22px; margin-bottom: var(--s4); }
.u-narrow-center { max-width: 24ch; margin-inline: auto; } .u-lg-mb-4 { font-size: 21px; margin-bottom: var(--s4); }
.u-sm-grid-6 { font-size: 16px; display: grid; gap: var(--s6); } .guide-part { margin-top: var(--s7); }
.sprig-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.theme-toggle svg { width: 17px; height: 17px; }
.mono dd, .mono dd a { font-family: var(--body); font-size: 18px; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; } .mono dd { margin: 4px 0 0; }
@media (max-width: 1180px) {
  .nav[data-open="true"] { display: flex; position: fixed; inset: 69px 0 0 0; background: var(--paper); flex-direction: column; align-items: flex-start; padding: 32px; gap: 22px; z-index: 4; overflow: auto; }
  .nav[data-open="true"] a { font-size: 14px; } .nav[data-open="true"] .btn--header { margin-top: 8px; } }

/* ---- sanity-check repairs 2026-10-15: contrast defects found by axe-core, fixed with the system's own tokens ----
   1. Long-form links in dark mode were vermilion on charcoal (2.31:1); gilt is the night's rubric colour everywhere else.
   2. Buttons inside .longform inherited the link colour (red text on an ink button).
   3. Callouts inside night bands were painted charcoal under paper-plate ink (1.16:1); the inset plate is meant to be paper.
   4. Primary buttons inside paper plates in dark mode used gilt on paper (1.96:1).
   5. Featured entry/tier numbers on paper plates in dark mode used gilt on paper; use the plate's own accent.
   6. Kickers inside plates follow the plate's accent, like the eyebrows already do.
   7. The hero plate caption used the facing-page ink on the same-ground plate (2.16:1). */
html[data-theme="dark"] .longform a, html[data-theme="dark"] .entry__title a:hover { color: var(--amber); text-decoration-color: var(--amber); }
.longform a.btn { color: var(--ink); } .longform a.btn:hover { color: var(--paper); }
.longform a.btn--primary { color: var(--on-primary); } .longform a.btn--primary:hover { color: var(--on-primary); }
html[data-theme="dark"] .longform a.btn--primary { color: var(--amber); } html[data-theme="dark"] .longform a.btn--primary:hover { color: var(--night); }
.u-surface-band .callout, .u-surface-top .callout { background: var(--paper); }
html[data-theme="dark"] .callout .btn--primary, html[data-theme="dark"] .oath .btn--primary { background: var(--ink); border-color: var(--ink); color: var(--on-primary); }
html[data-theme="dark"] .callout .btn--primary:hover, html[data-theme="dark"] .oath .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--on-primary); }
html[data-theme="dark"] .entry--featured .entry__number, html[data-theme="dark"] .entry--featured .entry__price, html[data-theme="dark"] .tier--featured .tier__price { color: var(--accent); }
.oath .u-mono-kicker, .callout .u-mono-kicker { color: var(--accent); }
.hero .plate figcaption { color: var(--ink-2); }

/* ---- QA 2026-10-15: at 320px the header row overflowed by 45px and pushed the menu button off-screen (WCAG 1.4.10).
   At 368px and below the brand lockup shrinks and the header gap tightens; 375px phones and up are untouched. */
@media (max-width: 368px) {
  .site-header .container, .site-header__inner { gap: 12px; }
  .brand { min-width: 0; gap: 8px; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__wordmark { font-size: 21px; }
  .brand__sub { font-size: 9px; letter-spacing: .12em; margin-top: 4px; }
}