/* Polias Dom, wariant Kino. Courbet α, 2026-10-26.
   A dark film in chapters: each property pinned to the screen while the grade warms from night to day and the
   price in the brokerage agreement rolls into the price achieved. */

/* ---------- Fonts (self-hosted, OFL; licences in fonts/) ---------- */
/* Cyrillic: Bodoni Moda and Instrument Sans have none, so these answer for those letters alone (the stacks below);
   digits and Latin stay in the same two faces in every language. Loaded only by a page that has such letters. */
@font-face { font-family: "Noto Serif Display"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("fonts/noto-serif-display-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Noto Serif Display"; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url("fonts/noto-serif-display-cyrillic-wght-italic.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Commissioner"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/commissioner-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(fonts/bodoni-moda-latin-standard-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(fonts/bodoni-moda-latin-ext-standard-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url(fonts/bodoni-moda-latin-standard-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url(fonts/bodoni-moda-latin-ext-standard-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/instrument-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/instrument-sans-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  --ink: #0a0908;
  --ink-2: #14110e;
  --paper: #efe8db;
  --dim: rgba(239, 232, 219, .64);
  --faint: rgba(239, 232, 219, .38);
  --line: rgba(239, 232, 219, .2);
  --amber: #f0b45e;
  --amber-dim: rgba(240, 180, 94, .55);
  --serif: "Bodoni Moda", "Noto Serif Display", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Instrument Sans", "Commissioner", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;
  --g: clamp(20px, 4.4vw, 72px);
  /* The bar is exactly as tall as the open letterbox (Maxim, 19:46 and 19:47): the letterbox sets it, never the reverse. */
  --nav: var(--bar-min);
  /* A hundredth of one screen's height. 1svh until app.js measures it, then fixed in px, and measured again only when
     the width changes: Safari's toolbar showing and hiding under a finger never resizes a section (Maxim's iPhone,
     2026-10-27 18:43: small swipes up and down made the page jump by about a third of the screen). */
  --sv: 1svh;
  --bar-min: clamp(46px, calc(7 * var(--sv)), 66px);
  /* The closed letterbox is never shorter than the open one: on screens wider than 2.39:1 (Maxim's, about 1536x730) it
     was, so opening moved the bands the wrong way and showed a strip of photo above and below them (21:31). */
  --bar-max: max(var(--bar-min), min(calc((calc(100 * var(--sv)) - 100vw / 2.39) / 2), calc(17 * var(--sv))));
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.mono { font-family: var(--mono); font-size: 12px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { color: var(--amber); font-weight: 500; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--paper); color: var(--ink);
  padding: 10px 14px; font: 500 14px var(--sans); }
.skip:focus { top: 12px; }

.tag { display: inline-block; padding: .2em .6em .25em; border: 1px solid var(--amber-dim); border-radius: 2px;
  color: var(--amber); font: 500 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .6em; min-height: 48px; padding: 0 1.5em; border-radius: 999px;
  font: 500 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: background .3s, color .3s, border-color .3s; }
.btn-ghost { border: 1px solid rgba(239, 232, 219, .45); background: rgba(10, 9, 8, .25); backdrop-filter: blur(6px); }
.btn-ghost:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.btn-solid { background: var(--amber); color: var(--ink); border: 1px solid var(--amber); }
.btn-solid:hover { background: var(--paper); border-color: var(--paper); }

/* ---------- Grain over everything ---------- */
.grain { position: fixed; inset: -60px; z-index: 80; pointer-events: none; opacity: .085;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(5) infinite; }
/* With a script, app.js moves it instead: a new random place each frame, so it never slides or loops. */
.js .grain { animation: none; will-change: transform; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-23px, 17px); }
  40% { transform: translate(31px, -9px); } 60% { transform: translate(-11px, -29px); } 80% { transform: translate(19px, 27px); } }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 60; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: var(--nav); padding: 0 var(--g); isolation: isolate; }
/* The bar never hides and never changes: frosted glass from the first frame (Maxim, 19:09 and 19:46). */
.nav::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(10, 9, 8, .66);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav::after { background: rgba(10, 9, 8, .94); } }
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--paper); }
.nav-owl { width: 34px; height: auto; color: var(--paper); }
.nav-name { font: 500 12px/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; }
.nav nav { display: flex; gap: clamp(14px, 2.4vw, 34px); margin-left: auto; }
.nav nav a { font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  color: var(--dim); padding: 10px 0; transition: color .25s; }
.nav nav a:hover, .nav nav a.here { color: var(--paper); }
.nav .short { display: none; }
/* The language menu: the current language's code in the bar, the four names under it, each in its own language. */
.lang { position: relative; z-index: 1; flex: none; margin-left: clamp(0px, 1.6vw, 18px); }
.lang summary { display: flex; align-items: center; gap: .5em; padding: 12px 0; list-style: none; cursor: pointer; color: var(--dim);
  font: 500 11.5px/1 var(--mono); letter-spacing: .16em; transition: color .25s; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: ""; width: .42em; height: .42em; margin-top: -.2em; border-right: 1px solid; border-bottom: 1px solid;
  transform: rotate(45deg); transition: transform .25s; }
.lang[open] summary::after { margin-top: .15em; transform: rotate(225deg); }
.lang summary:hover, .lang[open] summary { color: var(--paper); }
/* The same frosted glass as the bar, a little darker so the names stay readable over a bright photo. */
.lang ul { position: absolute; right: 0; top: 100%; min-width: 11.5em; padding: 6px 0; background: rgba(10, 9, 8, .74);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid var(--line); border-radius: 3px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .lang ul { background: rgba(10, 9, 8, .96); } }
.lang li a { display: block; padding: 11px 18px; color: var(--dim); font: 400 15px/1.2 var(--sans); text-decoration: none; transition: color .2s; }
.lang li a:hover { color: var(--paper); }
.lang li a[aria-current] { color: var(--amber); }
/* Only the amber progress line; the grey separator under the bar is gone (Maxim, 19:46). */
.reel { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }
/* "Przewiń ↓" when the page goes still and more waits below (round two, Maxim 18:42). */
/* Placed by app.js where it covers no text: the bottom centre first, else a corner, else higher up. */
.hint { position: fixed; left: var(--hx, 50%); top: var(--hy, auto); z-index: 55; display: flex; align-items: center; gap: .7em;
  padding: 10px 18px 10px 20px; border: 1px solid rgba(239, 232, 219, .3); border-radius: 999px; background: rgba(10, 9, 8, .82);
  color: var(--paper); font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; cursor: pointer;
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .9s ease, transform .9s var(--ease); }
.hint.on { opacity: 1; transform: none; pointer-events: auto; }
.hint.compact { padding: 9px 13px; }
.hint.compact .lbl { display: none; }
.hint .arr { color: var(--amber); font-size: 13px; letter-spacing: 0; animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.reel i { position: absolute; inset: 0; background: var(--amber); transform-origin: 0 50%; transform: scaleX(var(--reel, 0)); }

/* ---------- Letterbox bars ---------- */
.lb { position: absolute; left: 0; right: 0; z-index: 3; height: var(--bar-max); background: var(--ink); }
.lb-top { top: -2px; padding-top: 2px; box-sizing: content-box; transform: translateY(calc((var(--bar-min) - var(--bar-max)) * var(--open, 0))); }
.lb-bottom { bottom: -2px; padding-bottom: 2px; box-sizing: content-box; transform: translateY(calc((var(--bar-max) - var(--bar-min)) * var(--open, 0))); }

/* ---------- Hero: the title sequence ---------- */
.hero { position: relative; height: calc(100 * var(--sv)); min-height: 560px; overflow: hidden; isolation: isolate; --open: 0; }
.hero-bg { position: absolute; left: 0; right: 0; top: calc(var(--bar-min) - 4px); bottom: calc(var(--bar-min) - 4px); z-index: 0; overflow: hidden; }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  filter: brightness(.46) saturate(.5) contrast(1.32) sepia(.22);
  transition: opacity 2.4s ease; transform: scale(calc(1.12 + var(--q, 0) * .1)); }
/* Every slide drifts all the time, so its pan carries on through its own fade-out; nothing snaps (round three). */
.hero-bg img { animation: drift 22s linear infinite alternate; }
.hero-bg img.on { opacity: 1; }
@keyframes drift { from { translate: -1.5% 0; } to { translate: 1.5% -1%; } }
.hero-shade { position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 70% 62% at 50% 52%, rgba(10, 9, 8, .25), rgba(10, 9, 8, .86) 100%),
              linear-gradient(rgba(10, 9, 8, .2), rgba(10, 9, 8, .55)); }
