/* ==========================================================================
   Weird & Strong, Moorhead MN
   "A comic-book club newsletter printed on cheap paper by people who love
   lifting." See research/synthesis.md, section 4, for the brief.

   Paper and ink. Orange from the wordmark, purple from the coach's jacket.
   Panels with hard shadows, halftone over real photos, speech bubbles for
   people, typewriter stat blocks for facts. Nothing glows, nothing blurs.
   ========================================================================== */

:root {
  --paper:      #f6f1e7;
  --paper-2:    #ece4d4;
  --white:      #fffdf8;
  --ink:        #141210;
  --ink-soft:   #3a3631;
  --ink-muted:  #6b655c;
  --rule:       #c9bfab;

  --orange:     #f89000;
  --orange-ink: #b35c00;   /* orange as text on paper, 5:1 */
  --purple:     #6b4fe0;
  --purple-ink: #4f38b8;   /* purple as text on paper, 6:1 */
  --yellow:     #ffe08a;   /* comic caption box */
  --halftone:   0.14;      /* dot screen over photos: 0 removes it, 0.35 is heavy print */

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-sfx:     "Bangers", "Impact", sans-serif;
  --font-body:    "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono:    "Courier Prime", "Courier New", monospace;

  --container: 1140px;
  --pad: clamp(56px, 8vw, 104px);
  --border: 3px;
  --shadow: 8px 8px 0 var(--ink);
  --shadow-sm: 5px 5px 0 var(--ink);
  --radius: 4px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img, picture { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

.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-link { position: absolute; left: 16px; top: -70px; z-index: 100; background: var(--orange); color: var(--ink); font-family: var(--font-display); font-weight: 700; padding: 10px 16px; border: var(--border) solid var(--ink); text-decoration: none; transition: top 0.2s; }
.skip-link:focus { top: 12px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
@media (min-width: 720px) { .container { padding: 0 32px; } }
.section { padding: var(--pad) 0; }
.section-tight { padding: calc(var(--pad) * 0.55) 0; }
.section-paper2 { background: var(--paper-2); }
.section-ink { background: var(--ink); color: var(--paper); }

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 900; line-height: 1.02; letter-spacing: -0.01em; }
h1 { font-size: clamp(44px, 7.2vw, 92px); }
h2 { font-size: clamp(32px, 4.6vw, 56px); }
h3 { font-size: clamp(22px, 2.4vw, 28px); }
.h-sm { font-size: 22px; }
.weird { color: var(--purple-ink); position: relative; white-space: nowrap; }
.weird::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 0.16em; background: var(--orange); z-index: -1; transform: rotate(-1deg); }
.hl { background: linear-gradient(transparent 55%, var(--orange) 55%, var(--orange) 92%, transparent 92%); padding: 0 2px; }

.lede { font-size: clamp(19px, 1.55vw, 22px); line-height: 1.5; color: var(--ink-soft); max-width: 60ch; }
.lede strong { color: var(--ink); font-weight: 600; }
.prose > * + * { margin-top: 1em; }
.prose p { max-width: 66ch; }
.prose h2 { margin-top: 1.5em; font-size: 30px; }
.prose h3 { margin-top: 1.3em; }
.prose a { color: var(--purple-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose em, .lede em { font-style: italic; }
.muted { color: var(--ink-muted); }
.small { font-size: 15px; }
.mono { font-family: var(--font-mono); }
.label { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }

.sfx {
  font-family: var(--font-sfx); font-weight: 400; letter-spacing: 0.02em; line-height: 0.9;
  color: var(--ink); text-shadow: 3px 3px 0 var(--orange); display: inline-block; transform: rotate(-3deg);
}
.sfx-purple { text-shadow: 3px 3px 0 var(--purple); }
.sfx-paper { color: var(--paper); text-shadow: 3px 3px 0 var(--purple); }
.sfx-sm { font-size: clamp(22px, 2.6vw, 32px); text-shadow: 2px 2px 0 var(--orange); }
.sfx-lg { font-size: clamp(56px, 10vw, 150px); text-shadow: 5px 5px 0 var(--orange); }
.sfx-num { font-size: clamp(44px, 5vw, 64px); text-shadow: 3px 3px 0 var(--orange); transform: rotate(-4deg); }

.section-head { margin-bottom: clamp(28px, 4vw, 48px); max-width: 780px; }
.section-head .label { display: block; margin-bottom: 10px; }
.section-head .lede { margin-top: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer;
  padding: 13px 22px; border: var(--border) solid var(--ink); border-radius: 6px;
  background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn-lg { padding: 16px 28px; font-size: 18px; }
.btn-sm { padding: 9px 14px; font-size: 14px; box-shadow: 3px 3px 0 var(--ink); }
.btn-orange { background: var(--orange); }
.btn-purple { background: var(--purple); color: var(--white); }
.btn-ink { background: var(--ink); color: var(--paper); box-shadow: 5px 5px 0 var(--orange); }
.btn-ink:hover { box-shadow: 7px 7px 0 var(--orange); }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px 18px; align-items: center; }

.text-link { font-family: var(--font-display); font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 3px solid var(--orange); padding-bottom: 2px; transition: border-color 0.15s, color 0.15s; }
.text-link:hover { color: var(--purple-ink); border-color: var(--purple); }

/* ---------- Panels, captions, bubbles, stickers, stats ---------- */
.panel { background: var(--white); border: var(--border) solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(22px, 3vw, 34px); position: relative; }
.panel-paper { background: var(--paper); }
.panel-paper2 { background: var(--paper-2); }
.panel-flush { padding: 0; overflow: hidden; }
.panel-orange { background: var(--orange); }

.caption-box {
  display: inline-block; font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.3;
  background: var(--yellow); color: var(--ink); border: var(--border) solid var(--ink);
  padding: 8px 12px; box-shadow: 4px 4px 0 var(--ink);
}

.bubble { position: relative; background: var(--white); border: var(--border) solid var(--ink); border-radius: 22px; padding: 26px 28px 24px; }
.bubble::before, .bubble::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; }
.bubble::before { left: 40px; bottom: -26px; border-width: 26px 24px 0 0; border-color: var(--ink) transparent transparent transparent; }
.bubble::after { left: 44px; bottom: -19px; border-width: 20px 18px 0 0; border-color: var(--white) transparent transparent transparent; }
.bubble-right::before { left: auto; right: 40px; border-width: 26px 0 0 24px; border-color: var(--ink) transparent transparent transparent; }
.bubble-right::after { left: auto; right: 44px; border-width: 20px 0 0 18px; border-color: var(--white) transparent transparent transparent; }
.bubble-top::before { bottom: auto; top: -26px; left: 40px; border-width: 0 24px 26px 0; border-color: transparent transparent var(--ink) transparent; }
.bubble-top::after { bottom: auto; top: -19px; left: 44px; border-width: 0 18px 20px 0; border-color: transparent transparent var(--white) transparent; }
.bubble p { font-size: 17.5px; line-height: 1.55; }
.bubble .who { display: block; margin-top: 16px; font-family: var(--font-mono); font-size: 14px; color: var(--ink-soft); }
.bubble .who strong { color: var(--ink); }

.sticker {
  display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; line-height: 1;
  padding: 8px 12px; border-radius: 999px; background: var(--orange); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--ink);
  margin: 4px 6px 6px 4px;
}
.sticker-purple { background: var(--purple); color: var(--white); }
.sticker-paper { background: var(--paper); }
.sticker-ink { background: var(--ink); color: var(--paper); }
.r1 { transform: rotate(-2deg); } .r2 { transform: rotate(1.5deg); } .r3 { transform: rotate(-1deg); } .r4 { transform: rotate(2.5deg); }
.stickers { display: flex; flex-wrap: wrap; gap: 6px 8px; }

.stats { font-family: var(--font-mono); font-size: 15.5px; display: grid; gap: 10px; }
.stats > div { display: flex; align-items: baseline; gap: 10px; }
.stats dt { display: flex; flex: 1 1 42%; text-transform: uppercase; font-size: 13px; letter-spacing: 0.06em; color: var(--ink-muted); white-space: nowrap; }
.stats dt::after { content: ""; flex: 1; border-bottom: 2px dotted var(--rule); margin: 0 8px 5px; }
.stats dd { font-weight: 700; text-align: right; flex: 1 1 58%; }
.stats dd a { color: var(--ink); }
.stats-2 { grid-template-columns: 1fr; }
@media (min-width: 1000px) { .stats-2 { grid-template-columns: 1fr 1fr; column-gap: 44px; } }

/* Halftone over real photos. Real, but printed. */
.ht { position: relative; overflow: hidden; }
.ht img { width: 100%; height: 100%; object-fit: cover; }
.ht::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(20, 18, 16, 0.45) 0.8px, transparent 1.3px); background-size: 4px 4px; mix-blend-mode: multiply; opacity: var(--halftone); }
.dots { background-image: radial-gradient(circle, rgba(20, 18, 16, 0.18) 1px, transparent 1.6px); background-size: 9px 9px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--paper); border-bottom: var(--border) solid var(--orange); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 82px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 58px; width: auto; }
.nav { display: none; align-items: center; gap: 4px; }
.nav a { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--paper); text-decoration: none; padding: 10px 14px; border-radius: 6px; transition: color 0.15s, background 0.15s; }
.nav a:hover { color: var(--orange); }
.nav a[aria-current="page"] { color: var(--orange); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.header-cta { display: none; box-shadow: 4px 4px 0 var(--paper); }
.header-cta:hover { box-shadow: 6px 6px 0 var(--paper); }
.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0 11px; background: var(--paper); border: var(--border) solid var(--ink); border-radius: 6px; cursor: pointer; box-shadow: 3px 3px 0 var(--orange); }
.nav-toggle span { display: block; height: 3px; background: var(--ink); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.mobile-nav { display: none; border-top: 2px dotted rgba(246, 241, 231, 0.35); padding: 10px 0 22px; }
.mobile-nav.is-open { display: block; }
.mobile-nav a { display: block; padding: 14px 6px; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 20px; border-bottom: 2px dotted rgba(246, 241, 231, 0.25); color: var(--paper); }
.mobile-nav a[aria-current="page"] { color: var(--orange); }
.mobile-nav .btn { margin-top: 18px; }
@media (min-width: 900px) {
  .nav { display: flex; }
  .header-cta { display: inline-flex; }
  .nav-toggle, .mobile-nav { display: none !important; }
  .brand img { height: 66px; }
}

/* ---------- Cover (hero) ---------- */
.cover { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 7vw, 96px); }
.cover::before { content: ""; position: absolute; inset: -20% -10%; pointer-events: none; background: repeating-conic-gradient(from 0deg at 72% 42%, rgba(20, 18, 16, 0.05) 0deg 1deg, transparent 1deg 7deg); }
.cover-grid { position: relative; display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .cover-grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; } }
.cover .sfx-sm { margin-bottom: 14px; margin-left: 6px; }
.cover h1 { text-transform: uppercase; margin-bottom: 22px; }
.cover h1 .line { display: block; }
.cover .lede { margin-bottom: 30px; }
.cover-media { position: relative; }
.cover-media .photo-panel { aspect-ratio: 4 / 5; max-height: 640px; }
.cover-media .caption-box { position: absolute; top: -16px; left: -12px; transform: rotate(-2deg); z-index: 2; max-width: 80%; }
.cover-media .sticker { position: absolute; right: -10px; bottom: 26px; z-index: 2; font-size: 14px; padding: 10px 14px; }

