/* ══════════════════════════════════════════════════════════════════
   THE BOYS BOOK SERIES — shared stylesheet
   Palette and typeface pairing carried over from the previous site.
   Contrast corrections (verified, all body copy ≥ 7:1 on its surface):
     · --ink-soft was #6b5c48 (5.70:1 on parchment) → now #5a4a36 (7.50:1)
     · --gold is 2.37:1 on parchment — RULES AND BORDERS ONLY, never text
     · text on the dark header uses --gold-text #e6b120 (9.21:1 on ink)
   ══════════════════════════════════════════════════════════════════ */

:root {
  --ink:        #1a1510;  /* 15.98:1 on parch */
  --ink-mid:    #3d3428;  /* 10.76:1 on parch · 9.82:1 on parch-dark */
  --ink-soft:   #5a4a36;  /*  7.50:1 on parch — parchment surfaces only */
  --parch:      #f5f0e8;
  --parch-dark: #ede6d6;
  --parch-deep: #e0d5c0;
  --crimson:    #8b1a1a;  /*  8.19:1 on parch · parch on crimson 8.19:1 */
  --crimson-lt: #b02424;
  --crimson-dk: #6f1414;
  --gold:       #c8960c;  /* decorative only */
  --gold-text:  #e6b120;  /*  9.21:1 on ink */
  --rule:       rgba(26,21,16,0.18);
  --rule-heavy: rgba(26,21,16,0.42);

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --font-stamp:   'Special Elite', 'Courier New', monospace;

  --measure: 65ch;         /* hard cap on line length */
  --shell:   1040px;
  --gutter:  22px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--parch);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 20px;           /* spec: 18px minimum, 20px preferred */
  line-height: 1.65;         /* spec: ≥ 1.6 */
  min-height: 100vh;
  overflow-x: hidden;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; }
p { max-width: var(--measure); }

/* ─── Focus: always visible, never removed ─────────────────────── */
:focus-visible {
  outline: 3px solid var(--crimson);
  outline-offset: 3px;
  border-radius: 2px;
}
.site-header :focus-visible { outline-color: var(--gold-text); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--parch);
  padding: 14px 20px; z-index: 50; font-family: var(--font-stamp);
}
.skip-link:focus { left: 0; }

/* ─── Motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════ HEADER + NAV (identical on every page) ══════════ */
.site-header {
  background: var(--ink);
  border-bottom: 4px solid var(--gold);
}

.masthead {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 20px var(--gutter) 14px;
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  min-height: 48px;
  justify-content: center;
}
.wordmark-the {
  font-family: var(--font-stamp);
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.wordmark-main {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(27px, 7vw, 40px);
  color: var(--parch);
  line-height: 1.05;
  margin-top: 3px;
}
.wordmark-sub {
  font-family: var(--font-stamp);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parch);
  opacity: 0.92;
  margin-top: 6px;
}

/* Nav: a 4-up grid that becomes 2×2 on small screens.
   Never a hamburger, never hidden, never behind hover.

   DELIBERATE DEVIATION from the 12px-between-targets rule: the four nav
   cells sit flush, divided by hairlines, because that is what makes the
   masthead read as printed rather than as a row of chips. The mis-tap risk
   is offset by 60px-tall cells (25% over the 48px floor) and by every
   destination being harmless navigation. The 12px rule is enforced
   everywhere it protects a real decision — buy buttons, form fields,
   card CTAs and footer links. */
.site-nav {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.site-nav ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(245,240,232,0.22);
}
.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60px;                    /* 25% over the 48px floor — see note below */
  padding: 10px 8px;
  font-family: var(--font-stamp);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--parch);
  text-decoration: none;
  border-bottom: 4px solid transparent;
  border-right: 1px solid rgba(245,240,232,0.14);
  line-height: 1.25;
}
.site-nav li:last-child .nav-link { border-right: 0; }
.nav-link[aria-current="page"] {
  color: var(--gold-text);
  border-bottom-color: var(--gold-text);
  background: rgba(255,255,255,0.05);
}

