/* ══════════════════════════════════════════════════════════════════════════
   METARCH LIBRARY · shared stylesheet · 22 Sep 2026

   ONE FILE FOR THE LIBRARY HUB, EVERY ARTICLE AND EVERY GLOSSARY PAGE.
   It replaces /glossary/glossary.css and is a strict SUPERSET of it: every
   class those five term pages already use is still here, unchanged in
   behaviour, so their markup did not have to be touched to move across.

   ⛔ ZERO JAVASCRIPT ON ANY PAGE THAT USES THIS, AND THAT IS THE POINT.
   Several AI crawlers do not run scripts, so anything drawn by one is fetched
   as an empty shell and can never be quoted. Being quotable IS the job here.

   ⛔ PATHS ARE ../ AND THAT IS CORRECT FROM EVERY FOLDER. A url() inside a
   stylesheet resolves against the STYLESHEET's address, never the page's. This
   file lives in /ASSETS/, so ../ASSETS/fonts/ is /ASSETS/fonts/ whether the
   page calling it sits in /library/, /glossary/ or the site root.

   THE DESIGN RULES THIS FOLLOWS, from CLAUDE.md:
     2px corners everywhere · flat #FFF200, never a gradient · #030303 page,
     #0c0b09 card, #050505 ground · hairline rgba(240,236,220,0.09) · NO BOXES,
     structure comes from rules and hairlines · Mont 800 at 0.17em tracking
     uppercase for labels · Exodus Display for display type and headline
     numerals · Vollkorn for editorial headlines.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Mont';src:url('../ASSETS/fonts/Mont-Regular.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Mont';src:url('../ASSETS/fonts/Mont-Bold.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'Exodus Display';src:url('../ASSETS/fonts/ExodusDisplay-SharpenBold.woff2') format('woff2');font-weight:normal;font-display:swap;}

/* The same digits-only trick home.html uses. One font file, consulted only for
   0 to 9, so numbers come from Exodus and every letter stays Mont. */
@font-face{font-family:'Exodus Numerals';src:url('../ASSETS/fonts/ExodusDisplay-SharpenBold.woff2') format('woff2');
  font-weight:100 900;font-display:swap;unicode-range:U+0030-0039;}

/* ⛔ METRIC-MATCHED STAND-INS, COPIED FROM home.html. These are stretched
   system fonts measured to occupy the SAME space as the real file, so the page
   does not jump when the real one arrives. Phase 28.1 measured these numbers
   against the actual files. If a brand font file is ever replaced, they have to
   be measured again or the layout shift that phase removed comes straight back. */
@font-face{font-family:'Mont Fallback';src:local('Arial');size-adjust:108.97%;ascent-override:91.77%;descent-override:34.87%;line-gap-override:0%;}
@font-face{font-family:'Exodus Fallback';src:local('Arial');size-adjust:130.78%;ascent-override:77.23%;descent-override:14.53%;line-gap-override:0%;}
@font-face{font-family:'Vollkorn Fallback';src:local('Georgia');size-adjust:97.69%;ascent-override:97.25%;descent-override:45.04%;line-gap-override:0%;}

*{margin:0;padding:0;box-sizing:border-box;}