.photo-panel { border: var(--border) solid var(--ink); box-shadow: var(--shadow); border-radius: var(--radius); background: var(--paper-2); }
.photo-panel .ht { height: 100%; }
.photo-panel img { aspect-ratio: inherit; }

/* ---------- Stat block ---------- */
.statboard { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .statboard { grid-template-columns: 0.9fr 1.6fr; gap: 48px; } }
.statboard .lead h2 { margin-bottom: 14px; }

/* ---------- Paths / program panels ---------- */
.paths { display: grid; gap: 36px; }
@media (min-width: 980px) { .paths { grid-template-columns: 1fr 1fr; gap: 40px; } }
.path-panel { padding: 0; display: flex; flex-direction: column; }
.path-head { padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 30px) 18px; border-bottom: var(--border) solid var(--ink); display: flex; gap: 18px; align-items: flex-start; }
.path-head .sfx-num { flex: none; margin-top: -6px; }
.path-head h2, .path-head h3 { font-size: clamp(28px, 3vw, 36px); margin-bottom: 8px; }
.path-head p { color: var(--ink-soft); font-size: 17px; }
.program-list { list-style: none; padding: 6px clamp(22px, 3vw, 30px) 10px; }
.program-list li { padding: 20px 0; border-bottom: 2px dotted var(--rule); }
.program-list li:last-child { border-bottom: 0; }
.program-list a { text-decoration: none; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: start; }
.program-list h3, .program-list h4 { font-size: 21px; font-weight: 700; grid-column: 1; transition: color 0.15s; }
.program-list a:hover h3, .program-list a:hover h4 { color: var(--purple-ink); }
.program-list p { grid-column: 1; color: var(--ink-soft); font-size: 16.5px; }
.program-list .arrow { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-family: var(--font-display); font-weight: 900; font-size: 28px; color: var(--orange-ink); transition: transform 0.15s; }
.program-list a:hover .arrow { transform: translateX(4px); }
.program-list .stickers { grid-column: 1; margin-top: 6px; }
.program-list .sticker { font-size: 12px; padding: 6px 10px; margin: 2px 6px 4px 2px; }
.path-foot { margin-top: auto; padding: 16px clamp(22px, 3vw, 30px) 22px; border-top: 2px dotted var(--rule); font-family: var(--font-mono); font-size: 14px; color: var(--ink-soft); }

