/* ------------------------------------------------------------------
   byaliahmad.com: single visual system.
   One family sets the whole page. Source Serif 4 carries display and
   text alike, separated by optical size and weight rather than by a
   second typeface. The system monospace stack is the only other face
   and it appears on code and keycaps, nowhere else. Treat this file as
   the source of truth; do not add a second palette or a second type
   ramp.

   Night mode is not a second palette. It re-values the same six
   tokens and adds nothing. Every rule in this file reads a token, so
   nothing below needs to know which mode is on.
   ------------------------------------------------------------------ */

/* One family, two files, from this origin. See FONTS in templates.js
   for why they are not Google's. The static/fonts directory carries the
   licence. */
@font-face{
  font-family:"Source Serif 4";font-style:normal;font-weight:400 600;
  font-display:swap;src:url(/fonts/source-serif-4-roman.4.005.woff2) format("woff2");
}
@font-face{
  font-family:"Source Serif 4";font-style:italic;font-weight:400 600;
  font-display:swap;src:url(/fonts/source-serif-4-italic.4.005.woff2) format("woff2");
}

:root{
  --paper:#F0EFEB;
  --card:#E7E6E1;
  --ink:#14161A;
  --soft:#5A5E66;
  --rule:#C9C7C0;
  --accent:#1B3A6B;
  --shadow:rgba(20,22,26,.09);
  --serif:"Source Serif 4",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Two noise tiles, both centred on mid-grey so overlay leaves the
     mean alone. The stretched one is the page grain; the raw one is
     the extra the card surfaces get, pulled a little toward the
     middle so it stays a touch. See body::before. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.65' intercept='.175'/%3E%3CfeFuncG type='linear' slope='.65' intercept='.175'/%3E%3CfeFuncB type='linear' slope='.65' intercept='.175'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme:light;
}
:root[data-mode="night"]{
  --paper:#14161A;
  --card:#1C1F25;
  --ink:#E4E4E0;
  --soft:#949AA4;
  --rule:#2E333B;
  --accent:#8FB4E8;
  --shadow:rgba(0,0,0,.34);
  color-scheme:dark;
}
/* No JS, no stored choice, dark OS: night anyway. */
@media(prefers-color-scheme:dark){
  :root:not([data-mode]){
    --paper:#14161A;
    --card:#1C1F25;
    --ink:#E4E4E0;
    --soft:#949AA4;
    --rule:#2E333B;
    --accent:#8FB4E8;
    --shadow:rgba(0,0,0,.34);
    color-scheme:dark;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
/* Selection is accent on paper. At night the tokens reverse it. */
::selection{background:var(--accent);color:var(--paper)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .45s ease, color .45s ease;
}
.wrap{max-width:640px;margin:0 auto;padding:0 24px}

/* Paper grain. One fixed layer over everything: a tiled fractal-noise
   SVG, stretched to sit around mid-grey and blended with overlay, so a
   mid-grey speck leaves the page alone and only the lighter and darker
   specks show. That is what keeps the paper the colour the token says
   it is (the mean shift is under half a level) and lets the same tile
   serve night mode, which stays a re-valuing of tokens rather than a
   second treatment. Overlay bites harder near black than near white,
   so night runs a little lower to land in the same place: about three
   levels of grain either way. Opacity is the whole dial. Felt, not
   seen. Click-through, and gone in print. */
body::before{
  content:"";position:fixed;inset:0;z-index:100;pointer-events:none;
  background-image:var(--grain);
  background-size:240px 240px;
  mix-blend-mode:overlay;
  opacity:.34;
}
:root[data-mode="night"] body::before{opacity:.24}
@media(prefers-color-scheme:dark){
  :root:not([data-mode]) body::before{opacity:.24}
}
@media(prefers-contrast:more){body::before{display:none}}

/* What used to be a tracked-out caps slug. Sentence-case italic at
   reading size steps out of the text without shouting, and it does not
   need a second typeface to do it. Every small label in this file is
   this same treatment. */
.eyebrow{
  font-size:14.5px;font-weight:400;font-style:italic;
  color:var(--soft);
}

/* Crossing from one page to another: the page crossfades and the
   masthead stays where it is. A browser without cross-document view
   transitions cuts, as it always has. */
@view-transition{navigation:auto}
header{view-transition-name:masthead}

/* masthead */
header{padding:44px 0 0;display:flex;align-items:center}
header .name{
  font-weight:600;font-size:16px;letter-spacing:-.004em;white-space:nowrap;
}
header .sep{color:var(--rule);margin:0 8px}
header > .eyebrow{margin-right:12px}
header a.name{color:inherit;text-decoration:none}
header a.name:hover{color:var(--accent)}
header a.name:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Skip link: off-canvas until it has keyboard focus, then a plain pill. */
.skip{
  position:absolute;left:0;top:-100px;z-index:50;
  padding:8px 14px;border-radius:6px;
  background:var(--ink);color:var(--paper);font-size:15px;font-weight:600;text-decoration:none;
}
.skip:focus{top:12px;outline:2px solid var(--accent);outline-offset:3px}
#main:focus{outline:none}

/* night toggle: only ever shown once JS is running */
.nightbtn{
  font-family:var(--serif);font-size:14px;font-weight:600;
  color:var(--soft);background:none;border:0;cursor:pointer;padding:4px 0;
  margin-left:auto;display:none;align-items:center;gap:8px;
}
html.js .nightbtn{display:inline-flex}
.nightbtn:hover{color:var(--accent)}
.nightbtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nightbtn .swatch{
  width:13px;height:13px;border-radius:50%;
  border:1.5px solid currentColor;
  background:linear-gradient(90deg,currentColor 50%,transparent 50%);
}

/* hero */
.hero{padding:76px 0 92px}
html.js .hero.cycles{padding-bottom:30px}
.thesis{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(30px,7.4vw,48px);
  line-height:1.08;
  letter-spacing:-.014em;
}
button.thesis{
  background:none;border:0;padding:0;margin:0;color:inherit;
  text-align:left;display:block;width:100%;cursor:pointer;
}
button.thesis:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.struck{position:relative;display:inline;color:var(--soft)}
.struck .bar{
  position:absolute;left:-.03em;right:-.03em;top:.55em;height:3px;
  background:var(--ink);transform:scaleX(0);transform-origin:left center;
  animation:draw .62s cubic-bezier(.6,0,.3,1) .5s forwards;
}
@keyframes draw{to{transform:scaleX(1)}}
.answer{
  display:block;margin-top:26px;color:var(--accent);
  opacity:0;animation:rise .6s ease 1.05s forwards;
}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* Cycling is not loading. Once the reader has clicked, the rule is
   already drawn and the answer is already up, so the thesis crossfades
   in place; .sizing glides the box between two pair heights so the bio
   below it never jumps. */
.hero.cycled .struck .bar{animation:none;transform:scaleX(1)}
.hero.cycled .answer{animation:none;opacity:1;transform:none}
.hero.cycled .thesis{transition:opacity .17s ease}
.hero.cycled.swapping .thesis{opacity:0}
.hero.sizing .thesis{
  overflow:hidden;
  transition:opacity .17s ease, height .26s cubic-bezier(.4,0,.2,1);
}

.hero-hint{
  font-family:var(--serif);font-size:14.5px;font-weight:400;font-style:italic;
  color:var(--soft);
  background:none;border:0;padding:0;cursor:pointer;
  margin-top:34px;display:none;align-items:center;gap:10px;
  opacity:0;animation:rise .5s ease 1.6s forwards;
  transition:color .25s ease;
}
html.js .hero.cycles .hero-hint{display:inline-flex}
.hero-hint:hover{color:var(--ink)}
.hero-hint:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.hero-hint .dots{display:flex;gap:6px}
.hero-hint .dots i{
  width:6px;height:6px;border-radius:50%;background:var(--rule);
  display:block;transition:background .25s ease;
}
.hero-hint .dots i.on{background:var(--accent)}

/* bio */
.bio{padding-bottom:80px}
.bio p{font-size:19px;line-height:1.62;max-width:34em}
.bio > * + *{margin-top:18px}
.bio ul{list-style:none;max-width:34em;border-left:2px solid var(--rule);padding-left:18px}
.bio li{font-size:17px;line-height:1.6;color:var(--soft)}
.bio li + li{margin-top:10px}
.bio .lede{font-weight:500}
.bio a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}
.bio a:hover{border-color:var(--accent)}
.bio a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* writing */
.band{border-top:1px solid var(--rule);padding:22px 0 96px}
/* An entry in a list of writing is not an object that needs lifting off
   the page. A rule between entries says the same thing, and it leaves
   the card fill for surfaces that are genuinely inset: the palette, a
   popover, a worksheet, a block of code. */
.piece{
  display:block;text-decoration:none;color:inherit;
  border-top:1px solid var(--rule);
  padding:22px 0 4px;margin-top:20px;
}
.piece:first-of-type{border-top:0}
.piece:hover h2{color:var(--accent)}
.piece:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.piece h2{
  font-weight:600;font-size:24px;line-height:1.22;letter-spacing:-.008em;
  margin:8px 0 10px;transition:color .16s ease;
}
.piece p{font-size:17px;color:var(--soft);line-height:1.55}
.piece .go{
  font-size:15px;font-weight:600;
  color:var(--accent);margin-top:14px;display:inline-block;
}
.piece:hover .go{text-decoration:underline;text-underline-offset:3px}
.piece .meta{color:var(--rule);margin:0 7px}

/* footer */
footer{border-top:1px solid var(--rule);padding:26px 0 60px;display:flex;gap:22px;flex-wrap:wrap;align-items:center}
footer a{
  font-size:16px;font-weight:500;
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:2px;
}
footer a:hover{border-color:var(--accent);color:var(--accent)}
footer a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
footer .hintkey{
  font-size:14.5px;font-weight:400;font-style:italic;
  color:var(--soft);margin-left:auto;display:none;
}
html.js footer .hintkey{display:block}

/* ------------------------------------------------------------------
   reading instruments: progress rule, section rail, heading anchors
   ------------------------------------------------------------------ */

.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
  background:transparent;pointer-events:none;
}
.progress i{display:block;height:100%;width:0;background:var(--accent)}