:root{
  --gold:#FFF200;
  --ink:#f3eede;
  --mut:rgba(243,238,222,.5);
  --dim:rgba(243,238,222,.34);
  --bg:#030303;
  --card:#0c0b09;
  --ground:#050505;
  --line:rgba(240,236,220,0.09);
  --line2:rgba(240,236,220,0.16);
  --plaque:#E2B33C;
  /* ══ THE PLINTH. Copied byte for byte from home.html, where it is defined at
     :root and described as "the chalk-over-red line that sits under the mark in
     the app header". It is the house separator: 1px chalk, a 2px gap, then a
     2px red. The landing page, the app and now the Library all carry ONE
     device rather than three that nearly match.
     ⛔ DO NOT INVENT A VARIANT. If the build ever changes it changes in
     home.html first, then here. */
  --plinth-chalk:#EDE7DA;
  --plinth-red:#B01B24;
  --plinth:linear-gradient(180deg,var(--plinth-chalk) 0 1px,transparent 1px 3px,var(--plinth-red) 3px 5px);
  --ui:'Mont','Mont Fallback',-apple-system,sans-serif;
  --disp:'Exodus Display','Exodus Fallback','Mont',sans-serif;
  --serif:'Vollkorn','Vollkorn Fallback',Georgia,'Times New Roman',serif;
  /* THE LOGO IS ONE LINE AND THIS IS IT. Copied byte for byte from :root in
     home.html. Never trace, redraw or re-export the mark: paint this. */
  --mx-mark:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%20756'%3E%3Cpath%20d='M424,306,537,219,618,154,424,0ZM923,69,649,226,501,417,379,259,351,225,156,114,117,90,78,69,499,754ZM97,146,79,436,0,756,188,616,196,496,376,634ZM903,146,881,181,659,569,624,633,803,496,813,616,1000,756,921,436Z'/%3E%3C/svg%3E");
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Exodus Numerals',var(--ui);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:760px;margin:0 auto;padding:0 24px;}
/* The hub breathes wider than an article. A reading column wants roughly 70
   characters; an index of cards does not, and forcing one into the other is
   what made the old glossary index look like a list of nothing. */
.wrap-w{max-width:1040px;margin:0 auto;padding:0 24px;}

/* ── HEADER ─────────────────────────────────────────────────────────────── */

.gh{border-bottom:1px solid var(--line);padding:22px 0;}
.gh .wrap,.gh .wrap-w{display:flex;align-items:center;justify-content:space-between;gap:16px;}

/* ══ THE BRAND LOCK. Structure and rules taken from home.html's .brand so the
   Library header is the SAME object as the landing page header, not a smaller
   imitation of it: shield, plinth under the shield, a yellow hairline divider,
   then the wordmark over "For YouTube". */
.gh-lock{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);}
.gh-markcol{display:flex;flex-direction:column;align-items:center;gap:6px;}
/* The shield. -webkit-mask plus a flat fill is what makes every mark on every
   surface follow the ink colour of the thing it sits in. */
.gh-mk{width:28px;height:21px;background-color:var(--gold);
  -webkit-mask:var(--mx-mark) no-repeat center/contain;
  mask:var(--mx-mark) no-repeat center/contain;flex:none;
  filter:drop-shadow(0 0 14px rgba(255,242,0,.3));}
/* ⛔ THE PLINTH FOLLOWS THE MARK and must never be given a width of its own.
   align-self:stretch makes it exactly as wide as the column, and the column is
   as wide as the shield, so when the shield narrows on a phone the plinth
   narrows with it instead of overhanging. An empty span contributes no width,
   so it can never widen the column. home.html's reasoning, carried across. */
.gh-plinth{align-self:stretch;height:4px;flex:none;margin:1px 0 0;
  background:linear-gradient(180deg,var(--plinth-chalk) 0 1px,transparent 1px 2px,var(--plinth-red) 2px 4px);}
.gh-div{width:1px;align-self:stretch;background:rgba(255,242,0,.25);}
.gh-txt{display:flex;flex-direction:column;gap:5px;}
.gh-wm{font-family:var(--disp);font-size:19px;font-weight:normal;letter-spacing:.42em;
  text-transform:uppercase;color:#EDE7DA;line-height:1;}
.gh-fy{font-family:var(--ui);font-size:8.5px;font-weight:800;letter-spacing:.36em;
  text-transform:uppercase;color:rgba(243,238,222,.36);padding-left:2px;white-space:nowrap;}

/* ══ THE PLINTH AS A SEPARATOR. The house device doing the job a plain
   hairline was doing before. Centred under a centred heading. */
.plinth{display:block;width:120px;height:5px;margin:0 auto 34px;background:var(--plinth);}
.plinth-l{display:block;width:58px;height:5px;margin:0 0 20px;background:var(--plinth);}
/* Between sections, full width, so the page reads as chapters rather than one
   long scroll. The gap above is larger than the gap below on purpose: the rule
   belongs to the section it introduces. */
.plinth-w{display:block;width:100%;height:5px;margin:58px 0 0;background:var(--plinth);}

.gh-back{font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--mut);text-decoration:none;}
.gh-back:hover{color:var(--gold);}

/* The small in-header trail: Library / Glossary. Rules, not a box. */
.gh-nav{display:flex;align-items:center;gap:20px;}
.gh-nav a{font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--mut);text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent;}
.gh-nav a:hover{color:var(--ink);}
.gh-nav a.on{color:var(--gold);border-bottom-color:var(--gold);}

/* ── PAGE HEAD ──────────────────────────────────────────────────────────── */

main{padding:52px 0 0;}

.eyebrow{font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;}