/* ---------- Coach bubble ---------- */
.aside-bubble { display: grid; gap: 30px; align-items: end; }
@media (min-width: 820px) { .aside-bubble { grid-template-columns: 200px 1fr; gap: 36px; } }
.aside-bubble .photo-panel { aspect-ratio: 1; box-shadow: var(--shadow-sm); }
.aside-bubble .bubble { margin-bottom: 30px; }
@media (min-width: 820px) { .aside-bubble .bubble { margin-bottom: 0; } .aside-bubble .bubble::before, .aside-bubble .bubble::after { display: none; } .aside-bubble .bubble-left::before, .aside-bubble .bubble-left::after { display: block; } }
.bubble-left::before { left: -26px; bottom: 34px; border-width: 0 26px 24px 0; border-color: transparent var(--ink) transparent transparent; }
.bubble-left::after { left: -19px; bottom: 38px; border-width: 0 20px 18px 0; border-color: transparent var(--white) transparent transparent; }

/* ---------- Quest map ---------- */
.quest { list-style: none; position: relative; display: grid; gap: 28px; counter-reset: q; }
@media (min-width: 900px) { .quest { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.quest::before { content: ""; position: absolute; left: 30px; top: 20px; bottom: 20px; border-left: 3px dashed var(--ink); opacity: 0.55; }
@media (min-width: 900px) { .quest::before { left: 14%; right: 14%; top: 31px; bottom: auto; border-left: 0; border-top: 3px dashed var(--ink); } }
.quest li { position: relative; padding-left: 78px; }
@media (min-width: 900px) { .quest li { padding-left: 0; padding-top: 84px; text-align: center; } }
.quest .num { position: absolute; left: 0; top: 0; width: 62px; height: 62px; border-radius: 50%; background: var(--orange); border: var(--border) solid var(--ink); box-shadow: 4px 4px 0 var(--ink); display: grid; place-items: center; font-family: var(--font-sfx); font-size: 30px; color: var(--ink); }
@media (min-width: 900px) { .quest .num { left: 50%; transform: translateX(-50%); } }
.quest li:nth-child(2) .num { background: var(--purple); color: var(--white); }
.quest li:nth-child(3) .num { background: var(--white); }
.quest h3 { font-size: 22px; margin-bottom: 8px; }
.quest p { color: var(--ink-soft); font-size: 16.5px; }
@media (min-width: 900px) { .quest p { max-width: 32ch; margin: 0 auto; } }

/* ---------- Character sheet (coach) ---------- */
.sheet { display: grid; gap: 36px; align-items: start; }
@media (min-width: 900px) { .sheet { grid-template-columns: 0.85fr 1.15fr; gap: 56px; } }
.sheet .photo-panel { aspect-ratio: 1; transform: rotate(-1.5deg); }
.sheet-card .label { display: block; margin-bottom: 8px; }
.sheet-card h2 { margin-bottom: 6px; }
.sheet-card .role { font-family: var(--font-mono); font-size: 15px; color: var(--ink-soft); margin-bottom: 18px; }
.sheet-card .stats { margin: 20px 0 22px; }
.sheet-card .stickers { margin-bottom: 22px; }

/* ---------- Bubbles (testimonials) ---------- */
.bubbles { display: grid; gap: 44px 28px; align-items: start; }
@media (min-width: 900px) { .bubbles { grid-template-columns: repeat(3, 1fr); } .bubbles > :nth-child(2) { margin-top: 40px; } .bubbles > :nth-child(3) { margin-top: 12px; } }
.bubbles .bubble p { font-style: italic; }

/* ---------- Club rules poster ---------- */
.rules { counter-reset: rule; list-style: none; display: grid; gap: 0; }
.rules li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px 0; border-bottom: var(--border) solid var(--ink); counter-increment: rule; }
.rules li:last-child { border-bottom: 0; }
.rules li::before { content: counter(rule, decimal-leading-zero); font-family: var(--font-sfx); font-size: 44px; line-height: 1; color: var(--ink); text-shadow: 3px 3px 0 var(--orange); }
.rules li:nth-child(even)::before { text-shadow: 3px 3px 0 var(--purple); }
.rules h3 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 6px; }
.rules p { color: var(--ink-soft); font-size: 17px; max-width: 60ch; }
@media (min-width: 900px) { .rules-2col { grid-template-columns: 1fr 1fr; column-gap: 48px; } .rules-2col li:nth-last-child(2) { border-bottom: 0; } }