.rail{
  position:fixed;top:50%;transform:translateY(-50%);
  right:calc(50% + 320px + 46px);
  width:186px;text-align:right;z-index:20;
  display:none;
}
.rail .rail-label{
  font-size:14px;font-weight:400;font-style:italic;color:var(--soft);
  opacity:.75;margin-bottom:14px;display:block;
}
.rail a{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  font-size:14px;font-weight:400;
  line-height:1.34;color:var(--soft);text-decoration:none;
  padding:6px 0;transition:color .2s ease;
}
.rail a span{max-width:150px}
.rail a i{
  width:5px;height:5px;border-radius:50%;flex:none;
  border:1px solid var(--rule);background:transparent;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.rail a:hover{color:var(--ink)}
.rail a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rail a.on{color:var(--accent);font-weight:600}
.rail a.on i{background:var(--accent);border-color:var(--accent);transform:scale(1.5)}

.anchor{
  color:var(--rule);text-decoration:none;font-weight:400;
  margin-left:10px;opacity:0;transition:opacity .16s ease,color .16s ease;
  font-size:.72em;vertical-align:.06em;border:0;
}
.prose h2:hover .anchor,.prose h3:hover .anchor{opacity:1}
.anchor:hover{color:var(--accent)}
.anchor:focus-visible{opacity:1;outline:2px solid var(--accent);outline-offset:2px}

/* ------------------------------------------------------------------
   article: same tokens, same one typeface, nothing new
   ------------------------------------------------------------------ */

.article{padding:70px 0 0}
.article .kicker{display:block;margin-bottom:14px}
.article .kicker .dot{color:var(--rule);margin:0 8px}
.article h1{
  font-weight:600;
  font-size:clamp(29px,6.4vw,41px);
  line-height:1.1;
  letter-spacing:-.014em;
  text-wrap:balance;
}
.article .dek{
  font-size:19px;line-height:1.62;color:var(--soft);
  max-width:34em;margin-top:20px;
}

.prose{padding:44px 0 0}
/* The figures in a sentence sit inside it: old-style, proportional.
   Anything that lines figures up in columns asks for tabular-nums
   itself, which puts them back on the line. Safari hangs an opening
   quote into the margin so the left edge stays flush; elsewhere that
   declaration does nothing. */
.prose{font-variant-numeric:oldstyle-nums proportional-nums;hanging-punctuation:first}
.prose .widget{font-variant-numeric:normal}
/* Runs of capitals, found by the build, set as small caps in the one
   family the page has. A hair of tracking keeps them from clotting. */
.prose abbr{font-variant-caps:all-small-caps;letter-spacing:.04em;text-decoration:none}
.prose h2 abbr,.prose h3 abbr{letter-spacing:.02em}
/* The italic has no small caps of its own, and a faked set is worse
   than capitals. */
.prose em abbr,.prose i abbr,.prose .pull abbr{font-variant-caps:normal;letter-spacing:0}
/* The end mark. See endMark in the build. */
.prose .end{
  display:inline-block;width:.42em;height:.42em;background:var(--accent);
  margin-left:.3em;vertical-align:baseline;position:relative;top:-.02em;
}
.prose > * + *{margin-top:22px}
.prose p{max-width:34em}
.prose a{
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid var(--rule);
}
.prose a:hover{border-color:var(--accent)}
.prose a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.prose a.anchor{border-bottom:0}
.prose strong{font-weight:600;color:var(--ink)}
.prose em{font-style:italic}

.prose h2{
  font-weight:600;font-size:25px;line-height:1.22;letter-spacing:-.008em;
  margin-top:52px;scroll-margin-top:90px;text-wrap:balance;
}
.prose h3{
  font-weight:600;font-size:19.5px;line-height:1.3;letter-spacing:-.004em;
  margin-top:38px;scroll-margin-top:90px;
}
.prose h2 + *, .prose h3 + *{margin-top:14px}

.prose ul,.prose ol{padding-left:1.3em;max-width:34em}
.prose li + li{margin-top:9px}
.prose li::marker{color:var(--soft)}

.prose blockquote{
  border-left:2px solid var(--accent);
  padding:2px 0 2px 22px;
  color:var(--accent);
  max-width:33em;
}
.prose blockquote p{font-size:20px;line-height:1.5}

.prose hr{
  border:0;border-top:1px solid var(--rule);
  margin-top:46px;
}
.prose hr + *{margin-top:46px}

.prose code{
  font-family:var(--mono);
  font-size:.86em;background:var(--card);
  padding:2px 5px;
}
.prose pre{
  background:var(--card);
  padding:18px 20px;overflow-x:auto;
}
.prose pre code{background:none;padding:0;font-size:14px;line-height:1.55}

.prose img{max-width:100%;height:auto}

.prose table{
  border-collapse:collapse;width:100%;display:block;overflow-x:auto;
  font-size:17px;
}
.prose th,.prose td{
  text-align:left;padding:10px 14px 10px 0;
  border-bottom:1px solid var(--rule);vertical-align:top;
}
.prose th{
  font-weight:600;font-size:16px;color:var(--ink);
}

/* ------------------------------------------------------------------
   living document: sidenotes, disclosures, footnotes, passage links
   ------------------------------------------------------------------ */

/* One element, two modes. In the margin where there is a margin;
   an indented aside where there is not. */
.sidenote{
  border-left:2px solid var(--rule);padding:2px 0 2px 18px;
  font-size:16px;line-height:1.55;color:var(--soft);max-width:32em;
}
.sidenote b{
  display:block;font-size:15px;font-weight:600;
  color:var(--ink);margin-bottom:4px;
}
/* A pull: a line from the body, said again in the margin where there
   is a margin, and not at all where there is not, since the reader has
   just read it. Italic, accent, a touch under text size. */
.prose > .pull{display:none}

details.example{
  background:var(--card);padding:0;max-width:34em;
  border-left:2px solid var(--accent);
}
details.example > summary{
  list-style:none;cursor:pointer;padding:16px 20px;
  font-size:17px;font-weight:600;
  color:var(--accent);display:flex;align-items:center;gap:10px;
}
details.example > summary::-webkit-details-marker{display:none}
details.example > summary::before{
  content:"";width:0;height:0;flex:none;
  border-left:5px solid currentColor;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform .2s ease;
}
details.example[open] > summary::before{transform:rotate(90deg)}
details.example > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
details.example .inner{padding:0 20px 20px}
details.example .inner > * + *{margin-top:16px}
details.example .inner p,details.example .inner ul,details.example .inner ol{
  max-width:none;font-size:17px;
}

.fnref{
  font-size:.66em;font-weight:600;
  color:var(--accent);vertical-align:super;text-decoration:none;
  padding:0 1px;position:relative;cursor:help;
}
.fnref:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fnpop{
  position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(4px);
  width:280px;max-width:calc(100vw - 32px);background:var(--card);color:var(--ink);
  border:1px solid var(--rule);
  padding:13px 15px;font-family:var(--serif);
  font-size:15px;line-height:1.5;font-weight:400;
  box-shadow:0 8px 24px var(--shadow);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:30;vertical-align:baseline;
}
.fnref:hover .fnpop,.fnref:focus .fnpop,.fnref:focus-visible .fnpop{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}

/* The bubble is 280px centred on the marker, so it needs 140px of clearance
   on the side the marker sits. With a 640px measure that is only guaranteed
   above ~872px of viewport; below it a marker near the end of a line pushes
   the bubble off-screen, and overflow-x:clip cuts it off rather than letting
   the page scroll to it. Under that width it becomes a strip pinned to the
   bottom of the viewport: always fits, still pure CSS, still readable with
   the script blocked. */
@media(max-width:899px){
  .fnpop{
    position:fixed;left:16px;right:16px;bottom:16px;
    width:auto;max-width:none;
    transform:translateY(6px);
  }
  .fnref:hover .fnpop,.fnref:focus .fnpop,.fnref:focus-visible .fnpop{
    transform:translateY(0);
  }
}

.passagebtn{
  position:absolute;z-index:55;
  font-family:var(--serif);font-size:14px;font-weight:600;
  background:var(--ink);color:var(--paper);
  border:0;padding:8px 13px;cursor:pointer;
  box-shadow:0 6px 18px var(--shadow);
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .15s ease,transform .15s ease;
  white-space:nowrap;
}
.passagebtn.show{opacity:1;transform:translateY(0);pointer-events:auto}
.passagebtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ------------------------------------------------------------------
   in-article widgets: worksheet, checklist
   ------------------------------------------------------------------ */

.widget{
  background:var(--card);padding:26px 24px 24px;
  max-width:34em;
}
.widget .wlabel{
  font-size:14.5px;font-weight:400;font-style:italic;color:var(--soft);
  display:block;margin-bottom:6px;
}
.widget .wtitle{
  font-size:20px;font-weight:600;
  letter-spacing:-.006em;line-height:1.25;margin-bottom:5px;
}
.widget .whelp{font-size:16px;color:var(--soft);line-height:1.5;margin-bottom:20px;max-width:none}

.field{display:block;margin-top:16px}
.field .flabel{
  font-size:14.5px;font-weight:400;font-style:italic;color:var(--soft);
  display:block;margin-bottom:6px;
}
.field input{
  width:100%;font-family:var(--serif);font-size:17px;
  color:var(--ink);background:var(--paper);
  border:0;border-bottom:1px solid var(--rule);
  padding:8px 2px;border-radius:0;
  transition:border-color .18s ease;
}
.field input::placeholder{color:var(--rule)}
.field input:focus{outline:0;border-bottom-color:var(--accent)}

.finding{margin-top:24px;border-top:1px solid var(--rule);padding-top:18px}
.finding .flabel{
  font-size:14.5px;font-weight:400;font-style:italic;color:var(--soft);
  display:block;margin-bottom:9px;
}
.finding .out{font-size:18px;line-height:1.55;color:var(--ink);max-width:none}
.finding .out .blank{
  color:var(--rule);border-bottom:1px solid var(--rule);
  padding:0 22px;display:inline-block;
}
.finding .out em{color:var(--accent);font-style:normal;font-weight:500}
.wactions{display:flex;gap:14px;align-items:center;margin-top:18px;flex-wrap:wrap}

.btn{
  font-family:var(--serif);font-size:15px;font-weight:600;
  background:var(--accent);color:var(--card);
  border:0;padding:10px 16px;cursor:pointer;
  transition:opacity .16s ease;
}
.btn:hover{opacity:.86}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn.ghost{background:none;color:var(--soft);padding:10px 0}
.btn.ghost:hover{color:var(--accent);opacity:1}

.check{
  position:relative;
  display:flex;gap:13px;align-items:flex-start;cursor:pointer;
  padding:13px 0;border-bottom:1px solid var(--rule);
}
.check:last-of-type{border-bottom:0}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{
  width:19px;height:19px;flex:none;margin-top:3px;
  border:1.5px solid var(--rule);background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  transition:background .16s ease,border-color .16s ease;
}
.check .box::after{
  content:"";width:9px;height:5px;margin-top:-2px;
  border-left:2px solid var(--card);border-bottom:2px solid var(--card);
  transform:rotate(-45deg) scale(0);transition:transform .16s ease;
}
.check input:checked + .box{background:var(--accent);border-color:var(--accent)}
.check input:checked + .box::after{transform:rotate(-45deg) scale(1)}
.check input:focus-visible + .box{outline:2px solid var(--accent);outline-offset:2px}
.check .ctext{font-size:17px;line-height:1.45}
.check .ctext b{display:block;font-weight:500;color:var(--ink)}
.check .ctext span{color:var(--soft);font-size:15.5px;display:block;margin-top:3px}

.verdict{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);
  font-size:16px;font-weight:600;
  display:flex;align-items:center;gap:10px;color:var(--soft);
}
.verdict .pip{
  width:8px;height:8px;border-radius:50%;background:var(--rule);
  flex:none;transition:background .2s ease;
}
.verdict.ok{color:var(--accent)}
.verdict.ok .pip{background:var(--accent)}

