/* ==========================================================================
   BotWitness, zine edition. Built around Plate IV: third-generation photocopy,
   blown blacks, one fluorescent orange.

   Rules this design follows, so later edits do not quietly undo it:
     - Two inks. Black and fluoro orange. Everything else is paper.
     - Nothing is centred, nothing is rounded, nothing glows.
     - Type is system-only. A webfont CDN would be refused by the site's
       script/style CSP and would fall back silently, which is worse than
       choosing the fallback on purpose.
     - Every angle is a deliberate few tenths of a degree. Photocopied paper
       never sits square on the glass.
   ========================================================================== */

:root{
  /* Paper and ink. The ground is warm and dirty because clean white reads as
     a website, and toner black is denser than #000 looks on screen. */
  --paper:#E9E6DE;
  --paper-2:#DFDBD1;
  --paper-3:#CFCABE;
  --ink:#0E0E0C;
  --ink-60:rgba(14,14,12,.6);
  --ink-30:rgba(14,14,12,.3);
  --ink-12:rgba(14,14,12,.12);
  --flare:#FF4A17;             /* the one accent. Never use a second. */
  --flare-ink:#0E0E0C;         /* text that sits ON the flare */

  --display:'Arial Narrow','Helvetica Neue Condensed','Liberation Sans Narrow',
    Impact,Haettenschweiler,sans-serif;
  --type:'Courier New',Courier,ui-monospace,'DejaVu Sans Mono',monospace;

  --gut:clamp(16px,3.2vw,44px);
  --max:1320px;
  --rule:2px solid var(--ink);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;max-width:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--type);
  font-size:15px;
  line-height:1.6;
}

/* Toner grain over the whole page. An SVG turbulence, multiplied down, so the
   flat colour never looks like flat colour. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.26;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

img{display:block;max-width:100%;height:auto}
a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--flare)}
a:hover{background:var(--flare)}
:focus-visible{outline:3px solid var(--flare);outline-offset:3px}

h1,h2,h3,.stamp,.eyeb,.tick,.num{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;font-stretch:condensed;margin:0;
}
h1{font-size:clamp(46px,11.5vw,168px);line-height:.82}
h2{font-size:clamp(34px,7vw,92px);line-height:.86}
h3{font-size:clamp(19px,2.4vw,30px);line-height:.98}
p{margin:0 0 1.1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ---- shared zine furniture ------------------------------------------- */
.eyeb{font-size:12px;letter-spacing:.22em;color:var(--ink);
  background:var(--flare);display:inline-block;padding:3px 9px;
  transform:rotate(-.7deg)}
.rule{border:0;border-top:var(--rule);margin:0}
.hard{box-shadow:10px 10px 0 var(--ink)}          /* photocopier lid shadow */
.tape{position:relative}
.tape::before{
  content:"";position:absolute;top:-13px;left:9%;width:96px;height:26px;
  background:rgba(14,14,12,.14);border-left:1px dashed var(--ink-30);
  border-right:1px dashed var(--ink-30);transform:rotate(-4deg);z-index:3}
