/* ============================================================
   KNOWING IS HALF THE BATTLE, SIR! — global stylesheet
   Brand tokens live in :root. Palette is derived from the shirt:
   army olive body, mustard-gold stencil print. Swap the tokens to
   restyle the whole site.
   ============================================================ */

:root {
  /* palette */
  --olive-950: #1e2113;
  --olive-900: #2a2e1a;
  --olive-800: #373c22;
  --olive-700: #454b2b;
  --olive-600: #545b35;
  --olive-500: #636b40;
  --gold-600: #b08d33;
  --gold-500: #c8a54a;
  --gold-400: #dcbd66;
  --cream: #efe9d3;
  --paper: #f8f5e9;
  --ink: #23261a;
  --muted: #6a6d55;
  --red: #9a3a20;
  --correction-bg: #f7e06b;
  --correction-ink: #4a3d00;
  --cream-dim: #d9d4bd;   /* muted copy on olive */
  --tan-line: #d8d1b6;    /* light borders on cream/paper */
  --tan-mid: #c9c2a6;     /* input + dossier borders */
  --tan-deep: #b9b493;    /* placeholder paths, dashed lines */

  /* type */
  --font-stencil: "Stardos Stencil", "Arial Black", sans-serif;
  --font-head: "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-type: "Special Elite", "Courier New", monospace; /* dossier only */

  --max-width: 1100px;
  --radius: 4px;
}

/* ---------- base ---------- */

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

body.dark {
  background: #12140b;
  color: var(--cream);
}

img, video, iframe { max-width: 100%; display: block; }

a { color: var(--olive-700); }
body.dark a { color: var(--gold-400); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 820px; }
.center { text-align: center; }
[hidden] { display: none !important; }

.section { padding: 56px 0; }
.section-olive { background: var(--cream); border-top: 1px solid var(--tan-line); border-bottom: 1px solid var(--tan-line); }

.section-title {
  font-size: 1.7rem;
  text-align: center;
  color: var(--olive-800);
  margin-bottom: 28px;
}
.section-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: 12px auto 0;
  background: var(--gold-500);
}
body.dark .section-title { color: var(--gold-500); }

.section-lead {
  max-width: 40em;
  margin: -10px auto 26px;
  text-align: center;
}

.eyebrow {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-500);
  margin: 0 0 10px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-align: center;
  border: 2px solid var(--gold-600);
  border-radius: var(--radius);
  padding: 11px 22px;
  font-size: 0.95rem;
  cursor: pointer;
  background: transparent;
  color: var(--olive-800);
  transition: background 0.15s, color 0.15s;
}
.btn:hover { background: rgba(200, 165, 74, 0.15); }
.btn-primary {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--olive-950);
}
.btn-primary:hover { background: var(--gold-400); border-color: var(--gold-400); }
.btn-lg { padding: 15px 30px; font-size: 1.05rem; }
.btn:disabled { opacity: 0.75; cursor: default; }
.btn-ghost { color: var(--olive-800); }

/* ---------- top banner ---------- */

.site-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--gold-500);
  color: var(--olive-950);
  padding: 9px 44px 9px 16px;
  font-family: var(--font-head);
  font-size: 0.95rem;
  position: relative;
  text-align: center;
}
.site-banner p { margin: 0; }
.banner-dismiss {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--olive-950);
  padding: 4px 8px;
}

/* ---------- header / nav ---------- */

#site-header {
  background: var(--olive-900);
  border-bottom: 3px solid var(--gold-500);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.wordmark {
  font-family: var(--font-stencil);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--gold-500);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.wordmark span { color: var(--cream); }

.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav a {
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cream);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: var(--radius);
}
.site-nav a:hover { color: var(--gold-400); }
.site-nav a.is-current { color: var(--gold-500); box-shadow: inset 0 -3px 0 var(--gold-500); }
.site-nav a.nav-cta {
  background: var(--gold-500);
  color: var(--olive-950);
  font-weight: 600;
  margin-left: 6px;
}
.site-nav a.nav-cta:hover { background: var(--gold-400); color: var(--olive-950); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
}
.nav-toggle span {
  width: 24px;
  height: 3px;
  background: var(--gold-500);
  display: block;
}

/* ---------- hero ---------- */

