/* Technical typography and rounded controls, shared by the five brand layouts. */
:root{--radius:24px;--control-radius:999px}
body{position:relative;isolation:isolate;overflow-x:clip}
body::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:120px;right:max(64px,calc((100vw - 1250px)/2));width:min(55vw,720px);height:680px;background:var(--accent);mask:url("logo.svg") center/contain no-repeat;-webkit-mask:url("logo.svg") center/contain no-repeat;opacity:.045;transform:rotate(-7deg)}
:root[data-theme=dark] body::before{opacity:.06}
:root[data-motion=playing] body::before{animation:brand-drift 22s ease-in-out infinite alternate}
@keyframes brand-drift{from{transform:translate(-20px,0) rotate(-7deg)}to{transform:translate(0,22px) rotate(5deg)}}
.header{gap:12px 16px;padding-block:22px;min-height:112px;flex-wrap:wrap}
.brand{font-family:var(--display);font-size:27px;font-weight:650;letter-spacing:-.045em}
.brand svg{width:31px;height:31px}
.nav{margin-left:auto;gap:2px;padding:5px;background:var(--surface);border-radius:var(--control-radius);font-family:var(--display);font-size:14px;font-weight:600}
.nav a{min-height:42px;padding:9px 14px;border-radius:var(--control-radius);color:var(--muted)}
.nav a:hover,.nav a[aria-current=page]{background:var(--panel);color:var(--accent)}
.button,button{border-radius:var(--control-radius);font-family:var(--display);font-weight:600;min-height:46px;padding:12px 22px;transition:transform .18s ease-out,background-color .18s,color .18s}
.button:hover,button:hover{transform:translateY(-2px)}
.button:active,button:active{transform:translateY(1px)}
.theme-toggle,.motion-toggle{font-family:var(--font);font-size:13px;font-weight:500;min-height:44px;white-space:nowrap;padding:10px 14px;background:var(--surface);color:var(--ink)}
.header .theme-toggle{margin-left:0}
.theme-toggle:hover,.motion-toggle:hover{background:var(--pale);color:var(--ink);filter:none}
.motion-toggle[hidden]{display:none}
h1,h2,h3,h4,.footer-name,.result-total,.scenario output,.utility-total{font-family:var(--display)}
.identity-hero h1,.subhero h1{font-weight:650;letter-spacing:-.045em}
.identity-hero h1{line-height:1.1}
.reading-hero h1{font-size:clamp(46px,5.4vw,72px);max-width:15ch}
.reading-feature{background:var(--surface);padding:30px;border-radius:var(--radius)}
.reading-feature h2,.reading-row h3,.section-title h2,.scope h2{font-weight:600}
.reading-row,.blog-entry,.utility-library article{border-top:0;border-bottom:0}
.reading-fee{border-radius:18px;background:var(--panel);padding:20px;margin-top:24px}
.cost-ledger,.api-example,.route-comparison,.contributor-card,.scenario,.featured-main,.featured-side,.scope,.scope dl,.bench-stages,.result{border-radius:var(--radius)}
.sources,.term{border-radius:16px}
.cost-ledger .ledger-total,.route-options>div,.method-note,.link-panel,.article-body pre{border-radius:16px}
.cost-ledger .ledger-total{margin-inline:0}
.route-options>div{padding:22px}
.contributor-card img{border-radius:18px}
.scenario{padding:24px}
.scenario output,.reading-fee strong,.cost-ledger dd,.route-arrival strong,.result dd{font-variant-numeric:tabular-nums}
.field input,.field select,.field textarea,.blog-filters input,.blog-filters select,#term-search,#scenario-value{border-radius:14px;min-height:48px;padding:12px 15px}
.field input[type=checkbox]{min-height:0;padding:0}
#scenario-control #scenario-value{border-radius:14px;min-height:48px;padding:12px 15px}
.table-wrap,.table-scroll{border-radius:18px}
.article-body{font-family:var(--font);font-size:18px;line-height:1.8}
.article-body h2{font-weight:600;line-height:1.25}
.page-grid aside nav{background:var(--surface);padding:20px;border-radius:20px}
.page-grid aside nav a{padding:6px 0}
.footer-name{font-weight:600;letter-spacing:-.04em}
.wordmark-bot .brand,.wordmark-bot h1,.wordmark-bot h2,.wordmark-bot h3{letter-spacing:-.035em}
.wordmark-api .brand,.wordmark-api h1,.wordmark-api h2{letter-spacing:-.025em}
.wordmark-route .brand{font-weight:650}
@media(max-width:1180px){.header .brand{margin-right:auto}.header .nav{order:3;flex:1 0 100%;margin-left:0;justify-content:center}.nav a{padding-inline:24px}.identity-hero{padding-top:40px}}
@media(max-width:700px){
  .header{display:grid;grid-template-columns:1fr auto;gap:10px 8px;padding-block:18px 12px}
  .header .brand{grid-column:1/-1;font-size:28px;margin:0}
  .header .nav{grid-column:1/-1;grid-row:2;min-width:0;display:flex;flex-wrap:nowrap;justify-content:space-between;padding:4px;gap:0}
  .nav a{font-size:13px;padding:9px 10px;min-height:44px}
  .theme-toggle{justify-self:start;min-height:44px}
  .motion-toggle{justify-self:end;min-height:44px}
  .identity-hero{padding-top:28px}
  .reading-hero h1{font-size:46px;max-width:15ch}
  .reading-feature{margin-top:28px;padding:24px}
  .reading-fee{padding:18px}
  .reading-feature h2{font-size:26px}
  .scenario{padding:20px 16px;border-radius:20px}
  .contributor-card{border-radius:20px}
  .contributor-card img{border-radius:14px}
  .article-body{font-size:17px}
  .page-grid aside nav{padding:16px}
  body::before{top:210px;width:80vw;height:430px;right:32px;opacity:.035}
}
@media(prefers-reduced-motion:reduce){
  body::before{animation:none!important;transform:none}
  .button,button{transition:none}
  .button:hover,button:hover{transform:none}
  .motion-toggle{display:none}
}