/* ============================================================================
   scripture.css — the Order of KĀLA, set as a scripture of time.  OK-S1
   ----------------------------------------------------------------------------
   Descended from the Kolam prethesis, not from the old site. Ink on paper,
   because that is what the pen actually does and what every note already
   renders as. A justified measure held in a ruled frame, a margin column for
   numerals and marginalia, and the kolam running BETWEEN the verses rather
   than sitting beside them in a box.

   This sheet restyles the existing markup. No copy is touched and no element
   id is moved — sitting.js, cart.js, press-demo.js and day-note.js all reach
   into this DOM and must keep finding it. Ornament is injected by scripture.js.

   Layout contract for a .section:
       ┌──────────────┬────────────────────────────────┐
       │  margin      │  the measure                   │
       │  numeral     │  justified body, plates, rules │
       │  marginalia  │                                │
       └──────────────┴────────────────────────────────┘
============================================================================ */

/* ─── The palette: one ink, one paper, one sky ─────────────────────────── */
:root {
  /* Black and white. Nothing else. The weave is the same black as the
     text because it is the same pen — a faded ground would be a lie about
     what the plotter does. Greys exist ONLY as ruling and as the quiet
     register of captions; there is no tint anywhere. */
  --paper:   #ffffff;
  --paper-2: #ffffff;
  --paper-3: #ffffff;

  --ink:   #000000;     /* the pen */
  --ink-2: #000000;     /* the second voice — weight and size carry it, not tint */
  --ink-3: #3a3a3a;     /* marginalia and captions, still legibly black */
  /* NO GREY. Every line on the leaf is the same black at the same weight as
     the kolam, because it is the same pen. Where a rule was only there to be
     a soft divider it has been deleted outright rather than lightened. */
  --rule:  #000000;
  --rule-2:#000000;
  --hair:  1px;         /* the nib — matches the weave's stroke-width */
  /* Box corner. It was 4px, echoing the 4 mm clip on the plotted sheet — true
     to the paper and wrong for the page: the kolam is nothing but curves, and
     the boxes around it were the only hard corners on the leaf. They round to
     match the drawing now. The plotted note keeps its own 4 mm; this is the
     screen's radius, not the pen's. */
  --r:     14px;

  /* the sky over the press, set live by sky.js. On paper the sky is a wash,
     never a glow — a tint in the ruling and the drop initial, nothing more. */
  --sky: #000000; --sky-dim: #767676; --sky-ink: #000000; --sky-glow: transparent;

  /* This column was widened for a didone, which set far wider than the
     Garamond it had originally been measured against. Crimson Pro is back in
     that Garamond line, so the width is paid for at the type size instead —
     see body font-size. The column stays where it is; moving both at once
     makes the setting impossible to reason about later. */
  --measure: 42rem;     /* the justified column */
  --margin-col: 8rem;   /* where numerals and marginalia live */

  /* Crimson Pro. A book face in the Garamond line, chosen over the didone it
     replaced: the leaf is read, not merely looked at, and a hairline-against-
     mass contrast that rhymes with the kolam at display size fights the eye
     over a long column. This sets quieter and reads longer. The kolam can
     carry the drama; the type no longer competes for it.
     Devanagari is set in Tiro Devanagari Sanskrit, cut specifically for
     Sanskrit: कल / काल come from a hand that means them, not a fallback. */
  --serif: 'Crimson Pro', 'EB Garamond', Garamond, 'Times New Roman', serif;
  --deva:  'Tiro Devanagari Sanskrit', 'Noto Serif Devanagari', serif;
  --mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

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

html {
  scroll-behavior: smooth;
  /* the whole sheet is set in rem, so one number moves every size on the
     leaf together and the proportions survive */
  font-size: 21.6px;
  /* the leaf is never pure white; a scripture is warm */
  background: var(--paper);
}

body {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  /* Crimson Pro sets 13% narrower than the Bodoni it replaced, and carries a
     9% smaller x-height, so at the old 0.95rem it read smaller AND ran fifteen
     more characters to the line — smaller type on a longer line, which is the
     wrong move twice. A hair larger puts the x-height back where Bodoni had it
     and returns the line to within a few characters of its tuned length. The
     measure itself does not move. */
  font-size: 1.05rem;
  line-height: 1.78;
  font-feature-settings: 'kern' 1, 'liga' 1;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

a { color: var(--ink); text-decoration: none; }

::selection { background: #000; color: #fff; }


/* ─── The accents ─────────────────────────────────────────────────────────
   The kolam is no longer a ground. It shows itself in two places the layout
   guarantees are empty — the margin column under each numeral, and the gap
   the sections already open between themselves — and nowhere else. Nothing is
   carved out of the text because nothing is drawn behind it. */
.accent { pointer-events: none; }
.accent svg { display: block; width: 100%; height: auto; color: var(--ink); }


/* The divider, on narrow screens only. A phone is one long column with no
   margins to put anything in; the bands give the scroll its joints. A desktop
   spends its ornament on the hero and stays white the rest of the way down. */
.accent-band {
  max-width: calc(var(--margin-col) + var(--measure) + 3.6rem);
  margin: clamp(2rem, 5vh, 3.2rem) auto 0;
  padding: 0 clamp(20px, 5vw, 56px);
}
@media (min-width: 901px) { .accent-band { display: none; } }

/* ─── The hero field ──────────────────────────────────────────────────────
   The one place the weave still runs. Full bleed within the hero, with the
   mark and every line of type cut out of it — the carving doing what it is
   good at, on a stage rather than in a margin. */
#kala-hero-field {
  /* left and width are set in JS from the measured viewport — see buildHero */
  position: absolute; top: 0; bottom: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
#kala-hero-field svg { display: block; width: 100%; height: 100%; }
.hero { position: relative; }
.hero > *:not(#kala-hero-field) { position: relative; z-index: 1; }

/* ─── The coda ────────────────────────────────────────────────────────────
   Past the colophon: one kolam, the longest the page can afford, beginning as
   dense sikku and thinning as it falls until it dissolves into the mark. It is
   finite. Scroll long enough and it ends. */
#kala-coda {
  position: relative;
  overflow: hidden;
  pointer-events: none;
  overflow-anchor: none;
}
#kala-coda > svg { display: block; width: 100%; height: 100%; }
#kala-coda .coda-mark svg { display: block; width: 100%; height: 100%; color: var(--ink); }

.page-nav, .hero, .section, .foot, .colophon, .kolam-rule { position: relative; z-index: 1; }

/* ─── The running head ─────────────────────────────────────────────────── */
.page-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 15px clamp(18px, 4vw, 38px);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
/* The mark in a page nav — the plotted geometry the hero carries, sized to sit
   beside the link. The rainbow-gradient wordmark it replaced is gone. */
.nav .kala-mark { display: block; width: clamp(84px, 12vw, 116px); height: auto; color: var(--ink); }
.page-nav .logo {
  font-size: .74rem; letter-spacing: .34em; color: var(--ink-2);
  text-transform: uppercase; font-variant: small-caps;
}
.page-nav .nav-right { display: flex; align-items: center; gap: 17px; flex-wrap: nowrap; }
/* The running head stays a row of words — a nav of boxes would be a toolbar,
   and this is a page, not an application. But 21px is half a fingertip.
   The target is an invisible 44px band centred on each word (see
   .nav-hit below): absolutely positioned, so it costs the layout nothing and
   the head measures exactly as it did. Padding would have had to be undone
   with a matching negative margin, and the two only cancel if you guess the
   line-height right — which differs between the links and the chime. */
.page-nav .nav-right a {
  font-size: .76rem; letter-spacing: .09em; color: var(--ink-3);
  font-variant: small-caps; text-transform: lowercase;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.page-nav .nav-right a, #chime-toggle { position: relative; }
.page-nav .nav-right a::after, #chime-toggle::after {
  content: ''; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%); height: 44px;
}
.page-nav .nav-right a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* the rainbow footer band has no place on a leaf */
.color-band { display: none !important; }

/* ─── The chime — a marginal control, not a button ─────────────────────── */
#chime-toggle {
  background: none; border: none; border-bottom: 1px solid var(--rule-2);
  color: var(--ink-3); font-family: var(--serif);
  font-size: .76rem; letter-spacing: .09em; font-variant: small-caps;
  text-transform: lowercase; padding: 0 1px 2px; cursor: pointer;
  /* stays a word, not a box; its 44px target is the ::after band above */
  transition: color .25s, border-color .25s;
}
#chime-toggle:hover { color: var(--ink); border-bottom-color: var(--ink); }
#chime-toggle.on { color: var(--sky-ink); border-bottom-color: var(--sky); }

/* ─── The opening ──────────────────────────────────────────────────────── */
.hero {
  padding: clamp(120px, 17vh, 190px) clamp(20px, 5vw, 40px) 30px;
  text-align: center; max-width: 44rem; margin: 0 auto;
}
/* The mark is drawn live by hero-logo.js as a bundle of black hairlines at
   the weave's own weight — the same pen as everything else on the leaf. The
   SVG stays in the DOM purely as the geometry the sketch samples; it is the
   single source of truth for the mark's shape and is never itself displayed. */
/* The mark. Drawn, not animated: the same plotted geometry the pen lays. */
#kala-mark {
  display: block;
  width: min(64vw, 380px);
  height: auto;
  margin: 0 auto 26px;
  color: var(--ink);
}
.hero .label {
  font-size: .78rem; letter-spacing: .42em; color: var(--ink-3);
  text-transform: uppercase; margin-bottom: 26px;
}
.hero h1 {
  font-weight: 400; font-size: clamp(2.1rem, 5.6vw, 3.5rem);
  color: var(--ink); line-height: 1.14; letter-spacing: -0.012em;
  margin-bottom: 26px;
}
.hero p {
  font-size: 1.02rem; color: var(--ink-2); line-height: 1.85;
  font-style: italic; max-width: 30rem; margin: 0 auto;
}
.hero .where {
  font-size: .74rem; letter-spacing: .28em; color: var(--ink-3);
  text-transform: uppercase; font-style: normal; margin-top: 32px;
}
.hero .sky-line { font-size: .86rem; color: var(--ink-3); font-style: italic; margin-top: 14px; }
.hero .sky-line b { color: var(--sky-ink); font-weight: 500; transition: color 3s; }

