/* ═══════════════════════════════════════════════════════════════════════════
   DISCISE · CORE — the shared shell
   ---------------------------------------------------------------------------
   Every page of this site is: this stylesheet, core.js, the engine, and a
   <main>. Nothing page-specific lives in here.

   WHY THIS IS A SEPARATE FILE and not inlined the way discise-site.html did it.
   That page was one artefact and inlining was right for it — it had to survive
   being emailed. A SITE is a different object: the engine is 169 KB and the six
   faces are 94 KB, and inlined they are re-downloaded on every navigation. Out
   here they are fetched once and served from cache for every page after the
   first. Four pages: ~1.05 MB of repeats becomes ~263 KB fetched once.
   Verified: relative @font-face urls DO load over file://, so this still opens
   by double-clicking, with no server. (Firefox treats each file:// document as
   its own origin and will refuse them — it also has no backdrop-filter lens,
   so Chromium is the local preview either way.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE FACES — self-hosted, in the folder, no third party ────────────────
   Every byte of type this site draws with is a file sitting next to this one.
   No Google Fonts, no CDN, nothing that can be blocked, rate-limited, moved or
   go down: if the page loads, the letterforms load, on every device and every
   network that can reach the site at all. (It is also the OFL position — the
   licence travels with the file, and Tanklager's is in the folder.)

   TWO FORMATS. woff2 is what ~98% of the world fetches; woff is the insurance
   for what is left, and it costs nothing at runtime because a browser takes the
   FIRST format in the list it understands and stops. The order matters — put
   woff first and every modern browser downloads the bigger file forever.

   font-display:block, not swap. These are the brand's letterforms; the block
   period is ~3s and then the fallback shows anyway, so nothing can end up
   invisible — but a flash of Arial standing in for the wordmark is worse than
   100ms of nothing. Stacks below always end in a real generic. */
@font-face{font-family:Tanklager;src:url(fonts/Tanklager.woff2) format('woff2'),
        url(fonts/Tanklager.woff) format('woff');font-display:block}
@font-face{font-family:'IBM Plex Serif';font-weight:400;font-style:normal;src:url(fonts/IBMPlexSerif-400.woff2) format('woff2'),
        url(fonts/IBMPlexSerif-400.woff) format('woff');font-display:block}
@font-face{font-family:'IBM Plex Serif';font-weight:400;font-style:italic;src:url(fonts/IBMPlexSerif-400i.woff2) format('woff2'),
        url(fonts/IBMPlexSerif-400i.woff) format('woff');font-display:block}
@font-face{font-family:'IBM Plex Mono';font-weight:300;font-style:normal;src:url(fonts/IBMPlexMono-300.woff2) format('woff2'),
        url(fonts/IBMPlexMono-300.woff) format('woff');font-display:block}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;src:url(fonts/IBMPlexMono-400.woff2) format('woff2'),
        url(fonts/IBMPlexMono-400.woff) format('woff');font-display:block}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;src:url(fonts/IBMPlexMono-500.woff2) format('woff2'),
        url(fonts/IBMPlexMono-500.woff) format('woff');font-display:block}

