/* ═══════════════════════════════════════════════════════════════════════════════════════════
   AURUM · THE FIVE READING ROOMS
   Evolved 2026-07-27. These are the pages a store reviewer, a journalist, a lawyer and a worried
   player open, and they were plain 720px documents wearing the world's colours. They are one
   bound volume now: a folio grid, a measure a person can read, hung numerals, a running head in
   the margin, one accent per room, and an illuminated opening.

   Every token here is the world's own, declared once (item 53): the rooms used to ship four inks
   that were all LIGHTER than the same named inks on the world page, so the two surfaces of one
   property did not agree about what its colours were.

   Laws: #27 (transform and opacity only) · #41 (measured, never eyeballed) · #43 (no field is
   ever painted behind a line of text) · #30 (every selector of the earlier file survives).
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-light.woff2") format("woff2"), url("fonts/CormorantGaramond-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-italic.woff2") format("woff2"), url("fonts/CormorantGaramond-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/cormorant-medium.woff2") format("woff2"), url("fonts/CormorantGaramond-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-light.woff2") format("woff2"), url("fonts/Inter_18pt-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant fallback"; src: local("Palatino Linotype"), local("Palatino"), local("Georgia"), local("Times New Roman"); size-adjust: 90%; ascent-override: 92%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: "Inter fallback"; src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"); size-adjust: 104%; ascent-override: 97%; descent-override: 24%; line-gap-override: 0%; }

:root {
  --display: "Cormorant Garamond", "Cormorant fallback", "Palatino Linotype", Georgia, serif;
  --body: "Inter", "Inter fallback", system-ui, -apple-system, sans-serif;
  --inscr: "Inter", "Inter fallback", system-ui, sans-serif;

  --ink: #ece6d9;
  --read: #c9c2b1;
  --dim: #a49a84;
  --whisper: var(--dim);
  --gold: #c9a558;
  --gold-hi: #e8cd8f;
  --accent: var(--gold-hi);

  --fs-inscr:  clamp(0.719rem, 0.699rem + 0.083vw, 0.781rem);
  --fs-body:   clamp(0.969rem, 0.939rem + 0.124vw, 1.063rem);
  --fs-num:    clamp(1rem,     0.919rem + 0.331vw, 1.25rem);
  --fs-disp-s: clamp(1.375rem, 1.214rem + 0.661vw, 1.875rem);
  --fs-h2:     clamp(2rem,     1.557rem + 1.818vw, 3.375rem);

  --ease-rise: cubic-bezier(0.20, 0.70, 0.20, 1);
  --t-fast: 0.35s;
  --t-mid: 0.7s;

  /* THE BASELINE UNIT. The old leading was 1.78 of a clamped size, which yields 26.7px at the
     small end and 29.37px at the large: a non integer that changes continuously with the window,
     so nothing in the rooms could ever sit on a grid (item 215). */
  --lead: 1.75rem;                /* 28px */
  --measure: 33.5em;              /* 66 characters of Inter Light, counted, not guessed (item 206) */
  --rail: clamp(0px, 6.2vw, 8.5rem);
}

@supports (color: oklch(0.75 0.12 85)) {
  :root {
    --ink:     oklch(92.6% 0.021 88);
    --read:    oklch(81.4% 0.028 88);
    --dim:     oklch(68.6% 0.036 88);
    --gold:    oklch(73.9% 0.145 84.7);
    --gold-hi: oklch(85.4% 0.108 87);
  }
}

/* ONE ACCENT PER ROOM, taken from the world's own eleven forms, so five identical documents
   become five rooms of one house (item 209). The values are the game's canonical palette, the
   same hexes the ladder's beads carry. */