/* the kolam no longer sits BETWEEN the verses in bands — one continuous
   full-bleed weave runs the whole leaf, and the words are cut out of it */
.kolam-rule { display: none !important; }

/* ─── A verse of the scripture ─────────────────────────────────────────── */
.section {
  max-width: calc(var(--margin-col) + var(--measure) + 3.6rem);
  /* the verses used to be separated by a kolam band; that band is gone and
     one continuous weave carries the page, so the sections have to hold
     their own air. Generous on purpose — the gap is where the kolam shows. */
  margin: clamp(4rem, 10vh, 8rem) auto 0; padding: 0 clamp(20px, 5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, var(--margin-col)) minmax(0, var(--measure));
  column-gap: clamp(1.4rem, 3.4vw, 3.6rem);
  justify-content: center; align-items: start;
}
/* everything lives in the measure unless told otherwise */
.section > * { grid-column: 2; }

/* the numeral rides in the margin, alongside the reading */
.sec-label {
  grid-column: 1; grid-row: 1;
  /* NOT sticky. A folio that travels drags its carved window along with it,
     and the weave only re-cuts on a rebuild — so the numeral sat on top of
     the kolam for seconds at a time before the hole caught up. It was also
     doing nothing at all on a phone, where the margin column is folded away. */
  display: block; text-align: right;
  font-size: .78rem; letter-spacing: .2em; color: var(--ink-3);
  text-transform: lowercase; font-variant: small-caps;
  line-height: 1.5; padding-top: .55rem;
  border-right: 1px solid var(--rule); padding-right: clamp(.7rem, 1.6vw, 1.3rem);
}
.sec-label .numeral {
  display: block; font-size: 1.45rem; letter-spacing: .08em;
  color: var(--ink); margin-bottom: .35rem; line-height: 1;
  /* the label is set lowercase-into-small-caps; the numeral must escape it */
  text-transform: uppercase; font-variant: normal;
}
.section > h2 {
  grid-row: 1;
  font-weight: 400; font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--ink); line-height: 1.24; letter-spacing: -0.008em;
  margin-bottom: 1.4rem; text-wrap: balance;
}
.section h2 em { font-style: italic; color: var(--ink-2); }

