/* ============================================================
   «Закулисье реальности» — интерфейс наблюдения института Async
   Палитра: void #0a0a0b · concrete #121211 · bone #ece7d6
            ash #96938a · amber #d8c465 (жёлтый Закулисья) · amber-deep #a08a34
   Шрифты: Space Grotesk (дисплей) · Inter (текст) · JetBrains Mono (данные)
   Правила: без обводок (border:0), без движения при наведении.
   ============================================================ */

:root{
  --void:#0a0a0b; --concrete:#111110; --concrete-2:#17160f; --raised:#1c1b13;
  --bone:#ece7d6; --ash:#9a978c; --moth:#66645a;
  --amber:#d8c465; --amber-soft:#e7d98d; --amber-deep:#a08a34;
  --glow: radial-gradient(60% 55% at 50% 0%, rgba(216,196,101,.14), rgba(216,196,101,0) 70%);
  --tile: repeating-linear-gradient(0deg, rgba(236,231,214,.035) 0 1px, transparent 1px 46px),
          repeating-linear-gradient(90deg, rgba(236,231,214,.035) 0 1px, transparent 1px 46px);
  --f-disp:'Space Grotesk',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --wrap:1180px;
}

*{ margin:0; padding:0; box-sizing:border-box; border:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--f-body); background:var(--void); color:var(--bone);
  line-height:1.6; font-size:16px; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
svg{ display:block; }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px; }

/* ---------- служебные ---------- */
.mono{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); }
.mono-dim{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--moth); }
.section{ padding:74px 0; position:relative; }
.section-alt{ background:var(--concrete); }
.eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--f-mono);
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); margin-bottom:16px; }
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--amber-deep); }
.h-sec{ font-family:var(--f-disp); font-weight:700; font-size:clamp(1.7rem,4vw,2.6rem);
  letter-spacing:-.02em; line-height:1.05; color:var(--bone); }
.lead{ color:var(--ash); max-width:640px; margin-top:14px; font-size:1.02rem; }

/* ---------- шапка ---------- */
.top{ position:sticky; top:0; z-index:40; background:rgba(10,10,11,.82);
  backdrop-filter:blur(12px); }
.top-in{ height:62px; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-dot{ width:9px; height:9px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 4px rgba(216,196,101,.14); }
.brand-name{ font-family:var(--f-disp); font-weight:600; letter-spacing:.02em; font-size:1.02rem; }
.brand-sub{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.24em; color:var(--moth);
  text-transform:uppercase; margin-top:2px; }
.nav{ display:flex; align-items:center; gap:26px; }
.nav a{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ash); }
.nav a:hover{ color:var(--amber); }
.burger{ display:none; width:40px; height:40px; background:var(--concrete-2); color:var(--bone);
  border-radius:3px; align-items:center; justify-content:center; cursor:pointer; }

/* ---------- герой ---------- */
.hero{ position:relative; padding:64px 0 44px; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; background:var(--tile); opacity:.6; pointer-events:none;
  mask-image:linear-gradient(180deg,#000 0%,transparent 78%); }
.hero::after{ content:""; position:absolute; inset:0; background:var(--glow); pointer-events:none; }
.hero-in{ position:relative; display:grid; grid-template-columns:1.35fr .95fr; gap:46px; align-items:center; }
.hero-coord{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.chip{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ash); background:var(--concrete-2); padding:7px 11px; border-radius:3px; }
.chip-amber{ color:var(--void); background:var(--amber); font-weight:600; }
.hero-title{ font-family:var(--f-disp); font-weight:700; font-size:clamp(2.6rem,7vw,5rem);
  line-height:.96; letter-spacing:-.03em; }
.hero-title .orig{ display:block; font-family:var(--f-mono); font-weight:400;
  font-size:clamp(.8rem,1.6vw,1rem); letter-spacing:.4em; color:var(--amber); margin-top:16px;
  text-transform:uppercase; }
.hero-logline{ color:var(--ash); font-size:1.08rem; margin:22px 0 30px; max-width:520px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:.74rem;
  letter-spacing:.14em; text-transform:uppercase; padding:15px 24px; border-radius:3px; cursor:pointer; }
.btn-amber{ background:var(--amber); color:var(--void); font-weight:700; }
.btn-amber:hover{ background:var(--amber-soft); }
.btn-ghost{ background:var(--concrete-2); color:var(--bone); }
.btn-ghost:hover{ background:var(--raised); color:var(--amber); }

/* постер-панель героя */
.hero-poster{ position:relative; border-radius:5px; overflow:hidden; background:var(--concrete);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9), inset 0 0 0 1px rgba(216,196,101,.08); }
.hero-poster img{ width:100%; aspect-ratio:2/3; object-fit:cover; }
.hero-poster .tag{ position:absolute; left:0; bottom:0; right:0; padding:14px 16px;
  background:linear-gradient(0deg, rgba(10,10,11,.92), transparent);
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash); }