/* ------------------------------------------------------------------
   figures: flow, compare, bars

   An argument drawn instead of described. Same six tokens, same one
   typeface, no chart library and no second palette. Nothing here uses
   a style attribute: the CSP carries no 'unsafe-inline', so a
   proportion is an SVG rect width, which is an attribute, not a style.
   ------------------------------------------------------------------ */

.fig{max-width:34em}
.fig .figlabel{
  font-size:14.5px;font-weight:400;font-style:italic;color:var(--soft);
  display:block;margin-bottom:18px;
}
.fig .fignote{
  font-size:15.5px;line-height:1.5;color:var(--soft);
  margin-top:18px;max-width:none;
}

/* flow: numbered steps down a rail */
.fig .steps{list-style:none;padding:0;margin:0;max-width:none}
.fig .step{
  position:relative;list-style:none;margin:0;padding:0 0 26px 42px;
}
.fig .step:last-child{padding-bottom:0}
.fig .step::before{
  content:"";position:absolute;left:13px;top:31px;bottom:0;
  width:1px;background:var(--rule);
}
.fig .step:last-child::before{display:none}
.fig .step::marker{content:""}
.fig .sn{
  position:absolute;left:0;top:0;width:27px;height:27px;
  border-radius:50%;border:1px solid var(--rule);background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;
  color:var(--soft);
}
.fig .stitle{
  display:block;padding-top:3px;
  font-size:18px;font-weight:600;
  line-height:1.3;letter-spacing:-.006em;
}
.fig .stag{
  display:inline-block;margin-top:9px;padding:2px 8px;
  border:1px solid var(--rule);
  font-size:14px;font-weight:400;font-style:italic;color:var(--soft);
}
/* `*yours*` in a tag is the one to notice. */
.fig .stag em{font-style:normal;color:var(--accent)}
.fig .stag:has(em){border-color:var(--accent)}
.fig .stext{
  display:block;margin-top:9px;
  font-size:16px;line-height:1.5;color:var(--soft);
}
.fig .slink{
  display:block;margin-top:16px;
  font-size:14.5px;font-weight:400;font-style:italic;color:var(--soft);
}

