/* Copyright (c) 2025-2026 BA Custom Products LLC. All rights reserved.
   site.css - ONE design system for every public page of the facility's website
   (Sep 5 2026). The 13 brand roles arrive as CSS variables (injected by the
   server from the owner's Colors card); everything here reads them. Legacy
   aliases (--gold, --border, --panel, --surface...) keep the older pages'
   rules working while they read the same brand. */
:root{
  --bg:#0d1810;--bg2:#111f15;--card:#16241a;--line:#24382a;--text:#c8d2c4;--muted:#8fa08c;--heading:#eef3ea;
  --accent:#c9a227;--accent2:#d8b544;--btn:#c9a227;--btnText:#14301d;--headerBg:#0a130d;--headerText:#eef3ea;
  --gold:var(--accent);--border:var(--line);--panel:var(--card);--surface:var(--card);--surface2:var(--bg2);--dim:var(--muted);--text2:var(--muted);--err:#e06c5a;
  --font-display:'Playfair Display',Georgia,serif;--font-body:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;--font-mono:'DM Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.55;min-height:100vh}
img,video{max-width:100%}
h1,h2,h3{font-family:var(--font-display);color:var(--heading);letter-spacing:-.4px;margin:0 0 12px}
a{color:var(--accent2)}
.mono{font-family:var(--font-mono);letter-spacing:var(--kicker-spacing,4px);font-size:12px;color:var(--accent2);text-transform:var(--kicker-transform,uppercase)}
.siteMain{max-width:980px;margin:0 auto;padding:36px 20px 70px}
.siteProse{max-width:760px;line-height:1.7;font-size:17px}
.siteProse h1{font-size:clamp(30px,5vw,44px);margin:10px 0 22px}
.siteProse h4{color:var(--heading);margin:18px 0 6px}
.siteProse a{color:var(--accent)}
.siteCard{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px}
.siteBtn{display:inline-block;background:var(--btn);color:var(--btnText);font-weight:600;padding:12px 22px;border-radius:6px;text-decoration:none;border:none;font-family:var(--font-body);font-size:15px;cursor:pointer;white-space:nowrap}
.siteBtn[disabled]{opacity:.45;cursor:not-allowed}
.siteBtn.ghost{background:transparent;color:var(--heading);border:1px solid var(--line)}
/* the ONE notice, on every page */
.siteAnn{background:var(--accent);color:var(--btnText);text-align:center;padding:9px 16px;font-size:14px;font-weight:600}
/* ── the shared header (site-chrome.js fills it) ── */
.siteHead{background:var(--headerBg);color:var(--headerText);position:sticky;top:0;z-index:60;box-shadow:0 2px 14px rgba(0,0,0,.18)}
.siteHead .bar{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;min-height:60px}
.siteHead .brand{display:flex;align-items:center;gap:10px;color:var(--headerText);text-decoration:none;font-family:var(--font-mono);letter-spacing:var(--brand-spacing,3px);font-size:13.5px;min-width:0}
.siteHead .brand img{height:34px;width:auto;display:block}
.siteHead .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.siteHead nav{display:flex;align-items:center;gap:18px}
.siteHead nav a{color:var(--headerText);text-decoration:none;font-size:14px;letter-spacing:.6px;opacity:.9}
.siteHead nav a:hover{opacity:1;text-decoration:underline}
.siteHead .cta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.siteHead .cta .siteBtn{padding:9px 18px;font-size:14px}
.siteHead .menuBtn{display:none;background:transparent;border:1px solid rgba(255,255,255,.35);color:var(--headerText);border-radius:6px;width:42px;height:38px;font-size:20px;line-height:1;cursor:pointer}
.siteHead .drawer{display:none}
@media (max-width:760px){
  .siteHead nav{display:none}
  .siteHead .menuBtn{display:inline-flex;align-items:center;justify-content:center}
  .siteHead .drawer{display:block;max-height:0;overflow:hidden;transition:max-height .28s ease;background:var(--headerBg);border-top:1px solid rgba(255,255,255,.08)}
  .siteHead .drawer.open{max-height:70vh;overflow:auto}
  .siteHead .drawer a{display:block;padding:14px 20px;color:var(--headerText);text-decoration:none;font-size:16px;border-bottom:1px solid rgba(255,255,255,.06)}
  .siteHead .drawer a.book{color:var(--headerText);font-weight:700;text-decoration:underline;text-underline-offset:3px}
  .siteHead .brand{letter-spacing:2px;font-size:12.5px}
}
/* ── the shared footer ── */
.siteFoot{background:var(--headerBg);color:var(--headerText);padding:30px 20px 34px;font-size:14px}
.siteFoot .in{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;gap:18px 30px;align-items:flex-start;justify-content:space-between}
.siteFoot .links{display:flex;flex-wrap:wrap;gap:6px 16px}
.siteFoot a{color:var(--headerText);text-decoration:underline;text-underline-offset:3px}
.siteFoot a:hover{text-decoration:underline}
.siteFoot .social{display:flex;gap:12px;align-items:center}
.siteFoot .social a{display:inline-flex;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.22);align-items:center;justify-content:center;color:var(--headerText)}
.siteFoot .social svg{width:18px;height:18px;fill:currentColor}
.siteFoot .social a.more{width:auto;padding:0 12px;border-radius:18px;font-size:12px;letter-spacing:.5px;white-space:nowrap}
.siteFoot .copy{opacity:.75;width:100%;margin-top:6px}
/* Accessibility: visible keyboard focus everywhere. */
:focus-visible{outline:3px solid #5b9bd5 !important;outline-offset:2px !important;border-radius:2px}
.skip-link{position:absolute;left:-9999px;top:0;background:#5b9bd5;color:#08131d;padding:10px 16px;z-index:9999;font-weight:600}
.skip-link:focus{left:0}
@media (prefers-reduced-motion: reduce){ .siteHead .drawer{transition:none} }
/* W45 (Sep 10 2026): the email-updates signup on the holding page and /updates (the landing carries its own .inq styles) */
.signup-form{display:grid;gap:12px;max-width:560px;margin:0 auto;text-align:left}
.signup-form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.signup-form label{display:block;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted,#a0aaa0);margin-bottom:4px}
.signup-form input[type=email],.signup-form input[type=text]{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.06);color:inherit;font:inherit;font-size:16px}
.signup-form .consent{text-transform:none;letter-spacing:0;font-size:13px;line-height:1.5;color:inherit}
.signup-form button{padding:14px 22px;border-radius:999px;border:0;background:var(--accent,#c9a227);color:#0b120c;font-weight:700;font-size:15px;cursor:pointer}
.signup-form button[disabled]{opacity:.6}
.signup-form .msg{font-size:14px;color:var(--muted,#a0aaa0)}
@media(max-width:600px){.signup-form .two{grid-template-columns:1fr}}
/* W45 (Sep 10 2026): a PDF page - the vendored viewer draws every page into the column; the buttons stay for phones and failures */
.pdfBar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0 18px}
.pdfBar .status{font-size:13px;color:var(--muted,#a0aaa0)}
#pdfPages{display:flex;flex-direction:column;gap:14px;align-items:center}
#pdfPages canvas{max-width:100%;height:auto;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.35);border-radius:4px}
.pdfText{margin-top:28px}

/* ── A BUTTON KEEPS ITS OWN TEXT COLOUR, IN ANY CONTAINER (Sep 17 2026) ──────
   A live customer's PDF page drew a solid gold button with nothing on it. The
   words were there the whole time: custom pages render inside .siteProse, and
   `.siteProse a{color:var(--accent)}` (0,1,1) out-specifies `.siteBtn` (0,1,0),
   so the label painted GOLD ON GOLD. The Download button beside it was fine only
   because .siteBtn.ghost has a transparent background - the same gold text on a
   dark page reads perfectly. The homepage was fine because it has no .siteProse
   at all. That is the whole difference, and it cost a customer two rounds.
   These rules are LAST in the file and REPEAT the class (0,2,1 and 0,3,1), so
   they beat every container link colour in the tree - .siteProse, .siteFoot,
   .ev, .eventCard, .step-body and any added later - rather than patching each
   one and hoping the list was complete. The repeat is not decoration: a plain
   a.siteBtn (0,1,1) only TIES the container rules and wins on source order,
   which holds inside this file and fails against a page's own <style> block
   (events.html's .ev a, how-it-works.html's .step-body a - both load after
   site.css). A button's colour is the button's business, in any container and
   from any stylesheet. */
a.siteBtn.siteBtn{color:var(--btnText)}
a.siteBtn.ghost.ghost{color:var(--heading)}