/* ==========================================================================
   PDA — "The Lamplit Dossier" design system
   Sections: 0 fonts · 1 tokens · 2 base · 3 type · 4 buttons · 5 eye-blink · 6 header/menu/notes
   7 home · 8 archive · 9 dossier · 10 next-file lamp · 11 bag/forms/order · 12 about/contact/misc
   13 footer · 14 motion · 15 responsive.   Docs: docs/CREATIVE-DIRECTION.md, docs/ANIMATION-SYSTEM.md
   ========================================================================== */

/* 0 ── Fonts (SIL OFL 1.1, see /assets/fonts/licenses) ------------------- */
@font-face { font-family: "Literata"; src: url("fonts/literata-72pt-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata-72pt-light-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata-72pt-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "El Messiri"; src: url("fonts/el-messiri-variable.woff") format("woff"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* 1 ── Tokens -------------------------------------------------------------- */
:root {
  --ink: #0f161e;
  --ink-deep: #090e13;
  --night: #141d26;
  --slate: #1b2631;
  --slate-2: #232f3b;
  --line: rgba(234, 226, 214, .12);
  --line-strong: rgba(234, 226, 214, .24);
  --paper: #eae2d6;
  --paper-dim: #c2baae;
  --ash: #8c9399;
  --manila: #cdb896;
  --manila-deep: #a8936f;
  --copper: #af7f5a;
  --copper-light: #c79a74;
  --brass: #d9b48c;
  --green: #8fa08a;
  --stamp: #a8513f;
  --accent: var(--copper);
  --whatsapp: #2f7d5b;

  --serif: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "El Messiri", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono: "IBM Plex Mono", "El Messiri", "SFMono-Regular", Consolas, monospace;
  --arabic: "El Messiri", "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif;

  --fs-display-1: clamp(2.5rem, 1.35rem + 5vw, 6.2rem);
  --fs-display-2: clamp(1.95rem, 1.2rem + 3vw, 4rem);
  --fs-display-3: clamp(1.45rem, 1.1rem + 1.4vw, 2.3rem);
  --fs-lead: clamp(1.06rem, .98rem + .45vw, 1.32rem);
  --fs-small: .875rem;
  --fs-label: .7rem;

  --wrap: 1240px;
  --gutter: max(clamp(1rem, .5rem + 2.6vw, 3rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --radius: 2px;
  --header-h: 84px;

  /* Motion tokens — shared by CSS and site.js (see docs/ANIMATION-SYSTEM.md) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-lid-close: cubic-bezier(.77, 0, .18, 1);
  --ease-lid-open: cubic-bezier(.77, 0, .18, 1);
  --t-quick: 180ms;
  --t-base: 360ms;
  --t-slow: 760ms;
  --t-cinematic: 1100ms;
  --blink-close: 320ms;
  --blink-open: 460ms;
  --enter-delay: 80ms;

  --z-grain: 60; --z-header: 40; --z-menu: 45; --z-note: 70; --z-blink: 100;
  color-scheme: dark;
}
html.blink-arrive { --enter-delay: 300ms; }
/* QA: ?motion=slow plays the eye-blink in slow motion so it can be inspected. */
html.motion-slow { --blink-close: 1500ms; --blink-open: 2000ms; }

/* 2 ── Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* The wheel-smoothing engine in site.js handles scrolling itself, so the browser must not animate on top of it. */
html.has-smooth-scroll { scroll-behavior: auto !important; }
body { margin: 0; min-height: 100vh; background: var(--ink); color: var(--paper); font: 400 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-x: clip; -webkit-tap-highlight-color: rgba(217, 180, 140, .18); }
[dir="rtl"] body { font-family: var(--arabic); font-size: 1.05rem; line-height: 1.75; }
img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
::selection { background: var(--copper); color: var(--ink-deep); }
main:focus { outline: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 200; top: 10px; inset-inline-start: 10px; padding: .6rem 1rem; background: var(--paper); color: var(--ink); transform: translateY(-160%); transition: transform var(--t-quick); }
.skip-link:focus { transform: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--space-4); position: relative; }
.muted { color: var(--ash); }
.break { word-break: break-word; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 3 ── Typography ---------------------------------------------------------- */
.display-1, .display-2, .display-3 { font-family: var(--serif); font-weight: 300; margin: 0; letter-spacing: -.02em; line-height: 1.02; text-wrap: balance; }
.display-1 { font-size: var(--fs-display-1); }
.display-2 { font-size: var(--fs-display-2); line-height: 1.06; }
.display-3 { font-size: var(--fs-display-3); line-height: 1.14; letter-spacing: -.01em; }
.display-1 em, .display-2 em, .display-3 em, .hero-title em, blockquote em { font-style: italic; color: var(--brass); }
[dir="rtl"] .display-1, [dir="rtl"] .display-2, [dir="rtl"] .display-3, [dir="rtl"] .hero-title { font-family: var(--arabic); font-weight: 600; letter-spacing: 0; line-height: 1.22; }
[dir="rtl"] .display-1 em, [dir="rtl"] .display-2 em, [dir="rtl"] .hero-title em { font-style: normal; }
.lead { font-size: var(--fs-lead); color: var(--paper-dim); max-width: 46ch; margin: 1.25rem 0 0; line-height: 1.6; }
.mono, .label, .kicker, .file-line { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; }
[dir="rtl"] .mono, [dir="rtl"] .label, [dir="rtl"] .kicker, [dir="rtl"] .file-line { letter-spacing: 0; text-transform: none; font-size: .82rem; }
.label { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; color: var(--copper-light); }
.label .index { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--paper); font-size: .7rem; letter-spacing: .05em; }
.kicker { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.4rem; color: var(--copper-light); }
.kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(143, 160, 138, .14); flex: none; }
.kicker-dot.is-live { animation: pulse 2.4s var(--ease-in-out) infinite; }
.file-line { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; color: var(--ash); margin: 0 0 1rem; }
.prose { max-width: 62ch; color: var(--paper-dim); }
.prose p { margin: 0 0 1.1em; }
.prose h2 { font: 300 var(--fs-display-3)/1.2 var(--serif); color: var(--paper); margin: 2.2em 0 .6em; }
[dir="rtl"] .prose h2 { font-family: var(--arabic); font-weight: 600; }
.prose--narrow { max-width: 68ch; }
.fine-print { color: var(--ash); font-size: .8rem; line-height: 1.6; margin: 1rem 0 0; }
.notice { border-inline-start: 2px solid var(--copper); background: rgba(175, 127, 90, .08); padding: .9rem 1.1rem; color: var(--paper-dim); font-size: .92rem; margin: 1.25rem 0; }
.status { display: inline-flex; align-items: center; gap: .45rem; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ash); }
.status--active::before { background: var(--green); box-shadow: 0 0 10px rgba(143, 160, 138, .6); }
.status--coming_soon::before { background: var(--brass); }
.status--sold_out::before, .status--archived::before { background: var(--stamp); }
.price-tag { font-family: var(--mono); font-size: .95rem; color: var(--paper); letter-spacing: .02em; white-space: nowrap; }
.chip { display: inline-flex; align-items: center; padding: .12rem .5rem; border: 1px solid var(--line-strong); font: .7rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-dim); }
[dir="rtl"] .chip { letter-spacing: 0; font-size: .78rem; }
.edition-chips { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.edition-tag { color: var(--brass); }

/* 4 ── Buttons & links ----------------------------------------------------- */
.btn { --btn-bg: transparent; --btn-fg: var(--paper); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .9rem; min-height: 52px; padding: .85rem 1.5rem; border: 1px solid var(--line-strong); background: var(--btn-bg); color: var(--btn-fg); font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; overflow: hidden; isolation: isolate; transition: color var(--t-base) var(--ease-out), border-color var(--t-base), background var(--t-base); }
[dir="rtl"] .btn { letter-spacing: 0; font-size: .95rem; font-family: var(--arabic); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brass); transform: scaleX(0); transform-origin: right; transition: transform var(--t-base) var(--ease-out); }
[dir="rtl"] .btn::before { transform-origin: left; }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
[dir="rtl"] .btn:hover::before, [dir="rtl"] .btn:focus-visible::before { transform-origin: right; }
.btn:hover, .btn:focus-visible { color: var(--ink-deep); border-color: var(--brass); }
.btn--primary { --btn-bg: var(--copper); --btn-fg: var(--ink-deep); border-color: var(--copper); }
.btn--ghost { border-color: var(--line-strong); }
.btn--line { border-width: 0 0 1px; padding-inline: 0; min-height: 44px; }
.btn--line::before { display: none; }
.btn--line:hover { color: var(--brass); }
.btn--small { min-height: 44px; padding: .6rem 1rem; }
.btn--wide { width: 100%; }
.btn--whatsapp { --btn-bg: var(--whatsapp); --btn-fg: #fff; border-color: var(--whatsapp); }
.btn--whatsapp::before { background: #3d9a70; }
.btn--whatsapp:hover { color: #fff; }
.btn-arrow { display: inline-block; transition: transform var(--t-base) var(--ease-out); }
[dir="rtl"] .btn-arrow { transform: scaleX(-1); }
.btn:hover .btn-arrow { transform: translateX(4px); }
[dir="rtl"] .btn:hover .btn-arrow { transform: scaleX(-1) translateX(4px); }
.btn[aria-busy="true"] { pointer-events: none; opacity: .75; }
.link-arrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--paper); font: 500 .8rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--line-strong); padding-bottom: .25rem; transition: color var(--t-quick), border-color var(--t-quick); }
[dir="rtl"] .link-arrow { letter-spacing: 0; text-transform: none; font-family: var(--arabic); font-size: .95rem; }
.link-arrow:hover { color: var(--brass); border-color: var(--brass); }
.text-btn { background: none; border: 0; padding: .4rem 0; color: var(--paper-dim); font: 500 .8rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
[dir="rtl"] .text-btn { font-family: var(--arabic); text-transform: none; letter-spacing: 0; font-size: .95rem; }
.text-btn:hover { color: var(--brass); }
.round-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(9, 14, 19, .5); display: inline-grid; place-items: center; transition: border-color var(--t-quick), background var(--t-quick); }
.round-btn:hover { border-color: var(--brass); background: rgba(217, 180, 140, .12); }
[dir="rtl"] .round-btn span { display: inline-block; transform: scaleX(-1); }

/* 5 ── Eye-blink page transition (see docs/ANIMATION-SYSTEM.md) ------------ */
/* Two solid panels slide in from the top and the bottom, meet in the middle, then part again. No fading. */
.blink { position: fixed; inset: 0; z-index: var(--z-blink); pointer-events: none; overflow: hidden; }
.blink-veil { position: absolute; inset: 0; background: var(--ink-deep); opacity: 0; }
/* Two flat panels that overlap by a few pixels, so no seam or line shows where they meet. */
.blink-lid { position: absolute; left: 0; right: 0; height: calc(50% + 3px); background: var(--ink-deep); will-change: transform; backface-visibility: hidden; }
.blink-lid--top { top: 0; transform: translateY(-100%); }
.blink-lid--bottom { bottom: 0; transform: translateY(100%); }
.blink-iris { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .7rem; opacity: 0; color: var(--copper-light); font: .7rem var(--mono); letter-spacing: .2em; text-transform: uppercase; transition: opacity var(--t-base); }
.blink-iris img { width: 40px; height: 40px; }
/* Closing (current page). */
html.blink-out .blink-lid { transform: translateY(0); transition: transform var(--blink-close) var(--ease-lid-close); }
html.blink-waiting .blink-iris { opacity: 1; animation: pulse 1.6s var(--ease-in-out) infinite; }
/* Re-opening without navigation (back/forward cache, cancelled navigation). */
html.blink-reopen .blink-lid { transition: transform var(--blink-open) var(--ease-lid-open); }
/* Arriving page: painted closed (class set by the inline head script), then the panels part by themselves. */
html.blink-arrive .blink-lid--top { animation: lid-top-open var(--blink-open) var(--ease-lid-open) 60ms both; }
html.blink-arrive .blink-lid--bottom { animation: lid-bottom-open var(--blink-open) var(--ease-lid-open) 60ms both; }
@keyframes lid-top-open { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes lid-bottom-open { from { transform: translateY(0); } to { transform: translateY(100%); } }

/* Grain: one static layer, no animation loop */
.grain { position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* 6 ── Header, menu, notes ------------------------------------------------- */
.announcement { position: relative; z-index: calc(var(--z-header) + 1); padding: .55rem var(--gutter); background: var(--copper); color: var(--ink-deep); text-align: center; font-size: .86rem; }
.announcement .mono { margin-inline-end: .6rem; font-size: .7rem; }
.site-header { position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h); border-bottom: 1px solid transparent; transition: border-color var(--t-base), transform var(--t-base) var(--ease-out); }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 14, 19, .9), rgba(9, 14, 19, .55)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background var(--t-base); }
.site-header.is-scrolled { border-color: var(--line); }
.site-header.is-scrolled::before, html.menu-open .site-header::before { background: rgba(10, 15, 20, .97); }
html.menu-open .site-header { transform: none; }
.site-header.is-hidden { transform: translateY(-100%); }
.header-bar { height: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; }
.brand-emblem { display: block; height: 68px; width: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); transition: transform var(--t-slow) var(--ease-out); }
.brand:hover .brand-emblem { transform: scale(1.04); }
.primary-nav { display: flex; justify-content: center; gap: clamp(1rem, 2.5vw, 2.6rem); }
.primary-nav a { position: relative; display: inline-flex; gap: .45rem; align-items: baseline; padding: .5rem 0; color: var(--paper-dim); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; transition: color var(--t-quick); }
[dir="rtl"] .primary-nav a { letter-spacing: 0; font-size: 1rem; }
.primary-nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: right; transition: transform var(--t-base) var(--ease-out); }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--paper); }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-index { font: .7rem var(--mono); color: var(--copper); }
.header-tools { display: flex; align-items: center; gap: 1.1rem; }
.lang-switch { font-family: var(--arabic); font-size: .95rem; color: var(--copper-light); padding: .4rem .2rem; }
.lang-switch:lang(en) { font-family: var(--sans); font-size: .8rem; letter-spacing: .08em; }
.lang-switch:hover { color: var(--brass); }
.tool-link { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim); }
[dir="rtl"] .tool-link { letter-spacing: 0; text-transform: none; font-size: .95rem; }
.bag-link { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .7rem; border: 1px solid var(--line-strong); color: var(--paper); transition: border-color var(--t-quick), background var(--t-quick); }
.bag-link:hover { border-color: var(--brass); }
.bag-label { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
[dir="rtl"] .bag-label { letter-spacing: 0; font-size: .9rem; }
.bag-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding-inline: 5px; border-radius: 11px; background: var(--copper); color: var(--ink-deep); font: 600 .72rem/1 var(--mono); }
.bag-link.is-bumped .bag-count { animation: bump 620ms var(--ease-out); }
.menu-button { display: none; width: 46px; height: 46px; border: 1px solid var(--line-strong); background: transparent; place-items: center; }
.menu-lines { display: grid; gap: 6px; width: 20px; }
.menu-lines span { height: 1.5px; background: var(--paper); transition: transform var(--t-base) var(--ease-out); }
.menu-button[aria-expanded="true"] .menu-lines span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-lines span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.menu-panel { position: fixed; inset: var(--menu-top, var(--header-h)) 0 0; z-index: var(--z-menu); background: var(--ink-deep); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: env(safe-area-inset-bottom, 0px); clip-path: inset(0 0 100% 0); transition: clip-path var(--t-slow) var(--ease-out); }
.menu-panel.is-open { clip-path: inset(0 0 0 0); }
.menu-inner { padding-block: 2rem 3rem; display: grid; gap: 2rem; }
.menu-label { color: var(--copper-light); margin: 0; }
.menu-links { display: grid; }
.menu-links a { display: flex; gap: 1rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--line); font: 300 clamp(1.9rem, 8vw, 3rem)/1.15 var(--serif); opacity: 0; transform: translateY(14px); transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), color var(--t-quick); }
[dir="rtl"] .menu-links a { font-family: var(--arabic); font-weight: 600; }
.menu-panel.is-open .menu-links a { opacity: 1; transform: none; }
.menu-panel.is-open .menu-links a:nth-child(2) { transition-delay: 40ms; } .menu-panel.is-open .menu-links a:nth-child(3) { transition-delay: 80ms; }
.menu-panel.is-open .menu-links a:nth-child(4) { transition-delay: 120ms; } .menu-panel.is-open .menu-links a:nth-child(5) { transition-delay: 160ms; } .menu-panel.is-open .menu-links a:nth-child(6) { transition-delay: 200ms; }
.menu-links a[aria-current="page"], .menu-links a:hover { color: var(--brass); }
.menu-foot { display: flex; gap: 1.5rem; flex-wrap: wrap; color: var(--paper-dim); }
html.menu-open, body.menu-open { overflow: hidden; }