.torn{ /* jagged photocopied edge along the bottom */
  -webkit-mask-image:linear-gradient(#000 calc(100% - 9px),transparent 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10'%3E%3Cpath d='M0 0h40v4L34 9 28 3l-6 6-6-6-6 6-6-6-4 4z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%,40px 10px;
  -webkit-mask-position:top left,bottom left;
  -webkit-mask-repeat:no-repeat,repeat-x;
  mask-image:linear-gradient(#000 calc(100% - 9px),transparent 0),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10'%3E%3Cpath d='M0 0h40v4L34 9 28 3l-6 6-6-6-6 6-6-6-4 4z' fill='%23000'/%3E%3C/svg%3E");
  mask-size:100% 100%,40px 10px;
  mask-position:top left,bottom left;
  mask-repeat:no-repeat,repeat-x;
}

/* ---- masthead --------------------------------------------------------- */
.mast{border-bottom:var(--rule);position:sticky;top:0;z-index:60;
  background:var(--paper);}
.mast-in{max-width:none;margin:0;padding:9px var(--gut);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px}
.brand{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:23px;letter-spacing:-.03em;border:0;display:flex;align-items:center;
  gap:12px;position:relative;
  margin-left:calc(20px - var(--gut))}
.brand:hover{background:none}
.brand-word{position:relative;z-index:2}

/* The badge is deliberately larger than the bar it lives in. It hangs out of
   the masthead, across the ticker and down onto the headline, which is why the
   masthead cannot clip its overflow and the badge needs its own stacking
   context above both. */
.brand .badge{position:relative;z-index:3;flex:none;
  /* top: shifts it down onto the headline WITHOUT changing the masthead's
     height. Doing that with margin instead grows the chrome, which shrinks the
     hero, which refits the headline smaller and moves the target. */
  top:9px;
  width:124px;height:124px;margin:0 0 -76px;
  display:grid;place-items:center;
  transform:rotate(-4.5deg);
  background:var(--paper);
  border:3px solid var(--ink);
  box-shadow:9px 9px 0 var(--ink);
  /* texture inside the box: a fine diagonal hatch plus toner speckle, so the
     ground behind the mite is never flat */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6L6 0' stroke='%230E0E0C' stroke-width='1' opacity='.28'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-blend-mode:multiply;
}
.brand .badge img{width:86%;height:auto;display:block}
.mast{overflow:visible}
.mast-in{position:relative;z-index:3}

/* Footer mark: the clean cut of the same drawing, orange lens intact. */
.foot-mark{width:74px;height:auto;margin:0 0 18px;opacity:.92}
.mast nav{display:flex;gap:18px;flex-wrap:wrap;justify-self:center}
.mast nav a{font-family:var(--display);text-transform:uppercase;font-size:14px;
  letter-spacing:.06em;border:0}
.mast nav a:hover{background:var(--flare)}

/* Account links, in the masthead grid's third track. Two weights, not two
   styles: the flare one is where you spend money, the other is where you
   already have. */
.mast-cta{display:flex;gap:10px;align-items:center;justify-self:end}
.mast-cta a{font-family:var(--display);text-transform:uppercase;font-size:13px;
  letter-spacing:.08em;padding:5px 11px;border:2px solid var(--ink);
  white-space:nowrap}
.mast-login{background:var(--paper)}
.mast-get{background:var(--flare)}
.mast-cta a:hover{background:var(--ink);color:var(--paper)}

/* ---- ticker ----------------------------------------------------------- */
.ticker{border-bottom:var(--rule);background:var(--ink);color:var(--paper);
  overflow:hidden;white-space:nowrap}
.ticker-in{display:inline-block;padding:7px 0;animation:slide 42s linear infinite}
.tick{font-size:14px;letter-spacing:.12em;padding:0 26px;display:inline-block}
.tick b{color:var(--flare);font-weight:700}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- hero ------------------------------------------------------------- */
/* Fills the viewport under the fixed chrome so the figures strip lands on the
   fold. --chrome is the measured masthead (56px) plus ticker (40px); if either
   changes height, change it here or the figures drop below the fold. */
.hero{--chrome:96px;
  min-height:calc(100vh - var(--chrome));
  min-height:calc(100svh - var(--chrome));
  display:flex;flex-direction:column;border-bottom:var(--rule)}
/* minmax(0,...) not plain fr: an fr track grows to its content's min-content
   width, so a bigger headline widened its own column, which let the fitter make
   it bigger again. Pinning the tracks makes the fit converge. */
.hero-grid{flex:1;min-height:0;display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr)}

/* No padding at all. The headline runs to the screen edge on the left and to
   the rule on the right, which is the point: it should read as ink laid onto
   the sheet rather than a column inside a container. */
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:0}
/* The size here is only a fallback for a page without script. zine.js fits the
   headline to the exact space left above the figures, which is the largest it
   can be without pushing them under the fold. */