h1{font-family:var(--disp);font-weight:normal;font-size:clamp(30px,5.4vw,46px);
  line-height:1.08;letter-spacing:-0.01em;margin-bottom:20px;}

/* ══ THE PAGE HEAD IS CENTRED ON EVERY PAGE. Kai, 22 Sep 2026. The heading and
   its label sit centred over a centred plinth; the body underneath stays left,
   because centred prose stops being readable after about two lines. */
.phead{text-align:center;margin-bottom:34px;}
.phead h1{margin-left:auto;margin-right:auto;max-width:20ch;margin-bottom:18px;}
.phead .plinth{margin-bottom:0;}

/* THE ANSWER SITS FIRST AND IT IS BUILT TO BE LIFTED. An AI retrieves chunks,
   not pages, so the first thing under the heading has to BE the answer rather
   than build towards it. This is the paragraph that gets quoted. */
.lede{font-size:18px;line-height:1.6;color:var(--ink);padding-bottom:26px;
  border-bottom:1px solid rgba(255,242,0,.22);margin-bottom:30px;}
.lede strong{color:var(--gold);font-weight:700;}

/* ── THE HUB HERO ───────────────────────────────────────────────────────── */

/* ⛔ NO BOX. Kai: "slapping it all in a box feels restrictive and common."
   CENTRED on Kai's instruction, 22 Sep 2026, and the plinth does the holding
   rather than a hairline: it is the house device and it belongs here. */
.hero{padding:64px 0 46px;text-align:center;}
.hero .eyebrow{color:var(--gold);}
.hero h1{font-size:clamp(38px,7vw,74px);margin:0 auto 22px;max-width:16ch;}
/* The editorial serif voice, the same job Vollkorn does on home.html: a human
   sentence among the machinery. Centred, and held to a readable measure. */
.hero .sub{font-family:var(--serif);font-size:clamp(17px,2.05vw,20px);
  line-height:1.62;color:rgba(243,238,222,.84);max-width:62ch;margin:0 auto;}
.hero .sub + .sub{margin-top:17px;}
.hero .sub b{color:var(--gold);font-weight:600;}
.hero .sub em{color:var(--gold);font-style:italic;}

/* The count strip. Centred under the hero, divided by yellow hairlines rather
   than by empty space, so it reads as one instrument panel. */
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:0;padding:38px 0 0;}
.facts div{padding:6px 34px;border-left:1px solid rgba(255,242,0,.22);}
.facts div:first-child{border-left:none;}
.facts b{display:block;font-family:var(--disp);font-size:clamp(26px,4vw,40px);
  font-weight:normal;line-height:1;color:var(--gold);}
.facts span{display:block;font-family:var(--ui);font-weight:700;font-size:9.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--mut);margin-top:10px;}

/* ── SECTIONS ON THE HUB ────────────────────────────────────────────────── */

.sec{padding:46px 0 0;text-align:center;}
.sec-h{margin-bottom:10px;}
.sec-h h2{font-family:var(--disp);font-weight:normal;font-size:clamp(24px,3.8vw,34px);
  line-height:1.15;margin:0 0 14px;padding:0;border:none;}
.sec-h p{font-family:var(--ui);font-weight:700;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px;}
/* The rows themselves stay left aligned. Centred prose is unreadable past a
   line or two, and these carry a sentence each. */
.sec .rows{text-align:left;}

/* THE ARTICLE ROWS. Not cards, not tiles, not boxes: a column of rules, the
   way the app lists channels. The number on the left is the only decoration
   and it comes free from the Exodus numeral range. */
.rows a{display:grid;grid-template-columns:54px 1fr auto;align-items:baseline;gap:0 20px;
  text-decoration:none;color:var(--ink);padding:22px 0;
  border-bottom:1px solid var(--line);}
.rows a:hover{color:var(--gold);}
.rows a:hover .r-n{color:var(--gold);}
.rows a:last-child{border-bottom:none;}
.r-n{font-family:var(--disp);font-size:15px;color:var(--dim);letter-spacing:.02em;}
.r-t{font-family:var(--disp);font-weight:normal;font-size:clamp(17px,2.2vw,21px);
  line-height:1.25;}
.r-d{display:block;font-family:var(--ui);font-size:14px;line-height:1.5;
  color:var(--mut);margin-top:7px;max-width:62ch;}
.r-k{font-family:var(--ui);font-weight:700;font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(255,242,0,.62);white-space:nowrap;padding-top:4px;}