/* ---------- Where we lift ---------- */
.where { display: grid; gap: 36px; align-items: start; }
@media (min-width: 900px) { .where { grid-template-columns: 1.1fr 0.9fr; gap: 56px; } }
.where .photo-panel { aspect-ratio: 4 / 5; max-height: 560px; transform: rotate(1deg); }
.addr { font-style: normal; font-size: 18px; line-height: 1.5; }
.addr strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.schedule-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 15px; }
.schedule-table th, .schedule-table td { text-align: left; padding: 11px 10px 11px 0; border-bottom: 2px dotted var(--rule); vertical-align: top; }
.schedule-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); font-weight: 700; }
.schedule-table td strong { white-space: nowrap; }
.schedule-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Questions ---------- */
.faq-list { max-width: 820px; }
details.faq { border-bottom: 2px dotted var(--rule); }
details.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 18px 0; font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.3; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before { content: "Q."; font-family: var(--font-sfx); font-size: 30px; line-height: 1; color: var(--ink); text-shadow: 2px 2px 0 var(--orange); transform: rotate(-4deg); margin-top: -3px; }
details.faq[open] summary::before { text-shadow: 2px 2px 0 var(--purple); }
details.faq .answer { padding: 0 0 22px 56px; color: var(--ink-soft); max-width: 66ch; }

