/* AlterVision Mundus · Muzej
   Every colour below is read from the program's own look data
   (AlterVision 1.18.4, app/resources/scenes/videz.json): theme V013_SALT_MEMORY
   for walls, copper and light, "listina" for paper and ink.
   Four materials only: rose salt, copper, paper, candlelight. */

@font-face { font-family: 'Cinzel'; font-weight: 600; font-display: swap; src: url('../fonts/cinzel-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20C0; }
@font-face { font-family: 'Cinzel'; font-weight: 600; font-display: swap; src: url('../fonts/cinzel-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+2212; }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20C0; }
@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+2212; }
/* č š ž đ ć and their capitals from a small cut of the same font, so one Ž does not fetch the whole extended file.
   Declared last: for these letters it is checked first; the large latin-ext file stays for every other extended letter. */
@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-sl-wght-normal.woff2') format('woff2'); unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E; }
/* Sub-pages (privacy, legal, 404): the same files under their own names with font-display: optional. A font that arrives
   after the text was first drawn is kept for the next page instead of moving this one (the cause of the layout shift).
   Their only extended letters are č š ž đ ć, so Inter Doc has no large latin-ext file to fall back on. */
@font-face { font-family: 'Cinzel Doc'; font-weight: 600; font-display: optional; src: url('../fonts/cinzel-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+1E00-1E9F, U+20A0-20C0; }
@font-face { font-family: 'Cinzel Doc'; font-weight: 600; font-display: optional; src: url('../fonts/cinzel-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+2212; }
@font-face { font-family: 'Inter Doc'; font-weight: 100 900; font-display: optional; src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-2193, U+2212; }
@font-face { font-family: 'Inter Doc'; font-weight: 100 900; font-display: optional; src: url('../fonts/inter-sl-wght-normal.woff2') format('woff2'); unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E; }

:root {
  --night: #22070a;        /* karton.podlaga_dno */
  --night-2: #33090e;      /* karton.kristal_temno */
  --slate: #380e10;        /* plosca.podlaga */
  --slate-hi: #4d1519;     /* karton.podlaga_vrh */
  --edge: #7a4a4a;         /* plosca.obroba */
  --copper: #df9f80;       /* plosca.opomba_barva */
  --cream: #fff3d6;        /* plosca.naslov_barva */
  --sand: #e8d5a8;         /* plosca.besedilo_barva */
  --brass-1: #f6d3b8; --brass-2: #e0a978; --brass-3: #8a5a3c; --brass-4: #d9a273; --brass-5: #8a5a3c; /* karton.zila, knjiga_v3.baker_svetla, baker, karton.obroba_svetla */
  --paper: #f8f3e4;        /* listina.pergament */
  --ink: #28221c;          /* listina.crnilo */
  --ink-2: #4e483c;        /* listina.crnilo_drugotno */
  --rule: #c4baa4;         /* listina.crta */
  --deep: #140305;         /* the darkest water and shadow, already used by the first version */
  --candle: #ffe2aa;       /* candle flame, already used by the first version */
  --field: #fffdf6;        /* form field on paper, already used by the first version */
  --err: #8a2a1c;          /* error ink on paper, already used by the first version */
  --brass: linear-gradient(135deg, var(--brass-1) 0%, var(--brass-2) 24%, var(--brass-3) 52%, var(--brass-4) 78%, var(--brass-5) 100%);
  --brass-btn: linear-gradient(180deg, var(--brass-1) 0%, var(--brass-2) 55%, var(--brass-4) 100%);

  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --fs-h1: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem);
  --fs-h2: clamp(1.75rem, 1.1rem + 2.4vw, 3.25rem);
  --fs-h3: clamp(1.125rem, 1.05rem + .3vw, 1.375rem);
  --fs-lead: clamp(1.125rem, 1.03rem + .35vw, 1.375rem);
  --fs-body: 1.125rem;     /* 18px: komplet.besedilo_pt */
  --fs-small: 1rem;        /* 16px: komplet.najmanjse_pt */

  --gutter: clamp(16px, 5vw, 80px);
  --sec: clamp(88px, 10vw, 168px);
  --radius: 6px;           /* listina.zaobljenost */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --top-h: 68px;
  color-scheme: dark;
}
html.doc-page { --display: 'Cinzel Doc', 'Trajan Pro', Georgia, serif; --text: 'Inter Doc', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--top-h) + 16px); scroll-padding-bottom: 28px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--sand); font: 400 var(--fs-body)/1.6 var(--text); overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--cream); text-underline-offset: .2em; }
a:hover { color: var(--copper); }
:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
.wrap { width: min(100% - 2 * var(--gutter), 1240px); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--paper); color: var(--ink); }
.skip:focus { top: 12px; }
.skip:hover { color: var(--ink); }

h1, h2 { font-family: var(--display); font-weight: 600; color: var(--cream); letter-spacing: .01em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.08; }
h2 { font-size: var(--fs-h2); line-height: 1.14; }
h3 { font: 600 var(--fs-h3)/1.3 var(--text); color: var(--cream); }
.lead { font-size: var(--fs-lead); line-height: 1.55; max-width: 34em; text-wrap: pretty; }
.small { font-size: var(--fs-small); }
.prov { font-size: var(--fs-small); line-height: 1.45; color: var(--copper); }

/* Buttons: one set, used everywhere (the program's "en komplet gradnikov") */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px; border: 1px solid transparent; border-radius: var(--radius); font: 600 1.0625rem/1.2 var(--text); text-align: center; text-decoration: none; cursor: pointer; transition: filter .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease); }
.btn:active { transform: translateY(1px); }
.btn--small { min-height: 44px; padding: 8px 18px; font-size: 1rem; }
.btn--brass { background: var(--brass-btn); color: var(--night); box-shadow: inset 0 1px 0 rgba(255, 243, 214, .55), 0 6px 18px -8px rgba(0, 0, 0, .7); }
.btn--brass:hover { filter: brightness(1.12); color: var(--night); }
.btn--line { background: rgba(34, 7, 10, .55); color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--copper); }
.btn--line:hover { background: var(--slate); color: var(--cream); }
.btn--ink { background: var(--ink); color: var(--paper); width: 100%; }
.btn--ink:hover { background: #3b332a; color: var(--paper); }

/* The panel: plum body, copper edge. The program's "relic" window. */
.panel { position: relative; background: linear-gradient(180deg, var(--slate-hi), var(--night-2)); border-radius: calc(var(--radius) + 2px); padding: clamp(24px, 3.2vw, 48px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .85); }
.panel::before { content: ''; position: absolute; inset: 0; padding: 3px; border-radius: inherit; background: var(--brass); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }

/* The deed: light paper */
.deed { position: relative; background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); box-shadow: 0 24px 50px -28px #000; color-scheme: light; }
/* Paper and salt you can barely see: small tiles cut from the program's scenes (Valter's ledger, the crystal salt tile) */
.deed::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: url('tex/paper.jpg') 0 0 / 56px 46px repeat; background: image-set(url('tex/paper.avif') type('image/avif'), url('tex/paper.jpg') type('image/jpeg')) 0 0 / 56px 46px repeat; opacity: .05; pointer-events: none; }
.panel::after, .plaque::after, .duty::after, .links::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: url('tex/salt-panel.jpg') 0 0 / 300px 95px repeat; background: image-set(url('tex/salt-panel.avif') type('image/avif'), url('tex/salt-panel.jpg') type('image/jpeg')) 0 0 / 300px 95px repeat; opacity: .05; pointer-events: none; }
.deed h2, .deed h3, .deed h4 { color: var(--ink); }
.deed a { color: var(--ink); }
.deed a:hover { color: var(--err); }
.deed :focus-visible { outline-color: var(--ink); }

