/* The Hollow House · Case No. 1926-1031
   Base styles are the still, readable document (reduced motion, no JS).
   Everything under html.motion turns it into the pinned film. */

:root {
  --bg: #07080a;
  --bg-2: #0d0f13;
  --ink: #d9dee5;          /* moonlight */
  --ink-soft: #9aa4b1;
  --ink-faint: #7d8794;
  --paper: #d8cfbb;
  --paper-ink: #1c1813;
  --blood: #8c130e;        /* the one accent: dried blood */
  --blood-hi: #c0251b;     /* the same red, lifted for small marks on black */
  --serif: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --mono: "Courier Prime", "Courier New", ui-monospace, monospace;
  --gutter: clamp(16px, 5vw, 88px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--mono); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
p, h1, h2, h3, ol { margin: 0; }
::selection { background: var(--blood); color: #f3ebdd; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--paper); color: var(--paper-ink); padding: 8px 14px; font-size: 14px; }
.skip:focus { top: 12px; }

.dot { opacity: .6; padding: 0 .2em; }

/* ---------- shared type ---------- */
.label {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.line {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 3.5vw, 3.3rem);
  line-height: 1.06; letter-spacing: -0.005em; color: var(--ink); text-wrap: balance;
}
.h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem, 5vw, 4.6rem);
  line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance;
}

/* the faint flicker on display type */
.flicker { animation: flicker 7.3s steps(1, end) infinite; }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  11% { opacity: .86; } 11.6% { opacity: 1; }
  38% { opacity: .93; } 38.4% { opacity: 1; }
  39.2% { opacity: .78; } 39.7% { opacity: 1; }
  71% { opacity: .9; } 71.5% { opacity: 1; }
}

/* the stamp: worn red ink */
.stamp {
  display: inline-block; font-family: var(--mono); font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--blood-hi);
  border: 2px solid currentColor; padding: 0.42em 0.8em 0.36em; transform: rotate(-4deg);
  -webkit-mask-image: var(--wear); mask-image: var(--wear); -webkit-mask-size: 180px; mask-size: 180px;
}

/* redaction bars: the text is there, the bar sits on it */
.redact {
  position: relative; display: inline-block; color: transparent; user-select: none;
  background: #050506; padding: 0 0.15em; line-height: 1.15; vertical-align: baseline;
  transform-origin: left center;
}
.redact--inline { background: var(--ink); margin-right: 0.4em; }

/* ---------- top bar ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter); pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar::before { content: ""; position: absolute; inset: 0 0 -56px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(7,8,10,.96), rgba(7,8,10,.72) 55%, transparent); }
.bar__mark { font-family: var(--serif); font-size: 1.15rem; text-decoration: none; letter-spacing: 0.01em; }
.bar__file { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-left: auto; }
.bar__book {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid var(--blood-hi); padding: 6px 0 3px; transition: color .16s var(--ease-out);
}
.bar__book:hover { color: #fff; }
.bar__mark, .bar__file, .bar__book, .bar__skip { text-shadow: 0 1px 12px rgba(0,0,0,.8); }
.bar__mark, .bar__file, .bar__book, .bar__skip, .bar::before { transition: opacity .4s var(--ease-out); }
.bar__skip { display: none; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--ink-soft); padding: 6px 0 3px; }
.bar__skip:hover { color: var(--ink); }
.in-film .bar__skip { display: block; position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); }
.in-film .bar__file, .in-film .bar__book { opacity: 0; pointer-events: none; visibility: hidden; }
.in-film .bar__mark { opacity: .5; }
.in-film .bar::before { opacity: 0; }

/* ---------- film: still document (base) ---------- */
.film { position: relative; background: var(--bg); }
.film__stage { position: relative; }
.film__shake, .film__scrim, .film__flash, .film__black, .hud, .walk { display: none; }
.cues { padding: 96px var(--gutter) 40px; display: grid; gap: 28px; max-width: 980px; margin: 0 auto; }
.still { margin: 24px 0 0; }
.still img { width: 100%; height: auto; }
.cue--cover { text-align: left; }
.cue--cover .stamp { margin-bottom: 18px; }
.wordmark {
  font-family: var(--serif); font-weight: 400; font-size: clamp(3.2rem, 9.4vw, 9.4rem);
  line-height: 0.9; letter-spacing: -0.015em; margin-top: 10px;
}
.line--big { font-style: italic; font-size: clamp(2.6rem, 6.4vw, 6.2rem); line-height: 1; }
.line--end, .line--end2 { font-size: clamp(2.2rem, 5.2vw, 5.2rem); }
.line--end2 { color: var(--ink-soft); font-style: italic; }
.cue .label { margin-bottom: 10px; }
.typed { font-family: var(--mono); font-size: clamp(1.25rem, 2.3vw, 2.1rem); line-height: 1.38; letter-spacing: -0.01em; max-width: 24ch; }
.tw .c { opacity: 1; }