/* ─── The measure: justified, hyphenated, hung ─────────────────────────── */
.lead {
  font-size: 0.95rem; line-height: 1.82; color: var(--ink);
  margin-bottom: 1.2rem;
  text-align: justify; text-justify: inter-word;
  hyphens: auto; -webkit-hyphens: auto;
  hanging-punctuation: first last;
}
.lead em { color: var(--ink-2); font-style: italic; }
.lead b   { color: var(--ink); font-weight: 600; }
.lead a   { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.lead a:hover { text-decoration-color: var(--ink); }

/* the opening letter of a verse, as a scripture sets it */
.lead.initial::first-letter {
  float: left; font-size: 3.5em; line-height: .82;
  padding: .06em .1em 0 0; margin-right: .02em;
  color: var(--ink); font-weight: 400;
}

.pull {
  font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--ink);
  font-style: italic; line-height: 1.58; margin: 2rem 0 .6rem;
  padding-left: 1.3rem; border-left: 1px solid var(--rule-2);
  text-align: left; hyphens: none;
}

/* ─── The two truths ───────────────────────────────────────────────────── */
.word-split {
  display: flex; gap: 0; margin: 2.2rem auto;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.word-half { flex: 1; padding: 1.9rem 1rem; text-align: center; background: none; }
.word-half + .word-half { border-left: 1px solid var(--rule); }
.word-char { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 400; color: var(--ink); line-height: 1.1; }
.word-script { font-family: var(--deva); font-size: .92rem; letter-spacing: .06em; margin-top: .7rem; }
.word-meaning { font-size: 1rem; color: var(--ink-2); font-style: italic; margin-top: .8rem; }

/* ─── The press, the day, the sitting — plates on the leaf ─────────────── */
.press-frame {
  background: none; border: none;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: clamp(16px, 2.6vw, 26px) 0; margin-top: 1.6rem;
}
.press-note {
  width: 100%; max-width: 26rem; margin: 0 auto; display: block;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  /* on a paper ground the note needs no shadow to be seen — it belongs here */
  box-shadow: 0 1px 0 var(--rule-2);
}
.press-papers { display: flex; gap: 1.1rem; justify-content: center; margin-bottom: 1.2rem; flex-wrap: wrap; }
.press-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.3rem; flex-wrap: wrap; }
.press-readout { font-size: .9rem; color: var(--ink-2); line-height: 1.7; font-style: italic; }
.press-readout b { color: var(--ink); font-weight: 600; font-style: normal; }
.press-cap { font-size: .84rem; color: var(--ink-3); font-style: italic; margin-top: 1.1rem; line-height: 1.72; }

.day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.day-head .day-title { font-size: .9rem; color: var(--ink-2); font-style: italic; }
.day-head .day-title b { color: var(--ink); font-weight: 600; font-style: normal; }
.day-nav { display: flex; gap: 1rem; }

/* ─── Marginalia: every control is ink-text with a rule, never a slab ────
   The one exception is the checkout submit, which is held plain and loud
   further down — a scripture may whisper, but it must not hide the till. */
/* ─── The controls ────────────────────────────────────────────────────────
   These were text with a rule under them: a link's affordance and a link's
   hit area. Measured on a phone every one came to 20–24px tall, against the
   44px that Apple, Material and WCAG AAA independently land on — and the
   smallest of them, at 23×20, was the × that empties the pouch, the one
   destructive control on the page. The single exception was the till's
   submit, which had already been given a proper slab because "the till must
   not whisper".

   So a control becomes what everything else on this leaf already is: a
   hairline box with the same corner. Not a generic button — the page's own
   vocabulary, applied at last to the one element that had opted out of it.

   The kolam stays where it was already earned, and is not added on top. The
   corner is round because the kolam is nothing but curves (see --r), and the
   pulli still marks every live control. Ornament drawn ON a control would put
   decoration in competition with the drawings, which are the thing sold. */
.press-btn, .cta, .dest-btn, .day-nav button {
  background: none; color: var(--ink);
  border: var(--hair) solid var(--ink); border-radius: var(--r);
  font-family: var(--serif); font-size: .86rem; letter-spacing: .04em;
  font-variant: small-caps; text-transform: lowercase;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .45rem 1.15rem;
  cursor: pointer;
  transition: background .22s, color .22s, border-color .22s, opacity .22s;
}
/* ghost: the same box, stated quietly — a secondary is not a lesser target */
.press-btn.ghost, .cta.ghost, .dest-btn, .day-nav button {
  color: var(--ink-3); border-color: var(--rule-2); opacity: .8;
}
.press-btn:hover, .cta:hover, .dest-btn:hover:not(.on), .day-nav button:hover:not(:disabled) {
  background: var(--ink); color: var(--paper); border-color: var(--ink); opacity: 1;
}
/* chosen: filled, because a toggle that only thickens its rule is a toggle
   nobody can read at a glance */
.press-btn.on, .dest-btn.on, .press-papers .press-btn.on {
  background: var(--ink); color: var(--paper); border-color: var(--ink); opacity: 1;
}
.press-btn:disabled, .cta:disabled, .day-nav button:disabled {
  opacity: .32; cursor: default; background: none;
  color: var(--ink); border-color: var(--rule);
}
/* a pulli before every live control — the mark of the grammar */
.press-btn::before, .cta::before {
  content: '·'; margin-right: .45em; color: currentColor; opacity: .55;
}
.cta-wrap { display: flex; gap: 1.8rem; justify-content: center; flex-wrap: wrap; margin: 2.6rem auto 0; }

/* ─── Reckonings ───────────────────────────────────────────────────────── */
.eq {
  font-family: var(--mono); background: none;
  border: none; border-left: 1px solid var(--rule-2);
  padding: 1rem 0 1rem 1.3rem; margin: 1.6rem 0;
  font-size: .92rem; color: var(--ink); line-height: 1.9;
  overflow-x: auto; white-space: pre;
}
.eq small {
  /* em, not rem: the equation shrinks to fit a narrow viewport, and a caption
     pinned to .86rem would end up LARGER than the equation it explains. This
     is the same .86/.92 ratio it always had, now held at every width. */
  display: block; font-family: var(--serif); font-size: .935em;
  color: var(--ink-3); font-style: italic; letter-spacing: 0;
  white-space: normal; margin-top: .7rem; line-height: 1.7;
}

