:root {
  --ink: #0a0a0b;
  --ink-2: #111112;
  --bone: #ece8e1;
  --mute: rgba(236, 232, 225, 0.58);
  --dim: rgba(236, 232, 225, 0.34);
  --faint: rgba(236, 232, 225, 0.12);
  --glow: #ffd6a3;
  --glow-soft: rgba(255, 214, 163, 0.55);
  --sans: 'Inter Tight', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --fa: 'Vazirmatn', 'Inter Tight', sans-serif;
  --gutter: max(clamp(16px, 5.5vw, 96px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
html.sheet-open { overflow: hidden; }
body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior: none;
}
html[data-lang='fa'] body { font-family: var(--fa); }
body.locked { overflow: hidden; height: 100vh; }
/* nothing behind the gate is visible yet: keep it out of paint (and out of layout-shift accounting
   while the copy is being filled in) until the visitor enters */
body.locked #story, body.locked .hud, body.locked .rail, body.locked .topbar { visibility: hidden; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--glow); color: var(--ink); }

@media (pointer: fine) { body, button, a, .find-frame { cursor: none; } }

/* keyboard focus: visible, quiet, on-brand */
:focus { outline: none; }
:focus-visible { outline: 1px solid var(--glow); outline-offset: 3px; }
.sheet-card input:focus-visible, .sheet-card textarea:focus-visible, .sheet-card:focus-visible { outline: none; }

/* ---------- canvas + atmosphere ---------- */
/* sized to the large viewport so mobile toolbars sliding in and out never resize the 3D canvas */
#gl { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; display: block; z-index: 0; }
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.62) 100%);
}
.grain {
  position: fixed; inset: -10%; pointer-events: none; z-index: 2; opacity: 0.07; mix-blend-mode: overlay;
  animation: grain 0.9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- gate ---------- */
#gate {
  position: fixed; inset: 0; z-index: 100; background: var(--ink);
  display: grid; place-items: center; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
  transition: opacity 1.4s var(--ease-io), visibility 0s linear 1.4s;
}
#gate.out { opacity: 0; visibility: hidden; }
.gate-logo { position: absolute; top: clamp(28px, 6vh, 56px); left: 50%; width: 92px; height: auto; transform: translateX(-50%); opacity: 0.9; pointer-events: none; }
.gate-line {
  position: absolute; left: 0; top: 0; height: var(--lh, 40%); width: 2px; margin-left: -1px;
  transform: translate(var(--lx, 50vw), var(--ly, 30vh)); /* moved by transform: no layout shift */
}
.gate-line::before, .gate-line i {
  content: ''; position: absolute; inset: 0; transform-origin: 50% 100%;
}
.gate-line::before { background: var(--faint); transform: scaleY(var(--load, 0)); transition: transform 0.4s var(--ease); }
.gate-line i {
  background: linear-gradient(to top, #fff4e4, var(--glow));
  box-shadow: 0 0 14px 2px var(--glow-soft), 0 0 48px 6px rgba(255, 196, 130, 0.25);
  transform: scaleY(var(--p, 0));
}
.gate-cap {
  position: absolute; bottom: calc(clamp(36px, 9vh, 90px) + var(--safe-b)); left: 0; right: 0; text-align: center; padding: 0 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute);
  display: grid; gap: 10px; justify-items: center; align-content: end; min-height: 37px;
}
html[data-lang='fa'] .gate-cap { font-family: var(--fa); letter-spacing: 0; font-size: 13px; }
.gate-hold, .gate-keys { display: none; }
#gate.ready .gate-load { display: none; }
#gate.ready .gate-hold { display: block; color: var(--bone); animation: breathe 2.4s var(--ease-io) infinite; }
#gate.ready .gate-keys { display: block; color: var(--dim); font-size: 10px; }
@media (pointer: coarse) { #gate.ready .gate-keys { display: none; } }
@keyframes breathe { 50% { opacity: 0.45; } }

/* ---------- HUD ---------- */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: max(clamp(14px, 2.6vh, 28px), env(safe-area-inset-top, 0px)) var(--gutter) clamp(14px, 2.6vh, 28px);
  opacity: 0; transform: translateY(-8px); transition: opacity 1.2s var(--ease) 0.8s, transform 1.2s var(--ease) 0.8s;
  pointer-events: none; /* the bar itself is transparent: let taps reach the content scrolling under it */
}
.hud > * { pointer-events: auto; }
body.entered .hud { opacity: 1; transform: none; }
.hud-logo { display: inline-block; justify-self: start; padding: 11px 6px 11px 0; margin: -11px -6px -11px 0; }
.hud-logo img { height: 22px; width: auto; }
.hud-chapter {
  display: flex; gap: 12px; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute);
}
.hud-num { color: var(--glow); }
html[data-lang='fa'] .hud-name { font-family: var(--fa); letter-spacing: 0; font-size: 13px; }
.hud-tools { justify-self: end; display: flex; gap: 6px; }
.hud-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border: 1px solid var(--faint); border-radius: 99px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute);
  transition: border-color 0.4s, color 0.4s;
}
.hud-btn:hover { color: var(--bone); border-color: var(--dim); }
.hud-btn::after { content: ''; position: absolute; inset: -6px -3px; } /* 44px touch target, same look */
#langBtn { font-family: var(--fa); letter-spacing: 0; font-size: 13px; min-width: 44px; justify-content: center; }
html[data-lang='fa'] #langBtn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; }
html[data-lang='fa'] #soundBtn span:last-child { font-family: var(--fa); letter-spacing: 0; font-size: 12px; }
.bars { display: inline-flex; gap: 2px; align-items: end; height: 10px; }
.bars i { width: 1px; height: 10px; background: currentColor; transform: scaleY(0.3); transform-origin: 50% 100%; transition: transform 0.3s; }
#soundBtn[aria-pressed='true'] { color: var(--glow); border-color: rgba(255, 214, 163, 0.35); }
#soundBtn[aria-pressed='true'] .bars i { animation: bar 1.1s var(--ease-io) infinite alternate; }
#soundBtn[aria-pressed='true'] .bars i:nth-child(2) { animation-delay: -0.3s; }
#soundBtn[aria-pressed='true'] .bars i:nth-child(3) { animation-delay: -0.6s; }
#soundBtn[aria-pressed='true'] .bars i:nth-child(4) { animation-delay: -0.9s; }
@keyframes bar { to { transform: scaleY(1); } }

