/* ═══════════════════════════════════════════════════════
   SHARED SITE CHROME — tokens, nav, buttons, mobile menu,
   footer, FAQ core. Loaded by every page (home + articles).
   Page-specific layout stays in that page's own <style>.
   ═══════════════════════════════════════════════════════ */

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

:root {
  --paper:        #f4f4f2;
  --paper-warm:   #eeeeea;
  --white:        #ffffff;
  --ink:          #141414;
  --ink-soft:     #4a4a48;
  --sage:         #737370;
  --sage-light:   #9c9c98;
  --line:         #e2e2dd;
  --forest:       #1a1a18;
  --green:        #141414;
  --green-hi:     #303030;
  --green-soft:   #d8d8d2;
  --dark:         #121212;
  /* legacy aliases → now neutral ink, so every var(--amber) reads on-theme */
  --amber:        #141414;
  --amber-hi:     #303030;
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

strong { font-weight: 600; color: var(--ink); }
p { color: var(--ink-soft); font-weight: 400; }
img { max-width: 100%; display: block; }

/* ─── TYPE SCALE ─── */
.display {
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700;
  letter-spacing:-0.022em; line-height:1.02;
}
.eyebrow {
  font-family:'Inter',sans-serif; font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.16em; color:var(--sage);
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; opacity:.7; }

/* ─── LOGO ─── */
.deck-logo {
  font-family:'Nunito',sans-serif; font-weight:900;
  font-size:24px; line-height:1; letter-spacing:-0.04em;
  color:var(--ink); text-decoration:none;
}
.deck-logo .dot { color:var(--amber); }
.deck-logo-wrap { display:flex; flex-direction:column; text-decoration:none; gap:2px; }
.deck-sub {
  font-family:'Inter',sans-serif; font-weight:500;
  font-size:8.5px; letter-spacing:.2em; color:var(--sage);
  text-transform:uppercase;
}

/* ─── NAV ─── */
#nav {
  position:fixed; inset:0 0 auto 0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 40px;
  transition:background .45s ease, padding .45s ease, box-shadow .45s ease;
}
#nav.scrolled {
  padding:14px 40px;
  background:rgba(244,244,242,.86);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.nav-links { display:flex; align-items:center; gap:34px; }
.nav-links a {
  font-family:'Inter',sans-serif; font-weight:500; font-size:14.5px;
  color:var(--ink-soft); text-decoration:none; transition:color .2s, opacity .2s;
}
.nav-links > a:not(.btn-pill):hover { opacity:.6; }

/* Pill buttons — solid black, rounded-icon style */
.btn-pill {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:100px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
  letter-spacing:.005em; text-decoration:none; white-space:nowrap;
  border:none; cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1), background .3s, color .3s, box-shadow .3s;
}
.btn-solid { background:var(--ink); color:var(--white)!important; }
.btn-solid:hover { background:var(--amber-hi); transform:translateY(-2px); box-shadow:0 12px 28px rgba(20,20,20,.24); }
.btn-outline { background:transparent; color:var(--ink)!important; box-shadow:inset 0 0 0 1.5px rgba(20,20,20,.18); }
.btn-outline:hover { background:var(--ink); color:var(--paper)!important; transform:translateY(-2px); box-shadow:none; }
.btn-light { background:var(--white); color:var(--ink)!important; }
.btn-light:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.18); }

