/* ============================================================
   LBC 14 — shared stylesheet
   Used by: index.html, directory.html, board.html

   DESIGN TOKENS (one source of truth) live in the :root block below.
   - Colors: semantic --c-* tokens. Blue/orange is the committed palette
     (the only palette — garnet/gold has been removed).
   - Type:   --fs-* (value-keyed: --fs-90 == 0.90rem). Exact-preserve.
   - Space:  --sp-* (value-keyed: --sp-28 == 28px). Exact-preserve.
   - Radius: --radius-*.
   Component CSS must reference tokens, not raw values. The granular
   value-keyed type/space sets are intentional for this stabilize sprint
   (exact no-op); a clean semantic re-scale is a later sprint.

   There is a single committed palette and no public palette toggle.
   ============================================================ */

:root {
  /* ----- Color: blue/orange (committed — the only palette) ----- */
  --c-bg:        #f5f8fa;
  --c-bg-alt:    #e8f0f3;
  --c-surface:   #ffffff;
  --c-ink:       #112230;
  --c-ink-soft:  #4a5e6b;
  --c-primary:   #0a4d8c;   /* blue */
  --c-primary-d: #073a6b;
  --c-accent:    #f57c1f;   /* orange */
  --c-accent-l:  #ffa14d;
  --c-line:      #d3e0e8;
  --c-hero-grad: linear-gradient(135deg, #073a6b 0%, #0a4d8c 55%, #1a7a3e 100%);
  --c-hero-navy: #061128;

  /* ----- Color: neutrals / utility ----- */
  --c-white:      #ffffff;
  --c-amber-ink:  #3a2c00;  /* text on the amber sample banner */

  /* ----- Color: shadows (black alpha) ----- */
  --c-shadow-08: rgba(0,0,0,0.08);
  --c-shadow-09: rgba(0,0,0,0.09);
  --c-shadow-10: rgba(0,0,0,0.10);
  --c-shadow-18: rgba(0,0,0,0.18);
  --c-shadow-25: rgba(0,0,0,0.25);

  /* ----- Color: on-dark (white alpha) ----- */
  --c-on-dark-10: rgba(255,255,255,0.10);
  --c-on-dark-13: rgba(255,255,255,0.13);
  --c-on-dark-15: rgba(255,255,255,0.15);
  --c-on-dark-16: rgba(255,255,255,0.16);
  --c-on-dark-22: rgba(255,255,255,0.22);
  --c-on-dark-75: rgba(255,255,255,0.75);
  --c-on-dark-82: rgba(255,255,255,0.82);
  --c-on-dark-85: rgba(255,255,255,0.85);

  /* ----- Type scale (value-keyed: --fs-NN == 0.NN rem) ----- */
  --fs-62:  0.62rem;
  --fs-66:  0.66rem;
  --fs-68:  0.68rem;
  --fs-74:  0.74rem;
  --fs-78:  0.78rem;
  --fs-80:  0.80rem;
  --fs-82:  0.82rem;
  --fs-84:  0.84rem;
  --fs-85:  0.85rem;
  --fs-86:  0.86rem;
  --fs-88:  0.88rem;
  --fs-90:  0.90rem;
  --fs-92:  0.92rem;
  --fs-93:  0.93rem;
  --fs-95:  0.95rem;
  --fs-96:  0.96rem;
  --fs-98:  0.98rem;
  --fs-100: 1.00rem;
  --fs-105: 1.05rem;
  --fs-106: 1.06rem;
  --fs-108: 1.08rem;
  --fs-110: 1.10rem;
  --fs-115: 1.15rem;
  --fs-116: 1.16rem;
  --fs-118: 1.18rem;
  --fs-125: 1.25rem;
  --fs-132: 1.32rem;
  --fs-155: 1.55rem;
  --fs-210: 2.10rem;
  --fs-220: 2.20rem;
  --fs-230: 2.30rem;
  --fs-250: 2.50rem;
  --fs-290: 2.90rem;
  --fs-360: 3.60rem;

  /* ----- Spacing scale (value-keyed: --sp-NN == NN px) ----- */
  --sp-3:  3px;
  --sp-4:  4px;
  --sp-5:  5px;
  --sp-6:  6px;
  --sp-7:  7px;
  --sp-8:  8px;
  --sp-9:  9px;
  --sp-10: 10px;
  --sp-11: 11px;
  --sp-12: 12px;
  --sp-13: 13px;
  --sp-14: 14px;
  --sp-15: 15px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-26: 26px;
  --sp-28: 28px;
  --sp-30: 30px;
  --sp-32: 32px;
  --sp-34: 34px;
  --sp-36: 36px;
  --sp-40: 40px;
  --sp-42: 42px;
  --sp-48: 48px;
  --sp-50: 50px;
  --sp-54: 54px;
  --sp-58: 58px;
  --sp-60: 60px;
  --sp-62: 62px;
  --sp-64: 64px;
  --sp-70: 70px;
  --sp-74: 74px;
  --sp-80: 80px;
  --sp-84: 84px;
  --sp-92: 92px;

  /* ----- Radius ----- */
  --radius-3:      3px;
  --radius-6:      6px;
  --radius-8:      8px;
  --radius-10:     10px;
  --radius-pill:   50px;
  --radius-circle: 50%;
}

/* ---------- Base ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Source Sans 3', sans-serif;
  background:var(--c-bg);
  color:var(--c-ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display { font-family:'Oswald', sans-serif; font-weight:600; letter-spacing:0.01em; line-height:1.1; }

/* ---------- Top bar ---------- */
.topbar {
  background:var(--c-surface); border-bottom:1px solid var(--c-line);
  position:sticky; top:0; z-index:1000;
}
.nav {
  max-width:1180px; margin:0 auto; padding:0 var(--sp-28);
  display:flex; align-items:center; justify-content:space-between; height:74px;
}
.brand { display:flex; align-items:center; gap:var(--sp-13); }
.brand-mark {
  width:46px; height:46px; flex:none; position:relative;
  display:grid; place-items:center;
}
.brand-mark svg { width:46px; height:46px; }
.brand-text strong { font-family:'Oswald'; font-size:var(--fs-106); color:var(--c-primary); display:block; line-height:1; letter-spacing:0.02em; }
.brand-text small { font-size:var(--fs-68); letter-spacing:0.18em; text-transform:uppercase; color:var(--c-ink-soft); }
.menu { display:flex; gap:var(--sp-30); align-items:center; }
.menu a {
  text-decoration:none; color:var(--c-ink); font-weight:600; font-size:var(--fs-93);
  position:relative; padding:var(--sp-4) 0;
}
.menu a.active { color:var(--c-primary); }
.menu a::after {
  content:''; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--c-accent); transition:width 0.25s ease;
}
.menu a:hover::after,
.menu a.active::after { width:100%; }