/* ─── Ruled lists: anatomy, the roll, the cart ─────────────────────────── */
.anatomy { border-top: 1px solid var(--rule); margin-top: 1.6rem; }
.anatomy .part {
  border-bottom: 1px solid var(--rule); padding: .95rem 0;
  display: flex; gap: 1.2rem; align-items: baseline; flex-wrap: wrap;
}
.anatomy .part .what { font-size: 1rem; color: var(--ink); font-weight: 600; min-width: 10rem; }
.anatomy .part .why  { font-size: .9rem; color: var(--ink-2); line-height: 1.7; flex: 1; min-width: 14rem; }

/* ─── The run ──────────────────────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.gtile {
  aspect-ratio: 2.26/1; background: var(--paper-2); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.gtile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gtile .ph { font-size: .72rem; letter-spacing: .16em; color: var(--ink-3); text-transform: lowercase; font-variant: small-caps; }
.gcap { font-size: .84rem; color: var(--ink-3); font-style: italic; margin-top: 1rem; line-height: 1.7; }

/* ─── The stretches ──────────────────────────────────────────────────────── */
/* auto-FIT, not auto-fill: there are three stretches and the measure fits
   four tracks, so auto-fill was ruling an empty fourth cell at the end of the
   row. Fitting also gives each card a third of the width, which stops
   "pen-life" breaking across two lines. */
.stretch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0; margin-top: 1.6rem; border-top: 1px solid var(--rule); }
.stretch {
  background: none; border: none; border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  padding: 1.7rem 1rem; text-align: center; display: flex; flex-direction: column; gap: .4rem; align-items: center;
}
.stretch-min { font-size: 1.7rem; font-weight: 400; color: var(--ink); line-height: 1.1; }
.stretch-sub { font-size: .78rem; color: var(--ink-3); line-height: 1.55; }
.stretch-inr { font-size: 1rem; color: var(--ink-2); margin: .5rem 0 .8rem; font-style: italic; }
/* the paper, said on the card and not only at the till. A stretch is many
   sheets; quoting the seconds alone was the shape of the old undercharge. */
.stretch-mat { display: block; font-size: .78rem; font-style: normal; color: var(--ink-3); }

/* ─── The till ─────────────────────────────────────────────────────────── */
.cart-row { display: flex; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--rule); padding: .85rem 0; }
.cart-row:first-child { border-top: 1px solid var(--rule); }
/* An item row carries a drawing, and a drawing has no baseline to sit on —
   only the reckoning rows below keep the baseline they were set with. */
/* padding-BLOCK, not the shorthand: the inline inset belongs to the till's own
   rule above, and `padding: 1.1rem 0` here silently zeroed it. */
.cart-row.cart-item { align-items: flex-start; padding-block: 1.1rem; }
/* the sheet, at 54px. Its corner is the plotted note's own 4 mm clip scaled
   down, NOT the screen's --r: this is a picture of paper, not a box on a page. */
/* The sheet keeps the paper's proportion here, not the one NoteEngine.draw
   computes: draw sizes from clientWidth and writes an inline height, which
   under border-box loses the 2px of rule and lands at 1.370 against A4's
   1.414 — a squat sheet, and the drawn notes disagreeing with the undrawn
   placeholder beside them. The stylesheet states the ratio; cart.js clears
   the inline height after painting. */
.cart-thumb {
  flex: 0 0 auto; width: 54px; display: block; aspect-ratio: 210 / 297;
  background: #fff; border: var(--hair) solid #000; border-radius: 3px;
}
/* a sitting's sheet is an <img> — it cannot be redrawn from an id the way a
   note is redrawn from a seed, so the pouch keeps a picture of it. contain,
   not cover: a transcript is not something to crop. */
img.cart-thumb { object-fit: contain; }
.cart-item .cart-what { display: flex; flex-direction: column; gap: .22rem; }

/* On a phone the item row runs out of width: the sheet, the price and the ×
   take their fixed share and the description is left about 98px to wrap in,
   which ran "about 19 sheets · collapsed by the Keeper" to six lines. So the
   row stops being one line of flex and becomes two rows of grid — the sheet,
   the title and the price keep the top line, and the description drops
   beneath them across the FULL width, under the thumbnail too.
   display: contents on .cart-what lets its two children address the grid
   directly without another wrapper in cart.js. */
@media (max-width: 480px) {
  .cart-row.cart-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "thumb title price x"
                         "sub   sub   sub   sub";
    column-gap: .7rem; row-gap: .35rem; align-items: start;
  }
  .cart-item .cart-thumb { grid-area: thumb; }
  .cart-item .cart-what  { display: contents; }
  .cart-item .cart-title { grid-area: title; }
  .cart-item .cart-sub   { grid-area: sub; }
  .cart-item .cart-price { grid-area: price; }
  .cart-item .cart-x     { grid-area: x; }
}
.cart-title { font-size: .95rem; color: var(--ink); line-height: 1.4; }
.cart-sub { font-size: .8rem; color: var(--ink-3); line-height: 1.5; }
.cart-what { flex: 1; font-size: .95rem; color: var(--ink-2); line-height: 1.6; }
.cart-what .mono { font-family: var(--mono); font-size: .88em; color: var(--ink); }
.cart-price { font-size: 1rem; color: var(--ink); white-space: nowrap; }
/* The one destructive control on the page, and it was the smallest target on
   it — 23×20. It stays unboxed (a rule around a × reads as a close-window
   chrome), but it gets the square 44 it needs, and the negative margin keeps
   the row's height where the type set it. */
.cart-x {
  border: none; background: none; color: var(--ink-3);
  font-size: 1.15rem; line-height: 1; padding: 0;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r); margin: -10px -12px -10px 0;
  transition: color .22s, background .22s;
}
.cart-x::before { content: none; }
.cart-x:hover { color: var(--ink); background: rgba(0, 0, 0, .06); }
.cart-total .cart-what, .cart-total .cart-price { font-weight: 600; color: var(--ink); }
/* padding-block: the inline inset comes from `#cart-body > *` */
.cart-empty { color: var(--ink-3); font-style: italic; padding-block: 1.5rem; }
.cart-empty a { text-decoration: underline; text-underline-offset: 3px; }

.dest-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .7rem 0 .9rem; border-bottom: 1px solid var(--rule); }
.dest-btn { padding-inline: .8rem; }
/* On a phone the label and two 44px targets will not share a line — they were
   stacking one per row, three rows deep. The label takes its own line and the
   two choices split the next, which is also the clearer way to show a pair. */
