/* ============================================================
   STEWARD SYSTEM — shared global system
   Resets, grid primitives, type roles, identity motifs, reveal
   utilities, motion. Tokens live in tokens.css (single source).
   ============================================================ */

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

/* ---- grid primitives ---- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--margin)}
.cols{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-5{grid-column:span 5}
.span-6{grid-column:span 6}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
@media(max-width:880px){.span-3,.span-4{grid-column:span 6}.span-5,.span-7{grid-column:span 12}.span-6,.span-8{grid-column:span 12}}

/* ---- type roles ---- */
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);display:block}
.kicker.grey{color:var(--grey-500)}
.display{font-family:var(--geo);font-weight:700;letter-spacing:-.02em;line-height:1.05}
h1,h2,h3{letter-spacing:-.01em;font-weight:700}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}
.measure{max-width:64ch}

/* ---- the forward line (identity motif) ---- */
.fwd{display:inline-block;width:1.1em;height:3px;background:var(--blue);margin-left:.35em;vertical-align:.18em}

/* ---- logotype + monogram ---- */
.logotype{font-family:var(--geo);font-weight:500;letter-spacing:-.01em;white-space:nowrap;font-size:20px}
.monogram{width:40px;height:40px;background:var(--blue);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--geo);font-weight:700;font-size:16px;letter-spacing:-.02em;line-height:1;flex-shrink:0}
.monogram::after{content:"";width:.95em;height:3px;background:currentColor;margin-top:.18em}

/* ---- hairline rule (signature device) ---- */
.rule{height:1px;background:var(--grey-300);width:100%}
.rule.ink{background:var(--ink)}

/* ---- scroll progress = the forward line, traveling along the top ---- */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:transparent;z-index:60;pointer-events:none}
.progress::after{content:"";position:absolute;inset:0;background:var(--blue);transform:scaleX(var(--scroll,0));transform-origin:left}

/* ---- reveal utilities (consumed by reveal.js) ---- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.07s}.reveal-d2{transition-delay:.14s}.reveal-d3{transition-delay:.21s}.reveal-d4{transition-delay:.28s}
.draw{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.draw.in{transform:scaleX(1)}
.mask{overflow:hidden}
.mask>*{transform:translateY(108%);transition:transform .8s var(--ease)}
.mask.in>*{transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.draw,.mask>*{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}
/* fallback when declarative animation is frozen (throttled/headless iframes) */
.no-anim .reveal,.no-anim .draw,.no-anim .mask>*{opacity:1!important;transform:none!important;transition:none!important}

a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}