.hero h1{margin:0;max-width:none;font-size:clamp(38px,8.4vw,116px);
  overflow-wrap:break-word}
.hero h1 .w{display:inline-block}

/* The plate runs full bleed to the panel edges and stops dead at the rule.
   No fade, no gradient scrim: the join between picture and type is meant to
   read as two sheets butted against each other. */
/* Padding is small because the panel has to cover the darkened middle of the
   plate, and that dark area is measured at 628px across inside a 483px column,
   i.e. wider than the column itself. Only the drawer bands above and below are
   meant to stay visible. */
.hero-side{position:relative;overflow:hidden;border-left:var(--rule);
  display:flex;align-items:center;justify-content:center;
  padding:0}
/* A wall of catalogue drawers. Chosen over the other candidates because its
   centre is effectively blank, so the panel sits in a void rather than on top
   of detail, and every edge still reads as a card index at a glance. */
.hero-side::before{content:"";position:absolute;inset:0;z-index:0;
  background:url(../img/cabinet.webp) center/cover no-repeat}

.hero-panel{position:relative;z-index:2;width:100%;max-width:none;
  min-height:85%;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--paper);border:var(--rule);box-shadow:13px 13px 0 var(--ink);
  padding:clamp(18px,2.2vw,30px);transform:rotate(-.7deg)}
/* Copy sits at the top of the sheet, the form is pushed down under it by
   margin-top:auto. The panel is sized to cover the plate's dark middle rather
   than to fit the form, so without this the fields floated in the centre with
   dead paper above and below. */
.hero-panel{justify-content:flex-start}
.panel-copy{flex:none}
.panel-form{flex:none;margin-top:auto;padding-top:clamp(14px,2.2vh,26px);
  border-top:2px dashed var(--ink-30)}
.panel-title{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;font-size:clamp(22px,2.4vw,34px);line-height:.94;
  margin:0 0 10px}
.hero-panel .sub-2{font-size:13px;line-height:1.55;margin:0;
  color:rgba(14,14,12,.72)}
.hero-panel .field{margin:0 0 12px}

/* The drawer cut out of the cabinet, pasted over the corner of the field it
   feeds. Anchored to the input rather than the field so the "Domain" label
   above it is never covered, and pulled left/up out of the panel so it reads
   as something laid on top rather than something inside. */
.hero-panel .field-domain{position:relative}
/* Anchored to the input's top-left corner and hung out to the left of the
   panel. The label is lifted above it in the stack, so even where the two
   overlap geometrically the word "Domain" still reads. */
.hero-panel .field-domain label{position:relative;z-index:6}

.hero-panel label{display:block;font-family:var(--display);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;margin:0 0 5px}
/* The fields are filled orange so they read as things you type into rather
   than as ruled lines, and set in white so they read as live inputs rather
   than as printed matter. White on this orange measures 3.4:1 -- above the 3:1
   floor for UI components, under the 4.5:1 one for body text, so the type is
   held at 16px and the placeholder near-solid rather than faded. */
.hero-panel input,.hero-panel select{
  width:100%;font-family:var(--type);font-size:16px;color:#fff;
  background:var(--flare);border:2px solid var(--ink);border-radius:0;
  padding:9px 10px;-webkit-appearance:none;appearance:none;
  caret-color:#fff}
.hero-panel input::placeholder{color:rgba(255,255,255,.86);opacity:1}
/* On focus the placeholder gets out of the way, so the blinking caret is the
   only mark in the field and there is no question that it is taking typing.
   Emptying it in CSS rather than in script keeps the hint on the element, so
   the field still announces itself to a screen reader. */
.hero-panel input:focus::placeholder{color:transparent}
/* Native select arrows disappear against a flat fill, so draw one. White, to
   sit with the text it belongs to. */
.hero-panel select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M0 0h14L7 9z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:32px}
/* The open list is drawn by the OS, not by us, and a white-on-white popup is a
   real risk once the select carries white type. Pin the options back to paper. */
