/* The look is the one docs/booth-spec-page.html already set, lifted into a
   file so the pages here and that page cannot drift apart.

   No webfonts. These pages ask nothing of anybody else's server to render,
   which is the same position the program takes about the network. */

:root{
  --sans:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --paper:#E8E9E5;
  --surface:#FDFDFC;
  --panel:#DEE0DB;
  --ink:#14171A;
  --ink-2:#4A5158;
  --ink-3:#767E86;
  --rule:#C9CCC5;
  --low:#2F6FD0;
  --mid:#B87614;
  --mid-bright:#E2A03F;
  --high:#5C6670;
  --go:#2F7D52;
  --alert:#C03A22;
  --booth:#12161A;
  --booth-2:#1B2127;
  --booth-rule:#2C343C;
  --booth-text:#D7DDE3;
  --booth-dim:#7C8894;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1316;
    --surface:#161B1F;
    --panel:#1B2127;
    --ink:#E6EAEE;
    --ink-2:#A6B0B9;
    --ink-3:#78838D;
    --rule:#2A3238;
    --low:#5E9BEF;
    --mid:#E2A03F;
    --mid-bright:#F0B95F;
    --high:#98A4AE;
    --go:#57B37F;
    --alert:#E8654A;
  }
}
:root[data-theme="dark"]{
  --paper:#0F1316;
  --surface:#161B1F;
  --panel:#1B2127;
  --ink:#E6EAEE;
  --ink-2:#A6B0B9;
  --ink-3:#78838D;
  --rule:#2A3238;
  --low:#5E9BEF;
  --mid:#E2A03F;
  --mid-bright:#F0B95F;
  --high:#98A4AE;
  --go:#57B37F;
  --alert:#E8654A;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.mono,.eyebrow,th,.chip,.btn{font-family:var(--sans)}
.mono,code,pre,.data{font-family:var(--mono)}

.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.col{max-width:68ch}

/* ---- top bar ---- */
.bar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.bar-in{display:flex;align-items:center;gap:22px;height:52px}
.brand{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:13px;text-decoration:none;color:var(--ink)}
.brand span{color:var(--mid)}
.bar nav{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.bar nav a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--ink-3);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;
}
.bar nav a:hover,.bar nav a:focus-visible{color:var(--ink);border-bottom-color:var(--mid)}
.bar nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--mid)}

/* ---- hero ---- */
header.hero{padding:76px 0 44px;border-bottom:1px solid var(--rule)}
.eyebrow{
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mid);margin:0 0 20px;
}
h1{
  font-size:clamp(40px,6.4vw,74px);line-height:.98;font-weight:800;
  letter-spacing:-.025em;margin:0 0 26px;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--ink-3)}
.standfirst{font-size:21px;line-height:1.5;color:var(--ink-2);margin:0 0 34px;max-width:60ch}
.facts{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule)}
.fact{padding:16px 26px 16px 0;margin-right:26px;border-right:1px solid var(--rule);flex:0 0 auto}
.fact:last-child{border-right:0}
.fact b{display:block;font-family:var(--sans);font-size:26px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.fact span{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.03em}

/* ---- sections ---- */
section{padding:64px 0;border-bottom:1px solid var(--rule)}
.snum{
  font-family:var(--mono);font-size:11.5px;color:var(--mid);
  letter-spacing:.1em;display:block;margin-bottom:10px;
}
h2{font-size:clamp(27px,3.4vw,38px);line-height:1.08;font-weight:800;letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance}
h3{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:38px 0 10px}
p{margin:0 0 18px}
a{color:var(--ink);text-decoration-color:var(--mid);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--mid);outline-offset:3px}
.lede{font-size:19px;color:var(--ink-2)}
ul.plain{list-style:none;margin:0 0 18px;padding:0}
ul.plain li{padding:7px 0 7px 22px;border-bottom:1px solid var(--rule);position:relative}
ul.plain li::before{content:"\203A";position:absolute;left:4px;color:var(--mid)}
ul.plain li:last-child{border-bottom:0}

/* ---- figures: a still now, a clip when one is recorded ---- */
.figure{margin:0 0 12px}
.shot{
  display:block;margin:0 0 12px;background:var(--booth);
  border:1px solid var(--booth-rule);border-radius:4px;overflow:hidden;
}
.shot img,.shot video{display:block;width:100%;height:auto;background:var(--booth)}
/* A crop of one panel rather than the whole window. Held near the size it was
   cut at, because a 400-pixel-wide detail stretched across a 1060-pixel column
   is a blurry picture of a sharp interface. A clip that replaces one is the
   whole window again, so booth.js takes this off. */
.shot.crop{max-width:560px;margin-left:auto;margin-right:auto}
.figcap{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  margin:0 0 44px;line-height:1.6;
}
.figcap b{color:var(--ink-2);font-weight:600}
/* Said on a figure whose clip has not been recorded. Removed by booth.js on
   the ones that have. */
.await{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--ink-3);border:1px dashed var(--rule);border-radius:2px;
  padding:1px 6px;margin-right:8px;white-space:nowrap;
}

/* ---- two columns of prose or shots ---- */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}

/* ---- prose tables ---- */
.tablewrap{overflow-x:auto;margin:0 0 12px}
table.doc{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
table.doc th{
  text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;padding:0 14px 9px 0;border-bottom:1px solid var(--ink-3);
}
table.doc td{padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.doc td:first-child{white-space:normal}
table.doc tbody th{
  text-align:left;text-transform:none;letter-spacing:0;font-size:15px;
  font-family:var(--sans);font-weight:600;color:var(--ink);
  padding:11px 14px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top;
}
.yes{color:var(--go);font-weight:600}
.no{color:var(--ink-3)}
.maybe{color:var(--mid)}
strong.win{color:var(--mid);font-family:var(--sans);font-weight:600}

/* ---- the release timeline ---- */
.rel{display:grid;grid-template-columns:132px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--rule)}
.rel .v{font-family:var(--mono);font-size:13px;color:var(--mid);letter-spacing:.06em}
.rel .v small{display:block;color:var(--ink-3);letter-spacing:0;margin-top:4px;font-size:11.5px}
.rel h4{margin:0 0 6px;font-size:19px;font-weight:600;letter-spacing:-.01em}
.rel p{margin:0 0 10px;color:var(--ink-2);font-size:15.5px}
.rel p:last-child{margin-bottom:0}

.callout{
  border-left:3px solid var(--mid);padding:2px 0 2px 20px;margin:26px 0;
  font-size:18px;line-height:1.5;
}
.caution{border-left-color:var(--alert)}
pre{
  background:var(--surface);border:1px solid var(--rule);border-radius:3px;
  padding:14px 16px;overflow-x:auto;font-size:13px;line-height:1.55;margin:0 0 18px;
}
code{font-size:.92em}
p code,li code,td code{background:var(--surface);border:1px solid var(--rule);border-radius:2px;padding:0 4px}

.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0}
.btn{
  display:inline-block;border:1px solid var(--mid-bright);color:#0F1316;background:var(--mid-bright);
  font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 18px;border-radius:2px;text-decoration:none;
}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}

footer{padding:52px 0 70px;color:var(--ink-3);font-size:14px}
footer a{color:var(--ink-2)}
footer .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-bottom:34px}
footer h5{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px;font-weight:600}
footer ul{list-style:none;margin:0;padding:0;line-height:1.9}

@media (max-width:860px){
  .pair,footer .cols{grid-template-columns:1fr}
  .rel{grid-template-columns:1fr;gap:10px}
  body{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}