/*
 * loceum.css — the one design sheet loceum.com, Production (/prod) and the Graph draw with.
 *
 * Nothing here is chosen here. Every number is the design system's, in the app repo:
 *   docs/design/tokens.json          inks (page 01), containment (page 38), iconography (page 35)
 *   Packages/LoceumFoundations       the type roles (Typography.swift) and the space table (Space.swift)
 *   docs/design/16-motion.md         rise 0.52 s, stagger 0.055 s
 *   functions/lib/chapter-page.mjs   the first correct web reading of the same (tale-share, f52136f)
 * Where this file and those differ, they are right and this file is the bug.
 *
 * The law in one breath: five inks and no colour; Literata beside the drawn word at 293, where it is
 * read at 400; Instrument Sans for the chrome and a person's own words; w = 8 and nothing off the
 * table; no container closed on four sides, no corner radius, no shadow, no blur.
 *
 * rem is against a 16px root, so a reader who enlarges their text enlarges the whole of it.
 */

/* ── Inks — page 01 (Day) and its Night; paper/raised from page 38 ────────────────────────────── */
:root {
  color-scheme: light;
  --paper: #ffffff;
  --paper-raised: #f7f7f7;   /* the field — the system's only device for "lifted" */
  --ink: #111111;            /* 18.88:1 — the experience, a person's words */
  --ink-soft: #676767;       /*  5.66:1 — secondary body copy */
  --ink-quiet: #757575;      /*  4.61:1 — labels, captions */
  --ink-rule: #949494;       /*  3.03:1 — hairlines, the non-text minimum */

  /* Space — w = 8. A gap that is not here is a gap somebody eyeballed. */
  --w: 0.5rem;
  --tight: 0.5rem;           /*  8  w     a label and the thing it labels */
  --step: 1rem;              /* 16  2w    between the lines of one thought */
  --clear: 1.5rem;           /* 24  3w    between one thought and the next */
  --margin: 1.75rem;         /* 28  3.5w  the side margin, on every screen */
  --block: 3rem;             /* 48  6w    between unrelated blocks */
  --crown: 4.75rem;          /* 76  9.5w  the clearance above a screen's first line */
  --hairline: 0.5px;
  --rule: 1px;               /* containment device 1, and a wall's weight */
  --bracket: 2px;            /* containment device 4 */
  --wall-long: 2.125rem;     /* 34 — a wall's arms below 120pt (page 38) */
  --wall-short: 1.3125rem;   /* 21 */
  --column: 21.0625rem;      /* 337 — the phone's column; margins grow, the column does not */

  --face-read: 'Literata', Georgia, 'Times New Roman', serif;
  --face-chrome: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Motion — 16-motion.md. Change is read across cuts; nothing loops, nothing pulses. */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rise: 0.52s;
  --stagger: 0.055s;
  --rise-distance: 1rem;
}

html[data-ground="night"] {
  color-scheme: dark;
  --paper: #0b0b0b;
  --paper-raised: #131311;
  --ink: #f2efe9;            /* 17.15:1 */
  --ink-soft: #8b8884;       /*  5.58:1 */
  --ink-quiet: #7c7975;      /*  4.54:1 */
  --ink-rule: #625f5b;       /*  3.10:1 */
}