.hero .lb { --open: 1; transition: transform 1.8s var(--ease) .6s; }
.hero:not(.rolling) .lb { --open: 0; }
.hero .lb-bottom { display: flex; align-items: flex-start; }
.hero-frame { position: relative; z-index: 4; height: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: calc(var(--bar-min) + 10px) var(--g) calc(var(--bar-min) + 24px);
  transform: translateY(calc(var(--q, 0) * -14vh)); opacity: calc(1 - var(--q, 0) * 1.6); }
.hero-pre { color: var(--dim); margin-bottom: clamp(10px, calc(2 * var(--sv)), 22px); }
.hero-pre span { display: inline-block; }
.hero-mark { width: clamp(104px, calc(15 * var(--sv)), 168px); color: var(--paper); margin-bottom: clamp(14px, calc(3 * var(--sv)), 34px); }
.lockup { width: 100%; height: auto; overflow: visible; }
.hero h1 { font: 400 clamp(44px, min(8.6vw, calc(13.5 * var(--sv))), 148px)/.94 var(--serif); letter-spacing: -.02em; }
.hero h1 span { display: block; }
.hero h1 .l2 { font-style: italic; color: var(--amber); }
.hero-sub { max-width: 34em; margin: clamp(14px, calc(3 * var(--sv)), 30px) auto 0; color: var(--dim); font-size: clamp(15px, 1.25vw, 19px); line-height: 1.55; }
.hero-cta { margin-top: clamp(18px, calc(3.6 * var(--sv)), 36px); }
.hero-credits { position: absolute; z-index: 5; left: var(--g); right: var(--g); bottom: 0; height: var(--bar-min);
  display: flex; align-items: center; justify-content: flex-end; gap: 20px; font-size: 10.5px; color: var(--faint); }

/* The sequence on load (only with JS and motion allowed). */
/* Final first (Caesar, 2026-10-26): every part is visible by default; each animation carries its own starting
   state (fill "both"), so a page that never gets a frame (a hidden tab, print) shows the finished hero. */