/* ---------- Close (final CTA) ---------- */
.close { text-align: center; position: relative; overflow: hidden; }
.close .sfx-lg { margin-bottom: 26px; max-width: 12ch; }
.close p { margin: 0 auto 32px; max-width: 54ch; font-size: 19px; color: var(--ink-soft); }
.close .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding: 56px 0 28px; font-size: 15px; border-top: var(--border) solid var(--orange); }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } }
.site-footer img { height: 52px; width: auto; margin-bottom: 16px; }
.site-footer .footer-heading { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; }
.site-footer ul { list-style: none; }
.site-footer li + li { margin-top: 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .hours { list-style: none; font-family: var(--font-mono); font-size: 13.5px; margin-top: 14px; }
.site-footer .hours li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dotted rgba(246, 241, 231, 0.3); }
.site-footer .hours li span:last-child { text-align: right; }
.footer-bottom { margin-top: 40px; padding-top: 18px; border-top: 1px dotted rgba(246, 241, 231, 0.3); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; color: rgba(246, 241, 231, 0.8); }

/* ---------- Inner pages ---------- */
.chapter { padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 48px); position: relative; overflow: hidden; }
.chapter::before { content: ""; position: absolute; inset: -30% -10%; pointer-events: none; background: repeating-conic-gradient(from 0deg at 85% 20%, rgba(20, 18, 16, 0.045) 0deg 1deg, transparent 1deg 8deg); }
.chapter .container { position: relative; }
.chapter .caption-box { margin-bottom: 22px; transform: rotate(-1.5deg); }
.chapter h1 { margin-bottom: 18px; max-width: 16ch; }
.chapter .lede { max-width: 64ch; }
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); margin-bottom: 22px; }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs li + li::before { content: "/"; margin-right: 6px; }

