/* ============================================================
   Get Your Ham License — shared site styles  (site.css)
   One source of truth for every /site page: tokens, type, the
   floating nav, the dark interior header band, buttons, prose,
   legal pages, callout boxes, and the footer.
   Class names match the existing site markup so pages only need
   to <link> this file and drop their inline <style>.
   (The book's own CSS is separate and is NOT touched here.)
   ============================================================ */

:root{
  --ink:#1c1611;
  --ink-soft:#4a4035;
  --ink-dim:#8a7c68;
  --paper:#f3ece0;
  --paper-2:#ece2d2;
  --card:#fbf7ef;
  --amber:#e07b2a;
  --amber-bright:#f6a836;
  --rust:#b1431d;
  --teal:#1f4a45;
  --green:#2f6b3f;
  --night:#15110c;
  --line:rgba(28,22,17,.14);
  --shadow:0 18px 40px -22px rgba(28,22,17,.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* subtle paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,h2,h3,.display,.disp{font-family:"Fraunces",serif;font-weight:600;line-height:1.05;letter-spacing:-.01em}
.mono{font-family:"JetBrains Mono",monospace;letter-spacing:.02em}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.page{max-width:740px;margin:0 auto;padding:0 30px}

/* ---------- FLOATING NAV (shared on every page) ---------- */
nav{position:sticky;top:0;z-index:100;background:rgba(243,236,224,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px;max-width:1120px;margin:0 auto;padding:0 28px}
.brand{display:flex;align-items:center;gap:11px;font-family:"Fraunces",serif;font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--ink)}
.brand .sig{width:30px;height:30px;border-radius:50%;border:2px solid var(--amber);display:grid;place-items:center;position:relative;flex:0 0 auto}
.brand .sig::before,.brand .sig::after{content:"";position:absolute;border:1.5px solid var(--amber);border-radius:50%;opacity:.45}
.brand .sig::before{width:18px;height:18px}
.brand .sig::after{width:9px;height:9px;opacity:.9}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:15px;font-weight:500;color:var(--ink-soft);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--amber)}
.nav-cta{background:var(--ink);color:var(--paper)!important;padding:9px 18px;border-radius:100px;font-size:14px!important}
.nav-cta:hover{background:var(--amber);color:var(--night)!important}
@media(max-width:760px){.nav-links a{display:none}}

/* ---------- HAMBURGER BUTTON ---------- */
.hamburger{
  display:none;flex-direction:column;justify-content:space-between;
  width:30px;height:20px;background:none;border:none;cursor:pointer;
  padding:0;flex:0 0 auto;
}
.hamburger span{
  display:block;height:2px;background:var(--ink);
  border-radius:2px;transition:transform .25s,opacity .2s;
}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
@media(max-width:760px){.hamburger{display:flex}}

/* ---------- MOBILE NAV DRAWER ---------- */
.mobile-nav{
  position:fixed;top:0;right:-290px;width:280px;height:100vh;
  background:var(--card);padding:80px 28px 32px;
  box-shadow:-4px 0 28px rgba(28,22,17,.22);
  z-index:99;display:flex;flex-direction:column;gap:4px;
  transition:right .3s cubic-bezier(.4,0,.2,1);
  border-left:1px solid var(--line);
}
.mobile-nav.open{right:0}
.mobile-nav a{
  font-family:"Hanken Grotesk",sans-serif;font-weight:500;font-size:17px;
  color:var(--ink);padding:12px 0;
  border-bottom:1px solid var(--line);text-decoration:none;
}
.mobile-nav a:hover{color:var(--amber)}
.mobile-nav a:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px}
.mobile-nav .mobile-cta{
  margin-top:16px;border-bottom:none;
  background:var(--ink);color:var(--paper)!important;
  padding:13px 20px;border-radius:100px;
  text-align:center;font-weight:600;
}
.mobile-nav .mobile-cta:hover{background:var(--amber);color:var(--night)!important}
.mobile-overlay{
  display:none;position:fixed;inset:0;background:rgba(21,17,12,.5);
  z-index:98;cursor:pointer;
}
.mobile-overlay.open{display:block}