/* ---------- rail ---------- */
.rail {
  position: fixed; right: calc(var(--gutter) * 0.42); top: 50%; z-index: 30; height: 42vh; height: 42svh; transform: translateY(-50%);
  opacity: 0; transition: opacity 1.2s var(--ease) 1s;
}
body.entered .rail { opacity: 1; }
.rail-track { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--faint); }
.rail-fill {
  position: absolute; left: 0; top: 0; width: 1px; height: 100%; transform-origin: top; transform: scaleY(0);
  background: var(--glow); box-shadow: 0 0 8px var(--glow-soft);
}
.rail-ticks { list-style: none; position: absolute; inset: 0; }
.rail-ticks li { position: absolute; left: 0; transform: translate(-50%, -50%); }
.rail-ticks button {
  display: block; width: 22px; height: 22px; position: relative;
}
.rail-ticks button::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--ink); border: 1px solid var(--dim); transition: all 0.4s var(--ease);
}
.rail-ticks li.on button::before { background: var(--glow); border-color: var(--glow); box-shadow: 0 0 10px var(--glow-soft); }
.rail-ticks button span {
  position: absolute; right: 22px; top: 50%; transform: translate(6px, -50%); white-space: nowrap; opacity: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute);
  transition: opacity 0.3s, transform 0.4s var(--ease); pointer-events: none;
}
html[data-lang='fa'] .rail-ticks button span { font-family: var(--fa); letter-spacing: 0; font-size: 12px; }
.rail-ticks button:hover span { opacity: 1; transform: translate(0, -50%); }
.topbar { display: none; }

/* ---------- story layout ---------- */
#story { position: relative; z-index: 10; }
.ch { position: relative; height: var(--h, 200vh); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; pointer-events: none; }
.stage > * { pointer-events: auto; }
.ch.solid .stage { background: var(--ink); }
.ch.solid { background: var(--ink); }