/* Switch: a button with aria-pressed. Its name is the label alone; On/Off is a visual extra. */
.switch { display: inline-flex; align-items: center; gap: 16px; min-height: 56px; padding: 8px 20px 8px 8px; border: 1px solid transparent; border-radius: 999px; background: var(--slate); color: var(--cream); font: 600 1.0625rem/1.2 var(--text); cursor: pointer; box-shadow: inset 0 0 0 1px var(--edge); }
.switch__track { position: relative; width: 68px; height: 40px; border-radius: 999px; background: var(--night); box-shadow: inset 0 0 0 1px var(--edge); flex: none; }
.switch__knob { position: absolute; left: 4px; top: 4px; width: 32px; height: 32px; border-radius: 50%; background: var(--brass-btn); transition: transform .32s var(--ease); }
.switch[aria-pressed="true"] .switch__knob { transform: translateX(28px); }
.switch--small { gap: 10px; min-height: 44px; padding: 4px 14px 4px 6px; font-size: 1rem; }
.switch--small .switch__track { width: 46px; height: 28px; }
.switch--small .switch__knob { left: 3px; top: 3px; width: 22px; height: 22px; }
.switch--small[aria-pressed="true"] .switch__knob { transform: translateX(18px); }
.switch__state { min-width: 2.2ch; font-weight: 500; color: var(--copper); }
.switch__state::after { content: attr(data-off); }
.switch[aria-pressed="true"] .switch__state::after { content: attr(data-on); }

/* Top bar */
.top { position: fixed; inset: 0 0 auto 0; z-index: 50; background: var(--night); border-bottom: 1px solid var(--edge); }
.top__bar { display: flex; align-items: center; gap: 16px; min-height: var(--top-h); }
.mark { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-right: auto; color: var(--cream); text-decoration: none; font: 600 1.0625rem/1 var(--display); letter-spacing: .06em; }
.mark__gem { width: 18px; height: 24px; color: var(--copper); flex: none; }
.mark__sub { color: var(--copper); }
.top__nav { display: flex; gap: 4px; }
.top__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--sand); text-decoration: none; font-weight: 500; font-size: 1rem; }
.top__nav a:hover { color: var(--cream); }
.menu { display: none; position: relative; }
.menu__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius); color: var(--cream); font: 600 1rem/1 var(--text); cursor: pointer; list-style: none; box-shadow: inset 0 0 0 1.5px var(--copper); user-select: none; }
.menu__btn::-webkit-details-marker { display: none; }
.menu__icon { position: relative; width: 18px; height: 14px; border-block: 2px solid currentColor; flex: none; }
.menu__icon::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; border-top: 2px solid currentColor; }
.menu__panel { position: absolute; right: 0; top: calc(100% + 12px); width: max-content; min-width: 240px; max-width: calc(100vw - 2 * var(--gutter)); padding: 8px; border: 1px solid transparent; border-radius: 8px; background: var(--slate); box-shadow: inset 0 0 0 1px var(--copper), 0 24px 48px -16px #000; }
.menu__nav { display: grid; }
.menu__nav a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 4px; color: var(--cream); text-decoration: none; font-weight: 500; }
.menu__nav a:hover { background: var(--slate-hi); color: var(--cream); }
.menu__motion { margin: 8px 8px 4px; }
@media (max-width: 1099px) { .top__nav, .top__motion { display: none; } .menu { display: block; } }
@media (max-width: 519px) {
  .top__bar { gap: 8px; }
  .mark { gap: 8px; font-size: .9375rem; letter-spacing: .04em; }
  .mark__sub { display: none; }
  .top__cta { max-width: 8.6em; min-height: 44px; padding: 4px 10px; font-size: .875rem; line-height: 1.15; }
  .menu__btn { padding: 0 10px; gap: 8px; }
}
@media (max-width: 379px) {
  .mark__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mark { min-width: 44px; justify-content: center; }
}

/* Entrance */
.hero { position: relative; display: grid; align-items: end; min-height: min(100svh - 104px, 1100px); padding: calc(var(--top-h) + 24px) 0 40px; overflow: hidden; }
.hero__scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 100%; }
.hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 26%; background: linear-gradient(to bottom, rgba(34, 7, 10, 0), var(--night)); pointer-events: none; }
.hero__prov { position: absolute; z-index: 2; right: var(--gutter); bottom: 14px; max-width: calc(100% - 2 * var(--gutter)); padding: 6px 12px; border-radius: 4px; background: rgba(20, 3, 5, .86); text-align: right; }
.hero__panel-wrap { position: relative; z-index: 1; }
.hero__panel { max-width: 660px; }
.hero__panel .lead { margin-top: 20px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--edge); font-size: var(--fs-small); color: var(--sand); }
.facts li { display: flex; align-items: center; gap: 10px; }
.facts li::before { content: ''; width: 7px; height: 7px; transform: rotate(45deg); background: var(--copper); flex: none; }
@media (max-width: 1099px) { .hero { padding-bottom: 76px; } .hero__prov { left: var(--gutter); text-align: left; } }
@media (max-width: 760px) { .hero { padding-bottom: 96px; } }
@media (max-width: 640px) {
  .hero { display: block; min-height: 0; padding-top: var(--top-h); }
  /* A square cut, anchored right: the carved wall name stays out of the cut instead of being sliced in half */
  .hero__scene { position: relative; inset: auto; height: max(46svh, 100vw); object-position: 100% 50%; }
  .hero::after { display: none; }
  .hero__panel-wrap { margin-top: -56px; }
  .hero__ctas .btn { width: 100%; }
}
@media (max-width: 400px) { .hero { padding-bottom: 120px; } }

/* Sections */
.sec { padding-block: var(--sec); }
.sec--deep { background: var(--night-2); }
.head { text-align: center; padding-block: var(--sec) clamp(40px, 5vw, 72px); }
.head .lead { margin: 20px auto 0; }
.head--left { text-align: left; padding-block: 0 clamp(36px, 4.5vw, 64px); }
.head--left .lead { margin-inline: 0; }

/* A quiet sign that the page goes on: a copper chevron at the head of the corridor */
.halls-sec { position: relative; }
.halls-sec::before { content: ''; position: absolute; left: 50%; top: 30px; width: 20px; height: 20px; margin-left: -10px; border-right: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: rotate(45deg); }

/* ---------- The walk ---------- */
/* Default (phones, narrow or low windows, Motion off, no JS): a quiet wall. One hall after another:
   a copper frame on candle-lit salt with its carved numeral, the plaque, and the signs on paper. */
.walk__view, .walk__hint, .plan { display: none; }
.walk__skip { display: flex; width: max-content; max-width: 100%; margin: 0 auto clamp(40px, 6vw, 72px); }
.halls { width: min(100% - 2 * var(--gutter), 1240px); margin-inline: auto; display: grid; gap: clamp(64px, 9vw, 120px); padding-bottom: var(--sec); }
.hall { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) {
  .hall { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "fig plaque" "fig signs"; gap: 28px clamp(32px, 5vw, 72px); }
  .hall[data-side="r"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-areas: "plaque fig" "signs fig"; }
  .hall > .hall__fig { grid-area: fig; }
  .hall > .plaque { grid-area: plaque; }
  .hall > .signs { grid-area: signs; }
}
/* The wall behind a frame: rose salt, lit from below by two candles, the hall's numeral carved above */
/* The same pool of candlelight as on the cave wall around a frame: brightest at both sides of the frame's foot and above them.
   Here it never breathes: the still list is for phones and for a calm visit. */
.hall__fig { position: relative; padding: clamp(52px, 8vw, 84px) clamp(14px, 3vw, 40px) clamp(22px, 4vw, 44px); border-radius: 8px; overflow: hidden;
  --fig-light: radial-gradient(50% 96% at 6% 98%, rgba(255, 226, 170, .56), rgba(224, 145, 95, .24) 45%, rgba(224, 145, 95, 0) 100%),
    radial-gradient(50% 96% at 94% 98%, rgba(255, 226, 170, .56), rgba(224, 145, 95, .24) 45%, rgba(224, 145, 95, 0) 100%),
    linear-gradient(180deg, rgba(20, 3, 5, .56), rgba(34, 7, 10, .22) 70%, rgba(34, 7, 10, .1));
  background: var(--fig-light), linear-gradient(160deg, var(--slate-hi), var(--night-2) 60%, var(--slate)); }
.walk.is-near .hall__fig { background: var(--fig-light), url('tex/salt-crystal.jpg') 0 0 / var(--salt-size) repeat;
  background: var(--fig-light), image-set(url('tex/salt-crystal.avif') type('image/avif'), url('tex/salt-crystal.jpg') type('image/jpeg')) 0 0 / var(--salt-size) repeat; }