/* ---------- DARK INTERIOR HEADER BAND ---------- */
.pagehead{background:var(--night);color:var(--paper);position:relative;overflow:hidden;padding:72px 0 60px}
.pagehead::after{content:"";position:absolute;top:-30%;right:-8%;width:680px;height:520px;background:radial-gradient(ellipse,rgba(246,168,54,.18),transparent 64%);pointer-events:none}
.pagehead .wrap{position:relative;z-index:2}
.pagehead .eyebrow{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber-bright);margin-bottom:18px}
.pagehead h1{font-size:clamp(34px,5.4vw,56px);color:#f7efe1;max-width:20ch;margin:0}
.pagehead h1 em{font-style:italic;color:var(--amber-bright)}
.pagehead .sub{font-family:"Fraunces",serif;font-style:italic;font-size:21px;color:#cdbfa9;margin-top:14px;max-width:50ch}
/* decorative amber dimension line at the band's base */
.pagehead .rule{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,var(--amber) 16%,var(--amber) 84%,transparent);opacity:.85}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 26px;border-radius:100px;font-weight:600;font-size:16px;transition:transform .18s,box-shadow .18s,background .2s,border-color .2s,color .2s;cursor:pointer;border:none;font-family:inherit}
.btn-primary{background:var(--amber);color:var(--night)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(224,123,42,.7)}
.btn-ghost{border:1.5px solid rgba(247,239,225,.32);color:#f7efe1;background:transparent}
.btn-ghost:hover{border-color:var(--amber-bright);color:var(--amber-bright)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--amber);color:var(--night)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- SECTIONS + PROSE ---------- */
section.block{padding:84px 0}
.lead{font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:16px}
h2.big{font-size:clamp(30px,4.4vw,48px);max-width:18ch;margin-bottom:22px}
.prose{max-width:70ch}
.prose h2{font-size:clamp(23px,3vw,31px);margin:40px 0 13px}
.prose h3{font-size:21px;margin:28px 0 10px}
.prose p{font-size:18px;color:var(--ink-soft);margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 18px 22px}
.prose li{font-size:18px;color:var(--ink-soft);margin:0 0 8px}
.prose a{color:var(--rust);font-weight:600;border-bottom:1px solid rgba(177,67,29,.3)}
.prose a:hover{color:var(--amber);border-color:var(--amber)}
.prose strong{color:var(--ink);font-weight:600}
.updated,.effdate{font-family:"JetBrains Mono",monospace;font-size:13px;letter-spacing:.04em;color:var(--ink-soft);margin:0 0 22px}

/* legal pages */
.legal{padding:54px 0}
.legal p{font-size:16.5px;line-height:1.62;color:#2a2017;margin:0 0 15px}
.legal h3{font-family:"Fraunces",serif;font-weight:600;font-size:21px;color:var(--ink);margin:28px 0 8px}
.legal ul{margin:0 0 15px;padding-left:20px}
.legal li{font-size:16px;line-height:1.55;margin:0 0 7px;color:#2a2017}
.legal a{color:var(--rust);font-weight:600}
.legal a:hover{color:var(--amber)}
.ph{background:#fff4e3;border:1px dashed #e0a558;border-radius:6px;padding:1px 7px;font-family:"JetBrains Mono",monospace;font-size:13px;color:#8a5a1e}

/* ---------- CALLOUT BOXES (shared) ---------- */
.box{border-radius:14px;padding:20px 24px;margin:26px 0;font-size:16.5px;line-height:1.6}
.box .bh{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:9px}
.box p{font-size:16.5px;margin:0 0 10px;color:inherit}.box p:last-child{margin:0}
.box ul{margin:4px 0 0;padding-left:20px}.box li{font-size:16px;margin:5px 0}
.box.tip{background:#fff4e3;border:1px solid #f0c98a}.box.tip .bh{color:var(--amber)}
.box.mem{background:#eef6ef;border:1px solid #bcd9c2}.box.mem .bh{color:var(--green)}
.box.trap{background:#fbe9e2;border:1px solid #e6b59f}.box.trap .bh{color:var(--rust)}
.box.scene{background:#eef2f6;border:1px solid #aec3d4}.box.scene .bh{color:var(--teal)}

/* ---------- FOOTER (shared on every page) ---------- */
footer.site{background:var(--paper-2);padding:56px 0 40px;border-top:1px solid var(--line)}
footer.site .foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;margin-bottom:34px}
footer.site .brand{font-size:20px}
footer.site .foot-links{display:flex;gap:30px;flex-wrap:wrap;align-items:center}
footer.site .foot-links a{font-size:14px;color:var(--ink-soft);font-weight:500}
footer.site .foot-links a:hover{color:var(--amber)}
footer.site .disclosure{font-size:13px;color:var(--ink-soft);max-width:62ch;line-height:1.7;border-top:1px solid var(--line);padding-top:24px}
footer.site .disclosure strong{color:var(--ink)}
footer.site .copy{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink-soft);margin-top:20px;letter-spacing:.04em}

/* ---------- FOCUS VISIBLE (WCAG 2.4.7) ---------- */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:3px;
}

/* ---------- SKIP NAVIGATION (WCAG 2.4.1) ---------- */
/* Usage: add <a class="skip-nav" href="#main-content">Skip to main content</a>
   immediately after <body> on each page, and wrap main content in
   <main id="main-content"> — see site-wide WCAG notes */
.skip-nav{
  position:absolute;top:-120px;left:16px;
  background:var(--amber);color:var(--night);
  font-weight:700;font-size:15px;padding:10px 20px;
  border-radius:0 0 10px 10px;z-index:9999;
  transition:top .2s;
}
.skip-nav:focus{top:0;outline:none}

/* ---------- GEAR CALLOUT CARD (in-content affiliate block) ---------- */
.gear-callout{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);
  border-radius:0 14px 14px 0;padding:22px 26px;margin:34px 0;
  display:flex;flex-direction:column;gap:10px;
}
.gear-callout .gc-label{
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amber);font-weight:700;
}
.gear-callout .gc-heading{
  font-family:"Fraunces",serif;font-weight:600;font-size:20px;
  color:var(--ink);line-height:1.2;
}
.gear-callout .gc-body{
  font-size:15.5px;color:var(--ink-soft);line-height:1.6;margin:0;
}
.gear-callout .gc-link{
  display:inline-flex;align-items:center;gap:7px;font-weight:600;
  font-size:15px;color:var(--amber);border-bottom:1px solid rgba(224,123,42,.3);
  text-decoration:none;
  transition:color .2s,border-color .2s;align-self:flex-start;
}
.gear-callout .gc-link:hover{color:var(--rust);border-color:var(--rust)}
.gear-callout .gc-link .arr{transition:transform .2s}
.gear-callout .gc-link:hover .arr{transform:translateX(4px)}
.coupon-row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.coupon-badge{display:inline-flex;align-items:center;gap:5px;background:#e8f5f0;color:#1a5c40;border:1px solid #8dcbb4;border-radius:6px;font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;padding:4px 10px;white-space:nowrap}
.coupon-badge .ctag{letter-spacing:.08em;text-transform:uppercase;opacity:.7;font-size:10px}
.coupon-note{font-size:13px;color:var(--ink-soft)}

/* ---------- SCROLL REVEAL ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}

/* ---------- PRINT (cheat sheets etc.) ---------- */
@media print{
  nav,footer.site,.noprint{display:none!important}
  body::before{display:none!important}
  body{background:#fff;font-size:11pt}
  .pagehead{background:#fff;color:#000;padding:0 0 8pt}
  .pagehead .eyebrow{color:#000}
  .pagehead h1{color:#000}
  .pagehead .sub{color:#333}
  .pagehead::after,.pagehead .rule{display:none!important}
}