/* заглушка изображения */
.ph{ position:relative; display:block; width:100%; background:var(--concrete-2); border-radius:4px; overflow:hidden; }
.ph-svg{ position:absolute; inset:0; width:100%; height:100%; }
.ph-ico{ position:absolute; inset:0; margin:auto; width:fit-content; height:fit-content;
  font-size:1.6rem; color:var(--amber); opacity:.5; }

/* ---------- монитор-плеер ---------- */
.monitor{ background:var(--concrete); border-radius:6px; padding:16px; box-shadow:inset 0 0 0 1px rgba(236,231,214,.05); }
.monitor-bar{ display:flex; align-items:center; justify-content:space-between; padding:4px 6px 14px; }
.monitor-bar .feed{ display:flex; align-items:center; gap:9px; font-family:var(--f-mono);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash); }
.rec{ width:8px; height:8px; border-radius:50%; background:#e0563f; }
.player{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:4px; overflow:hidden; }
.player iframe{ position:absolute; inset:0; width:100%; height:100%; }
.meta-row{ display:flex; flex-wrap:wrap; gap:0; margin-top:16px; }
.meta-row .m{ flex:1 1 130px; padding:14px 16px; background:var(--concrete-2); border-radius:3px; margin:3px; }
.meta-row .m b{ display:block; font-family:var(--f-disp); font-size:1.24rem; color:var(--bone); }
.meta-row .m span{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--moth); }

/* ---------- каналы озвучек ---------- */
.channels{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:12px; }
.channel{ display:block; background:var(--concrete-2); border-radius:5px; padding:20px; }
.channel:hover{ background:var(--raised); }
.channel .idx{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; color:var(--amber-deep); }
.channel h3{ font-family:var(--f-disp); font-weight:600; font-size:1.16rem; margin:8px 0 4px; }
.channel .kind{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--moth); }
.channel p{ color:var(--ash); font-size:.86rem; margin-top:12px; }
.channel .go{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--f-mono);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }

/* ---------- актёры ---------- */
.cast{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:14px; }
.actor{ display:block; }
.actor .photo{ position:relative; border-radius:5px; overflow:hidden; background:var(--concrete-2); }
.actor .photo img{ width:100%; aspect-ratio:2/3; object-fit:cover; }
.actor .nm{ font-family:var(--f-disp); font-weight:600; font-size:.98rem; margin-top:11px; }
.actor .ch{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--amber-deep); margin-top:3px; }
.actor:hover .nm{ color:var(--amber); }