.walk.is-near .hall[data-side="r"] .hall__fig { background-position: 0 0, 0 0, 0 0, 100% 0; }
.hall__fig::before { content: attr(data-numeral); content: attr(data-numeral) / ''; position: absolute; left: 0; right: 0; top: clamp(10px, 2vw, 22px); text-align: center; font: 600 clamp(1.75rem, 1.2rem + 2.4vw, 3rem)/1 var(--display); letter-spacing: .14em; text-indent: .14em; color: #c08a6c; text-shadow: 0 -2px 0 rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 226, 170, .28); pointer-events: none; }
.mirror { position: relative; display: block; width: 100%; padding: clamp(8px, 1vw, 14px); border: 1px solid transparent; border-radius: 4px; background: var(--brass); box-shadow: inset 0 0 0 1px rgba(255, 243, 214, .5), 0 30px 50px -24px #000; transition: filter .18s var(--ease), opacity .35s linear; }
.js .mirror[data-enter] { cursor: zoom-in; }
.js .mirror[data-enter]:hover { filter: brightness(1.08); }
.mirror img { width: 100%; border-radius: 2px; box-shadow: 0 0 0 1px var(--brass-3), inset 0 0 0 1px #000; }
/* With script, a hall's picture is put in place (and so fetched) when the hall comes near the window,
   not while the page loads. The frame keeps its shape meanwhile. Without script the browser's own lazy loading does it. */
.mirror picture { display: block; aspect-ratio: 16 / 10; }
.js .walk:not(.is-3d) .hall:not(.is-due) .hall__fig img { display: none; }
/* Each scene shows itself once as it comes into view (only with script and with motion welcome) */
.js.motion-on .walk:not(.is-3d) .hall:not(.is-seen) .mirror { opacity: 0; }

/* The plaque: the dark plate with a copper edge */
.plaque { position: relative; padding: clamp(22px, 2.4vw, 30px); border-radius: 8px; background: linear-gradient(180deg, var(--slate-hi), var(--night-2)); box-shadow: 0 30px 60px -30px #000; }
.plaque::before { content: ''; position: absolute; inset: 0; padding: 3px; border-radius: inherit; background: var(--brass); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.plaque__hall { font: 600 1rem/1 var(--display); letter-spacing: .12em; color: var(--copper); }
.plaque__title { margin-top: 10px; font: 600 clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem)/1.1 var(--display); color: var(--cream); letter-spacing: .02em; }
.plaque__text { margin-top: 16px; max-width: 32em; text-wrap: pretty; }
.plaque__prov { margin-top: 14px; }
.plaque .btn { margin-top: 22px; }
.signs { padding: 20px 24px; }
.signs__title { font: 600 1rem/1.2 var(--display); letter-spacing: .08em; }
.signs__list { margin-top: 10px; }
.signs__list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 20px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.4; }
.signs__list li > span:first-child { font-weight: 600; letter-spacing: .04em; }
.signs__list li > span:last-child { color: var(--ink-2); }
.walk__exit { width: min(100% - 2 * var(--gutter), 1240px); margin: 0 auto; padding-bottom: var(--sec); text-align: center; }
.walk__exit-title { margin-bottom: 24px; font: 600 var(--fs-h2)/1.14 var(--display); color: var(--cream); }

/* The cave: switched on by site.js on wide, tall windows while Motion is on.
   Lengths inside the world are in u (1u = min(W/100, H/60)); site.js sets --u in px. */
.walk.is-3d { height: calc(var(--stops) * 78vh + 100vh); }
.walk.is-3d .walk__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.walk.is-3d .walk__view { display: block; position: absolute; inset: 0; overflow: hidden; isolation: isolate; perspective: var(--p); perspective-origin: 50% 46%; background: radial-gradient(80% 60% at 50% 46%, var(--night) 0%, var(--deep) 80%); }
.walk__world { position: absolute; left: 50%; top: 46%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.w-el { position: absolute; left: 0; top: 0; }
/* Salt walls and ceiling: one tile of crystal salt cut from the Office scene, repeated in its own proportions (600 x 190)
   at 30u x 9.5u of the world. A length of wall is 150u, five tiles, so each length carries on from the last without a seam.
   Large planes are drawn small and scaled up (sc in site.js), so the tile is divided by the same factor.
   Light is part of the wall: a warm pool around each frame (::before), salt still readable in between,
   air that grows warm with distance (.w-air), daylight by the mouth. */
.walk__world { --tex: url('tex/salt-crystal.jpg'); --none: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  --tw: calc(30 * var(--u)); --th: calc(9.5 * var(--u));
  --ends: linear-gradient(90deg, rgba(20, 3, 5, .5) 0%, rgba(20, 3, 5, .1) 16%, rgba(20, 3, 5, .1) 84%, rgba(20, 3, 5, .5) 100%);
  --warm: linear-gradient(rgba(224, 145, 95, .06), rgba(224, 145, 95, .06)); }
@supports (background-image: image-set(url('a.avif') type('image/avif'))) {
  .walk__world { --tex: image-set(url('tex/salt-crystal.avif') type('image/avif'), url('tex/salt-crystal.jpg') type('image/jpeg')); }
}
.w-wall { background: var(--glow, var(--none)), var(--ends), linear-gradient(180deg, rgba(20, 3, 5, .6) 0%, rgba(20, 3, 5, .3) 55%, rgba(20, 3, 5, .44) 100%), var(--warm), var(--tex) 0 0 / calc(var(--tw) / 3) calc(var(--th) / 3) repeat, var(--night-2); }
/* A hall's own length of wall: the outer candle stands against it (36 % along a left wall, 64 % along a right one),
   so the wall is brightest beside that candle and above it (::before, a band 34 % of the wall long), with a wider pool
   behind the frame that holds still (--glow). Only this candle's pool breathes: walls never fade, so a breathing layer
   on them costs the browser least (V14). The pools on the slab, the ceiling and the water hold still. */
.w-wall.is-lit { --glow: radial-gradient(44% 80% at 50% 100%, rgba(255, 226, 170, .36) 0%, rgba(224, 145, 95, .18) 40%, rgba(224, 145, 95, 0) 100%); }
.w-wall.is-lit::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--cx, 36%) - 17%); width: 34%; pointer-events: none; background:
  radial-gradient(47% 64% at 50% 72%, rgba(255, 226, 170, .5) 0%, rgba(224, 145, 95, .24) 45%, rgba(224, 145, 95, 0) 100%); }
.w-wall.is-lit.is-r { --cx: 64%; }
/* by the cave mouth daylight takes over from candlelight: it grows towards the far end */
.w-wall.is-dawn { --ends: var(--none); }
.w-wall.is-dawn.is-l { --glow: linear-gradient(90deg, rgba(20, 3, 5, .9) 0%, rgba(246, 211, 184, .12) 55%, rgba(246, 211, 184, .34) 100%); }
.w-wall.is-dawn.is-r { --glow: linear-gradient(270deg, rgba(20, 3, 5, .9) 0%, rgba(246, 211, 184, .12) 55%, rgba(246, 211, 184, .34) 100%); }
.w-wall.is-day { --ends: var(--none); --glow: linear-gradient(rgba(246, 211, 184, .34), rgba(246, 211, 184, .34)); }
.w-ceil { background: var(--glow, var(--none)), var(--ends), linear-gradient(rgba(20, 3, 5, .5), rgba(20, 3, 5, .5)), var(--warm), var(--tex) 0 0 / calc(var(--tw) / 4) calc(var(--th) / 4) repeat, var(--night-2); }
/* the candles' light thrown up onto the ceiling over the hall */
.w-ceil.is-lit::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(48% 66% at 50% 50%, rgba(255, 226, 170, .34) 0%, rgba(224, 145, 95, .2) 45%, rgba(224, 145, 95, 0) 100%); }
.w-ceil.is-dawn, .w-ceil.is-day { --ends: var(--none); --glow: linear-gradient(90deg, rgba(20, 3, 5, .5), rgba(246, 211, 184, .18)); }
/* The slab a frame hangs on: the wall steps out towards the walker, lit from below by the two candles */
.w-slab { background: linear-gradient(180deg, rgba(20, 3, 5, .3) 0%, rgba(20, 3, 5, .08) 100%), var(--tex) 0 0 / calc(var(--tw) / 2) calc(var(--th) / 2) repeat, var(--night-2);
  box-shadow: inset 0 0 0 1px rgba(20, 3, 5, .6); }