@media (max-width: 480px) {
  .dest-label { flex: 1 0 100%; }
  .dest-btn { flex: 1 1 0; min-width: 0; }
}
.dest-label { font-size: .78rem; letter-spacing: .16em; text-transform: lowercase; font-variant: small-caps; color: var(--ink-3); }
/* the last thing in the till, so it carries the box's bottom breathing room;
   the inline inset comes from `#cart-body > *`. Two of these stack when the
   pouch holds a stretch AND the destination is international. */
.dest-note { font-size: .86rem; color: var(--ink-3); font-style: italic; line-height: 1.7; margin-top: 1rem; padding-block-end: 1.1rem; }
.dest-note + .dest-note { margin-top: .7rem; }

/* the form is held plain and clear — the one place the scripture steps aside */
.co-grid { display: grid; gap: .8rem; max-width: 30rem; margin: 1.8rem auto 0; }
.co-in {
  background: var(--paper-3); border: 1px solid var(--rule-2); color: var(--ink);
  font-family: var(--serif); font-size: 1rem; padding: .75rem .9rem; width: 100%;
  border-radius: var(--r);
}
.co-in::placeholder { color: var(--ink-3); font-style: italic; }
.co-in:focus { outline: none; border-color: var(--ink); }

/* the submit is the one filled slab on the leaf. A scripture may whisper;
   the till must not. */
#checkout button[type="submit"], #checkout .cta, .cta.pay {
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  border-radius: var(--r);
  padding: .8rem 1.8rem; font-variant: small-caps; letter-spacing: .06em;
  font-size: .95rem;
}
#checkout button[type="submit"]::before, #checkout .cta::before { content: none; }
#checkout button[type="submit"]:hover, #checkout .cta:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }

/* No rules of its own. This was a band ruled top and bottom, from before
   #payment became a box around it — so a paid order drew a hairline
   rectangle a few pixels inside another hairline rectangle, offset by this
   rule's own margin. #payment carries the border; the panel carries only
   the padding and the centring. */
.pay-panel {
  background: none; border: none;
  padding: 2rem 0; text-align: center;
}
.pay-line { font-size: .98rem; color: var(--ink-2); line-height: 1.8; margin-bottom: .5rem; }
.pay-line b { color: var(--ink); }
.pay-qr { display: flex; justify-content: center; margin: 1.3rem 0; }
.pay-qr svg { background: var(--paper-3); padding: .5rem; width: min(15rem, 70vw); height: auto; border: 1px solid var(--rule); }
.pay-alt { text-decoration: underline; text-underline-offset: 3px; font-size: .88rem; }
.pay-note { font-size: .84rem; color: var(--ink-3); font-style: italic; margin-top: .9rem; }

/* ─── The sitting — KALAI's room, held inside the leaf ─────────────────── */
.hidden { display: none !important; }
.sit-room { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: .6rem 0; text-align: center; }
.sit-big {
  font-size: clamp(1rem, 2.4vw, 1.3rem); font-weight: 400; letter-spacing: .02em;
  color: var(--ink); text-transform: none; font-style: italic;
}
.sit-sub { font-size: .78rem; letter-spacing: .18em; color: var(--ink-3); text-transform: lowercase; font-variant: small-caps; }
.sit-sub b { color: var(--ink-2); user-select: all; font-family: var(--mono); font-variant: normal; letter-spacing: 0; }
.sit-row { display: flex; gap: 1.4rem; flex-wrap: wrap; justify-content: center; align-items: baseline; }

textarea#carry {
  width: min(32rem, 100%); min-height: 6.5rem; resize: vertical;
  background: var(--paper-3); border: 1px solid var(--rule-2); color: var(--ink);
  font-family: var(--serif); font-size: 1rem; line-height: 1.75; padding: .9rem 1rem;
  outline: none; transition: border-color .4s; border-radius: var(--r);
}
textarea#carry::placeholder { color: var(--ink-3); font-style: italic; }
textarea#carry:focus { border-color: var(--ink); }

#viz { width: min(66vw, 22rem); height: min(66vw, 22rem); display: block; }
/* the same drawing, carried into the transcript room and left standing */
#d-viz { width: min(56vw, 18rem); height: min(56vw, 18rem); display: block; margin-bottom: .4rem; }
/* the sheet arrives after the drawing has had the room to itself for a beat */
#t-frame.arriving { opacity: 0; transform: translateY(10px); }
#t-frame { transition: opacity 1.1s ease, transform 1.1s ease; }
#t-frame.arriving.here { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  #t-frame { transition: none; }
  #t-frame.arriving { opacity: 1; transform: none; }
}
#c-words {
  min-height: 7rem; max-width: 34rem; font-size: 1.05rem; line-height: 1.85;
  color: var(--ink); font-style: italic; text-align: center;
}
#c-words span { opacity: 0; transition: opacity .45s; }
#c-words span.on { opacity: 1; }
#c-words.fading span { transition: opacity 1.8s; opacity: 0; }
#c-bar { width: min(28rem, 86vw); height: 1px; background: var(--rule); }
#c-fill { height: 100%; width: 0%; background: var(--ink); transition: width .4s linear; }

#t-frame { background: none; border: 1px solid var(--rule); padding: clamp(12px, 2.2vw, 22px); }
#t-canvas { width: min(60vw, 22rem); display: block; background: var(--paper-3); box-shadow: none; }
#png-work { position: fixed; left: -9999px; top: 0; width: 1240px; }
#plot-form { width: 100%; }

/* ─── The colophon: the leaf declaring the set it was ruled from ─────────
   The same gesture as the vocabulary row at the foot of every plate in
   KOLAM_arcs.mjs. A family is a constraint set, not a name — so the page
   prints the set, and anyone can collapse this exact leaf again. */
