/* mutinoise — the two grounds.
   ONE file, linked by every page, so a colour can never drift between them (the same law the
   app's emboss follows: derive, never duplicate).

   LIGHT is Bone #F8F4EC — the single off-white behind the app, the mark and the cloth.
   DARK is the atelier ground: the dark a sheet of paper is judged against, so the warmth in the
   ink still reads. Not a blue-grey "night mode" — the same warm family, turned down. Every value
   below sits on Bone's own hue (~40°), so light and dark are one palette seen at two exposures.

   BONE IS PRIMARY. The page opens on paper for everyone — it does NOT follow the reader's OS.
   That is deliberate: the off-white is the brand's ground, the thing the app, the mark and the
   cloth all stand on, so it is what a first visit must show. The dark room is a CHOICE, offered by
   the lamp and remembered once taken — an option, never an assumption made on someone's behalf.

   HOW IT RESOLVES, in order:
     1. :root               — Bone. The default, for everyone, always.
     2. :root[data-theme=…] — the reader's own choice, taken at the lamp and kept.

   (This header comment was never closed. CSS comments do not nest, so the FIRST `*/` inside the
   block below — the one after "the ground — Bone" — was closing it instead, which left the whole
   Bone palette either commented out or as orphan declarations outside any selector. The default
   ground in the shared file has therefore never once applied; every page has been carrying its own
   inline copy, which is precisely the duplication this file opens by forbidding.) */
:root{
  --paper:#f8f4ec;   /* the ground — Bone */
  --raised:#f2ede1;  /* a surface lifted off it (the gate's pills) */
  --ink:#221e17;     /* headings, the mark */
  --body:#40392f;    /* running text */
  --dim:#6f665b;     /* secondary — dates, meta, nav */
  --faint:#a79d8b;   /* hints, the quietest line */
  --hair:#ddd3c1;    /* rules + ornament, never text */
  --focus:#6f665b;
  color-scheme:light;
}

/* the gate (index.html) keeps its own names — the pills are objects with their own material */
:root{
  --pill:#f2ede1; --soft:#7d7259; --deep:#473f30; --muted:#9E9377;
  /* THE CAST — the shadow a pill throws on the table. Warm ink, never black: a cream ground lit
     warm cannot throw a grey shadow. --lift is the same shadow once the pill rises to meet you. */
  --cast:rgba(92,78,44,.26); --lift:rgba(92,78,44,.30); --accent:#cda06f;
  /* the hidden dopamine note is a dark scrim in EITHER room, so it carries its own pair */
  --egg-scrim:rgba(24,21,16,.975); --egg-line:#e8dfce; --egg-dim:#8f8676;
}


/* ── THE TYPE SCALE ──
   Before this existed the site had nineteen font-size declarations and nineteen distinct values —
   not one of them repeated — in three units (px, pt, rem) and three differently-shaped clamp()s,
   some keyed to vh and one to vw. That is not a scale you can be slightly off; it is nineteen
   separate decisions, which is exactly what "the sizes feel random" is the sound of.

   So there is one number, and every size on every page is a step of it. The ratio is 1.25 — the
   major third: wide enough that two neighbouring steps are visibly different, tight enough that a
   page can use five of them without shouting. One typeface, one ratio.

   --t is the base, and it is the ONLY thing a page overrides. A scrolling document keeps it fixed,
   because a paragraph's size should not depend on the height of the window it happens to be read
   in. The machine (home.html) makes it fluid instead, because there each floor is exactly one
   screen and the type has to fit the room it is standing in. Same ladder, two footings. */
:root{
  --t: 1.0625rem;                          /* documents: 17px, and it stays 17px */
  --t-3xs: calc(var(--t) * 0.512);         /* 1.25^-3 — floor labels, the hint */
  --t-2xs: calc(var(--t) * 0.64);          /* 1.25^-2 — citations, apparatus */
  --t-xs:  calc(var(--t) * 0.8);           /* 1.25^-1 — captions, footers */
  --t-m:   var(--t);                       /* 1       — running text */
  --t-l:   calc(var(--t) * 1.25);          /* 1.25^1  — the lede */
  --t-xl:  calc(var(--t) * 1.5625);        /* 1.25^2  — sub-headings */
  --t-2xl: calc(var(--t) * 1.953125);      /* 1.25^3  — headings */
  --t-3xl: calc(var(--t) * 2.44140625);    /* 1.25^4  — section titles */
  --t-4xl: calc(var(--t) * 3.0517578125);  /* 1.25^5  — display, once per page */
}

/* ── THE SECOND ROOM: PHOSPHOR ──
   The dark is not a dimmed version of the paper. It is a screen from before screens pretended to be
   paper — a terminal, which is the honest ancestor of a thing whose letters are sealed with
   post-quantum cryptography. The app stays calm and Bone; the website is allowed to show off. That
   split is already the law here: the art, the site and the print may be loud, the app never is.

   TUNED, not literal. True #00FF00 on #000000 measures 15.3:1 and is still miserable to read: at
   100% saturation it halates — the glow bleeds past the letterform and leaves afterimages. Green
   terminals were a hardware accident (P1 phosphor was cheap and persistent); amber was what people
   who read all day actually chose. So the green here runs at ~48% saturation on a near-black that
   carries a green cast rather than pure black, which kills the halation and keeps the character.

   Measured on the ground, every value:
     headings  14.91:1 AAA      running text 11.02:1 AAA   (the warm dark managed 10.16)
     meta/nav   6.05:1 AA       the one pop  14.91:1 AAA
   Contrast was Filip's argument for this and the numbers back him: it reads better than what it
   replaces. */
:root[data-theme="dark"]{
  --paper:#060c08;   /* near-black with a green cast — pure black is what halates */
  --raised:#0d1710;
  --ink:#a6f0c2;     /* 14.91:1 */
  --body:#6fd694;    /* 11.02:1 — better than the warm dark it replaces */
  --dim:#4e9e6d;     /*  6.05:1 */
  --faint:#38774f;   /* hints and ornament only, never running text */
  --hair:#16311f;
  --focus:#39ff8c;
  color-scheme:dark;

  /* the pills are pressed from the dark, same trick as before: the ground plus a constant on every
     channel, so the hue is untouched and only the lightness rises */
  --pill:#0d1710; --soft:#6fd694; --deep:#a6f0c2; --muted:#4e9e6d;

  /* THE CAST, IN A DARK ROOM. A black shadow on near-black is nothing. A lit object on a dark table
     does not darken it, it BLOOMS onto it — so the pill's cast becomes phosphor bleed. Same
     geometry, opposite physics. */
  --cast:rgba(57,255,140,.13); --lift:rgba(57,255,140,.22);
  --accent:#39ff8c;
  /* the molecule goes phosphor too — it is the one place the app names the thing it refuses,
     and on a terminal ground that reads as a readout rather than an illustration */
  --egg-scrim:rgba(3,8,5,.976); --egg-line:#6fd694; --egg-dim:#4e9e6d;
}

/* CRT bloom — display type only. On a real tube the beam overshoots the glyph and glows; that is
   the whole texture of this room. It never touches running text, where the same effect is exactly
   what makes phosphor tiring to read. */
:root[data-theme="dark"] .q,
:root[data-theme="dark"] .lt,
:root[data-theme="dark"] .legal h2{ text-shadow:0 0 22px rgba(57,255,140,.20) }
@media (prefers-reduced-motion:reduce){ :root[data-theme="dark"] .q{ text-shadow:none } }

/* THE PILLS IN THE DARK.
   They are pressed from the dark itself: --pill is the ground plus a constant on every channel,
   which is the same trick the app's emboss uses — adding equally preserves max-minus-min, so the
   HUE is untouched and only the lightness rises. The pill therefore reads as the same material
   lifted into the light, never as a second colour.

   The press keeps its meaning by inverting: --ink is the LIGHT one in the dark, so
   `.pill:active .face` fills bright and `.letter` drops to --paper. In the light room a press
   inks the pill; in the dark room it lights it. Same gesture, same physics, opposite sign. */
:root[data-theme="light"]{
  --paper:#f8f4ec;
  --raised:#f2ede1;
  --ink:#221e17;
  --body:#40392f;
  --dim:#6f665b;
  --faint:#a79d8b;
  --hair:#ddd3c1;
  --focus:#6f665b;
  color-scheme:light;

  --pill:#f2ede1; --soft:#7d7259; --deep:#473f30; --muted:#9E9377;
  /* Restated, not inherited. An explicit choice must beat the OS media query for EVERY token it
     touches — leave one out and it keeps the other room's value. That is how the light gate ended
     up throwing the dark room's black shadow. */
  --cast:rgba(92,78,44,.26); --lift:rgba(92,78,44,.30); --accent:#cda06f;
  /* the hidden dopamine note is a dark scrim in EITHER room, so it carries its own pair */
  --egg-scrim:rgba(24,21,16,.975); --egg-line:#e8dfce; --egg-dim:#8f8676;
}

/* the ground changes like a room at dusk, not like a switch */
html,body{ transition:background-color .5s ease, color .5s ease }
@media (prefers-reduced-motion:reduce){ html,body{ transition:none } }

/* ── THE LAMP ──
   The control is a dot, because the mark is a dot: an open ring while the page is paper, a filled
   disc once the ink takes over. No sun, no moon, no switch — the same object in two states, which
   is the whole idea. It sits quiet until you look for it. */
.lamp{
  position:fixed; top:max(18px,env(safe-area-inset-top)); right:18px; z-index:60;
  appearance:none; -webkit-appearance:none; background:none; border:0; padding:10px; margin:0;
  cursor:pointer; line-height:0; -webkit-tap-highlight-color:transparent;
  opacity:.42; transition:opacity .3s ease;
}
.lamp:hover,.lamp:focus-visible{ opacity:1 }
.lamp:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:999px }
.lamp .bulb{
  display:block; width:15px; height:15px; border-radius:999px;
  border:1.5px solid var(--dim); position:relative;
  transition:border-color .35s ease;
}
.lamp .bulb::after{
  content:""; position:absolute; inset:1.5px; border-radius:999px; background:var(--dim);
  transform:scale(0); transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="dark"] .lamp .bulb::after{ transform:scale(1) }
@media (prefers-reduced-motion:reduce){ .lamp,.lamp .bulb,.lamp .bulb::after{ transition:none } }

/* ── NO BROWSER BLUE, ANYWHERE ──
   A link with no rule of its own falls back to the browser's colour. On the privacy page that was
   rendering rgb(158,158,255) — a periwinkle — which is the ONE hue this brand never uses, sitting
   on the page an App Store reviewer opens. It happened because the link sat outside .legal, so the
   page's own rule never reached it.

   These use :where(), which has ZERO specificity: they cannot fight any rule a page already has.
   They only fill the gaps, so no link can ever fall through to a browser default again. The gate's
   pills are excluded — they are objects, not text.

   The line under a link is the app's hairline, and it warms to the DUST on hover: the one colour
   the whole product allows (it already lives on the & and the nav dot). Firelight through a prism,
   never an LED — and never lilac. */
:where(a:not(.pill)){
  color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--hair);
  transition:border-color .22s ease, color .22s ease;
}
:where(a:not(.pill)):hover{ border-bottom-color:var(--accent) }
:where(a:not(.pill)):focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:2px }

/* ── THE SELECTION IS THE CARET ──
   Dragging over text should speak the app's language, not the operating system's. The caret in
   love&truth is a filled block of ink with the letter knocked out of it — so a selection is simply
   that caret made as wide as the words. Ink ground, paper letters. In the dark room it inverts on
   its own, because --ink is the bright one there: the caret is always the mark, whatever the hour. */
::selection{ background:var(--ink); color:var(--paper); text-shadow:none }
::-moz-selection{ background:var(--ink); color:var(--paper); text-shadow:none }