.hero { background: var(--olive-900); color: var(--cream); padding: 64px 0; }
.hero-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
  align-items: center;
}
.hero-title {
  font-family: var(--font-stencil);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: var(--gold-500);
  margin-bottom: 18px;
}
.hero-title .sir { color: var(--cream); }
.hero-sub { font-size: 1.12rem; max-width: 34em; margin: 0 0 28px; color: var(--cream-dim); }

/* ---------- countdown ---------- */

.countdown-strip {
  background: var(--olive-950);
  color: var(--cream);
  padding: 30px 0 36px;
  text-align: center;
  border-top: 1px solid var(--olive-700);
}
.count-label {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.25em;
  font-size: 0.95rem;
  color: var(--gold-500);
  margin: 0 0 14px;
}
.count-grid { display: flex; justify-content: center; align-items: center; gap: 10px; }
.count-cell {
  background: var(--olive-800);
  border: 1px solid var(--olive-600);
  border-radius: var(--radius);
  min-width: 84px;
  padding: 12px 8px 9px;
}
.count-num {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--gold-400);
  font-variant-numeric: tabular-nums;
}
.count-unit {
  display: block;
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-top: 6px;
}
.count-sep { font-size: 1.8rem; color: var(--olive-600); font-family: var(--font-head); }

/* ---------- page head ---------- */

.page-head { background: var(--olive-900); color: var(--cream); padding: 44px 0 38px; }
.page-title {
  font-family: var(--font-stencil);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  color: var(--gold-500);
  margin: 0;
}
.page-lead { margin: 12px 0 0; max-width: 44em; color: var(--cream-dim); font-size: 1.08rem; }
.page-lead a { color: var(--gold-400); }
.page-lead a:hover { color: var(--cream); }

/* ---------- tiles ---------- */

.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tile {
  display: block;
  background: var(--paper);
  border: 1px solid var(--tan-line);
  border-top: 4px solid var(--gold-500);
  border-radius: var(--radius);
  padding: 24px 22px 20px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(30, 33, 19, 0.12); }
.tile h3 { font-size: 1.2rem; color: var(--olive-800); }
.tile p { margin: 0 0 16px; font-size: 0.97rem; color: #45483a; }
.tile-cta {
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold-600);
}

/* ---------- media slots & placeholders ---------- */

.video-slot, .asset-slot {
  position: relative;
  background: var(--olive-950);
  border-radius: var(--radius);
  overflow: hidden;
}
.ratio-video { aspect-ratio: 16 / 9; }

/* click-to-load video poster: thumbnail, play button bottom-left */
.video-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0; cursor: pointer;
  background: var(--olive-950); color: var(--cream); font: inherit; text-align: left;
}
.video-poster .poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 14px;
  padding: clamp(12px, 2.5vw, 20px);
  background: linear-gradient(180deg, transparent, rgba(20, 22, 12, 0.82));
}
.poster-play {
  flex: none; display: grid; place-items: center;
  width: clamp(48px, 6.5vw, 64px); aspect-ratio: 1;
  background: var(--gold-500); color: var(--olive-950);
  border: 2px solid var(--gold-500); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: background 0.15s, transform 0.15s;
}
.poster-play svg { width: 40%; height: 40%; margin-left: 6%; }
.video-poster:hover .poster-play, .video-poster:focus-visible .poster-play { background: var(--gold-400); transform: scale(1.05); }
.video-poster:focus-visible { outline: 3px solid var(--gold-500); outline-offset: -3px; }
.poster-text { display: flex; flex-direction: column; gap: 3px; }
.poster-title { font-family: var(--font-head); font-weight: 600; font-size: clamp(1rem, 2.2vw, 1.35rem); letter-spacing: 0.06em; text-transform: uppercase; }
.poster-note { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-dim); }
@media (max-width: 560px) { .poster-note { display: none; } }
.ratio-poster { aspect-ratio: 2 / 3; }
.ratio-square { aspect-ratio: 1 / 1; }
.ratio-portrait { aspect-ratio: 4 / 5; }

.video-slot iframe, .asset-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  background: #000;
}

.is-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px dashed var(--olive-500);
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(99, 107, 64, 0.12) 18px 36px),
    var(--olive-950);
  color: var(--cream);
  text-align: center;
  padding: 24px;
  min-height: 130px;
}
.is-placeholder .ph-label {
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.92rem;
  color: var(--gold-400);
}
.is-placeholder .ph-path { font-size: 0.78rem; color: var(--tan-deep); }

