/* ───────────────────────────────────────────────────────────
   RKK Studio · Type + Ground foundation · v1 (2026-08-30)
   The single source of truth for typefaces and palette.
   Introduced in the typography rollout: Erode (display) /
   Literata (text) / iA Writer Mono (apparatus), on the white
   ground. Load AFTER protect.css, BEFORE each page's inline
   <style>. Pages keep layout tokens (--edge, --ease, …) local.
   Fonts are self-hosted in /fonts/ — Erode ships under the ITF
   Free Font License v2.0 and MUST NOT be subset or re-encoded.
   ─────────────────────────────────────────────────────────── */

/* ── Faces ── */
@font-face { font-family:'Erode'; src:url('../fonts/Erode-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Erode'; src:url('../fonts/Erode-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Literata'; src:url('../fonts/Literata-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Literata'; src:url('../fonts/Literata-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Literata'; src:url('../fonts/Literata-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Literata'; src:url('../fonts/Literata-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'iA Writer Mono'; src:url('../fonts/iAWriterMonoS-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'iA Writer Mono'; src:url('../fonts/iAWriterMonoS-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'iA Writer Mono'; src:url('../fonts/iAWriterMonoS-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
/* The hand: The Girl Next Door (Kimberly Geswein, SIL OFL 1.1, fonts/TheGirlNextDoor-OFL.txt). Chosen 2026-10-01, replaces Caveat.
   One weight only, so the same file answers 400 and 600 (no faux bold). size-adjust 85% keeps Caveat's footprint so every tuned size still fits. */
@font-face { font-family:'Girl Next Door'; src:url('../fonts/TheGirlNextDoor-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; size-adjust:85%; }
@font-face { font-family:'Girl Next Door'; src:url('../fonts/TheGirlNextDoor-Regular.woff2') format('woff2'); font-weight:600 700; font-style:normal; font-display:swap; size-adjust:85%; }

:root {
  /* ── Type tokens ── */
  --display: 'Erode', Georgia, serif;
  --serif:   'Literata', 'Iowan Old Style', Georgia, serif;
  --mono:    'iA Writer Mono', ui-monospace, Menlo, monospace;
  --hand:    'Girl Next Door', 'Bradley Hand', 'Marker Felt', cursive;

  /* ── Ground: paper white (chosen 2026-08-30; replaces cream) ── */
  --paper:     #FCFCFA;
  --paper-2:   #F3F3F0;
  --paper-3:   #E9E9E4;
  --ink:       #111110;
  --ink-2:     #2C2B28;
  --muted:     #8A867D;
  --rule:      #1A1A18;
  --rule-soft: rgba(17,17,16,0.16);
  --red:       #E03A1F;

  /* ── Mono ladder (TYPE-SPEC: three tiers, nothing else) ── */
  --mono-a: 11px;  --mono-a-track: 0.22em;  /* masthead, stamps, folios */
  --mono-b: 10px;  --mono-b-track: 0.18em;  /* meta, dates, marginalia, footnotes */
  --mono-c: 9px;   --mono-c-track: 0.16em;  /* caption metadata, plate codes */

  /* ── One reading size ── */
  --text: clamp(0.98rem, 1.05vw, 1.05rem);
}

/* ── Diet utilities: what leaves mono lands on one of these ── */
/* Label register (ex mono-caps labels/legends/rubrics): true small caps via Literata smcp. */
.sc-label {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  font-variant-caps: small-caps;
  text-transform: lowercase;
  color: var(--ink-2);
}
.sc-label--red { color: var(--red); }
.sc-label--muted { color: var(--muted); }

/* Kicker/aside register (ex mono kickers under titles, hints): quiet serif italic. */
.kick-note {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--muted);
}

/* Interactive register (ex mono buttons/nav/chips): serif small caps, geometry unchanged. */
.ui-type {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  font-variant-caps: small-caps;
  text-transform: lowercase;
}

/* Live-ticking numerals: Erode has no tabular figures — tick in Literata italic instead. */
.num-live {
  font-family: var(--serif);
  font-style: italic;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Masthead instrument (2026-09-24, js/chrome.js) ──
   Right side of every masthead: Bengaluru time, New York time, search.
   Replaces the visitor's own date/time and the "Studio Live" pill. */
.masthead .mh-clock { display: inline-flex; align-items: baseline; gap: 0.5em; white-space: nowrap; }
.masthead .mh-clock b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.masthead .mh-search {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin: -6px -6px -6px 0.2rem;
  color: var(--ink); border-radius: 50%; text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.masthead .mh-search svg { width: 15px; height: 15px; display: block; }
.masthead .mh-search:hover, .masthead .mh-search:focus-visible { color: var(--paper); background: var(--red); outline: none; }
/* Phones: the masthead folds to one line and hides its right side
   (css/phone.css); keep the search glass, drop the clocks. */
@media (max-width: 640px) {
  body .masthead .right { display: flex !important; flex: 0 0 auto; gap: 0; }
  body .masthead .right > :not(.mh-search) { display: none !important; }
  body .masthead .mh-search { width: 44px; height: 44px; margin: 0 -10px 0 0; }
  body .masthead .center { display: none !important; }
  body .masthead .left a { white-space: nowrap; }
  body .masthead { display: flex !important; align-items: center; justify-content: space-between; gap: 0.8rem; }
}
/* Tape items that are links: same colour as the band, underline on hover;
   the band pauses under the pointer so a title can be caught. */
.tape.tape-live:hover .tape-track { animation-play-state: paused; }
.tape .tape-track a { color: inherit; text-decoration: none; }
.tape .tape-track a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
/* The news slot in the masthead centre (text set once in js/chrome.js). */
.masthead .center .mh-news { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.masthead .center .mh-news:hover { color: var(--red); border-bottom-color: var(--red); }
/* On the search page the glass is where you already are. */
.masthead .mh-search[aria-current="page"] { color: var(--red); pointer-events: none; }

/* ── One highlight, red, on every page (2026-09-29) ──
   Several rooms had no selection colour of their own and fell back to the
   browser's blue. Selection, search marks and keyboard focus now share the
   site red everywhere. */
::selection { background: var(--red, #E03A1F); color: var(--paper, #FCFCFA); }
::-moz-selection { background: var(--red, #E03A1F); color: var(--paper, #FCFCFA); }
mark { background: none; color: inherit; box-shadow: inset 0 -0.14em 0 var(--red, #E03A1F); }
:focus-visible { outline-color: var(--red, #E03A1F); }
html { -webkit-tap-highlight-color: rgba(224, 58, 31, 0.18); }

/* 2026-09-30 · cursor lag. The paper grain is a fixed, full-screen layer
   on every page; with mix-blend-mode: multiply the browser re-blended the
   whole screen on every pointer and scroll frame, under a cursor dot that
   is itself blended. Dark grain at low alpha looks the same blended
   normally. The dot now follows the pointer exactly (no easing) and gets
   its own layer. */
body::before { mix-blend-mode: normal !important; }
.cursor { will-change: transform; }