/* The two candles stand at the slab's lower corners (flames at 72 % of its height): brightest there and above them */
.w-slab::before { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(44% 100% at 2% 72%, rgba(255, 226, 170, .66) 0%, rgba(224, 145, 95, .32) 42%, rgba(224, 145, 95, 0) 100%),
  radial-gradient(44% 100% at 98% 72%, rgba(255, 226, 170, .66) 0%, rgba(224, 145, 95, .32) 42%, rgba(224, 145, 95, 0) 100%),
  radial-gradient(80% 70% at 50% 100%, rgba(224, 145, 95, .22) 0%, rgba(224, 145, 95, 0) 100%);
  }
/* The hall's numeral, carved into the slab above the frame and catching the candlelight like the copper */
.w-num { display: grid; place-items: center; font: 600 calc(8.5 * var(--u))/1 var(--display); letter-spacing: .14em; text-indent: .14em; color: #c08a6c; text-shadow: 0 calc(-.16 * var(--u)) 0 rgba(0, 0, 0, .7), 0 calc(.12 * var(--u)) 0 rgba(255, 226, 170, .28); white-space: nowrap; }
/* Still dark water. The dark itself is the stage; each length adds a sheen that dies away at its edges,
   and stays see-through enough to carry the mirrored frames beneath it. */
.w-water { background: radial-gradient(closest-side, rgba(90, 26, 32, .5) 0%, rgba(51, 9, 14, .32) 55%, rgba(34, 7, 10, 0) 100%); }
.w-water.is-dawn, .w-water.is-day { background: radial-gradient(closest-side, rgba(246, 211, 184, .2) 0%, rgba(122, 74, 74, .24) 55%, rgba(51, 9, 14, 0) 100%); }
/* Candlelight on the water in front of the frame (wider and stronger than in v2): an outer pool on the plane, a bright core in ::before. */
.w-glow { background: radial-gradient(closest-side, rgba(255, 226, 170, .34) 0%, rgba(224, 145, 95, .22) 45%, rgba(224, 145, 95, 0) 100%); }
.w-glow::before { content: ''; position: absolute; inset: 20% 24%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 230, 180, .5) 0%, rgba(255, 226, 170, .24) 50%, rgba(255, 226, 170, 0) 100%); }
/* Warm air: a thin veil across the middle of the cave after every second hall. Each adds a little, so the farther,
   the hazier; the last one, before the mouth, is daylight. site.js shows them only from 180u ahead of the eye. */
.w-air { background: radial-gradient(closest-side, rgba(232, 156, 110, .25) 0%, rgba(232, 156, 110, .14) 55%, rgba(232, 156, 110, 0) 100%); pointer-events: none; }
.w-air.is-day { background: radial-gradient(closest-side, rgba(255, 236, 210, .26) 0%, rgba(246, 211, 184, .14) 60%, rgba(246, 211, 184, 0) 100%); }
/* Copper frame with its scene, two candles at its foot */
.w-mirror { padding: var(--fr); background: var(--brass); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 243, 214, .6), 0 0 calc(5 * var(--u)) calc(-1 * var(--u)) rgba(224, 145, 95, .6); }
.w-mirror > i { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px #000, inset 0 0 calc(4 * var(--u)) rgba(0, 0, 0, .35); }
/* Each candle reaches down below the waterline (2u under the frame): there its light is mirrored as a short vertical band */
.w-mirror::before, .w-mirror::after { content: ''; position: absolute; bottom: calc(-17.6 * var(--u)); width: calc(14 * var(--u)); height: calc(30 * var(--u)); background:
  radial-gradient(closest-side, rgba(255, 243, 214, 1) 0%, rgba(255, 226, 170, .95) 4%, rgba(255, 226, 170, .34) 11%, rgba(224, 145, 95, .14) 42%, rgba(224, 145, 95, 0) 100%) 50% 0 / 100% calc(14 * var(--u)) no-repeat,
  linear-gradient(180deg, var(--sand), var(--edge)) 50% calc(7.6 * var(--u)) / calc(.9 * var(--u)) calc(6.4 * var(--u)) no-repeat,
  radial-gradient(50% 100% at 50% 0%, rgba(255, 246, 222, 1) 0%, rgba(255, 234, 190, .84) 46%, rgba(224, 145, 95, .2) 80%, rgba(224, 145, 95, 0) 100%) 50% calc(14.4 * var(--u)) / calc(2.8 * var(--u)) calc(13 * var(--u)) no-repeat;
  pointer-events: none; }
/* Copper catches the light: a narrow highlight on the frame's top edge and a window over a bright copy of the numeral.
   site.js moves both with transform from where the camera stands; when the camera rests, they rest. */
.w-glint { position: absolute; left: 50%; top: 0; width: calc(10 * var(--u)); height: var(--fr); margin-left: calc(-5 * var(--u)); border-radius: 50%; background: linear-gradient(90deg, rgba(255, 243, 214, 0), rgba(255, 248, 232, .95) 50%, rgba(255, 243, 214, 0)); pointer-events: none; }
.w-glint--num { top: 0; height: 100%; width: calc(6 * var(--u)); margin-left: calc(-3 * var(--u)); border-radius: 0; background: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 42%, #000 58%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 42%, #000 58%, rgba(0, 0, 0, 0) 100%); }
.w-glint--num > b { position: absolute; top: 0; left: calc(-4 * var(--u)); width: calc(14 * var(--u)); height: 100%; display: grid; place-items: center; font-weight: inherit; color: #ffe9c6; text-shadow: none; white-space: nowrap; }
.w-mirror::before { left: calc(-10.5 * var(--u)); }
.w-mirror::after { right: calc(-10.5 * var(--u)); }
/* The frame's reflection: a mirrored copy under the water, fading with depth (no -webkit-box-reflect) */
.w-refl { box-shadow: none; -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .22) 45%, rgba(0, 0, 0, 0) 88%); mask-image: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .22) 45%, rgba(0, 0, 0, 0) 88%); }
.w-refl::before, .w-refl::after { display: none; }
/* The far end: daylight in the cave mouth, as in FarSight, and its path across the water */
.w-end { background: radial-gradient(46% 60% at 50% 50%, rgba(255, 243, 214, .42) 0%, rgba(246, 211, 184, .2) 55%, rgba(246, 211, 184, .1) 100%), linear-gradient(rgba(20, 3, 5, .2), rgba(20, 3, 5, .2)), var(--tex) 0 0 / calc(var(--tw) / 3) calc(var(--th) / 3) repeat, var(--night-2); }
.w-mouth { background: url('tex/cave-mouth.jpg') center / 100% 100% no-repeat; -webkit-mask-image: radial-gradient(closest-side, #000 70%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(closest-side, #000 70%, rgba(0, 0, 0, 0) 100%); }
@supports (background-image: image-set(url('a.avif') type('image/avif'))) {
  .w-mouth { background-image: image-set(url('tex/cave-mouth.avif') type('image/avif'), url('tex/cave-mouth.jpg') type('image/jpeg')); }
}
.w-path { background: linear-gradient(to top, rgba(246, 211, 184, 0) 0%, rgba(246, 211, 184, .14) 55%, rgba(255, 243, 214, .46) 100%); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 36%, #000 64%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 36%, #000 64%, rgba(0, 0, 0, 0) 100%); }

/* While the walker steps towards a frame, everything that floats over the cave gets out of the way */
.walk.is-entering .halls, .walk.is-entering .plan, .walk.is-entering .walk__skip, .walk.is-entering .walk__hint, .walk.is-entering .walk__exit { opacity: 0; transition: opacity .16s linear; }

/* What stays readable over the cave: skip link, the current plaque, hall navigation, the way out */
.walk.is-3d .walk__skip { position: absolute; z-index: 4; left: max(var(--gutter), calc(50% - 620px)); top: calc(var(--top-h) + 16px); margin: 0; }
.walk.is-3d .halls { position: absolute; inset: 0; z-index: 2; width: auto; margin: 0; padding: 0; display: block; pointer-events: none; }
.walk.is-3d .hall { position: absolute; top: 50%; width: min(400px, 30vw); display: block; transform: translateY(-46%) translateX(var(--shift)); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), transform .5s var(--ease), visibility 0s .4s; }
.walk.is-3d .hall[data-side="l"] { right: max(var(--gutter), calc(50% - 620px)); --shift: 28px; }
.walk.is-3d .hall[data-side="r"] { left: max(var(--gutter), calc(50% - 620px)); --shift: -28px; }
.walk.is-3d .hall.is-here { opacity: 1; visibility: visible; --shift: 0px; pointer-events: auto; transition: opacity .4s var(--ease), transform .5s var(--ease), visibility 0s; }
.walk.is-3d .hall__fig, .walk.is-3d .signs { display: none; }
.walk.is-3d .plaque__text { font-size: 1.0625rem; }
.walk.is-3d .walk__hint { display: block; position: absolute; z-index: 2; left: 50%; bottom: 100px; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(20, 3, 5, .82); font-size: var(--fs-small); color: var(--cream); transition: opacity .4s; }
.walk.is-3d.is-walking .walk__hint { opacity: 0; visibility: hidden; }
.walk.is-3d .plan { display: flex; align-items: center; position: absolute; z-index: 3; left: 50%; bottom: 24px; transform: translateX(-50%); gap: 4px; padding: 4px; border-radius: 999px; background: rgba(34, 7, 10, .94); box-shadow: inset 0 0 0 1px var(--edge); }
.plan button { min-width: 48px; height: 44px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--sand); font: 600 1rem/1 var(--display); letter-spacing: .06em; cursor: pointer; white-space: nowrap; }
.plan button:hover { color: var(--cream); }
.plan button[aria-current="true"] { background: var(--brass-btn); color: var(--night); }
.plan .plan__step { font: 600 1rem/1 var(--text); letter-spacing: 0; color: var(--cream); }
.plan .plan__step[aria-disabled="true"] { color: var(--edge); cursor: default; }
.walk.is-3d .walk__exit { position: absolute; z-index: 2; left: 50%; bottom: 104px; width: min(560px, 80vw); margin: 0; padding: 28px 32px 32px; transform: translateX(-50%); border-radius: 8px; background: linear-gradient(180deg, var(--slate-hi), var(--night-2)); box-shadow: inset 0 0 0 2px var(--brass-3), 0 30px 60px -24px #000; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
.walk.is-3d .walk__exit-title { margin-bottom: 20px; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); }
.walk.is-3d.is-out .walk__exit { opacity: 1; visibility: visible; transition: opacity .5s var(--ease), visibility 0s; }

/* After hours */
.split { display: grid; gap: clamp(32px, 6vw, 88px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.split__text .lead { margin-top: 20px; }
.split__text .switch { margin-top: 32px; }
.status { margin-top: 16px; color: var(--cream); min-height: 1.6em; }
.board__title { font: 600 1.25rem/1.2 var(--display); letter-spacing: .06em; }
.board__list { margin-top: 16px; }
.board__list li, .board__out { display: grid; grid-template-columns: 3ch 1fr auto; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--edge); }
.board__n { font: 600 1rem/1 var(--display); color: var(--copper); }
.board__s { font-weight: 600; color: var(--cream); }
.board__s::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%; background: var(--candle); box-shadow: 0 0 12px 3px rgba(255, 226, 170, .5); }
.board__out { grid-template-columns: 1fr auto; margin-top: 8px; border-top: 2px solid var(--copper); color: var(--sand); }
.board[data-state="closed"] .board__s--out { color: var(--sand); }
.board[data-state="closed"] .board__s--out::before { background: transparent; box-shadow: inset 0 0 0 2px var(--edge); }

/* Sync */
.trio { display: grid; gap: 24px; }
@media (min-width: 760px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); } }
.trio__item { padding-top: 20px; border-top: 2px solid var(--copper); }
.trio__item p { margin-top: 8px; }
.trio + .deed { margin-top: clamp(40px, 5vw, 72px); max-width: 720px; }
.deed__path code { font: 600 clamp(1.125rem, 1rem + .6vw, 1.5rem)/1.3 var(--text); overflow-wrap: anywhere; }
.deed__note { margin-left: 10px; font-size: var(--fs-small); color: var(--ink-2); }
.deed__text { margin-top: 12px; }