.panel { position: absolute; max-width: min(34rem, 42vw); }
.panel::after {
  content: ''; position: absolute; inset: -22% -40% -22% -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 8, 9, 0.62), rgba(8, 8, 9, 0.28) 60%, transparent);
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.panel.on::after { opacity: 1; }
.find-copy.panel::after { display: none; }
.panel.l { left: var(--gutter); }
.panel.r { right: calc(var(--gutter) + 28px); }
.panel.t { top: clamp(96px, 17vh, 190px); }
.panel.b { bottom: clamp(40px, 11vh, 120px); }
.panel.m { top: 50%; transform: translateY(-50%); }
html[data-lang='fa'] .panel { direction: rtl; text-align: right; }

.kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute);
  display: flex; align-items: center; gap: 14px; margin-bottom: 26px;
}
.kicker::before { content: ''; width: 28px; height: 1px; background: var(--glow); box-shadow: 0 0 6px var(--glow-soft); }
html[data-lang='fa'] .kicker { font-family: var(--fa); letter-spacing: 0.02em; font-size: 13px; }

.title {
  font-weight: 300; font-size: clamp(2.1rem, 4.3vw, 4.4rem); line-height: 1.04; letter-spacing: -0.028em;
  text-wrap: balance;
}
html[data-lang='fa'] .title { font-weight: 300; letter-spacing: 0; line-height: 1.32; font-size: clamp(1.9rem, 3.7vw, 3.7rem); }
.title em, .hero-sub em { font-family: var(--serif); font-style: italic; font-weight: 400; color: #f6e2c6; letter-spacing: -0.01em; }
html[data-lang='fa'] .title em { font-family: var(--fa); font-style: normal; font-weight: 500; color: #f6e2c6; }

.body { margin-top: 26px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.65; color: var(--mute); max-width: 27rem; }
.body.big { font-size: clamp(18px, 1.6vw, 24px); color: var(--bone); font-weight: 300; }
html[data-lang='fa'] .body { line-height: 2; }
.hint {
  margin-top: 28px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim);
}
html[data-lang='fa'] .hint { font-family: var(--fa); letter-spacing: 0; font-size: 12px; }

/* reveal mechanics */
.ln { display: block; overflow: hidden; padding: 0.04em 0 0.12em; margin-bottom: -0.1em; }
.ln > span {
  display: inline-block; transform: translateY(108%); opacity: 0.001;
  transition: transform 1.25s var(--ease) calc(var(--i) * 90ms + 60ms), opacity 0.9s var(--ease) calc(var(--i) * 90ms + 60ms);
}
.fx { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease) 0.25s, transform 1.2s var(--ease) 0.25s; }
.panel.on .ln > span, .panel.on .fx { transform: none; opacity: 1; }
.panel .fx.kicker { transition-delay: 0s; }
.panel:not(.on) .ln > span, .panel:not(.on) .fx { transition-delay: 0s; transition-duration: 0.5s; }

/* ---------- hero ---------- */
.hero { position: absolute; left: 0; right: 0; bottom: clamp(36px, 8vh, 90px); text-align: center; padding: 0 var(--gutter); }
.hero-kicker { justify-content: center; margin: 14px 0 0; color: var(--dim); }
.hero-kicker::before { display: none; }
.wordmark {
  font-weight: 200; font-size: clamp(3rem, 13.5vw, 13rem); line-height: 0.9; letter-spacing: 0.14em;
  margin-right: -0.14em; white-space: nowrap; display: flex; justify-content: center;
}
.wordmark span { display: inline-block; opacity: 0; transform: translateY(30%); transition: opacity 1.6s var(--ease), transform 1.8s var(--ease), color 1.6s, text-shadow 1.6s; }
body.entered .wordmark span { opacity: 1; transform: none; }
.wordmark span.i { color: var(--bone); }
body.entered .wordmark span.i { color: #ffe9cc; text-shadow: 0 0 22px rgba(255, 200, 140, 0.55), 0 0 2px #fff; }
.hero-sub {
  margin-top: 18px; font-size: clamp(14px, 1.2vw, 18px); color: var(--mute); letter-spacing: 0.02em;
  opacity: 0; transition: opacity 1.6s var(--ease) 1.6s;
}
html[data-lang='fa'] .hero-sub { font-family: var(--fa); }
html[data-lang='fa'] .hero-kicker { font-family: var(--fa); letter-spacing: 0; font-size: 13px; }
body.entered .hero-sub { opacity: 1; }
.hero .kicker { opacity: 0; transition: opacity 1.6s var(--ease) 1.3s; }
body.entered .hero .kicker { opacity: 1; }
.scroll-cue {
  position: absolute; top: 50%; left: var(--gutter); transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim);
  writing-mode: vertical-rl; opacity: 0; transition: opacity 1.4s var(--ease) 2.2s;
}
html[data-lang='fa'] .scroll-cue { font-family: var(--fa); letter-spacing: 0; font-size: 12px; }
body.entered .scroll-cue { opacity: 1; }
.scroll-cue i { width: 1px; height: 64px; background: var(--faint); position: relative; overflow: hidden; }
.scroll-cue i::after {
  content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%;
  background: var(--glow); box-shadow: 0 0 6px var(--glow);
  animation: drip 2.2s var(--ease-io) infinite;
}
@keyframes drip { to { transform: translateY(350%); } }