@media (max-width: 700px) {
  .site-nav ul { grid-template-columns: repeat(2, 1fr); }
  .site-nav li:nth-child(2) .nav-link { border-right: 0; }
  .site-nav li:nth-child(3) .nav-link,
  .site-nav li:nth-child(4) .nav-link { border-top: 1px solid rgba(245,240,232,0.14); }
  .nav-link { font-size: 15px; letter-spacing: 0.06em; min-height: 58px; }
}

/* ══════════════ SHELL + EDITORIAL FURNITURE ════════════════════ */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* The printed thesis line under the masthead */
.thesis {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 26px var(--gutter) 0;
}
.thesis-line { flex: 1; height: 2px; background: var(--rule-heavy); }
.thesis-text {
  font-family: var(--font-stamp);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 620px) {
  .thesis { flex-direction: column; gap: 10px; }
  .thesis-line { width: 100%; flex: none; }
}

/* Roman-numeral section marker */
.section {
  padding: 46px 0;
  border-top: 2px solid var(--rule);
}
.section:first-of-type { border-top: 0; }

.marker {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 26px;
}
.marker-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 26px;
  color: var(--crimson);
  line-height: 1;
}
.marker-text {
  font-family: var(--font-stamp);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; }

.page-title {
  font-size: clamp(32px, 6.2vw, 46px);
  font-weight: 900;
  margin: 30px 0 16px;
  max-width: 22ch;
}
.page-intro { font-size: 20px; color: var(--ink-mid); margin-bottom: 8px; }

/* ══════════════ BUTTONS ════════════════════════════════════════ */
/* Solid fill, hard border, obvious label. No ghost buttons anywhere. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 15px 30px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
  cursor: pointer;
  background: var(--crimson);
  color: var(--parch);
  border: 2px solid var(--crimson-dk);
  box-shadow: 0 3px 0 var(--crimson-dk);
  transition: background 0.15s ease;
}
.btn:hover { background: var(--crimson-lt); }
.btn:active { box-shadow: 0 1px 0 var(--crimson-dk); transform: translateY(2px); }
.btn-lg { font-size: 23px; min-height: 66px; padding: 17px 38px; }
.btn-block { display: flex; width: 100%; }

/* Dark solid variant — still a filled button, not a ghost */
.btn-ink {
  background: var(--ink);
  color: var(--parch);
  border-color: #000;
  box-shadow: 0 3px 0 #000;
}
.btn-ink:hover { background: #2c2418; }

/* NOT-A-BUTTON. Volume 3 has nothing to click yet, so this must not read as a
   button — a filled crimson plate that does nothing is a dead end for exactly
   the reader this site is built for. It is a <span>, so there is no href, no
   pointer, and no tab stop.

   It is dimmed by SHAPE, not by contrast: dashed border, no fill, no shadow.
   The usual grey-on-grey disabled style would drop this to ~2:1 and make it
   unreadable; the text here stays --ink on parchment at 15.98:1. It keeps the
   60px height so the card's rhythm matches its two siblings. */
.btn-soon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 15px 26px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  border: 2px dashed var(--rule);
  box-shadow: none;
  cursor: default;
}

/* Secondary purchase route: a plainly-labelled link, deliberately
   quieter than the primary button so the two never compete. */
.alt-buy {
  display: inline-block;
  min-height: 48px;
  padding: 13px 4px;
  font-size: 18px;
  color: var(--crimson);
  font-family: var(--font-body);
}

/* ══════════════ HOME — HERO ════════════════════════════════════ */
.hero { padding: 34px 0 44px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(38px, 8.4vw, 62px);
  font-weight: 900;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
  max-width: 15ch;
}
.hero h1 em { font-style: italic; color: var(--crimson); }
.hero-sub {
  font-size: 21px;
  color: var(--ink-mid);
  margin-bottom: 28px;
  max-width: 34ch;
}