/* Valter */
.desk { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) {
  .desk { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "can book" "wont book"; }
  .duty--can { grid-area: can; } .notebook { grid-area: book; } .duty--wont { grid-area: wont; }
}
.duty h3 + ul { margin: 12px 0 36px; }
.duty li { position: relative; padding: 10px 0 10px 30px; border-top: 1px solid var(--edge); }
.duty li::before { content: ''; position: absolute; left: 4px; top: 1.05em; width: 9px; height: 9px; transform: rotate(45deg); background: var(--copper); }
.duty__no li::before { background: transparent; box-shadow: inset 0 0 0 2px var(--copper); }
.notebook figcaption { font-weight: 600; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.log li { display: grid; grid-template-columns: 5.5ch 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.log__who { font-weight: 600; color: var(--ink-2); }
.log__you { font-weight: 600; }
.log__done { border-bottom: 0; font-weight: 600; }

/* Founders */
.founders__in { max-width: 860px; text-align: center; }
.founders__plate { display: inline-block; margin-bottom: 32px; padding: 12px 28px; border-radius: 4px; background: var(--brass-btn); color: var(--night); font: 600 1.0625rem/1 var(--display); letter-spacing: .14em; box-shadow: inset 0 1px 0 rgba(255, 243, 214, .6), 0 10px 24px -12px #000; }
.founders .lead { margin: 24px auto 0; }
.quote { margin-top: 48px; }
.quote p { font: 600 clamp(1.375rem, 1.1rem + 1.2vw, 2rem)/1.35 var(--display); color: var(--cream); text-wrap: balance; }
.quote footer { margin-top: 16px; color: var(--copper); }

/* Apply */
.book { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .book { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.steps { counter-reset: s; margin: 16px 0 24px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.5ch 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--edge); }
.steps li::before { content: counter(s); font: 600 1.125rem/1.5 var(--display); color: var(--copper); }
.entry { display: grid; gap: 22px; }
.entry__proto { padding: 12px 16px; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--field); font-weight: 600; }
.field label, .choice legend { display: block; font-weight: 600; margin-bottom: 8px; padding: 0; }
.field__hint { font-weight: 400; color: var(--ink-2); }
.field input { width: 100%; min-height: 56px; padding: 12px 16px; border: 1.5px solid var(--ink-2); border-radius: var(--radius); background: var(--field); color: var(--ink); font: 400 1.125rem/1.3 var(--text); }
.field input:focus-visible, .entry .btn:focus-visible, .pick:focus-within { outline: 3px solid var(--ink); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-color: var(--err); border-width: 2.5px; }
.field__err { margin-top: 8px; color: var(--err); font-weight: 600; }
.choice { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.choice legend { width: 100%; }
.pick { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px; border: 1.5px solid var(--rule); border-radius: var(--radius); background: var(--field); cursor: pointer; }
.pick input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); }
.pick:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.entry__status { font-weight: 600; min-height: 1.6em; }
/* The entry is signed: the crystal of the house pressed into the paper (a darker rim, a lighter inner edge), with a short press */
.entry__seal { display: block; width: 57px; height: 76px; margin-top: -8px; overflow: visible; }
.entry__seal .seal-lo { fill: none; stroke: rgba(40, 34, 28, .45); stroke-width: 1.7; transform: translate(.5px, .6px); }
.entry__seal .seal-hi { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 1.2; transform: translate(-.35px, -.4px); }
.entry__seal .seal-in { fill: rgba(40, 34, 28, .12); stroke: rgba(40, 34, 28, .38); stroke-width: .8; }
.entry__seal.is-on { animation: seal-press .32s var(--ease) both; transform-origin: 50% 50%; }
@keyframes seal-press { from { opacity: 0; transform: scale(1.04); } }
.entry .small { color: var(--ink-2); }

/* Footer */
.foot { padding-block: 56px; background: var(--deep); border-top: 1px solid var(--edge); }
.foot__in { display: grid; gap: 20px; }
.foot__hours { font: 600 1.25rem/1.3 var(--display); color: var(--cream); letter-spacing: .04em; }
.foot__links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__motto { color: var(--copper); font-size: var(--fs-small); }

/* ---------- Inside a scene ---------- */
/* The picture with real depth (a decorative canvas over the <img>), English slips beside the painted signs,
   and a bar below the picture, never over it. */
.depth { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s linear; pointer-events: none; }
.depth.is-on { opacity: 1; }
.scene { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--deep); color: var(--sand); overflow: hidden; overscroll-behavior: contain; }
.scene[open] { display: flex; flex-direction: column; animation: step-in .1s linear; }
.scene::backdrop { background: var(--deep); }
@keyframes step-in { from { opacity: 0; } }
.scene__view { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 12px; container-type: size; }
.scene__stage { position: relative; aspect-ratio: 16 / 10; width: min(100cqw, 160cqh); container-type: size; overflow: hidden; border-radius: 2px; box-shadow: 0 0 0 1px var(--brass-3); }
.scene__stage picture { display: block; }
.scene__img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* From the still list the picture grows out of its own frame (site.js sets where from) */
.scene.is-growing .scene__stage { animation: grow .46s var(--ease) both; }
@keyframes grow { from { transform: translate(var(--gx), var(--gy)) scale(var(--gs)); } }
/* Air: candlelight breathing slowly and a few specks of dust. Small, slow, never a flicker; gone when Motion is off. */
.scene__air { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scene__air::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 62%, rgba(255, 226, 170, .16), rgba(255, 226, 170, 0) 72%); opacity: .25; animation: breathe 9s ease-in-out infinite alternate; }
@keyframes breathe { to { opacity: .9; } }
.scene__air i { position: absolute; left: var(--l); top: var(--t); width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 243, 214, .75); box-shadow: 0 0 6px 1px rgba(255, 226, 170, .35); opacity: 0; animation: dust var(--dur) linear var(--delay) infinite; }
@keyframes dust { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 15% { opacity: .7; } 85% { opacity: .5; } 100% { opacity: 0; transform: translate3d(var(--dx), -90px, 0); } }
html.motion-off .scene__air { display: none; }
@media (prefers-reduced-motion: reduce) { html:not(.motion-on) .scene__air { display: none; } }
/* English slips: paper notes beside the painted signs. Each sits at its sign's measured spot and moves with it. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.scene__labels { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.scene__labels li { position: absolute; left: calc(50% + (var(--x) - 50%) * var(--zoom, 1)); top: calc(50% + (var(--y) - 50%) * var(--zoom, 1)); max-width: 11.5em; padding: .2em .65em .25em; border-radius: 3px; background: var(--paper); color: var(--ink); font: 600 clamp(.875rem, 1.3cqw, 1.0625rem)/1.25 var(--text); text-align: center; box-shadow: 0 2px 0 var(--rule), 0 8px 18px -8px #000; --mx: calc(var(--sx, 0px) * var(--d, 0)); --my: calc(var(--sy, 0px) * var(--d, 0)); }
.scene__labels li[data-at="b"] { margin-top: calc(var(--g) * 1cqh); transform: translate(calc(-50% + var(--mx)), var(--my)); }
.scene__labels li[data-at="t"] { margin-top: calc(var(--g) * -1cqh); transform: translate(calc(-50% + var(--mx)), calc(-100% + var(--my))); }
.scene__labels li[data-at="r"] { margin-left: calc(var(--g) * 1cqw); transform: translate(var(--mx), calc(-50% + var(--my))); }
.scene__labels li[data-at="l"] { margin-left: calc(var(--g) * -1cqw); transform: translate(calc(-100% + var(--mx)), calc(-50% + var(--my))); }
.scene__labels li:not([data-at]) { display: none; }
.scene__bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px max(var(--gutter), 12px) 14px; background: var(--night); border-top: 1px solid var(--edge); }
.scene__id { flex: 1 1 16em; min-width: 0; }
.scene__title { font: 600 1.375rem/1.2 var(--display); color: var(--cream); letter-spacing: .04em; }
.scene__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.scene__ctl form { display: contents; }
.scene__ctl .btn[aria-disabled="true"] { color: var(--edge); box-shadow: inset 0 0 0 1.5px var(--edge); cursor: default; }
.scene__list { display: none; }
@media (max-width: 699px) {
  /* Narrow windows: no slips over the picture; the list of signs stands below it and the bar wraps as it needs */
  .scene[open] { display: block; overflow: auto; }
  .scene__view { display: block; padding: 0; container-type: normal; }
  .scene__stage { width: 100%; border-radius: 0; container-type: normal; }
  .scene__labels, .scene__labels-title, [data-labels-toggle] { display: none; }
  .scene__bar { padding-block: 16px; }
  .scene__ctl { width: 100%; }
  .scene__ctl .btn { flex: 1 1 auto; }
  .scene__list { display: block; margin: 16px var(--gutter) 24px; }
}