.note { position: fixed; z-index: var(--z-note); top: calc(var(--header-h) + 14px); inset-inline-end: var(--gutter); display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: start; max-width: min(440px, calc(100vw - 2 * var(--gutter))); padding: 1rem 1rem 1rem 1.1rem; background: var(--paper); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); transform-origin: top; animation: note-in var(--t-slow) var(--ease-out) var(--enter-delay) both; }
.note p { margin: 0; font-size: .92rem; line-height: 1.5; }
.note-stamp { padding: .2rem .45rem; border: 1px solid currentColor; color: var(--whatsapp); transform: rotate(-4deg); font-size: .7rem; }
.note--error .note-stamp { color: var(--stamp); }
.note-close { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; margin: -.5rem; border: 0; background: none; font-size: 1.4rem; line-height: 1; padding: 0; color: var(--ink); }
.note.is-leaving { animation: note-out var(--t-base) var(--ease-in-out) forwards; }
.note a { text-decoration: underline; }

/* 7 ── Home ---------------------------------------------------------------- */
.hero { position: relative; min-height: max(640px, calc(100vh - var(--header-h))); min-height: max(640px, calc(100svh - var(--header-h))); display: grid; align-content: end; padding-block: 7rem 2.5rem; margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--header-h) + 6rem); overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; } /* the parallax photo never slides past the shade */
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 40%; filter: brightness(1.32) contrast(1.05); }
/* A picture or video chosen in Admin → Pages → Home: centred, with its own brightness; the lamp glow can be off. */
.hero--custom .hero-photo { object-position: 50% 50%; filter: brightness(var(--hero-brightness, 1)); }
.hero--no-lamp .lamp-glow { display: none; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 14, 19, .94) 0%, rgba(9, 14, 19, .72) 30%, rgba(9, 14, 19, .2) 50%, rgba(9, 14, 19, 0) 64%), linear-gradient(0deg, var(--ink) 0%, rgba(15, 22, 30, .78) 16%, rgba(15, 22, 30, 0) 40%, rgba(15, 22, 30, 0) 80%, rgba(9, 14, 19, .55) 100%); }
[dir="rtl"] .hero-shade { background: linear-gradient(270deg, rgba(9, 14, 19, .94) 0%, rgba(9, 14, 19, .72) 30%, rgba(9, 14, 19, .2) 50%, rgba(9, 14, 19, 0) 64%), linear-gradient(0deg, var(--ink) 0%, rgba(15, 22, 30, .78) 16%, rgba(15, 22, 30, 0) 40%, rgba(15, 22, 30, 0) 80%, rgba(9, 14, 19, .55) 100%); }
/* The lamp "powers on": a dark layer flickers away once, then the warm glow settles. */
.hero-media::after { content: ""; position: absolute; inset: 0; background: var(--ink-deep); opacity: 0; animation: lamp-on 1.6s steps(1, end) var(--enter-delay) both; pointer-events: none; }
.lamp-glow { position: absolute; left: var(--lamp-x, 74%); top: var(--lamp-y, 36%); width: 46vmax; height: 46vmax; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 160, .32), rgba(255, 200, 140, .1) 42%, transparent 72%); mix-blend-mode: screen; animation: glow-on 1.6s var(--ease-out) calc(var(--enter-delay) + 500ms) both; }
.lamp-pool { position: absolute; left: 0; top: 0; width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 216, 168, .13), rgba(255, 216, 168, .05) 48%, transparent 72%); opacity: 0; transition: opacity var(--t-slow); will-change: transform; pointer-events: none; }
[data-lamp].is-lit .lamp-pool, [data-lamp].is-lit > .drawer-light { opacity: 1; }
.hero-content { position: relative; max-width: 980px; margin-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); width: auto; }
.hero-title { font: 300 var(--fs-display-1)/.98 var(--serif); letter-spacing: -.03em; margin: 0; max-width: 13ch; }
[dir="rtl"] .hero-title { max-width: 14ch; }
.hero-title .redact { display: block; }
.hero-copy { max-width: 44ch; font-size: var(--fs-lead); color: var(--paper-dim); margin: 1.6rem 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }
.desk-tabs { margin-top: 3.5rem; }
.desk-label { color: var(--ash); margin: 0 0 .8rem; }
.desk-tabs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--line-strong); }
.desk-tabs li { position: relative; }
.desk-tabs li + li { border-inline-start: 1px solid var(--line); }
.desk-tabs a { display: grid; gap: .25rem; padding: 1.1rem 1.2rem 1rem; transition: background var(--t-base); }
.desk-tabs a::before { content: ""; position: absolute; inset-inline: 0; top: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base) var(--ease-out); }
.desk-tabs a:hover { background: rgba(234, 226, 214, .04); }
.desk-tabs a:hover::before { transform: scaleX(1); }
.desk-tabs strong { font: 300 1.35rem/1.2 var(--serif); }
[dir="rtl"] .desk-tabs strong { font-family: var(--arabic); font-weight: 600; }
.desk-tabs .mono { color: var(--copper-light); }
.desk-meta { color: var(--ash); font-size: .82rem; }
.hero-coords { position: absolute; inset-inline-end: var(--gutter); top: 50%; writing-mode: vertical-rl; color: var(--ash); opacity: .7; margin: 0; }

.intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-5); align-items: end; }
.intro-head .display-2 { max-width: 16ch; }
.intro-copy { max-width: 48ch; }
.custody { list-style: none; padding: 0; margin: var(--space-5) auto 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: custody; border-top: 1px solid var(--line-strong); }
.custody li { position: relative; padding: 1.6rem 1.6rem 0 0; }
[dir="rtl"] .custody li { padding: 1.6rem 0 0 1.6rem; }
.custody li::before { content: ""; position: absolute; top: -5px; inset-inline-start: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); border: 1px solid var(--copper); }
.custody-no { color: var(--copper-light); }
.custody h3 { font: 300 1.6rem/1.2 var(--serif); margin: .8rem 0 .5rem; }
[dir="rtl"] .custody h3 { font-family: var(--arabic); font-weight: 600; }
.custody p { color: var(--ash); margin: 0; font-size: .95rem; max-width: 30ch; }

