:root{
  --paper:#FBFAF7;
  --sheet:#FFFFFF;
  --ink:#0E2A47;
  --ink-2:#34495F;
  --muted:#5B6672;
  --red:#C8102E;
  --gold:#B8892B;
  --gold-ink:#7A5A12;
  --rule:#DAD7CF;
  --rule-soft:#E9E6DF;
  --tint:#F3F1EB;
  --serif:"Source Serif 4",Georgia,serif;
  --sans:"Source Sans 3",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --wrap:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);font-feature-settings:"kern","liga"}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono)}

/* utility strip */
.util{background:var(--ink);color:#E9EEF4;font-size:14px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:6px 24px;min-height:40px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.util a{color:#fff;text-underline-offset:3px}
.util .disc a{font-weight:600;text-decoration-color:var(--gold)}
.util ul{display:flex;gap:4px 18px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.util ul a{text-decoration:none;display:inline-flex;align-items:center;min-height:28px}
.util ul a:hover{text-decoration:underline}

/* masthead */
.mast{background:var(--sheet);border-bottom:1px solid var(--rule);position:relative}
.mast::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--gold);opacity:.55}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.mono-mark{width:40px;height:40px;background:var(--ink);color:#fff;border-radius:2px;display:grid;place-items:center;font:700 17px/1 var(--serif);letter-spacing:.02em;position:relative;flex:none}
.mono-mark::after{content:"";position:absolute;left:6px;right:6px;bottom:6px;height:1.5px;background:var(--gold)}
.brand b{font:600 22px/1.1 var(--serif);letter-spacing:-.005em;display:block}
.brand small{display:block;font:500 13.5px/1.2 var(--sans);color:var(--muted);margin-top:3px}
.tabs{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 11px;text-decoration:none;font-weight:500;font-size:15.5px;color:var(--ink-2);border-bottom:2px solid transparent;white-space:nowrap}
.tabs a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.tabs a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.tabs .ext{color:var(--ink);font-weight:600}

/* page head */
.crumbs{display:flex;gap:10px;align-items:center;font-size:14.5px;color:var(--muted);margin:0 0 6px;flex-wrap:wrap}
.crumbs a{color:var(--ink);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.byline{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;font-size:15px;color:var(--ink-2)}
.byline li{padding-right:14px;margin-right:14px;border-right:1px solid var(--rule)}
.byline li:last-child{border-right:0;margin-right:0;padding-right:0}
.byline a{font-weight:600;color:var(--ink);text-decoration-color:var(--gold);text-underline-offset:3px}

/* section heads */
.band{padding:64px 0;border-top:1px solid var(--rule)}
.band.tint{background:var(--tint)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:12px 24px;margin-bottom:24px;flex-wrap:wrap}
.sec-head h2{font:600 clamp(26px,3vw,34px)/1.15 var(--serif);letter-spacing:-.012em;margin:0 0 6px}
.sec-head p{margin:0;color:var(--ink-2);max-width:40em}
.count{font:500 13.5px var(--mono);color:var(--muted);white-space:nowrap}

/* ledger table */
.ledger{width:100%;border-collapse:collapse;background:var(--sheet);border:1px solid var(--rule);font-size:15.5px}
.ledger th{font:600 14px/1.3 var(--sans);text-align:left;color:var(--ink-2);background:var(--paper);padding:12px 16px;border-bottom:2px solid var(--ink)}
.ledger td{padding:12px 16px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.ledger tr:last-child td{border-bottom:0}
.ledger td:first-child{font-family:var(--serif);font-weight:600;font-size:17px}

/* changelog */
.log{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.log::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--ink)}
.log li{position:relative;padding:30px 32px 0 0}
.log li::before{content:"";position:absolute;top:2px;left:0;width:11px;height:11px;background:var(--paper);border:1.5px solid var(--ink);border-radius:50%}
.log li:first-child::before{background:var(--ink)}
.log time{font:500 14px var(--mono);display:block;margin-bottom:6px}
.log .kind{display:block;font:600 14px/1.3 var(--sans);color:var(--ink);margin-bottom:6px}
.log p{margin:0;font-size:15.5px;color:var(--ink-2)}
.log a{color:var(--ink);text-decoration-color:var(--gold);text-underline-offset:3px}

/* footer */
footer{background:var(--ink);color:#DCE3EB;padding:56px 0 32px;font-size:15px}
footer a{color:#fff;text-decoration:none}
footer a:hover{text-decoration:underline}
.f-top{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,.8fr));gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.18)}
.f-brand b{font:600 21px var(--serif);color:#fff;display:block;margin-bottom:12px}
.pub{margin:0;padding:14px 16px;border:1px solid rgba(184,137,43,.8);border-radius:2px;color:#fff;font-size:15.5px;line-height:1.5}
.pub a{font-weight:600;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
footer h2{font:600 14.5px/1.3 var(--sans);color:#fff;margin:0 0 10px}
footer ul{list-style:none;margin:0;padding:0}
footer li a{display:inline-flex;align-items:center;min-height:32px;color:#DCE3EB}
.f-legal{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;padding:28px 0 0}
.disclaimer{margin:0 0 8px;color:#fff;font-size:15px;line-height:1.55}
.disclaimer-2{margin:0;color:#fff}
.f-base{display:flex;flex-direction:column;gap:6px;align-items:flex-end;text-align:right;font-size:14px}
.f-base .mono{font-size:12.5px;color:#AEBBCA}

@media (max-width:1020px){
  .log{grid-template-columns:1fr;row-gap:24px}
  .log::before{display:none}
  .log li{border-top:1px solid var(--ink);padding-top:22px}
  .log li::before{top:-6px}
  .f-top{grid-template-columns:1fr 1fr 1fr}
  .f-brand{grid-column:1/-1}
  .f-legal{grid-template-columns:1fr}
  .f-base{align-items:flex-start;text-align:left}
}
@media (max-width:720px){
  body{font-size:16.5px}
  .wrap{padding:0 16px}
  .util{font-size:13.5px}
  .mast .wrap{flex-direction:column;align-items:stretch;gap:0;padding-top:14px}
  .tabs{overflow-x:auto;margin:6px -16px 0;padding:0 8px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .tabs::-webkit-scrollbar{display:none}
  .band{padding:48px 0}
  .byline{flex-direction:column}
  .byline li{border:0;padding:0;margin:0}
  .f-top{grid-template-columns:1fr 1fr;gap:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* round 4: eight tabs; stack the masthead before the tabs run out of room */
@media (max-width:1180px) and (min-width:721px){
  .mast .wrap{flex-direction:column;align-items:stretch;gap:0;padding-top:14px}
  .tabs{overflow-x:auto;margin:6px -12px 0;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
}
