/* A light reading of the same design. White ground, black type, the orange
   pushed a shade darker so it still carries on paper, and the palm given a
   ramp of its own because the stock one runs to cream and would vanish here.
   Loaded only with ?theme=light, so the live site is untouched. */
:root{
  color-scheme:light;
  --bg:#FFFFFF;
  --bg-2:#F6F5F3;
  --panel:#F1F0ED;
  --panel-2:#EBEAE6;
  --ink:#0A0A0A;
  --ink-2:rgba(0,0,0,.7);
  --mute:#6E6E6E;
  --dim:#A8A8A8;
  --rule:rgba(0,0,0,.13);
  --rule-2:rgba(0,0,0,.26);
  --accent:#DC4409;
  --accent-2:#F0631F;
  --accent-dim:rgba(220,68,9,.10);
  --accent-ink:#FFF3EE;
  --yellow:#A87400;
  --ok:#0E8A47;
  --paper:#0A0A0A;
  --paper-ink:#FFFFFF;
  /* the palm, from a burnt orange down to near black: no step is lighter
     than the page */
  --palm-pal:#F0631F,#DC4409,#B83407,#94290A,#7A230A,#5A1A06,#3A1206,#241004;
  /* the wireframe boxes and their labels on the frond tips */
  --palm-ink:rgba(0,0,0,.72);
}
/* the black card was a hole in a dark page; here it is a raised panel */
.card.black{background:var(--bg-2)}
.paper,.card.light{border-color:transparent}

/* the handful of colours the stylesheet nails down rather than taking from a
   token, because the site only ever ran dark */
.navbar{background:rgba(255,255,255,.9);border-bottom:1px solid var(--rule)}
.hero .lede{color:rgba(0,0,0,.78)}
.btn-black{background:#0A0A0A;color:#fff;border-color:#0A0A0A}
.vs th.a{background:#0A0A0A;color:#fff}
.arch{background:rgba(0,0,0,.03)}
.way li::before{background:var(--accent)}
.faq summary::after{background:#0A0A0A}

/* ---------- the display face, on paper ----------
   The pixel face was drawn for a lit screen on black: the staircase edges read
   as glow there and as a printing fault here. On white the whole of the large
   type moves to Geist, set at 500 and pulled tight, which is what a masthead
   wants. The pixel identity stays where it still belongs, in the crab, in the
   palm, and in the mono labels. */
h1,h2,h3,.fig,.pixel,.feat .big,.feat .lat,.lead-head .side b,.way .pr,
.stats .v,.tbl td:first-child,.tape-sym b{
  font-family:var(--sans);
  font-weight:500;
  letter-spacing:-.026em;
}
h1{line-height:1.04}
h2{line-height:1.1;letter-spacing:-.024em}
h3{letter-spacing:-.018em}
.fig,.stats .v,.tbl td:first-child,.tape-sym b{letter-spacing:-.015em}
/* the caret that follows the typed headline was sized off the pixel cap */
.hero h1 .caret{height:.78em;width:.42em}

/* Geist carries much more ink per em than the pixel face, so the same sizes
   read heavier. Everything large comes down about a sixth. */
h1{font-size:clamp(1.95rem,4.1vw,3.7rem)}
h2{font-size:clamp(1.5rem,2.85vw,2.5rem)}
.page-head h1{font-size:clamp(1.6rem,3vw,2.5rem)}
.feat .big{font-size:clamp(2.2rem,4.1vw,3.6rem)}
.feat .lat{font-size:clamp(1.2rem,1.9vw,1.6rem)}
.fig{font-size:clamp(1.4rem,2.2vw,1.9rem)}
.hero .lede{font-size:clamp(1rem,1.35vw,1.12rem)}

/* the mark is the palm now, and it is taller than it is wide */
.brand .mk{width:23px}
.foot-l .brand .mk{width:26px}