.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; cursor:pointer; }
.hamburger span { display:block; width:22px; height:1.6px; background:var(--ink); border-radius:2px; transition:all .35s cubic-bezier(.16,1,.3,1); }
.hamburger.open span:nth-child(1) { transform:translateY(6.6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-6.6px) rotate(-45deg); }
.mobile-menu {
  display:none; position:fixed; inset:0; background:var(--paper);
  z-index:790; flex-direction:column; justify-content:center;
  padding:110px 32px 60px; transform:translateY(-102%);
  transition:transform .65s cubic-bezier(.16,1,.3,1);
}
.mobile-menu.open { transform:translateY(0); }
.mobile-menu a {
  display:block; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600;
  font-size:36px; color:var(--ink); text-decoration:none;
  padding:16px 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(16px);
  transition:opacity .45s ease, transform .45s ease;
}
.mobile-menu.open a { opacity:1; transform:translateY(0); }
.mobile-menu.open a:nth-child(1){transition-delay:.1s;}
.mobile-menu.open a:nth-child(2){transition-delay:.16s;}
.mobile-menu.open a:nth-child(3){transition-delay:.22s;}
.mobile-menu.open a:nth-child(4){transition-delay:.28s;}
.mobile-menu.open a:nth-child(5){transition-delay:.34s;}
.mobile-menu.open a:nth-child(6){transition-delay:.4s;}

/* ─── LAYOUT ─── */
.wrap { max-width:1280px; margin:0 auto; padding:0 40px; }
.wrap-narrow { max-width:940px; margin:0 auto; padding:0 40px; }
section { position:relative; }

/* ─── FAQ (shared core; each page sets its own section padding) ─── */
.faq-list { max-width:900px; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item:first-child { border-top:1px solid var(--line); }
.faq-q {
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:28px 0; font-family:'Inter',sans-serif; font-weight:600;
  font-size:18px; color:var(--ink); transition:opacity .25s;
}
.faq-q:hover { opacity:.6; }
.faq-icon { flex-shrink:0; width:22px; height:22px; position:relative; }
.faq-icon::before, .faq-icon::after {
  content:''; position:absolute; top:50%; left:50%; background:currentColor;
  transform:translate(-50%,-50%); transition:transform .38s cubic-bezier(.16,1,.3,1);
}
.faq-icon::before { width:13px; height:1.5px; }
.faq-icon::after { width:1.5px; height:13px; }
.faq-item.open .faq-icon::after { transform:translate(-50%,-50%) scaleY(0); }
.faq-a-wrap { display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1); }
.faq-item.open .faq-a-wrap { grid-template-rows:1fr; }
.faq-a-inner { overflow:hidden; }
.faq-a { font-size:16px; line-height:1.75; padding-bottom:28px; max-width:70ch; margin:0; }

/* ─── FOOTER ─── */
footer { background:var(--dark); border-top:1px solid rgba(255,255,255,.08); }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:38px 40px; border-bottom:1px solid rgba(255,255,255,.08); flex-wrap:wrap; }
.footer-top .deck-logo { color:rgba(255,255,255,.9); }
.footer-top .deck-sub { color:rgba(255,255,255,.35); }
.footer-links { display:flex; gap:28px; flex-wrap:wrap; }
.footer-links a { font-family:'Inter',sans-serif; font-weight:400; font-size:13px; color:rgba(255,255,255,.55); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:var(--white); }
.footer-bottom { padding:22px 40px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer-copy { font-family:'Inter',sans-serif; font-weight:400; font-size:12.5px; color:rgba(255,255,255,.5); }
.footer-entity { font-family:'Inter',sans-serif; font-weight:400; font-size:11.5px; color:rgba(255,255,255,.28); }
.footer-legal { display:flex; gap:22px; flex-wrap:wrap; }
.footer-legal a { font-family:'Inter',sans-serif; font-weight:400; font-size:11.5px; color:rgba(255,255,255,.38); text-decoration:none; transition:color .2s; }
.footer-legal a:hover { color:rgba(255,255,255,.75); }

/* ─── SHARED RESPONSIVE (chrome only) ─── */
@media(max-width:820px){
  #nav { padding:16px 22px; } #nav.scrolled { padding:12px 22px; }
  .nav-links { display:none; } .hamburger { display:flex; } .mobile-menu { display:flex; }
  .wrap, .wrap-narrow { padding:0 22px; }
  .footer-top, .footer-bottom { flex-direction:column; align-items:flex-start; padding:26px 22px; }
}