/* compare: two columns and what falls out of holding them together */
.compare .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.compare .col{background:var(--card);padding:18px 18px 20px}
details.example .compare .col{background:var(--paper)}
.compare .chead{
  display:block;margin-bottom:13px;
  font-size:16px;font-weight:600;
  line-height:1.3;color:var(--accent);
}
.compare .col ul{list-style:none;padding:0;margin:0;max-width:none}
.compare .col li{
  position:relative;margin:0;padding-left:15px;
  font-size:15.5px;line-height:1.45;color:var(--soft);
}
.compare .col li + li{margin-top:10px}
.compare .col li::marker{content:""}
.compare .col li::before{
  content:"";position:absolute;left:0;top:.63em;width:6px;height:1px;
  background:var(--rule);
}
.compare .join{display:block;width:100%;height:22px}
.compare .join path{fill:none;vector-effect:non-scaling-stroke}
.compare .join .runs{stroke:var(--rule);stroke-width:1}
.compare .join .drop{stroke:var(--accent);stroke-width:1.5}
.compare .cverdict{
  max-width:30em;margin:2px auto 0;text-align:center;
  font-size:18px;font-weight:600;
  line-height:1.4;letter-spacing:-.006em;color:var(--accent);
}

/* bars: a proportion of a known total, one per row */
.bars .bar{
  display:grid;grid-template-columns:1fr auto;
  align-items:baseline;column-gap:18px;row-gap:8px;
}
.bars .bar + .bar{margin-top:18px}
.bars .blabel{font-size:16px;line-height:1.4}
.bars .bvalue{
  font-size:16px;font-weight:600;
  color:var(--soft);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.bars .bvalue b{font-weight:600;color:var(--accent)}
.bars .meter{grid-column:1 / -1;display:block}
.bars .meter .track{fill:color-mix(in srgb,var(--accent) 16%,transparent)}
.bars .meter .fill{fill:var(--accent)}

/* ------------------------------------------------------------------
   instruments: model, timeline, route, sort, reveal

   Figures the reader operates. Same six tokens, same one typeface.
   Everything that moves is a transition on a class or an attribute
   the script sets; nothing here is load-bearing for the reading, and
   every one of these is a complete picture with the script blocked.
   ------------------------------------------------------------------ */

/* shared: a slider with its value beside the label */
.dial{display:block;margin-top:16px}
.dial .dlabel{
  font-size:14.5px;font-weight:400;font-style:italic;color:var(--soft);
}
.dial .dhead{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.dial .dlabel{line-height:1.35}
.dial .dvalue{
  flex:none;font-size:15px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:color .16s ease;
}
.dial:has(input:active) .dvalue,.dial:has(input:focus-visible) .dvalue{color:var(--accent)}
.dial input[type="range"]{
  -webkit-appearance:none;appearance:none;
  display:block;width:100%;height:26px;margin:4px 0 0;
  background:linear-gradient(90deg,var(--rule) 0,var(--rule) 100%) no-repeat 0 50% / 100% 2px;
  cursor:pointer;border:0;border-radius:0;
}
.dial input[type="range"]::-webkit-slider-runnable-track{height:2px;background:transparent}
.dial input[type="range"]::-moz-range-track{height:2px;background:transparent}
.dial input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;margin-top:-9px;
  background:var(--accent);border:3px solid var(--card);
  box-shadow:0 1px 6px var(--shadow);
  transition:transform .16s ease;
}
.dial input[type="range"]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;
  background:var(--accent);border:3px solid var(--card);
  box-shadow:0 1px 6px var(--shadow);
}
.dial input[type="range"]:active::-webkit-slider-thumb,
.dial input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.18)}
.dial input[type="range"]:focus{outline:0}
.dial input[type="range"]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* shared: the line of prose under any instrument */
.widget .fignote{
  font-size:15.5px;line-height:1.5;color:var(--soft);
  margin-top:20px;max-width:none;
}

