/* ══════════════════════════════════════════════════════════════════════════════════
   FREIGHTPROBE · SHARED SHEET
   Created 2026-08-29 with the first page, deliberately, not after the third one.

   WHY THIS FILE EXISTS BEFORE PAGE TWO DOES.
   The network's worked failure is `.lc-bar` on lucreya: a good component defined INLINE
   in all seven articles that used it, never in a shared sheet, whose label width drifted
   across 80, 96, 104, 110, 118, 120, 140 and 150px. Not two idioms. One idiom that became
   eight dialects because nobody wrote it down once.
   ⭐ THE USAGE IS THE VOCABULARY; THE STYLESHEET IS ONLY WHERE SOME OF IT HAPPENS TO BE
   WRITTEN DOWN. So it gets written down here, first, while there is one page to keep true.

   WHAT BELONGS HERE: the property tokens, the engine chrome, and any component a SECOND
   page will need. What stays inline on a page: that page's own one-off layout.
   ⛔ Promote a component into this file BEFORE writing a new one that resembles it.
   ══════════════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ────────────────────────────────────────────────────────────────────────
   ⚠️ site_engine.js sets ONLY the accent family at runtime (--accent, --accent-light,
   --accent-hover, --secondary*) as an INLINE root property, which outranks this file.
   It does NOT set --paper, --text, --border or --radius. Any page consuming those
   without this sheet gets `inherit`, not a default, and renders plausibly wrong.
   ⭐ FIVE ROLE TOKENS ARE THE SHARED CONTRACT: --paper --text --accent --border --radius.
   Everything else here is DERIVED from them, so it cannot be wrong on a light ground or
   a dark one. No value-named tokens: --dark names a colour, --text names a job, and a
   token named for its value inverts the day the theme flips. */
:root{
  --paper:#fbfaf9;
  --text:#26221f;
  --accent:#9f1239;
  --radius:12px;

  /* Recognition hues, declared as ROLES this property owns.
     ⛔ Never reach into a palette by colour name. rinzara's var(--cyan) computes to
     #f59e0b on its own live pages. It is amber. */
  --hue-money:#9f1239;
  --hue-comply:#1e5f74;
  --hue-operate:#7c5e10;

  --display:'Source Serif 4',Georgia,serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;

  --wrap:1140px;
  --border:color-mix(in srgb, var(--text) 13%, var(--paper));
  --line:var(--border);
  --line-soft:color-mix(in srgb, var(--text) 7%, var(--paper));
  --surface:color-mix(in srgb, var(--text) 3%, var(--paper));
  --surface-high:color-mix(in srgb, var(--text) 6%, var(--paper));
  --muted-ink:color-mix(in srgb, var(--text) 64%, var(--paper));
  --on-accent:var(--paper);
}

/* ══ §5 · THE GROUND LAYER · MOVED HERE FROM index.html AND REBUILT, 2026-08-30 ══════
   ⛔ WHY IT MOVED. It was declared INLINE on index.html, so page two would have shipped
   on bare paper and the property's "look" would have been one page's private choice.
   The whole point of this sheet is that the standard generalises before sprawl.

   ⛔ WHY IT WAS REBUILT. Measured live in Chrome at 100%: the two brand washes were
   `color-mix(... 9%, transparent)` on a #fbfaf9 ground. Present in `getComputedStyle`,
   INVISIBLE to the eye. The property standard's own test is "visible to the naked eye
   at 100%", and this failed it.
   ⭐ THE TRANSFERABLE PART: a light ground and a dark ground do not share a depth
   vocabulary. rinzara reaches ~0.23 effective alpha on a #1c1a1f body and reads as
   atmosphere; the same alpha on near-white is nothing, because there is no darkness for
   a wash to displace. On paper you need STRUCTURE, not fog.

   So the depth here is four honest layers, and the texture is EARNED rather than
   decorative: FreightProbe exists to say what a carrier actually pays, so the field it
   is printed on is a LEDGER. Fine horizontal rules, warm stock, ink pooling at the edge. */