/* ── BODY ───────────────────────────────────────────────────────────────── */

.body p{margin-bottom:17px;color:rgba(243,238,222,.86);}
.body p:last-child{margin-bottom:0;}
.body strong{color:var(--gold);font-weight:700;}
.body em{font-style:italic;color:var(--ink);}

/* ⛔ A LINK INSIDE A PARAGRAPH HAD NO RULE AT ALL. 16 Sep 2026.
   With nothing to paint it, the browser used its own default: blue, on a black
   page, which is close to unreadable. The underline is a hairline in the gold
   rather than the browser underline, so a link reads as a link without cutting
   through the letters. */
.body a{color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(255,242,0,.35);}
.body a:hover{border-bottom-color:var(--gold);}

.body ul,.body ol{margin:0 0 17px 20px;color:rgba(243,238,222,.86);}
.body li{margin-bottom:8px;padding-left:4px;}
.body li::marker{color:var(--gold);}

/* ⛔ EVERY SECTION RULE IS THE PLINTH NOW, NOT A HAIRLINE. Kai, 22 Sep 2026:
   use the red and white lines under the logo as separators all over the
   Library and the glossary, so it reads as structured. The rule is drawn as a
   :before on the heading rather than as a border, because a border cannot be
   58px wide while the heading is full width. */
h2{font-family:var(--disp);font-weight:normal;font-size:clamp(21px,3.2vw,27px);
  line-height:1.2;margin:46px 0 16px;padding-top:26px;position:relative;}
h2:before{content:"";position:absolute;top:0;left:0;width:58px;height:5px;
  background:var(--plinth);}
h2:first-child{padding-top:0;margin-top:0;}
h2:first-child:before{display:none;}

h3{font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold);margin:28px 0 12px;}

/* A PULL QUOTE, in the editorial serif. Used for the one line on a page worth
   stopping at. Held by a gold rule on the left and nothing else. */
.pull{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.6vw,23px);
  line-height:1.45;color:var(--ink);margin:30px 0;padding:4px 0 4px 22px;
  border-left:2px solid var(--gold);}
.pull cite{display:block;font-family:var(--ui);font-style:normal;font-weight:700;
  font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--mut);
  margin-top:12px;}

/* THE ANSWER BLOCK. The paragraph on a page most likely to be lifted whole by
   an AI, marked so it reads as self-contained. Ground colour, hairline, 2px. */
/* ⛔ NOT A BORDERED BOX, AND THAT WAS A CORRECTION. The first build outlined
   this on all four sides, which is exactly what CLAUDE.md rules out: Kai,
   "slapping it all in a box feels restrictive and common." Structure on this
   site comes from rules and hairlines. So the emphasis here is a tonal shift
   plus two hairlines, the same shape the equation block already uses. */
.ans{background:var(--ground);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:20px 22px;margin:24px 0;}
.ans .ans-l{font-family:var(--ui);font-weight:700;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.ans p{margin:0;color:var(--ink);font-size:17px;line-height:1.6;}

/* ── THE LADDER. A table, because a table survives being chunked and a
      paragraph of the same numbers does not. ─────────────────────────────── */

.tbl{width:100%;border-collapse:collapse;margin:22px 0 8px;font-size:15px;}
.tbl th{font-family:var(--ui);font-weight:700;font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(255,242,0,.7);text-align:left;
  padding:0 14px 9px 0;border-bottom:1px solid rgba(255,242,0,.22);}
.tbl td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line);
  color:rgba(243,238,222,.86);vertical-align:top;}
.tbl tr:last-child td{border-bottom:none;}
.tbl .b{font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;}
.tbl .n{color:var(--gold);font-weight:700;white-space:nowrap;}
.tw{overflow-x:auto;}

/* ══ THE TIER CHIPS. 16 Sep 2026. ══════════════════════════════════════════
   Every one of Hyper, Ultra, Mega, Super, Normal and Chalk is a COLOUR in the
   product, and a page that defines the score while ignoring its own colours
   teaches the reader the wrong thing.

   ⛔ THESE VALUES ARE COPIED BYTE FOR BYTE FROM home.html, which took them
   from app.html. app.html IS THE AUTHORITY: scoreTier() and virTier() decide
   the band, mxshTierInk() decides the ink. If a colour ever changes it changes
   in app.html first, then home.html, then here. Do not invent one.

   THE TWO LADDERS ARE DIFFERENT SCALES AND THE SAME COLOURS, on purpose:
     ZYRA, 0 to 100  · virTier()   · 100+ / 90 / 80 / 60 / 35 / below
     Multiples, x    · scoreTier() · 30x / 10x / 5x / 2x / 1x / below
   A 94 score and a 34x multiple are both purple because both are Ultra.

   HYPER IS WHITE WITH RED INK, NOT GOLD. Corrected on home.html 14 Sep for
   exactly this reason. Carried across unchanged. */
