/* ============================================================
   site-chrome.css
   Shared style layer for the 5 redesigned pages:
   /, /about, /method, /boardroom, /notes

   Tokens + base typography + nav + footer + common section
   scaffolding + .btn + reduced-motion + focus-visible.

   Page-specific styles (diagrams, cards, timelines, etc.) live
   inline in each page's <style> block to keep this file small.

   This file is the single source of truth for the new design's
   typography/colour system. If you change a token here it
   updates all 5 pages at once.
   ============================================================ */

:root{
  --cream:#F4EEE0;
  --cream-2:#EBE3D2;
  --ink:#15120B;
  --ink-soft:#2A2519;
  --gold:#C8A33E;
  --gold-deep:#A8842A;
  --muted:#6B6452;
  --line:rgba(21,18,11,.12);
  --maxw:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Poppins',system-ui,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Playfair Display',Georgia,serif;
  line-height:1.1;
  letter-spacing:-.01em;
  font-weight:700;
}

a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

.eyebrow{
  font-weight:600;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold-deep);
}

/* ===== NAV ===== */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(21,18,11,.96);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(200,163,62,.18);
}
.site-nav .nav-in{
  max-width:var(--maxw);margin:0 auto;padding:16px 28px;
  display:flex;align-items:center;justify-content:space-between;
}
.site-nav .brand{
  font-family:'Playfair Display';font-weight:700;
  color:var(--cream);font-size:1.1rem;letter-spacing:.02em;
}
.site-nav .brand span{color:var(--gold)}
.site-nav .nav-links{display:flex;gap:30px;align-items:center;list-style:none}
.site-nav .nav-links a{
  color:rgba(244,238,224,.72);font-size:.9rem;font-weight:400;
  transition:color .15s;
}
.site-nav .nav-links a:hover,
.site-nav .nav-links a.active{color:var(--cream)}
.site-nav .nav-cta{
  background:var(--gold);color:var(--ink) !important;
  padding:9px 18px;border-radius:9px;
  font-weight:600;font-size:.85rem !important;
}
.site-nav .nav-cta:hover{background:var(--gold-deep);color:var(--ink) !important}
.site-nav .menu-toggle{display:none}

/* ===== FOOTER ===== */
.site-footer{
  background:#0c0a06;color:rgba(244,238,224,.55);
  padding:54px 0;font-size:.9rem;
}
.site-footer .foot-in{
  max-width:var(--maxw);margin:0 auto;padding:0 28px;
  display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:20px;align-items:center;
}
.site-footer .foot-in a{
  color:rgba(244,238,224,.7);margin-right:20px;
}
.site-footer .foot-in a:hover{color:var(--gold)}
.site-footer .foot-tag{color:rgba(244,238,224,.55)}

/* ===== SECTION SCAFFOLDING ===== */
section{padding:100px 0}
.alt{background:var(--cream-2)}
.dark{background:var(--ink);color:var(--cream)}
.center{text-align:center}

.sec-eyebrow{display:block;text-align:center;margin-bottom:16px}

h2.title{
  font-size:clamp(1.8rem,3.4vw,2.7rem);
  max-width:22ch;margin:0 auto 22px;text-align:center;
}
.dark h2.title{color:var(--cream)}
h2.title em{font-style:italic;color:var(--gold-deep)}
.dark h2.title em{color:var(--gold)}

.lead{text-align:center;max-width:62ch;margin:0 auto;color:var(--muted);font-size:1.12rem}
.dark .lead{color:rgba(244,238,224,.78)}

.body{max-width:62ch;margin:0 auto}
.body p{font-size:1.08rem;margin-bottom:20px;color:var(--ink-soft)}
.dark .body p{color:rgba(244,238,224,.82);font-weight:300}
.body p b{color:var(--ink);font-weight:600}
.dark .body p b{color:var(--cream)}

.seclink{display:block;text-align:center;margin-top:40px}
.seclink a{
  color:var(--gold-deep);font-weight:600;font-size:.98rem;
  border-bottom:1px solid rgba(200,163,62,.4);padding-bottom:2px;
}
.dark .seclink a{color:var(--gold)}

/* ===== BUTTONS ===== */
.btn{
  display:inline-block;
  background:var(--gold);color:var(--ink);
  font-family:'Poppins';font-weight:700;font-size:1.05rem;
  padding:18px 38px;border-radius:11px;
  text-decoration:none;border:none;cursor:pointer;
  transition:background .18s, transform .12s;
}
.btn:hover{background:var(--gold-deep);transform:translateY(-1px)}
.btn-sub{
  color:rgba(244,238,224,.75);font-size:.95rem;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(200,163,62,.5);
}
.btn-sub:hover{color:var(--cream)}

/* ===== FINAL CTA (shared shell) ===== */
.final{text-align:center;padding:100px 0}
.final h2{font-size:clamp(1.9rem,4vw,2.9rem);max-width:20ch;margin:0 auto 18px}
.final .limit{
  margin-top:22px;font-size:.84rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:600;
}

/* ===== ACCESSIBILITY ===== */
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.site-nav a:focus-visible{outline-offset:6px}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
}

/* ===== SHARED MOBILE BREAKPOINT (820px) =====
   Each page's <style> may add its own grid-template overrides
   under the same breakpoint; the rules here cover nav + section
   padding only. */
@media(max-width:820px){
  .site-nav .nav-links{display:none}
  section{padding:68px 0}
}

/* ============================================================
   SCROLL REVEAL
   site-chrome.js adds .reveals-on to <html>, then .reveal to
   target elements, then .is-visible when they cross into view.
   The markup itself contains NO reveal classes, so without JS
   the content stays visible by default. Under reduced motion
   the JS bails early AND this @media rule keeps anything that
   slipped through visible.
   ============================================================ */
.reveals-on .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),
             transform .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
.reveals-on .reveal.is-visible{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .reveals-on .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}