/* ============================================================
   CSCI 455/555 — Unified chassis (topnav, footer, focus, buttons)
   Loaded after style.css; this file is the source of truth for the
   shell shared by every page. Page-specific CSS lives in the page
   template's inline <style> or its own dedicated file.
   ============================================================ */

:root{
  --green:#004E38;
  --green-deep:#003526;
  --green-dark:#002219;
  --green-soft:#0d6a50;
  --brass:#B8965B;
  --brass-light:#d6bb86;
  --brass-bright:#e8c275;
  --brass-deep:#8a6b1f;
  --cream:#fbf8ee;
  --cream-warm:#f6f1e3;
  --cream-edge:#efe7cf;
  --rule:#e6dfc7;
  --rule-soft:#efe9d4;
  --ink:#0d1612;
  --ink-soft:#3a4540;
  --ink-mute:#6d7771;
  --crimson:#8a2c1d;
  --ok:#2f7d54;--ok-bg:#e7f1e7;
  --warn:#a86b22;--warn-bg:#f6ead0;
  --bad:#a64a30;--bad-bg:#f4e0d6;

  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',Menlo,monospace;
  --display:'Antonio','Bebas Neue',Impact,sans-serif;

  --r-card:14px;
  --r-pill:999px;
  --maxw:1280px;

  /* ---- type ramp (Phase 3 — shared sizes across pages) ----------------
     Use these tokens in page-level CSS instead of ad-hoc clamp() values.
     Each token scales from a phone floor to a desktop cap via vw; caps
     are calibrated against a 14"/13" MacBook (1440–1488 px, 900 h). */
  --t-display: clamp(40px, 5vw, 72px);   /* landing poster headline */
  --t-h1:      clamp(36px, 4.4vw, 64px); /* page H1 (cohorts, content) */
  --t-h2:      clamp(28px, 3.4vw, 48px); /* section H2 */
  --t-h3:      clamp(20px, 2vw, 26px);   /* card H3 */
  --t-body:    clamp(14px, 1.05vw, 16px);
  --t-caption: 11px;                     /* mono eyebrows, labels */
  --t-mono:    12.5px;                   /* mono body, code */

  /* ---- canonical breakpoints (documentation only — CSS @media
     conditions cannot reference custom properties; values codified
     here so future pages converge on the same boundaries) ---------- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* ====== global reset / typography baseline ====== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#ffffff;color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a:focus-visible,button:focus-visible,details:focus-visible,summary:focus-visible{
  outline:2px solid var(--brass);outline-offset:3px;border-radius:4px;
}

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

/* ====== scroll progress bar ====== */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;background:transparent;z-index:100;pointer-events:none}
.scroll-progress__bar{height:100%;background:linear-gradient(90deg,var(--brass),var(--brass-bright));width:0;transition:width .1s ease}

/* ====== UNIFIED TOPNAV (dark, flush-left, high contrast) ====== */
.topnav{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,#0d1612 0%,#0a1612 100%);
  border-bottom:none;
  box-shadow:0 1px 0 rgba(184,150,91,.35),0 8px 24px -16px rgba(0,0,0,.35);
}
.topnav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(184,150,91,.5) 20%,rgba(184,150,91,.5) 80%,transparent 100%);
}
.topnav__inner{
  display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;
  height:72px;width:100%;padding:0 36px;
}
.topnav__brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.topnav__wm{
  font-family:Georgia,'Times New Roman',serif;font-size:24px;color:#ffffff;
  letter-spacing:-.005em;line-height:1;white-space:nowrap;
  display:inline-flex;align-items:baseline;gap:.16em;flex:none;
}
.topnav__wm b{font-weight:600;font-style:normal}
.topnav__wm i{color:var(--brass-bright);font-style:italic;font-weight:700;font-size:1.08em;line-height:1}
.topnav__divider{width:1px;height:40px;background:rgba(184,150,91,.32);flex:none}
.topnav__id{display:flex;flex-direction:column;line-height:1.1}
.topnav__id-pre{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(232,194,117,.85);font-weight:500;
}
.topnav__id-name{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:600;font-size:16px;
  letter-spacing:-.005em;color:#ffffff;margin-top:3px;white-space:nowrap;
}
.topnav__id-name em{font-style:italic;color:var(--brass-bright);font-weight:500}