body.r-support  { --accent: #b9c2d0; }   /* moonstone */
body.r-privacy  { --accent: #e6d3a6; }   /* champagne */
body.r-terms    { --accent: #eba552; }   /* amber     */
body.r-leaving  { --accent: #b9404a; }   /* garnet    */
body.r-press    { --accent: #f0c24b; }   /* radiant gold */
/* the hung numerals and the section rules take the room's accent too, so the whole volume is
   tinted by one decision rather than by five */
body.r-support .page h2::before, body.r-privacy .page h2::before,
body.r-terms .page h2::before, body.r-leaving .page h2::before,
body.r-press .page h2::before { color: color-mix(in oklab, var(--accent) 74%, var(--gold)); }
@supports not (background: color-mix(in oklab, red 50%, blue)) {
  .page h2::before { color: var(--gold); }
}

/* ═══ THE DOORS BETWEEN THE PAGES ═══
   One declaration, carried by the stylesheet every page on the property already links, so the
   fourteen documents stop flashing white at each other and cross into one another instead. It
   only pays because the door, the two worlds and the ten rooms now share one ground and one
   metal: before this pass the threshold painted #17161f under a theme-colour of #090b16 and
   handed to a world that painted #0b0c14, three grounds in one gesture (items 239, 237).
   The tall world page is deliberately NOT given a shared element name: snapshotting a seven
   thousand pixel document with eleven promoted light layers to morph one word is not a trade
   worth making on a phone. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: 260ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-group(root) { animation-duration: 0s; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
html {
  /* the flat floor, on html and NEVER also on body: a background on body paints after every
     negative z-index child and would bury the ground, the sky and the vignette (item 61) */
  background: #0a0c17;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 165, 88, 0.34) transparent;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  color: var(--read);
  font-family: var(--body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: calc(var(--lead) / 1rem * 1rem);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* THE GROUND. It used to live on body with background-attachment: fixed, which is the single
   best known way to defeat a browser's fast scroll path: iOS silently computes it as scroll, so
   the rooms showed a poorer night than the desktop, and Android honours it and repaints the
   viewport's three stacked gradients every scroll frame. A fixed div paints once into its own
   layer and never again (item 18). */
.ground {
  position: fixed; inset: 0; z-index: -4; pointer-events: none;
  background:
    radial-gradient(132% 78% at 50% -24%, #1b2244 0%, rgba(24, 29, 58, 0.55) 32%, rgba(20, 23, 46, 0) 62%),
    radial-gradient(96% 42% at 50% 118%, rgba(126, 68, 38, 0.22), transparent 70%),
    linear-gradient(180deg, #101528 0%, #0c1020 26%, #090b16 58%, #0b0a12 100%);
}
.sky {
  position: fixed; inset: -24% -34%; z-index: -3; pointer-events: none; transform: rotate(-8deg);
  background:
    radial-gradient(56% 30% at 22% 24%, rgba(72, 108, 208, 0.17), transparent 66%),
    radial-gradient(46% 25% at 74% 14%, rgba(158, 96, 206, 0.12), transparent 62%);
}
/* the rooms breathe too, slower than the world and out of phase with it, so the two surfaces are
   never on the same clock (item 224) */
@media (prefers-reduced-motion: no-preference) {
  .sky { animation: roomsky 168s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
}
@keyframes roomsky {
  0%, 100% { transform: rotate(-8deg) translate3d(0, 0, 0) scale(1); }
  50% { transform: rotate(-8deg) translate3d(-2.6vw, 1.6vh, 0) scale(1.07); }
}
.vignette {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(126% 104% at 50% 42%, transparent 52%, rgba(6, 6, 14, 0.24) 78%, rgba(4, 4, 10, 0.50) 100%);
}

a { color: var(--gold-hi); text-decoration: none; -webkit-tap-highlight-color: rgba(240, 194, 75, 0.22); }
::selection { background: #6a5320; color: #fff6dc; -webkit-text-fill-color: #fff6dc; }
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid #ffe9a8; outline-offset: 3px; border-radius: 3px;
  box-shadow: 0 0 0 5px rgba(8, 7, 14, 0.92);
}
:focus:not(:focus-visible) { outline: none; }

/* ═══ THE PAGE ASSEMBLES WITH THE READER AND LETS GO BEHIND HIM ═══
   TWO THINGS WERE BROKEN HERE AND BOTH ARE LOAD BEARING (items 1, 2).
   First: the pair was declared as one shorthand with `both` fill on the SECOND animation, so
   disperse back filled its own from state over assemble in the before phase and ASSEMBLE NEVER
   RAN, on any paragraph, in any room. Proven by probe: paragraphs 1128, 1351, 1662 and 2078
   pixels below the fold all reported opacity 1 and an identity transform.
   Second: disperse ended at opacity 0.28, which for --read over the room ground composites to
   rgb(65,64,69) and measures 1.88:1. A reader who stops mid scroll, which is what a reader of a
   support page does constantly, was left with body text at a contrast the property refuses
   everywhere else. The entry is now a RISE rather than a fade from nothing, so no rest position
   inside it can fail, and the departure floors at 0.82. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .page-head .kicker, .page-head h1, .page-head .journal,
    .page h2, .page p, .page ul, .page ol, .page dl, .page .meta, .page .creed, footer .bar > * {
      animation: assemble linear both;
      animation-timeline: view();
      animation-range: cover 1% cover 16%;
    }
    .page p, .page ul, .page ol, .page dl {
      animation: assemble linear both, disperse linear forwards;
      animation-timeline: view(), view();
      animation-range: cover 1% cover 16%, cover 90% cover 100%;
    }
  }
}
/* THE ARRIVAL IS A LIFT, AND CARRIES NO FADE AT ALL.
   Measured three times over: whatever floor a fade-in starts from, a reader can rest inside
   the range and the run is judged there. At 0.72 a chapter paragraph measured 4.48:1 against
   4.5. The travel is the arrival; the ink never leaves full value; and the whole class of
   failure is gone rather than tuned. It is also the calmer gesture: a fade up from nothing is
   the most template-looking motion on the web (items 41, 137). */
@keyframes assemble { from { opacity: 1; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes disperse { from { opacity: 1; transform: none; } to { opacity: 0.87; transform: translateY(-9px); } }

/* ═══ THE TWO CORNER MARKS ═══
   They were rgba capsules that composited DARKER than their own surround, so each read as a grey
   chip floating in the corner. Now they are inscriptions with a hairline that draws itself, at
   the touch floor, inside the safe area, with the letter space compensation halved (items 65, 44).
   And the top left mark means ONE thing on the whole property: the way back into AURUM. The
   outbound to the studio lives in the footer, where it always was (item 66). */
.home, .lang {
  position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); z-index: 6;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  font-family: var(--inscr); font-weight: 300;
  font-size: var(--fs-inscr); letter-spacing: 0.3em; text-indent: 0.15em;
  text-transform: uppercase; color: var(--dim);
  font-feature-settings: "case" 1;
  /* THE CORNER MARKS ARE FIXED AND THE PAGE SCROLLS UNDER THEM, so their ground is whatever
     happens to be there: caught over the collections' ribbons, "STUDIO KIRILOV" sat on six
     saturated colour blocks. A tight dark outline hugging the glyphs is not the painted field
     #43 refuses (that was a soft patch behind a line, and he refused it on sight); it is the
     standard cure for type over an unpredictable ground, and at this radius it is invisible as
     a shape. The alternative, a capsule, is exactly what this pass removed. */
  text-shadow: 0 1px 2px rgba(6, 5, 12, 0.95), 0 0 6px rgba(6, 5, 12, 0.75);
  transition: color var(--t-fast) ease;
}
.home { left: max(clamp(14px, 2.4vw, 28px), env(safe-area-inset-left, 0px)); }
.lang { right: max(clamp(14px, 2.4vw, 28px), env(safe-area-inset-right, 0px)); letter-spacing: 0.18em; text-indent: 0.09em; }
.home::after, .lang::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 11px; height: 1px;
  background: currentColor; opacity: 0.28;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity var(--t-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .home:hover, .lang:hover { color: var(--gold-hi); }
  .home:hover::after, .lang:hover::after { transform: scaleX(1); opacity: 0.6; }
}
.home:focus-visible::after, .lang:focus-visible::after { transform: scaleX(1); }

/* ═══ THE FOLIO ═══
   A three column grid: the rail carries the running head and the hung numerals, the middle holds
   66 characters, and the outer margin that used to carry nothing now carries the volume's own
   furniture (items 206, 207, 208). */
main.page {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--measure)) var(--rail);
  justify-content: center;
  column-gap: clamp(16px, 3vw, 46px);
  padding: clamp(88px, 15vh, 140px) max(20px, env(safe-area-inset-left, 0px)) 84px;
  position: relative;
  counter-reset: section;
}
main.page > * { grid-column: 2; }

/* the running head, set once per room in its own tongue, because a hardcoded string would put
   English in a Bulgarian margin (item 208) */
.page .rail {
  grid-column: 1; grid-row: 1 / -1;
  position: sticky; top: 46vh; align-self: start;
  justify-self: end; margin-right: 2px;
  writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
  font-family: var(--inscr); font-weight: 300;
  font-size: var(--fs-inscr); letter-spacing: 0.26em;
  text-transform: uppercase; color: rgba(164, 154, 132, 0.7);
  font-feature-settings: "case" 1;
  white-space: nowrap; pointer-events: none; user-select: none;
}
@media (max-width: 1080px) { .page .rail { display: none; } }

.page-head { text-align: center; margin-bottom: clamp(38px, 6.5vh, 62px); }
.page-head .kicker {
  position: relative; padding-bottom: 30px;
  font-family: var(--inscr); font-weight: 300;
  font-size: var(--fs-inscr); letter-spacing: 0.42em; text-indent: 0.21em;
  word-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold);
  font-feature-settings: "case" 1;
}
/* THE RULE THAT NEVER REACHED ITS OWN COLOUR. 34px of transparent to gold to transparent puts
   the full value of --gold on exactly one pixel column, so averaged over the width it rendered as
   a dim grey dash: the only ornament the five rooms had, and it read as a stray hyphen. It is
   wider now, it has a plateau, and the room's own accent sits at its centre (items 216, 209). */
.page-head .kicker::before, .page-head .kicker::after {
  content: ""; position: absolute; bottom: 13px; width: 64px; height: 1px;
}
.page-head .kicker::before {
  right: calc(50% + 13px);
  background: linear-gradient(90deg, transparent, var(--gold) 62%, var(--gold-hi));
}
.page-head .kicker::after {
  left: calc(50% + 13px);
  background: linear-gradient(90deg, var(--gold-hi), var(--gold) 38%, transparent);
}
.page-head .seal {
  position: absolute; left: 50%; bottom: 9px;
  width: 9px; height: 9px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 55%, transparent);
}
@supports not (background: color-mix(in oklab, red 50%, blue)) {
  .page-head .seal { box-shadow: 0 0 10px rgba(232, 205, 143, 0.5); }
}
.page-head h1 {
  font-family: var(--display); font-weight: 500;
  font-size: var(--fs-h2); line-height: 1.13;
  color: var(--ink); margin-top: 1.6rem;
  text-wrap: balance; letter-spacing: 0.004em;
}
.page-head .journal {
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: var(--fs-disp-s); line-height: 1.38;
  color: var(--read); margin-top: 0.7rem;
  text-wrap: balance;
}

/* THE SECTIONS. A hung roman numeral in the margin, and the heading demoted from gold to ink so
   that gold means exactly one thing in these rooms: a door (items 207, 68). */
.page h2 {
  font-family: var(--display); font-weight: 300;
  font-size: var(--fs-disp-s); line-height: 1.24;
  color: var(--ink);
  margin: calc(var(--lead) * 1.7) 0 0.45rem;
  counter-increment: section;
  position: relative;
  scroll-margin-top: 12vh;
  text-wrap: balance;
}
.page h2::before {
  content: counter(section, upper-roman);
  position: absolute; right: calc(100% + clamp(14px, 2.2vw, 30px)); top: 0.1em;
  font-size: 0.62em; letter-spacing: 0.06em;
  color: var(--gold); opacity: 0.8;
  font-variant-numeric: lining-nums;
}
@media (max-width: 720px) {
  .page h2::before { position: static; display: block; margin-bottom: 0.3rem; font-size: 0.7em; }
}
.page h2 em { font-style: italic; color: var(--ink); }

.page p, .page li, .page dd, .page dt {
  font-size: var(--fs-body);
  line-height: calc(var(--lead) / 1rem * 1rem);
  text-wrap: pretty;
  hyphens: auto;
}
.page p { margin: var(--lead) 0 0; }
.page > p:first-of-type { margin-top: 0.4rem; }

/* THE ILLUMINATED OPENING. One per room, chosen per language, because the Bulgarian and English
   opening letters are not the same letter (item 213). */
.page p.open::first-letter {
  float: left;
  font-family: var(--display); font-weight: 300;
  font-size: 5.1em; line-height: 0.64;
  margin: 0.04em 0.13em -0.04em 0;
  color: var(--gold-hi);
}
.page p.open { min-height: 3.4em; }

/* THE LISTS. They used to be indented out of alignment with the paragraphs above them by a
   generic 1.3em; now the marker hangs in the margin and the text keeps the measure (item 214). */
.page ul, .page ol { margin: var(--lead) 0 0; padding: 0; list-style: none; }
.page li { position: relative; padding-left: 1.5em; margin: 0.55rem 0; }
.page ul > li::before {
  content: ""; position: absolute; left: 0.14em; top: 0.62em;
  width: 5px; height: 5px; transform: rotate(45deg);
  background: var(--accent);
}
/* THE RITE. The deletion steps are the one procedure a worried player follows, and they deserve
   better than a browser's own numbers (item 211). */
.page ol { counter-reset: step; }
.page ol > li { padding-left: 2.6em; margin: 0 0 1.1rem; }
.page ol > li::before {
  content: counter(step); counter-increment: step;
  position: absolute; left: 0; top: -0.12em;
  font-family: var(--display); font-weight: 300; font-size: 1.9em; line-height: 1;
  color: var(--gold); opacity: 0.85;
  font-variant-numeric: lining-nums;
}

/* THE CREED. The one list that carries the studio's whole position should not look like a
   shopping list (item 212). */
.page .creed {
  margin: calc(var(--lead) * 1.4) 0 0;
  padding: calc(var(--lead) * 0.9) 0;
  border-top: 1px solid rgba(201, 165, 88, 0.30);
  border-bottom: 1px solid rgba(201, 165, 88, 0.30);
  list-style: none;
}
.page .creed li { padding-left: 0; margin: 0.5rem 0; font-family: var(--display); font-size: var(--fs-disp-s); line-height: 1.34; color: var(--ink); }
.page .creed li::before { display: none; }
.page .creed li strong { color: var(--gold-hi); font-weight: 300; }

/* THE FACTSHEET. Seven values used to start at seven different x positions (item 210). */
.page .sheet {
  display: grid; grid-template-columns: minmax(8.5em, auto) 1fr;
  column-gap: 0;
  margin: var(--lead) 0 0;
}
.page .sheet dt {
  padding-right: clamp(16px, 2.6vw, 34px);
  font-family: var(--inscr); font-weight: 300;
  font-size: var(--fs-inscr); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim);
  padding: 0.62rem 0 0.62rem;
  border-top: 1px solid rgba(201, 165, 88, 0.16);
  font-feature-settings: "case" 1;
}
.page .sheet dd {
  color: var(--ink);
  padding: 0.5rem 0 0.62rem;
  border-top: 1px solid rgba(201, 165, 88, 0.16);
}
.page .sheet dt:first-of-type, .page .sheet dd:first-of-type { border-top: none; padding-top: 0; }
@media (max-width: 560px) {
  .page .sheet { grid-template-columns: 1fr; }
  .page .sheet dt { padding-bottom: 0.1rem; }
  .page .sheet dd { border-top: none; padding-top: 0; }
}

.page strong { color: var(--ink); font-weight: 300; letter-spacing: 0.006em; }
/* an italic is its own emphasis: it does not need the link's colour, and sharing it meant a
   reader could not tell which of two gold runs in one sentence was the door (item 68) */
.page em { font-style: italic; color: var(--ink); }
.page .meta {
  font-family: var(--inscr); font-weight: 300;
  font-size: var(--fs-inscr); letter-spacing: 0.08em;
  color: var(--dim);
}
.page .dateline { margin-bottom: calc(var(--lead) * 0.4); }
.page .scope { margin-top: 0; }
.page .whisper { margin-top: calc(var(--lead) * 1.6); font-style: italic; font-family: var(--display); font-size: var(--fs-disp-s); color: var(--dim); letter-spacing: 0; text-transform: none; }

/* THE DOORS. The underline used to be a border-bottom on the inline box, which draws 0.287em
   below the Cormorant baseline and cut straight through every descender, and it composited to
   1.98:1 against the ground, so the link's only non colour affordance was invisible (items 69, 68). */
.page a:not(.gate) {
  text-decoration: underline;
  text-decoration-color: rgba(232, 205, 143, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
  transition: color var(--t-fast) ease, text-decoration-color var(--t-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .page a:not(.gate):hover { color: #fff3d6; text-decoration-color: #fff3d6; }
}
/* the one live action in each room wears the volume's own lozenge (item 30 of the rooms pass) */
.page a[href^="mailto:"]::after {
  content: ""; display: inline-block; width: 4px; height: 4px;
  transform: rotate(45deg); background: var(--gold-hi);
  margin-left: 0.45em; vertical-align: 0.24em;
}

/* ═══ THE FOOT ═══
   Four faults in one place: the rule spanned 1440 while its content spanned 720, the colophon was
   brighter than the links above it, the targets were 13px tall, and the link set sat in a bare
   div, so the rooms had no navigation landmark at all while the world page did (item 218). */
footer.foot { padding: 0 max(20px, env(safe-area-inset-left, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)); }
footer.foot .bar {
  max-width: calc(var(--measure) + 2 * var(--rail) + 2 * clamp(16px, 3vw, 46px));
  margin: 0 auto;
  padding-top: 26px;
  border-top: 1px solid rgba(201, 165, 88, 0.20);
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  align-items: baseline; justify-content: space-between;
}
footer.foot nav { display: flex; flex-wrap: wrap; gap: 0 2px; margin-left: -14px; }
footer.foot nav a {
  font-family: var(--inscr); font-weight: 300;
  font-size: var(--fs-inscr); letter-spacing: 0.2em; text-indent: 0.1em;
  text-transform: uppercase; color: var(--read);
  padding: 13px 14px; position: relative;
  font-feature-settings: "case" 1;
  transition: color var(--t-fast) ease;
}
footer.foot nav a + a::before {
  content: ""; position: absolute; left: -1px; top: 50%; width: 1px; height: 10px; margin-top: -5px;
  background: rgba(164, 154, 132, 0.3);
}
@media (hover: hover) and (pointer: fine) { footer.foot nav a:hover { color: var(--gold-hi); } }
footer.foot .colophon {
  font-family: var(--inscr); font-weight: 300;
  font-size: var(--fs-inscr); letter-spacing: 0.1em; color: var(--dim);
  padding: 13px 0;
}
footer.foot .colophon .yr { font-family: var(--display); font-variant-numeric: oldstyle-nums; font-size: 1.08em; }

/* the Cyrillic hand: the same third off every tracked run, and its compensation with it */
:lang(bg) .page-head .kicker { letter-spacing: 0.29em; text-indent: 0.145em; }
:lang(bg) .home { letter-spacing: 0.21em; text-indent: 0.105em; }
:lang(bg) footer.foot nav a { letter-spacing: 0.14em; text-indent: 0.07em; }
:lang(bg) .page .rail { letter-spacing: 0.18em; }
:lang(bg) .page .sheet dt { letter-spacing: 0.12em; }

/* ═══ THE SMALL NIGHT ═══
   world.css carried ZERO width media queries, and every room declared its viewport without
   viewport-fit=cover while the three world pages declared it (items 163, 19). */
@media (max-width: 900px) {
  :root { --measure: 100%; --lead: 1.6875rem; }
  main.page { grid-template-columns: 1fr; padding-top: clamp(64px, 11vh, 104px); }
  .page p.open::first-letter { font-size: 4.2em; }
}
@media (max-width: 560px) {
  footer.foot .bar { justify-content: flex-start; }
  footer.foot nav a { padding: 12px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .sky { animation: none; }
  .page-head .kicker, .page-head h1, .page-head .journal,
  .page h2, .page p, .page ul, .page ol, .page dl, .page .meta, .page .creed, footer .bar > * {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

@media (forced-colors: active) {
  .ground, .sky, .vignette, .page-head .kicker::after, .page-head .seal { display: none !important; }
  .page .creed { border-color: CanvasText; }
  .page ul > li::before, .page a[href^="mailto:"]::after { forced-color-adjust: none; }
}
@media (prefers-contrast: more) {
  :root { --read: #ded8c9; --dim: #c3b9a1; }
}

/* ═══ PRINT ═══
   These are the two documents a reviewer, a lawyer or a data protection authority prints, and
   before this the terms page could come out of a printer with entire clauses erased by a
   decorative fade (item 11). */
@media print {
  html { background: #fff; }
  body { color: #111; font-size: 10.5pt; line-height: 1.5; }
  .ground, .sky, .vignette, .home, .lang, .page .rail, .page-head .seal { display: none !important; }
  .page-head .kicker, .page h2, .page-head h1 { color: #000; }
  .page-head .kicker::after { background: #999; }
  .page .meta, footer.foot .colophon, footer.foot nav a { color: #444; }
  main.page {
    display: block; max-width: none;
    padding: 0 0 8mm;
  }
  .page h2::before { position: static; display: inline; margin-right: 0.6em; color: #666; }
  .page a { color: #111; text-decoration: underline; }
  .page a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }
  .page a[href^="mailto:"]::after { content: none; }
  .page p, .page ul, .page ol, .page dl, .page-head .kicker, .page-head h1,
  .page-head .journal, .page h2, .page .meta, .page .creed, footer .bar > * {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .page .creed { border-color: #999; }
  .page .sheet dt, .page .sheet dd { border-top-color: #ccc; }
  footer.foot .bar { border-top-color: #999; }
  h2, .page .sheet { page-break-inside: avoid; }
}