.hero-panel select option{background:var(--paper);color:var(--ink)}
/* Chrome paints autofilled fields its own pale yellow with dark text, which
   would undo both the fill and the white type. It ignores background-color on
   an autofilled input, so the fill has to be forged with an inset shadow. */
.hero-panel input:-webkit-autofill,
.hero-panel input:-webkit-autofill:hover{
  -webkit-text-fill-color:#fff;caret-color:#fff;
  -webkit-box-shadow:0 0 0 60px var(--flare) inset;
  box-shadow:0 0 0 60px var(--flare) inset}
/* An autofilled field that then gets focused still has to go dark like any
   other, or the caret lands back on orange. */
.hero-panel input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;caret-color:#fff;
  -webkit-box-shadow:0 0 0 60px var(--ink) inset;
  box-shadow:0 0 0 60px var(--ink) inset}
/* Focus inverts the field to ink. A white caret on the orange fill is 3.4:1 and
   one pixel wide -- with the placeholder out of the way there is nothing else in
   the field, and it reads as empty rather than as ready. On ink the same caret
   is 19.3:1, and the field that is taking typing is the one that went dark. */
.hero-panel input:focus,.hero-panel select:focus{
  background-color:var(--ink);color:#fff;caret-color:#fff;
  outline:3px solid var(--flare);outline-offset:2px}
/* Where the browser has it, a block caret: a blinking white square in a Courier
   field reads as a terminal prompt and is far harder to miss than a hairline.
   Ignored everywhere else, which just leaves the white line on ink. */
.hero-panel input:focus{caret-shape:block}
.btn{font-family:var(--display);text-transform:uppercase;font-size:19px;
  letter-spacing:.04em;background:var(--ink);color:var(--paper);border:0;
  padding:12px 26px;cursor:pointer;box-shadow:6px 6px 0 var(--flare);
  transition:transform .06s steps(2)}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--flare)}
.btn:active{transform:translate(6px,6px);box-shadow:none}
.btn-wide{width:100%;margin-top:4px}
.msg{font-size:12px;margin:8px 0 0;min-height:1em}
.msg.err{color:var(--flare);font-weight:700}

/* ---- figures strip ---------------------------------------------------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--rule);
  flex:none}
.fig{padding:16px var(--gut) 20px;border-right:1px solid var(--ink-12)}
.fig:last-child{border-right:0}
.num{font-size:clamp(30px,4.6vw,58px);line-height:.9;font-variant-numeric:tabular-nums}
.fig .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-60);margin-top:6px}

/* ---- generic page block ----------------------------------------------- */
.page{border-bottom:var(--rule);padding:clamp(38px,6vw,86px) 0}
.page.dark{background:var(--ink);color:var(--paper)}
.page.dark a{color:var(--paper)}
.page.dark .lede{color:rgba(233,230,222,.75)}
.page.tint{background:var(--paper-2)}
/* Single column now. The two-track grid existed only to seat a section number
   beside the heading, and those numbers implied a sequence the sections do not
   actually have. */
.head{margin:0 0 clamp(20px,3vw,40px)}
.lede{font-size:17px;max-width:60ch;margin:14px 0 0;color:var(--ink-60)}

/* ---- the real record -------------------------------------------------- */
.rec{display:grid;grid-template-columns:1fr 1fr;gap:0;border:var(--rule);
  background:var(--paper)}
.rec>div{padding:20px}
.rec>div+div{border-left:var(--rule)}
.rec pre{margin:0;font-family:var(--type);font-size:14px;line-height:1.75;
  white-space:pre-wrap;word-break:break-word}