.ov-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:2px;
  font-family:var(--disp);font-size:11px;font-weight:700;letter-spacing:.02em;line-height:1;
  background:rgba(240,236,220,.04);border:1px solid rgba(240,236,220,.15);color:#f0ecdc;
  text-transform:uppercase;white-space:nowrap;}
.ov-chip.t-chalk{color:#050505;background:#f0ecdc;border-color:#f0ecdc;}
.ov-chip.t-normal{color:#050505;background:#FFF200;border-color:#FFF200;}
.ov-chip.t-super{color:#fff;background:#3d7cd6;border-color:#5a99f3;box-shadow:0 0 8px rgba(120,180,255,.35);}
.ov-chip.t-mega{color:#fff;background:#d63d3d;border-color:#ff5a5a;box-shadow:0 0 8px rgba(255,107,107,.4);}
.ov-chip.t-ultra{color:#fff;background:#7a3dc8;border-color:#a566ff;box-shadow:0 0 14px rgba(200,150,255,.5);}
.ov-chip.t-sub{color:rgba(240,236,220,.5);background:rgba(240,236,220,.03);border-color:rgba(240,236,220,.15);}
.ov-chip.t-hyper{color:#B01B24;background:#ffffff;border-color:#B01B24;box-shadow:0 0 8px rgba(176,27,36,.45);}

/* The cell a chip sits in. No wrapping, and a touch of room above and below so
   the glow on Ultra and Super is not clipped by the hairline rule. */
.tbl td.c{padding-top:9px;padding-bottom:9px;white-space:nowrap;}

/* ══ THE RAW OUTLIER SCORE. 16 Sep 2026. ═══════════════════════════════════
   The same symbolic shape home.html shows in its score section, in plain HTML
   rather than the home page's flex equation, because an AI crawler reads this
   page as text and a row of nested spans reads as gibberish.

   ⛔ NO NUMBERS. NOT ONE, NOT EVEN A DECOY. home.html carried three decoy ZYRA
   constants behind a CSS blur until 15 Sep, and they came out because blur is
   paint and not privacy: anyone reading the page source had the real shape of
   the thing. The letters M, v, k and s and the two Greek letters are the SHAPE
   and name no constant. If the finished equation is ever shown, it goes in as
   a picture. DO NOT PUT NUMBERS HERE AS TEXT. */
.eq{margin:24px 0 8px;padding:22px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);}
.eq-l{font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--mut);margin-bottom:16px;}
.eq-r{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;}
.eq-t{flex:1 1 170px;min-width:150px;}
/* ⛔ A SERIF, NOT Exodus Display. Exodus has no lowercase, so it rendered the
   formula as MAX(0, A LN V/K) and turned every variable into a capital. In a
   formula the case IS the meaning: v is views and V is nothing. Vollkorn is
   loaded here now, so this is the same stack home.html uses, in full. */
.eq-m{font-family:'Exodus Numerals',var(--serif);
  font-size:21px;color:var(--ink);line-height:1.3;
  padding-bottom:9px;border-bottom:1px solid rgba(255,242,0,.32);margin-bottom:9px;}
/* Variables lean, the way they do in the equation on home.html. */
.eq-m i{font-style:italic;}
/* The two masked constants. Gold, because they are the part that is withheld. */
.eq-m b{color:var(--gold);opacity:.9;font-weight:normal;font-style:italic;}
.eq-c{font-family:var(--ui);font-weight:700;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,242,0,.62);line-height:1.7;}
.eq-p{flex:0 0 auto;font-family:'Exodus Numerals',var(--serif);font-size:21px;
  color:var(--mut);padding-top:1px;}
.eq-n{font-size:14px;color:var(--mut);margin-top:18px;line-height:1.55;}

/* ── THE OTHER TERMS ────────────────────────────────────────────────────── */

/* The plinth again, not a hairline. Same reason as h2. */
.more{margin-top:52px;padding-top:30px;position:relative;}
.more:before{content:"";position:absolute;top:0;left:0;width:58px;height:5px;background:var(--plinth);}
.more-l{font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gold);margin-bottom:16px;}
.more a{display:block;text-decoration:none;color:var(--ink);padding:12px 0;
  border-bottom:1px solid var(--line);font-size:16px;}
.more a:last-child{border-bottom:none;}
.more a:hover{color:var(--gold);}
.more a span{display:block;font-size:13px;color:var(--mut);margin-top:2px;}

/* ── FOOT ───────────────────────────────────────────────────────────────── */

.gf{margin-top:56px;border-top:1px solid var(--line);padding:26px 0 46px;text-align:center;}
.gf p{font-size:13px;color:var(--mut);margin-bottom:9px;}
.gf a{color:var(--gold);text-decoration:none;}
.gf a:hover{text-decoration:underline;}

/* ⛔ THE SELECTOR IS `.gf a.cta` AND NOT `.cta`. 16 Sep 2026.
   `.gf a{color:var(--gold)}` sits a few lines above this one and is a class
   PLUS a type, which outranks a bare `.cta` no matter which is written later.
   So the gold footer-link colour won, painted the label gold on a gold fill,
   and the button rendered as a blank yellow rectangle with the words invisible
   inside it. Kai saw it before anybody tested it.
   This is the cascade trap CLAUDE.md already records: an override wins on
   SPECIFICITY, never on being further down the file. `.gf a.cta` outranks it. */
.gf a.cta{display:block;width:fit-content;margin:26px auto 0;
  background:var(--gold);color:#070707;
  font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.17em;
  /* The trailing gap after the last letter drags a letter-spaced centred label
     left of centre. text-indent equal to the letter-spacing puts it back. */
  text-indent:.17em;text-transform:uppercase;text-decoration:none;
  text-align:center;padding:14px 26px;border-radius:2px;}
.gf a.cta:hover{background:#fffa4d;color:#070707;text-decoration:none;}

@media (max-width:760px){
  .rows a{grid-template-columns:1fr;gap:0;}
  .r-n{display:none;}
  .r-k{padding-top:9px;}
  .sec-h{flex-direction:column;align-items:flex-start;gap:6px;}
  .sec-h p{white-space:normal;}
}

@media (max-width:600px){
  .wrap,.wrap-w{padding:0 18px;}
  main{padding:36px 0 0;}
  .hero{padding:40px 0 32px;}
  .lede{font-size:17px;}
  .facts{gap:0 34px;}
  .gh-nav{gap:14px;}
  /* ON A PHONE THE EQUATION IS ONE COLUMN. Left to wrap on its own, each term
     took a row and the + that followed it was pushed to the far right of that
     same row, reading as a stray mark rather than as an operator. Stacking the
     row puts every + on its own centred line between the terms it joins. */
  .eq-r{flex-direction:column;align-items:stretch;gap:12px;}
  .eq-t{flex:1 1 auto;min-width:0;}
  .eq-p{padding-top:0;text-align:center;}
}

/* ⛔ BELOW ABOUT 485px COULD NOT BE TESTED HERE. 22 Sep 2026.
   Headless Chrome on Windows refuses a viewport narrower than roughly 485
   pixels. Every width from 485 to 1409 WAS measured and has no horizontal
   overflow, but a real phone at 360 or 390 was never rendered. These rules
   exist so the two elements that could not wrap on their own are made to,
   rather than being left at a width nobody checked.

   The header is a flex row holding a logo and three links with no wrap
   instruction. That is the exact pattern that made the whole app slide
   sideways on a phone before 2 Sep. It wraps now.

   The third nav link is dropped on a narrow screen because the logo next to it
   already goes to the same place, so nothing becomes unreachable.

   ⛔ THIS BLOCK SITS AFTER THE 600px BLOCK AND HAS TO STAY THERE. Both apply
   at 480px, they are the same specificity, so whichever is written LAST wins.
   Written above the 600px block, its .facts gap is silently overwritten and
   the rows close up with no spacing. That is the cascade-placement trap in
   CLAUDE.md, and it was made and caught during this build. */
@media (max-width:520px){
  .gh .wrap,.gh .wrap-w{flex-wrap:wrap;row-gap:10px;}
  .gh-nav a:last-child{display:none;}
  /* A grid cannot fail to wrap the way a flex row can. Each column is free to
     shrink to 120px before a new row is taken. */
  .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:4px 26px;}
}