/* IBM PLEX MONO — the apparatus face, bundled so every visitor sees it and not only the
   machines that happen to have it installed. Regular only: nothing on this site sets mono bold.
   Converted from the app's own TTF, so the web and the phone speak in one voice. */
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-400.woff2) format("woff2"),url(../fonts/ibm-plex-mono-400.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}

/* 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 DUSK: the same sheet, later in the day. Bone's own hue taken down to 3.5% lightness,
   with every other value a tint of Bone toward it — so the two rooms are one palette at two
   exposures, and neither can drift away from the other.

   THE GROUND FOLLOWS THE READER — since the unification of the two switches. Until the lamp is
   touched, the page stands in whichever room the reader's device is in, live (theme.js carries
   the room onto data-theme before first paint, so there is no flash either way). A press of the
   lamp is a CHOICE: kept house-wide under one key, shared by the gate, the machine, the studio
   door and dissector. The old law — Bone for everyone until chosen — flashed paper at a reader
   opening the page at one in the morning; the brand yielded to the reader.

   HOW IT RESOLVES, in order:
     1. :root               — Bone, the brand's ground and the no-JS fallback.
     2. :root[data-theme=…] — set by theme.js: the reader's device until they choose,
                              their own choice ever after.

   (This header comment was once left unclosed, and the note written to explain that then closed it
   in a new way: it quoted the two-character comment-close TOKEN inside itself. CSS comments do not
   nest, so that quotation ended the header right there, mid-sentence — the rest of the prose became
   invalid CSS at the top of the file, and the parser's error recovery swallowed the :root block
   below with it. Every custom property here resolved to nothing, `background:var(--paper)` became
   invalid, and every page fell back to a transparent body — which on a reader in dark mode is black
   text on a black ground. Twice now this file has been broken by a comment ABOUT the comment.
   The rule, then: never write that token in prose here. Say "comment-close" and move on.) */
: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 */

  /* SPACE STEPS ON THE SAME LADDER.
     There is no second system. A margin is not "about two rems" — it is a rung, the same rung the
     type stands on, so the distance between two things is always commensurate with the size of
     them. Before this the site carried 37 distinct spacing values in one file and 30 in another,
     every one chosen by eye; the type had a ratio and the space had nothing. Composition is
     arithmetic, and this is the arithmetic. */
  --s-1: calc(var(--t) * 0.512);           /*  ~8.7px  hairline */
  --s-2: calc(var(--t) * 0.64);            /* ~10.9    */
  --s-3: calc(var(--t) * 0.8);             /* ~13.6    */
  --s-4: var(--t);                         /*  17      one line of text */
  --s-5: calc(var(--t) * 1.25);            /* ~21.3    */
  --s-6: calc(var(--t) * 1.5625);          /* ~26.6    */
  --s-7: calc(var(--t) * 1.953125);        /* ~33.2    */
  --s-8: calc(var(--t) * 2.44140625);      /* ~41.5    */
  --s-9: calc(var(--t) * 3.0517578125);    /* ~51.9    */
  --s-10: calc(var(--t) * 3.814697265625); /* ~64.8    */
  --s-11: calc(var(--t) * 4.76837158203);  /* ~81.0    */
}

/* ── THE SECOND ROOM: DUSK ──
   The dark is not a second design. It is the SAME TWO COLOURS at a different exposure: the ground
   is Bone's own hue taken down to 3.5% lightness, and every other value in the room is Bone tinted
   toward that ground. Nothing here was invented — the palette is derived, so the dark room cannot
   drift away from the light one.

   WHY IT IS NOT GREEN ANY MORE. The phosphor terminal was the right costume for a page that
   argues, and the wrong one for anything a person reads their own words in: green ink makes the
   sentences belong to the machine. There is a second reason, and it is the brand's own name. The
   circadian response peaks near 480nm; green at 555nm still drives it hard, while amber past
   590nm barely does. A product called mutinoise — "the world seen as nature: connected, slow,
   circadian" — going green after dark was arguing against itself. Warm is not a preference here,
   it is the claim being consistent.

   MEASURED ON THE GROUND, every value, and it beats what it replaces:
     headings   18.12:1 AAA   (phosphor managed 14.91)
     running    10.98:1 AAA
     meta/nav    6.01:1 AA
     the accent  8.38:1 — and it is the SAME amber as the light room, #cda06f, because one
                 product should not need two accents. */
:root[data-theme="dark"]{
  --paper:#0b0907;   /* Bone's hue at 3.5% — near black, still warm, kind to an OLED */
  --raised:#181614;
  --ink:#f8f4ec;     /* 18.12:1 — Bone itself. Your words keep your colour. */
  --body:#c4c0ba;    /* 10.98:1 */
  --dim:#908d87;     /*  6.01:1 */
  --faint:#5f5c58;   /*  2.99:1 — ornament only, never running text */
  --hair:#363430;    /*  1.60:1 — rules and ticks */
  --focus:#e9b877;
  color-scheme:dark;

  /* the pills are pressed from the dark: the ground plus a constant on every channel, so the hue
     is untouched and only the lightness rises */
  --pill:#181614; --soft:#c4c0ba; --deep:#f8f4ec; --muted:#908d87;

  /* 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 warm bleed. Same
     geometry, opposite physics. */
  --cast:rgba(248,244,236,.10); --lift:rgba(248,244,236,.17);
  --accent:#cda06f;
  /* the hidden note is a dark scrim in EITHER room, so it carries its own pair */
  --egg-scrim:rgba(6,5,4,.976); --egg-line:#e8dfce; --egg-dim:#908d87;
}

/* THE BLOOM — display type only. A warm light source overshoots its edge the way a filament does;
   it never touches running text, where the same effect is exactly what makes a screen tiring. */
:root[data-theme="dark"] .q,
:root[data-theme="dark"] .lt,
:root[data-theme="dark"] .legal h1{ text-shadow:0 0 22px rgba(248,244,236,.13) }
@media (prefers-reduced-motion:reduce){ :root[data-theme="dark"] .q{ text-shadow:none } }

: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 }