/* ── base.css — shell: nav, tabs, footer, buttons, type ──────────────────── */

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4 { font-family:var(--font-display); font-weight:600; line-height:1.15;
  letter-spacing:-.015em; margin:0 0 .5em; }
h1{ font-size:clamp(2.1rem,5vw,3.4rem); }
h2{ font-size:clamp(1.5rem,3vw,2.2rem); }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; }
a{ color:inherit; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 clamp(1rem,4vw,2rem); }
.muted{ color:var(--ink-2); }
.faint{ color:var(--ink-3); }

/* ── The sap seam — the gold line where canopy meets root ─────────────── */
.seam { height:2px; border:0; margin:0;
  background:linear-gradient(90deg,
    transparent, var(--canopy-300) 18%, var(--sap) 50%, var(--root-300) 82%, transparent); }

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nav { position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line); }
.nav-inner { max-width:var(--wrap); margin:0 auto; padding:.6rem clamp(1rem,4vw,2rem);
  display:flex; align-items:center; gap:1rem; }

.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; flex:0 0 auto; }
.brand img{ display:block; }
.brand-txt{ display:flex; flex-direction:column; line-height:1.1; }
.brand-txt b{ font-family:var(--font-display); font-size:1.06rem; letter-spacing:-.01em; }
.brand-txt .sub{ font-size:.68rem; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; }

.tabs { display:flex; gap:.15rem; margin-left:auto; flex-wrap:wrap; }
.tab { display:inline-flex; align-items:center; gap:.4rem; padding:.44rem .78rem;
  border-radius:999px; text-decoration:none; font-size:.92rem; font-weight:500;
  color:var(--ink-2); white-space:nowrap; transition:background .18s var(--ease), color .18s var(--ease); }
.tab:hover{ background:var(--card-2); color:var(--ink); }
.tab.active{ background:var(--sap-core); color:var(--canopy-900); font-weight:600;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sap) 40%,transparent); }
:root[data-theme="dark"] .tab.active{ color:var(--sap); }

.nav-actions{ display:flex; align-items:center; gap:.3rem; flex:0 0 auto; }
.icon-btn { width:36px; height:36px; display:grid; place-items:center; border-radius:999px;
  border:1px solid var(--line); background:var(--card); color:var(--ink-2);
  cursor:pointer; font-size:.95rem; transition:background .18s var(--ease); }
.icon-btn:hover{ background:var(--card-2); color:var(--ink); }
.icon-btn[aria-pressed="true"]{ background:var(--sap-core); border-color:var(--sap);
  color:var(--canopy-900); }
:root[data-theme="dark"] .icon-btn[aria-pressed="true"]{ color:var(--sap); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.72rem 1.35rem;
  border-radius:999px; border:1px solid transparent; text-decoration:none;
  font-weight:600; font-size:.96rem; cursor:pointer; transition:transform .18s var(--ease),
  box-shadow .18s var(--ease), background .18s var(--ease); }
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:linear-gradient(135deg,var(--sap),var(--sap-deep)); color:#2A2013;
  box-shadow:var(--sh-sap); }
.btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--ink-2); }
.btn-ghost:hover{ background:var(--card-2); color:var(--ink); }

/* ── Cards ────────────────────────────────────────────────────────────── */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.4rem; box-shadow:var(--sh-1); }

.eyebrow { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin-bottom:.5rem; }

.pill { display:inline-flex; align-items:center; gap:.35rem; padding:.22rem .6rem;
  border-radius:999px; font-size:.78rem; font-weight:600;
  background:var(--card-2); border:1px solid var(--line); color:var(--ink-2); }

/* Page head shared by section pages */
.page-head{ padding:clamp(2.5rem,7vw,4.5rem) 0 2rem; max-width:64ch; }
.page-head .lede{ font-size:1.15rem; color:var(--ink-2); }

/* ── Reveal on scroll ─────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer { margin-top:5rem; border-top:1px solid var(--line); background:var(--paper-2); }
.footer-inner{ max-width:var(--wrap); margin:0 auto; padding:2.6rem clamp(1rem,4vw,2rem) 2rem;
  display:grid; gap:2rem; grid-template-columns:minmax(220px,1.4fr) repeat(auto-fit,minmax(150px,1fr)); }
.footer h4{ font-family:var(--font-body); font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 .7rem; }
.footer a{ display:block; text-decoration:none; color:var(--ink-2); font-size:.92rem;
  padding:.16rem 0; }
.footer a:hover{ color:var(--ink); }
.footer .blurb{ color:var(--ink-2); font-size:.92rem; max-width:34ch; }
.footer .fine{ border-top:1px solid var(--line); padding:1rem clamp(1rem,4vw,2rem);
  max-width:var(--wrap); margin:0 auto; display:flex; flex-wrap:wrap; gap:.8rem;
  justify-content:space-between; color:var(--ink-3); font-size:.8rem; }
.safety { background:color-mix(in srgb,var(--canopy-100) 50%,transparent);
  border-top:1px solid var(--line); }
.safety p{ max-width:var(--wrap); margin:0 auto; padding:.85rem clamp(1rem,4vw,2rem);
  font-size:.82rem; color:var(--ink-2); }

/* ── Skip link ────────────────────────────────────────────────────────── */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; z-index:100; background:var(--card);
  padding:.6rem 1rem; border-radius:var(--r-sm); border:1px solid var(--line); }

:focus-visible{ outline:2px solid var(--sap-deep); outline-offset:3px; border-radius:4px; }

@media (max-width:820px){
  .nav-inner{ flex-wrap:wrap; }
  .tabs{ order:3; width:100%; margin-left:0; overflow-x:auto; padding-bottom:.2rem; }
  .nav-actions{ margin-left:auto; }
}