.js:not(.rm) .hero .owl-lines, .js:not(.rm) .hero .disc-ring, .js:not(.rm) .hero .eye-ring { stroke-dasharray: 1 1; }
.js:not(.rm) .hero.rolling .owl-lines { animation: draw 2.4s cubic-bezier(.55, 0, .25, 1) .15s both; }
.js:not(.rm) .hero.rolling .disc-ring, .js:not(.rm) .hero.rolling .eye-ring { animation: draw 1.1s cubic-bezier(.5, 0, .2, 1) .9s both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.js:not(.rm) .hero .eye { transform-box: fill-box; transform-origin: 50% 50%; }
.js:not(.rm) .hero.rolling .eye { animation: open-eye .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.js:not(.rm) .hero.rolling .eye-left { animation-delay: 1.75s; } .js:not(.rm) .hero.rolling .eye-right { animation-delay: 1.85s; }
@keyframes open-eye { from { transform: scale(0); } to { transform: scale(1); } }
.js:not(.rm) .hero.rolling .wordmark { animation: fade 1.2s ease 1.5s both; }
.js:not(.rm) .hero.rolling .tagline { animation: fade 1.2s ease 1.9s both; }
.js:not(.rm) .hero.rolling .hero-pre span:nth-child(1) { animation: rise 1s var(--ease) .3s both; }
.js:not(.rm) .hero.rolling .hero-pre span:nth-child(2) { animation: rise 1s var(--ease) .55s both; }
.js:not(.rm) .hero.rolling h1 .l1 { animation: rise 1.3s var(--ease) 2.05s both; }
.js:not(.rm) .hero.rolling h1 .l2 { animation: rise 1.3s var(--ease) 2.35s both; }
.js:not(.rm) .hero.rolling .hero-sub { animation: rise 1.2s var(--ease) 2.7s both; }
.js:not(.rm) .hero.rolling .hero-cta, .js:not(.rm) .hero.rolling .hero-credits { animation: fade 1.2s ease 3s both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- Prologue: one sentence lit word by word ---------- */
.prologue { position: relative; }
.prologue-stage { position: relative; min-height: calc(100 * var(--sv)); display: flex; flex-direction: column; justify-content: center;
  padding: 80px var(--g); max-width: 1320px; margin: 0 auto; }
.prologue .eyebrow { margin-bottom: clamp(18px, calc(4 * var(--sv)), 40px); }
.reveal { font: 400 clamp(28px, min(4.1vw, calc(6.8 * var(--sv))), 64px)/1.16 var(--serif); letter-spacing: -.012em; max-width: 21em; }
.reveal em { font-style: italic; }
.reveal em { color: var(--amber); }
/* Set to its start (.cue) only when below the fold at load; then the words light in reading order. */
.prologue.cue .reveal .w { opacity: .16; transition: opacity .35s ease, color .35s ease; }
.prologue.cue .reveal em .w { color: var(--paper); }
.prologue.cue .reveal .w.lit { opacity: 1; }
.prologue.cue .reveal em .w.lit { color: var(--amber); }
.samples-note { margin-top: clamp(22px, calc(5 * var(--sv)), 52px); max-width: 44em; color: var(--dim); font-size: 14.5px; line-height: 1.6; }
.samples-note .tag { margin-right: .8em; }
.act-note { margin-top: clamp(18px, calc(3 * var(--sv)), 28px); font-size: 14px; }

/* ---------- Acts and intertitles ---------- */
.intertitle { min-height: calc(100 * var(--sv)); display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 96px var(--g); }
.intertitle h2 { font: 400 clamp(46px, min(9vw, calc(15 * var(--sv))), 156px)/.95 var(--serif); letter-spacing: -.025em; margin: 18px 0 0; }
.intertitle h2 em { font-style: italic; color: var(--amber); }
.intertitle .intro { max-width: 36em; margin-top: clamp(20px, calc(4 * var(--sv)), 40px); color: var(--dim); font-size: clamp(16px, 1.3vw, 19px); text-wrap: pretty; }
.toc { margin-top: clamp(28px, calc(6 * var(--sv)), 60px); display: grid; gap: 0; width: min(100%, 760px); border-top: 1px solid var(--line); }
.toc a { display: grid; grid-template-columns: 3.2em 1fr auto; align-items: baseline; gap: 16px; padding: 16px 4px;
  border-bottom: 1px solid var(--line); text-decoration: none; text-align: left; transition: background .3s, padding .3s; }
.toc a:hover { background: rgba(239, 232, 219, .04); padding-left: 12px; }
.toc .n { font: italic 400 22px/1 var(--serif); color: var(--amber); }
.toc .t { font: 400 clamp(17px, 1.5vw, 21px)/1.3 var(--serif); }
.toc .m { font: 400 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.method { margin-top: clamp(24px, calc(4.4 * var(--sv)), 44px); display: grid; justify-items: center; gap: 14px; }
.method-lead { font: italic 400 clamp(19px, 1.7vw, 25px)/1.35 var(--serif); max-width: 24em; }
.method-credits { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 40px; }
.method-credits div { display: flex; gap: .8em; align-items: baseline; }
.method-credits dt { font: 500 11px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.method-credits dd { font: 400 clamp(17px, 1.4vw, 20px)/1.3 var(--serif); }
/* Before the visitor engages, everything stands in its final state (Caesar, 2026-10-26). */
/* While the page settles, nothing transitions: what is final at load is simply there (round three). */
.pre *, .pre *::before, .pre *::after, .chapter.snap *, .chapter.snap *::before, .chapter.snap *::after { transition: none !important; }
.js .intertitle > * { opacity: 0; transform: translateY(24px); transition: opacity 1.2s ease, transform 1.4s var(--ease); }
.js .intertitle.in > * { opacity: 1; transform: none; }
.js .intertitle.in > :nth-child(2) { transition-delay: .12s; } .js .intertitle.in > :nth-child(3) { transition-delay: .3s; }
.js .intertitle.in > :nth-child(4) { transition-delay: .45s; } .js .intertitle.in > :nth-child(5) { transition-delay: .6s; }

/* ---------- Chapters ---------- */
/* No pins (Maxim, 21:31): a chapter is one screen, bands included, and scrolls like the rest; its sequence plays on time. */
.chapter { position: relative; --p: 0; --open: 0; --light: 0; }
.stage { position: relative; height: calc(100 * var(--sv)); min-height: 520px; overflow: hidden; isolation: isolate; background: var(--ink); }
/* The photo lives only between the bands, ending 4 px under each, so no clip rounding at the stage's outer edge can
   ever show it outside the chapter (Maxim's line, 21:31; at 1.25 the composited photo was clipped a row wider). */
.frames { position: absolute; left: 0; right: 0; top: calc(var(--nav) + var(--bar-min) - 4px); bottom: calc(var(--bar-min) - 4px); z-index: 0; overflow: hidden; }
.frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transform: scale(calc(1.16 - var(--p) * .12)); object-position: var(--pan, 50%) 50%;
  filter: brightness(calc(.34 + var(--light) * .48)) saturate(calc(.1 + var(--light) * .85)) contrast(calc(1.2 - var(--light) * .12)) sepia(calc(.4 - var(--light) * .32));
  transition: opacity 1.1s ease; will-change: opacity, transform, filter; }
.frame.on { opacity: 1; }
.shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%, transparent 40%, rgba(10, 9, 8, .62) 100%),
    radial-gradient(ellipse 34% 40% at 100% 12%, rgba(10, 9, 8, .62), rgba(10, 9, 8, 0) 100%),
    radial-gradient(ellipse 52% 46% at 0% 26%, rgba(10, 9, 8, .7), rgba(10, 9, 8, 0) 100%),
    linear-gradient(90deg, rgba(10, 9, 8, .6) 0%, rgba(10, 9, 8, .14) 46%, rgba(10, 9, 8, 0) 60%),
    linear-gradient(0deg, rgba(10, 9, 8, .9) 0%, rgba(10, 9, 8, .38) 34%, rgba(10, 9, 8, 0) 58%); }
.stage .lb { z-index: 3; }
.stage .lb-top { height: calc(var(--bar-max) + var(--nav)); }
.flare { position: absolute; top: calc(var(--nav) + var(--bar-min)); bottom: var(--bar-min); left: -10%; right: -10%; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse 40% 70% at 78% 62%, rgba(255, 186, 96, .55), rgba(255, 140, 60, .18) 40%, transparent 70%),
              linear-gradient(100deg, transparent 30%, rgba(255, 200, 130, .16) 50%, transparent 70%); }
.chapter.cue.done .flare { animation: flare 1.8s ease-out; }
@keyframes flare { 0% { opacity: 0; transform: translateX(-6%); } 22% { opacity: 1; } 100% { opacity: 0; transform: translateX(6%); } }
.bar-label { position: absolute; z-index: 6; left: var(--g); right: var(--g); display: flex; justify-content: space-between;
  gap: 16px; align-items: center; height: var(--bar-min); color: var(--dim); pointer-events: none; }
.bar-label.top { top: var(--nav); } .bar-label.bottom { bottom: 0; pointer-events: auto; }
.bar-label b { color: var(--paper); font-weight: 500; }
.bar-label .k { color: var(--amber); }

/* The deal's timeline in the bottom bar: from the brokerage agreement to the deed (or the lease). */
.timeline { flex: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.timeline .track { position: relative; height: 1px; background: var(--line); }
.timeline .track i { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--amber);
  transform-origin: 0 50%; transform: scaleX(var(--e, 0)); }
.timeline .head { position: absolute; top: 50%; left: calc(var(--e, 0) * 100%); transform: translate(calc(var(--e, 0) * -100%), -50%);
  padding: 3px 8px; border: 1px solid var(--amber); border-radius: 999px; background: var(--ink); color: var(--amber);
  font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; white-space: nowrap; }
.timeline .end { color: var(--dim); }

.ch-grid { position: absolute; inset: 0; z-index: 5; display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "left right"; column-gap: clamp(24px, 5vw, 96px);
  padding: calc(var(--nav) + var(--bar-min) + clamp(18px, calc(4 * var(--sv)), 44px)) var(--g) calc(var(--bar-min) + clamp(18px, calc(4 * var(--sv)), 44px)); }
/* Two independent columns, each the stage's full height: title over description, facts over the deal. */
.ch-title { grid-area: left; align-self: start; }
.numeral { font: italic 400 clamp(56px, min(8.4vw, calc(15 * var(--sv))), 150px)/.8 var(--serif); color: rgba(240, 180, 94, .9);
  letter-spacing: .02em; margin-bottom: clamp(10px, calc(2.4 * var(--sv)), 26px); }  /* solid italic: outlined, the hairline serifs joined the stems into bars (Courbet) */
.ch-title h3 { font: 400 clamp(30px, min(4.2vw, calc(7 * var(--sv))), 66px)/1.02 var(--serif); letter-spacing: -.015em; max-width: 12em;
  text-wrap: balance; text-shadow: 0 1px 2px rgba(10, 9, 8, .35), 0 2px 30px rgba(10, 9, 8, .6); }
.ch-title .district { margin-top: clamp(10px, calc(2 * var(--sv)), 18px); color: var(--dim); }
.credits { grid-area: right; align-self: start; justify-self: end; text-align: right; color: var(--dim); }
.credits li { padding: 3px 0; }
.credits li:first-child { color: var(--amber); }
.subtitle { grid-area: left; align-self: end; max-width: 30em;
  font: 400 clamp(16px, 1.32vw, 20px)/1.5 var(--sans); color: var(--paper); text-shadow: 0 1px 14px rgba(10, 9, 8, .9); }
/* The whole description; on a phone only its last sentence (the whole would crowd the title), the rest in the gallery. */
.subtitle span { display: none; }
.subtitle span.all { display: block; }

.deal { grid-area: right; justify-self: end; align-self: end; text-align: right; text-shadow: 0 1px 2px rgba(10, 9, 8, .6), 0 0 22px rgba(10, 9, 8, .75); }
.credits, .ch-title .district, .bar-label { text-shadow: 0 1px 2px rgba(10, 9, 8, .7), 0 0 16px rgba(10, 9, 8, .8); }
.deal .tags { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: clamp(12px, calc(2.4 * var(--sv)), 22px); }
.badge { display: inline-block; padding: .2em .65em .25em; border-radius: 2px; background: var(--paper); color: var(--ink);
  font: 500 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; vertical-align: .15em; }
.toc .badge { margin-left: .6em; font-size: 9.5px; }
.chapter.sample.done .figure { color: var(--paper); }
.chapter.sample .flare { display: none; }
.chapter.sample .ledger .diff { color: var(--dim); }
.chapter.sample .timeline .track i { background: var(--faint); }
.chapter.sample .timeline .head { border-color: var(--faint); color: var(--dim); }
.deal .when { display: flex; justify-content: flex-end; gap: .9em; align-items: baseline; color: var(--dim); }
.deal .when .phase { color: var(--amber); }
.deal .when .phase:empty { display: none; }
.deal .when.swap { animation: swap .7s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.figure { display: flex; justify-content: flex-end; align-items: baseline; margin-top: clamp(4px, calc(1 * var(--sv)), 10px);
  font: 400 clamp(50px, min(9.2vw, calc(15.5 * var(--sv))), 156px)/1 var(--serif); letter-spacing: -.02em; color: var(--paper);
  transition: color 1s ease; white-space: nowrap; }
.chapter.done .figure { color: var(--amber); }
.figure .unit { font-size: .36em; letter-spacing: 0; margin-left: .3em; font-style: italic; }
/* The rental's extras (copy 5.2): "+ czynsz administracyjny" under the amount, short on a phone; "+ idealny najemca"
   in its own line under the result, in the accent and nearly the figure's size, never counted. */
.figure-extra { margin-top: 2px; font: italic 400 clamp(15px, 1.3vw, 19px)/1.3 var(--serif); color: var(--dim); }
.figure-extra .xs, .was-extra .xs { display: none; }
.was-extra { color: var(--dim); }
.bonus { margin-top: clamp(4px, calc(1 * var(--sv)), 10px); font: italic 400 clamp(30px, min(5.4vw, calc(9 * var(--sv))), 92px)/1.02 var(--serif); color: var(--amber); letter-spacing: -.01em; }
.odo { display: inline-flex; }
.odo .dg { display: inline-block; width: .6em; height: 1.08em; overflow: hidden; text-align: center; transition: width .5s var(--ease); }
.odo .dg.blank, .odo .sp.blank { width: 0; }
.odo .col { display: flex; flex-direction: column; transition: transform .75s cubic-bezier(.2, .9, .2, 1); }
.odo .col span { height: 1.08em; line-height: 1.08em; }
.odo .sp { display: inline-block; width: .2em; height: 1.08em; line-height: 1.08em; overflow: hidden; text-align: center; }
.odo .sp:not(:empty) { width: .27em; overflow: visible; }
.ledger { margin-top: clamp(10px, calc(2 * var(--sv)), 18px); display: grid; justify-items: end; gap: 4px; }
.ledger .was { color: var(--dim); font-size: 15px; }
.ledger .was b { font-weight: 500; color: var(--paper); font-family: var(--serif); font-size: 20px; margin-left: .35em; }
.ledger .how { max-width: 22em; margin-top: 6px; color: var(--paper); font: italic 400 clamp(16px, 1.3vw, 19px)/1.35 var(--serif); }
.ledger .diff { font: 500 12.5px/1.5 var(--mono); letter-spacing: .1em; color: var(--amber); text-transform: uppercase; }
.deal .see { margin-top: clamp(14px, calc(2.6 * var(--sv)), 24px); }

/* A chapter set to its start (.cue, only when below the fold at load) reveals in order (round three): .seen brings
   the numeral, title, district, facts and description; .start the samples tags and "Na starcie" with the agreed price;
   .done, after the count, the ledger (agreed price, difference, her words) and "Zobacz zdjęcia". Without .cue all is final. */
.chapter.cue .ch-title > *, .chapter.cue .credits, .chapter.cue .subtitle, .chapter.cue .deal > * {
  opacity: 0; transform: translateY(14px); filter: blur(4px);
  transition: opacity 1s ease, transform 1.2s var(--ease), filter 1s ease; }
.chapter.cue .credits { transform: translateY(-8px); }
.chapter.cue .deal .see { visibility: hidden; transition: opacity 1s ease, transform 1.2s var(--ease), filter 1s ease, visibility 0s 1.2s; }
.chapter.cue.seen .ch-title > *, .chapter.cue.seen .credits, .chapter.cue.seen .subtitle,
.chapter.cue.start .deal .tags, .chapter.cue.start .deal .when, .chapter.cue.start .deal .figure, .chapter.cue.start .deal .figure-extra,
.chapter.cue.done .deal .bonus, .chapter.cue.done .deal .ledger, .chapter.cue.done .deal .see { opacity: 1; transform: none; filter: none; }
.chapter.cue.seen .ch-title > :nth-child(2) { transition-delay: .15s; }
.chapter.cue.seen .ch-title > :nth-child(3), .chapter.cue.seen .credits { transition-delay: .35s; }
.chapter.cue.seen .subtitle { transition-delay: .5s; }
.chapter.cue.start .deal .figure { transition-delay: .15s; }
/* While the count rolls, its label steps aside: the moving figure is neither the agreed price nor the result yet. */
.chapter.cue.rolling .deal .when { opacity: 0; transition: opacity .4s ease; }
.chapter.cue.done .deal .ledger { transition-delay: .25s; }
.chapter.cue.done .deal .see { visibility: visible; transition: opacity 1s ease .6s, transform 1.2s var(--ease) .6s, filter 1s ease .6s, visibility 0s 0s; }

/* ---------- Coda ---------- */
.coda { min-height: calc(100 * var(--sv)); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 96px var(--g); gap: .2em; font: 400 clamp(38px, min(6.4vw, calc(11 * var(--sv))), 112px)/1.02 var(--serif); letter-spacing: -.02em; }
/* Her full names for both documents (2026-10-27 14:41) made the first line long: the two facts sit smaller, one
   sentence a line, under the punchline's size. */
.coda-a { font-size: .6em; line-height: 1.12; }
.coda-a span { display: block; text-wrap: balance; }
.coda-b { font-style: italic; color: var(--amber); margin-top: .12em; }
.js:not(.rm) .coda p { opacity: 0; transform: translateY(20px); filter: blur(6px); transition: opacity 1.4s ease, transform 1.6s var(--ease), filter 1.4s; }
.js:not(.rm) .coda.in p { opacity: 1; transform: none; filter: none; }
.js:not(.rm) .coda.in .coda-b { transition-delay: .7s; }

/* ---------- Credits: O mnie ---------- */
.roll { padding: clamp(80px, calc(14 * var(--sv)), 160px) var(--g); display: flex; flex-direction: column; align-items: center; text-align: center;
  border-top: 1px solid var(--line); }
.roll h2 { font: 400 clamp(44px, 6vw, 96px)/1 var(--serif); letter-spacing: -.02em; margin: 14px 0 clamp(36px, calc(7 * var(--sv)), 72px); }
.cast { display: grid; gap: 14px; width: min(100%, 720px); margin-bottom: clamp(48px, calc(9 * var(--sv)), 96px); }
.cast > div { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: baseline; }
.cast dt { text-align: right; font: 400 11.5px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.cast dd { text-align: left; font: 400 clamp(19px, 1.7vw, 24px)/1.3 var(--serif); }
.about { max-width: 40em; display: grid; gap: 1.1em; color: var(--dim); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.7; text-wrap: pretty; }
.about .about-lead { color: var(--paper); font: italic 400 clamp(22px, 2.1vw, 30px)/1.35 var(--serif); margin: .5em 0; }

/* ---------- Contact ---------- */
.contact { position: relative; padding: clamp(80px, calc(14 * var(--sv)), 150px) var(--g) clamp(64px, calc(11 * var(--sv)), 120px); text-align: center;
  display: flex; flex-direction: column; align-items: center; border-top: 1px solid var(--line);
  background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(240, 180, 94, .08), transparent 70%); }
.contact-mark { width: clamp(64px, 7vw, 96px); color: var(--paper); margin-bottom: 28px; }
.contact-mark svg { width: 100%; height: auto; }
.contact h2 { font: 400 clamp(36px, 5.4vw, 88px)/1.02 var(--serif); letter-spacing: -.02em; max-width: 13em; text-wrap: balance; }
.contact-text { margin-top: 22px; color: var(--dim); max-width: 36em; }
.phone { margin-top: clamp(26px, calc(5 * var(--sv)), 48px); font: italic 400 clamp(46px, 8vw, 132px)/1 var(--serif); letter-spacing: -.01em;
  color: var(--amber); text-decoration: none; white-space: nowrap; transition: color .3s; }
.phone:hover { color: var(--paper); }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(24px, calc(4 * var(--sv)), 40px); }
.contact-list { margin-top: clamp(36px, calc(6 * var(--sv)), 56px); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; color: var(--faint); font-size: 11px; }
.contact-list a { color: var(--paper); text-decoration: none; text-transform: none; letter-spacing: .04em; font-size: 13px; border-bottom: 1px solid var(--line); }
.contact-list a:hover { border-color: var(--amber); }
.contact-list span { margin-right: .6em; }

/* ---------- Legal footer ---------- */
.legal { border-top: 1px solid var(--line); padding: 40px var(--g) 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 18px 48px; color: var(--faint); font-size: 13px; line-height: 1.65; }
.legal strong { color: var(--dim); font-weight: 600; }
.legal a { color: var(--dim); }
.legal-more summary { cursor: pointer; font: 500 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.legal-more p + p { margin-top: 10px; }
.legal-contact { grid-column: 1 / -1; color: var(--dim); }
.legal-contact a, .legal-c a { text-decoration: none; border-bottom: 1px solid var(--line); }
.legal-c { grid-column: 1 / -1; font: 400 11px var(--mono); letter-spacing: .14em; }
.noscript { padding: 40px var(--g); text-align: center; }

/* ---------- Gallery dialog ---------- */
.gallery { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--ink); color: var(--paper); }
.gallery[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.gallery::backdrop { background: rgba(10, 9, 8, .9); }
.g-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px var(--g) 14px; }
.g-head h3 { font: 400 clamp(22px, 2.4vw, 36px)/1.1 var(--serif); margin-top: 6px; }
.g-kicker { color: var(--amber); }
.g-close, .g-nav { min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; color: var(--paper); }
.g-close:hover, .g-nav:hover { border-color: var(--paper); }
.g-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.g-strip::-webkit-scrollbar { display: none; }
.g-strip figure { flex: 0 0 100%; margin: 0; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; padding: 0 var(--g); }
.g-strip img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.g-strip figure.plan img { background: #f4f1ea; padding: 2%; }
.g-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--g); }
.g-cap { text-align: center; color: var(--dim); font-size: 14px; }
.g-cap b { font: 500 11px var(--mono); letter-spacing: .12em; color: var(--amber); margin-right: .8em; }
.g-info { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px 48px; padding: 4px var(--g) 24px; color: var(--dim); font-size: 14.5px; line-height: 1.6; }
.g-info ul { font: 400 11px/1.8 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); columns: 2; column-gap: 24px; }

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav::after, .lang ul { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .nav-name { display: none; }
  .nav-owl { width: 30px; }
  .nav .long { display: none; } .nav .short { display: inline; }
  .nav { gap: 12px; }
  .nav nav { gap: 12px; }
  .nav nav a { font-size: 10.5px; letter-spacing: .1em; white-space: nowrap; }
  .lang summary { padding: 14px 0; font-size: 10.5px; letter-spacing: .1em; }
  .hero-credits { display: none; }
  .hero h1 { font-size: clamp(40px, 12.4vw, 64px); }
  /* Cyrillic sets wider: each of the two lines stays on one line. */
  :lang(uk) .hero h1, :lang(ru) .hero h1 { font-size: clamp(32px, 10.7vw, 56px); }
  .hero-sub { font-size: 15px; }
  .reveal { font-size: clamp(25px, 7.4vw, 34px); }
  .toc a { grid-template-columns: 2.2em 1fr; }
  .toc .m { grid-column: 2; white-space: normal; }

  .ch-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto;
    grid-template-areas: "title" "." "sub" "deal"; row-gap: 14px;
    padding: calc(var(--nav) + var(--bar-min) + 14px) var(--g) calc(var(--bar-min) + 14px); }
  .credits { display: none; }
  .ch-title { grid-area: title; } .subtitle { grid-area: sub; } .deal { grid-area: deal; }
  .numeral { font-size: clamp(46px, 13vw, 64px); margin-bottom: 8px; }
  .ch-title h3 { font-size: clamp(27px, 8vw, 36px); }
  .ch-title .district { font-size: 10.5px; letter-spacing: .1em; color: rgba(239, 232, 219, .86);
    text-shadow: 0 1px 2px rgba(10, 9, 8, .95), 0 0 8px rgba(10, 9, 8, .9), 0 0 22px rgba(10, 9, 8, .8); }
  .subtitle { font-size: 15px; max-width: none; }
  .subtitle span.all { display: none; }
  .subtitle span:nth-last-child(2) { display: block; }
  .deal { justify-self: stretch; text-align: left; }
  .deal .when { justify-content: flex-start; font-size: 10.5px; letter-spacing: .1em; flex-wrap: wrap; gap: .2em .8em; }
  .figure { justify-content: flex-start; font-size: min(13.4vw, calc(9.5 * var(--sv))); }
  .ledger { justify-items: start; }
  .ledger .was { font-size: 13.5px; } .ledger .was b { font-size: 17px; }
  .ledger .how { max-width: 22em; margin-top: 6px; color: var(--paper); font: italic 400 clamp(16px, 1.3vw, 19px)/1.35 var(--serif); }