/* The three covers, arranged with depth so they read as objects.
   See the swap-point comment in index.html. */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  padding: 26px 0 18px;
}
.hero-photo {
  width: 100%;
  border: 1px solid var(--rule-heavy);
  border-radius: 3px;
}
.trio-cover {
  width: 33%;
  max-width: 190px;
  border-radius: 3px;
  border: 1px solid rgba(26,21,16,0.35);
  box-shadow: 5px 10px 26px rgba(26,21,16,0.38);
}
.trio-1 { transform: rotate(-5deg) translateY(8px); z-index: 1; }
.trio-2 { transform: translateY(-14px) scale(1.1); z-index: 3; margin: 0 -3%; }
.trio-3 { transform: rotate(5deg) translateY(8px); z-index: 2; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .trio-cover { width: 34%; max-width: 210px; }
  .hero-visual { order: -1; }        /* books first on mobile: he sees the product */
  .hero h1 { max-width: 100%; }
  .hero-sub { max-width: var(--measure); }
}

/* ══════════════ HOME — THREE VOLUMES ═══════════════════════════ */
.volumes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.vol-card {
  display: flex;
  flex-direction: column;
  background: var(--parch-dark);
  border: 2px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.vol-card-band { height: 8px; }
.vol-card-cover {
  width: 100%;
  border-bottom: 2px solid var(--rule);
  background: var(--parch-deep);
}
.vol-card-body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}
.vol-label {
  font-family: var(--font-stamp);
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
}
.vol-card-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.18;
  color: var(--ink);
}
.vol-card-desc { font-size: 18px; color: var(--ink-mid); flex: 1; }
.vol-card-body .btn { margin-top: 6px; font-size: 19px; }

@media (max-width: 860px) {
  .volumes { grid-template-columns: 1fr; gap: 24px; }
  .vol-card { flex-direction: row; align-items: stretch; }
  .vol-card-band { display: none; }
  .vol-card-cover { width: 38%; max-width: 170px; border-bottom: 0; border-right: 2px solid var(--rule); object-fit: cover; }
  .vol-card-body { width: 62%; }
}
@media (max-width: 420px) {
  .vol-card { flex-direction: column; }
  .vol-card-cover { width: 100%; max-width: none; border-right: 0; border-bottom: 2px solid var(--rule); }
  .vol-card-body { width: 100%; }
}