/* ---------- Sub-pages: privacy, legal, 404 ---------- */
.doc { padding: calc(var(--top-h) + clamp(40px, 6vw, 88px)) 0 var(--sec); }
.doc > .wrap { max-width: 900px; }
.kicker { font: 600 1rem/1.2 var(--display); letter-spacing: .12em; color: var(--copper); }
.doc__head h1 { margin-top: 12px; }
.draft-label { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; padding: 10px 16px; border-radius: var(--radius); background: var(--paper); color: var(--ink); font-weight: 600; }
.draft-label__mark { width: 10px; height: 10px; transform: rotate(45deg); background: var(--err); flex: none; }
.doc__panel { margin-top: clamp(28px, 4vw, 48px); }
.doc__intro { font-size: var(--fs-lead); line-height: 1.55; }
.doc__sec { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--rule); }
.doc__sec h2 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); line-height: 1.25; }
.doc__n { font-size: 1rem; color: var(--ink-2); }
.doc__sec p, .doc__sec dl { margin-top: 12px; }
.facts-list > div { display: grid; gap: 4px 24px; padding: 12px 0; border-top: 1px solid var(--rule); }
.facts-list > div:first-child { border-top: 0; }
@media (min-width: 640px) { .facts-list > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } }
.facts-list dt { font-weight: 600; }
/* The email in the provider table is a full 44 px target; the extra height lies in the row's own padding, so nothing moves */
.facts-list dd a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.doc__date { margin-top: 32px; padding-top: 20px; border-top: 2px solid var(--ink); font-size: var(--fs-small); color: var(--ink-2); }
.foot__links a[aria-current="page"] { text-decoration-thickness: 2px; color: var(--copper); }