body::before,body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1}
/* ⭐⭐ THE GOVERNING RULE, LEARNED BY SHIPPING THE WRONG VERSION FIRST (2026-08-30):
   DEPTH AT THE EDGES, CLEAN PAPER UNDER THE TEXT.
   v1 of this layer fixed the invisibility problem and created its own: washes at 22% and
   ledger rules at 4% ink ran straight through the body copy, so the page read as LINED
   PAPER and the texture competed with the sentences it was supposed to sit behind.
   ⛔ That is not "too subtle vs too loud", which is the axis everyone reaches for. It is
   WHERE, not HOW MUCH. Editorial grounds put their atmosphere in the margins and leave the
   measure clean, because a reader's eye tracks along the line and any repeating horizontal
   structure underneath it fights that motion directly.
   Both layers are therefore MASKED to fade out across the centre column. */
body::before{
  background:
    /* 1 · light from the top: the ground must not darken under body copy */
    radial-gradient(120% 70% at 50% -10%, #ffffff 0%, transparent 62%),
    /* 2 · brand washes, pushed into the CORNERS and eased back from v1's 22%/17% */
    radial-gradient(46% 40% at 98% -2%, color-mix(in srgb, var(--hue-money) 17%, transparent) 0%, transparent 66%),
    radial-gradient(42% 38% at -2% 22%, color-mix(in srgb, var(--hue-comply) 13%, transparent) 0%, transparent 68%),
    /* 3 · a third wash low-right so the lower half of long pages is not bare */
    radial-gradient(48% 36% at 96% 94%, color-mix(in srgb, var(--hue-operate) 11%, transparent) 0%, transparent 70%),
    /* 4 · warm stock. Paper is never one flat value across a metre of screen. */
    linear-gradient(178deg, transparent 0%, color-mix(in srgb, var(--hue-operate) 4%, transparent) 100%);
  /* vignette lives HERE, not on ::after: ::after is mask-imaged and a mask clips
     box-shadow too, which would have deleted the vignette across the middle. */
  box-shadow:inset 0 0 210px color-mix(in srgb, var(--text) 8%, transparent);
}
/* LEDGER RULES · the texture layer, on its own element so it is tunable without touching
   the washes. FreightProbe reports what a carrier pays, so the field it prints on is a
   ledger: the texture is earned, not decorative.
   ⚠️ 2.6% ink at 32px, and MASKED to near-nothing across the middle 46% where the measure
   sits. Visible in the margins at 100%, absent behind a sentence. */
body::after{
  background:repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--text) 2.6%, transparent) 0 1px,
    transparent 1px 32px);
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 12%,transparent 33%,transparent 67%,#000 88%,#000 100%);
  mask-image:linear-gradient(to right,#000 0%,#000 12%,transparent 33%,transparent 67%,#000 88%,#000 100%);
}

/* ══ THE BRAND MARK · a pill, and a logo that MEANS something ════════════════════════
   Operator ruling 2026-08-30: the wordmark is right, the presentation is not. It read as
   a fifth nav link because it is emitted between `.nav-left` and `.nav-right` by
   `site_engine.js` and carried no container of its own.
   ⭐ THE MARK IS THE LADDER. Three descending bars in the property's three hue ROLES
   (money, operate, comply) are a miniature of `.lad`, this property's signature
   component and the one element the eyes-on audit rated strongest. A logo that is a
   scale model of what the site DOES beats a logo that is a nice shape.
   Built from gradients on ::before, so it needs NO markup change and therefore reaches
   every page the engine renders, including ones that do not exist yet. */
.nav-brand{display:inline-flex;align-items:center;gap:.55rem;
  padding:.36rem .8rem .36rem .62rem;border:1px solid var(--border);border-radius:999px;
  background:color-mix(in srgb, var(--paper) 70%, transparent);
  box-shadow:0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
  transition:border-color .18s ease, background .18s ease}