.kv{display:flex;justify-content:space-between;gap:16px;padding:7px 0;
  border-bottom:1px dashed var(--ink-30);font-size:13px}
.kv:last-child{border-bottom:0}
.kv b{font-weight:700;text-align:right;overflow-wrap:anywhere}
.caps{font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-family:var(--display);color:var(--ink-60)}

/* ---- exhibit ---------------------------------------------------------- */
/* Column counts live here, never in a style attribute: an inline
   grid-template-columns outranks every media query below and strands the
   layout in two columns on a phone. */
.exhibit{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:var(--gut);align-items:start;margin-top:clamp(24px,4vw,46px)}
.exhibit.even{grid-template-columns:1fr 1fr}
.exhibit.narrow{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
.exhibit img{border:var(--rule);transform:rotate(-1.3deg)}
.exhibit .tilt-l{transform:rotate(-1deg)}
.exhibit .tilt-r{transform:rotate(1.2deg)}
.page.dark .exhibit img{border-color:var(--paper)}

/* ---- product cuttings ------------------------------------------------- */
.cuts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0;border-top:var(--rule);border-left:var(--rule)}
.cut{border-right:var(--rule);border-bottom:var(--rule);padding:22px 20px;
  display:flex;flex-direction:column;gap:9px;background:var(--paper)}
.cut:nth-child(3n+2){background:var(--paper-2)}
.cut .price{font-family:var(--display);font-size:15px;letter-spacing:.06em;
  background:var(--ink);color:var(--paper);align-self:flex-start;padding:2px 8px}
.cut p{margin:0;font-size:14px}
.cut .more{margin-top:auto;padding-top:10px}

/* ---- streams table ---------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--ink-12);
  vertical-align:top}
th{font-family:var(--display);text-transform:uppercase;font-size:12px;
  letter-spacing:.14em;border-bottom:var(--rule)}
td:first-child{font-family:var(--display);text-transform:uppercase;
  font-size:17px;white-space:nowrap}

/* ---- modal ------------------------------------------------------------ */
.modal{width:min(620px,calc(100vw - 2 * var(--gut)));padding:0;border:var(--rule);
  background:var(--paper);color:var(--ink);box-shadow:16px 16px 0 var(--ink)}
.modal::backdrop{background:rgba(14,14,12,.76)}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:13px 18px;border-bottom:var(--rule);background:var(--flare)}
.modal-head h3{font-size:19px}
.modal-x{background:transparent;border:0;font-family:var(--display);font-size:26px;
  line-height:1;cursor:pointer;padding:0 5px;color:var(--ink)}
.modal-body{padding:20px;max-height:68vh;overflow-y:auto}
.verdict{font-family:var(--display);text-transform:uppercase;font-size:15px;
  letter-spacing:.08em;padding:3px 9px;display:inline-block}
.verdict.blocked{background:var(--ink);color:var(--flare)}
.verdict.allowed{background:var(--flare);color:var(--ink)}
.agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:5px;margin:15px 0}
.agent{display:flex;justify-content:space-between;gap:9px;font-size:13px;
  border:1px solid var(--ink-12);padding:5px 9px}
.agent.no{background:var(--ink);color:var(--paper)}

/* ---- footer ----------------------------------------------------------- */
.foot{padding:clamp(30px,4vw,58px) 0;font-size:13px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:26px}
.foot h3{font-size:13px;letter-spacing:.16em;margin:0 0 9px}
.foot a{display:block;border:0;padding:2px 0}
.foot a:hover{background:var(--flare)}
.colophon{margin-top:34px;padding-top:16px;border-top:var(--rule);
  color:var(--ink-60);max-width:70ch}

/* ---- motion ----------------------------------------------------------- */
/* Slam, do not glide. steps() keeps it photocopied rather than silky.

   Everything here is gated behind html.anim, which the script only adds once it
   has confirmed IntersectionObserver exists and motion is wanted. Hiding content
   in the stylesheet and trusting script to bring it back is how a page ends up
   blank when rAF is throttled in a background tab or the script dies early. The
   default state is visible; the animation is the opt-in. */