.ledger .diff { font-size: 11px; }
  .deal .tags { justify-content: flex-start; margin-bottom: 10px; }
  .deal .see { margin-top: 12px; min-height: 44px; }
  .bar-label { font-size: 10px; letter-spacing: .1em; }
  .timeline { grid-template-columns: 1fr; } .timeline .start, .timeline .end { display: none; }
  .shade { background:
    linear-gradient(180deg, rgba(10, 9, 8, .72) 0%, rgba(10, 9, 8, .1) 34%, rgba(10, 9, 8, 0) 44%),
    linear-gradient(0deg, rgba(10, 9, 8, .94) 0%, rgba(10, 9, 8, .62) 40%, rgba(10, 9, 8, 0) 64%); }

  .cast > div { grid-template-columns: 1fr; gap: 2px; }
  .cast dt, .cast dd { text-align: center; }
  .legal { grid-template-columns: 1fr; }
  .gallery[open] { display: block; overflow-y: auto; }
  .g-head { position: sticky; top: 0; z-index: 2; background: var(--ink); padding-top: 16px; }
  .g-head h3 { font-size: 22px; }
  .g-kicker { font-size: 10px; letter-spacing: .1em; }
  .g-close { padding: 0 14px; }
  .g-strip { height: min(calc(58 * var(--sv)), 70vw); }
  .g-strip figure { padding: 0; }
  .g-foot { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "cap cap" "prev next"; gap: 10px; }
  .g-cap { grid-area: cap; min-height: 3em; font-size: 13px; }
  .g-nav[data-step="-1"] { grid-area: prev; } .g-nav[data-step="1"] { grid-area: next; }
  .g-info { grid-template-columns: 1fr; padding-bottom: 40px; }
  .g-info ul { columns: 1; }
}
@media (max-width: 380px) {
  .nav nav { gap: 11px; }
  .nav nav a { font-size: 10px; letter-spacing: .08em; }
}