.nav-brand::before{content:'';flex:none;width:17px;height:17px;
  background:
    linear-gradient(var(--hue-money),var(--hue-money))   0 2px  /17px 3px no-repeat,
    linear-gradient(var(--hue-operate),var(--hue-operate)) 0 7px /12px 3px no-repeat,
    linear-gradient(var(--hue-comply),var(--hue-comply))  0 12px /7px 3px no-repeat}
.nav-brand:hover{border-color:color-mix(in srgb, var(--accent) 40%, var(--border));
  background:color-mix(in srgb, var(--paper) 92%, transparent)}
/* The footer wordmark gets the same mark, no pill: a footer does not need a chip. */
.footer-logo{display:inline-flex;align-items:center;gap:.5rem}
.footer-logo::before{content:'';flex:none;width:15px;height:15px;
  background:
    linear-gradient(var(--hue-money),var(--hue-money))   0 2px  /15px 3px no-repeat,
    linear-gradient(var(--hue-operate),var(--hue-operate)) 0 6px /11px 3px no-repeat,
    linear-gradient(var(--hue-comply),var(--hue-comply))  0 10px/6px 3px no-repeat}

/* ── §6.2 · ONE MICRO-LABEL VOICE ─────────────────────────────────────────────────
   Mono, uppercase, .085em, ONE size, everywhere on the property. The eye learns it
   once. Four near-identical trackings is four voices and the reader pays for all of
   them. Tabular figures because this label frequently carries a number. */
.mk{font-family:var(--mono);font-size:.7rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.085em;color:var(--muted-ink);font-variant-numeric:tabular-nums}

/* ── ENGINE CHROME ────────────────────────────────────────────────────────────────
   ⛔ site_engine.js FILLS #site-header and #site-footer with these ten classes at
   runtime. Measured 2026-08-29 on this property's first page: 10 of 10 had ZERO css
   rules, so the nav rendered as a row of raw underlined links and the footer as a bare
   list. Nothing errored, nothing warned, no request failed.
   ★ MARKUP WITHOUT ITS STYLESHEET FAILS SILENTLY AND LOOKS LIKE A DESIGN CHOICE. It is
   the highest-volume defect in this network (one property emitted a class on 82 of 84
   pages with no CSS for it anywhere). If the engine gains a class, it gets a rule here
   in the same session. */
#site-header{border-bottom:1px solid var(--line-soft);background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:saturate(140%) blur(6px);position:sticky;top:0;z-index:20}
nav{display:flex;align-items:center;gap:1.5rem;max-width:var(--wrap);margin:0 auto;padding:.95rem 1.5rem}
.nav-brand{font-family:var(--display);font-size:1.28rem;font-weight:700;letter-spacing:-.02em;
  text-decoration:none;color:var(--text);white-space:nowrap}
.nav-brand span{color:var(--accent)}
.nav-left{display:flex;align-items:center;gap:1.4rem;margin-left:.5rem}
.nav-left a,.nav-links a{font-size:.88rem;font-weight:500;color:var(--muted-ink);text-decoration:none;
  white-space:nowrap;transition:color .16s ease}
/* ⭐ Hover goes to --text, the ROLE token every property defines to be readable on its
   own ground, so hover always INCREASES contrast on a light ground and a dark one alike.
   A hover set to a value-named token made links INVISIBLE on a dark property. */
.nav-left a:hover,.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:1rem;margin-left:auto}
.nav-cta{font-size:.82rem;font-weight:600;color:var(--on-accent);text-decoration:none;
  background:var(--accent);padding:.5rem 1.05rem;border-radius:8px;white-space:nowrap}
.nav-cta:hover{background:color-mix(in srgb,var(--accent) 84%,var(--text))}
@media(max-width:820px){nav{flex-wrap:wrap;gap:.75rem;padding:.8rem 1.25rem}
  .nav-left{gap:.9rem;margin-left:0;order:3;width:100%;overflow-x:auto}
  .nav-left a{font-size:.8rem}}

