/* /story — the one page allowed to be loud. Same plate, same rules
   (no radius, no shadow, no gradient), turned up: full-bleed photographs,
   oversized type, CCTV furniture. Peach Red still marks only machine
   findings, the recording light, and the call to action. */

/* ── Hero: a control room, recording ─────────────────────────────── */
.hero {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: calc(100svh - var(--rail-height)); overflow: hidden;
  background: var(--black); color: var(--naples);
}
.hero-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; }
.hero-veil { position: absolute; inset: 0; background: rgba(16, 16, 16, 0.58); }
.hero-text { position: relative; padding: 0 var(--gutter) clamp(56px, 8vw, 120px); max-width: 1400px; }
.hero h1 { font-size: clamp(3.5rem, 11vw, 11rem); line-height: 0.86; letter-spacing: -0.035em; text-transform: uppercase; }
.hero h1 [lang="th"] { text-transform: none; font-size: 0.62em; line-height: 1.08; letter-spacing: 0; }
.hero h1 em { font-style: normal; color: var(--black); background: var(--naples); padding: 0 0.08em; }
.hero-lede { font-size: clamp(1.25rem, 1.2vw + 0.9rem, 2rem); font-weight: 600; max-width: 30ch; margin: 28px 0 0; }
.hero-cap { position: absolute; right: var(--gutter); bottom: 16px; margin: 0; color: var(--gray); text-align: right; max-width: 60ch; }
.rec {
  position: absolute; top: 20px; left: var(--gutter);
  font-family: var(--mono); font-size: var(--micro); letter-spacing: 0.1em; color: var(--white);
  background: var(--black); padding: 6px 10px;
}
.rec-dot { color: var(--signal); animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
@media (max-width: 600px) { .hero-cap { left: var(--gutter); text-align: left; } .hero-text { padding-bottom: 88px; } }

/* ── Chapters on this page talk bigger ───────────────────────────── */
.story .chapter h2, .exhibits h2 { font-size: clamp(2.5rem, 4vw + 1rem, 5.5rem); }
.story .chapter h2 [lang="th"] { font-size: 0.72em; }
.story .prose .big { font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem); font-weight: 600; line-height: 1.4; }
.story .prose .big[lang="th"] { line-height: 1.65; }
.story .prose strong { background: var(--text); color: var(--ground); padding: 0 0.2em; font-weight: 600; }
.field-quiet .prose strong { background: var(--olive); color: var(--naples); }

/* ── Exhibits: six rooms, labelled like feeds ────────────────────── */
.exhibits { padding: clamp(48px, 7vw, 112px) var(--gutter); }
.exhibits-head { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--gap); align-items: end; margin-bottom: var(--gap); }
.exhibits-head h2 { color: var(--naples); }
.exhibits-head p { max-width: 42ch; }
.exhibits-head .controls { background: transparent; margin-top: 8px; }
.exhibits-head .readout { padding: 12px 0 0; color: var(--naples); }
@media (max-width: 900px) { .exhibits-head { grid-template-columns: 1fr; } }

/* Masonry by columns: every photo keeps its own shape, so machine boxes line up. */
.shots { columns: 3 320px; column-gap: 2px; }
.shot { break-inside: avoid; margin: 0 0 2px; background: var(--black-1); }
.shot-frame { position: relative; }
.shot-frame img { width: 100%; height: auto; }
.shot-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.shot-tag { position: absolute; top: 0; left: 0; padding: 4px 8px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; background: var(--black); color: var(--white); }
.shot figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 12px 14px; color: var(--gray); }
.shot-count { color: var(--signal); }

/* ── The question, as loud as the page gets ─────────────────────── */
.question { background: var(--naples); color: var(--black); padding: clamp(64px, 10vw, 160px) var(--gutter); }
.question p {
  margin: 0; font-family: var(--narrow); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.75rem, 8.5vw, 9rem); line-height: 0.9; letter-spacing: -0.03em;
}
.question p[lang="th"] { font-family: var(--thai); text-transform: none; letter-spacing: 0; line-height: 1.2; font-size: clamp(2.25rem, 6vw, 6.5rem); }
.question em { font-style: normal; background: var(--black); color: var(--naples); padding: 0 0.1em; }

/* ── The live wall ──────────────────────────────────────────────── */
.wall { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 120px; }
@media (max-width: 760px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wall-tile .tile-meta { min-height: 0; }
.wall-controls { background: transparent; margin-bottom: 2px; }
.wall-note { color: var(--gray); max-width: 70ch; margin: 0; }
#try .readout { padding-left: 0; }

/* ── Makers ─────────────────────────────────────────────────────── */
.creators { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: start; }
.creator { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; }
.creator h3 { margin: 4px 0 8px; font-family: var(--narrow); font-size: clamp(1.75rem, 1.6vw + 1rem, 2.75rem); line-height: 1; }
.creator h3 [lang="th"] { font-family: var(--thai); font-size: 0.8em; line-height: 1.3; }
.creator .role { font-family: var(--mono); font-size: var(--micro); line-height: 1.45; }
.creator .role [lang="th"] { font-family: var(--thai); }
.creator p { font-size: var(--micro); max-width: 52ch; }
.portrait { width: 120px; height: 120px; object-fit: cover; filter: grayscale(1) contrast(1.1); }
@media (max-width: 480px) { .creator { grid-template-columns: 1fr; } }
/* On-screen display: where and when the photo was taken, from its own metadata. */
.shot-osd { position: absolute; right: 0; bottom: 0; padding: 4px 8px; font-size: 0.75rem; letter-spacing: 0.04em; background: var(--black); color: var(--naples); }