/* ══════════════ SOCIAL PROOF ═══════════════════════════════════ */
.quote {
  background: var(--parch-dark);
  border: 2px solid var(--rule);
  border-left: 6px solid var(--crimson);
  border-radius: 3px;
  padding: 22px 22px 20px;
}
.quote blockquote {
  font-size: 19px;
  color: var(--ink);
  font-style: italic;
  margin-bottom: 14px;
  max-width: var(--measure);
}
.quote figcaption {
  font-family: var(--font-stamp);
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
/* Solo testimonial. One real review carries the section, so it is centred
   and given more presence than a lone card in a three-up grid would have.
   Stars are crimson, not gold: gold on parchment is 2.37:1, below the 3:1
   floor for meaningful non-text content. Crimson is 8.19:1. */
.quote-solo {
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
  border: 2px solid var(--rule);
  border-left-width: 2px;
  border-left-color: var(--rule);
  border-top: 5px double var(--crimson);
  border-bottom: 5px double var(--crimson);
  padding: 26px 24px 22px;
}
.quote-solo .stars {
  /* Libre Baskerville has no U+2605, so name the symbol faces explicitly
     rather than letting each platform pick its own fallback. */
  font-family: 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif;
  color: var(--crimson);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.16em;
  margin: 0 0 16px;
}
.quote-solo blockquote {
  font-size: inherit;
  font-style: normal;
  margin: 0 0 16px;
  max-width: none;
}
.quote-solo blockquote p {
  font-size: 21px;
  line-height: 1.6;
  font-style: italic;
  color: var(--ink);
  margin: 0 auto 12px;
  max-width: var(--measure);
}
.quote-solo blockquote p:last-child { margin-bottom: 0; }
/* 18px, not the 17px of the old three-up cards: with one quote there is
   room, and an attribution the buyer is meant to read should clear the
   same floor as the prose. #3d3428 on #ede6d6 is 9.82:1. */
.quote-solo figcaption { font-size: 18px; }

/* Coming-soon status. The band is baked into the Volume 3 cover image, so
   this is the same fact as real text for anyone who has images off, and it
   sits above the description rather than replacing it. 18px, and crimson
   on parchment is 8.19:1. */
.status-soon {
  font-family: var(--font-stamp);
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 6px;
}
@media (max-width: 520px) {
  .quote-solo { padding: 22px 18px 18px; }
  .quote-solo blockquote p { font-size: 20px; }
}

/* ══════════════ WHY / PROSE BLOCKS ═════════════════════════════ */
.creed {
  background: var(--parch-dark);
  border: 2px solid var(--rule);
  border-top: 6px solid var(--crimson);
  border-radius: 3px;
  padding: 30px 26px;
}
.creed p { font-size: 21px; color: var(--ink); }
.creed p + p { margin-top: 14px; }

.prose p, .prose li { font-size: 20px; color: var(--ink-mid); max-width: var(--measure); }
.prose p + p { margin-top: 18px; }
.prose h2 {
  font-size: 30px;
  font-weight: 900;
  color: var(--ink);
  margin: 40px 0 14px;
  padding-top: 26px;
  border-top: 2px solid var(--rule);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose strong { color: var(--ink); }

/* ══════════════ EMAIL CAPTURE ══════════════════════════════════ */
.signup {
  background: var(--ink);
  border-radius: 4px;
  border-top: 6px solid var(--gold);
  padding: 34px 26px;
}
.signup h2 { color: var(--parch); font-size: clamp(28px, 5.6vw, 36px); font-weight: 900; margin-bottom: 8px; }
.signup-note { color: var(--parch); font-size: 18px; opacity: 0.95; max-width: 46ch; margin-top: 14px; }
.signup-form {
  display: flex;
  gap: 12px;                        /* ≥ 12px between adjacent targets */
  margin-top: 20px;
  flex-wrap: wrap;
  align-items: stretch;
}
.signup-form label {
  font-family: var(--font-stamp);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  display: block;
  width: 100%;
  margin-bottom: -6px;
}
.field {
  flex: 1 1 260px;
  min-height: 60px;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 20px;
  color: var(--ink);
  background: var(--parch);
  border: 2px solid var(--ink);
  border-radius: 3px;
}
.field::placeholder { color: #5a4a36; opacity: 1; }
.signup-form .btn { flex: 0 0 auto; }
.form-status {
  margin-top: 16px;
  font-size: 19px;
  color: var(--parch);
  font-weight: 700;
  font-family: var(--font-display);
}
.form-status:empty { display: none; }

/* Honeypot — off-screen AND hidden from assistive tech */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ══════════════ BOOK LISTING + DETAIL ═════════════════════════ */
.book-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 34px;
  padding: 38px 0;
  border-top: 2px solid var(--rule);
  align-items: start;
}
.book-row:first-of-type { border-top: 0; }
.book-row-cover {
  border: 1px solid var(--rule-heavy);
  border-radius: 3px;
  box-shadow: 4px 8px 24px rgba(26,21,16,0.3);
}
.book-row h2 { font-size: 30px; font-weight: 900; margin: 8px 0 10px; }
.book-row p { font-size: 19px; color: var(--ink-mid); margin-bottom: 18px; }

.detail-top {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 42px;
  align-items: start;
  padding-bottom: 8px;
}
.detail-cover {
  border: 1px solid var(--rule-heavy);
  border-radius: 3px;
  box-shadow: 6px 12px 32px rgba(26,21,16,0.34);
  width: 100%;
}
.detail-vol {
  font-family: var(--font-stamp);
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson);
  margin-bottom: 10px;
}
.detail-title { font-size: clamp(31px, 6vw, 44px); font-weight: 900; margin-bottom: 10px; }
.detail-tagline { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--ink-mid); margin-bottom: 18px; }
.specs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 22px; }
.specs li {
  font-family: var(--font-stamp);
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.specs li::before { content: "◆"; color: var(--crimson); margin-right: 8px; }

@media (max-width: 780px) {
  .detail-top { grid-template-columns: 1fr; gap: 24px; }
  .detail-cover { max-width: 300px; margin: 0 auto; }
  .book-row { grid-template-columns: 1fr; gap: 20px; }
  .book-row-cover { max-width: 220px; }
}

/* Contents list */
.contents { list-style: none; border-top: 2px solid var(--rule); margin-top: 6px; }
.contents li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 13px 2px;
  border-bottom: 1px solid var(--rule);
  font-size: 19px;
}
.contents-num {
  font-family: var(--font-stamp);
  font-size: 16px;
  color: var(--crimson);
  flex: 0 0 2.4em;
  letter-spacing: 0.04em;
}
.contents-name { color: var(--ink); }