.video-caption {
  text-align: center;
  font-size: 0.92rem;
  color: var(--muted);
  margin: 14px auto 26px;
  max-width: 42em;
}

/* ---------- sponsor units ---------- */

.sponsor-unit {
  border: 1px solid var(--tan-line);
  background: #fffdf4;
  border-radius: var(--radius);
  padding: 10px 14px 14px;
  margin: 34px 0;
}
.sponsor-tag {
  display: block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #9b9678;
  margin-bottom: 8px;
}
/* The IntelliBro creative deliberately uses the brand's own bright
   supplement-yellow on black, not the site palette — real programmatic
   ads never match their host page. */
.ib-ad {
  --ib-yellow: #f2c414;
  --ib-black: #0c0c0c;
  background: var(--ib-black);
  color: #fff;
  font-family: var(--font-head);
  font-style: italic;
  border-radius: 2px;
  margin-top: 2px;
  overflow: hidden;
}
.ib-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ib-body { padding: 16px 20px; }
.sponsor-sidebar .ib-ad { text-align: center; }
/* When the ad has somewhere to click through to, it renders as a link —
   it should still look like the ad, not like a link. Display stays at low
   specificity so variant layouts (.sponsor-banner's flex row) still win. */
a.ib-ad { display: block; }
.sponsor-unit a.ib-ad { text-decoration: none; color: #fff; }
.sponsor-unit a.ib-ad:hover { outline: 2px solid var(--ib-yellow); }

.ib-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  line-height: 1.2;
}
.sponsor-sidebar .ib-brand, .sponsor-sidebar .ib-top { justify-content: center; }
.sponsor-sidebar .ib-top { display: flex; flex-direction: column; align-items: center; }
/* sidebar: Palmer across the top, fading into the black */
.sponsor-sidebar .ib-photo { position: relative; aspect-ratio: 4 / 5; }
.sponsor-sidebar .ib-photo img { object-position: 50% 30%; }
.sponsor-sidebar .ib-photo::after {
  content: ""; position: absolute; inset: auto 0 0; height: 30%;
  background: linear-gradient(to bottom, transparent, var(--ib-black));
}
.sponsor-sidebar .ib-body { padding-top: 4px; }
.ib-brand small {
  display: block;
  color: var(--ib-yellow);
  font-size: 0.58rem;
  letter-spacing: 0.4em;
  font-weight: 600;
}
.ib-hex {
  flex: none;
  width: 28px;
  height: auto;
  display: block;
}