.colophon {
  max-width: calc(var(--margin-col) + var(--measure) + 3.6rem);
  margin: clamp(70px, 10vh, 120px) auto 0;
  padding: 0 clamp(20px, 5vw, 56px);
  /* the leaf has one left edge — the colophon sits in the measure with
     everything else, not slung across the margin column */
  display: grid;
  grid-template-columns: minmax(0, var(--margin-col)) minmax(0, var(--measure));
  column-gap: clamp(1.4rem, 3.4vw, 3.6rem);
  justify-content: center;
}
.colophon > * { grid-column: 2; }
.colophon-inner { border-top: 1px solid var(--rule); padding-top: 1.6rem; }
.colophon h3 {
  font-size: .78rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 400; margin-bottom: 1.1rem;
}
.colophon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1rem 1.6rem; margin-bottom: 1.4rem; }
.colophon-cell .k { font-size: .72rem; letter-spacing: .16em; text-transform: lowercase; font-variant: small-caps; color: var(--ink-3); display: block; }
.colophon-cell .v { font-family: var(--mono); font-size: .86rem; color: var(--ink); line-height: 1.6; }
/* this is the load-bearing explanation of the whole system — it may be quiet
   but it must not be faint */
.colophon-note { font-size: .88rem; color: var(--ink-2); font-style: italic; line-height: 1.8; max-width: 34rem; }
.colophon-note b { color: var(--ink-2); font-weight: 600; font-style: normal; }
.colophon-vocab { margin: 1.4rem 0; color: var(--ink-2); }
.colophon-vocab svg { width: min(17rem, 60%); height: auto; display: block; }
.colophon-vocab .cap { font-size: .72rem; letter-spacing: .14em; font-variant: small-caps; color: var(--ink-3); margin-top: .5rem; }

/* ─── The foot ─────────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--rule); margin-top: clamp(50px, 7vh, 80px);
  padding: 2rem clamp(20px, 5vw, 56px) 3rem;
  max-width: calc(var(--margin-col) + var(--measure) + 3.6rem); margin-inline: auto;
  display: flex; justify-content: space-between; gap: .9rem; flex-wrap: wrap;
  font-size: .82rem; color: var(--ink-3); font-style: italic;
}
.foot a { color: var(--ink-3); }
.foot-links { text-align: center; font-style: normal; font-variant: small-caps; letter-spacing: .04em; }
.foot-links a { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 2px; }
.foot-links a:hover { color: var(--ink); }


/* ============================================================================
   THE BOX — where the leaf needs to be plain
   ----------------------------------------------------------------------------
   Running prose sits in its own carved window and needs nothing. But apparatus
   — the press, the till, a form, a reckoning, the colophon — has to be read as
   ONE thing against a weave that runs behind it. So it gets an opaque white
   box with a single black hairline, the same nib the kolam is drawn at. Nothing
   is tinted, nothing is shadowed, nothing is grey: the weave simply stops.
============================================================================ */
/* .pay-panel is NOT in this list. It is the only child of #payment, which is
   already a box, so boxing both drew a rounded rectangle inside a rounded
   rectangle a few pixels apart — visible under the till the moment an order
   was paid. The outer one keeps the border; the panel just holds the padding. */
.press-frame, .word-split, .eq, .colophon-inner,
#t-frame, .tally, .stretch-grid, .anatomy, .roll, .toc, .gtile,
#cart-body, #payment, .sit-room {
  background: #fff;
  border: var(--hair) solid #000;
  border-radius: var(--r);
  position: relative; z-index: 1;
  overflow: hidden;          /* so the inner rules stop at the rounded corner */
}