/* ---------- specs + legend ---------- */
.specs { list-style: none; margin-top: 34px; display: grid; gap: 0; max-width: 24rem; }
.specs li { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 14px 0; border-top: 1px solid var(--faint); align-items: baseline; }
.specs li:last-child { border-bottom: 1px solid var(--faint); }
.specs b { font-weight: 400; font-size: 15px; }
.specs span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--mute); }
html[data-lang='fa'] .specs span { font-family: var(--fa); letter-spacing: 0; font-size: 13px; }
.legend { display: none; }

/* ---------- 3D labels ---------- */
/* below the story layer: copy panels sit above the 3D call-outs and the solid find chapter covers them */
#labels { position: fixed; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
.tag {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 12px;
  opacity: 0; transition: opacity 0.6s var(--ease); will-change: transform;
}
.tag.on { opacity: 1; }
.tag-dot {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255, 214, 163, 0.6); background: rgba(10, 10, 11, 0.55); backdrop-filter: blur(4px);
  font-family: var(--mono); font-size: 10px; color: var(--glow); margin-left: -11px;
  box-shadow: 0 0 14px rgba(255, 200, 140, 0.25);
}
.tag-txt { display: grid; gap: 3px; max-width: 220px; }
.tag-txt b { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone); }
.tag-txt span { font-size: 12.5px; line-height: 1.4; color: var(--mute); }
/* FA: same geometry as EN (dot on the anchor, call-out text in the empty space to its right), RTL text */
html[data-lang='fa'] .tag-txt { direction: rtl; text-align: right; }
html[data-lang='fa'] .tag-txt b { font-family: var(--fa); letter-spacing: 0; font-size: 12px; }

.dim {
  position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.6s; display: grid; gap: 2px; text-align: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute);
}
.dim.on { opacity: 1; }
.dim strong { font-family: var(--sans); font-weight: 200; font-size: clamp(28px, 3.4vw, 54px); letter-spacing: -0.03em; color: var(--bone); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dim strong small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--mute); margin-left: 6px; }
.dim em { font-style: normal; color: var(--glow); }
html[data-lang='fa'] .dim { font-family: var(--fa); letter-spacing: 0; font-size: 12px; }
html[data-lang='fa'] .dim strong small { font-family: var(--fa); letter-spacing: 0; }

/* ---------- material bar ---------- */
#matbar {
  position: fixed; left: 50%; bottom: calc(clamp(20px, 5vh, 48px) + var(--safe-b)); z-index: 35;
  display: flex; gap: 4px; padding: 6px; border-radius: 99px;
  background: rgba(14, 14, 15, 0.6); border: 1px solid var(--faint); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none; transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
}
#matbar.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
html[data-lang='fa'] #matbar { direction: rtl; }
.mat { flex: none;
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 6px; border-radius: 99px;
  font-size: 13px; color: var(--mute); transition: background 0.5s var(--ease), color 0.4s; white-space: nowrap;
}
html[data-lang='fa'] .mat { padding: 0 6px 0 16px; }
.mat img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.mat.on { background: rgba(236, 232, 225, 0.1); color: var(--bone); }
.mat:hover { color: var(--bone); }