/* ---------- описание + консоль фактов ---------- */
.about-grid{ display:grid; grid-template-columns:1.5fr .9fr; gap:44px; align-items:start; }
.prose p{ color:#cfccc2; margin-bottom:16px; }
.pc{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:26px; }
.pc-col{ background:var(--concrete); border-radius:5px; padding:20px; }
.pc-col h4{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); margin-bottom:14px; }
.pc-col .row{ display:flex; gap:10px; margin-bottom:10px; color:var(--ash); font-size:.9rem; }
.pc-col .row i{ color:var(--amber-deep); margin-top:4px; font-size:.7rem; }
.facts{ background:var(--concrete); border-radius:6px; padding:8px; }
.facts .f{ display:flex; justify-content:space-between; gap:14px; padding:13px 14px; }
.facts .f + .f{ box-shadow:inset 0 1px 0 rgba(236,231,214,.05); }
.facts .k{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--moth); }
.facts .v{ font-size:.9rem; color:var(--bone); text-align:right; }
.facts .v.amber{ color:var(--amber); font-family:var(--f-mono); }

/* ---------- кадры ---------- */
.stills{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.stills figure{ border-radius:5px; overflow:hidden; background:var(--concrete-2); }
.stills img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

/* ---------- FAQ / журнал ---------- */
.log{ display:grid; gap:8px; }
.log details{ background:var(--concrete); border-radius:5px; overflow:hidden; }
.log summary{ list-style:none; cursor:pointer; padding:18px 20px; display:flex; justify-content:space-between;
  gap:16px; align-items:center; font-family:var(--f-disp); font-weight:500; font-size:1.04rem; }
.log summary::-webkit-details-marker{ display:none; }
.log summary .sign{ font-family:var(--f-mono); color:var(--amber); font-size:1.1rem; }
.log details[open] summary .sign{ color:var(--amber-soft); }
.log .ans{ padding:0 20px 20px; color:var(--ash); }

/* ---------- крошки ---------- */
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:9px; padding:22px 0; }
.crumbs a{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ash); }
.crumbs a:hover{ color:var(--amber); }
.crumbs span{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone); }
.crumb-sep{ color:var(--moth); font-size:.6rem; }

/* ---------- подвал ---------- */
.foot{ background:var(--concrete); padding:56px 0 34px; margin-top:20px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:34px; }
.foot p{ color:var(--ash); font-size:.9rem; margin-top:14px; max-width:420px; }
.foot h5{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--moth); margin-bottom:14px; }
.foot ul{ list-style:none; display:grid; gap:9px; }
.foot ul a{ color:var(--ash); font-size:.9rem; }
.foot ul a:hover{ color:var(--amber); }
.foot-btm{ margin-top:40px; padding-top:22px; box-shadow:inset 0 1px 0 rgba(236,231,214,.06);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; }
.foot-btm small{ color:var(--moth); font-size:.78rem; }

/* ---------- заголовок страницы актёра ---------- */
.person{ display:grid; grid-template-columns:.5fr 1.5fr; gap:38px; align-items:start; padding-top:8px; }
.person .photo{ border-radius:6px; overflow:hidden; background:var(--concrete-2); }
.person .photo img{ width:100%; aspect-ratio:2/3; object-fit:cover; }
.person h1{ font-family:var(--f-disp); font-weight:700; font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:-.02em; }
.person .role{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); margin-top:10px; }
.person .bio p{ color:#cfccc2; margin-bottom:14px; margin-top:14px; }

/* ---------- 404 ---------- */
.void-404{ min-height:64vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; }
.void-404 .code{ font-family:var(--f-disp); font-weight:700; font-size:clamp(5rem,20vw,12rem); line-height:.9;
  color:var(--bone); letter-spacing:-.04em; }
.void-404 .code span{ color:var(--amber); }

/* ---------- адаптив ---------- */
@media (max-width:900px){
  .hero-in{ grid-template-columns:1fr; gap:30px; }
  .hero-poster{ max-width:300px; }
  .about-grid{ grid-template-columns:1fr; gap:28px; }
  .person{ grid-template-columns:1fr; }
  .person .photo{ max-width:240px; }
  .nav{ display:none; }
  .burger{ display:flex; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .section{ padding:52px 0; }
  .pc{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto; } }