.program-layout { display: grid; gap: 40px; align-items: start; }
@media (min-width: 980px) { .program-layout { grid-template-columns: 1.3fr 0.7fr; gap: 56px; } }
.program-media { margin-bottom: 36px; aspect-ratio: 4 / 3; }
.program-layout h2:not(.sfx) { font-size: 28px; margin-bottom: 14px; }
.two-col { display: grid; gap: 30px; margin-top: 40px; }
@media (min-width: 720px) { .two-col { grid-template-columns: 1fr 1fr; } }
.checklist { list-style: none; display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 34px; font-size: 17px; }
.checklist li::before { content: "+"; position: absolute; left: 0; top: -6px; font-family: var(--font-sfx); font-size: 28px; color: var(--orange-ink); }
.program-layout .bubble { margin: 40px 0 36px; }
.program-layout .faq-list { margin-top: 6px; }
.sheet-aside { position: sticky; top: 96px; }
.sheet-aside .label { display: block; margin-bottom: 14px; }
.sheet-aside .stats { margin-bottom: 20px; }
.sheet-aside .price { font-family: var(--font-display); font-weight: 900; font-size: 42px; line-height: 1; margin: 6px 0 18px; }
.sheet-aside .price small { font-family: var(--font-mono); font-weight: 400; font-size: 14px; color: var(--ink-muted); margin-left: 6px; }
.sheet-aside .btn + .btn { margin-top: 12px; }
.sheet-aside .note { margin-top: 18px; font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-soft); }
.sheet-aside .note a { color: var(--ink); }

.related h2 { margin-bottom: 24px; }
.related-grid { display: grid; gap: 28px; }
@media (min-width: 720px) { .related-grid { grid-template-columns: 1fr 1fr; } }
.related-panel { text-decoration: none; display: block; transition: transform 0.12s, box-shadow 0.12s; }
.related-panel:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 var(--ink); }
.related-panel h3 { margin: 8px 0 8px; }
.related-panel p { color: var(--ink-soft); font-size: 16.5px; }
.related-panel .arrow { font-family: var(--font-display); font-weight: 900; color: var(--orange-ink); display: inline-block; margin-top: 12px; }