html.anim .rv{opacity:0;transform:translateY(22px)}
html.anim .rv.in{opacity:1;transform:none;
  transition:opacity .01s steps(1),transform .34s cubic-bezier(.2,1.5,.4,1)}
html.anim .hero h1 .w{opacity:0;transform:translateY(38px) rotate(2deg)}
html.anim .hero h1.in .w{opacity:1;transform:none;
  transition:opacity .01s steps(1),transform .38s cubic-bezier(.2,1.4,.35,1)}
@media(prefers-reduced-motion:reduce){
  .ticker-in{animation:none}
}

/* ---- responsive ------------------------------------------------------- */
@media(max-height:820px){
  .hero-panel{max-width:360px}
}
@media(max-width:1000px){
  /* Stacked: the plate is a band, so the panel no longer has a column height
     to fill and goes back to sizing on its content. */
  .hero-panel{min-height:0}
  /* stacked: no spare height to push the form into, so let it sit up */
  .panel-form{margin-top:clamp(12px,3vw,20px)}
  .hero-panel .sub-2{display:none}
  /* Stack, with the plate as a band above the panel rather than a column
     beside it. The hero keeps claiming the viewport so the figures still land
     on the fold; the pieces shrink instead. */
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding:0}
  .hero-side{border-left:0;border-top:var(--rule);
    padding:clamp(14px,3.4vw,28px)}
  .hero-panel{max-width:none}
  .exhibit,.exhibit.even,.exhibit.narrow{grid-template-columns:1fr}
  .exhibit img{max-width:360px}
}
@media(max-width:700px){
  .brand .badge{width:76px;height:76px;margin-bottom:-34px;border-width:2px;
    box-shadow:5px 5px 0 var(--ink);top:6px}
  .brand{gap:10px}
  /* The nav wrapped to a second line here, which put 163px of chrome above a
     hero that then could not fit its own figures. One scrollable row keeps
     every link and gives 67px back. */
  .mast-in{gap:12px;grid-template-columns:auto minmax(0,1fr) auto}
  .mast-get{display:none}
  .mast-cta a{font-size:12px;padding:4px 8px}
  /* stretch + min-width:0, never justify-self:end. The nav's content is wider
     than its track, and an end-aligned overflow spills LEFT across the
     wordmark. Filling the track makes its own overflow-x do the scrolling. */
  /* justify-content must be flex-START, not end. An overflowing flex row that
     is end-aligned pushes its content past the START edge, and start-edge
     overflow is not scrollable in any browser -- the links simply drew on top
     of the wordmark and could not be reached. Aligning to the start sends the
     overflow to the end edge, which overflow-x:auto can actually scroll. */
  .mast nav{gap:13px;flex-wrap:nowrap;overflow-x:auto;
    justify-self:stretch;min-width:0;justify-content:flex-start;
    -ms-overflow-style:none;scrollbar-width:none}
  .mast nav::-webkit-scrollbar{display:none}
  .mast nav a{font-size:12px;white-space:nowrap}
  .brand{font-size:19px}
  .hero-panel{transform:none;box-shadow:8px 8px 0 var(--ink)}
  .fig{padding:9px var(--gut) 11px}
  .num{font-size:clamp(20px,6.4vw,28px)}
  .fig .l{font-size:9.5px;letter-spacing:.09em;margin-top:3px}
}
@media(max-width:700px){
  .figs{grid-template-columns:repeat(2,1fr)}
  .fig{border-bottom:1px solid var(--ink-12)}
  .rec{grid-template-columns:1fr}
  .rec>div+div{border-left:0;border-top:var(--rule)}
  .head{grid-template-columns:1fr}
  td:first-child{font-size:15px;white-space:normal}
}