#site-footer{border-top:1px solid var(--line);margin-top:4rem;background:var(--surface)}
#site-footer > footer{max-width:var(--wrap);margin:0 auto;padding:2.25rem 1.5rem 2.75rem;
  display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.footer-logo{font-family:var(--display);font-size:1.15rem;font-weight:700;letter-spacing:-.018em;
  text-decoration:none;color:var(--text)}
.footer-logo span{color:var(--accent)}
.footer-links{list-style:none;display:flex;flex-wrap:wrap;gap:1.25rem;padding:0}
.footer-links a{font-size:.86rem;color:var(--muted-ink);text-decoration:none}
.footer-links a:hover{color:var(--text)}
.footer-network{display:flex;flex-wrap:wrap;gap:.9rem;font-size:.8rem;color:var(--muted-ink)}
.footer-network a{color:var(--muted-ink);text-decoration:none}
.footer-network a:hover{color:var(--text)}
/* The disclosure is a NOTICE, not a confession: metadata weight, never a banner, never
   a warning colour. Making it louder "for honesty" violates the canon rather than
   upholding it. */
.footer-disclosure{font-size:.8rem;color:var(--muted-ink);line-height:1.55;max-width:74ch}
.footer-disclosure a{color:var(--accent)}
.footer-note{font-family:var(--mono);font-size:.7rem;letter-spacing:.085em;text-transform:uppercase;
  color:var(--muted-ink)}

/* ══ APP-GRADE LAYER · 2026-08-30 ═══════════════════════════════════════════════════
   Operator: "sleek, app-grade considerations". These are the affordances a reader expects
   from software and almost never gets from a content site, and they are also the things
   that most reliably separate a hand-built property from a generated one.
   ⛔ Every one of them is INTERACTION or NAVIGATION. None of them touches a claim, a
   figure or a source, because the honesty floor is not a design surface. */

/* 1 · SMART NAV. Compresses and gains a shadow once you leave the hero, so the chrome
   acknowledges where you are. Driven by a data attribute set in JS, never by scroll
   position read in CSS, which cannot be done without a hack. */
#site-header{transition:box-shadow .22s ease, background .22s ease, padding .22s ease}
#site-header[data-scrolled="1"]{
  box-shadow:0 1px 0 var(--line), 0 8px 26px -18px color-mix(in srgb,var(--text) 55%,transparent);
  background:color-mix(in srgb,var(--paper) 94%,transparent)}
#site-header[data-scrolled="1"] nav{padding-top:.7rem;padding-bottom:.7rem}

/* 2 · CHAPTER RAIL · the scroll-spy the VISUAL DIGESTIBILITY SYSTEM says every page gets.
   ⚠️ Ported from nesyona's implementation rather than invented. ⛔ Note nesyona's copy ends
   with a later `.chapter-rail{display:none}` that disables it there, so the network standard
   describes a component that is switched OFF on the property it was proven on. Ours runs.
   Hidden below 1400px: there is no gutter to put it in, and a rail that overlaps the measure
   is worse than no rail. */
.rail{position:fixed;top:50%;right:max(1.25rem,calc((100vw - var(--wrap))/2 - 240px));
  transform:translateY(-50%);width:212px;max-height:72vh;overflow-y:auto;z-index:15;
  padding:.2rem 0;border-left:1px solid var(--line);display:none}
@media(min-width:1400px){.rail{display:block}}
.rail-t{font-family:var(--mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted-ink);padding:0 0 .55rem .9rem}
.rail ol{list-style:none;margin:0;padding:0;counter-reset:rail}
.rail a{display:block;padding:.34rem .9rem;color:var(--muted-ink);text-decoration:none;
  font-size:.8rem;line-height:1.35;border-left:2px solid transparent;margin-left:-1px;
  transition:color .16s ease,border-color .16s ease}
.rail a:hover{color:var(--text)}
.rail a[aria-current="true"]{color:var(--text);border-left-color:var(--accent);font-weight:600}
.rail a::before{counter-increment:rail;content:counter(rail,decimal-leading-zero);
  font-family:var(--mono);font-size:.62rem;color:var(--accent);margin-right:.5rem;opacity:.75}