:root{
  --ink:#0a0a0c; --cream:#f2ede1; --paper:#e9e3d5; --teal:#09191d;
  --acc:#ff5a1f; --acc2:#35e0d0; --mid:#6e6a5e; --dim:#9c968a;
  /* --hi is the MARK'S HIGHLIGHT, measured off the rendered wordmark rather
     than picked: the brightest tone inside the letterform is the unprinted
     paper the halftone leaves showing, and it is the same literal the engine
     prints its sheet with. --cream is the mark's body; --hi is where the light
     lands on it. Not to be confused with --paper, which is a palette tone. */
  --hi:#faf7f0;

  /* ── the type system ───────────────────────────────────────────────────
     wordmark  Tanklager          the logo, and the hero statement under it
     display   IBM Plex Mono 300  credits, ticker, tight
     reading   IBM Plex Serif 400 prose — the editorial voice
     micro     IBM Plex Mono 400/500  data, values, tables
     brand     Tanklager          the voice — nav, section labels, captions  */
  --brand:Tanklager,'IBM Plex Mono',ui-monospace,monospace;
  --display:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --read:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --gut:clamp(20px,5vw,84px);

  /* ═══ THE SCALE — seven steps, and every size on the site is one of them ═══
     Named by JOB, not by number, so a new element has to declare what it IS
     before it can pick a size. The ratio widens as it climbs: fine gradation
     where text is read, violent jumps where it is looked at.
       t1 data · t2 label · t3 read · t4 second · t5 voice · t6 headline · t7 monument */
  --t1:clamp(10.5px,.8vw,11px);
  --t2:clamp(12px,.95vw,13px);
  --t3:clamp(15.5px,1.2vw,16.5px);
  --t4:clamp(17px,1.8vw,24px);
  --t5:clamp(19px,2.5vw,33px);
  --t6:clamp(28px,4.2vw,54px);
  --t7:clamp(52px,10vw,132px);

  /* the nav is a ship: bar, mark and type scale as one object */
  --navh:clamp(76px,8.4vw,108px);
  --markw:clamp(150px,15vw,230px);
  --rule:1px solid color-mix(in srgb, currentColor 18%, transparent);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--mono);
     font-optical-sizing:auto;font-size:var(--t3);line-height:1.62;letter-spacing:-.003em;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* The statement voice is the brand face. The mark is Tanklager in CAPS at
   display size; a statement is Tanklager in LOWERCASE — same voice, opposite
   case, and the size ratio does the rest. NOT small caps: Tanklager carries no
   `smcp`, so a browser synthesises them by scaling capitals, and a scaled
   capital is a thinner capital. Its lowercase is genuinely drawn. */
h1{font-family:var(--brand);font-weight:400;letter-spacing:.006em;line-height:1.04;margin:0}
h2{font-family:var(--brand);text-transform:uppercase;letter-spacing:.012em;line-height:.94;margin:0}
h3{font-family:var(--brand);font-weight:400;letter-spacing:.02em;text-transform:uppercase;line-height:1.15;margin:0}
/* WORD SPACE, MEASURED. Tanklager's space is drawn at 0.12em — a poster face's
   space, cut to lock a two-word wordmark into one object. Set a sentence with
   it and the sentence becomes that object: at 54px the gap between words is
   6.5px against a 7px stem. Caps are worse again, having no ascender to signal
   the break. +.06em takes it to 0.18em: still a poster, now four words. */
