:root {
  --bg: #0B0B0B;
  --paper: #EEE8DA;
  --card: #F7F2E6;
  --plate: #D9D2C2;
  --ink: #161412;
  --ink-2: #5B554C;
  --ink-3: #3A352E;
  --vhs: #0E0E0E;
  --vhs-text: #EFEBE0;
  --vhs-mute: #CFCABE;
  --red: #B0141C;
  --yellow: #F1C232;
  --serif: 'PT Serif', Georgia, serif;
  --sans: 'Oswald', 'Arial Narrow', sans-serif;
  --mono: 'PT Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); font-family: var(--serif); color: var(--ink); -webkit-text-size-adjust: 100%; }
img { display: block; }
a { color: var(--red); }
a:hover { color: #7E0E14; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }

.page { max-width: 480px; margin: 0 auto; background: var(--paper); overflow: hidden; }

.mono { font-family: var(--mono); }
.red { color: var(--red); }
.stack-6, .stack-8, .stack-10 { display: flex; flex-direction: column; }
.stack-6 { gap: 6px; }
.stack-8 { gap: 8px; }
.stack-10 { gap: 10px; }

.btn { cursor: pointer; }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* ---------- typography ---------- */
.kicker { font-family: var(--mono); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--red); }
.h2 { font-family: var(--sans); font-weight: 700; font-size: 40px; line-height: 1; text-transform: uppercase; }
.h2--huge { font-size: 72px; line-height: 0.9; }
.h3 { font-family: var(--sans); font-weight: 700; font-size: 22px; text-transform: uppercase; }
.h3--big { font-size: 28px; line-height: 1.05; }
.sub { font-size: 16px; line-height: 1.45; color: var(--ink-3); }
.lead { font-size: 17px; line-height: 1.5; }

/* ---------- sections ---------- */
.sec { padding: 32px 16px 36px; display: flex; flex-direction: column; gap: 18px; border-bottom: 3px double var(--ink); }
.sec--summary { padding-top: 28px; }
.sec--last { border-bottom: 0; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--vhs); color: var(--vhs-text); padding: 20px 16px 32px; display: flex; flex-direction: column; gap: 20px; }
.hero__bar { display: flex; justify-content: space-between; align-items: center; font-size: 14px; letter-spacing: 1px; }
.hero__rec { display: flex; align-items: center; gap: 6px; }
.rec { width: 10px; height: 10px; border-radius: 50%; background: #E0242C; display: inline-block; animation: recblink 1.2s steps(1) infinite; }
.hero__title { font-family: var(--sans); font-weight: 700; font-size: 60px; line-height: 0.95; text-transform: uppercase; letter-spacing: -0.5px; overflow-wrap: anywhere; }
.hero__quote { font-style: italic; font-size: 20px; line-height: 1.35; }
.hero__rewind { text-align: center; font-size: 13px; letter-spacing: 2px; color: var(--vhs-mute); }
.hero__tc { position: absolute; left: 10px; top: 10px; font-size: 13px; color: var(--vhs-text); text-shadow: 0 1px 2px #000; pointer-events: none; }
.scan { pointer-events: none; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }

/* ---------- before / after ---------- */
@property --pos { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.ba { --pos: 50%; position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #2A2A2A; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.ba:focus-within { outline: 3px solid var(--yellow); outline-offset: 2px; }
.ba img, .ba__secret { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ba__before, .ba__secret { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__before { filter: sepia(0.25); }
.ba__before--hero { filter: sepia(0.25) contrast(1.05); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--yellow); pointer-events: none; }
.ba__knob { position: absolute; top: 50%; left: var(--pos); width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: var(--yellow); color: var(--vhs); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; pointer-events: none; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }

.ba--hero { background: #222; border: 2px solid var(--vhs-text); }
.ba--hero .ba__line { width: 3px; }
.ba--hero .ba__knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; font-size: 16px; }
.ba__tag { position: absolute; bottom: 10px; font-size: 12px; padding: 4px 6px; pointer-events: none; }
.ba__tag--before { left: 10px; background: var(--vhs); color: var(--vhs-text); }
.ba__tag--after { right: 10px; background: var(--yellow); color: var(--vhs); }

.ba__secret { background: var(--plate); display: flex; align-items: center; justify-content: center; }
.ba__secret span { transform: rotate(-12deg); border: 3px solid var(--red); color: var(--red); font-family: var(--sans); font-weight: 700; font-size: 16px; line-height: 1.1; padding: 6px 8px; text-align: center; text-transform: uppercase; }

/* ---------- cassette button ---------- */
.tape { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 96px; padding: 12px; background: #1A1A1A; border: 2px solid var(--yellow); border-radius: 4px; color: var(--vhs-text); text-align: left; font: inherit; }
.tape__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tape__title { font-family: var(--sans); font-weight: 700; font-size: 20px; text-transform: uppercase; color: var(--yellow); }
.tape__track { font-size: 12px; color: var(--vhs-mute); }
.cassette { position: relative; flex: 0 0 auto; width: 104px; height: 66px; background: #2A2A2A; border: 2px solid #555; border-radius: 6px; display: block; }
.cassette__label { position: absolute; left: 6px; right: 6px; top: 5px; height: 14px; background: var(--yellow); color: var(--vhs); font-size: 9px; line-height: 14px; text-align: center; display: block; }
.cassette__window { position: absolute; left: 14px; right: 14px; top: 26px; height: 28px; background: #111; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.reel { width: 20px; height: 20px; border-radius: 50%; border: 3px dashed var(--vhs-text); display: block; animation: reelspin 1.6s linear infinite paused; }
.is-playing .reel { animation-play-state: running; }

/* floating mini-cassette: right edge of the 480px column (or viewport on phones) */
.fab { position: fixed; z-index: 10; bottom: 16px; right: max(16px, calc(50vw - 240px + 16px)); width: 64px; height: 52px; padding: 0; background: #1A1A1A; border: 2px solid var(--yellow); border-radius: 6px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.fab[hidden] { display: none; }
.cassette--mini { width: 48px; height: 32px; border-width: 1px; border-radius: 4px; }
.cassette--mini .cassette__window { left: 5px; right: 5px; top: 8px; height: 14px; padding: 0 2px; }
.cassette--mini .reel { width: 11px; height: 11px; border-width: 2px; }

/* ---------- summary ---------- */
.masthead { display: flex; justify-content: space-between; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 6px 0; font-size: 12px; text-transform: uppercase; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
.facts > div { background: var(--paper); padding: 12px; }
.facts dt { font-size: 12px; text-transform: uppercase; color: var(--ink-2); }
.facts dd { margin-top: 4px; font-family: var(--sans); font-size: 20px; font-weight: 500; overflow-wrap: anywhere; }

.cta { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 18px; text-decoration: none; font-family: var(--sans); font-weight: 700; font-size: 20px; text-transform: uppercase; }
.cta--dark, .cta--dark:hover { background: var(--ink); color: var(--paper); }
.cta--outline, .cta--outline:hover { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.cta--red, .cta--red:hover { background: var(--red); color: #fff; }

/* ---------- crew ---------- */
.crew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wanted { background: var(--card); border: 1px solid var(--ink); display: flex; flex-direction: column; }
.wanted__head { background: var(--ink); color: var(--paper); font-size: 11px; letter-spacing: 1px; text-align: center; padding: 4px 0; }
.wanted__body { padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.wanted__name { font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: 1.05; text-transform: uppercase; }
.wanted__label { font-size: 11px; color: var(--ink-2); text-transform: uppercase; }
.wanted__text { font-size: 14px; line-height: 1.35; min-height: 2.7em; overflow-wrap: anywhere; } /* 2 строки — карточки одной высоты */

/* ---------- place ---------- */
.pager { background: #2B2B2B; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.pager__head { display: flex; justify-content: space-between; font-size: 11px; color: var(--vhs-mute); }
.pager__screen { background: #A9B88A; color: #1E2414; font-size: 15px; line-height: 1.4; padding: 12px; border-radius: 4px; text-transform: uppercase; }
.placeholder { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--plate); border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 13px; color: var(--ink-2); }
.placeholder img { width: 100%; height: 100%; object-fit: cover; }

.rows { display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.rows > div { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ink); }
.rows dt { flex: 0 0 104px; font-size: 12px; text-transform: uppercase; color: var(--ink-2); padding-top: 3px; }
.rows dd { font-size: 17px; min-width: 0; overflow-wrap: anywhere; }
.rows--small > div { padding: 10px 0; }
.rows--small dt { flex-basis: 96px; padding-top: 2px; }
.rows--small dd { font-size: 15px; }

.checklist { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 17px; }

/* ---------- wishlist ---------- */
.evidence { background: var(--card); border: 1px solid var(--ink); display: flex; flex-direction: column; }
.evidence__head { display: flex; justify-content: space-between; background: var(--ink); color: var(--paper); font-size: 12px; padding: 6px 10px; }
.evidence__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.evidence__desc { font-size: 16px; line-height: 1.5; }
.sky { background: var(--plate); padding: 28px 16px; display: flex; align-items: center; justify-content: center; transition: background-color .6s ease; }
.sky svg { max-width: 300px; display: block; }
.lens { fill: rgba(220, 226, 230, 0.35); transition: fill .6s ease; }
[data-sun="true"] .sky { background: var(--yellow); }
[data-sun="true"] .lens { fill: #1E1E1E; }

.toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.toggle button { min-height: 48px; border: 0; background: transparent; color: var(--ink); font-size: 13px; text-transform: uppercase; }
.toggle button:first-child { border-right: 1px solid var(--ink); }
.toggle [data-mode="indoor"][aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.toggle [data-mode="sun"][aria-pressed="true"] { background: var(--ink); color: var(--yellow); }

/* ---------- footer ---------- */
.footer { background: var(--vhs); color: var(--vhs-text); padding: 32px 16px 40px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.footer__title { font-family: var(--sans); font-weight: 700; font-size: 32px; text-transform: uppercase; line-height: 1; }
.footer__stop { margin-top: 8px; font-size: 13px; letter-spacing: 2px; }

/* ---------- motion ---------- */
@keyframes reelspin { to { transform: rotate(360deg); } }
@keyframes recblink { 50% { opacity: 0; } }
@keyframes ba-hint { 0%, 100% { --pos: 50%; } 30% { --pos: 38%; } 70% { --pos: 62%; } }

.ba.hint { animation: ba-hint 1.4s ease-in-out 1; }