/* shared: the large figures a model or a timeline produces */
.readouts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:18px 24px;margin-top:26px;padding-top:20px;border-top:1px solid var(--rule);
}
.readout .rvalue{
  display:block;font-size:34px;font-weight:600;line-height:1;
  letter-spacing:-.02em;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.readout .rlabel{
  display:block;margin-top:7px;font-size:14.5px;line-height:1.4;
  font-style:italic;color:var(--soft);
}
.readout.soft .rvalue{color:var(--soft)}
.readout.off .rlabel,.model .mbars .bar.off .blabel{opacity:.45}
.readout .rvalue,.model .mbars .blabel{transition:opacity .2s ease}

/* model */
.model .dials{
  display:grid;grid-template-columns:1fr 1fr;gap:4px 28px;
  margin-top:2px;
}
.model .chartwrap{margin-top:22px}
/* The chart is a slider along x, so a drag across it must never start a
   text selection: no transitions on the geometry either, or the marker
   eases toward the curve while the hairline has already jumped. */
.model .chart{
  display:block;width:100%;height:auto;overflow:visible;
  -webkit-user-select:none;user-select:none;touch-action:none;
}
html.js .model .chart{cursor:ew-resize}
.model .chart text{font-family:var(--serif);font-size:12px;fill:var(--soft);font-style:italic}
.model .chart .axis{stroke:var(--rule);stroke-width:1}
.model .chart .now{stroke:var(--ink);stroke-width:1;opacity:.45}
.model .chart .mark line{stroke:var(--soft);stroke-width:1;stroke-dasharray:1 4}
.model .chart .mark text{font-size:11.5px}
.model .chart .line{fill:none;stroke:var(--accent);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.model .chart .area{fill:var(--accent);opacity:.1}
.model .chart .pt{fill:var(--accent);stroke:var(--card);stroke-width:2.5}
.model .chart .ghost .line{stroke:var(--soft);stroke-width:1.5;stroke-dasharray:4 5}
.model .chart .ghost .pt{fill:var(--soft)}
.model .chart .ink .line{stroke:var(--ink);stroke-width:1.75}
.model .chart .ink .pt{fill:var(--ink)}
.model .legend{
  display:flex;gap:20px;flex-wrap:wrap;margin-top:10px;
  font-size:14px;font-style:italic;color:var(--soft);
}
.model .legend span{display:inline-flex;align-items:center;gap:8px}
.model .legend i{width:18px;height:0;border-top:2.25px solid var(--accent)}
.model .legend .ghost i{border-top:1.5px dashed var(--soft)}
.model .legend .ink i{border-top:1.75px solid var(--ink)}
.model .mbars{margin-top:24px}
.model .mbars .bar{
  display:grid;grid-template-columns:1fr auto;
  align-items:baseline;column-gap:18px;row-gap:8px;
}
.model .mbars .bar + .bar{margin-top:16px}
.model .mbars .blabel{font-size:16px;line-height:1.4}
.model .mbars .bvalue{
  font-size:16px;font-weight:600;color:var(--soft);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.model .mbars .bvalue b{font-weight:600;color:var(--accent)}
.model .mbars .meter{grid-column:1 / -1;display:block}
.model .mbars .track{fill:color-mix(in srgb,var(--accent) 16%,transparent)}
.model .mbars .fill{fill:var(--accent);transition:width .18s ease}
.model .mverdict{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:18px;font-weight:600;line-height:1.45;letter-spacing:-.006em;
  color:var(--ink);max-width:none;
}
.model .mverdict em{font-style:normal;color:var(--accent)}
.model .mverdict.no{color:var(--soft)}
.model .mverdict.no em{color:var(--ink)}

/* timeline */
.timeline .dial{margin-top:2px}
.timeline .trows{margin-top:26px}
.timeline .trow{
  display:grid;grid-template-columns:1fr auto;column-gap:14px;
  align-items:baseline;padding:14px 0 0;
}
.timeline .trow + .trow{margin-top:2px}
.timeline .tlabel{font-size:16px;line-height:1.35;transition:color .25s ease}
.timeline .tweight{
  font-size:15px;font-weight:600;color:var(--soft);white-space:nowrap;
  font-variant-numeric:tabular-nums;transition:color .25s ease;
}
.timeline .twhen{
  grid-column:1 / -1;font-size:14px;font-style:italic;color:var(--soft);
  margin-top:1px;
}
.timeline .ttrack{grid-column:1 / -1;display:block;width:100%;height:12px;margin-top:6px}
.timeline .ttrack .track{fill:var(--rule)}
.timeline .ttrack .fill{
  fill:var(--soft);opacity:.35;
  transition:opacity .3s ease,fill .3s ease;
}
.timeline .trow.on .fill{fill:var(--accent);opacity:1}
.timeline .trow.on .tlabel{color:var(--ink)}
.timeline .trow.on .tweight{color:var(--accent)}
.timeline .trow.never .tlabel,.timeline .trow.never .tweight{opacity:.6}
.timeline .trow.never .track{fill:none;stroke:var(--rule);stroke-width:2;stroke-dasharray:1 2;vector-effect:non-scaling-stroke}
.timeline .ttrack .mark{stroke:var(--soft);stroke-width:1;stroke-dasharray:1 2;vector-effect:non-scaling-stroke}
.timeline .ttrack .now{stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:x1 .12s linear,x2 .12s linear}
.timeline .tmark{
  margin-top:18px;font-size:14.5px;font-style:italic;color:var(--soft);
  display:flex;align-items:center;gap:9px;
}
.timeline .tmark i{width:0;height:14px;border-left:1px dashed var(--soft)}

/* route */
.route .options{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.route .opt{
  font-family:var(--serif);text-align:left;cursor:pointer;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--rule);padding:16px 18px 18px;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.route .opt b{display:block;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.006em}
.route .opt span{display:block;margin-top:6px;font-size:14.5px;line-height:1.45;color:var(--soft)}
.route .opt:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 6px 18px var(--shadow)}
.route .opt:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.route .opt.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.route .opt.seen:not(.on) b::after{
  content:" ·";color:var(--rule);
}
.route .rjoin{display:none;width:100%;height:26px}
.route .rjoin path{fill:none;stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .2s ease}
.route .rjoin path.on{stroke:var(--accent);stroke-width:1.5}
.route .rprompt{display:none;font-size:15px;font-style:italic;color:var(--soft);margin-top:14px}
.route .outcomes{margin-top:18px}
.route .outcome + .outcome{margin-top:18px;padding-top:18px;border-top:1px solid var(--rule)}
.route .outcome .ofor{display:block;font-size:15px;font-weight:600;color:var(--soft);margin-bottom:6px}
.route .outcome .otag{
  display:inline-block;padding:3px 9px;margin-bottom:10px;
  border:1px solid var(--accent);color:var(--accent);
  font-size:14px;font-style:italic;
}
.route .outcome p{font-size:16.5px;line-height:1.55;max-width:none}
.route .rverdict{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:18px;font-weight:600;line-height:1.45;letter-spacing:-.006em;color:var(--accent);
  max-width:none;
}
/* with the script: one outcome at a time, the verdict once both are seen */
html.js .route .rjoin,html.js .route .rprompt{display:block}
html.js .route .rjoin{margin-top:-1px}
html.js .route .outcomes{margin-top:0}
html.js .route .outcome{display:none;border-top:0;padding-top:0;margin-top:0}
html.js .route .outcome .ofor{display:none}
html.js .route .outcome.on{display:block;animation:rise .32s ease}
html.js .route .rverdict{display:none}
html.js .route.compared .rverdict{display:block;animation:rise .4s ease}
html.js .route.chosen .rprompt{display:none}

/* sort */
.sort .bins{
  display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-top:8px;
}
.sort .bin .binname{display:block;font-size:14.5px;line-height:1.35;color:var(--ink)}
.sort .bin .binval{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-top:4px;font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--accent);
}
.sort .bin .keyval{font-weight:400;color:var(--soft);font-size:14px}
.sort .meter{display:block;margin-top:6px}
.sort .meter .track{fill:color-mix(in srgb,var(--accent) 14%,transparent)}
.sort .meter .fill.yours{fill:var(--accent);transition:width .35s cubic-bezier(.4,0,.2,1)}
.sort .meter .fill.key{fill:var(--soft);opacity:.55;transition:opacity .4s ease}
.sort .skey{
  display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;
  font-size:14px;font-style:italic;color:var(--soft);
}
.sort .skey i{display:inline-block;width:14px;height:6px;border-radius:3px;margin-right:7px;vertical-align:middle;background:var(--accent)}
.sort .skey i.key{background:var(--soft);opacity:.55}
.sort .deck{margin-top:22px;border-top:1px solid var(--rule)}
.sort .card{padding:20px 0 18px;border-bottom:1px solid var(--rule)}
.sort .cname{font-size:18px;font-weight:600;letter-spacing:-.006em}
.sort .camt{
  float:right;font-size:17px;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.sort .cstory{margin-top:8px;font-size:16.5px;line-height:1.55;max-width:none}
.sort .cbins{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sort .cbins button{
  font-family:var(--serif);font-size:14.5px;font-weight:500;cursor:pointer;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--rule);padding:7px 12px;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.sort .cbins button:hover{border-color:var(--accent);color:var(--accent)}
.sort .cbins button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sort .cwhy{margin-top:14px;font-size:15px;color:var(--soft)}
.sort .cwhy summary{cursor:pointer;font-style:italic}
.sort .cwhy p{margin-top:6px;max-width:none;line-height:1.5}
.sort .cwhy b{color:var(--ink);font-weight:600}
.sort .sprogress{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-top:14px;font-size:15px;font-style:italic;color:var(--soft);
}
.sort .sresult{display:none}
.sort .sscore{font-size:18px;font-weight:600;line-height:1.45;letter-spacing:-.006em;max-width:none}
.sort .sdiff{margin-top:14px}
.sort .sdiff p{font-size:15.5px;line-height:1.5;color:var(--soft);max-width:none;padding:10px 0;border-top:1px solid var(--rule)}
.sort .sdiff p b{color:var(--ink);font-weight:600}
.sort .sdiff p em{font-style:normal;color:var(--accent)}
.sort .sdone{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);
  font-size:17px;font-weight:600;color:var(--accent);max-width:none;
}
/* with the script: one card at a time, the key hidden until the deck is done */
html.js .sort .card{display:none}
html.js .sort .card.cur{display:block;animation:rise .3s ease}
html.js .sort .card.cur.leaving{animation:leave .22s ease forwards}
@keyframes leave{to{opacity:0;transform:translateX(18px)}}
html.js .sort .cwhy{display:none}
html.js .sort .meter .fill.key{opacity:0}
html.js .sort .bin .keyval{visibility:hidden}
html.js .sort.done .meter .fill.key{opacity:.55}
html.js .sort.done .bin .keyval{visibility:visible}
html.js .sort.done .deck{display:none}
html.js .sort.done .sresult{display:block;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);animation:rise .4s ease}
html.js .sort .sprogress [data-reset]{visibility:hidden}
html.js .sort.started .sprogress [data-reset]{visibility:visible}

/* reveal */
.reveal .dots{
  display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin-top:8px;
}
.reveal .dot{
  position:relative;aspect-ratio:1;width:100%;
  border-radius:50%;border:1.5px solid var(--rule);
  background:var(--paper);cursor:pointer;padding:0;
  transition:transform .16s ease,background .2s ease,border-color .2s ease;
}
.reveal .dot:hover{transform:scale(1.12);border-color:var(--accent)}
.reveal .dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.reveal .dot .dtext{position:absolute;opacity:0;width:0;height:0;overflow:hidden}
.reveal .dot.open{background:var(--rule);border-color:var(--rule)}
.reveal .dot.open.live{background:var(--accent);border-color:var(--accent);animation:pop .4s cubic-bezier(.2,.8,.3,1.4)}
.reveal .dot.cur{box-shadow:0 0 0 3px var(--card),0 0 0 4.5px var(--ink)}
@keyframes pop{from{transform:scale(.6)}to{transform:scale(1)}}
.reveal .rtally{
  margin-top:16px;font-size:15px;font-style:italic;color:var(--soft);max-width:none;
  font-variant-numeric:tabular-nums;
}
.reveal .dpanel{
  margin-top:14px;padding:16px 18px;background:var(--paper);
  border-left:2px solid var(--rule);min-height:64px;
  transition:border-color .2s ease;
}
.reveal .dpanel.live{border-left-color:var(--accent)}
.reveal .dpanel p{font-size:16.5px;line-height:1.5;max-width:none}
.reveal .dpanel .dprompt{font-size:15px;font-style:italic;color:var(--soft)}
.reveal .dpanel ul{margin-top:8px;padding-left:1.1em;max-width:none}
.reveal .dpanel li{font-size:15.5px;line-height:1.5}
.reveal .dpanel .dstate{
  display:block;margin-bottom:6px;font-size:14px;font-style:italic;color:var(--soft);
}
.reveal .dpanel.live .dstate{color:var(--accent)}

/* the piece list on the home page says when there is something to try */
.piece .tries{color:var(--accent);font-style:italic}

/* ------------------------------------------------------------------
   command palette and the shortcut sheet
   ------------------------------------------------------------------ */

.overlay{
  position:fixed;inset:0;z-index:80;
  background:color-mix(in srgb,var(--ink) 34%,transparent);
  display:flex;align-items:flex-start;justify-content:center;
  padding:14vh 20px 20px;
  opacity:0;visibility:hidden;transition:opacity .16s ease,visibility .16s;
}
.overlay.open{opacity:1;visibility:visible}
.sheet{
  width:100%;max-width:540px;background:var(--card);
  box-shadow:0 20px 60px var(--shadow);overflow:hidden;
  border:1px solid var(--rule);
  transform:translateY(-8px);transition:transform .18s ease;
}

/* The card surfaces carry a little more grain than the paper around
   them: the raw tile, blended into their own background under the page
   layer. Paper-coloured columns inside a worked example stay flat, so
   they read as the page showing through. */
.prose pre,details.example,.widget,.compare .col,.sheet{
  background-image:var(--grain-soft);background-size:240px 240px;
  background-blend-mode:overlay;
}
details.example .compare .col{background-image:none}
.overlay.open .sheet{transform:translateY(0)}
.sheet input.q{
  width:100%;border:0;border-bottom:1px solid var(--rule);
  background:none;color:var(--ink);
  font-family:var(--serif);font-size:19px;
  padding:19px 22px;
}
.sheet input.q:focus{outline:0}
.sheet input.q::placeholder{color:var(--soft)}
.results{max-height:min(52vh,420px);overflow-y:auto;padding:8px 0 10px}
.results .group{
  font-size:14px;font-weight:400;font-style:italic;color:var(--soft);
  padding:14px 22px 6px;
}
.results .row{
  display:flex;align-items:center;gap:12px;
  padding:9px 22px;cursor:pointer;color:var(--ink);
  font-size:17px;line-height:1.35;
}
.results .row .kind{
  font-size:13.5px;font-weight:400;font-style:italic;color:var(--soft);
  margin-left:auto;flex:none;
}
.results .row.sel{background:var(--paper)}
.results .row.sel .kind{color:var(--accent)}
.results .empty{padding:26px 22px;color:var(--soft);font-size:16px}
.sheet .foot{
  border-top:1px solid var(--rule);padding:11px 22px;
  display:flex;gap:18px;flex-wrap:wrap;
  font-size:13.5px;font-weight:400;
  color:var(--soft);
}
kbd{
  font-family:var(--mono);font-size:11px;font-weight:500;
  border:1px solid var(--rule);padding:2px 5px;
  color:var(--ink);background:var(--paper);margin-right:5px;
}
.keys{max-width:420px}
.keys .khead{
  font-size:17px;font-weight:600;
  padding:19px 22px 4px;
}
.keys .ksub{padding:0 22px 16px;font-size:15px;color:var(--soft)}
.keys dl{padding:0 22px 20px;display:grid;grid-template-columns:auto 1fr;gap:11px 16px;align-items:baseline}
.keys dt{text-align:right}
.keys dd{font-size:16px;color:var(--soft)}

.toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,10px);
  background:var(--ink);color:var(--paper);
  font-size:15px;font-weight:600;
  padding:11px 18px;z-index:90;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  box-shadow:0 8px 24px var(--shadow);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* end of article */
.endnote{
  border-top:1px solid var(--rule);
  margin-top:76px;padding:26px 0 0;
}
.author{margin-bottom:30px}
.author .eyebrow{display:block;margin-bottom:10px}
.author p{font-size:17px;line-height:1.6;max-width:34em}
.author + .nextprev{border-top:1px solid var(--rule);padding-top:26px}
.nextprev{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.nextprev .np{
  flex:1 1 220px;border-top:1px solid var(--rule);padding:16px 0 0;
  text-decoration:none;color:inherit;
}
.nextprev .np:hover .t{color:var(--accent)}
.nextprev .np:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nextprev .np .dir{
  font-size:14px;font-weight:400;font-style:italic;color:var(--soft);display:block;
}
.nextprev .np .t{
  font-size:18px;font-weight:600;
  line-height:1.25;margin-top:6px;display:block;transition:color .16s ease;
}
.endnote .back{
  font-size:16px;font-weight:600;
  color:var(--accent);text-decoration:none;
}
.endnote .back:hover{text-decoration:underline;text-underline-offset:3px}
.endnote .back:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.endnote + footer{margin-top:60px}

/* ------------------------------------------------------------------
   where there is room in the margins, use them
   ------------------------------------------------------------------ */

@media(min-width:1200px){
  .rail{display:block}
  .prose > .sidenote{
    float:right;clear:right;width:196px;
    margin-right:-238px;margin-top:calc(22px + .35em);margin-bottom:14px;
    border-left:0;border-top:1px solid var(--rule);
    padding:9px 0 0;font-size:14.5px;line-height:1.5;
  }
  .sidenote b{margin-bottom:6px}
  .prose > .pull{
    display:block;float:right;clear:right;width:196px;
    margin-right:-238px;margin-top:calc(22px + .15em);margin-bottom:14px;
    font-size:17px;line-height:1.42;font-style:italic;color:var(--accent);
    text-wrap:pretty;
  }
}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html{scroll-behavior:auto}
  .model .mbars .fill,.timeline .ttrack .fill,.timeline .ttrack .now,
  .sort .meter .fill.yours,.reveal .dot,.route .opt{transition:none}
  html.js .route .outcome.on,html.js .route.compared .rverdict,
  html.js .sort .card.cur,html.js .sort.done .sresult,.reveal .dot.open.live{animation:none}
  html.js .sort .card.cur.leaving{animation:none;opacity:0}
  .struck .bar{animation:none;transform:scaleX(1)}
  .answer{animation:none;opacity:1}
  .hero-hint{animation:none;opacity:1}
  .hero.cycled .thesis,.hero.sizing .thesis{transition:none}
  .piece h2,.nextprev .np .t{transition:none}
}
@media(max-width:520px){
  body{font-size:17px}
  .hero{padding:56px 0 68px}
  html.js .hero.cycles{padding-bottom:24px}
  .bio{padding-bottom:60px}
  .article{padding:52px 0 0}
  .prose blockquote p{font-size:19px}
  .keys dl{grid-template-columns:1fr;gap:4px 0}
  .keys dt{text-align:left;margin-top:9px}
  footer .hintkey{display:none}
  html.js footer .hintkey{display:none}
  .compare .cols{grid-template-columns:1fr}
  .compare .join{display:none}
  .model .dials{grid-template-columns:1fr}
  .route .options{grid-template-columns:1fr}
  .route .rjoin{display:none}
  html.js .route .rjoin{display:none}
  .sort .bins{grid-template-columns:1fr;gap:12px}
  .reveal .dots{grid-template-columns:repeat(8,1fr)}
  .readout .rvalue{font-size:30px}
  .compare .cverdict{
    margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);
    text-align:left;max-width:none;
  }
}

/* Print: the reading, on paper, in paper. The chrome goes, the instruments
   stay at their resting state, and links show where they went. */
@media print{
  :root,:root[data-mode="night"]{
    --paper:#fff;--card:#f2f2f2;--ink:#000;--soft:#444;--rule:#bbb;--accent:#1B3A6B;--shadow:none;
  }
  body::before,.pull{display:none}
  .prose pre,details.example,.widget,.compare .col,.sheet{background-image:none}
  .skip,.rail,.progress,.nightbtn,.hero-hint,footer .hintkey,.nextprev,.endnote .back,.toast{display:none!important}
  .wrap{max-width:none;padding:0}
  .prose,.article,.bio{max-width:38em}
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:var(--soft)}
  .prose h2,.prose h3{break-after:avoid}
  .widget,figure,blockquote,details{break-inside:avoid}
}