/* 3 · DEEP-LINKABLE HEADINGS. A section you can send someone is an app affordance; a
   section you can only scroll to is a document. Appears on hover and on keyboard focus,
   so it is discoverable without being permanent clutter. */
h2[id]{position:relative}
h2[id] .h-anchor{position:absolute;left:-1.5rem;top:.12em;opacity:0;text-decoration:none;
  color:var(--accent);font-weight:400;font-size:.62em;transition:opacity .16s ease}
h2[id]:hover .h-anchor,h2[id] .h-anchor:focus-visible{opacity:.85}
@media(max-width:1100px){h2[id] .h-anchor{display:none}}

/* 4 · FOCUS. Software has a visible focus ring; most content sites ship the browser
   default or, worse, `outline:none`. */
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);
  outline-offset:3px;border-radius:3px}

/* 5 · SECTION RHYTHM · the anti-generic move, and the one that is structural rather than
   decorative. Measured 2026-08-30: all SEVEN sections rendered at an identical 1092px with
   the identical shape, eyebrow then h2 then lede then one component, seven times.
   ⭐ THAT UNIFORMITY IS THE TELL. A human editor varies the measure to signal what KIND of
   thing you are about to read; a generator emits one container and repeats it. Perfect
   regularity reads as machine output even when every individual section is good.
   Three widths, assigned by what the section CONTAINS rather than by rotation. */
/* ⚠️ `max-width` alone did NOTHING here: these sections sit inside `.wrap`, which is
   already capped at 1140px, so a larger max-width can never be reached. Measured live:
   the s-wide sections still rendered at 1092px, identical to everything else, and the
   rhythm variation only half-landed. A width that cannot exceed its parent is a comment.
   Widening has to be a BREAKOUT, and only above the width where there is margin to spend. */
.s-wide{max-width:1240px}                 /* data that needs room to be compared */
@media(min-width:1320px){.s-wide{margin-inline:-52px}}
.s-tight{max-width:940px}                 /* argument, where a shorter measure reads faster */
.s-band{background:color-mix(in srgb,var(--text) 2.4%,transparent);
  border-block:1px solid var(--line-soft);padding-block:3.5rem}
.s-band + .s-band{border-top:0}

/* ══ COVERFLOW · FORKED FROM launchkits.dev, 2026-08-30 ══════════════════════════════
   Operator: "fork over exactly the launchkits.dev carousel, exact look and everything,
   appropriated to freightprobe."
   ⭐ NOT eyeballed. The geometry was READ OFF THE LIVE PAGE by decoding the computed
   matrix3d of every visible card, so this is the same curve rather than something that
   resembles it. Measured, per offset from centre:
       d=0   x 0      scale 1.00  rotateY 0    opacity 1.0  blur 0      z 50
       d=±1  x ±310   scale 0.87  rotateY ∓6   opacity 0.7  blur 1.2px  z 40
       d=±2  x ±620   scale 0.74  rotateY ∓12  opacity 0.4  blur 2.4px  z 30
   perspective 1200px (from the -1/1200 term), transition .8s cubic-bezier(.16,1,.3,1),
   card 340px rising to 380px. The blur is what makes it read as depth rather than as
   scaling, and it is the part an eyeballed copy always leaves out.
   ⛔ Re-palettes to freightprobe tokens. Nothing here carries a figure, so §3.4's
   "nothing that carries information animates" is respected: this moves CARDS, never data. */
/* ⛔ FULL-BLEED STAGE. On launchkits the flanking cards run PAST the content column and
   clip at the viewport, which is what makes the row read as a deck continuing off-screen
   rather than as three cards in a box. Ours was nested in `.wrap` (1140px) and clipped at
   the measure, so the d=±2 cards were cut in half and the depth effect died at the edge.
   The 100vw breakout is calculated from the element's own left edge, so it works wherever
   the component is placed instead of assuming it sits in a particular container. */