.topnav__primary{display:flex;align-items:center;gap:2px;justify-self:center}
.topnav__primary a{
  padding:9px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:rgba(232,194,117,.9);
  border-radius:6px;text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.topnav__primary a:hover{background:rgba(184,150,91,.18);color:#ffffff}
.topnav__primary a[aria-current="page"]{
  color:#0d1612;background:var(--brass-bright);font-weight:800;
}

.topnav__auth{display:flex;align-items:center;gap:10px;justify-self:end}

/* Polished Sign-in button */
.topnav__signin{
  color:#0d1612;background:linear-gradient(180deg,#f3d68f 0%,#e8c275 100%);
  border:1px solid #d8aa4c;padding:10px 18px;border-radius:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:800;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(13,22,18,.08),
             0 6px 14px -6px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.06);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  position:relative;overflow:hidden;
}
.topnav__signin::after{
  content:"\2192";font-family:Georgia,serif;font-size:15px;letter-spacing:0;font-weight:400;
  margin-left:4px;transition:transform .2s ease;
}
.topnav__signin:hover{
  background:linear-gradient(180deg,#ffe1a0 0%,#f3d385 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(13,22,18,.08),
             0 10px 22px -8px rgba(0,0,0,.45),0 2px 0 rgba(255,255,255,.08);
  transform:translateY(-1px);
}
.topnav__signin:hover::after{transform:translateX(4px)}
.topnav__signin:active{
  transform:translateY(0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(13,22,18,.12),
             0 3px 8px -3px rgba(0,0,0,.4);
}

/* User pill (logged-in) */
.topnav__user{
  display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;
  background:rgba(184,150,91,.12);border:1px solid rgba(184,150,91,.3);
  border-radius:999px;text-decoration:none;
}
.topnav__user .av{
  width:30px;height:30px;border-radius:50%;background:var(--green-deep);
  color:var(--brass-bright);display:grid;place-items:center;
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:700;font-size:13px;
  overflow:hidden;flex:none;
}
.topnav__user b{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:#ffffff;font-weight:600;
}
.topnav__logout{
  padding:8px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:700;color:rgba(232,194,117,.85);
  border-radius:6px;text-decoration:none;
  transition:color .15s ease,background .15s ease;
}
.topnav__logout:hover{color:#ffffff;background:rgba(184,150,91,.18)}

@media(max-width:980px){
  .topnav__primary{display:none}
  .topnav__id-pre{display:none}
}
@media(max-width:640px){
  .topnav__id-name{font-size:14px}
  .topnav__user b{display:none}
}

/* ====== UNIFIED FOOTER (black, brass top rule, W&M wordmark) ====== */
.footer{
  background:#0a0f0c;color:#fbf8ee;
  margin-top:120px;padding:72px 0 48px;
  position:relative;overflow:hidden;
}
.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent 0%,var(--brass) 15%,var(--brass-bright) 50%,var(--brass) 85%,transparent 100%);
}
.footer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1100px 380px at 100% 0,rgba(232,194,117,.10),transparent 60%),
    radial-gradient(900px 320px at 0 100%,rgba(0,78,56,.18),transparent 60%);
}
.footer .wrap{position:relative;z-index:1}
.footer__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(232,194,117,.74);font-weight:500;line-height:1.7;
  padding-top:36px;padding-bottom:36px;
  border-top:1px solid rgba(184,150,91,.22);border-bottom:1px solid rgba(184,150,91,.22);
}
.footer__grid b{
  display:block;font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:700;
  font-size:17px;letter-spacing:-.005em;color:#fbf8ee;text-transform:none;
  margin-bottom:8px;
}
.footer__sig{
  margin-top:24px;padding-top:0;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(232,194,117,.55);font-weight:500;
}
.footer__sig b{color:var(--brass-bright);font-weight:700}
.footer__wm{
  margin-top:40px;padding-top:32px;
  border-top:1px solid rgba(184,150,91,.18);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;
}
.footer__wm span{
  font-family:Georgia,'Times New Roman',serif;font-size:34px;color:#fbf8ee;
  letter-spacing:-.01em;line-height:1;
  display:inline-flex;align-items:baseline;gap:.16em;
}
.footer__wm span b{font-weight:600;font-style:normal}
.footer__wm span i{color:var(--brass-bright);font-style:italic;font-weight:700;font-size:1.08em;line-height:1}
.footer__wm small{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(232,194,117,.7);font-weight:500;
}

@media(max-width:780px){
  .footer__grid{grid-template-columns:1fr 1fr}
}

/* ============================================================
   COURSE-MODULE CONTENT BLOCKS (.b-*)
   One source of truth shared by the /module/<slug> article page
   and the lesson-mode deck (see src/lib/articleBlocks.ts). Built
   borders-first so every block reads on BOTH the white article
   surface and the cream deck cards. Fonts follow the global
   --serif / --sans / --mono tokens.
   ============================================================ */
.b-para{font-family:'Fraunces',Georgia,serif;font-size:16.5px;line-height:1.58;color:var(--ink);margin-bottom:10px}
.b-para p + p{margin-top:12px}
.b-para strong{color:var(--green-deep);font-weight:600}
.b-para em{font-style:italic;color:var(--brass-deep)}

