/* ============================================================
   TOKENS.CSS — Design tokens, resets, and base utilities
   Shared across all pages.
   ============================================================ */

:root{
  --midnight:#013D5A;--midnight-deep:#00293D;
  --lionsmane:#FCF3E3;--lionsmane-deep:#F4E8D1;
  --celeste:#BDD3CE;--celeste-soft:#D6E4E0;
  --herb:#708C69;--herb-soft:#A7BDA1;
  --marigold:#F6A258;--marigold-soft:#FAC992;
  --bg:var(--lionsmane);--ink:var(--midnight);
  --ink-soft:#486173;--ink-mute:#7A8C9A;
  --rule:rgba(1,61,90,0.14);--rule-strong:rgba(1,61,90,0.26);
  --paper:#FFFAEE;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter Tight',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1280px;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{
  font-family:var(--sans);color:var(--ink);background:var(--bg);
  line-height:1.55;font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:500}

/* ========== Section chrome ========== */
section.band{padding:clamp(80px,9vw,120px) 0;position:relative}
.sec-head{
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:32px;
  margin-bottom:clamp(40px,6vw,64px);padding-bottom:24px;border-bottom:1px solid var(--rule);
}
.sec-num{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--marigold);display:flex;align-items:center;gap:10px}
.sec-num b{font-weight:600;color:var(--marigold)}
.sec-num::before{content:"";width:22px;height:1px;background:var(--marigold)}
.sec-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,4.5vw,56px);line-height:1.05;letter-spacing:-0.02em;color:var(--midnight);
  margin-top:10px;font-variation-settings:"opsz" 72;
}
.sec-title em{font-style:italic}
.sec-link{font-family:var(--sans);font-size:14px;color:var(--ink-soft);display:inline-flex;align-items:center;gap:8px;transition:.2s;white-space:nowrap}
.sec-link:hover{color:var(--midnight)}
.sec-link .c{width:28px;height:28px;border-radius:50%;border:1px solid var(--rule-strong);display:grid;place-items:center;transition:.25s}
.sec-link:hover .c{background:var(--midnight);color:var(--lionsmane);border-color:var(--midnight);transform:rotate(-45deg)}