/* ---------- find the door ---------- */
.find {
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(24px, 6vw, 110px); padding: clamp(80px, 12vh, 120px) calc(var(--gutter) + 40px) clamp(40px, 8vh, 80px) var(--gutter);
}
.find-copy.panel { position: relative; max-width: 30rem; }
.find-meta { margin-top: 30px; display: grid; gap: 8px; min-height: 52px; }
.find-round { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
html[data-lang='fa'] .find-round { font-family: var(--fa); letter-spacing: 0; font-size: 13px; }
.find-msg { font-size: 18px; color: var(--bone); min-height: 1.6em; transition: opacity 0.4s; }
.find-msg.good { color: #ffe4c2; }
.find-frame {
  position: relative; height: min(78vh, 900px); aspect-ratio: 1488 / 2104; overflow: hidden; border-radius: 2px;
  background: #1a1a1a; touch-action: manipulation;
}
.find-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.6s var(--ease-io), transform 6s var(--ease); }
.find-img.b { opacity: 0; }
.find-frame.swap .find-img.b { opacity: 1; }
.find-rect {
  position: absolute; pointer-events: none; border: 1.5px solid #ffe2bd;
  box-shadow: 0 0 10px rgba(255, 200, 140, 0.85), inset 0 0 10px rgba(255, 200, 140, 0.5);
  background: rgba(255, 220, 170, 0.05);
  clip-path: inset(100% 0 0 0); opacity: 0;
  transition: clip-path 1.6s var(--ease-io), opacity 0.4s;
}
.find-frame:focus-visible { outline-offset: 6px; }
.find-frame.solved .find-rect { clip-path: inset(0 0 0 0); opacity: 1; }
.find-frame.swap .find-rect { opacity: 0; transition-delay: 0.4s; }
.find-pings { position: absolute; inset: 0; pointer-events: none; }
.ping {
  position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  border: 1px solid rgba(236, 232, 225, 0.7); animation: ping 0.9s var(--ease) forwards;
}
@keyframes ping { from { transform: scale(0.2); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 18px; height: 52px; padding: 0 26px;
  border-radius: 99px; font-size: 14px; letter-spacing: 0.04em; overflow: hidden;
  transition: transform 0.5s var(--ease), background 0.4s, color 0.4s;
}
.btn.ghost { border: 1px solid var(--dim); margin-top: 18px; }
.btn.ghost:hover { border-color: var(--bone); }
.btn:active { transform: scale(0.98); }
.solid-btn { background: var(--bone); color: var(--ink); margin-top: 36px; font-weight: 400; }
.solid-btn:hover { background: #fff; }
.btn-line { width: 1px; height: 26px; background: currentColor; transform: scaleY(0.7); transition: transform 0.5s var(--ease); }
.solid-btn:hover .btn-line { transform: none; }

/* ---------- final ---------- */
.final .title { font-size: clamp(2rem, 3.8vw, 3.9rem); }
/* the final door is framed large and centred: keep the copy column clear of its left edge (~40vw) */
.final.panel { max-width: min(34rem, calc(37vw - var(--gutter))); }
.contact { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px; max-width: 30rem; }
.contact dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
html[data-lang='fa'] .contact dt { font-family: var(--fa); letter-spacing: 0; font-size: 12px; }
.contact dd { font-size: 15px; line-height: 1.5; }
.contact a { border-bottom: 1px solid var(--faint); transition: border-color 0.3s; }
.contact a:hover { border-color: var(--glow); }
html[data-lang='fa'] .contact a { display: inline-block; }
.foot {
  position: absolute; left: var(--gutter); right: calc(var(--gutter) + 28px); bottom: calc(22px + var(--safe-b));
  display: flex; align-items: center; gap: 22px; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim);
}
.foot img { height: 16px; width: auto; opacity: 0.7; }
html[data-lang='fa'] .foot span:first-of-type { font-family: var(--fa); letter-spacing: 0; font-size: 12px; }

/* ---------- quote sheet ---------- */
#sheet { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; visibility: hidden; transition: visibility 0s linear 0.9s; }
#sheet.open { pointer-events: auto; visibility: visible; transition-delay: 0s; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(5, 5, 6, 0.6); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.6s var(--ease); }
#sheet.open .sheet-scrim { opacity: 1; }
.sheet-card {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: #121213; border-left: 1px solid var(--faint);
  padding: max(clamp(28px, 6vh, 64px), env(safe-area-inset-top, 0px)) clamp(20px, 3vw, 44px) calc(clamp(28px, 6vh, 64px) + var(--safe-b));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start;
  transform: translateX(102%); transition: transform 0.9s var(--ease);
}
#sheet.open .sheet-card { transform: none; }
html[data-lang='fa'] .sheet-card { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--faint); transform: translateX(-102%); direction: rtl; }
html[data-lang='fa'] #sheet.open .sheet-card { transform: none; }
.sheet-card h3 { font-weight: 300; font-size: 30px; letter-spacing: -0.02em; margin: 10px 0 8px; padding-right: 44px; }
html[data-lang='fa'] .sheet-card h3 { padding-right: 0; padding-left: 44px; }
.sheet-card h3 em { font-family: var(--serif); font-style: italic; color: #f6e2c6; }
html[data-lang='fa'] .sheet-card h3 em { font-family: var(--fa); font-style: normal; }
.sheet-x { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; }
html[data-lang='fa'] .sheet-x { right: auto; left: 16px; }
.sheet-x i { position: absolute; left: 50%; top: 50%; width: 1px; height: 20px; background: var(--bone); }
.sheet-x i:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.sheet-x i:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.sheet-card label, .sheet-card legend { display: grid; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
html[data-lang='fa'] .sheet-card label, html[data-lang='fa'] .sheet-card legend { font-family: var(--fa); letter-spacing: 0; font-size: 12px; }
.sheet-card input, .sheet-card textarea {
  font: 300 16px var(--sans); color: var(--bone); background: transparent; border: 0; border-bottom: 1px solid var(--faint);
  width: 100%; min-width: 0; border-radius: 0; -webkit-appearance: none; appearance: none;
  padding: 8px 0 10px; outline: none; resize: none; transition: border-color 0.4s;
}
.sheet-card input::placeholder, .sheet-card textarea::placeholder { color: var(--dim); }
html[data-lang='fa'] .sheet-card textarea, html[data-lang='fa'] .sheet-card input[name='name'] { font-family: var(--fa); }
.sheet-card input:focus, .sheet-card textarea:focus { border-color: var(--glow); }
.sheet-card input.bad { border-color: #d88b74; }
.sheet-card .row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: end; }
.times { color: var(--dim); padding-bottom: 12px; }
.chips { border: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.chips legend { margin-bottom: 10px; width: 100%; }
.chip {
  height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--faint); font-size: 13px; color: var(--mute);
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.chip[aria-pressed='true'] { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.sheet-card .solid-btn { margin-top: 10px; justify-self: start; }
.sheet-thanks { display: none; font-size: 18px; color: #ffe4c2; line-height: 1.5; }
html[data-lang='fa'] .sheet-thanks { line-height: 1.9; }
.sheet-card.sent > :not(.sheet-thanks):not(h3):not(.sheet-x) { display: none; }
.sheet-card.sent .sheet-thanks { display: block; }

/* ---------- cursor ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; width: 1px; height: 0;
  mix-blend-mode: difference; will-change: transform;
}
.cursor::before {
  content: ''; position: absolute; left: 0; top: -22px; width: 1px; height: 44px; background: var(--bone);
  transform: scaleY(0.5455); transition: transform 0.4s var(--ease), background 0.4s;
}
.cursor.hover::before { transform: none; background: #fff; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ---------- no WebGL fallback ---------- */
.no-gl #gl, .no-gl #matbar, .no-gl #labels, .no-gl .hint { display: none; }
/* a fixed layer, not background-attachment: fixed (ignored by iOS Safari, which then stretched the
   photo over the whole 20-screen-tall document) */
.no-gl body::before {
  content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none;
  background: var(--ink) url('assets/infinity3.webp') center / cover no-repeat; opacity: 0.55;
}

/* below ~1200 px the seven call-outs crowd the exploded door: keep the numbered dots on the
   model and list the parts in the copy panel instead (as on phones) */
@media (max-width: 1199px) {
  .tag-txt { display: none; }
  .legend { display: grid; list-style: none; margin-top: 22px; gap: 6px; counter-reset: p; max-width: 26rem; }
  .legend li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 13px; color: var(--mute); counter-increment: p; }
  .legend li::before { content: counter(p); font-family: var(--mono); font-size: 10px; color: var(--glow); padding-top: 3px; }
  .legend li b { font-weight: 400; color: var(--bone); }
}

/* ---------- small screens (phones, and tablets held upright) ---------- */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  .rail { display: none; }
  .topbar { display: block; position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 41; }
  .topbar i { display: block; height: 100%; background: var(--glow); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 8px var(--glow); }
  .hud { grid-template-columns: auto 1fr; }
  .hud-chapter { display: none; }
  .panel, .panel.l, .panel.r { left: 16px; right: 16px; max-width: none; }
  .panel.t, .panel.m, .panel.b { top: auto; bottom: 0; transform: none; padding: 80px 0 calc(34px + var(--safe-b)); }
  .panel::before {
    content: ''; position: absolute; inset: 0 -16px; z-index: -1; pointer-events: none;
    background: linear-gradient(to top, rgba(10, 10, 11, 0.92) 30%, rgba(10, 10, 11, 0.6) 70%, transparent);
    opacity: 0; transition: opacity 1.2s var(--ease);
  }
  .panel.on::before { opacity: 1; }
  .title { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .body { margin-top: 16px; font-size: 15px; }
  .kicker { margin-bottom: 16px; }
  .specs { margin-top: 20px; }
  .legend { display: grid; list-style: none; margin-top: 18px; gap: 6px; counter-reset: p; }
  .legend li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 13px; color: var(--mute); counter-increment: p; }
  .legend li::before { content: counter(p); font-family: var(--mono); font-size: 10px; color: var(--glow); padding-top: 3px; }
  .legend li b { font-weight: 400; color: var(--bone); }
  .tag-txt { display: none; }
  .dim strong { font-size: 24px; }
  .hero { bottom: 70px; }
  .scroll-cue { left: 50%; top: auto; bottom: 18px; transform: translateX(-50%); writing-mode: horizontal-tb; flex-direction: row; }
  .scroll-cue i { width: 40px; height: 1px; }
  .scroll-cue i::after { display: none; }
  #matbar { left: 12px; right: 12px; transform: translateY(24px); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  #matbar::-webkit-scrollbar { display: none; }
  #matbar.on { transform: none; }
  .mat { padding: 0 12px 0 5px; flex: none; }
  .ch[data-ch='3'] .panel { padding-bottom: calc(clamp(20px, 5vh, 48px) + 78px + var(--safe-b)); } /* clears the finish bar */
  .hint { display: none; }
  .find { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 70px 16px 20px; gap: 14px; align-items: start; }
  .find-copy .body { display: none; }
  .find-copy .title { font-size: 1.8rem; }
  .find-copy .kicker { margin-bottom: 10px; }
  .find-copy::before { display: none; }
  .find-copy.panel { padding: 0; }
  .find-meta { margin-top: 10px; min-height: 0; grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; }
  .find-msg { font-size: 15px; }
  .find-next { position: absolute; right: 0; top: 0; margin: 0; height: 44px; padding: 0 18px; font-size: 13px; }
  html[data-lang='fa'] .find-next { right: auto; left: 0; }
  .find-frame { width: auto; height: min(calc(100svh - 210px), calc((100vw - 32px) * 1.414)); justify-self: center; }
  .contact { grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 20px; }
  .contact dd { font-size: 13px; }
  .solid-btn { margin-top: 22px; }
  .final.panel { padding-bottom: calc(60px + var(--safe-b)); }
  .foot { right: 16px; left: 16px; bottom: calc(14px + var(--safe-b)); }
  .sheet-scrim { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .foot span:first-of-type { display: none; }
}

/* tablets held upright: the phone layout, with tablet-sized gutters and type */
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait) {
  .panel, .panel.l, .panel.r { left: var(--gutter); right: var(--gutter); max-width: 38rem; }
  .panel::before { left: calc(-1 * var(--gutter)); right: auto; width: 100vw; }
  .title { font-size: clamp(2.6rem, 6vw, 3.6rem); }
  html[data-lang='fa'] .title { font-size: clamp(2.3rem, 5.4vw, 3.2rem); }
  .body { font-size: 16px; }
  .find { padding: 96px var(--gutter) 32px; gap: 22px; }
  .find-copy .title { font-size: 2.4rem; }
  .find-frame { height: min(calc(100svh - 250px), calc((100vw - 2 * var(--gutter)) * 1.414)); }
  .contact dd { font-size: 15px; }
  .foot { left: var(--gutter); right: var(--gutter); }
  #matbar { left: 0; right: 0; width: max-content; max-width: calc(100% - 24px); margin: 0 auto; }
}

/* phones held sideways (short landscape): copy beside the scene instead of over it */
@media (orientation: landscape) and (max-height: 500px) {
  .panel, .panel.l { left: var(--gutter); right: auto; max-width: min(46vw, 30rem); }
  .panel.r { left: auto; right: calc(var(--gutter) + 28px); max-width: min(34vw, 24rem); }
  .panel.t, .panel.m, .panel.b { top: 62px; bottom: auto; transform: none; padding: 0; }
  .panel.b { top: auto; bottom: calc(16px + var(--safe-b)); }
  .panel::before { display: none; }
  .kicker { margin-bottom: 10px; }
  .title, .final .title { font-size: clamp(1.45rem, 3.4vw, 2rem); line-height: 1.08; }
  html[data-lang='fa'] .title { font-size: clamp(1.35rem, 3.1vw, 1.8rem); line-height: 1.4; }
  .body, .body.big { margin-top: 10px; font-size: 13px; line-height: 1.55; }
  html[data-lang='fa'] .body { line-height: 1.8; }
  .hint { display: none; }
  .specs { margin-top: 12px; }
  .specs li { padding: 7px 0; }
  .final .body { display: none; }
  .ch[data-ch='5'] .panel { max-width: min(38vw, 24rem); }
  .final.panel { max-width: calc(37vw - var(--gutter)); }
  .tag-txt { display: none; }
  .legend { display: grid; list-style: none; margin-top: 10px; gap: 2px; counter-reset: p; }
  .legend li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 12px; color: var(--mute); counter-increment: p; }
  .legend li::before { content: counter(p); font-family: var(--mono); font-size: 10px; color: var(--glow); padding-top: 3px; }
  .legend li b { font-weight: 400; color: var(--bone); }
  .contact { margin-top: 14px; gap: 10px 22px; }
  .contact dd { font-size: 13px; }
  .solid-btn { margin-top: 14px; height: 44px; }
  .final.panel { padding-bottom: 0; }
  .foot { bottom: calc(10px + var(--safe-b)); }
  .foot img { display: none; }
  .hero { bottom: calc(24px + var(--safe-b)); }
  .wordmark { font-size: clamp(3rem, 11vw, 7rem); }
  .ch[data-ch='3'] .panel { padding-bottom: 0; }
  .find { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: none; align-items: center; gap: 24px; padding: 60px calc(var(--gutter) + 28px) 14px var(--gutter); }
  .find-copy .body { display: none; }
  .find-copy .title { font-size: 1.6rem; }
  .find-frame { height: calc(100svh - 76px); width: auto; justify-self: end; }
  .find-meta { grid-template-columns: 1fr; gap: 4px; margin-top: 10px; }
  .find-next, html[data-lang='fa'] .find-next { position: static; margin-top: 12px; height: 44px; }
  #matbar { bottom: calc(12px + var(--safe-b)); }
}

/* touch screens: 44px targets without changing the look */
@media (pointer: coarse) {
  .hud-btn { height: 36px; }
  .mat { height: 44px; }
  .chip { height: 40px; }
  .contact a { display: inline-block; padding: 12px 0; margin: -12px 0; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 4px; text-decoration-thickness: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .scroll-cue i::after { animation: none; }
  #gate.ready .gate-hold { animation: none; }
  .ln > span, .fx, .wordmark span, .hud { transform: none !important; }
  .ln > span, .fx { transition: opacity 0.6s linear !important; }
  .sheet-card { transition-duration: 0.01s; }
  .find-img, .find-rect { transition-duration: 0.3s; }
  #soundBtn[aria-pressed='true'] .bars i { animation: none; transform: scaleY(0.7); }
}