.b-callout{margin:14px 0;padding:12px 16px;background:var(--cream-warm);border:1px solid var(--rule);border-left:3px solid var(--brass);border-radius:0 8px 8px 0;font-family:'Fraunces',Georgia,serif;font-size:15px;line-height:1.5;color:var(--ink);display:flex;gap:11px;align-items:flex-start}
.b-callout > svg{flex:none;margin-top:2px;color:var(--brass-deep)}
.b-callout--warn{background:#f7eed7;border-left-color:var(--brass-deep)}
.b-callout--warn > svg{color:var(--warn)}
.b-callout strong{color:var(--green-deep);font-weight:600}

.b-code{margin:18px 0;padding:16px 18px;background:#0d1612;color:#f3ecda;border-radius:10px;font-family:var(--mono);font-size:12.5px;line-height:1.55;overflow-x:auto;white-space:pre;border:1px solid #25332c;max-width:100%;box-sizing:border-box}

.b-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}
.b-compare .cell{border:1px solid var(--rule);border-radius:10px;padding:12px 14px;background:rgba(255,255,255,.5)}
.b-compare .cell:first-child{border-top:2px solid var(--brass-deep)}
.b-compare .cell:last-child{border-top:2px solid var(--green)}
.b-compare .lab{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin-bottom:10px}
.b-compare .cell:first-child .lab{color:var(--brass-deep)}
.b-compare .cell:last-child .lab{color:var(--green-deep)}
.b-compare p{font-family:'Fraunces',Georgia,serif;font-size:14.5px;line-height:1.55;margin-bottom:8px;color:var(--ink-soft)}
.b-compare p:last-child{margin-bottom:0}
.b-compare strong{color:var(--ink);font-weight:600}
.b-compare ul{margin:0;list-style:none}
.b-compare li{font-family:'Inter',system-ui,sans-serif;font-size:13px;line-height:1.4;color:var(--ink-soft);padding:3px 0 3px 18px;position:relative}
.b-compare li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border:1.6px solid var(--brass);border-radius:50%}
.b-compare code{font-family:var(--mono);font-size:.86em;background:rgba(184,150,91,.16);padding:1px 5px;border-radius:4px;color:var(--green-deep)}

.b-stats{display:flex;flex-wrap:wrap;gap:0;margin:18px 0;border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.b-stats .stat{flex:1 1 160px;padding:16px 18px;border-right:1px solid var(--rule-soft)}
.b-stats .stat:last-child{border-right:none}
.b-stats .val{font-family:var(--mono);font-weight:700;font-size:22px;color:var(--green-deep);letter-spacing:-.01em;margin-bottom:6px}
.b-stats .lbl{font-family:'Fraunces',Georgia,serif;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}

.b-def{margin:16px 0;border-top:1px solid var(--rule)}
.b-def .row{padding:13px 0;border-bottom:1px solid var(--rule-soft)}
.b-def .term{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--brass-deep);margin-bottom:5px;display:flex;align-items:center;gap:9px}
.b-def .term::before{content:"";width:14px;height:1.6px;background:var(--brass);flex:none}
.b-def .def{font-family:'Fraunces',Georgia,serif;font-size:15px;line-height:1.55;color:var(--ink-soft)}
.b-def .def strong{color:var(--green-deep);font-weight:600}
.b-def .def em{font-style:italic;color:var(--brass-deep)}

.b-pipe{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0;align-items:stretch}
.b-pipe .step{flex:1 1 150px;border:1px solid var(--rule);border-radius:10px;padding:13px 15px;background:rgba(255,255,255,.5);position:relative}
.b-pipe .step .n{font-family:var(--mono);font-weight:700;font-size:11px;color:var(--brass-deep);letter-spacing:.1em;margin-bottom:7px;display:flex;align-items:center;gap:8px}
.b-pipe .step .n b{width:20px;height:20px;border:1.6px solid var(--brass);border-radius:50%;display:grid;place-items:center;font-size:10px;color:var(--green-deep)}
.b-pipe .step .t{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:14.5px;color:var(--green-deep);line-height:1.2;margin-bottom:5px}
.b-pipe .step .d{font-family:'Fraunces',Georgia,serif;font-size:13px;line-height:1.45;color:var(--ink-soft)}

.b-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:18px 0}
.b-info .ic{border:1px solid var(--rule);border-top:2px solid var(--brass);border-radius:10px;padding:15px 17px;background:rgba(255,255,255,.5)}
.b-info .ic .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--brass-deep);margin-bottom:9px}
.b-info .ic .x{font-family:'Fraunces',Georgia,serif;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.b-info .ic strong{color:var(--green-deep);font-weight:700;font-family:var(--mono);font-size:15px}

.b-table{margin:18px 0;overflow-x:auto;border:1px solid var(--rule);border-radius:10px}
.b-table table{border-collapse:collapse;width:100%;min-width:540px}
.b-table th{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--cream);background:var(--green-deep);text-align:left;padding:11px 14px}
.b-table td{font-family:'Fraunces',Georgia,serif;font-size:14px;color:var(--ink-soft);padding:10px 14px;border-top:1px solid var(--rule-soft)}
.b-table td:first-child{font-weight:600;color:var(--green-deep)}
.b-table tr:nth-child(even) td{background:rgba(184,150,91,.05)}

@media(max-width:640px){
  .b-compare{grid-template-columns:1fr}
}