/* site.css — shared design system (auto-extracted, common to all pages) */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
.dark .eyebrow{color:var(--gold)}
h1,h2{font-family:var(--display);font-weight:600;line-height:1.05;letter-spacing:-.01em}
h3{font-family:var(--mono);font-weight:500;line-height:1.2;letter-spacing:0}
nav.scrolled{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center}
.brand svg{height:30px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:15px;color:var(--muted);transition:color .2s}
.btn:hover{transform:translateY(-1px);opacity:.92}
.btn.ghost{background:transparent;color:var(--ink)}
.dark .btn{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.dark .btn.ghost{background:transparent;color:var(--paper);border-color:var(--line-d)}
.nav-cta{padding:9px 18px}
.menu-btn{display:none;background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:13px;color:var(--ink)}
.reveal-load{opacity:0;transform:translateY(18px);animation:fadeUp .7s forwards}
.d1{animation-delay:.05s}
.d2{animation-delay:.18s}
.d3{animation-delay:.32s}
.d4{animation-delay:.46s}
@keyframes fadeUp{to{opacity:1;transform:none}}
.sec-head h2{font-size:clamp(30px,4vw,50px);margin-top:16px}
.dark{background:var(--ink);color:var(--paper)}
.dark .lede{color:var(--muted-d)}
footer{background:var(--ink);color:var(--paper);border-top:1px solid var(--line-d);padding:56px 0 40px}
.foot-in{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.foot-logo img{height:42px;width:auto;display:block;margin-bottom:14px}
.foot-tag{color:var(--muted-d);font-size:15px;max-width:32ch}
/* Wraps because the list grows with the module roster: seven links already ran off a
   narrow phone before Solidago was added to it. .foot-in wraps for the same reason. */
.foot-links{display:flex;flex-wrap:wrap;gap:14px 26px;font-size:14.5px;color:var(--muted-d)}
.foot-links a:hover{color:var(--paper)}
.foot-copy{font-family:var(--mono);font-size:12px;color:var(--muted-d);margin-top:34px}
.obs{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.obs.in{opacity:1;transform:none}
.menu-btn{display:none!important}
.btn.login{background:var(--violet);border-color:var(--violet);color:#fff}
.btn.login:hover{opacity:.94}
.eyebrow{font-family:var(--mono);font-weight:400}
.meta h2,.sec-head h2,.mcard h3,.f h3,.step h3,.app h3,.out h3,.pillar h3{letter-spacing:0}
.animcap,.foot-copy,.readout,.formnote,.cite-src,.mod-phase,.mod-num,
  .contact-meta .k,.app .num,.out .tag,.tag{font-family:var(--body);font-weight:200}
.nav-links a,.btn{font-family:var(--mono);font-weight:500}

/* Capitula dropdown: the platform pages under one nav item (js/nav-menu.js).
   Hover and focus-within open it here; the script adds tap, Escape and arrow keys. */
.nav-drop{position:relative}
.nav-parent{font-family:var(--mono);font-weight:500;font-size:15px;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;display:flex;align-items:center;gap:6px;transition:color .2s}
.nav-parent:hover,.nav-parent.active,.nav-drop:hover .nav-parent,.nav-drop:focus-within .nav-parent{color:var(--ink)}
.nav-parent.active{font-weight:600}
.nav-chev{width:9px;height:6px;flex:0 0 auto;transition:transform .2s}
.nav-drop:hover .nav-chev,.nav-drop:focus-within .nav-chev,.nav-drop.open .nav-chev{transform:rotate(180deg)}
/* a bridge across the gap, so the pointer can travel from trigger to panel without leaving */
.nav-drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.nav-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:172px;display:flex;flex-direction:column;padding:8px;background:rgba(250,248,249,.97);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(36,45,117,.13);opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu,.nav-drop.open .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-menu a{font-size:14.5px;color:var(--muted);padding:8px 12px;border-radius:7px;white-space:nowrap;transition:color .2s,background .2s}
.nav-menu a:hover{color:var(--ink);background:var(--paper-2)}
.nav-menu a[aria-current="page"]{color:var(--ink);font-weight:600}
@media(prefers-reduced-motion:reduce){.nav-menu{transition:none}}

/* Bombus bee riding the rotating hero mark (js/hero-mark-bee.js) */
.hm-bee{pointer-events:none;filter:drop-shadow(0 1px 1.4px rgba(36,45,117,.28))}
.hm-bee .wing{transform-box:fill-box;transform-origin:center;animation:beeflap .11s infinite ease-in-out}
@keyframes beeflap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.42)}}
@media (prefers-reduced-motion:reduce){.hm-bee .wing{animation:none}}