/* the frames were ruled top-and-bottom only; now they close */
.press-frame { padding: clamp(1rem, 2.4vw, 1.6rem); margin-top: 1.6rem; }
.word-split  { border-top: var(--hair) solid #000; border-bottom: var(--hair) solid #000; }
/* The equation is set `white-space: pre` — it is an equation, it must not wrap
   mid-term — and it asked for `overflow-x: auto` up at .eq so it could scroll
   when it did not fit. That never worked: this file adds .eq to the boxed
   group above, whose `overflow: hidden` has the same specificity and comes
   later, so it won. On a phone `price(note) = seconds(note) × ₹1` was simply
   cut off after the ×, with no way to reach the price.

   Two fixes, because either alone is thin. It is sized to FIT the narrow
   viewport, so in the ordinary case there is nothing to scroll and no
   scrollbar in the middle of a scripture; and the overflow is restored to
   auto, so a longer equation added later scrolls instead of vanishing. */
.eq {
  border-left: var(--hair) solid #000;
  /* the side inset gives way before the type does — a narrow phone needs the
     millimetres more than the box needs its margins */
  padding: 1.1rem clamp(.8rem, 3.5vw, 1.3rem);
  overflow-x: auto; overflow-y: hidden;
  font-size: min(.92rem, 4.1vw);
}
.pay-panel   { padding: 1.8rem clamp(1rem, 3vw, 2rem); }
.tally, .stretch-grid, .anatomy, .roll { margin-top: 1.6rem; }
.colophon-inner { padding: 1.5rem; border-top: var(--hair) solid #000; }
.toc { padding: 1rem 1.2rem; margin: 1.6rem 0 0; border-bottom: var(--hair) solid #000; }
/* a row of links is not apparatus — it stays bare in its own carved window */
.cta-wrap { background: none; border: none; padding: 0; }

/* inside a box the internal ruling is the same black hairline */
.tally .cell + .cell,
.word-half + .word-half { border-left: var(--hair) solid #000; }
.anatomy .part, .entry, .cart-row, .dest-row { border-bottom: var(--hair) solid #000; }
.anatomy .part:last-child, .entry:last-child, .cart-row:last-child { border-bottom: none; }
.anatomy .part, .entry { padding-left: .9rem; padding-right: .9rem; }
.anatomy, .roll { border-top: var(--hair) solid #000; }

/* the till is a box too, and it holds the whole reckoning — the rows are
   ruled inside it, so the weave never crosses the arithmetic */
#cart-body { margin-top: 1.6rem; }
#cart-body .cart-row:first-child { border-top: none; }
/* Everything sitting directly in the till is inset from the rule by the same
   amount. This used to be set per child, and three of them were wrong at once:
   .cart-empty and .dest-note never had it, and .cart-row.cart-item took it
   back off itself with a `padding: 1.1rem 0` shorthand. On a phone that put
   the empty-pouch line, the international notice and the stretch's thumbnail
   flush against the hairline.

   One rule, so a child added later cannot miss it. Inline only — the vertical
   rhythm differs per row, and the bottom rule still runs the full width of
   the box because padding sits inside the border. */
#cart-body > * { padding-inline: .9rem; }
#payment:empty { display: none; border: none; }
/* Same for the till once it is cleared. A paid order empties the pouch, and
   the empty-pouch invitation — "collapse a note, sit with KALAI" — was then
   sitting in its own box directly above "Payment received", inviting the
   buyer to start over at the moment they finished. cart.js empties it. */
#cart-body:empty { display: none; border: none; margin: 0; }
.sit-room { padding: 1.4rem 1rem; }
.sit-room.hidden { display: none !important; }

/* fields: white, hairline, no radius, no tint */
.co-in, textarea#carry {
  background: #fff; border: var(--hair) solid #000; border-radius: var(--r);
}
.co-in:focus, textarea#carry:focus { outline: 2px solid #000; outline-offset: -3px; border-color: #000; }

/* the note plates carry their own white; they need no second border */
.press-note, #t-canvas { background: #fff; border: var(--hair) solid #000; border-radius: var(--r); box-shadow: none; }

/* the controls keep a black rule — never grey. It is the whole box now, not
   an underline; the ghost states its quiet by opacity, not by tint. */
.press-btn.ghost, .cta.ghost, .dest-btn, .day-nav button {
  color: #000; border-color: #000;
}
.press-btn:disabled, .cta:disabled, .day-nav button:disabled { opacity: .35; border-color: #000; }
.page-nav .nav-right a, #chime-toggle { color: #000; }
.lead a { text-decoration-color: #000; }
.toc a { border-bottom-color: #000; color: #000; }

/* the pull-quote's rule is the nib as well */
.pull { border-left: var(--hair) solid #000; padding-left: 1.3rem; }
.sec-label { border-right: var(--hair) solid #000; }

/* ─── Narrow leaves ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .page-nav { padding: 13px 20px; }
  .page-nav .nav-right { gap: 13px; }
  .page-nav .nav-right a:not(.keep) { display: none; }
}
@media (max-width: 860px) {
  /* the margin column folds into the measure; the numeral becomes a header */
  :root { --margin-col: 0rem; }
  .section { grid-template-columns: minmax(0, var(--measure)); column-gap: 0; }
  .section > *, .sec-label, .section > h2 { grid-column: 1; }
  .sec-label {
    position: static; text-align: left; border-right: none;
    padding-right: 0; padding-top: 0; margin-bottom: .7rem;
    border-bottom: 1px solid var(--rule); padding-bottom: .5rem;
    display: flex; align-items: baseline; gap: .6rem;
  }
  .sec-label .numeral { display: inline; font-size: 1rem; margin-bottom: 0; }
  .section > h2 { grid-row: auto; }
  /* the margin column is gone here, so the colophon closes up with it */
  .colophon { grid-template-columns: minmax(0, var(--measure)); }
  .colophon > * { grid-column: 1; }
}
@media (max-width: 560px) {
  html { font-size: 19.8px; }
  .page-nav .logo { display: none; }
  .hero { padding: 100px 18px 26px; }
  #kala-mark { width: min(64vw, 230px); margin-bottom: 24px; }
  /* justified text on a phone measure makes rivers — set it ragged */
  .lead { text-align: left; hyphens: none; }
  .lead.initial::first-letter { font-size: 2.9em; }
  .kolam-rule { margin: 44px auto 26px; }
  .word-split { flex-direction: column; }
  .word-half + .word-half { border-left: none; border-top: 1px solid var(--rule); }
  .foot { padding: 1.6rem 18px 2.4rem; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}

/* ============================================================================
   The other leaves — the chronicle (the roll of seconds) and the policies.
   Same ink, same ruling, same measure.
============================================================================ */

/* ─── The chronicle ────────────────────────────────────────────────────── */
.page-nav a.back { font-size: .78rem; letter-spacing: .09em; color: var(--ink-3); font-variant: small-caps; text-transform: lowercase; }
.page-nav a.back:hover { color: var(--ink); }

.tally {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0;
  /* NB: this block is appended after the box rules, so it must restate the
     box itself — otherwise `background:none` here silently wins and the
     weave runs straight through the tally */
  background: #fff; border: var(--hair) solid #000; border-radius: var(--r);
  position: relative; z-index: 1; overflow: hidden;
  margin-top: 2.2rem;
}
.tally .cell { background: none; padding: 1.6rem 1rem; text-align: center; }
.entry:last-child { border-bottom: none; }
.tally .cell + .cell { border-left: 1px solid var(--rule); }
.tally .big { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 400; color: var(--ink); line-height: 1.1; }
.tally .cap { font-size: .74rem; letter-spacing: .16em; color: var(--ink-3); text-transform: lowercase; font-variant: small-caps; margin-top: .5rem; }

/* the roll is a ledger: one ruled line per sheet the pen was asked for */
.roll { background: #fff; border: var(--hair) solid #000; border-radius: var(--r); overflow: hidden; position: relative; z-index: 1; margin-top: 1.6rem; }
.entry {
  border-bottom: 1px solid var(--rule); padding: .85rem 0;
  display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
}
.entry .seed { font-family: var(--mono); font-size: .88rem; color: var(--ink); min-width: 7rem; }
.entry .meta { font-size: .88rem; color: var(--ink-2); flex: 1; min-width: 12rem; font-style: italic; }
.entry .secs { font-size: .95rem; color: var(--ink); white-space: nowrap; }
.entry .state { font-size: .72rem; letter-spacing: .14em; text-transform: lowercase; font-variant: small-caps; color: var(--ink-3); white-space: nowrap; }
.empty { color: var(--ink-3); font-style: italic; padding: 2rem 0; line-height: 1.8; }

/* ─── The policies ─────────────────────────────────────────────────────── */
.wrap {
  max-width: calc(var(--margin-col) + var(--measure) + 3.6rem);
  margin: 0 auto; padding: clamp(110px, 15vh, 150px) clamp(20px, 5vw, 56px) 0;
}
.nav { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.home { font-size: .78rem; letter-spacing: .09em; color: var(--ink-3); font-variant: small-caps; text-transform: lowercase; }
.home:hover { color: var(--ink); }
.wrap h1 { font-weight: 400; font-size: clamp(1.8rem, 4.4vw, 2.6rem); line-height: 1.16; margin: 1.4rem 0 .6rem; }
.wrap h2 {
  font-weight: 400; font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.25;
  margin: 2.6rem 0 .9rem; padding-top: 1.4rem; border-top: 1px solid var(--rule);
}
.wrap h3 { font-weight: 600; font-size: 1rem; margin: 1.4rem 0 .4rem; }
.wrap p, .wrap li {
  font-size: 1rem; line-height: 1.82; color: var(--ink); margin-bottom: .9rem;
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.wrap ul, .wrap ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.wrap li::marker { color: var(--ink-3); }
.wrap a { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
.wrap a:hover { text-decoration-color: var(--ink); }
.sub { font-size: .95rem; color: var(--ink-2); font-style: italic; }
.updated { font-size: .8rem; color: var(--ink-3); font-style: italic; letter-spacing: .04em; }
.em { color: var(--ink); font-weight: 600; }
.toc { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: 1.6rem 0 0; padding-bottom: 1.4rem; border-bottom: 1px solid var(--rule); }
.toc a { font-size: .84rem; color: var(--ink-3); font-variant: small-caps; letter-spacing: .04em; text-decoration: none; border-bottom: 1px solid var(--rule-2); }
.toc a:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 560px) {
  .wrap p, .wrap li { text-align: left; hyphens: none; }
}

/* ─── Nothing keeps the browser's own grey ─────────────────────────────────
   Unstyled controls (#gate-key, #raga-select and anything added later) ship
   with a UA border of rgb(118,118,118) and an inset bevel. On this leaf there
   is exactly one line colour. */
input, select, textarea, button, fieldset {
  border-color: #000;
  border-style: solid;
  background-color: #fff;
  color: #000;
  font-family: var(--serif);
}
input, select, textarea { border-width: var(--hair); border-radius: var(--r); }
select { padding: .4rem .6rem; }


/* ============================================================================
   THE BLACK PANELS
   ----------------------------------------------------------------------------
   Where a section is an INSTRUMENT rather than an argument — the day's note,
   the press, KALAI's room — the panel inverts. The plate inside stays white,
   because that is the paper the pen actually draws on: black frame, white
   sheet, exactly the way a note sits on a desk. And the Word inverts because
   it is the one place the page states its own name; it should land like a
   plate, not drift as centred text.
============================================================================ */
.word-split,
#day .press-frame,
#press .press-frame,
#sitting .press-frame {
  background: #000;
  border: var(--hair) solid #000;
  border-radius: var(--r);
  color: #fff;
}

/* ─── The Word: a plate, held to the measure ─────────────────────────────
   It used to break out across the margin column and take the whole leaf. At
   full width the plate outran the rule beside the numeral and read as a band
   laid over the page rather than a part of it. It stays in the measure now,
   so its left edge lands on the same line every other verse starts from. */
#word .word-split {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 2.4rem 0 1.6rem;
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1rem, 4vw, 3rem);
}
#word .word-half { padding: 0 clamp(.6rem, 3vw, 2rem); border: none; }
#word .word-half + .word-half { border-left: var(--hair) solid #fff; }
#word .word-char { font-size: clamp(2.2rem, 6vw, 4rem); color: #fff; line-height: 1.05; }
#word .word-script { color: #fff; opacity: .78; }
#word .word-meaning { color: #fff; opacity: .78; font-size: 1.05rem; margin-top: 1rem; }

/* ─── Everything written on a black panel ──────────────────────────────── */
#day .press-frame, #press .press-frame, #sitting .press-frame { padding: clamp(1.2rem, 3vw, 2rem); }

#day .press-frame :is(.press-readout, .press-cap, .day-title, .sit-sub, .sit-big),
#press .press-frame :is(.press-readout, .press-cap, .day-title, .sit-sub, .sit-big),
#sitting .press-frame :is(.press-readout, .press-cap, .day-title, .sit-sub, .sit-big, #c-words) {
  color: #fff;
}
#day .press-frame :is(.press-readout b, .day-title b, .sit-sub b),
#press .press-frame :is(.press-readout b),
#sitting .press-frame :is(.press-readout b, .sit-sub b) { color: #fff; }
#day .press-cap, #press .press-cap, #sitting .press-cap { opacity: .74; }

/* controls invert: white ink, white rule. The whole box inverts now, not just
   a rule beneath it — and filling on hover/on means white ground, black ink,
   which is the same gesture the leaf makes the other way up. */
#day .press-frame :is(.press-btn, .day-nav button),
#press .press-frame :is(.press-btn, .day-nav button),
#sitting .press-frame :is(.press-btn, .day-nav button) {
  color: #fff; border-color: #fff; background: none; opacity: 1;
}
#day .press-frame .press-btn::before,
#press .press-frame .press-btn::before,
#sitting .press-frame .press-btn::before { color: #fff; opacity: .7; }
#day .press-frame :is(.press-btn, .day-nav button):hover:not(:disabled),
#press .press-frame :is(.press-btn, .day-nav button):hover:not(:disabled),
#sitting .press-frame :is(.press-btn, .day-nav button):hover:not(:disabled),
#press .press-frame .press-btn.on,
#press .press-papers .press-btn.on {
  background: #fff; color: #000; border-color: #fff;
}
#day .press-frame .press-btn:hover::before,
#press .press-frame .press-btn:hover::before,
#press .press-frame .press-btn.on::before { color: #000; }
#day .press-frame :is(.press-btn, .day-nav button):disabled,
#press .press-frame .press-btn:disabled,
#sitting .press-frame .press-btn:disabled {
  opacity: .4; border-color: #fff; background: none; color: #fff;
}

/* the plate itself is paper — it never inverts */
#day .press-note, #press .press-note, #sitting #t-canvas, #sitting #t-frame {
  background: #fff; border-color: #fff;
}
#sitting #t-frame { border: var(--hair) solid #fff; }

/* the sitting's rooms sit inside the black frame, so they carry no box */
#sitting .sit-room { background: none; border: none; padding: .6rem 0; }
#sitting textarea#carry {
  background: #fff; border-color: #fff; color: #000;
}
#sitting #c-bar { background: rgba(255,255,255,.35); }
#sitting #c-fill { background: #fff; }
#sitting .sit-row .press-btn { color: #fff; border-color: #fff; }

@media (max-width: 860px) {
  #word .word-split { grid-column: 1; }
}
@media (max-width: 560px) {
  #word .word-split { grid-template-columns: 1fr; }
  #word .word-half + .word-half {
    border-left: none; border-top: var(--hair) solid #fff;
    margin-top: 1.6rem; padding-top: 1.6rem;
  }
}

/* The till, shut. Stated before the form, not after the address. */
.till-shut {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 12px 14px;
  margin: 0 0 18px;
  font-style: italic;
}