.note {
  position: relative; background: var(--paper); color: var(--paper-ink); padding: 22px 24px 20px;
  width: min(440px, 100%); transform: rotate(1.6deg);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.85), 0 2px 0 rgba(255,255,255,.25) inset;
  background-image: linear-gradient(transparent 0 calc(100% - 1px), rgba(28,24,19,.08) 0); background-size: 100% 1.6em;
}
.note__head { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: #5a5143; margin-bottom: 12px; }
.note__body { font-size: clamp(1.15rem, 1.6vw, 1.42rem); line-height: 1.45; min-height: 4.4em; }
.note__foot { font-size: 0.78rem; line-height: 1.6; color: #4b4337; margin-top: 14px; }
.note .redact { background: #121010; }
.note__stamp {
  position: absolute; right: 14px; bottom: -14px; transform: rotate(-8deg);
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--blood); border: 2px solid currentColor; padding: 4px 9px; background: rgba(216,207,187,.7);
  -webkit-mask-image: var(--wear); mask-image: var(--wear); -webkit-mask-size: 160px; mask-size: 160px;
}

/* ---------- film: the pinned stage (motion) ---------- */
.motion .film { height: calc(var(--film-len, 1300) * 1vh); }
.motion .film__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.motion .film__shake { display: block; position: absolute; inset: 0; will-change: transform; }
.motion .film__poster, .motion .film__canvas, .motion .film__dark, .motion .film__face { position: absolute; inset: 0; width: 100%; height: 100%; }
.motion .film__poster img, .motion .film__face img { width: 100%; height: 100%; object-fit: cover; }
.motion .film__canvas { display: block; }
.motion .film__poster.is-gone { visibility: hidden; }
.motion .film__dark {
  background: radial-gradient(ellipse var(--ew, 95%) var(--eh, 90%) at 50% 54%, rgba(0,0,0,0) 0%, rgba(0,0,0,.36) 55%, rgba(0,0,0,.74) 100%);
  opacity: 0; pointer-events: none;
}
/* what is left of the candlelight still moves on the walls */
.motion .film__dark::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(255,170,90,.06), transparent 70%);
  animation: candle 1.7s steps(1, end) infinite;
}
@keyframes candle {
  0% { opacity: .8; } 9% { opacity: 1; } 17% { opacity: .66; } 26% { opacity: .92; } 38% { opacity: .6; }
  47% { opacity: 1; } 58% { opacity: .74; } 66% { opacity: .95; } 79% { opacity: .62; } 88% { opacity: .9; }
}
.motion .film__face { opacity: 0; transform-origin: 50% 42%; transform: scale(1.12); }
.film__sub { display: none; }
.motion .film__sub { display: block; position: absolute; left: 6%; top: 24%; width: 18%; height: auto; opacity: 0; pointer-events: none; }
.motion .film__sub.is-on { opacity: .45; }
.motion .film__face.is-on { opacity: 1; }
.motion .film__scrim {
  display: block; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 60% at 0% 100%, rgba(3,4,6,.78), transparent 70%),
    linear-gradient(to top, rgba(3,4,6,.62), transparent 34%),
    linear-gradient(to bottom, rgba(3,4,6,.5), transparent 16%);
}
.motion .film__flash { display: block; position: fixed; inset: 0; z-index: 90; background: #a3120f; opacity: 0; pointer-events: none; }
.motion .film__flash.is-red { opacity: 1; background: #a3120f; }
.motion .film__flash.is-black { opacity: 1; background: #000; }
.motion .film__black { display: block; position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none; }
.motion .film__black.is-on { opacity: 1; }

.motion .cues { position: absolute; inset: 0; padding: 0; max-width: none; display: block; pointer-events: none; }
.motion .still { display: none; }
.motion .cue { position: absolute; opacity: 0; visibility: hidden; will-change: opacity, transform; }
.tw .caret { display: none; }
.motion .tw .c { visibility: hidden; }
.motion .tw .c.on { visibility: visible; }
.motion .tw.typing .caret {
  display: inline-block; position: absolute; width: 0.55em; height: 1em; margin: 0.18em 0 0 1px;
  background: currentColor; animation: caret .9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.motion .cue--cover { left: 0; right: 0; bottom: 15vh; text-align: center; }
/* the stamp lands under the title, on the dark lawn, clear of the porch lights */
.motion .cue--cover { display: flex; flex-direction: column; align-items: center; }
.motion .cue--cover .wordmark { order: 1; }
.motion .cue--cover .label { order: 2; margin: 18px 0 14px; }
.motion .cue--cover .stamp { order: 3; margin: 0; }
.motion .cue--cover .wordmark { margin-top: 14px; text-shadow: 0 4px 40px rgba(0,0,0,.6); }
.motion .cue--line, .motion .cue--typed { left: var(--gutter); bottom: 11vh; width: min(40rem, 52vw); }
.motion .cue--line .line { text-shadow: 0 2px 30px rgba(0,0,0,.7); }
.motion .cue--door { left: 0; right: 0; bottom: 8vh; text-align: center; }
.motion .cue--door .line { text-shadow: 0 4px 40px rgba(0,0,0,.9); }
.motion .cue--note { left: var(--gutter); right: auto; top: 22vh; margin-top: 0; }
.motion .cue--note .note { transform: translateY(-24px) rotate(-6deg); opacity: 0; transition: transform .6s cubic-bezier(.2,1.4,.4,1), opacity .25s ease-out; }
.motion .cue--note.is-on .note { transform: rotate(-2.2deg); opacity: 1; }
.motion .cue--ring { left: 50%; top: 56.5%; width: 86px; height: 124px; margin: -62px 0 0 -43px; }
.cue--ring { display: none; }
.motion .cue--ring { display: block; }
.cue--ring svg { width: 100%; height: 100%; overflow: visible; }
.cue--ring path { fill: none; stroke: var(--blood-hi); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset .9s cubic-bezier(.6,.05,.3,1) .25s; filter: drop-shadow(0 0 6px rgba(0,0,0,.8)); }
.cue--ring.is-on path { stroke-dashoffset: 0; }
.motion .cue--typed .typed { text-shadow: 0 1px 14px rgba(0,0,0,.9); }
.motion .cue--end { left: var(--gutter); right: var(--gutter); top: 0; bottom: 0; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: .35em; align-items: center; }
.motion .cue--sub { position: static; }

.motion .redact { transform: scaleX(0); transition: transform .5s var(--ease-out) .35s; }
.motion .cue.is-on .redact, .redact.is-on { transform: scaleX(1); }

.motion .hud {
  display: flex; gap: 14px; align-items: baseline; position: absolute; right: var(--gutter); bottom: 11vh;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft);
  text-shadow: 0 1px 10px rgba(0,0,0,.9); pointer-events: none;
}
.hud__t { color: var(--ink); font-variant-numeric: tabular-nums; min-width: 8.5ch; text-align: right; }
.hud__load { color: var(--ink-faint); }
.hud__load.is-done { display: none; }
.hud.is-ended .hud__t { color: var(--blood-hi); }
.motion .hud { transition: opacity .4s var(--ease-out); }
.motion .hud.is-hidden { opacity: 0; }

/* the invitation: walk up the path. Gone on the first 20px of scroll. */
.motion .walk {
  display: flex; flex-direction: column; align-items: center; gap: 10px; position: absolute; left: 0; right: 0; bottom: 22px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; pointer-events: none;
}
.motion .walk > * { animation: rise 1.2s var(--ease-out) 2.6s both; }
.walk i { display: block; width: 1px; height: 28px; background: rgba(217,222,229,.18); position: relative; overflow: hidden; }
.walk i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--ink); transform: translateY(-100%); animation: drain 1.6s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes drain { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* opening: the file is stamped, the title surfaces */
.motion .cue--cover .stamp { animation: stamp-in .42s cubic-bezier(.2,1.6,.4,1) .9s both; }
.motion .cue--cover .label { animation: rise 1.4s var(--ease-out) .3s both; }
.motion .cue--cover .wordmark { animation: surface 2.4s var(--ease-out) .1s both, flicker 7.3s steps(1, end) 2.6s infinite; }
@keyframes stamp-in { from { opacity: 0; transform: rotate(-11deg) scale(1.9); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes surface { from { opacity: 0; filter: blur(14px); letter-spacing: .06em; } to { opacity: 1; filter: blur(0); letter-spacing: -0.015em; } }
/* the frame never quite holds still */
.motion .film__canvas, .motion .film__poster { animation: breathe 11s ease-in-out infinite alternate; transform-origin: 50% 45%; }
@keyframes breathe { from { transform: scale(1.005); } to { transform: scale(1.035); } }

/* ---------- evidence: rooms under the torch ---------- */
.evidence { position: relative; padding: clamp(96px, 16vh, 180px) 0 clamp(40px, 8vh, 100px); background: var(--bg); }
.torch { display: none; }
.ev-intro { position: relative; z-index: 6; padding: 0 var(--gutter); max-width: 900px; margin: 0 auto clamp(48px, 10vh, 120px); text-align: center; }
.ev-intro .label { margin-bottom: 22px; }
.ev-intro__p { margin: 22px auto 0; max-width: 46ch; color: var(--ink-soft); font-size: 1rem; }
.ev-intro__p span { display: block; color: var(--ink); margin-top: 6px; }
.ev-intro__p .hint-touch { display: none; }

.exhibit {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) min(68vh, 46vw) minmax(0, .75fr); gap: clamp(20px, 3vw, 48px);
  align-items: end; padding: clamp(40px, 10vh, 120px) var(--gutter);
}
.exhibit__photo { grid-column: 2; grid-row: 1; position: relative; aspect-ratio: 4 / 5; }
.exhibit__photo img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 62%, transparent 100%);
}
.ring {
  position: absolute; left: var(--rx); top: var(--ry); width: var(--rw);
  transform: translate(-50%, -50%) rotate(-6deg); overflow: visible; pointer-events: none; aspect-ratio: .9;
}
.ring path { fill: none; stroke: var(--blood-hi); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: .9; }
.pencil {
  position: absolute; z-index: 1; left: var(--nx); top: var(--ny); max-width: 21ch;
  font-family: var(--mono); font-style: italic; font-size: clamp(0.9rem, 1.2vw, 1.05rem); line-height: 1.3;
  color: #efe4cc; transform: rotate(-3deg); text-shadow: 0 1px 6px rgba(0,0,0,.9);
}
.exhibit__tag { grid-column: 1; grid-row: 1; position: relative; z-index: 6; text-align: left; padding-bottom: 6%; justify-self: end; width: min(100%, 25rem); }
.exhibit__no { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blood-hi); }
.exhibit__room { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 3.2vw, 3.4rem); line-height: 1.02; margin: 10px 0 8px; text-wrap: balance; }
.exhibit__meta { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.exhibit__line { font-family: var(--serif); font-size: clamp(1.3rem, 1.9vw, 1.8rem); line-height: 1.3; margin-top: 18px; color: var(--ink); text-wrap: balance; max-width: 24ch; }

.exhibit__ghost { display: none; }
.motion .exhibit__ghost {
  display: block; position: absolute; inset: 0; pointer-events: none; opacity: 1; filter: brightness(1.3);
  -webkit-mask-image: radial-gradient(circle var(--gr, 140px) at var(--lx, -999px) var(--ly, -999px), #000 40%, transparent 100%);
  mask-image: radial-gradient(circle var(--gr, 140px) at var(--lx, -999px) var(--ly, -999px), #000 40%, transparent 100%);
}
.exhibit__ghost img {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transform: none; transform-origin: var(--gx) var(--gy);
  /* the generated variant drifts a little from the base photo away from the figure, so only her region ever shows */
  -webkit-mask-image: radial-gradient(ellipse var(--mrx) var(--mry) at var(--gx) var(--gy), #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse var(--mrx) var(--mry) at var(--gx) var(--gy), #000 55%, transparent 100%);
}
.motion .exhibit__ghost.is-flash { -webkit-mask-image: none; mask-image: none; opacity: 1; z-index: 7; filter: brightness(1.35) contrast(1.1); }
.motion .exhibit__ghost.is-flash img { transform: scale(1.06); transition: transform .12s linear; }
.motion .exhibit__ghost.is-gone { display: none; }
/* once found, the pencil note sits above the dark so it can be read */
.motion .exhibit.is-found .pencil { z-index: 7; }

/* motion: the room is dark, the torch finds it */
.motion .torch {
  display: block; position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  transition: opacity .7s var(--ease-out);
  background:
    radial-gradient(circle var(--r, 220px) at var(--x, 50%) var(--y, 46%), rgba(255, 222, 176, .07), rgba(255, 222, 176, 0) 70%),
    radial-gradient(circle var(--r, 220px) at var(--x, 50%) var(--y, 46%), rgba(5,6,8,0) 0%, rgba(5,6,8,.12) 34%, rgba(5,6,8,.8) 74%, rgba(5,6,8,.94) 100%);
}
.motion .torch.is-on { opacity: 1; }
.motion .evidence.is-dark { cursor: none; }
.motion .evidence.is-dark a, .motion .evidence.is-dark button { cursor: pointer; }

/* ---------- entry: conditions of reopening ---------- */
.entry {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px);
  row-gap: clamp(40px, 7vh, 80px); padding: clamp(120px, 20vh, 220px) var(--gutter) clamp(80px, 14vh, 160px);
  background: linear-gradient(var(--bg), var(--bg-2) 40%, var(--bg));
}
.entry__head { grid-column: 1 / span 7; }
.entry__head .label { margin-bottom: 22px; }
.entry__dates { margin-top: 22px; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.permits { grid-column: 1 / span 7; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 28px); align-self: start; }
.permit {
  position: relative; padding: 26px 26px 24px; background: var(--paper); color: var(--paper-ink);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.9);
}
.permit::before {
  content: ""; position: absolute; left: 0; right: 0; top: 64px; border-top: 1px dashed rgba(28,24,19,.35);
}
.permit__k { font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; }
.permit__v { font-family: var(--mono); font-weight: 700; font-size: clamp(3rem, 5vw, 4.6rem); line-height: 1; letter-spacing: -0.04em; margin: 34px 0 14px; font-variant-numeric: tabular-nums; }
.cur { font-size: 0.36em; vertical-align: 1.35em; margin-right: 0.12em; letter-spacing: 0; }
.permit__d { font-size: 0.92rem; line-height: 1.45; }
.permit--dark { background: #0b0c0f; color: var(--ink); outline: 1px solid rgba(217,207,187,.28); outline-offset: -1px; }
.permit--dark::before { border-top-color: rgba(217,222,229,.22); }
.permit--dark .permit__k { color: var(--blood-hi); }

.conditions { grid-column: 9 / span 4; grid-row: 1 / span 2; align-self: end; }
.conditions__h { font-family: var(--mono); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 14px; border-bottom: 1px solid rgba(217,222,229,.22); }
.conditions__list { list-style: none; padding: 0; counter-reset: c; }
.conditions__list li {
  counter-increment: c; display: grid; grid-template-columns: 2.2em 7.5em 1fr; gap: 10px;
  padding: 14px 0 13px; border-bottom: 1px dotted rgba(217,222,229,.2); font-size: 0.95rem; line-height: 1.45;
}
.conditions__list li::before { content: counter(c) "."; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.conditions__list li > span:first-child { color: var(--ink-soft); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; padding-top: 0.2em; }

/* ---------- close ---------- */
.close { min-height: 92vh; min-height: 92svh; display: grid; place-content: center; justify-items: center; text-align: center; padding: 80px var(--gutter); gap: 30px; }
.stamp--close { font-size: 0.78rem; }
.close__h { font-family: var(--serif); font-weight: 400; font-size: clamp(3.4rem, 11vw, 10rem); line-height: 0.92; letter-spacing: -0.015em; }
.btn {
  font: 700 0.86rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: #f4ece0;
  background: var(--blood); border: 0; border-radius: 2px; padding: 20px 34px 19px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 18px 40px -14px rgba(140,19,14,.55);
  transition: background-color .16s var(--ease-out), transform .12s var(--ease-out);
}
.btn:hover { background: #a3170f; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid #f4ece0; outline-offset: 5px; }
.close__late { min-height: 1.4em; font-size: 0.9rem; color: var(--ink); letter-spacing: 0.02em; }
.still-mode .close__late, .close__late:not(.is-armed) { visibility: hidden; }
.close__note { min-height: 1.6em; font-size: 0.85rem; color: var(--ink-soft); letter-spacing: 0.04em; }

.foot { padding: 34px var(--gutter) 40px; text-align: center; font-size: 0.78rem; color: var(--ink-soft); border-top: 1px solid rgba(217,222,229,.08); }

/* ---------- atmosphere ---------- */
.grain { position: fixed; inset: 0; z-index: 52; pointer-events: none; overflow: hidden; opacity: .05; }
.grain::before {
  content: ""; position: absolute; inset: -100%; background-image: var(--grain); background-size: 160px;
}
.motion .grain::before { animation: grain .5s steps(5) infinite; }
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -9%); }
  60% { transform: translate(-3%, 8%); } 80% { transform: translate(9%, 2%); } 100% { transform: translate(0, 0); }
}
.vignette { position: fixed; inset: 0; z-index: 50; pointer-events: none; background: radial-gradient(ellipse 85% 80% at 50% 50%, transparent 58%, rgba(0,0,0,.6) 100%); }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .bar { padding: 14px 16px; }
  .in-film .bar__skip { right: 16px; }
  .bar__file { display: none; }
  .bar__mark { font-size: 1.02rem; }
  .bar__book { font-size: 0.68rem; letter-spacing: 0.14em; }

  .line { font-size: clamp(1.75rem, 8vw, 2.3rem); }
  .wordmark { font-size: clamp(3.4rem, 17vw, 4.6rem); }
  .line--big { font-size: clamp(2.6rem, 12.5vw, 3.4rem); }
  .line--end, .line--end2 { font-size: clamp(1.8rem, 8.4vw, 2.4rem); }

  .motion .cue--cover { padding: 0 16px; }
  .motion .cue--line, .motion .cue--typed { left: 16px; right: 16px; bottom: 12svh; width: auto; }
  .motion .cue--door { bottom: 10svh; padding: 0 16px; }
  .motion .cue--note { left: 16px; right: 16px; top: auto; bottom: 14svh; margin-top: 0; }
  .note { max-width: 330px; margin: 0 auto; }
  .motion .cue--end { left: 16px; right: 16px; }
  .motion .hud { top: 64px; bottom: auto; left: 16px; right: auto; font-size: 0.64rem; gap: 10px; }
  .motion .cue--cover { bottom: 16svh; }
  .motion .film__poster img { object-position: 69% 50%; }
  .motion .film__sub { left: 4%; top: 30%; width: 30%; }
  .motion .film__scrim {
    background:
      linear-gradient(to top, rgba(3,4,6,.8), rgba(3,4,6,.35) 30%, transparent 48%),
      linear-gradient(to bottom, rgba(3,4,6,.55), transparent 18%);
  }

  .ev-intro { text-align: left; }
  .ev-intro__p { margin-left: 0; }
  .hint-fine { display: none !important; }
  .ev-intro__p .hint-touch { display: block; }
  .exhibit { grid-template-columns: 1fr; padding: 40px 0 56px; gap: 22px; }
  .exhibit__photo { grid-column: 1; grid-row: 1; }
  .exhibit__tag { grid-column: 1; grid-row: 2; text-align: left; justify-self: start; padding: 0 16px; max-width: 26rem; }
  .exhibit__photo img {
    -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 86%, transparent);
    mask-image: linear-gradient(transparent, #000 12%, #000 86%, transparent);
  }
  .pencil { font-size: 0.86rem; }

  .entry { grid-template-columns: 1fr; padding: 110px 16px 80px; row-gap: 48px; }
  .entry__head, .permits, .conditions { grid-column: 1; grid-row: auto; }
  .permits { grid-template-columns: 1fr; }
  .permit__v { margin-top: 30px; }
  .conditions__list li { grid-template-columns: 1.8em 1fr; }
  .conditions__list li > span:last-child { grid-column: 2; }
  .conditions__list li > span:first-child { grid-column: 2; padding-top: 0; }
  .conditions__list li::before { grid-row: 1 / span 2; }
  .btn { padding: 19px 26px 18px; }
  .foot { padding: 28px 16px 36px; }
}

@media (max-aspect-ratio: 1/1) {
  .motion .film__face { transform-origin: 58% 40%; }
}

@media (hover: none) {
  .hint-fine { display: none !important; }
  .ev-intro__p .hint-touch { display: block; }
}
.still-mode .ev-intro__p .hint-fine, .still-mode .ev-intro__p .hint-touch { display: none !important; }

/* still mode: dim the rooms a touch, no animation anywhere */
.still-mode .flicker, .still-mode .grain::before { animation: none; }
.still-mode .cue--end { text-align: center; }
.still-mode .cue--end { margin-top: 32px; }
.still-mode .exhibit__photo img { filter: brightness(.9); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}