/* ---------- Reduced motion: the film becomes stills, every figure in place ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain { animation: none; }
  .hero-bg img { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}
.rm .nav { position: absolute; }
.rm .prologue { height: auto; }
.rm .prologue-stage { position: relative; height: auto; min-height: calc(100 * var(--sv)); }
.rm .chapter { height: auto; --open: 1; --light: .85; --p: .5; --e: 1; }
.rm .stage { position: relative; height: calc(100 * var(--sv)); }
.rm .hint .arr { animation: none; }

@media print { .hint { display: none; } }
@media print { .hero *, .chapter *, .intertitle *, .coda * { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } }

/* ---------- Fitting a chapter above its bottom band, at any height (Maxim, 21:31) ---------- */
/* app.js adds .fit-1 to .fit-4, the lightest that keeps every block clear of the bands and of each other. The facts and
   the whole description stay in the gallery; her words are never cut. */
.chapter.fit-1 .numeral { font-size: min(6vw, calc(10 * var(--sv))); margin-bottom: calc(1.2 * var(--sv)); }
.chapter.fit-1 .ch-title h3 { font-size: min(3.4vw, calc(5.8 * var(--sv))); }
.chapter.fit-1 .ch-title .district { margin-top: 6px; }
.chapter.fit-1 .figure { font-size: min(7.6vw, calc(12 * var(--sv))); margin-top: 6px; }
.chapter.fit-1 .ledger { margin-top: 6px; gap: 2px; }
.chapter.fit-1 .deal .tags { margin-bottom: 8px; }
.chapter.fit-1 .deal .see { margin-top: 10px; }
.chapter.fit-1 .credits li { padding: 1px 0; }
.chapter.fit-2 .credits { display: none; }
.chapter.fit-2 .ledger .how { max-width: 30em; font-size: 15.5px; line-height: 1.3; }
.chapter.fit-3 .subtitle, .chapter.fit-3 .numeral { display: none; }
.chapter.fit-4 .figure { font-size: min(6.2vw, calc(9.5 * var(--sv))); }
.chapter.fit-4 .ch-title h3 { font-size: min(3vw, calc(5 * var(--sv))); }
@media (max-width: 760px) {
  .chapter.fit-1 .numeral { font-size: clamp(34px, 10vw, 46px); margin-bottom: 4px; }
  .chapter.fit-1 .ch-title h3 { font-size: clamp(24px, 7vw, 30px); }
  .chapter.fit-1 .figure { font-size: min(12vw, calc(8.5 * var(--sv))); }
  .chapter.fit-2 .ledger .how { font-size: 14.5px; }
  .chapter.fit-4 .figure { font-size: min(10.5vw, calc(7.5 * var(--sv))); }
  .chapter.fit-4 .ch-title h3 { font-size: clamp(22px, 6.2vw, 26px); }
}
.chapter.fit-1 .bonus { font-size: min(4.4vw, calc(7 * var(--sv))); margin-top: 2px; }
.chapter.fit-4 .bonus { font-size: min(3.6vw, calc(5.6 * var(--sv))); }
/* Last step, for very short screens: her close leaves the photo for just under it, whole and in her order, still only
   after the count (copy 5.4 may move; Claude β, 21:31). */
.how-out { display: none; }
.chapter.fit-5 .ledger .how { display: none; }
.chapter.fit-5 .how-out { display: block; margin: 0; padding: 14px var(--g) 30px; background: var(--ink); color: var(--paper);
  font: italic 400 clamp(16px, 1.3vw, 19px)/1.4 var(--serif); max-width: 40em; }
.chapter.cue .how-out { opacity: 0; transition: opacity 1s ease .25s; }
.chapter.cue.done .how-out { opacity: 1; }
@media (max-width: 760px) {
  .figure-extra .xl, .was-extra .xl { display: none; }
  .figure-extra .xs, .was-extra .xs { display: inline; }
  .bonus { font-size: min(8.6vw, calc(6 * var(--sv))); }
  .chapter.fit-1 .bonus { font-size: min(7.4vw, calc(5 * var(--sv))); }
}

/* The bar on the narrowest phones: the links, the language and the owl stay on one line in every language. */
@media (max-width: 379px) { .nav, .nav nav { gap: 8px; } }
@media (max-width: 349px) { .nav nav a, .lang summary { font-size: 9.5px; letter-spacing: .06em; } .nav-owl { width: 26px; } }