.section-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem 2rem; margin-bottom: var(--space-5); }
.section-head .label { grid-column: 1 / -1; }
.section-note { grid-column: 1 / -1; color: var(--ash); font-size: .9rem; margin: 0; max-width: 60ch; }
.dossiers { display: grid; gap: var(--space-5); max-width: 1080px; }
.dossier-spread { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(1.6rem, 4.5vw, 4.5rem); align-items: center; }
.dossier-spread .poster { width: 100%; max-width: 380px; justify-self: center; }
.dossier-spread.is-flipped { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.dossier-spread.is-flipped .poster { order: 2; }
.poster { position: relative; display: block; perspective: 1200px; }
.poster picture { position: relative; transform-style: preserve-3d; transition: transform var(--t-slow) var(--ease-out); box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05); }
.poster::before { content: ""; position: absolute; inset: 8% -6% -6% 8%; inset-inline-end: -6%; inset-inline-start: 8%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent 75%); filter: blur(30px); opacity: .55; z-index: -1; }
.poster img { width: 100%; }
.poster-tag { position: absolute; top: 1rem; inset-inline-start: -.9rem; padding: .35rem .6rem; background: var(--ink-deep); color: var(--manila); border: 1px solid var(--line-strong); }
.dossier-text .display-3 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.9rem); }
.dossier-sub { font: italic 300 1.25rem/1.4 var(--serif); color: var(--brass); margin: .6rem 0 0; }
[dir="rtl"] .dossier-sub { font-family: var(--arabic); font-style: normal; font-weight: 500; }
.dossier-summary { color: var(--paper-dim); max-width: 46ch; margin: 1.2rem 0 0; }
.dossier-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.2rem 0; }
.redacted-block { display: grid; gap: .55rem; margin: 1.4rem 0 0; max-width: 40ch; }
.redacted-block span { height: .95rem; background: #05080b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
.redacted-block span:nth-child(2) { width: 82%; } .redacted-block span:nth-child(3) { width: 64%; } .redacted-block span:nth-child(4) { width: 74%; }

.filmstrip { position: relative; }
.filmstrip-track { list-style: none; margin: 0; padding: 1.4rem max(var(--gutter), calc((100% - var(--wrap)) / 2)); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 23vw, 300px); gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: #07090c; border-block: 1px solid var(--line); background-image: radial-gradient(circle, rgba(234, 226, 214, .22) 2.2px, transparent 3px), radial-gradient(circle, rgba(234, 226, 214, .22) 2.2px, transparent 3px); background-size: 26px 26px; background-position: 0 6px, 0 calc(100% - 6px); background-repeat: repeat-x; }
.filmstrip-track::-webkit-scrollbar { display: none; }
.filmstrip-track { cursor: grab; }
.filmstrip-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.filmstrip-track.is-animating, .filmstrip-track.is-controlled { scroll-snap-type: none; }
.frame { scroll-snap-align: center; transform: scale(calc(.9 + .1 * var(--focus, 1))); opacity: calc(.45 + .55 * var(--focus, 1)); transform-origin: 50% 60%; }
.frame img { -webkit-user-drag: none; }
.frame figure { margin: 0; }
.frame picture { overflow: hidden; background: var(--slate); }
.frame img { width: 100%; aspect-ratio: 480 / 715; object-fit: cover; transition: transform var(--t-cinematic) var(--ease-out), filter var(--t-slow); filter: saturate(.85) brightness(.9); }
.frame:hover img { transform: scale(1.05); filter: none; }
.frame figcaption { display: flex; gap: .6rem; padding-top: .7rem; color: var(--paper-dim); font-size: .9rem; }
.frame figcaption .mono { color: var(--copper-light); }
.frame-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--slate); color: inherit; font: inherit; text-align: inherit; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.frame--video .frame-open, .frame--link .frame-open { cursor: pointer; }
.frame-open:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.frame-still, .frame-blank { display: block; width: 100%; aspect-ratio: 480 / 715; object-fit: cover; background: var(--slate); }
.frame-blank { display: grid; place-items: center; background: radial-gradient(80% 60% at 50% 40%, #1d2833, #0e151c); color: var(--copper); letter-spacing: .4em; }
.frame-play { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(217, 180, 140, .65); background: rgba(9, 14, 19, .62); color: var(--paper); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: transform var(--t-base) var(--ease-out), background var(--t-base); }
.frame-play svg { width: 22px; height: 22px; margin-left: 3px; }
.frame-open:hover .frame-play, .frame-open:focus-visible .frame-play { transform: scale(1.08); background: rgba(175, 127, 90, .85); }
.viewer { width: min(1200px, 100vw - 2 * var(--gutter)); max-width: none; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); padding: 0; border: 0; background: transparent; color: var(--paper); overflow: visible; }
.viewer::backdrop { background: rgba(5, 8, 11, .92); }
.viewer[open] { animation: viewer-in .3s ease-out both; }
.viewer[open] .viewer-stage { animation: viewer-zoom .45s var(--ease-out) both; }
@keyframes viewer-in { from { opacity: 0; } }
@keyframes viewer-zoom { from { opacity: 0; transform: scale(.96); } }
.viewer-stage { display: grid; place-items: center; }
.viewer-media { display: block; max-width: 100%; max-height: calc(100vh - 8rem); max-height: calc(100dvh - 8rem); border-radius: 6px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .65); }
.viewer-media--link { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.viewer-close { position: fixed; z-index: 2; top: max(14px, env(safe-area-inset-top)); inset-inline-end: max(14px, env(safe-area-inset-right)); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(9, 14, 19, .75); color: var(--paper); font-size: 1.7rem; line-height: 1; }
.viewer-close:hover { border-color: var(--brass); }
.viewer-caption { margin: .9rem 0 0; text-align: center; color: var(--paper-dim); }
html.viewer-open { overflow: hidden; }
.filmstrip-controls { display: flex; gap: .7rem; justify-content: flex-end; margin-top: 1.2rem; }
.round-btn:disabled { opacity: .3; cursor: default; border-color: var(--line); background: none; }

.statement-inner { position: relative; max-width: 980px; text-align: center; }
.statement-mark { position: absolute; inset-inline-start: 50%; top: -3.5rem; translate: -50% 0; font: 300 9rem/1 var(--serif); color: var(--copper); opacity: .25; }
.statement blockquote { margin: 0; }
.statement blockquote p { font: italic 300 clamp(1.6rem, 1rem + 2.6vw, 3.1rem)/1.3 var(--serif); margin: 0; text-wrap: balance; }
[dir="rtl"] .statement blockquote p { font-family: var(--arabic); font-style: normal; font-weight: 500; line-height: 1.5; }
.signature { color: var(--copper-light); margin-top: 2rem; }
.final-call { position: relative; padding-block: var(--space-6); border-top: 1px solid var(--line); background: radial-gradient(70% 90% at 50% 120%, rgba(175, 127, 90, .18), transparent 70%); overflow: hidden; }
.final-inner .display-1 { max-width: 16ch; }
.final-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; }

/* 8 ── Archive ------------------------------------------------------------- */
.page-head { position: relative; padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); border-bottom: 1px solid var(--line); background: radial-gradient(60% 120% at 85% 0%, rgba(175, 127, 90, .1), transparent 60%); }
.page-head--tall { padding-block: clamp(4rem, 2rem + 8vw, 9rem) var(--space-5); }
.page-head form { margin-top: 1rem; }
.archive-hero { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) 2.5rem; }
.archive-title { max-width: 12ch; }
.archive-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.filter-group { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.filter { padding: .5rem .9rem; border: 1px solid var(--line); color: var(--paper-dim); font-size: .8rem; letter-spacing: .06em; transition: border-color var(--t-quick), background var(--t-quick), color var(--t-quick); }
[dir="rtl"] .filter { letter-spacing: 0; font-size: .95rem; }
.filter:hover { border-color: var(--line-strong); color: var(--paper); }
.filter[aria-pressed="true"] { border-color: var(--copper); background: rgba(175, 127, 90, .14); color: var(--paper); }
.archive-count { margin: 0 0 0 auto; color: var(--ash); }
[dir="rtl"] .archive-count { margin: 0 auto 0 0; }
.drawer { --room: var(--copper); position: relative; padding-block: var(--space-4) var(--space-6); isolation: isolate; overflow: hidden; }
.drawer::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--room) 22%, transparent), transparent 70%); transition: background var(--t-cinematic) var(--ease-out); }
.drawer-light { position: absolute; left: 0; top: 0; z-index: -1; width: 70vmax; height: 70vmax; margin: -35vmax 0 0 -35vmax; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--room) 24%, rgba(255, 216, 168, .1)), transparent 70%); opacity: 0; transition: opacity var(--t-slow); will-change: transform; pointer-events: none; }
.drawer-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(1.5rem, 3vw, 2.6rem); }
.drawer-empty { color: var(--ash); padding: 3rem 0; }
.folder { position: relative; animation: folder-in var(--t-slow) var(--ease-out) calc(var(--enter-delay) + var(--i, 0) * 90ms) both; }
.folder-link { position: relative; display: grid; padding-top: 1.7rem; }
.folder-tab { position: absolute; top: 0; inset-inline-start: 0; z-index: 2; padding: .45rem .9rem .9rem; background: var(--manila); color: #3a2f22; clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%); }
[dir="rtl"] .folder-tab { clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); }
.folder-pocket { position: relative; display: block; aspect-ratio: 4 / 3.6; overflow: hidden; background: linear-gradient(180deg, var(--slate-2), var(--night)); border: 1px solid var(--line); border-bottom: 0; }
.folder-pocket::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; z-index: 1; background: linear-gradient(180deg, #2a2219, #1d1812); border-top: 1px solid rgba(205, 184, 150, .35); box-shadow: 0 -18px 30px rgba(0, 0, 0, .45); }
.folder-poster { position: absolute; inset-inline: 14%; top: 10%; display: block; transform: translateY(0) rotate(-1.5deg); transition: transform var(--t-slow) var(--ease-out); box-shadow: 0 24px 48px rgba(0, 0, 0, .6); }
.folder:nth-child(even) .folder-poster { transform: rotate(1.4deg); }
.folder-poster img { width: 100%; }
.folder-body { display: grid; gap: .45rem; padding: 1.2rem 1.2rem 1.3rem; background: var(--night); border: 1px solid var(--line); border-top-color: rgba(205, 184, 150, .35); transition: background var(--t-base); }
.folder-status { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); }
[dir="rtl"] .folder-status { font-family: var(--arabic); letter-spacing: 0; text-transform: none; font-size: .85rem; }
.folder-title { font: 300 1.75rem/1.12 var(--serif); }
[dir="rtl"] .folder-title { font-family: var(--arabic); font-weight: 600; }
.folder-sub { color: var(--paper-dim); font-size: .93rem; }
.folder-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .6rem; }
.folder-open { margin-inline-start: auto; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--copper-light); }
[dir="rtl"] .folder-open { letter-spacing: 0; text-transform: none; font-size: .92rem; }
.folder-link:hover .folder-poster, .folder-link:focus-visible .folder-poster, .folder.is-focused .folder-poster { transform: translateY(-14%) rotate(0deg); }
.folder-link:hover .folder-body, .folder-link:focus-visible .folder-body { background: var(--slate); }
.folder-link:hover .folder-open { color: var(--brass); }
.folder.is-classified .folder-poster { filter: grayscale(.4) brightness(.8); }
.stamp { display: inline-block; padding: .35rem .7rem; border: 2px solid var(--stamp); color: var(--stamp); font-size: .78rem; letter-spacing: .26em; transform: rotate(-8deg); }
.folder-pocket .stamp { position: absolute; z-index: 2; inset-inline-end: 8%; bottom: 14%; background: rgba(9, 14, 19, .6); }