/* Purchase panel */
.buy-panel {
  background: var(--parch-dark);
  border: 2px solid var(--rule-heavy);
  border-top: 6px solid var(--crimson);
  border-radius: 4px;
  padding: 28px 26px;
}
.price {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 44px;
  color: var(--ink);
  line-height: 1;
}
.price-label {
  font-family: var(--font-stamp);
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-top: 8px;
}
.buy-panel .btn { margin-top: 20px; }
.buy-alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.buy-why { font-size: 18px; color: var(--ink-mid); margin-top: 10px; }
.ship {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 18px;
  color: var(--ink-mid);
}

/* Next-volume link — every page ends with somewhere to go */
.onward {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 2px solid var(--rule);
}
.onward-label {
  font-family: var(--font-stamp);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  width: 100%;
}

/* ══════════════ SCHOOLS ═══════════════════════════════════════ */
.offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.offer {
  background: var(--parch-dark);
  border: 2px solid var(--rule);
  border-radius: 3px;
  padding: 24px 24px 26px;
}
.offer-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 28px;
  color: var(--crimson);
  line-height: 1;
  margin-bottom: 10px;
}
.offer h3 { font-size: 23px; font-weight: 900; margin-bottom: 10px; }
.offer p { font-size: 18px; color: var(--ink-mid); }
@media (max-width: 780px) { .offers { grid-template-columns: 1fr; } }

.direct-line {
  background: var(--parch-dark);
  border: 2px solid var(--rule-heavy);
  border-left: 6px solid var(--crimson);
  border-radius: 3px;
  padding: 22px 24px;
  margin-bottom: 26px;
}
.direct-line .mail {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(21px, 4.6vw, 28px);
  color: var(--crimson);
  display: inline-block;
  min-height: 48px;
  padding: 6px 0;
  word-break: break-word;
}

.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.contact-form .fieldwrap { display: flex; flex-direction: column; gap: 7px; }
.contact-form .full { grid-column: 1 / -1; }
.contact-form label {
  font-family: var(--font-stamp);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
}
.contact-form .field { background: var(--parch); width: 100%; }
textarea.field { min-height: 130px; resize: vertical; line-height: 1.6; }
@media (max-width: 640px) { .contact-form { grid-template-columns: 1fr; } }

/* ══════════════ FOOTER ════════════════════════════════════════ */
.site-footer {
  background: var(--ink);
  color: var(--parch);
  border-top: 4px solid var(--gold);
  margin-top: 60px;
  padding: 40px 0 34px;
}
.footer-grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 34px;
}
.footer-brand { font-family: var(--font-display); font-weight: 900; font-size: 26px; color: var(--parch); }
.footer-thesis {
  font-family: var(--font-stamp);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-top: 8px;
}
.footer-mail {
  display: inline-block;
  color: var(--parch);
  font-size: 20px;
  min-height: 48px;
  padding: 12px 0;
  word-break: break-word;
}
.footer-nav ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 6px 0;
  color: var(--parch);
  font-size: 19px;
}
.footer-legal {
  max-width: var(--shell);
  margin: 30px auto 0;
  padding: 22px var(--gutter) 0;
  border-top: 1px solid rgba(245,240,232,0.24);
  font-size: 18px;
  color: var(--parch);
}
.footer-legal p { max-width: none; opacity: 0.95; }
.footer-legal p + p { margin-top: 6px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 18px; } }

/* Utility */
.center { text-align: center; }
.stack-cta { margin-top: 34px; padding-top: 28px; border-top: 2px solid var(--rule); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Status line on light surfaces (Schools contact form) */
.contact-form .form-status {
  grid-column: 1 / -1;
  color: var(--crimson-dk);
  margin-top: 0;
}

/* Purchase panel sits in a readable column, never a full-bleed button */
.buy-panel { max-width: 560px; }
.detail-images { display: flex; flex-direction: column; }