/* =========================================================
   THE OVER 50 STANDARD — base
   Typography, layout and shared furniture for the inner
   pages (gear.html, ebooks.html). The home page and the
   standards card carry their own base inline.
   Load this BEFORE assets/night.css.
   ========================================================= */

:root{
  --canvas:#08090A;
  --panel:#101216;
  --panel-2:#15181D;
  --accent:#A9CF4A;
  --accent-hover:#C0E25F;
  --accent-muted:#6C8A34;
  --text-primary:#EEF1EA;
  --text-secondary:#9BA298;
  --rule:#232830;
  --hero-text:#F4F7F0;
  --tshadow:0 1px 2px rgba(0,0,0,.9);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#08090A}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:Literata,Georgia,serif;font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:"Bricolage Grotesque",Helvetica,Arial,sans-serif;font-weight:700;
  letter-spacing:-.02em;line-height:1.06;text-wrap:balance;
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#0A0D06;padding:12px 18px;z-index:100}
.skip:focus{left:8px;top:8px}

.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(18px,4vw,48px);position:relative}
section{padding:clamp(64px,9vw,120px) 0;position:relative}
main{position:relative;z-index:2}

.kicker{font-family:"DM Mono",ui-monospace,monospace;font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.lede{font-size:clamp(18px,1.9vw,22px);line-height:1.55;color:var(--text-secondary);max-width:58ch}
h2.sec{font-size:clamp(28px,4vw,46px);margin:0 0 20px;max-width:20ch}

/* fixed environment layer */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;
  animation:envdrift 90s var(--ease-soft) -20s infinite alternate}
@keyframes envdrift{to{transform:translate3d(0,-2.2%,0) scale(1.05)}}

/* nav */
.nav{display:flex;align-items:center;gap:20px;padding:18px clamp(18px,4vw,56px)}
.brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:17px;
  letter-spacing:-.01em;color:var(--hero-text);text-decoration:none}

/* buttons */
.btn{display:inline-block;text-decoration:none;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:17px;letter-spacing:-.01em;
  padding:15px 26px;border:0;border-radius:4px;cursor:pointer}
@media (pointer:coarse){.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}}

/* reveals */
.js .rise{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .rise.in{opacity:1;transform:none}

/* drawn rules */
.drawn{width:100%;height:2px;overflow:visible;color:var(--rule)}
.js .drawn line{stroke-dashoffset:1200}
.drawn line{stroke:currentColor;stroke-width:2;stroke-dasharray:1200;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.5s var(--ease)}
.drawn.in line{stroke-dashoffset:0}

/* footer */
footer{padding:56px 0 44px;position:relative;z-index:2}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:baseline}
footer a{text-decoration:none}
footer .fnote{font-size:14.5px;max-width:70ch;margin:16px 0 0;flex-basis:100%;line-height:1.65}
footer .flinks{margin-left:auto;display:flex;gap:20px;
  font-family:"DM Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase}

@media (max-width:720px){body{font-size:17px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rise{opacity:1!important;transform:none!important}
  .drawn line{stroke-dashoffset:0!important}
}