/* 9 ── Dossier (case detail) ---------------------------------------------- */
.dossier { position: relative; padding-block: 2rem var(--space-5); isolation: isolate; overflow: hidden; }
.dossier::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(55% 70% at 25% 30%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%), radial-gradient(40% 50% at 90% 10%, rgba(175, 127, 90, .08), transparent 70%); }
.dossier-backdrop { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; pointer-events: none; overflow: hidden; }
.dossier-backdrop p { margin: 0; width: 92vw; max-width: 1500px; display: flex; flex-wrap: wrap; justify-content: center; font: 400 clamp(4rem, 11vw, 10rem)/.95 var(--mono); color: var(--accent); opacity: .07; text-align: center; }
[dir="rtl"] .dossier-backdrop p { font-family: var(--arabic); font-weight: 700; }
.dossier-backdrop span { display: inline-block; transition: transform 1.4s var(--ease-out), opacity 1.4s; }
.dossier-backdrop .gap { width: .4em; }
.dossier-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.back-link { display: inline-flex; gap: .5rem; align-items: center; color: var(--paper-dim); font-size: .85rem; transition: color var(--t-quick); }
.back-link:hover { color: var(--brass); }
[dir="rtl"] .back-link span { transform: scaleX(-1); }
.file-path { color: var(--ash); margin: 0; }
.preview-banner { padding: .8rem 1rem; border: 1px dashed var(--brass); color: var(--brass); margin-bottom: 2rem; }
.dossier-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
.evidence { position: sticky; top: calc(var(--header-h) + 1.5rem); min-width: 0; }
.evidence-frame { position: relative; padding: clamp(.9rem, 2vw, 1.6rem); background: linear-gradient(180deg, rgba(27, 38, 49, .7), rgba(20, 29, 38, .7)); border: 1px solid var(--line); cursor: zoom-in; }
.corner { position: absolute; width: 22px; height: 22px; border-color: var(--copper); border-style: solid; border-width: 0; z-index: 2; }
.corner--tl { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; } .corner--tr { top: 8px; right: 8px; border-top-width: 1px; border-right-width: 1px; }
.corner--bl { bottom: 8px; left: 8px; border-bottom-width: 1px; border-left-width: 1px; } .corner--br { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; }
.exhibit { margin: 0; }
.exhibit img { width: 100%; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85); }
.js-ready .exhibit { display: none; }
.js-ready .exhibit.is-current { display: block; animation: exhibit-in var(--t-slow) var(--ease-out) both; }
.lens { position: absolute; z-index: 3; width: 190px; height: 190px; left: 0; top: 0; margin: -95px 0 0 -95px; border-radius: 50%; pointer-events: none; opacity: 0; background-color: var(--ink); background-repeat: no-repeat; box-shadow: 0 0 0 1px rgba(217, 180, 140, .7), 0 0 0 7px rgba(9, 14, 19, .35), inset 0 0 22px rgba(0, 0, 0, .45), 0 20px 50px rgba(0, 0, 0, .6); transition: opacity var(--t-quick); will-change: transform; }
.lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .28), transparent 38%); }
.evidence-frame.is-inspecting .lens { opacity: 1; }
.evidence-frame.is-inspecting { cursor: none; }
.inspect-btn { position: absolute; z-index: 4; inset-inline-end: 1.2rem; bottom: 1.2rem; display: inline-flex; gap: .5rem; align-items: center; padding: .5rem .8rem; border: 1px solid var(--line-strong); background: rgba(9, 14, 19, .78); color: var(--paper); backdrop-filter: blur(6px); }
.inspect-btn:hover { border-color: var(--brass); color: var(--brass); }
.frame-caption { position: absolute; z-index: 4; inset-inline-start: 1.2rem; bottom: 1.35rem; color: var(--manila); background: rgba(9, 14, 19, .7); padding: .3rem .5rem; }
.evidence-thumbs { display: flex; gap: .6rem; margin-top: .9rem; overflow-x: auto; padding-bottom: .3rem; }
.thumb { position: relative; flex: none; width: 74px; padding: 0; border: 1px solid var(--line); background: var(--night); opacity: .6; transition: opacity var(--t-quick), border-color var(--t-quick); }
.thumb img { width: 100%; height: 92px; object-fit: cover; }
.thumb .mono { position: absolute; inset-inline-start: 4px; bottom: 4px; padding: 0 .25rem; background: var(--ink-deep); color: var(--manila); font-size: .7rem; }
.thumb[aria-pressed="true"], .thumb:hover { opacity: 1; border-color: var(--copper); }
.dossier-panel { padding-top: .5rem; }
.dossier-title { font-size: clamp(2.4rem, 1.4rem + 4vw, 5.2rem); }
.dossier-subtitle { font: italic 300 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.4 var(--serif); color: var(--brass); margin: 1rem 0 0; }
[dir="rtl"] .dossier-subtitle { font-family: var(--arabic); font-style: normal; font-weight: 500; }
.dossier-price { display: flex; align-items: baseline; gap: 1rem; margin: 1.8rem 0 0; padding: 1rem 0; border-block: 1px solid var(--line); }
.dossier-price .label { margin: 0; }
.dossier-price strong { font: 400 clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem)/1 var(--mono); color: var(--paper); }
.order-form { margin-top: 1.8rem; display: grid; gap: 1.4rem; }
.editions { border: 0; margin: 0; padding: 0; min-width: 0; }
.editions legend { padding: 0; margin-bottom: .9rem; }
.edition-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; }
.edition-stamp { position: relative; display: block; cursor: pointer; }
.edition-stamp input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.stamp-face { display: flex; align-items: center; gap: .9rem; padding: .95rem 1rem; border: 1px solid var(--line-strong); background: rgba(20, 29, 38, .6); transition: border-color var(--t-quick), background var(--t-quick), transform var(--t-base) var(--ease-out), box-shadow var(--t-base); }
.glyph { display: inline-grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid var(--line-strong); font: 600 1rem/1 var(--arabic); color: var(--paper-dim); transition: border-color var(--t-quick), color var(--t-quick), transform var(--t-base) var(--ease-out); }
.glyph:not(:lang(ar)) { font-family: var(--mono); font-size: .78rem; letter-spacing: .05em; }
.stamp-text { display: grid; line-height: 1.3; }
.stamp-text strong { font-weight: 600; font-size: .98rem; }
.stamp-text small { color: var(--ash); font-size: .78rem; }
.edition-stamp:hover .stamp-face { border-color: var(--copper-light); }
.edition-stamp input:focus-visible + .stamp-face { outline: 2px solid var(--brass); outline-offset: 3px; }
.edition-stamp input:checked + .stamp-face { border-color: var(--brass); background: linear-gradient(135deg, rgba(217, 180, 140, .18), rgba(175, 127, 90, .06)); box-shadow: inset 0 0 0 1px var(--brass); }
.edition-stamp input:checked + .stamp-face .glyph { border-color: var(--brass); background: var(--brass); color: var(--ink-deep); transform: rotate(-10deg) scale(1.06); }
.edition-stamp input:checked + .stamp-face .stamp-text small { color: var(--brass); }
.edition-stamp.is-unavailable { cursor: not-allowed; opacity: .5; }
.edition-stamp.is-unavailable .stamp-text strong { text-decoration: line-through; text-decoration-color: var(--stamp); }
.editions.has-error .stamp-face { border-color: var(--stamp); animation: shake 360ms var(--ease-in-out); }
.field-hint { color: var(--ash); font-size: .82rem; margin: .7rem 0 0; }
.edition-single { display: flex; align-items: center; gap: 1rem; margin: 0; }
.edition-single .label { margin: 0; }
.edition-stamp-static { display: inline-flex; align-items: center; gap: .7rem; font-weight: 600; }
.edition-stamp-static .glyph { width: 2.2rem; height: 2.2rem; border-color: var(--brass); color: var(--brass); }
.buy-row { display: grid; grid-template-columns: auto 1fr; gap: .8rem; }
.stepper { display: inline-grid; grid-template-columns: 46px 52px 46px; height: 52px; border: 1px solid var(--line-strong); }
.stepper button { border: 0; background: transparent; font-size: 1.2rem; transition: background var(--t-quick), color var(--t-quick); }
.stepper button:hover:not(:disabled) { background: rgba(217, 180, 140, .12); color: var(--brass); }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.stepper input, .stepper output { width: 100%; border: 0; border-inline: 1px solid var(--line); background: transparent; text-align: center; font: 1rem var(--mono); display: grid; place-items: center; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.form-status { min-height: 1.3em; margin: 0; font-size: .9rem; color: var(--brass); }
.form-status.is-error { color: #e08c78; }
.unavailable-note { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin: 1.8rem 0 0; color: var(--paper-dim); }
.ask-link { margin-top: 1.4rem; }
.spec-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 2.2rem 0 1.5rem; border-top: 1px solid var(--line); }
.spec-sheet div { padding: 1rem 1rem 1rem 0; border-bottom: 1px solid var(--line); }
[dir="rtl"] .spec-sheet div { padding: 1rem 0 1rem 1rem; }
.spec-sheet dt { margin: 0 0 .3rem; }
.spec-sheet dd { margin: 0; color: var(--paper); }
.case-file { border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--ink-deep), var(--ink)); }
.case-file-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.case-file-grid > .narrative:only-child { grid-column: 1 / -1; max-width: 860px; margin-inline: auto; }
.record-card { position: relative; padding: 1.8rem 1.6rem; background: var(--paper); color: #2c261f; transform: rotate(-1.2deg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(44, 38, 31, .08) 27px 28px); }
.record-card::before { content: ""; position: absolute; top: -14px; inset-inline-start: 40%; width: 90px; height: 28px; background: rgba(205, 184, 150, .7); transform: rotate(3deg); }
.record-card .label { color: #7a5a3e; }
.record-card p { font: 400 1.02rem/1.7 var(--serif); margin: 0 0 1rem; }
[dir="rtl"] .record-card p { font-family: var(--arabic); }
.record-card .link-arrow { color: #2c261f; border-color: rgba(44, 38, 31, .3); }
.narrative-text p { font: 400 clamp(1.08rem, 1rem + .35vw, 1.25rem)/1.78 var(--serif); color: var(--paper); margin: 0 0 1.4em; max-width: 64ch; }
[dir="rtl"] .narrative-text p { font-family: var(--arabic); font-weight: 400; line-height: 1.95; }
html:not([dir="rtl"]) .narrative-text p:first-child::first-letter { float: inline-start; font: 300 4.6em/.82 var(--serif); margin: .08em .12em 0 0; color: var(--brass); }

/* 10 ── Next file: pendant lamp (after the owner's WordPress lamp/bell) ---- */
.next-file { position: relative; padding-block: clamp(8rem, 22vh, 13rem) var(--space-6); border-top: 1px solid var(--line); overflow: hidden; background: var(--ink-deep); isolation: isolate; }
.next-file::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 55% at 50% 58%, rgba(255, 214, 160, .1), transparent 72%); opacity: 0; transition: opacity 900ms var(--ease-out); }
.next-file.is-lit::before { opacity: 1; }
.next-stage { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.lamp-button { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1.4rem; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lamp-button:focus-visible { outline: none; }
.lamp-button:focus-visible .lamp-hint { outline: 2px solid var(--brass); outline-offset: 6px; }
.lamp-hint { position: relative; z-index: 3; color: var(--copper-light); transition: color var(--t-base), text-shadow var(--t-base); }
.lamp-button:hover .lamp-hint { color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, .5); }

.bell-lamp { --_size: clamp(200px, 28vw, 300px); --base-clr: #b7b5b4; --degofrot: .8; font-size: calc(var(--_size) * .01); position: relative; display: block; width: 80em; height: 80em; transform-origin: 50% -20vh; animation: bell-swing 5s ease-in-out infinite; animation-play-state: paused; pointer-events: none; will-change: transform; }
.next-file.is-in-view .bell-lamp { animation-play-state: running; }
.lamp-button.is-pulled .bell-lamp { animation: bell-swing 5s ease-in-out infinite, lamp-pull .55s cubic-bezier(.25, .8, .25, 1); }
.bell-lamp * { position: absolute; inset: 0; margin: auto; box-sizing: border-box; }
.bell-lamp *, .bell-lamp *::before, .bell-lamp *::after { transition: filter .4s ease-in-out, box-shadow .4s ease-in-out, opacity .4s ease-in-out, background .4s ease-in-out; }
.bell-lamp .rope { height: 50vh; width: 2em; translate: 0 -52%; background: linear-gradient(90deg, #2d54744d 0%, #000b 30%, transparent 100%), repeating-linear-gradient(-70deg, #252525, #888 2%, #3a3a3a 3%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 60%); mask-image: linear-gradient(to bottom, transparent 0%, #000 60%); }
.bell-lamp .bell-top { width: 14%; height: 14%; border-radius: 50%; translate: 0 -28em; background: var(--base-clr); box-shadow: inset -1em -.5em 2em .5em #fff, inset 1em -1em 2em 3em #000, 0 -.1em .4em .3em #c6eaffa8; }
.bell-lamp .bell-base { width: 20%; height: 20%; border-radius: 50%; translate: 0 -24%; background: var(--base-clr); box-shadow: 0 -.1em .4em .2em #c6eaffa8; }
.bell-lamp .bell-base::before { content: ""; position: absolute; translate: -18em 20em; width: 100%; height: 80%; background-image: radial-gradient(circle at -80% -12%, transparent 50em, var(--base-clr) 50em); }
.bell-lamp .bell-base::after { content: ""; position: absolute; translate: 18em 20em; width: 100%; height: 80%; transform: rotateY(180deg); background-image: radial-gradient(circle at -80% -12%, transparent 50.1em, #cacaca 50.3em, var(--base-clr) 50.5em); }
.bell-lamp .bell-base:nth-child(3) { filter: brightness(3) blur(1em); scale: .74 .84; translate: 0 -11em; }
.bell-lamp .shadow-l1 { width: 30em; height: 42em; border-radius: 50%; rotate: 12deg; translate: -3em -6em; filter: blur(2em); background: #797a80; }
.bell-lamp .shadow-l2 { width: 130%; height: 90%; filter: blur(5em); translate: -6em 9em; }
.bell-lamp .shadow-l2::before { content: ""; display: block; width: 68%; height: 64%; border-radius: 50%; rotate: -54deg; translate: -8em 2em; background: #000; }
.bell-lamp .glow { width: 100%; height: 100%; filter: brightness(2) blur(2em); }
.bell-lamp .glow::before { content: ""; display: block; width: 100%; height: 80%; translate: 0 6em; scale: .94 .94; background: #fff3; clip-path: polygon(9% 83%, 12% 79%, 15% 74%, 18% 68%, 20% 62%, 22% 56%, 23% 50%, 24% 43%, 25% 38%, 25% 34%, 26% 29%, 26% 26%, 27% 22%, 29% 19%, 30% 15%, 32% 13%, 34% 10%, 37% 7%, 41% 5%, 44% 4%, 47% 3%, 51% 3%, 55% 3%, 58% 5%, 62% 6%, 73% 29%, 72% 25%, 70% 20%, 67% 16%, 63% 12%, 60% 9%, 58% 8%, 55% 7%, 52% 6%, 48% 6%, 44% 8%, 41% 9%, 37% 12%, 36% 14%, 33% 16%, 31% 20%, 30% 23%, 29% 26%, 28% 31%, 27% 36%, 27% 39%, 26% 44%, 26% 48%, 26% 52%, 25% 56%, 23% 61%, 22% 65%, 21% 69%, 19% 72%, 17% 75%, 15% 78%, 13% 81%); }
.bell-lamp .glow2 { width: 100%; height: 100%; filter: blur(.3em); opacity: .1; }
.bell-lamp .glow2::before { content: ""; display: block; width: 100%; height: 84%; translate: -1em 8.4em; background: #fff3; clip-path: polygon(9.21% 83%, 12.28% 79%, 15.35% 74%, 18.41% 68%, 20.46% 62%, 22.51% 56%, 23.53% 50%, 24.55% 43%, 25.58% 34%, 26.6% 29%, 27.62% 22%, 29.16% 18.5%, 30.95% 15.75%, 32.74% 13%, 34.78% 10%, 37.85% 7%, 41.94% 5%, 45.01% 4%, 48.08% 3%, 52.17% 3%, 56.27% 3%, 64.01% 6.36%, 55.75% 4.5%, 47.83% 4.75%, 42.84% 5.88%, 39.51% 7.88%, 36.45% 10.38%, 33.38% 14.88%, 30.69% 19%, 29.67% 22.5%, 28.8% 26.72%, 28.21% 31.36%, 26.92% 38.44%, 26.57% 43.67%, 25.51% 48.34%, 25% 54.34%, 23.4% 60.69%, 21.23% 65.38%, 18.41% 71.5%, 16.88% 74.75%, 12.28% 80.5%); }
.bell-lamp .left-glow { --lgc: #5d819666; width: 50%; height: 50%; border-radius: 50%; translate: 0 -24%; box-shadow: inset 1em 0 1em .2em var(--lgc); clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); }
.bell-lamp .left-glow2 { --lgc2: #5d819666; width: 49%; height: 50%; translate: -19em 10.35em; background-image: radial-gradient(circle at -80% -12%, transparent 50em, var(--lgc2) 50.3em, transparent 52em); clip-path: polygon(0 0, 100% 0, 100% 78%, 0 78%); }
.bell-lamp .r-glow { --lgc: #fffaf680; width: 50%; height: 50%; border-radius: 50%; translate: 0 -24%; box-shadow: inset 1em 0 1em .2em var(--lgc); clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); transform: rotateY(180deg); }
.bell-lamp .r-glow2 { --lgc2: #fffaf680; width: 49%; height: 50%; translate: 18.2em 10.35em; background-image: radial-gradient(circle at -80% -12%, transparent 50em, var(--lgc2) 50.3em, transparent 52em); clip-path: polygon(0 0, 100% 0, 100% 78%, 0 78%); transform: rotateY(180deg) rotateZ(-2deg); }
.bell-lamp .mid-ring { width: 64%; height: 10%; border-radius: 50%; translate: -.1em 10em; box-shadow: inset -.3em 1.3em .4em -1em #fff5, -.2em -1.2em .4em -.4em #505050, -.1em -1.8em .4em -.4em #fff5, 0 -2.5em .4em -1em #000; mix-blend-mode: hard-light; filter: brightness(.8); }
.bell-lamp .mid-ring.small { translate: .04em -8em; scale: .8 .5; }
.bell-lamp .mid-ring::before, .bell-lamp .mid-ring::after { content: ""; position: absolute; top: 10%; display: block; width: 2em; height: 2em; border-radius: 50%; background: #000; }
.bell-lamp .mid-ring::before { left: -2%; right: auto; }
.bell-lamp .mid-ring::after { right: -2%; left: auto; }
.bell-lamp .bell-buff-t { width: 72%; height: 12%; border-radius: 50%; translate: 0 16em; background: #fff2; filter: blur(1em); }
.bell-lamp .bell-buff { width: 88%; height: 20%; border-radius: 50% 50% 50% 50% / 50% 50% 30% 30%; translate: 0 20em; background: linear-gradient(90deg, #000 40%, var(--base-clr) 90%); box-shadow: inset 1em 0 2em -1em #5d819666, inset -1em 0 2em -1em #fff; }
.bell-lamp .bell-btm { width: 88%; height: 18%; border-radius: 50%; translate: 0 23em; background: linear-gradient(90deg, #000 40%, var(--base-clr) 90%); }
.bell-lamp .bell-btm2 { width: 74%; height: 12%; border-radius: 50%; translate: 0 24em; background: #fffff6; box-shadow: 0 0 1em .6em #ffe9d4, -.8em .2em 2em 1em #cca37f, -5.4em -.6em 3em -1em #ce6e1abb, 6em -.6em 3em -1em #ce6e1abb, inset 0 30.3em .3em -30em #c7962d, inset 0 -2em 2em -2em #ffe9d4, inset 0 -1em 2em 1em #ce6e1a66; }
.bell-lamp .bell-ring-container { width: 74%; height: 24%; border-radius: 50% 50% 50% 50% / 25% 25% 0 0; translate: 0 29.2em; overflow: hidden; }
.bell-lamp .bell-ring { width: 12em; height: 12em; border-radius: 50%; translate: 0 -6em; background: #fff; box-shadow: 0 .8em 1em -.3em #f8e1d0, inset 0 -6em 4em -4em #e3b695, inset 0 1em 3em 1em #fff4, inset 0 2em 3em 1em #fff, inset 0 100em 0 100em #2c2c2c; }
.bell-lamp .bell-rays { width: 100%; height: 140%; translate: 0 -4em; border-radius: 50%; mix-blend-mode: soft-light; box-shadow: inset 0 -21em 4em -20em #000; }
.bell-lamp .bell-rays::before { content: ""; position: absolute; left: -21em; top: -77em; display: block; width: 100em; height: 100em; border-radius: 100%; filter: blur(.6em); background: repeating-conic-gradient(at 50% 50%, #fff2 0%, transparent .6%, #fff2 .8%); animation: lamp-radiate 1s linear infinite; animation-play-state: paused; }
.next-file.is-in-view.is-lit .bell-lamp .bell-rays::before, html:not(.js-ready) .bell-lamp .bell-rays::before { animation-play-state: running; }
.bell-lamp .volumetric { width: 98%; height: 224%; translate: 0 124em; opacity: .2; }
.bell-lamp .volumetric .vl, .bell-lamp .volumetric .vr { width: 100%; height: 100%; transform-origin: 50% 20em; }
.bell-lamp .volumetric .vl { rotate: 22deg; box-shadow: inset 40em 0 20em -20em #fff1; }
.bell-lamp .volumetric .vr { rotate: -22deg; box-shadow: inset -40em 0 20em -20em #fff1; }
/* Lamp switched off (until the chain is pulled). Without JavaScript the lamp stays lit and the next case is shown. */
.js-ready .next-file:not(.is-lit) .bell-lamp .bell-btm2 { filter: brightness(.02); }
.js-ready .next-file:not(.is-lit) .bell-lamp .bell-ring { background: #000; box-shadow: 0 .8em 1em -.3em #f8e1d000, inset 0 -6em 4em -4em #e3b69500, inset 0 1em 3em 1em #fff0, inset 0 -2em 3em 1em #fff2, inset 0 100em 0 100em #000; }
.js-ready .next-file:not(.is-lit) .bell-lamp .bell-rays, .js-ready .next-file:not(.is-lit) .bell-lamp .volumetric { opacity: 0; }

.next-reveal { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1rem; margin-top: 1.5rem; }
.js-ready .next-file:not(.is-lit) .next-reveal { opacity: 0; transform: translateY(26px); filter: brightness(.3); visibility: hidden; }
.next-reveal { transition: opacity var(--t-slow) var(--ease-out) 260ms, transform var(--t-slow) var(--ease-out) 260ms, filter var(--t-slow) 260ms; }
.next-card { display: grid; grid-template-columns: 150px 1fr; gap: 1.5rem; align-items: center; padding: 1.2rem; max-width: 620px; text-align: start; background: var(--night); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--night)), var(--night)); border: 1px solid var(--line-strong); box-shadow: 0 -30px 80px -40px rgba(255, 214, 160, .35); transition: border-color var(--t-quick), transform var(--t-base) var(--ease-out); }
.next-card:hover { border-color: var(--brass); transform: translateY(-4px); }
.next-poster img { width: 100%; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); }
.next-text { display: grid; gap: .5rem; }
.next-text .mono { color: var(--copper-light); }
.next-text strong { font: 300 2rem/1.1 var(--serif); }
[dir="rtl"] .next-text strong { font-family: var(--arabic); font-weight: 600; }

.lightbox { width: min(96vw, 1100px); max-height: 94vh; padding: 0; border: 1px solid var(--line-strong); background: var(--ink-deep); color: var(--paper); }
.lightbox::backdrop { background: rgba(5, 8, 11, .9); }
.lightbox[open] { animation: exhibit-in var(--t-base) var(--ease-out); }
.lightbox img { width: 100%; max-height: 92vh; object-fit: contain; touch-action: pinch-zoom; }
.lightbox-close { position: absolute; top: .6rem; inset-inline-end: .6rem; z-index: 2; width: 44px; height: 44px; border: 1px solid var(--line-strong); background: rgba(9, 14, 19, .8); font-size: 1.5rem; }

/* 11 ── Bag, forms, order ------------------------------------------------- */
.bag-grid, .checkout-grid, .order-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.bag-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.bag-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; grid-template-areas: "thumb info step total" "thumb info remove remove"; gap: .4rem 1.4rem; align-items: center; padding: 1.4rem 0; border-bottom: 1px solid var(--line); animation: folder-in var(--t-base) var(--ease-out) both; }
.bag-thumb { grid-area: thumb; position: relative; }
.bag-thumb::after { content: ""; position: absolute; top: 12px; inset-inline-end: -6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); background: var(--ink); }
.bag-info { grid-area: info; min-width: 0; }
.bag-info p { margin: 0; }
.tag-line { color: var(--ash); }
.bag-title { font: 300 1.5rem/1.2 var(--serif); margin: .3rem 0; }
[dir="rtl"] .bag-title { font-family: var(--arabic); font-weight: 600; }
.stepper--line { grid-area: step; height: 44px; grid-template-columns: 40px 44px 40px; }
.bag-line-total { grid-area: total; margin: 0; font: 1rem var(--mono); min-width: 7.5ch; text-align: end; }
.bag-remove { grid-area: remove; justify-self: end; }
.ledger { position: sticky; top: calc(var(--header-h) + 1.5rem); padding: 1.6rem; background: var(--night); border: 1px solid var(--line); display: grid; gap: 1.1rem; }
.ledger > .label { margin: 0; }
.code-form { display: grid; gap: .45rem; padding-bottom: 1.1rem; border-bottom: 1px dashed var(--line-strong); }
.code-form .label { margin: 0; }
.code-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.code-row input { min-height: 44px; padding: .6rem .8rem; background: var(--ink); border: 1px solid var(--line-strong); font: 1rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.totals { margin: 0; display: grid; gap: .55rem; }
.totals div { display: flex; justify-content: space-between; gap: 1rem; color: var(--paper-dim); }
.totals dt, .totals dd { margin: 0; }
.totals dd { font-family: var(--mono); }
.totals .is-discount { color: var(--green); }
.totals .grand { padding-top: .8rem; margin-top: .3rem; border-top: 1px solid var(--line-strong); color: var(--paper); font-size: 1.15rem; }
.totals .grand dd { font-size: 1.3rem; }
.ledger-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.ledger-lines li { display: flex; justify-content: space-between; gap: 1rem; }
.ledger-lines li > span:first-child { display: grid; gap: .1rem; }
.ledger-lines small { color: var(--ash); font-size: .82rem; }
.ledger-lines li > span:last-child { font-family: var(--mono); white-space: nowrap; }
.empty-file { max-width: 640px; padding: var(--space-4) 0; display: grid; gap: 1rem; justify-items: start; }
.empty-stamp { padding: .4rem .8rem; border: 2px solid var(--stamp); color: var(--stamp); transform: rotate(-5deg); }
.paper-form { display: grid; gap: 1.2rem; padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--night); border: 1px solid var(--line); }
.field { display: grid; gap: .45rem; }
.field > span:first-child { font-size: .8rem; letter-spacing: .06em; color: var(--paper-dim); }
[dir="rtl"] .field > span:first-child { letter-spacing: 0; font-size: .95rem; }
.field input, .field textarea, .field select { width: 100%; min-height: 50px; padding: .75rem .9rem; background: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); transition: border-color var(--t-quick), background var(--t-quick); }
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brass); background: #0c1219; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--stamp); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-error { color: #e59a86; font-size: .85rem; }
.field small { font-size: .75rem; }
.form-error { padding: .8rem 1rem; border: 1px solid rgba(168, 81, 63, .6); background: rgba(168, 81, 63, .12); margin: 0; }
.telegram { padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--paper); color: #2a241d; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); display: grid; gap: 1rem; }
.telegram .label { color: #7a5a3e; margin: 0; }
.telegram-head { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; padding-bottom: 1rem; border-bottom: 2px dashed rgba(42, 36, 29, .3); color: #5b5045; }
.telegram-head strong { color: #2a241d; font-weight: 600; }
.telegram-body { margin: 0; white-space: pre-wrap; word-break: break-word; font: .92rem/1.65 var(--mono); color: #2a241d; background: repeating-linear-gradient(180deg, transparent 0 25px, rgba(42, 36, 29, .07) 25px 26px); padding: .2rem 0; max-height: 460px; overflow: auto; }
[dir="rtl"] .telegram-body { font-family: var(--arabic); }
.telegram .fine-print { color: #5b5045; margin: 0; }
.telegram .text-btn { color: #5b5045; justify-self: start; }
.telegram .notice { color: #2a241d; }

/* 12 ── About, contact, errors ------------------------------------------- */
.about-head { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; }
.about-mark img { width: 100%; max-width: 460px; margin-inline: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .5)); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.scene { position: relative; margin: 0; overflow: hidden; isolation: isolate; }
.scene img { width: 100%; height: clamp(320px, 62vw, 760px); object-fit: cover; }
.scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink) 0%, transparent 35%, transparent 70%, var(--ink) 100%); pointer-events: none; }
.scene figcaption { position: absolute; z-index: 2; bottom: 1.5rem; inset-inline: 0; color: var(--manila); }
.custody--four { grid-template-columns: repeat(4, 1fr); margin-top: 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.contact-cards { display: grid; gap: 1rem; }
.contact-card { display: grid; gap: .4rem; padding: 1.4rem 1.5rem; border: 1px solid var(--line); background: var(--night); transition: border-color var(--t-quick), transform var(--t-base) var(--ease-out); }
.contact-card .label { margin: 0; }
.contact-card strong { font: 300 1.5rem/1.25 var(--serif); }
[dir="rtl"] .contact-card strong { font-family: var(--arabic); font-weight: 600; }
.contact-card:not(.is-static):hover { border-color: var(--brass); transform: translateY(-3px); }
.contact-card--primary { background: linear-gradient(135deg, rgba(47, 125, 91, .28), var(--night)); border-color: rgba(47, 125, 91, .6); }
.contact-social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.contact-social .contact-card strong { font-size: clamp(1.1rem, .95rem + .6vw, 1.35rem); overflow-wrap: anywhere; }
.contact-card .label .social-icon { flex: none; color: var(--brass); }
.contact-card--instagram { background: linear-gradient(135deg, rgba(175, 127, 90, .2), var(--night)); }
@media (max-width: 420px) { .contact-social { grid-template-columns: minmax(0, 1fr); } }
.error-file { min-height: 70vh; display: grid; align-items: center; padding-block: var(--space-6); text-align: start; }
.error-code { font-size: clamp(5rem, 18vw, 13rem); line-height: 1; color: var(--copper); opacity: .18; margin: 0 0 -1rem; letter-spacing: -.04em; }
.maintenance-seal { margin-bottom: 2rem; }
.maintenance-seal img { width: min(260px, 70vw); }

/* Copyright & use (/copyright): a rubber-stamp seal, the file label, numbered articles, and two verdict cards. */
.rights-head { overflow: hidden; } /* the spinning seal must not widen the page */
.rights-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.rights-seal { position: relative; width: clamp(150px, 17vw, 230px); aspect-ratio: 1; color: var(--stamp); rotate: -10deg; opacity: .9; animation: seal-stamp 900ms var(--ease-out) calc(var(--enter-delay) + 650ms) both; }
.rights-seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; direction: ltr; overflow: visible; animation: seal-spin 80s linear infinite; }
.rights-seal-ring circle { fill: none; stroke: currentColor; }
.rights-seal-ring text { fill: currentColor; font: 500 12.5px var(--mono); letter-spacing: .12em; }
.rights-seal-core { position: absolute; inset: 21%; display: grid; place-content: center; justify-items: center; gap: .2rem; border: 2px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 5px rgba(9, 14, 19, .9), inset 0 0 0 6px currentColor; line-height: 1; }
.rights-seal-c { font: 300 clamp(2.8rem, 5.4vw, 4.4rem)/.8 var(--serif); }
.rights-seal-pda { font: .78rem var(--mono); letter-spacing: .42em; margin-inline-start: .42em; }
@keyframes seal-stamp { 0% { opacity: 0; scale: 1.8; rotate: -30deg; } 55% { opacity: 1; scale: .93; rotate: -8deg; } 78% { scale: 1.03; rotate: -11deg; } 100% { opacity: .9; scale: 1; rotate: -10deg; } }
@keyframes seal-spin { to { transform: rotate(360deg); } }

.rights-band { border-bottom: 1px solid var(--line); background: var(--ink-deep); }
.rights-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 0; }
.rights-meta > div { padding-block: 1.4rem; padding-inline: 0 1.5rem; border-inline-end: 1px dashed var(--line-strong); }
.rights-meta > div + div { padding-inline-start: 1.5rem; }
.rights-meta > div:last-child { border-inline-end: 0; }
.rights-meta dt { margin: 0 0 .45rem; }
.rights-meta dd { margin: 0; color: var(--paper); }

.rights-wrap { display: grid; gap: clamp(3rem, 6vw, 5.5rem); max-width: 1080px; }
.rights-article { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: clamp(1rem, 4vw, 3rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.rights-num { margin: 0; color: var(--copper-light); font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); letter-spacing: 0; line-height: 1; }
[dir="rtl"] .rights-num { font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); }
.rights-num span { display: block; margin-bottom: .55rem; color: var(--ash); font-size: var(--fs-label); letter-spacing: .2em; }
[dir="rtl"] .rights-num span { font-size: .82rem; letter-spacing: 0; }
.rights-body h2, .verdict h2, .rights-contact h2 { margin: 0 0 1rem; font: 300 var(--fs-display-3)/1.15 var(--serif); color: var(--paper); }
[dir="rtl"] .rights-body h2, [dir="rtl"] .verdict h2, [dir="rtl"] .rights-contact h2 { font-family: var(--arabic); font-weight: 600; }
.rights-body p, .rights-contact p:not(.label):not(.rights-email) { margin: 0 0 1em; max-width: 62ch; color: var(--paper-dim); font-size: 1.06rem; line-height: 1.75; }
.rights-article--lead .rights-body p:last-child:not(:first-of-type) { margin-top: 1.4rem; color: var(--brass); font: italic 300 clamp(1.2rem, 1rem + .8vw, 1.55rem)/1.4 var(--serif); }
[dir="rtl"] .rights-article--lead .rights-body p:last-child:not(:first-of-type) { font-family: var(--arabic); font-style: normal; font-weight: 500; }

.verdicts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
.verdict { position: relative; padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--paper); color: #2c261f; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .75); background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(44, 38, 31, .07) 31px 32px); }
.verdict--yes { rotate: -.8deg; }
.verdict--no { rotate: .9deg; background-color: #e5dccd; }
.verdict::before { content: ""; position: absolute; top: -13px; inset-inline-start: 42%; width: 84px; height: 26px; background: rgba(205, 184, 150, .72); rotate: 3deg; }
.verdict .rights-num { color: #7a5a3e; font-size: 2rem; }
.verdict .rights-num span { color: #7a6c5c; }
.verdict h2 { color: #2c261f; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin: .9rem 0 1.3rem; padding-inline-end: 5.5rem; }
.verdict-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.verdict-list li { position: relative; padding-inline-start: 2.1rem; font: 400 1.02rem/1.6 var(--serif); }
[dir="rtl"] .verdict-list li { font-family: var(--arabic); line-height: 1.8; }
.verdict-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: .12em; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 1.5px solid currentColor; border-radius: 50%; color: #3f6b4a; font: 700 .78rem/1 var(--sans); }
.verdict--no .verdict-list li::before { content: "✕"; border-radius: 2px; color: var(--stamp); }
.verdict-stamp { position: absolute; top: 1.5rem; inset-inline-end: 1.3rem; padding: .4rem .75rem; border: 3px double currentColor; color: #3f6b4a; font-size: .78rem; letter-spacing: .28em; rotate: -12deg; opacity: .88; }
[dir="rtl"] .verdict-stamp { font-size: .95rem; font-weight: 700; }
.verdict--no .verdict-stamp { color: var(--stamp); rotate: 9deg; }
.js .verdict-stamp { opacity: 0; }
.js .verdict.is-revealed .verdict-stamp { animation: verdict-stamp 560ms var(--ease-out) 420ms both; }
@keyframes verdict-stamp { 0% { opacity: 0; scale: 2.3; } 60% { opacity: 1; scale: .92; } 100% { opacity: .88; scale: 1; } }

.redacted { display: grid; grid-template-columns: max-content minmax(0, 17rem); align-items: center; gap: .6rem 1.2rem; margin-top: 1.6rem; color: var(--ash); }
.redacted p { display: contents; }
.redacted span:not(.redacted-bar) { white-space: nowrap; }
.redacted-bar { height: 1.2em; background: #05080b; box-shadow: inset 0 0 0 1px rgba(234, 226, 214, .07); transform-origin: left; }
[dir="rtl"] .redacted-bar { transform-origin: right; }
.redacted p:nth-child(2) .redacted-bar { width: 72%; }
.js .redacted-bar { transform: scaleX(0); }
.js .is-revealed .redacted-bar { animation: redacted-bar 800ms var(--ease-in-out) 350ms forwards; }
.js .is-revealed .redacted p:nth-child(2) .redacted-bar { animation-delay: 550ms; }
@keyframes redacted-bar { to { transform: scaleX(1); } }

.rights-contact { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: end; padding: clamp(1.6rem, 4vw, 3rem); border: 1px solid var(--line-strong); background: radial-gradient(80% 140% at 100% 0%, rgba(175, 127, 90, .16), transparent 60%), var(--night); }
.rights-actions { display: grid; gap: .8rem; }
.rights-email { margin: 0; color: var(--ash); font: .85rem var(--mono); text-align: center; overflow-wrap: anywhere; }
.rights-fine { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.rights-fine .label { margin: 0; }
html.js:not(.js-ready) .verdict-stamp, html.js:not(.js-ready) .redacted-bar { animation: failsafe-stamp 1ms linear 2.5s forwards; }
@keyframes failsafe-stamp { to { opacity: .88; transform: none; } }

@media (max-width: 860px) {
  .rights-head-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .rights-seal { width: 118px; justify-self: end; margin-top: -1rem; }
  .rights-meta { grid-template-columns: minmax(0, 1fr); }
  .rights-meta > div, .rights-meta > div + div { padding: 1rem 0; border-inline-end: 0; border-bottom: 1px dashed var(--line-strong); }
  .rights-meta > div:last-child { border-bottom: 0; }
  .rights-article { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .rights-num { display: flex; align-items: baseline; gap: .7rem; font-size: 2.2rem; }
  [dir="rtl"] .rights-num { font-size: 2.2rem; }
  .rights-num span { margin: 0; }
  .verdicts { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .rights-contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .verdict h2 { padding-inline-end: 0; margin-top: 2.6rem; }
}

/* Gift option on the order form: a hidden checkbox styled as a tag; the message box opens when it is ticked. */
.gift-box { display: grid; gap: .9rem; padding: 1rem 1.1rem; border: 1px dashed rgba(205, 184, 150, .45); }
.gift-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gift-label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: center; cursor: pointer; }
.gift-label::before { content: ""; grid-column: 1; grid-row: 1; width: 1.35rem; height: 1.35rem; border: 1.5px solid var(--line-strong); transition: background var(--t-quick), border-color var(--t-quick); }
.gift-mark { grid-column: 1; grid-row: 1; justify-self: center; font-size: .85rem; opacity: 0; transform: scale(.4); transition: opacity var(--t-quick), transform var(--t-base) var(--ease-out); }
.gift-label > span:last-child { display: grid; gap: .2rem; }
.gift-label strong { font-weight: 600; color: var(--paper); }
.gift-label small { color: var(--ash); font-size: .82rem; line-height: 1.5; }
.gift-toggle:checked + .gift-label::before { border-color: var(--brass); background: rgba(217, 180, 140, .16); }
.gift-toggle:checked + .gift-label .gift-mark { opacity: 1; transform: none; }
.gift-toggle:focus-visible + .gift-label::before { outline: 2px solid var(--brass); outline-offset: 3px; }
.gift-message { display: none; }
.gift-toggle:checked ~ .gift-message { display: grid; animation: rise var(--t-base) var(--ease-out) both; }
.gift-box:has(.gift-toggle:checked) { border-style: solid; border-color: rgba(217, 180, 140, .6); }

/* Stars (reviews) */
.stars { display: inline-flex; gap: .12em; line-height: 1; letter-spacing: 0; }
.star { color: rgba(234, 226, 214, .2); }
.star.is-on { color: var(--brass); }
.stars--large { font-size: 1.5rem; }

/* FAQ (/faq): a numbered list of questions that open in place. */
.faq-wrap { display: grid; gap: clamp(2.5rem, 5vw, 4rem); max-width: 920px; }
.faq-list { border-bottom: 1px solid var(--line); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item summary { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1.35rem 0; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-num { color: var(--copper-light); }
.faq-q { font: 300 clamp(1.2rem, 1rem + .9vw, 1.6rem)/1.3 var(--serif); color: var(--paper); transition: color var(--t-quick); }
[dir="rtl"] .faq-q { font-family: var(--arabic); font-weight: 500; }
.faq-item summary:hover .faq-q, .faq-item[open] .faq-q { color: var(--brass); }
.faq-icon { position: relative; width: 1.6rem; height: 1.6rem; border: 1px solid var(--line-strong); border-radius: 50%; transition: transform var(--t-base) var(--ease-out), border-color var(--t-quick); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; inset: 50% 28% auto; height: 1.5px; margin-top: -.75px; background: currentColor; }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon { transform: rotate(45deg); border-color: var(--brass); color: var(--brass); }
.faq-item summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.faq-a { padding: 0 0 1.6rem; padding-inline-start: 5.2rem; max-width: 70ch; }
.faq-a p { margin: 0 0 .8em; color: var(--paper-dim); font-size: 1.05rem; line-height: 1.75; }
.faq-item[open] .faq-a { animation: rise var(--t-base) var(--ease-out) both; }
.faq-more { display: grid; gap: .8rem; padding: clamp(1.5rem, 4vw, 2.6rem); border: 1px solid var(--line-strong); background: radial-gradient(80% 140% at 100% 0%, rgba(175, 127, 90, .16), transparent 60%), var(--night); }
.faq-more .label, .faq-more p { margin: 0; }
.faq-more h2 { margin: 0; font: 300 var(--fs-display-3)/1.15 var(--serif); }
[dir="rtl"] .faq-more h2 { font-family: var(--arabic); font-weight: 600; }
.faq-more p { color: var(--paper-dim); }
.faq-more-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; margin-top: .4rem; }

/* Reviews (/reviews and the home page) */
.reviews-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }
.reviews-score { display: grid; justify-items: center; gap: .5rem; padding: 1.4rem 1.8rem; border: 1px solid var(--line-strong); background: rgba(9, 14, 19, .5); }
.reviews-score strong { font: 300 clamp(3rem, 2rem + 4vw, 4.6rem)/.9 var(--serif); color: var(--brass); }
.reviews-score .mono { color: var(--ash); }
.filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-4); }
.filter-chips a { padding: .45rem .9rem; border: 1px solid var(--line-strong); color: var(--paper-dim); font-size: .92rem; transition: border-color var(--t-quick), color var(--t-quick), background var(--t-quick); }
.filter-chips a:hover { border-color: var(--brass); color: var(--paper); }
.filter-chips a[aria-current="page"] { border-color: var(--brass); background: rgba(217, 180, 140, .14); color: var(--paper); }
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.2rem; align-items: start; }
.review-card { position: relative; display: grid; gap: 1rem; padding: 1.6rem 1.5rem 1.4rem; border: 1px solid var(--line); background: var(--night); }
.review-card::before { content: "“"; position: absolute; top: .2rem; inset-inline-end: 1rem; font: 300 4.5rem/1 var(--serif); color: rgba(175, 127, 90, .22); pointer-events: none; }
.review-card blockquote { margin: 0; }
.review-card blockquote p { margin: 0; font: 400 1.06rem/1.7 "Literata", "El Messiri", Georgia, serif; color: var(--paper); overflow-wrap: anywhere; }
.review-card footer { display: grid; gap: .2rem; padding-top: .9rem; border-top: 1px dashed var(--line-strong); }
.review-card footer strong { font-weight: 600; }
.review-meta { color: var(--ash); }
.review-form { max-width: 780px; margin-top: var(--space-5); }
.star-input { margin: 0; padding: 0; border: 0; display: grid; gap: .4rem; }
.star-input legend { padding: 0; margin-bottom: .4rem; color: var(--paper-dim); font-size: .9rem; }
.star-input.has-error legend { color: #e59a86; }
.star-input-row { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .3rem; }
.star-input-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input-row label { font-size: 2.1rem; line-height: 1; color: rgba(234, 226, 214, .2); cursor: pointer; transition: color var(--t-quick), transform var(--t-base) var(--ease-out); }
.star-input-row label:hover { transform: scale(1.15) rotate(-6deg); }
.star-input-row input:checked ~ label, .star-input-row label:hover, .star-input-row label:hover ~ label { color: var(--brass); }
.star-input-row input:focus-visible + label { outline: 2px solid var(--brass); outline-offset: 3px; }
.case-rating { display: inline-flex; align-items: center; gap: .6rem; margin-top: .4rem; color: var(--paper-dim); font-size: .92rem; }
.case-rating:hover { color: var(--brass); }
.hints-link { margin-top: 1.4rem; }

/* Hints (/cases/{slug}/hints): each hint opens inside the previous one; the answer is stamped in red. */
.hints-wrap { display: grid; gap: 1.6rem; max-width: 880px; }
.hints-warning { margin: 0; padding: .8rem 1rem; border: 1px solid rgba(168, 81, 63, .6); background: rgba(168, 81, 63, .1); color: #e8b3a5; text-transform: none; letter-spacing: .04em; font-size: .85rem; line-height: 1.6; }
.hint-step { padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--line); background: var(--night); }
.hint-step-num { margin: 0 0 .4rem; color: var(--copper-light); }
.hint-step h2 { margin: 0 0 1.2rem; font: 300 var(--fs-display-3)/1.15 var(--serif); }
[dir="rtl"] .hint-step h2 { font-family: var(--arabic); font-weight: 600; }
.hint { margin-top: .8rem; }
.hint > summary { display: inline-flex; align-items: center; gap: .8rem; padding: .7rem 1rem; border: 1px solid var(--line-strong); cursor: pointer; list-style: none; color: var(--paper); transition: border-color var(--t-quick), background var(--t-quick); }
.hint > summary::-webkit-details-marker { display: none; }
.hint > summary:hover { border-color: var(--brass); background: rgba(217, 180, 140, .08); }
.hint > summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.hint[open] > summary { border-color: var(--brass); }
.hint-tag { flex: none; color: var(--brass); white-space: nowrap; }
.hint-body { margin-top: .8rem; padding-inline-start: 1.1rem; border-inline-start: 2px dashed rgba(175, 127, 90, .5); }
.hint[open] > .hint-body { animation: rise var(--t-base) var(--ease-out) both; }
.hint-body > p { margin: 0 0 .7em; color: var(--paper-dim); line-height: 1.75; }
.hint--answer > summary { border-color: rgba(168, 81, 63, .7); }
.hint--answer > summary .hint-tag { color: #e59a86; }
.hint--answer[open] > .hint-body { border-color: var(--stamp); }
.hint--answer[open] > .hint-body > p { color: var(--paper); font-weight: 600; }

@media (max-width: 700px) {
  .reviews-head { grid-template-columns: minmax(0, 1fr); }
  .reviews-score { justify-self: start; grid-template-columns: auto auto; align-items: center; justify-items: start; gap: .3rem 1rem; padding: 1rem 1.2rem; }
  .reviews-score strong { grid-row: span 2; }
  .faq-item summary { grid-template-columns: minmax(0, 1fr) auto; }
  .faq-num { grid-column: 1 / -1; }
  .faq-a { padding-inline-start: 0; }
  .hint-body { padding-inline-start: .75rem; }
  .hint > summary { padding: .65rem .8rem; }
}

/* Players' corner: certificate, leaderboard, events, gift cards, waiting list, home strip */
.case-extras { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-top: 1.4rem; }
.notify-form { display: grid; gap: .6rem; margin-top: 1.2rem; padding: 1.1rem; border: 1px dashed rgba(205, 184, 150, .45); }
.notify-form .label, .notify-form .fine-print { margin: 0; }
.notify-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .6rem; align-items: end; }
.field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.menu-more { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.menu-more a { color: var(--paper-dim); font-size: 1rem; }
.menu-more a:hover { color: var(--brass); }

.players-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.players-card { position: relative; display: grid; gap: .5rem; align-content: start; padding: 1.6rem 1.5rem 3rem; border: 1px solid var(--line); background: var(--night); transition: border-color var(--t-quick), transform var(--t-base) var(--ease-out); }
.players-card:hover { border-color: var(--brass); transform: translateY(-4px); }
.players-icon { font-size: 1.8rem; line-height: 1; }
.players-card strong { font: 300 1.5rem/1.2 var(--serif); color: var(--paper); }
[dir="rtl"] .players-card strong { font-family: var(--arabic); font-weight: 600; }
.players-card span { color: var(--paper-dim); }
.players-arrow { position: absolute; bottom: 1.1rem; inset-inline-end: 1.3rem; color: var(--brass) !important; transition: transform var(--t-base) var(--ease-out); }
[dir="rtl"] .players-arrow { transform: scaleX(-1); }
.players-card:hover .players-arrow { transform: translateX(4px); }
[dir="rtl"] .players-card:hover .players-arrow { transform: scaleX(-1) translateX(4px); }

/* Certificate: a framed paper document; printed alone on an A4 landscape page. */
.cert-form { max-width: 780px; }
.time-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; border: 0; }
.time-row legend { grid-column: 1 / -1; padding: 0; margin-bottom: .5rem; color: var(--paper-dim); font-size: .9rem; }
.time-row.has-error legend { color: #e59a86; }
.time-row .field-error { grid-column: 1 / -1; }
.time-row input { min-width: 0; width: 100%; }
.certificate { max-width: 1000px; margin-inline: auto; padding: clamp(.6rem, 1.5vw, 1rem); background: #efe6d6; color: #2c261f; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85); background-image: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .5), transparent 60%), repeating-linear-gradient(0deg, rgba(44, 38, 31, .025) 0 2px, transparent 2px 4px); animation: rise var(--t-slow) var(--ease-out) both; }
.certificate-frame { display: grid; justify-items: center; gap: .5rem; padding: clamp(1.4rem, 4vw, 3.2rem) clamp(1rem, 4vw, 3.5rem); border: 2px solid #8c6343; outline: 1px solid rgba(140, 99, 67, .5); outline-offset: -9px; text-align: center; }
.certificate-top { display: grid; justify-items: center; gap: .4rem; }
.certificate-emblem, img.certificate-emblem, .certificate-emblem img { width: clamp(110px, 16vw, 190px); height: auto; }
.certificate-no { margin: 0; color: #7a5a3e; letter-spacing: .16em; }
.certificate-heading { margin: .8rem 0 .4rem; font: 400 clamp(1.5rem, 1rem + 2.4vw, 2.7rem)/1.1 var(--serif); letter-spacing: .12em; text-transform: uppercase; color: #5a3f2a; }
[dir="rtl"] .certificate-heading { font-family: var(--arabic); font-weight: 700; letter-spacing: 0; }
.certificate-line { margin: 0; color: #6b5a48; font: italic 400 clamp(1rem, .9rem + .4vw, 1.2rem)/1.4 var(--serif); }
[dir="rtl"] .certificate-line { font-family: var(--arabic); font-style: normal; }
.certificate-names { margin: .2rem 0 .4rem; padding-bottom: .4rem; border-bottom: 1px solid rgba(140, 99, 67, .5); font: italic 300 clamp(1.8rem, 1.2rem + 3vw, 3.4rem)/1.15 "Literata", "El Messiri", Georgia, serif; color: #2c261f; overflow-wrap: anywhere; }
.certificate-case { margin: .2rem 0; font: 400 clamp(1.4rem, 1rem + 1.8vw, 2.3rem)/1.2 var(--serif); color: #8c6343; }
[dir="rtl"] .certificate-case { font-family: var(--arabic); font-weight: 700; }
.certificate-time { margin: 0; font-size: 1.1rem; color: #4a3d30; }
.certificate-time strong { font-family: var(--mono); font-weight: 400; color: #2c261f; }
.certificate-foot { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: end; width: 100%; margin-top: clamp(1rem, 3vw, 2rem); }
.certificate-foot > div:not(.certificate-seal) { display: grid; gap: .2rem; }
.certificate-foot p { margin: 0; color: #2c261f; letter-spacing: .08em; }
.certificate-foot small { color: #7a6c5c; font-size: .75rem; }
.certificate-rule { display: block; height: 1px; background: #8c6343; margin-bottom: .4rem; }
.certificate-seal { display: grid; place-content: center; justify-items: center; width: 96px; height: 96px; border: 3px double var(--stamp); border-radius: 50%; color: var(--stamp); rotate: -12deg; opacity: .85; }
.certificate-seal span { font: 600 1.4rem/1 var(--serif); letter-spacing: .2em; margin-inline-start: .2em; }
.certificate-seal small { color: var(--stamp) !important; font: .58rem var(--mono) !important; letter-spacing: .12em; text-transform: uppercase; }
.certificate-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; justify-content: center; margin-top: 2rem; }
.page-certificate .fine-print { text-align: center; }

/* Leaderboard */
.board-wrap { display: grid; gap: clamp(2rem, 4vw, 3rem); max-width: 920px; }
.board-wrap .filter-chips { margin: 0; }
.board-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.board-row { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto auto; gap: 1rem 1.4rem; align-items: center; padding: 1.1rem .8rem; border-bottom: 1px solid var(--line); }
.board-rank { color: var(--ash); font-size: 1rem; }
.board-team { font: 300 1.3rem/1.3 "Literata", "El Messiri", Georgia, serif; color: var(--paper); overflow-wrap: anywhere; }
.board-time { font-family: var(--mono); color: var(--brass); }
.board-date { color: var(--ash); }
.board-row--gold { background: linear-gradient(90deg, rgba(217, 180, 140, .16), transparent 70%); }
.board-row--gold .board-rank, .board-row--silver .board-rank, .board-row--bronze .board-rank { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; color: var(--ink-deep); font-weight: 600; }
.board-row--gold .board-rank { background: #d9b48c; }
.board-row--silver .board-rank { background: #c2baae; }
.board-row--bronze .board-rank { background: #a8754f; }
[dir="rtl"] .board-row--gold { background: linear-gradient(270deg, rgba(217, 180, 140, .16), transparent 70%); }

/* Events */
.occasions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: var(--space-5); }
.occasion { padding: 1.6rem 1.5rem; border: 1px solid var(--line); background: var(--night); }
.occasion-num { color: var(--copper-light); }
.occasion h2 { margin: .6rem 0 .5rem; font: 300 1.6rem/1.2 var(--serif); }
[dir="rtl"] .occasion h2 { font-family: var(--arabic); font-weight: 600; }
.occasion p { margin: 0; color: var(--paper-dim); line-height: 1.7; }
.events-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }

/* Gift cards */
.giftcards-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.gift-visual { position: relative; display: grid; gap: 1rem; width: clamp(240px, 26vw, 340px); aspect-ratio: 1.6; padding: 1.3rem 1.4rem; overflow: hidden; border: 1px solid rgba(217, 180, 140, .6); background: linear-gradient(135deg, #2a2016, #141d26 60%); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); rotate: -4deg; }
.gift-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .12) 50%, transparent 65%); transform: translateX(-100%); animation: gift-shine 4.5s var(--ease-in-out) 1.2s infinite; }
@keyframes gift-shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.gift-visual-label { color: var(--brass); }
.gift-visual-amount { align-self: center; font: 300 clamp(2.4rem, 1.8rem + 2vw, 3.4rem)/1 var(--serif); color: var(--paper); }
.gift-visual-amount small { font-size: .4em; color: var(--paper-dim); }
.gift-visual-code { color: var(--paper-dim); letter-spacing: .2em; }
.giftcards-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.gift-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.gift-steps li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .8rem; align-items: baseline; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.gift-steps li > span { color: var(--copper-light); }
.gift-steps p { margin: 0; color: var(--paper-dim); line-height: 1.7; }
.gift-steps .gift-steps-note { display: block; border: 0; }
.amount-choices { margin: 0; padding: 0; border: 0; }
.gift-card-print { max-width: 760px; margin-inline: auto; padding: .7rem; background: #efe6d6; color: #2c261f; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .85); }
.gift-card-inner { display: grid; gap: .9rem; justify-items: center; padding: clamp(1.4rem, 4vw, 2.6rem); border: 2px solid #8c6343; text-align: center; }
.gift-card-top { display: grid; justify-items: center; gap: .3rem; }
.gift-card-top p { margin: 0; color: #7a5a3e; letter-spacing: .2em; }
.gift-card-emblem, img.gift-card-emblem, .gift-card-emblem img { width: clamp(100px, 15vw, 150px); height: auto; }
.gift-card-amount { margin: 0; font: 300 clamp(2.8rem, 2rem + 4vw, 4.6rem)/1 var(--serif); color: #5a3f2a; }
.gift-card-amount small { font-size: .35em; }
.gift-card-people { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.5rem; margin: 0; }
.gift-card-people div { display: grid; gap: .1rem; }
.gift-card-people dt { color: #7a6c5c; }
.gift-card-people dd { margin: 0; font: 400 1.3rem/1.3 "Literata", "El Messiri", Georgia, serif; }
.gift-card-message { margin: 0; max-width: 46ch; font: italic 400 1.1rem/1.6 "Literata", "El Messiri", Georgia, serif; color: #4a3d30; }
.gift-card-code { display: grid; gap: .3rem; margin: .4rem 0 0; padding: .8rem 1.4rem; border: 2px dashed #8c6343; }
.gift-card-code span { color: #7a6c5c; }
.gift-card-code strong { font: 600 1.6rem/1 var(--mono); letter-spacing: .14em; color: #2c261f; }
.gift-card-how { margin: 0; max-width: 52ch; font-size: .9rem; color: #5b5045; line-height: 1.6; }
.gift-card-used { color: var(--stamp); border-color: var(--stamp); }

@media (max-width: 900px) {
  .players-grid, .occasions { grid-template-columns: minmax(0, 1fr); }
  .events-grid, .giftcards-grid { grid-template-columns: minmax(0, 1fr); }
  .giftcards-head { grid-template-columns: minmax(0, 1fr); }
  .gift-visual { justify-self: center; rotate: -2deg; }
}
@media (max-width: 640px) {
  .notify-row, .field-row--3 { grid-template-columns: minmax(0, 1fr); }
  .time-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-row .field:nth-of-type(3) { grid-column: 1 / -1; }
  .board-row { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
  .board-date { display: none; }
  .certificate-foot { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .certificate-seal { order: -1; }
}

/* Printing the certificate or the gift card: only the document, on one page. */
@page pda-document { size: A4 landscape; margin: 10mm; }
@media print {
  html, body { background: #fff !important; }
  .site-header, .site-footer, .no-print, .note, .blink, [data-blink], .announcement, .skip-link { display: none !important; }
  main { padding: 0 !important; }
  .section { padding: 0 !important; }
  .certificate-frame, .gift-card-inner { padding: 8mm 14mm; gap: 2mm; }
  .certificate-emblem, img.certificate-emblem, .certificate-emblem img, .gift-card-emblem, img.gift-card-emblem, .gift-card-emblem img { width: 38mm; }
  .certificate, .gift-card-print { page: pda-document; box-shadow: none; max-width: none; animation: none; break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* 13 ── Footer ------------------------------------------------------------ */
.site-footer { position: relative; margin-top: 0; border-top: 1px solid var(--line); background: var(--ink-deep); }
.footer-mark { display: grid; justify-items: center; gap: 1rem; padding-block: var(--space-5) var(--space-4); text-align: center; }
.footer-mark img { width: min(380px, 72vw); filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .55)); }
.footer-tagline { margin: 0; color: var(--ash); font: italic 300 1.1rem var(--serif); }
[dir="rtl"] .footer-tagline { font-family: var(--arabic); font-style: normal; }
.footer-social { display: flex; justify-content: center; gap: .8rem; margin-top: .3rem; }
.footer-social a { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--paper-dim); transition: color var(--t-quick), border-color var(--t-quick), transform var(--t-base) var(--ease-out); }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--brass); border-color: var(--brass); transform: translateY(-2px); }
.footer-social .social-icon { width: 20px; height: 20px; }
.social-link { display: inline-flex; align-items: center; gap: .55rem; }
.social-link .social-icon { flex: none; color: var(--copper-light); }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; padding-block: var(--space-4); border-top: 1px solid var(--line); }
.footer-grid > div { display: grid; gap: .55rem; align-content: start; }
.footer-grid a { display: inline-flex; align-items: center; min-height: 32px; color: var(--paper-dim); width: fit-content; transition: color var(--t-quick); }
.footer-grid a:hover { color: var(--brass); }
.footer-grid .muted { margin: 0; font-size: .9rem; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.footer-strip { border-top: 1px solid var(--line); }
.footer-strip-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-block: 1.2rem; color: var(--ash); }
.classified-line { color: var(--stamp); }

/* 14 ── Motion language --------------------------------------------------- */
/* Redaction reveal: a black bar covers the line, then slides away once. */
.redact { position: relative; display: inline-block; }
.redact > span { display: inline-block; animation: redact-text var(--t-slow) var(--ease-out) calc(var(--enter-delay) + 260ms + var(--i, 0) * 140ms) both; }
.redact::after { content: ""; position: absolute; inset: .12em -.08em .08em; background: #05080b; transform-origin: right; animation: redact-bar 900ms var(--ease-in-out) calc(var(--enter-delay) + var(--i, 0) * 140ms) both; pointer-events: none; }
[dir="rtl"] .redact::after { transform-origin: left; }
@keyframes redact-bar { 0% { transform: scaleX(0); transform-origin: left; } 40% { transform: scaleX(1); transform-origin: left; } 41% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
[dir="rtl"] .redact::after { animation-name: redact-bar-rtl; }
@keyframes redact-bar-rtl { 0% { transform: scaleX(0); transform-origin: right; } 40% { transform: scaleX(1); transform-origin: right; } 41% { transform-origin: left; } 100% { transform: scaleX(0); transform-origin: left; } }
@keyframes redact-text { 0%, 45% { opacity: 0; } 100% { opacity: 1; } }
.rise { animation: rise var(--t-slow) var(--ease-out) calc(var(--enter-delay) + 420ms + var(--i, 0) * 110ms) both; }
.reveal-type { animation: rise var(--t-slow) var(--ease-out) var(--enter-delay) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Scroll reveals: only when JS is running, so content is never hidden without it. */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
/* Fail-safe: if site.js never runs, show everything after 2.5 s. */
html.js:not(.js-ready) [data-reveal] { animation: failsafe-reveal 1ms linear 2.5s forwards; }
@keyframes failsafe-reveal { to { opacity: 1; transform: none; } }
.js .custody li[data-reveal]:nth-child(2) { transition-delay: 90ms; } .js .custody li[data-reveal]:nth-child(3) { transition-delay: 180ms; } .js .custody li[data-reveal]:nth-child(4) { transition-delay: 270ms; }
@keyframes folder-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes exhibit-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes note-in { from { opacity: 0; transform: translateY(-10px) rotate(-1deg); } to { opacity: 1; transform: none; } }
@keyframes note-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 60% { transform: scale(.92); } 100% { transform: scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes lamp-on { 0% { opacity: .9; } 18% { opacity: .5; } 24% { opacity: .85; } 34% { opacity: .25; } 40% { opacity: .6; } 52%, 100% { opacity: 0; } }
@keyframes glow-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes bell-swing { 0%, 100% { rotate: calc(1deg * var(--degofrot)); } 50% { rotate: calc(-1deg * var(--degofrot)); } }
@keyframes lamp-radiate { from { rotate: 0deg; } to { rotate: 6deg; } }
@keyframes lamp-pull { 0% { transform: translateY(0); } 25% { transform: translateY(18px); } 50% { transform: translateY(-6px); } 75% { transform: translateY(4px); } 100% { transform: translateY(0); } }

/* 15 ── Responsive -------------------------------------------------------- */
@media (max-width: 1100px) {
  .custody, .custody--four { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
  .dossier-grid { grid-template-columns: minmax(0, 1fr); }
  .evidence { position: relative; top: 0; max-width: 640px; }
  .bag-grid, .checkout-grid, .order-grid { grid-template-columns: minmax(0, 1fr); }
  .ledger { position: relative; top: 0; }
}
@media (max-width: 900px) {
  :root { --header-h: 70px; }
  .brand-emblem { height: 54px; }
  .primary-nav, .tool-link, .bag-label, .header-tools > .lang-switch { display: none; }
  .menu-button { display: inline-grid; }
  .header-bar { grid-template-columns: 1fr auto; }
  .intro-grid, .dossier-spread, .split, .about-head, .contact-grid, .case-file-grid { grid-template-columns: minmax(0, 1fr); }
  .dossier-spread.is-flipped { grid-template-columns: minmax(0, 1fr); }
  .dossier-spread.is-flipped .poster { order: 0; }
  .poster, .dossier-spread .poster { max-width: 280px; }
  .poster::before { inset-inline-end: 0; }
  .hero-coords { display: none; }
  .record-card { transform: none; }
}
@media (max-width: 640px) {
  /* Phones: photograph (lamp and desk) on top, text below on dark ink. */
  .hero { min-height: 0; padding-top: calc(var(--header-h) + 38vh); padding-top: calc(var(--header-h) + 38svh); padding-bottom: 2rem; }
  .hero-media { bottom: auto; height: calc(var(--header-h) + 52vh); height: calc(var(--header-h) + 52svh); }
  .hero-photo { object-position: 74% 45%; transform: none !important; } /* no parallax on narrow screens: the fade stays put */
  .lamp-glow, .lamp-pool { transform: none !important; z-index: 0; }
  .hero-shade { z-index: 1; } /* the bottom fade covers the lamp glow too, so no edge shows under the headline */
  .hero-shade, [dir="rtl"] .hero-shade { background: linear-gradient(0deg, var(--ink) 0%, var(--ink) 4%, rgba(15, 22, 30, .6) 30%, rgba(15, 22, 30, 0) 60%, rgba(9, 14, 19, .45) 100%); }
  .hero-actions .btn { flex: 1 1 100%; }
  .desk-tabs ul { grid-template-columns: minmax(0, 1fr); }
  .desk-tabs li + li { border-inline-start: 0; border-top: 1px solid var(--line); }
  .custody, .custody--four { grid-template-columns: minmax(0, 1fr); }
  .section-head { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .buy-row { grid-template-columns: minmax(0, 1fr); }
  .stepper { width: 100%; grid-template-columns: 1fr 1.2fr 1fr; }
  .bag-line { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "thumb info" "step total" "remove remove"; }
  .bag-line-total { justify-self: end; }
  .bag-remove { justify-self: start; }
  .spec-sheet { grid-template-columns: minmax(0, 1fr); }
  .next-card { grid-template-columns: 100px 1fr; text-align: start; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .archive-count { margin: 0; }
  .note { inset-inline: var(--gutter); max-width: none; }
  .lens { display: none; }
}
@media (hover: none) {
  .evidence-frame { cursor: pointer; }
  .folder-poster { transform: translateY(-6%) rotate(0deg); }
}