.lost { display: grid; align-items: center; min-height: 100svh; padding: calc(var(--top-h) + 48px) 0 var(--sec); }
.lost__in { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .lost__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.lost__void { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 2px; background: radial-gradient(90% 90% at 50% 30%, var(--night-2), var(--deep)); box-shadow: 0 0 0 1px var(--brass-3), inset 0 0 0 1px #000, inset 0 0 60px rgba(0, 0, 0, .5); color: var(--copper); }
.lost__hook { width: 40px; height: 60px; }
.lost__object { margin-top: 14px; font-weight: 600; color: var(--cream); }
.lost__medium { color: var(--copper); }
.lost .plaque__title { font-size: var(--fs-h2); }

/* ---------- The rooms after the corridor: the same four materials ----------
   Rose salt for the walls (a drawn fallback first; the crystal salt tile, repeated, once the rooms come near),
   copper for plates and frames, paper for deeds, candlelight in warm pools. */
:root {
  --salt-img: url('tex/salt-crystal.jpg');
  --salt-size: 300px 95px;          /* half the tile's 600 x 190, its own proportions */
  --salt-drawn: radial-gradient(120% 80% at 18% 0%, rgba(122, 46, 58, .42), rgba(122, 46, 58, 0) 60%), radial-gradient(90% 70% at 86% 100%, rgba(196, 106, 100, .2), rgba(196, 106, 100, 0) 65%), linear-gradient(160deg, var(--slate-hi), var(--night-2) 55%, var(--night));
  --dusk: linear-gradient(180deg, rgba(34, 7, 10, .9) 0%, rgba(34, 7, 10, .82) 45%, rgba(34, 7, 10, .92) 100%);
  --pool-l: radial-gradient(46% 60% at 0% 100%, rgba(255, 226, 170, .16), rgba(224, 145, 95, .06) 45%, rgba(224, 145, 95, 0) 100%);
  --pool-r: radial-gradient(46% 60% at 100% 100%, rgba(255, 226, 170, .16), rgba(224, 145, 95, .06) 45%, rgba(224, 145, 95, 0) 100%);
}
@supports (background-image: image-set(url('a.avif') type('image/avif'))) {
  :root { --salt-img: image-set(url('tex/salt-crystal.avif') type('image/avif'), url('tex/salt-crystal.jpg') type('image/jpeg')); }
}
@media (max-width: 699px) { :root { --salt-size: 150px 47.5px; } }
.sec, .halls-sec, .doc, .lost { position: relative; background: var(--pool, var(--pool-l)), var(--dusk), var(--salt-drawn); }
.tex-on .sec, .tex-on .halls-sec, .tex-on .doc, .tex-on .lost { background: var(--pool, var(--pool-l)), var(--dusk), var(--salt-img) var(--salt-x, 0%) 0 / var(--salt-size) repeat, var(--night); }
.sec { --arch: clamp(48px, 8vw, 128px); }
/* Threshold: every room begins under an arch of salt. The room's top edge is cut as an arch (mask, no picture);
   the dark rock between rooms shows above it. Under the arch candlelight on the salt lights the room from above (::after),
   and a blurred, darkened cut of a scene from the program fills the room (.sec__bg, loaded lazily). */
.sec { -webkit-mask: radial-gradient(64% var(--arch) at 50% var(--arch), #000 99.4%, rgba(0, 0, 0, 0) 100%) 50% 0 / 100% var(--arch) no-repeat, linear-gradient(#000, #000) 0 var(--arch) / 100% calc(100% - var(--arch) + 1px) no-repeat;
  mask: radial-gradient(64% var(--arch) at 50% var(--arch), #000 99.4%, rgba(0, 0, 0, 0) 100%) 50% 0 / 100% var(--arch) no-repeat, linear-gradient(#000, #000) 0 var(--arch) / 100% calc(100% - var(--arch) + 1px) no-repeat; }
.sec::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--arch) * 4.5); pointer-events: none; background:
  radial-gradient(64% var(--arch) at 50% var(--arch), rgba(246, 211, 184, 0) 95.5%, rgba(246, 211, 184, .34) 98.2%, rgba(246, 211, 184, 0) 100%) 50% 0 / 100% var(--arch) no-repeat,
  radial-gradient(34% 56% at 50% 0%, rgba(255, 226, 170, .24) 0%, rgba(224, 145, 95, .1) 45%, rgba(224, 145, 95, 0) 100%); }
.sec__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sec__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .34;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .7) 55%, rgba(0, 0, 0, .3) 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .7) 55%, rgba(0, 0, 0, .3) 100%); }
.sec--deep { --pool: var(--pool-r); --salt-x: 100%; --dusk: linear-gradient(180deg, rgba(51, 9, 14, .9) 0%, rgba(34, 7, 10, .84) 50%, rgba(20, 3, 5, .92) 100%); }
.sec > .wrap, .halls-sec > .head, .doc > .wrap, .lost > .wrap { position: relative; z-index: 1; }

/* After hours: the museum door. Closing it puts out the daylight and slides the bolt; the six hall lights burn on. */
.after::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 70% at 78% 30%, rgba(255, 243, 214, .2), rgba(246, 211, 184, .08) 45%, rgba(246, 211, 184, 0) 75%); transition: opacity .3s linear; pointer-events: none; }
.after[data-state="closed"]::before { opacity: 0; }
/* The door has weight: tall leaves of plate and copper, darker at the hinge, their thickness showing at the edge, studs that catch
   the light, a short shadow on the floor when shut. Closing: the leaves gather speed to the end (soft start, hard end, no bounce)
   in 400 ms, then the bolt slides across (140 ms); opening goes the other way round: bolt first, then the leaves. Under 600 ms. */
