/* =========================================================
   RЖW — Брутальная типографика. Общая система.
   Шрифт: Bricolage Grotesque (display) + JetBrains Mono (labels)
   ========================================================= */
:root{
  --bg:#0a0a0a;
  --ink:#f2f0ec;
  --red:#e5352b;
  --line: rgba(242,240,236,0.22);
  --muted: rgba(242,240,236,0.6);
  --muted2: rgba(242,240,236,0.45);
  --display:"Bricolage Grotesque", sans-serif;
  --mono:"JetBrains Mono", monospace;
  --edge: 24px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--display); font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--red); color:#fff; }

/* ---------- HEADER / NAV ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:stretch; justify-content:space-between;
  background:var(--bg); border-bottom:2px solid var(--ink);
}
.site-head .brand{
  display:flex; align-items:center; padding:16px 24px;
  border-right:2px solid var(--ink); font-family:var(--display);
  font-weight:800; font-size:26px; letter-spacing:0.01em;
}
.site-head .brand .zh{ color:var(--red); }
.site-head nav{ display:flex; }
.site-head nav a{
  display:flex; align-items:center; padding:18px 22px;
  border-left:1px solid var(--line);
  font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted); transition:color .2s ease, background .2s ease;
}
.site-head nav a:hover{ color:var(--ink); }
.site-head nav a.active{ color:var(--ink); }
.site-head nav a.active::after{
  content:""; position:absolute; }
.site-head nav a.book{ background:var(--red); color:#fff; font-weight:600; }
.site-head nav a.book:hover{ background:#ff463b; }
/* active marker dot */
.site-head nav a.active{ position:relative; }
.site-head nav a.active:not(.book)::before{
  content:""; position:absolute; left:22px; bottom:13px; width:7px; height:7px; background:var(--red);
}
.site-head nav a.active:not(.book){ padding-bottom:18px; }

/* burger (mobile) */
.burger{ display:none; align-items:center; gap:8px; padding:0 20px; border-left:1px solid var(--line);
  background:none; border-top:none; border-right:none; border-bottom:none; color:var(--ink); cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; }
.burger .bars{ width:22px; height:14px; position:relative; }
.burger .bars span{ position:absolute; left:0; width:100%; height:2px; background:var(--ink); transition:.3s; }
.burger .bars span:nth-child(1){ top:0; }
.burger .bars span:nth-child(2){ top:6px; }
.burger .bars span:nth-child(3){ top:12px; }
body.menu-open .burger .bars span:nth-child(1){ top:6px; transform:rotate(45deg); }
body.menu-open .burger .bars span:nth-child(2){ opacity:0; }
body.menu-open .burger .bars span:nth-child(3){ top:6px; transform:rotate(-45deg); }

/* mobile drawer */
.mobile-nav{ display:none; }

/* ---------- LAYOUT ---------- */
.wrap{ padding:0 var(--edge); }
.eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--red); }
.lbl{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted2); }

/* page top meta strip */
.page-meta{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px var(--edge); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); }

/* big display headings */
.display-xl{ font-family:var(--display); font-weight:800; line-height:0.84; letter-spacing:-0.03em;
  text-transform:uppercase; margin:0; font-size:clamp(56px, 11vw, 150px); }
.display-l{ font-family:var(--display); font-weight:800; line-height:0.88; letter-spacing:-0.025em;
  text-transform:uppercase; margin:0; font-size:clamp(44px, 8vw, 104px); }
.red{ color:var(--red); }
.out{ color:transparent; -webkit-text-stroke:2px var(--ink); }

/* red marquee strip */
.strip{ background:var(--red); color:#fff; overflow:hidden; white-space:nowrap;
  border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:14px 0; }
.strip .track{ display:inline-block; font-family:var(--display); font-weight:800; font-size:clamp(20px,2.4vw,28px);
  letter-spacing:0.02em; text-transform:uppercase; animation:marquee 26s linear infinite; }
.strip .track span{ padding:0 18px; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .strip .track{ animation:none; } }

/* buttons */
.btn{ display:inline-flex; align-items:center; gap:10px; background:var(--red); color:#fff;
  font-family:var(--mono); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; font-weight:600;
  padding:16px 24px; transition:background .2s ease, transform .2s ease; cursor:pointer; border:none; }
.btn:hover{ background:#ff463b; transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border:2px solid var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--bg); }

/* video placeholder */
.vframe{ position:relative; width:100%; overflow:hidden; background:linear-gradient(135deg,#1a1a1d 0%,#0e0e10 55%,#161618 100%); }
.vframe::before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px); }
.vframe::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 70% 20%, rgba(229,53,43,0.14), transparent 60%); }
.vframe .play{ position:absolute; inset:0; margin:auto; width:58px; height:58px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.5); background:rgba(0,0,0,0.32); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:2; transition:transform .25s ease, background .25s ease; }
.vframe:hover .play{ transform:scale(1.12); background:var(--red); border-color:var(--red); }
.vframe .play i{ width:0; height:0; margin-left:4px; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:15px solid #fff; }
.vframe .tag{ position:absolute; top:14px; left:14px; z-index:2; font-family:var(--mono);
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.62); }
.vframe .cap{ position:absolute; bottom:14px; left:14px; right:14px; z-index:2; display:flex;
  justify-content:space-between; align-items:flex-end; }