/* ── Type roles — Typography.swift, each at its own optical size ───────────────────────────────── */
.t-experience {            /* 293 · 28/34 · −0.015em — beside the drawn word */
  font-family: var(--face-read);
  font-size: 1.75rem;
  line-height: 2.125rem;
  font-weight: 293;
  font-variation-settings: 'opsz' 28;
  letter-spacing: -0.015em;
}
.t-heading {               /* 293 · 22/27 · −0.015em */
  font-family: var(--face-read);
  font-size: 1.375rem;
  line-height: 1.6875rem;
  font-weight: 293;
  font-variation-settings: 'opsz' 22;
  letter-spacing: -0.015em;
}
.t-plaque {                /* 400 · 20/29 — anything that is read */
  font-family: var(--face-read);
  font-size: 1.25rem;
  line-height: 1.8125rem;
  font-weight: 400;
  font-variation-settings: 'opsz' 20;
}
.t-caption {               /* 400 · 13/19 · +0.005em */
  font-family: var(--face-read);
  font-size: 0.8125rem;
  line-height: 1.1875rem;
  font-weight: 400;
  font-variation-settings: 'opsz' 13;
  letter-spacing: 0.005em;
}
.t-words {                 /* a person's own words — the chrome face, 17/22, as the phone's Body */
  font-family: var(--face-chrome);
  font-size: 1.0625rem;
  line-height: 1.375rem;
  font-weight: 400;
}
.t-label {                 /* the chrome's own words: controls, page names — 13/19 */
  font-family: var(--face-chrome);
  font-size: 0.8125rem;
  line-height: 1.1875rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.t-eyebrow {               /* 11 · uppercase · +1.6pt (page 39) */
  font-family: var(--face-chrome);
  font-size: 0.6875rem;
  line-height: 1.1875rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: var(--ink-quiet);
}
.t-soft { color: var(--ink-soft); }
.t-quiet { color: var(--ink-quiet); }

/* ── Containment — the six devices of page 38, and nothing else ────────────────────────────────── */
/* 1 · the rule: one line under, ink/rule. Focus is the same rule in ink. */
.c-rule { border-bottom: var(--rule) solid var(--ink-rule); }
.c-rule:focus-within, .c-rule.is-active { border-bottom-color: var(--ink); }

/* 2 · the wall: one corner of two arms (long across, short down), open on every other side. */
.c-wall, .c-walls { position: relative; }
.c-wall::before, .c-walls::before, .c-walls::after {
  content: '';
  position: absolute;
  width: var(--wall-long);
  height: var(--wall-short);
  pointer-events: none;
}
.c-wall::before, .c-walls::before {
  top: 0;
  left: 0;
  border-top: var(--rule) solid var(--ink-rule);
  border-left: var(--rule) solid var(--ink-rule);
}
/* 3 · two walls: the same corner, and its turn of 180° at the far corner. */
.c-walls::after {
  right: 0;
  bottom: 0;
  border-bottom: var(--rule) solid var(--ink-rule);
  border-right: var(--rule) solid var(--ink-rule);
}

/* 4 · the bracket: one wall of ink at the left — a person's words, and only a person's words. */
.c-bracket {
  border-left: var(--bracket) solid var(--ink);
  padding-left: var(--step);
}

/* 5 · the threshold: a rule with an opening in it (21 of every 76). */
.c-threshold {
  background-image: linear-gradient(to right, var(--ink-rule) 0 72.37%, transparent 72.37% 100%);
  background-size: 100% var(--rule);
  background-repeat: no-repeat;
  background-position: bottom left;
}

/* 6 · the field: paper/raised, no stroke, no radius. */
.c-field { background: var(--paper-raised); }

/* A container is never closed and never rounded. The browser's own controls keep their shape. */
.c-rule, .c-wall, .c-walls, .c-bracket, .c-threshold, .c-field { border-radius: 0; box-shadow: none; }

/* ── Glyphs — page 35: one weight, currentColor, a floor of 20px ────────────────────────────────── */
.glyph {
  display: inline-block;
  width: 1.25rem;            /* 20 — the floor; below it the mark is used instead */
  height: 1.25rem;
  flex: none;
  fill: currentColor;
  color: var(--ink-soft);    /* rest */
  vertical-align: -0.3125rem;
}
.glyph.is-active, a:hover > .glyph, button:hover > .glyph { color: var(--ink); }
.glyph.is-disabled { color: var(--ink-quiet); }

/* ── Motion — rise, and time compressed (never removed) for a reader who asks for less ─────────── */
@keyframes loceum-rise {
  from { opacity: 0; transform: translateY(var(--rise-distance)); }
  to { opacity: 1; transform: none; }
}
.m-rise { animation: loceum-rise var(--rise) var(--ease) backwards; }
.m-rise:nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.m-rise:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.m-rise:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.m-rise:nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.m-rise:nth-child(n + 6) { animation-delay: calc(var(--stagger) * 5); }

@media (prefers-reduced-motion: reduce) {
  /* `animation: none` would strand anything whose only road to visible is its entrance. The
     animations still run, at a duration no one can see, so their end state lands. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: -0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── The paper's grain — the site's own, at 0.03, under everything ─────────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}