/* ---------- Hamburger toggle (mobile nav) ---------- */
.nav-toggle {
  display:none; flex-direction:column; gap:var(--sp-5);
  background:none; border:none; cursor:pointer; padding:var(--sp-8);
}
.nav-toggle span {
  display:block; width:24px; height:2px; background:var(--c-ink);
  border-radius:var(--radius-pill); transition:transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-block; background:var(--c-accent); color:var(--c-ink);
  font-family:'Oswald'; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  padding:var(--sp-11) var(--sp-22); border-radius:var(--radius-3); text-decoration:none; font-size:var(--fs-85);
  border:none; cursor:pointer; transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 6px 18px var(--c-shadow-18); }
.btn-ghost {
  background:transparent; border:2px solid var(--c-white); color:var(--c-white);
}
.btn-ghost:hover { background:var(--c-white); color:var(--c-primary); }

/* ---------- Section heads (shared) ---------- */
.section-head { text-align:center; margin-bottom:var(--sp-48); }
.section-head .eyebrow {
  font-family:'Oswald'; text-transform:uppercase; letter-spacing:0.16em;
  color:var(--c-accent); font-size:var(--fs-82); font-weight:600;
}
.section-head h2 { font-size:var(--fs-230); margin-top:var(--sp-8); color:var(--c-ink); }
.section-sub {
  max-width:600px; margin:var(--sp-14) auto 0; color:var(--c-ink-soft); font-size:var(--fs-100);
}

/* ---------- Footer ---------- */
footer { background:var(--c-primary-d); color:var(--c-white); }
.foot-inner {
  max-width:1180px; margin:0 auto; padding:var(--sp-54) var(--sp-28) var(--sp-30);
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:var(--sp-40);
}
.foot-inner h5 { font-family:'Oswald'; text-transform:uppercase; letter-spacing:0.1em; font-size:var(--fs-90); margin-bottom:var(--sp-16); color:var(--c-accent-l); }
.foot-inner a { color:var(--c-on-dark-82); text-decoration:none; display:block; padding:var(--sp-5) 0; font-size:var(--fs-92); }
.foot-inner a:hover { color:var(--c-white); }
.foot-inner p { opacity:0.78; font-size:var(--fs-92); }
.foot-bottom {
  border-top:1px solid var(--c-on-dark-15); margin-top:var(--sp-30); padding:var(--sp-20) var(--sp-28);
  text-align:center; font-size:var(--fs-82); opacity:0.7;
}

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity:1; transform:none; }

/* ---------- Shared responsive ---------- */
@media (max-width:880px){
  .foot-inner { grid-template-columns:1fr; }

  /* Mobile nav: hamburger reveals a stacked drawer under the header */
  .nav-toggle { display:inline-flex; }
  .menu {
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--c-surface); border-bottom:1px solid var(--c-line);
    box-shadow:0 12px 24px var(--c-shadow-10);
    max-height:0; overflow:hidden; padding:0 var(--sp-28);
    transition:max-height 0.28s ease;
  }
  .menu.open { max-height:420px; }
  .menu a { padding:var(--sp-14) 0; border-bottom:1px solid var(--c-line); }
  .menu a:last-child { border-bottom:none; }
  .menu a::after { display:none; }
  .menu a.btn { margin:var(--sp-14) 0; text-align:center; }
}