.gate { display: block; width: min(100%, 420px); height: auto; margin: 0 auto 14px; overflow: visible; }
.gate__arch { fill: none; stroke: var(--copper); stroke-width: 5; stroke-linecap: round; }
.gate__day { fill: url(#gate-day); transition: opacity .3s linear; }
.gate__leaf { transform-box: fill-box; transition: transform .4s cubic-bezier(.33, 1, .68, 1) .15s; }
.gate__leaf--l { transform-origin: left center; transform: scaleX(.42); }
.gate__leaf--r { transform-origin: right center; transform: scaleX(.42); }
.gate__plank { fill: url(#gate-wood); stroke: var(--brass-3); stroke-width: 2; }
.gate__hinge--l { fill: url(#gate-hinge-l); }
.gate__hinge--r { fill: url(#gate-hinge-r); }
.gate__edge--l { fill: url(#gate-edge-l); }
.gate__edge--r { fill: url(#gate-edge-r); }
.gate__stud { fill: url(#gate-stud); }
.gate__shadow { fill: url(#gate-shadow); opacity: 0; transition: opacity .15s linear; }
.gate__bolt { fill: var(--brass-2); stroke: var(--brass-3); stroke-width: 1.5; opacity: 0; transform: translateX(-46px); transition: transform .14s linear, opacity .1s linear; }
.gate__sill { fill: none; stroke: var(--edge); stroke-width: 3; stroke-linecap: round; }
.after[data-state="closed"] .gate__day { opacity: 0; }
.after[data-state="closed"] .gate__leaf { transform: scaleX(1); transition: transform .4s cubic-bezier(.32, 0, .67, 0); }
.after[data-state="closed"] .gate__bolt { opacity: 1; transform: none; transition: transform .14s linear .4s, opacity .1s linear .4s; }
.after[data-state="closed"] .gate__shadow { opacity: 1; transition: opacity .2s linear .3s; }
.board__s::before { transition: background-color .3s linear, box-shadow .3s linear; }
.after[data-state="closed"] .board__list .board__s::before { box-shadow: 0 0 16px 5px rgba(255, 226, 170, .6); }

/* House to house: three houses, joined to one another and to nothing else */
.sync__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .sync__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sync__grid .trio { grid-template-columns: 1fr; gap: 28px; } }
.links { position: relative; margin: 0; padding: clamp(20px, 2.4vw, 30px); border-radius: 8px; background: linear-gradient(180deg, var(--slate-hi), var(--night-2)); box-shadow: 0 30px 60px -30px #000; }
.links::before { content: ''; position: absolute; inset: 0; padding: 3px; border-radius: inherit; background: var(--brass); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.links__map { position: relative; max-width: 440px; margin: 0 auto; }
.links__svg { display: block; width: 100%; height: auto; }
.links__house { fill: var(--slate); stroke: var(--copper); stroke-width: 2.5; stroke-linejoin: round; }
.links__win { fill: var(--candle); transition: fill .3s linear; }
.links__halo { opacity: .7; transition: opacity .3s linear; }
.links__halo.is-lit { opacity: 1; }
.links__home.is-lit .links__win { fill: #fff3d6; }
.links__home.is-from .links__house { stroke: var(--brass-1); }
.links__dot { opacity: 0; }
.links__core { fill: var(--candle); }
/* Each house's name stands by its house: the top one to its right, the two below in a row under their houses (in the flow,
   so a name that wraps pushes the caption down instead of covering it). Without script, plain names. */
.links__names { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 10px; }
.links__names li { max-width: 48%; font-size: var(--fs-small); color: var(--sand); }
.links__names li[data-house="0"] { position: absolute; left: 61%; top: 0; margin-top: 3.9%; width: max-content; max-width: 39%; }   /* 3.9 % of the width = 6 % of the scheme's height */
.links__names li[data-house="2"] { margin-left: auto; }
@media (max-width: 699px) {
  .links__names { display: grid; justify-content: normal; align-items: normal; gap: 8px; margin-top: 16px; }
  .links__names li[data-house] { position: static; max-width: none; width: auto; margin: 0; }
  .links__names .house-btn { width: 100%; }
}
.links__line { fill: none; stroke: var(--brass-2); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .4s ease-out; }
.js.motion-on .links:not(.is-seen) .links__line { stroke-dashoffset: 1; }
.links figcaption { margin-top: 14px; font-size: var(--fs-small); line-height: 1.45; color: var(--sand); }
.sync__grid + .deed { margin-top: clamp(40px, 5vw, 72px); max-width: 720px; }

/* Valter: his duties on a copper-edged plate, his notebook on paper. The lines show one after another, once. */
.duty { position: relative; padding: clamp(22px, 2.4vw, 30px); border-radius: 8px; background: linear-gradient(180deg, var(--slate-hi), var(--night-2)); box-shadow: 0 30px 60px -30px #000; }
.duty::before { content: ''; position: absolute; inset: 0; padding: 3px; border-radius: inherit; background: var(--brass); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.duty h3 + ul:last-child { margin-bottom: 0; }
/* The notebook holds three examples, all in the HTML. Without script they stand one under another; with script one shows,
   in the place of the tallest (all three share one grid cell, so nothing below moves), and its lines appear one after another. */
.notebook__pages > .log + .log { margin-top: 22px; padding-top: 8px; border-top: 2px solid var(--ink); }
.notebook.is-live .notebook__pages { display: grid; }
.notebook.is-live .notebook__pages > .log { grid-area: 1 / 1; margin-top: 0; padding-top: 0; border-top: 0; }
.notebook.is-live .notebook__pages > .log:not(.is-shown) { visibility: hidden; }
.js.motion-on .notebook:not(.is-seen) .log li { opacity: 0; }
.js.motion-on .notebook.is-seen .log.is-run li { animation: log-line .36s var(--ease) both; }
.notebook .log.is-run li:nth-child(2) { animation-delay: .2s; }
.notebook .log.is-run li:nth-child(3) { animation-delay: .4s; }
.notebook .log.is-run li:nth-child(4) { animation-delay: .6s; }
.notebook .log.is-run li:nth-child(5) { animation-delay: .8s; }
.notebook .log.is-run li:nth-child(6) { animation-delay: 1s; }
.notebook .log.is-run li:nth-child(7) { animation-delay: 1.2s; }
@keyframes log-line { from { opacity: 0; transform: translateY(8px); } }
/* Valter's jobs and the three houses are buttons of the page (a copper line, like .btn--line); the chosen job is filled with
   copper, like the current hall in the plan, so it differs by more than the colour of its text */
.duty__can.is-live li { padding: 0; border-top: 0; }
.duty__can.is-live li + li { margin-top: 10px; }
.duty__can.is-live li::before { display: none; }
.can-btn, .house-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid transparent; border-radius: var(--radius); background: rgba(34, 7, 10, .55); color: var(--cream); font: 600 1rem/1.3 var(--text); text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--copper); }
.can-btn { display: flex; width: 100%; min-height: 48px; }
.can-btn:hover, .house-btn:hover { background: var(--slate); color: var(--cream); }
.can-btn[aria-pressed="true"] { background: var(--brass-btn); color: var(--night); }
.can-btn[aria-pressed="true"]:hover { background: var(--brass-btn); color: var(--night); filter: brightness(1.08); }
/* Narrow windows: the notebook stands right under the jobs, close enough that the chosen example starts inside the window */
@media (max-width: 899px) { .desk { gap: 18px; } .can-btn { min-height: 44px; } .duty__can.is-live li + li { margin-top: 8px; } }

/* Founders: an engraved copper tablet */
.founders { --pool: radial-gradient(50% 60% at 50% 100%, rgba(255, 226, 170, .16), rgba(224, 145, 95, .06) 45%, rgba(224, 145, 95, 0) 100%); }
.founders__plate { position: relative; padding: 16px 44px; border: 1px solid transparent; border-radius: 5px; background:
  radial-gradient(circle at 14px 50%, var(--brass-3) 0 3px, rgba(255, 243, 214, .5) 3.5px 4.5px, rgba(0, 0, 0, 0) 5px),
  radial-gradient(circle at calc(100% - 14px) 50%, var(--brass-3) 0 3px, rgba(255, 243, 214, .5) 3.5px 4.5px, rgba(0, 0, 0, 0) 5px),
  var(--brass-btn); color: var(--night); text-shadow: 0 1px 0 rgba(255, 243, 214, .55); box-shadow: inset 0 1px 0 rgba(255, 243, 214, .7), inset 0 -2px 0 rgba(138, 90, 60, .7), inset 0 0 0 3px rgba(138, 90, 60, .28), 0 14px 28px -12px #000; }

/* Apply: the visitor's book is paper lying on a table of salt */
.book { padding: clamp(18px, 3vw, 44px); border-radius: 12px; background:
  linear-gradient(180deg, rgba(246, 211, 184, .16) 0, rgba(246, 211, 184, .04) 3px, rgba(0, 0, 0, 0) 4px),
  radial-gradient(70% 90% at 100% 0%, rgba(255, 226, 170, .14), rgba(224, 145, 95, 0) 70%),
  linear-gradient(180deg, rgba(77, 21, 25, .82), rgba(51, 9, 14, .86)),
  var(--salt-drawn); box-shadow: inset 0 0 0 1px rgba(122, 74, 74, .7), 0 30px 60px -34px #000; }
.tex-on .book { background:
  linear-gradient(180deg, rgba(246, 211, 184, .16) 0, rgba(246, 211, 184, .04) 3px, rgba(0, 0, 0, 0) 4px),
  radial-gradient(70% 90% at 100% 0%, rgba(255, 226, 170, .14), rgba(224, 145, 95, 0) 70%),
  linear-gradient(180deg, rgba(77, 21, 25, .8), rgba(51, 9, 14, .84)),
  var(--salt-img) 100% 0 / var(--salt-size) repeat, var(--night-2); }
.book .entry { box-shadow: 0 2px 0 var(--rule), 0 26px 44px -22px #000; }

/* Footer and sub-pages share the wall */
.foot { background: linear-gradient(180deg, rgba(20, 3, 5, .94), rgba(20, 3, 5, .97)), var(--salt-drawn); border-top: 2px solid var(--brass-3); }

@media (forced-colors: active) {
  .panel::before, .plaque::before, .duty::before, .links::before { background: CanvasText; }
  .gate__plank, .links__house { fill: Canvas; stroke: CanvasText; }
  .gate__hinge, .gate__edge, .gate__shadow { display: none; }
  .gate__stud, .links__core { fill: CanvasText; }
  .can-btn, .house-btn { border-color: ButtonText; }
  .can-btn[aria-pressed="true"], .plan button[aria-current="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border: 1px solid Highlight; }
  .sec::after, .deed::after, .panel::after, .plaque::after, .duty::after, .links::after { display: none; }
  .gate__arch, .links__line { stroke: CanvasText; }
  .gate__bolt, .links__win { fill: CanvasText; }
  .switch__knob { background: ButtonText; }
  .switch__track { border: 1px solid ButtonText; }
  .facts li::before, .duty li::before, .draft-label__mark { forced-color-adjust: none; background: CanvasText; }
}

/* Breathing candlelight in the cave: one change of brightness takes 4 s and is a few per cent, never a flicker (T6).
   Only each pool's own layer (::before) breathes; the planes keep the opacity site.js gives them. Motion off: at rest, mid-way. */
@keyframes dih { 0%, 100% { opacity: .96; } 50% { opacity: 1; } }
html.motion-off .w-wall.is-lit::before { animation: none; opacity: .98; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) .w-wall.is-lit::before { animation: none; opacity: .98; }
}

/* Motion off: by the system setting (unless the visitor switched Motion on) or by the Motion switch. The negative delay makes
   every transition's combined duration negative, so none starts and the final state is drawn in the very first frame;
   an animation starts already finished (its end event still fires). */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) *, html:not(.motion-on) *::before, html:not(.motion-on) *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: -1ms !important; animation-delay: -1ms !important; }
}
html.motion-off *, html.motion-off *::before, html.motion-off *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; transition-delay: -1ms !important; animation-delay: -1ms !important; }