.ib-name {
  font-weight: 700;
  line-height: 0.95;
  margin: 12px 0 6px;
  text-transform: uppercase;
}
.ib-word { font-size: 2rem; }
.ib-gold { color: var(--ib-yellow); }
.ib-white { color: #fff; }
.ib-ultimate {
  display: inline-block;
  border: 2px solid var(--ib-yellow);
  color: var(--ib-yellow);
  transform: skewX(-10deg);
  padding: 1px 14px 2px;
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  margin-top: 8px;
}
.sponsor-sidebar .ib-word { display: block; font-size: 2.3rem; }

.ib-stars {
  color: var(--ib-yellow);
  letter-spacing: 0.3em;
  font-size: 0.95rem;
  font-style: normal;
  margin: 8px 0 0;
}

.ib-benefits {
  list-style: none;
  margin: 10px 0 4px;
  padding: 0;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: #ececec;
}
.ib-benefits li { padding: 3px 0; }
.ib-benefits li::before { content: "› "; color: var(--ib-yellow); }

.ib-tagline {
  display: inline-block;
  background: var(--ib-yellow);
  color: var(--ib-black);
  transform: skewX(-8deg);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  padding: 6px 18px;
  margin: 10px 0 4px;
}
.ib-cta {
  display: inline-block;
  border: 2px solid var(--ib-yellow);
  color: var(--ib-yellow);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  padding: 8px 18px;
  margin-top: 8px;
  white-space: nowrap;
}
.ib-cta:hover { background: var(--ib-yellow); color: var(--ib-black); }
.ib-fine {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 8px;
  letter-spacing: 0.03em;
  color: #8a8a83;
  margin: 12px 0 0;
}

/* banner variant: the pitch | tagline + code | Palmer.
   Palmer's frame is near-square (head to bottle fits); the pitch sets the height. */
.sponsor-banner .ib-ad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: stretch;
  min-height: 210px;
}
.sponsor-banner .ib-photo { position: relative; order: 2; }
.sponsor-banner .ib-photo img { position: absolute; inset: 0; object-position: 50% 6%; }
.sponsor-banner .ib-photo::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 40%;
  background: linear-gradient(to right, var(--ib-black), transparent);
}
.sponsor-banner .ib-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "top      actions"
    "name     actions"
    "benefits actions"
    "fine     fine";
  align-items: center;
  gap: 8px 32px;
  padding: 18px 8px 14px 26px;
}
.sponsor-banner .ib-top { grid-area: top; display: flex; align-items: center; gap: 18px; }
.sponsor-banner .ib-name { grid-area: name; margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.sponsor-banner .ib-word { font-size: 2rem; }
.sponsor-banner .ib-ultimate { margin-top: 0; font-size: 1rem; }
.sponsor-banner .ib-stars { margin: 0; }
.sponsor-banner .ib-benefits { grid-area: benefits; display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0; font-size: 0.8rem; }
.sponsor-banner .ib-benefits li { padding: 0; }
.sponsor-banner .ib-actions { grid-area: actions; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.sponsor-banner .ib-tagline, .sponsor-banner .ib-cta { margin: 0; text-align: center; }
.sponsor-banner .ib-fine { grid-area: fine; margin: 2px 0 0; }

/* ---------- share row ---------- */

.share-row { display: flex; justify-content: center; gap: 12px; margin: 20px 0 6px; flex-wrap: wrap; }
/* modifier on .btn: thinner olive border, smaller size */
.share-btn {
  border: 1.5px solid var(--olive-600);
  font-size: 0.85rem;
  padding: 9px 18px;
}

/* ---------- follow us (About) ---------- */
.follow-block { margin-top: 56px; }
.follow-lead { margin: -6px 0 18px; color: var(--muted); }
.social-row { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.social-btn { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.social-btn svg { width: 18px; height: 18px; flex: none; }


/* ---------- facts page ---------- */

.facts-grid { display: grid; grid-template-columns: 7fr 3fr; gap: 40px; align-items: start; }
.fact-card {
  background: #fff;
  border: 1px solid var(--tan-line);
  border-left: 5px solid var(--gold-500);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 20px;
}
.fact-num {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--gold-600);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  display: block;
  margin-bottom: 6px;
}
.fact-card p { margin: 0; font-size: 1.05rem; }
.fact-card strong { color: var(--red); }
sup { font-size: 0.7em; color: var(--gold-600); }

.pullquote {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--olive-800);
  border-left: 5px solid var(--red);
  margin: 30px 0;
  padding: 8px 0 8px 24px;
}

.callout {
  background: var(--cream);
  border: 1px solid var(--tan-line);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 0.95rem;
}
.callout h3 { font-size: 1rem; color: var(--olive-800); }

.footnotes {
  border-top: 1px solid var(--tan-line);
  margin-top: 34px;
  padding-top: 14px;
  font-size: 0.85rem;
  color: var(--muted);
}
.footnotes ol { margin: 0; padding-left: 18px; }

.killed {
  font-family: var(--font-stencil);
  font-weight: 700;
  font-size: 2rem;
  color: var(--red);
  text-decoration: line-through;
  text-decoration-thickness: 4px;
  margin: 40px 0 4px;
  text-align: center;
}
.killed-note { text-align: center; color: var(--muted); font-size: 0.9rem; font-style: italic; margin-top: 0; }

/* ---------- correction box ---------- */

.correction-box {
  background: var(--correction-bg);
  color: var(--correction-ink);
  border: 2px solid #d9bd2e;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 28px 0;
  font-size: 0.98rem;
}
.correction-box strong { letter-spacing: 0.06em; }

/* ---------- dossier ---------- */

.dossier {
  background: #fff;
  border: 1px solid var(--tan-mid);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(30, 33, 19, 0.08);
}
.dossier-head {
  background: var(--olive-900);
  color: var(--cream);
  padding: 18px 26px;
}
.dossier-head h2 {
  font-family: var(--font-type);
  text-transform: uppercase;
  font-size: 1.35rem;
  margin: 0;
  color: var(--gold-400);
}
.dossier-body { padding: 26px; font-family: var(--font-type); font-size: 1.02rem; }
.dossier-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 18px;
  font-size: 0.92rem;
  border-bottom: 1px dashed var(--tan-deep);
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.dossier-meta dt { font-weight: bold; color: var(--olive-700); }
.dossier-meta dd { margin: 0; }
.findings { list-style: none; padding: 0; margin: 0 0 26px; }
.findings li {
  padding: 10px 0 10px 30px;
  position: relative;
  border-bottom: 1px dotted var(--tan-line);
}
.findings li::before {
  content: "▸";
  position: absolute;
  left: 6px;
  color: var(--red);
}

.asset-slot.is-fallback {
  background: var(--paper);
  border: 1px dashed var(--tan-deep);
}

.exhibit-label {
  font-family: var(--font-type);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.org-chart { text-align: center; padding: 18px 10px; }
.org-node {
  display: inline-block;
  font-family: var(--font-type);
  border: 2px solid var(--olive-700);
  background: var(--paper);
  border-radius: var(--radius);
  padding: 7px 18px;
  margin: 2px 0;
  font-size: 0.95rem;
}
.org-arrow { color: var(--red); font-size: 1.1rem; line-height: 1.4; }

/* ---------- forms ---------- */

.form-block {
  background: #fff;
  border: 1px solid var(--tan-line);
  border-radius: var(--radius);
  padding: 26px 28px;
}
body.dark .form-block { background: #1a1d10; border-color: var(--olive-700); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olive-700);
}
body.dark .field label { color: var(--gold-400); }
.field input, .field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 11px 12px;
  border: 1.5px solid var(--tan-mid);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--gold-500);
  outline-offset: 1px;
  border-color: var(--gold-600);
}

.check-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.97rem;
}
.check-row input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--olive-700); }

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.form-privacy { font-size: 0.8rem; color: var(--muted); margin: 0; }
body.dark .form-privacy { color: var(--tan-deep); }
.form-note { grid-column: 1 / -1; font-size: 0.85rem; line-height: 1.5; color: var(--muted); margin: 2px 0 0; max-width: 60ch; }
body.dark .form-note { color: var(--tan-deep); }
body.dark .form-note a { color: var(--cream-dim); }