/* ⛔ 100vw IS WIDER THAN THE PAGE WHENEVER A SCROLLBAR EXISTS, and the difference becomes
   HORIZONTAL SCROLL on the whole document. Shipped that way for one deploy on 2026-08-30
   and it was visible instantly as a scrollbar along the bottom, on a property whose own
   2026-08-22 viewport ruling forbids exactly that.
   ⭐ `overflow-x: clip` on the body is the fix, NOT `hidden`: clip does not create a scroll
   container, so `position:sticky` on #site-header keeps working. `hidden` would silently
   kill the sticky nav, which is the trade most people make here without noticing. */
.cf{position:relative;margin-top:1.6rem;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
/* ⚠️ BOTH, and body alone is not enough. Measured after shipping the body-only version:
   `document.documentElement.scrollWidth` 1913 against `clientWidth` 1905, still 8px of
   horizontal scroll, because the overflow is on the ROOT element and a clip on `body`
   does not contain its own parent. `overflow-x` on `html` is what the browser uses for
   the document scrollport. Still `clip`, never `hidden`, so sticky survives. */
html,body{overflow-x:clip}
.cf-stage{position:relative;height:420px;perspective:1200px;overflow:hidden}
.cf-card{position:absolute;top:0;left:50%;width:340px;margin-left:-170px;
  transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .8s cubic-bezier(.16,1,.3,1),filter .8s cubic-bezier(.16,1,.3,1);
  will-change:transform,opacity}
@media(min-width:640px){.cf-card{width:380px;margin-left:-190px}}
.cf-card .cf-inner{display:flex;flex-direction:column;height:400px;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--paper);box-shadow:0 18px 46px -30px color-mix(in srgb,var(--text) 70%,transparent)}
.cf-body{padding:1.35rem 1.4rem 1.1rem;flex:1}
.cf-k{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--accent);display:block;margin-bottom:.5rem}
.cf-h{font-family:var(--display);font-size:1.42rem;font-weight:700;letter-spacing:-.015em;
  line-height:1.15;margin-bottom:.55rem}
.cf-p{font-size:.88rem;color:var(--muted-ink);line-height:1.55}
.cf-go{display:inline-flex;align-items:center;gap:.4rem;margin:0 1.4rem 1.2rem;
  font-size:.82rem;font-weight:600;color:var(--on-accent);background:var(--accent);
  padding:.5rem 1rem;border-radius:999px;text-decoration:none;align-self:flex-start}
.cf-go:hover{background:color-mix(in srgb,var(--accent) 84%,var(--text))}
/* the coloured foot: launchkits' cards end in a tinted panel carrying an icon and a chip.
   Ours carries the hue ROLE of the thing the card is about, so colour stays meaningful. */
.cf-foot{height:96px;background:color-mix(in srgb,var(--tint,var(--accent)) 16%,var(--paper));
  border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  padding:0 1.4rem}
.cf-dot{width:34px;height:34px;border-radius:9px;background:color-mix(in srgb,var(--tint,var(--accent)) 34%,var(--paper));
  border:1px solid color-mix(in srgb,var(--tint,var(--accent)) 45%,var(--paper))}
.cf-chip{font-family:var(--mono);font-size:.68rem;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:.28rem .7rem;color:var(--muted-ink)}
.cf-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:60;
  width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--paper);
  cursor:pointer;display:grid;place-items:center;color:var(--muted-ink);
  box-shadow:0 6px 18px -12px color-mix(in srgb,var(--text) 70%,transparent)}
.cf-nav:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.cf-prev{left:.25rem}.cf-next{right:.25rem}
.cf-dots{display:flex;gap:.4rem;justify-content:center;margin-top:1.1rem}
.cf-dots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:color-mix(in srgb,var(--text) 18%,transparent);transition:width .3s ease,background .3s ease}
.cf-dots button[aria-current="true"]{width:26px;background:var(--accent)}
@media(prefers-reduced-motion:reduce){.cf-card{transition:none}}

/* ── §3.4 · nothing that carries information animates ─────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}