/* base.css — shared reset, scrollbar, brand nav and footer for the Patina
   marketing site. Loaded AFTER design-tokens.css and BEFORE each page's own
   <style>, so page-local rules always win. Page-specific deltas (scroll-padding,
   body line-height/weight, grain tuning, the docs sidebar header) live in the
   page itself — only the genuinely shared layer lives here. */

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;scroll-behavior:smooth;
  scrollbar-width:thin;scrollbar-color:rgba(94,224,176,.32) transparent}
html::-webkit-scrollbar{width:11px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:rgba(94,224,176,.26);border-radius:999px;
  border:3px solid var(--bg);background-clip:padding-box}
html::-webkit-scrollbar-thumb:hover{background:rgba(94,224,176,.48);background-clip:padding-box}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--display)}
::selection{background:var(--verdi);color:var(--bg)}
a{color:inherit}
a:focus-visible,button:focus-visible,.btn:focus-visible,.copy:focus-visible{
  outline:2.5px solid var(--verdi);outline-offset:4px;border-radius:4px;box-shadow:0 0 0 6px rgba(94,224,176,.1)}
/* snappier touch: no 300ms delay, no grey tap flash on the brand's dark surfaces */
a,button,.btn,.copy{-webkit-tap-highlight-color:transparent}
button,.btn,.copy{touch-action:manipulation}

/* ---------- brand nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;
  padding:26px 4vw;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em}
nav .mark{font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);
  text-decoration:none;margin-right:auto;letter-spacing:-.01em;
  display:inline-flex;align-items:center}
nav .mark b{color:var(--verdi);font-weight:600}
/* the gap belongs between the disc and the wordmark ONLY — flex gap also split the anonymous
   "patina" text node from its <b>.foundation</b> sibling (the founder's mystery space) */
nav .mark .mk{display:block;flex:none;margin-right:10px}
nav a:not(.mark){color:var(--dim);text-decoration:none;margin-left:26px;transition:color .25s;white-space:nowrap}
nav a:not(.mark):hover{color:var(--verdi)}
nav .pill{border:1px solid var(--glass-line);border-radius:999px;padding:9px 20px;
  color:var(--ink)!important;background:var(--glass-tint),var(--glass-base);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge),0 4px 14px rgba(0,0,0,.22);
  transition:border-color .25s, color .25s, transform .15s, box-shadow .25s}
nav .pill:hover{border-color:var(--verdi);color:var(--verdi)!important}
nav .pill:active{transform:scale(.96)}
@media(max-width:860px){nav{gap:0;font-size:11.5px}nav a:not(.mark){margin-left:16px}}
@media(max-width:640px){
  nav a:not(.mark):not(.pill){display:none}
  nav .pill{margin-left:auto}
}

/* ---------- glass surface ---------- */
/* reusable warm-verdigris frosted panel. The fallbacks are load-bearing: backdrop-filter
   crushes text contrast when the backdrop is busy, and Firefox/old engines may not support
   it — both cases fall back to an opaque surface so the panel stays readable. */
.glass{background:var(--glass-tint),var(--glass-base);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);box-shadow:var(--glass-edge),var(--glass-shadow)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,nav .pill{background:var(--glass-solid)}
}
@media (prefers-reduced-transparency:reduce){
  .glass,nav .pill{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- type polish ---------- */
/* balanced headings (no lonely last word) + body copy without orphans. Progressive
   enhancement: browsers without text-wrap just render normally. */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* ---------- shared footer ---------- */
footer{border-top:1px solid rgba(234,242,236,.07)}
footer .row{max-width:1400px;margin:0 auto;padding:26px 4vw;display:flex;gap:26px;align-items:center;
  font-family:var(--mono);font-size:11.5px;color:var(--faint);flex-wrap:wrap}
footer .row b{color:var(--dim);font-weight:400;margin-right:auto}
footer a{color:var(--dim);text-decoration:none}
footer a:hover{color:var(--verdi)}