/* ---------- About ---------- */
.about-cover { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .about-cover { grid-template-columns: 0.9fr 1.1fr; gap: 56px; } }
.about-cover .photo-panel { aspect-ratio: 3 / 4; max-height: 600px; transform: rotate(-1.5deg); }
.credentials { counter-reset: cred; list-style: none; display: grid; gap: 0; font-family: var(--font-mono); font-size: 16px; }
@media (min-width: 720px) { .credentials { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.credentials li { counter-increment: cred; display: flex; gap: 14px; padding: 12px 0; border-bottom: 2px dotted var(--rule); }
.credentials li::before { content: counter(cred, decimal-leading-zero); font-weight: 700; color: var(--orange-ink); }

/* ---------- Contact & forms ---------- */
.contact-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.contact-card + .contact-card { margin-top: 28px; }
.contact-card .label { display: block; margin-bottom: 10px; }
.contact-card .big { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 2.3vw, 26px); text-decoration: none; display: inline-block; border-bottom: 3px solid var(--orange); line-height: 1.2; }
.contact-card .big:hover { color: var(--purple-ink); border-color: var(--purple); }
.plain-list { list-style: none; display: grid; gap: 10px; }
.num-list { padding-left: 1.3em; display: grid; gap: 10px; }

.form { display: grid; gap: 20px; }
.form-row { display: grid; gap: 20px; }
@media (min-width: 720px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 8px; }
.field label .opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-muted); }
.field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border: var(--border) solid var(--ink); border-radius: 4px; background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: 17px; box-shadow: 3px 3px 0 var(--paper-2); transition: box-shadow 0.12s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: 4px 4px 0 var(--orange); }
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 15px) 55%; background-size: 7px 7px; background-repeat: no-repeat; padding-right: 44px; }
.field .help { margin-top: 6px; font-size: 14px; color: var(--ink-muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: none; padding: 14px 16px; border: var(--border) solid var(--ink); background: var(--yellow); font-size: 16px; }
.form-status.is-visible { display: block; }
.form-status.is-error { background: #ffd9d4; }
.form-status.is-ok { background: #dff5d8; }
.form-status a { color: var(--purple-ink); }

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: var(--pad) 0; }
.notfound .lede { margin: 18px auto 0; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Stat blocks stack label-over-value where there is no room for leaders. */
.stats-stack > div, .sheet-aside .stats > div { flex-direction: column; align-items: flex-start; gap: 2px; }
.stats-stack dt::after, .sheet-aside .stats dt::after { display: none; }
.stats-stack dd, .sheet-aside .stats dd { text-align: left; flex: none; max-width: none; }
@media (max-width: 600px) {
  .stats > div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .stats dt::after { display: none; }
  .stats dd { text-align: left; flex: none; }
  .stats { gap: 14px; }
}

/* ---------- Sound familiar? (prompts in the visitor's voice; not testimonials) ---------- */
.familiar-wrap { padding-top: 0; }
.familiar-wrap .label { display: block; margin-bottom: 22px; }
.familiar { display: grid; gap: 30px 20px; }
@media (min-width: 720px) { .familiar { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .familiar { grid-template-columns: repeat(4, 1fr); } }
.bubble-sm { display: block; text-decoration: none; padding: 18px 20px 16px; border-radius: 16px; background: var(--paper-2); transition: transform 0.12s, box-shadow 0.12s; }
.bubble-sm:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.bubble-sm p { font-size: 16.5px; line-height: 1.45; font-style: italic; color: var(--ink-soft); }
.bubble-sm .to { display: block; margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--purple-ink); }
.bubble-sm::before { left: 28px; bottom: -18px; border-width: 18px 16px 0 0; }
.bubble-sm::after { left: 31px; bottom: -12px; border-width: 13px 11px 0 0; border-color: var(--paper-2) transparent transparent transparent; }

/* Three paths across on wide screens (home and programs index) */
@media (min-width: 1000px) {
  .paths-3 { grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
  .paths-3 .path-head { gap: 14px; }
  .paths-3 .path-head h2, .paths-3 .path-head h3 { font-size: clamp(24px, 2.3vw, 30px); }
  .paths-3 .path-head p { font-size: 16px; }
  .paths-3 .sfx-num { font-size: clamp(36px, 3.4vw, 48px); }
  .paths-3 .program-list h3, .paths-3 .program-list h4 { font-size: 19px; }
  .paths-3 .program-list p { font-size: 15.5px; }
}