/* Battlebox Guide - field briefing.
 *
 * Charcoal and khaki with one signal orange: the palette of kit rather than of a
 * theme park, which is the difference between "planning an outing" and "being
 * sold one". Headings are heavy, uppercase and tightly tracked - the stencil
 * register - set in the system's heaviest sans rather than a webfont, so the
 * look costs no request.
 *
 * The heritage hub gets a dark band of its own. It is a different kind of
 * outing, and it is where every link to the old Battlebox museum site lands.
 */

:root[data-site="battlebox"] {
  --paper: #f6f4ee;
  --paper-alt: #ebe7dc;
  --ink: #1d2320;
  --ink-soft: #3b433e;
  --ink-faint: #5a615b;
  --accent: #c2410c;
  --on-accent: #ffffff;   /* 5.2:1 */
  --accent-soft: #fbe7dc;
  --khaki: #c9b27c;
  --olive: #2f3b2f;
  --line: #d6d0bf;
  --radius: 6px;
  --heavy: "Arial Black", "Helvetica Neue", Arial, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root[data-site="battlebox"] {
    --paper: #151916;
    --paper-alt: #1e231f;
    --ink: #eeebe2;
    --ink-soft: #cbc7ba;
    --ink-faint: #9b988c;
    --accent: #fb8a55;
    --on-accent: #1b1f1b;   /* the dark-mode orange is light: white was 2.4:1 */
    --accent-soft: #3a2116;
    --line: #333a34;
  }
}

:root[data-site="battlebox"] body { background: var(--paper); color: var(--ink); }
:root[data-site="battlebox"] h1,
:root[data-site="battlebox"] h2 { font-family: var(--heavy); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; }

/* --- header -------------------------------------------------------------- */
.bb-header { background: var(--olive); color: #f3efe2; }
.bb-bar { display: flex; align-items: center; gap: 1rem; padding-block: .8rem; }
.bb-mark { text-decoration: none; color: #f3efe2; display: flex; align-items: baseline; gap: .45rem; }
.bb-mark-main { font-family: var(--heavy); text-transform: uppercase; font-size: 1.45rem; letter-spacing: .02em; }
.bb-mark-tag { background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; padding: .15rem .4rem; border-radius: 3px; }
.bb-search { margin-left: auto; }
.bb-search input { width: 16rem; max-width: 100%; border: 0; border-radius: 999px; padding: .5rem .9rem; background: rgba(255,255,255,.12); color: #fff; }
.bb-search input::placeholder { color: rgba(255,255,255,.65); }
.bb-toggle .nav-toggle-bars, .bb-toggle .nav-toggle-bars::before, .bb-toggle .nav-toggle-bars::after { background: #f3efe2; }
.bb-tabs { background: #242d25; }
.bb-tabs-inner { display: flex; gap: .4rem; overflow-x: auto; padding-block: .5rem; scrollbar-width: none; }
.bb-tab { white-space: nowrap; text-decoration: none; color: #e6e1d2; font-weight: 700; font-size: .82rem; padding: .35rem .8rem; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; }
.bb-tab:hover, .bb-tab.is-current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bb-tab-heritage { border-color: var(--khaki); color: var(--khaki); }
@media (max-width: 720px) { .bb-search { display: none; } }

/* --- home ---------------------------------------------------------------- */
.bb-hero { background: linear-gradient(180deg, var(--olive), #1d2320); color: #f3efe2; padding-block: 3rem 3.4rem; }
.bb-hero-kicker { color: var(--khaki); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; font-weight: 800; margin: 0 0 .7rem; }
.bb-hero h1 { font-size: clamp(2.1rem, 6vw, 3.8rem); margin: 0 0 .8rem; max-width: 18ch; color: #fff; }
.bb-hero-lede { font-size: 1.15rem; max-width: 56ch; color: #ddd8c8; margin: 0; }

.bb-chooser { margin-top: -1.6rem; position: relative; }
.bb-chooser h2 { font-size: 1rem; color: var(--ink-faint); margin: 2.4rem 0 .8rem; }
.bb-choices { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.bb-choice { display: grid; gap: .3rem; padding: 1rem; border-radius: var(--radius); background: var(--paper); border: 2px solid var(--ink); text-decoration: none; color: var(--ink); box-shadow: 4px 4px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.bb-choice:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--accent); }
.bb-choice-q { font-family: var(--heavy); text-transform: uppercase; font-size: 1.05rem; }
.bb-choice-a { font-size: .86rem; color: var(--ink-soft); }

.bb-grid-wrap h2 { margin-top: 2.6rem; }
.bb-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.bb-tile { display: flex; flex-direction: column; justify-content: space-between; min-height: 7.5rem; padding: 1rem; border-radius: var(--radius); background: var(--paper-alt); border-left: 6px solid var(--accent); text-decoration: none; color: var(--ink); }
.bb-tile:hover { background: var(--accent-soft); }
.bb-tile-name { font-family: var(--heavy); text-transform: uppercase; font-size: 1.1rem; line-height: 1.1; }
.bb-tile-count { font-size: .8rem; color: var(--ink-faint); font-weight: 700; }

.bb-heritage { margin-top: 3rem; background: #111512; color: #e9e4d4; padding-block: 2.4rem; border-top: 4px solid var(--khaki); }
.bb-heritage-kicker { color: var(--khaki); text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; font-weight: 800; margin: 0 0 .4rem; }
.bb-heritage h2 a { color: #fff; text-decoration: none; }
.bb-heritage-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.bb-heritage-list a { color: #d8d1bc; }

/* --- footer -------------------------------------------------------------- */
.bb-footer { margin-top: 4rem; background: var(--olive); color: #e6e1d2; }
.bb-footer a { color: #e6e1d2; }
.bb-footer-top { border-bottom: 1px solid rgba(255,255,255,.12); padding-block: 1.1rem; }
.bb-footer-promise { margin: 0; font-weight: 700; color: var(--khaki); }
.bb-footer-grid { display: grid; gap: 2rem; grid-template-columns: 2fr 2fr 1fr; padding-block: 2rem; }
.bb-footer-tag { color: #c9c3b1; font-size: .9rem; }
.bb-footer-head { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 800; color: var(--khaki); margin: 0 0 .5rem; }
.bb-footer nav a { display: block; text-decoration: none; padding-block: .15rem; font-size: .9rem; }
.bb-footer-acts { columns: 2; }
.bb-footer-legal { border-top: 1px solid rgba(255,255,255,.12); padding-block: 1rem 1.4rem; font-size: .78rem; color: #b9b3a1; }
.bb-footer-legal p { margin: .25rem 0; }
.bb-disclaimer { font-size: .74rem; }
@media (max-width: 760px) { .bb-footer-grid { grid-template-columns: 1fr; } }

:root[data-site="battlebox"] .prose { max-width: 70ch; }
:root[data-site="battlebox"] { --accent-ink: var(--accent); }