.vframe .cap b{ font-family:var(--display); font-weight:700; font-size:18px; color:#fff; }
.vframe .cap em{ width:26px; height:2px; background:var(--red); display:block; margin-bottom:8px; }

/* ---------- FOOTER ---------- */
.site-foot{ padding:56px var(--edge) 40px; border-top:2px solid var(--ink); }
.site-foot .big{ font-family:var(--display); font-weight:800; font-size:clamp(48px,9vw,104px); line-height:0.86;
  letter-spacing:-0.03em; text-transform:uppercase; margin:0 0 36px; }
.contact-grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--ink); }
.contact-grid .c{ padding:22px 0 22px 18px; border-left:1px solid var(--line); }
.contact-grid .c:first-child{ border-left:none; padding-left:0; }
.contact-grid .c .k{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted2); margin-bottom:10px; }
.contact-grid .c .v{ font-size:17px; font-weight:500; }
.contact-grid .c a.v:hover{ color:var(--red); }
.foot-base{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:34px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted2); }

/* ---------- PAGE TRANSITION (cinematic wipe) ---------- */
#wipe{ position:fixed; inset:0; z-index:9999; pointer-events:none; overflow:hidden; }
#wipe .panel{ position:absolute; top:0; bottom:0; width:21%; background:var(--red); transform:scaleY(0); transform-origin:bottom; }
#wipe .panel:nth-child(1){ left:0; }
#wipe .panel:nth-child(2){ left:20%; }
#wipe .panel:nth-child(3){ left:40%; }
#wipe .panel:nth-child(4){ left:60%; }
#wipe .panel:nth-child(5){ left:80%; }
#wipe.cover .panel{ transform:scaleY(1); transform-origin:bottom; transition:transform .5s cubic-bezier(.76,0,.24,1); }
#wipe.cover .panel:nth-child(1){ transition-delay:0s; }
#wipe.cover .panel:nth-child(2){ transition-delay:.06s; }
#wipe.cover .panel:nth-child(3){ transition-delay:.12s; }
#wipe.cover .panel:nth-child(4){ transition-delay:.18s; }
#wipe.cover .panel:nth-child(5){ transition-delay:.24s; }
#wipe.reveal .panel{ transform:scaleY(1); transform-origin:top; transition:transform .5s cubic-bezier(.76,0,.24,1); }
#wipe.reveal.go .panel{ transform:scaleY(0); }
#wipe.reveal.go .panel:nth-child(1){ transition-delay:.24s; }
#wipe.reveal.go .panel:nth-child(2){ transition-delay:.18s; }
#wipe.reveal.go .panel:nth-child(3){ transition-delay:.12s; }
#wipe.reveal.go .panel:nth-child(4){ transition-delay:.06s; }
#wipe.reveal.go .panel:nth-child(5){ transition-delay:0s; }
#wipe .mark{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:9vw; color:#0a0a0a; opacity:0; }
#wipe.cover .mark{ opacity:1; transition:opacity .3s ease .25s; }

/* page content fade-up on load */
.page{ }
.reveal-up{ opacity:0; transform:translateY(26px); }
body.loaded .reveal-up{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
body.loaded .reveal-up.d1{ transition-delay:.05s; }
body.loaded .reveal-up.d2{ transition-delay:.12s; }
body.loaded .reveal-up.d3{ transition-delay:.2s; }
body.loaded .reveal-up.d4{ transition-delay:.28s; }
body.loaded .reveal-up.d5{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  .reveal-up{ opacity:1 !important; transform:none !important; }
  #wipe{ display:none !important; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  :root{ --edge:18px; }
  .site-head nav{ display:none; }
  .burger{ display:flex; }
  .site-head .brand{ font-size:22px; padding:14px 18px; }
  .mobile-nav{ display:block; position:fixed; inset:0; top:0; z-index:48; background:var(--bg);
    transform:translateY(-100%); transition:transform .5s cubic-bezier(.76,0,.24,1); padding-top:64px; }
  body.menu-open .mobile-nav{ transform:translateY(0); }
  .mobile-nav a{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    padding:24px var(--edge); border-bottom:1px solid var(--line); }
  .mobile-nav a .t{ font-family:var(--display); font-weight:800; font-size:34px; text-transform:uppercase; letter-spacing:-0.02em; }
  .mobile-nav a .n{ font-family:var(--mono); font-size:12px; color:var(--red); }
  .mobile-nav a.book .t{ color:var(--red); }
  .contact-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-grid .c:nth-child(3){ border-left:none; padding-left:0; }
  .contact-grid .c{ border-top:1px solid var(--line); }
  .contact-grid .c:nth-child(1), .contact-grid .c:nth-child(2){ border-top:none; }
}
@media (max-width: 560px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-grid .c{ border-left:none; padding-left:0; border-top:1px solid var(--line); }
  .contact-grid .c:first-child{ border-top:none; }
}