/* honeypot — hidden from humans, present for bots */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-success, .form-error {
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 1.02rem;
}
.form-success {
  background: var(--olive-800);
  color: var(--cream);
  border-left: 5px solid var(--gold-500);
}
.form-success strong { color: var(--gold-400); }
.form-error {
  background: #f7e3dc;
  color: #6e2a17;
  border-left: 5px solid var(--red);
  margin-bottom: 16px;
}
body.dark .form-error { background: #33170e; color: #f0c9bc; }

/* ---------- shop ---------- */

.product-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 44px; align-items: start; }
.price { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; color: var(--olive-800); margin: 6px 0 20px; }
.size-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 26px; }
.size-pill input { position: absolute; opacity: 0; pointer-events: none; }
.size-pill span {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  border: 2px solid var(--olive-600);
  border-radius: var(--radius);
  padding: 9px 18px;
  cursor: pointer;
  color: var(--olive-800);
}
.size-pill input:checked + span { background: var(--olive-800); color: var(--gold-400); border-color: var(--olive-800); }
.size-pill input:focus-visible + span { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.size-pill.sold-out span {
  border-style: dashed;
  color: #a09a7c;
  text-decoration: line-through;
  cursor: not-allowed;
}
.product-title { font-size: 1.5rem; color: var(--olive-900); }
.coming-soon-card { opacity: 0.85; }

/* ---------- memorial (remember the bus) ---------- */

.memorial { text-align: center; padding: 70px 0 40px; }
.memorial-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.5vw, 2.3rem);
  color: var(--cream);
  max-width: 22em;
  margin: 30px auto 10px;
}
.memorial-sub { color: #8d8a6e; font-style: italic; }

.candle { position: relative; width: 30px; margin: 0 auto; height: 130px; }
.candle .wax {
  position: absolute;
  bottom: 0;
  width: 30px;
  height: 88px;
  background: linear-gradient(#f2ecd7, #cfc4a0);
  border-radius: 5px 5px 3px 3px;
}
.candle .wick {
  position: absolute;
  bottom: 86px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 8px;
  background: #3a3327;
}
.candle .flame {
  position: absolute;
  bottom: 92px;
  left: 50%;
  width: 16px;
  height: 34px;
  background: radial-gradient(circle at 50% 78%, #fff5cf 0%, #f7c948 45%, #e78a1e 75%, rgba(231, 138, 30, 0) 100%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  transform-origin: 50% 100%;
  transform: translateX(-50%);
  animation: flicker 1.7s ease-in-out infinite;
  filter: blur(0.4px);
}
.candle .glow {
  position: absolute;
  bottom: 78px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, rgba(247, 201, 72, 0.28) 0%, rgba(247, 201, 72, 0) 70%);
  animation: glow 1.7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes flicker {
  0%, 100% { transform: translateX(-50%) rotate(-2deg) scaleY(1); }
  25% { transform: translateX(-52%) rotate(2deg) scaleY(1.06); }
  50% { transform: translateX(-49%) rotate(-1deg) scaleY(0.94); }
  75% { transform: translateX(-51%) rotate(3deg) scaleY(1.03); }
}
@keyframes glow {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.6; }
}

/* ---------- guestbook ---------- */

.guestbook { max-width: 720px; margin: 0 auto; text-align: left; }
.gb-entry { border-bottom: 1px solid #2c3018; padding: 18px 4px; }
.gb-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.gb-name { font-family: var(--font-head); font-weight: 600; color: var(--gold-400); font-size: 0.98rem; }
.gb-date { font-size: 0.78rem; color: #7c7960; }
.gb-text { margin: 0; color: #d5d1b8; font-size: 0.98rem; }

/* ---------- team / about ---------- */

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.team-card { text-align: center; }
.team-card .asset-slot { margin-bottom: 12px; }
.team-card .asset-slot.has-asset { border: 4px solid var(--olive-600); }
.team-name { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; margin: 0; }
.team-title { color: var(--muted); font-size: 0.9rem; margin: 2px 0 6px; }
a.link-tbd { color: #a09a7c; text-decoration: underline dotted; cursor: default; }

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--olive-800);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 34px 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 44px;
}
.cta-band h2 { margin: 0; color: var(--gold-400); font-size: 1.4rem; }
.cta-band p { margin: 4px 0 0; color: var(--cream-dim); }

/* ---------- prose (privacy) ---------- */

.prose { max-width: 760px; }
.prose h2 {
  font-size: 1.1rem;
  color: var(--olive-800);
  border-bottom: 2px solid var(--gold-500);
  display: inline-block;
  padding-bottom: 2px;
  margin-top: 36px;
}
.prose ul { padding-left: 22px; }

.disclosure-box {
  background: #fff;
  border: 2px solid var(--olive-700);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 26px 0;
  font-size: 1.05rem;
}

/* ---------- footer ---------- */

#site-footer {
  background: var(--olive-950);
  color: #a6a184;
  margin-top: 70px;
  padding: 26px 0 30px;
}
body.dark #site-footer { margin-top: 30px; }
.fine-print { font-size: 8.5px; line-height: 1.7; margin: 0 0 4px; letter-spacing: 0.02em; }
.fine-print a { color: #c5bf9e; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-art { max-width: 340px; }
  .facts-grid { grid-template-columns: 1fr; }
  .tile-grid, .team-grid { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .sponsor-banner .ib-ad { grid-template-columns: minmax(0, 1fr) 190px; }
  .sponsor-banner .ib-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "name" "benefits" "actions" "fine"; }
  .sponsor-banner .ib-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--olive-900);
    border-bottom: 3px solid var(--gold-500);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 16px 16px;
    gap: 2px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 10px; }
  .site-nav a.nav-cta { margin-left: 0; margin-top: 8px; text-align: center; }
}

@media (max-width: 580px) {
  body { font-size: 16px; }
  .tile-grid, .team-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .count-cell { min-width: 64px; }
  .count-num { font-size: 1.7rem; }
  .section { padding: 40px 0; }
  .cta-band { padding: 26px 22px; }
  .dossier-body { padding: 18px; }
  .sponsor-banner .ib-ad { grid-template-columns: minmax(0, 1fr) 112px; min-height: 0; }
  .sponsor-banner .ib-body { padding: 12px 0 10px 16px; }
  .sponsor-banner .ib-word { font-size: 1.4rem; }
  .sponsor-banner .ib-benefits, .sponsor-banner .ib-stars { display: none; }
  .sponsor-banner .ib-tagline { font-size: 0.68rem; padding: 5px 10px; }
  .sponsor-banner .ib-cta { font-size: 0.72rem; padding: 6px 10px; white-space: normal; }
}