h1,h2,h3{word-spacing:.06em}
p{margin:0}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lbl{font-family:var(--brand);font-size:var(--t2);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.rule{border:0;border-top:1px solid currentColor;opacity:.18;margin:0}
/* mark slots: empty boxes your CSS lays out; the engine paints inside */
.slot{display:block;pointer-events:none}

/* ── fixed chrome (excluded from the snapshot: position:fixed) ── */
/* SCROLL-DISMISS. The bar leaves when you are reading downward and comes back the
   instant you reach for it — the behaviour a phone browser's URL bar has, which is
   the one piece of chrome everyone has already learned. Three states, not two:
   at the top it is transparent and belongs to the hero; scrolled and rising it is
   solid and belongs to the page; scrolled and falling it is gone. A small dead zone
   stops a trackpad's jitter from flickering it. */
.nav{position:fixed;inset:0 0 auto 0;height:var(--navh);display:flex;align-items:center;
     gap:clamp(18px,3.2vw,52px);
     padding:0 var(--gut) 0 calc(var(--gut) + var(--markw) + clamp(26px,3vw,54px));z-index:60;mix-blend-mode:normal;
     transition:transform .34s cubic-bezier(.22,.61,.36,1),background .28s ease,border-color .28s ease;
     border-bottom:1px solid transparent;will-change:transform}
.nav[data-dismissed]{transform:translateY(-102%)}
.nav[data-stuck]{background:color-mix(in srgb,var(--ink) 86%,transparent);
                 backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
                 border-bottom-color:rgba(242,237,225,.13)}
body.printmode .nav[data-stuck]{background:color-mix(in srgb,#faf7f0 92%,transparent);
                                border-bottom-color:rgba(20,20,24,.16)}
/* THE GLASS BAR. Where the engine can refract a live backdrop (Chromium today
   — WebKit and Firefox still have the bug open), the navigation stops being a
   blurred panel and becomes a real strip of glass: the page bends as it passes
   under the lower lip, and the three wavelengths separate there exactly as they
   do in the mark. The tint drops back so there is something to see through, and
   the mark stays flat inline vector on top — a logo has to be legible before it
   is interesting. Without support the blur fallback stands, unannounced. */
.nav.lens{-webkit-backdrop-filter:url(#dgNav);backdrop-filter:url(#dgNav)}
/* NO STROKE ON THE GLASS (Jony, 22 Aug). The blurred fallback needs a hairline,
   because a blur with no edge is just a smear — but the lens does not: the
   refraction IS the edge, the page visibly bends as it passes under the lip. A
   cream rule drawn on top of that says "panel" over something that was already
   saying "glass", and the panel wins. Measured before removing: the bar's last
   row read 155.3 luma against 133.1 for its own interior — a +22 hairline, and
   killing the rim composite changed it by nothing, so the stroke was the whole
   of it. Border stays 1px transparent so the box height never moves. */
.nav.lens[data-stuck]{background:color-mix(in srgb,var(--ink) 46%,transparent);
                      -webkit-backdrop-filter:url(#dgNav) saturate(1.25);
                      backdrop-filter:url(#dgNav) saturate(1.25);
                      border-bottom-color:transparent}
body.printmode .nav.lens[data-stuck]{background:color-mix(in srgb,#faf7f0 62%,transparent);border-bottom-color:transparent}
@media (prefers-reduced-motion:reduce){.nav{transition:none}.nav[data-dismissed]{transform:none}}
.nav .slot{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);width:var(--markw);aspect-ratio:2805/730;color:var(--cream)}
.nav .slot svg{display:block;width:100%;height:100%}
body.printmode .nav .slot,.nav.on-light .slot{color:var(--ink)}
/* LOWERCASE NAV (Jony, 21 Aug): "caps are oldschool". Tanklager carries a
   real lowercase, so the brand voice can drop out of caps entirely — and the
   tracking drops with it, because lowercase does not want cap spacing. Caps
   stay where they are STRUCTURAL: the numbered section marks and captions. */
.nav a:not(.slot){font-family:var(--brand);font-size:var(--t5);letter-spacing:.028em;
       text-transform:lowercase;line-height:1;
       text-decoration:none;opacity:.74;
       transition:opacity .18s ease,color .18s ease,text-shadow .22s ease;
       text-shadow:0 1px 10px rgba(0,0,0,.55)}
/* THE HOVER IS THE MARK'S HIGHLIGHT (Jony, 22 Aug). It was --acc orange — a
   brand accent, which is the move every technical page makes, and it spent the
   page's one saturated ink on a rollover. The mark already had the better
   answer in it: the link does not change HUE on hover, it LIGHTS. Cream at .74
   goes to paper at full, with the specular the glass throws over the water.
   The near-opaque 1px core is doing real work — a highlight sits ON an edge and
   does not soften it, so the stems stay hard while the 9/22px falloff carries
   the air; without that core the letters just go fuzzy. The falloff was dialled
   at real size against three alternatives, because a specular judged at 2x zoom
   is always set too hot: 13/30 already softened the stems and 18/40 smeared the
   word into a lamp. What the glass actually throws is a GLINT — the engine's
   own gloss is 88, a tight highlight on a bevel, not a halo.
   Orange keeps its job as the SIGNAL ink — body links, section numbers, the
   press's default plate — which is the split the page already makes: chrome is
   an object and lights, content is ink and takes the signal. */
.nav a:not(.slot):hover{opacity:1;color:var(--hi);
       text-shadow:0 0 1px rgba(250,247,240,.95),0 0 9px rgba(250,247,240,.20),
                   0 0 22px rgba(250,247,240,.09),0 1px 10px rgba(0,0,0,.5)}
/* ═══ THE POINTER IS THE LIGHT SOURCE (Jony, 22 Aug) ═══════════════════════
   Not a new idea — the engine has done this since the beginning. `uPointer`
   shifts `uLightAng` in the shader (`float la = uLightAng + uPointer.x*0.9`)
   and the studio ships with light: pointer ON, so the MARK is already lit by
   the cursor. Until now the chrome was not, which meant the bar sat inside a
   lit object obeying different physics. This makes the nav obey the mark's.
     The highlight is a masked overlay, not a colour. `::after` is a second
   copy of the word at paper with the glint, and a radial mask centred on the
   pointer decides where it exists; the word underneath stays cream. So the
   light does not turn on — it LANDS, and it lands where the cursor is.
     `::before` is the same copy with no mask: the click flash. It goes to full
   in one frame (no transition on the way in — a specular does not ease in when
   the light hits square on), holds ~90ms, then falls away over the rest of the
   scroll, so the word is at logo intensity at the moment the section starts
   arriving and back to resting by the time it lands.
     THE CHIP IS EXCLUDED on purpose. It is a bordered object, and a frame
   cannot be half-lit without reading as a rendering fault, so it takes the
   highlight whole. The three words are surfaces; the chip is a switch.
     The alt-text syntax `attr(data-t) / ""` keeps assistive tech from reading
   each label three times. Without mask support the whole block is skipped and
   the measured static highlight stands — which is why that rule stays above. */
/* Gated on the ALT-TEXT form too, not just the mask. Where `content: attr(x) / ""`
   is unsupported the whole content declaration is invalid, no pseudo is
   generated, and the link would have lost its highlight entirely while still
   picking up the `color:var(--cream)` that hands the job over — so the test has
   to cover the thing the layer is actually built out of. Fails closed to the
   measured static highlight, which is a good place to fail to. */
@supports ((mask-image:radial-gradient(#000,transparent)) or (-webkit-mask-image:radial-gradient(#000,transparent))){
@supports (content:"a" / "b"){
  .nav a.lit{position:relative;--mx:50%;--lr:clamp(34px,3.4vw,50px)}
  /* the word itself stops at its body tone; the light is the layer above it */
  .nav a.lit:hover{color:var(--cream);text-shadow:0 1px 10px rgba(0,0,0,.55)}
  /* BOTH LAYERS SIT ABOVE THE WORD. A positioned ::before paints BEFORE the
     element's own text, so without a z-index the flash renders underneath the
     cream glyphs it is meant to light and only its glow escapes — which is
     exactly what the first filmstrip showed. The link is already a stacking
     context (opacity < 1 makes one), so these stay scoped to it. */
  .nav a.lit::before,.nav a.lit::after{
    content:attr(data-t) / "";position:absolute;inset:0;pointer-events:none;
    color:var(--hi);opacity:0}
  .nav a.lit::before{z-index:1}
  .nav a.lit::after{z-index:2}
  .nav a.lit::after{
    text-shadow:0 0 1px rgba(250,247,240,.95),0 0 9px rgba(250,247,240,.20),
                0 0 22px rgba(250,247,240,.09);
    transition:opacity .16s ease;
    -webkit-mask-image:radial-gradient(circle var(--lr) at var(--mx) 52%,
        #000 0%,rgba(0,0,0,.9) 24%,transparent 76%);
            mask-image:radial-gradient(circle var(--lr) at var(--mx) 52%,
        #000 0%,rgba(0,0,0,.9) 24%,transparent 76%)}
  .nav a.lit:hover::after{opacity:1}
  /* KEYBOARD GETS THE LIGHT TOO. There is no pointer to be the source, so the
     mask keeps its 50% default and the highlight sits mid-word — the same
     event, lit from the front instead of from wherever the hand is. */
  .nav a.lit:focus-visible{outline:none}
  .nav a.lit:focus-visible::after{opacity:1}
  /* …and the flash is never dimmed by the resting state. The link sits at .74
     and group opacity multiplies through to the pseudos, so a flash fired as
     the cursor leaves (which is what a click DOES — the page scrolls out from
     under the pointer) was landing at 74% of logo intensity. Measured: 186 luma
     against the 247 the highlight is supposed to reach. The class carries the
     lift for exactly as long as the animation runs. */
  .nav a.lit.flash{opacity:1}
  /* the click: whole word, logo intensity, one frame */
  .nav a.lit::before{
    text-shadow:0 0 1px rgba(250,247,240,.98),0 0 12px rgba(250,247,240,.34),
                0 0 34px rgba(250,247,240,.17)}
  .nav a.lit.flash::before{animation:navflash .72s cubic-bezier(.15,.7,.3,1) forwards}
  @keyframes navflash{0%{opacity:1}12%{opacity:1}100%{opacity:0}}
  /* ON PAPER THE LIGHT IS INK. You cannot glow darker, so the same instruction
     read the other way up: the word DARKENS to full ink where the cursor is. */
  .nav.on-light a.lit::before,.nav.on-light a.lit::after,
  body.printmode .nav a.lit::before,body.printmode .nav a.lit::after{
    color:var(--ink);text-shadow:none}
  .nav.on-light a.lit:hover,body.printmode .nav a.lit:hover{color:var(--mid);text-shadow:none}
  @media (prefers-reduced-motion:reduce){
    .nav a.lit::after{-webkit-mask-image:none;mask-image:none}
    .nav a.lit.flash::before{animation:none}
  }
}}
.nav a.slot{opacity:1;text-decoration:none}
/* the three page links are a group, not three siblings — it is what they are
   semantically, and it is what lets the phone move them as one object */
.nav .pages{display:flex;align-items:center;gap:clamp(18px,3.2vw,52px)}
.nav a.cta{margin-left:auto}
.cta .ne{display:inline-block;transform:rotate(45deg);margin-left:2px;font-family:var(--mono);font-weight:500;font-size:var(--t2)}
.nav a.cta{font-family:var(--brand);font-size:var(--t4);letter-spacing:.02em;text-transform:lowercase;
          line-height:1;opacity:1;
          border:1px solid currentColor;padding:8px 13px;opacity:.9}
.nav.on-light a:not(.slot){text-shadow:none;color:var(--ink)}


/* ── CURRENT PAGE ──────────────────────────────────────────────────────────
   A one-page artefact did not need this; a site does. No new colour and no
   underline: the page you are on is simply already lit — full body tone, no
   glow, because a glow is what the pointer does and you are not pointing at
   where you already are. */
.nav a[aria-current="page"]{opacity:1}
.nav a.lit[aria-current="page"]:hover{color:var(--hi)}

/* ── THE CHIP IS PAGE-CONDITIONAL ──────────────────────────────────────────
   Jony: appstore "living only in dissector and love&truth". The markup is
   identical on every page — one shell, copied — and the page declares itself
   with data-page on <body>. Adding a page to the list is one selector, and no
   page can drift out of sync with its own navigation. */
.nav a.cta{display:none}
body[data-page="dissector"] .nav a.cta,
body[data-page="love-truth"] .nav a.cta{display:inline-block}

/* ── the hero: the plate, and the mark on it ───────────────────────────────
   The video is the lens's live source (data-lg-live) AND what you see, which
   is why the refraction is honest — what is on screen is exactly what is
   being bent. */
/* --barh is the bar's MEASURED height, published by core.js. --navh sets the
   desktop bar, so anything that has to clear the bar cannot read --navh
   without arguing in a circle — and on the phone the bar sizes itself from
   its content, where --navh is not even the answer. Falls back to --navh
   before the first measurement lands. */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto auto;
      align-content:center;padding:calc(var(--barh,var(--navh)) + clamp(24px,6vh,80px)) var(--gut) clamp(40px,8vh,96px);
      overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;
      background:linear-gradient(180deg,rgba(10,10,12,.55),rgba(10,10,12,.05) 34%,rgba(10,10,12,.72))}
.hero .slot{grid-row:1;align-self:center;justify-self:center;width:min(72vw,860px);aspect-ratio:2805/730}
.hero h1{grid-row:2;font-size:var(--t6);max-width:18ch;margin-bottom:.34em}
.hero .lede{grid-row:3;font-family:var(--read);font-size:var(--t3);line-height:1.62;
      letter-spacing:-.002em;max-width:42ch;color:color-mix(in srgb,var(--cream) 86%,transparent)}
.hero .meta{position:absolute;left:var(--gut);top:calc(var(--barh,var(--navh)) + clamp(14px,2.2vh,32px));display:flex;gap:22px}
.hero .meta--r{left:auto;right:var(--gut)}

/* ── where the page gets built ─────────────────────────────────────────────
   Deliberately almost nothing. A section is a full-width band that declares
   its own ground; the gutter and the seven sizes do the rest. */
main{display:block}
section{padding:clamp(56px,10vh,132px) var(--gut)}
/* THE FIRST BAND CLEARS THE BAR. The nav is fixed, so it is out of flow, and a
   page whose first section is not the full-height hero starts underneath it —
   the stubs put their heading straight through the wordmark. The hero handles
   this itself (it pads for the bar and centres inside what is left); every
   other first-child pays for it here, once, at shell level. */
main > section:first-child:not(.hero){padding-top:calc(var(--barh,var(--navh)) + clamp(28px,6vh,72px))}
section.light{background:var(--cream);color:var(--ink)}
.wrap{max-width:1360px;margin-inline:auto}

svg.defs{position:absolute;width:0;height:0}
::selection{background:var(--acc);color:var(--ink)}

/*═══ THE PHONE BAR ════════════════════════════════════════════════════════
  One row does not fit and cannot be made to. Measured at 390px: wordmark 112 +
  three links 183 + a chip 81 + the gaps they need comes to well past the
  viewport, and because a FIXED bar clips its children without the document
  ever overflowing, the chip was not squeezed — it was silently 104px off-screen
  and simply absent on the two pages that are supposed to have it. Nothing in
  the layout reported a problem.

  So the bar becomes a masthead: wordmark and chip on the top line, the pages
  underneath. No hamburger — three links do not need a menu, and a menu would
  put the site's whole structure one tap further away to save 20px. The wordmark
  stays whole: it is the logo, there is no signet, and swapping in a monogram at
  small sizes is the one thing this identity does not do.
═══════════════════════════════════════════════════════════════════════════════*/
@media (max-width:720px){
  :root{--markw:118px;--t4:15px;--t5:19px}
  .nav{height:auto;display:grid;align-items:center;
       grid-template-columns:auto 1fr;grid-template-rows:auto auto;
       column-gap:12px;row-gap:9px;
       padding:11px var(--gut) 13px}
  .nav .slot{position:static;transform:none;grid-column:1;grid-row:1;justify-self:start}
  .nav a.cta{grid-column:2;grid-row:1;justify-self:end;margin-left:0}
  /* FOUR LINKS, ONE PHONE (added with the syndrome page). Measured at 390px:
     the original three sat on the row with ~46px of gutter to spare; the fourth
     word takes it 17px past the edge — and because a FIXED bar clips its children
     without the document ever overflowing, the last link would not be squeezed,
     it would be silently absent, exactly the way the appstore chip once was.
     Permission to wrap is the whole fix: the row becomes two, the bar grows,
     core.js republishes --barh from the measured box, and every page's first band
     clears the new height on its own. No face, size, tracking or colour changes. */
  .nav .pages{grid-column:1 / -1;grid-row:2;gap:clamp(16px,5.4vw,30px);
              flex-wrap:wrap;row-gap:7px}
  /* the lens lip is baked from the bar's real box, so it follows automatically */
  .hero .meta--r{display:none}
}
/*═══ TOUCH ════════════════════════════════════════════════════════════════
  There is no pointer to be a light source. On a touch device :hover latches on
  after a tap and stays lit until you tap elsewhere, which reads as a bug, so
  the positional highlight is switched off and the link simply lifts to the
  mark's highlight tone. The CLICK FLASH is kept — it is the one part of this
  that a finger can actually cause, and it is the part that answers the tap.
  hover:none is the honest test, not a width: a small window with a mouse still
  gets the light, a large tablet without one does not. */
@media (hover:none){
  .nav a.lit::after{display:none}
  .nav a.lit:active,.nav a.lit:hover{color:var(--hi);
       text-shadow:0 0 1px rgba(250,247,240,.95),0 0 9px rgba(250,247,240,.20),
                   0 0 22px rgba(250,247,240,.09)}
  .nav a:not(.slot){opacity:.86}          /* no hover to reveal them: lift the floor */
  .nav a[aria-current="page"]{opacity:1}
}