/* Spark the Game landing. Rice paper, ink mountains, gold line frames. */
:root{
  color-scheme: light;
  --paper:#F7EFDF; --paper-2:#F0E4CB; --paper-3:#FCF7EE;
  --ink:#1E2430; --ink-soft:#463F3A; --muted:#6E6252;
  --gold:#B08A3E; --gold-hi:#D9B866; --gold-deep:#7E5F22; --gold-line:rgba(176,138,62,.5);
  --chi:#146B78; --chi-deep:#123F5E; --jing:#9E1B2A; --jing-deep:#6E0F1B; --shen:#5A3A8A; --shen-deep:#3A2060;
  --f-display:'Playfair Display','Prata',Georgia,serif;
  --f-sc:'Playfair Display SC','Playfair Display',Georgia,serif;
  --f-body:'Literata','Noto Serif',Georgia,serif;
  --f-han:'Noto Serif TC','Songti TC','SimSun','Noto Serif CJK TC',serif;
  --gut:16px; --max:1180px; --top-h:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --knot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='12.5' fill='%23FBF5EA' stroke='%23B08A3E' stroke-width='1.4'/%3E%3Ccircle cx='20' cy='20' r='9' fill='none' stroke='%23B08A3E' stroke-width='1'/%3E%3Cpath d='M14.5 14.5h11v11h-11z M17.5 14.5v11 M22.5 14.5v11 M14.5 17.5h11 M14.5 22.5h11' fill='none' stroke='%23B08A3E' stroke-width='.9'/%3E%3Cpath d='M20 16.8l3.2 3.2-3.2 3.2-3.2-3.2z' fill='%239E1B2A'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .22 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (min-width:720px){ :root{ --gut:32px; --top-h:80px; } }
@media (min-width:1200px){ :root{ --gut:48px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--top-h) + 12px); }
body{
  margin:0; background:var(--paper) var(--grain); color:var(--ink);
  font:400 1.0625rem/1.65 var(--f-body); font-optical-sizing:auto;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@media (min-width:720px){ body{ font-size:1.125rem; } }
img{ max-width:100%; display:block; }
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; }
button,input,select{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--jing); outline-offset:3px; border-radius:6px; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* Language visibility: one attribute drives the whole page */
html[lang="en"] [data-l="ru"], html[lang="ru"] [data-l="en"]{ display:none !important; }

.skip{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:8px; }
.skip:focus{ top:12px; }

.wrap{ max-width:calc(var(--max) + 2*var(--gut)); margin-inline:auto; padding-inline:var(--gut); }
.sec{ position:relative; padding-block:clamp(80px, 12vw, 168px); }

.eyebrow{ font:600 .78rem/1.3 var(--f-body); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--gold); }
h2{ font:600 clamp(2rem, 4.4vw, 3.5rem)/1.08 var(--f-display); letter-spacing:-.01em; text-wrap:balance; color:var(--ink); }
.lede{ font-size:clamp(1.08rem, 1.6vw, 1.3rem); color:var(--ink-soft); max-width:36em; margin-top:18px; text-wrap:pretty; }
.prose p + p{ margin-top:1em; }
.prose p{ text-wrap:pretty; }
.sec-head{ max-width:760px; margin-bottom:clamp(40px, 6vw, 72px); }

.dia{ display:inline-block; width:7px; height:7px; background:var(--jing); transform:rotate(45deg); margin-inline:12px; vertical-align:middle; flex:none; }

/* ---------- gold frame with corner knots (echoes the cards) ---------- */
.frame{ position:relative; border:1px solid var(--gold); }
.frame::before{ content:""; position:absolute; inset:6px; border:1px solid var(--gold-line); pointer-events:none; }
.frame::after{
  content:""; position:absolute; inset:-15px; pointer-events:none;
  background:var(--knot) left top/30px 30px no-repeat, var(--knot) right top/30px 30px no-repeat,
             var(--knot) left bottom/30px 30px no-repeat, var(--knot) right bottom/30px 30px no-repeat;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:0 30px; border:0; border-radius:999px; cursor:pointer;
  font:600 1.06rem/1 var(--f-body); letter-spacing:.01em; text-decoration:none;
  background:linear-gradient(180deg,#B0283A,var(--jing) 55%,#8A1624); color:#FCF3E2;
  box-shadow: inset 0 1px 0 rgba(255,220,190,.35), 0 0 0 1px var(--gold), 0 0 0 4px var(--paper-3), 0 0 0 5px var(--gold-line), 0 16px 30px -14px rgba(110,15,27,.7);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.btn:active{ transform:translateY(0); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 8px;
  font-weight:500; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--gold-line);
}
.btn-ghost svg{ width:20px; height:20px; color:var(--gold-deep); transition:transform .3s var(--ease); }
.btn-ghost:hover svg{ transform:translateY(3px); }

/* ---------- header + language toggle ---------- */
.top{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--top-h);
  display:flex; align-items:center; gap:16px; padding-inline:var(--gut);
  transition:background .4s, box-shadow .4s, backdrop-filter .4s;
}
.top.scrolled{ background:rgba(247,239,223,.86); -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1); box-shadow:0 1px 0 var(--gold-line); }
.brand{ display:flex; align-items:center; text-decoration:none; margin-right:auto; min-height:44px; }
.brand-logo{ display:block; height:clamp(50px, 6.6vw, 76px); width:auto; }
@media (max-width:480px){ .brand-logo{ height:50px; } }
.tj-light{ fill:var(--paper-3); } .tj-dark{ fill:var(--ink); } .tj-ring{ stroke:var(--gold); stroke-width:2.5; }
.top-cta{ display:none; }
@media (min-width:900px){
  .top-cta{ display:inline-flex; align-items:center; min-height:44px; padding:0 20px; border-radius:999px; text-decoration:none; font-weight:600; font-size:.98rem; color:var(--jing); box-shadow:inset 0 0 0 1px var(--gold); opacity:0; pointer-events:none; transition:opacity .4s; }
  .top.scrolled .top-cta{ opacity:1; pointer-events:auto; }
  .top-cta:hover{ background:var(--paper-3); }
}
.lang{
  display:flex; gap:4px; padding:4px; border-radius:999px; flex:none;
  background:var(--paper-3); box-shadow:0 0 0 1px var(--gold), 0 0 0 4px rgba(252,247,238,.7), 0 10px 26px -12px rgba(70,45,10,.45);
}
.lang button{
  display:flex; align-items:center; gap:9px; min-height:48px; padding:0 14px 0 9px;
  border:0; border-radius:999px; background:transparent; cursor:pointer;
  font:700 1.05rem/1 var(--f-body); letter-spacing:.04em; color:var(--ink);
  transition:background .3s, color .3s, box-shadow .3s;
}
.lang button:hover{ background:rgba(176,138,62,.14); }
.lang button[aria-pressed="true"]{ background:var(--ink); color:var(--paper-3); box-shadow:inset 0 0 0 1px var(--gold-hi); }
.lang .flag{ width:32px; height:22px; border-radius:4px; flex:none; box-shadow:0 0 0 1px rgba(30,36,48,.22), 0 1px 2px rgba(0,0,0,.15); background:#fff; }
.lang button[aria-pressed="true"] .flag{ box-shadow:0 0 0 1.5px var(--gold-hi); }
.lang .word{ display:none; font-weight:500; letter-spacing:0; font-size:.95rem; opacity:.85; }
@media (min-width:720px){
  .lang button{ min-height:52px; padding:0 18px 0 11px; gap:10px; }
  .lang .flag{ width:36px; height:24px; }
  .lang .word{ display:inline; }
}
.lang button.nudge{ animation:nudge 1.5s var(--ease) 2; }
@keyframes nudge{ 0%,100%{ box-shadow:0 0 0 0 rgba(217,184,102,0); } 40%{ box-shadow:0 0 0 6px rgba(217,184,102,.55); background:rgba(217,184,102,.25); } }

/* ---------- 1. hero ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:flex-start; justify-content:center;
  padding:calc(var(--top-h) + clamp(28px, 6vh, 64px)) var(--gut) clamp(200px, 34vh, 340px);
}
.hero-art{ position:absolute; z-index:-3; left:0; right:0; bottom:-6%; height:72%; }
.hero-art img{
  width:100%; height:100%; object-fit:cover; object-position:50% 72%;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 26%, #000 55%);
  mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 26%, #000 55%);
}
.hero::after{ content:""; position:absolute; z-index:-1; inset:auto 0 0 0; height:120px; background:linear-gradient(to bottom, rgba(247,239,223,0), var(--paper)); pointer-events:none; }
.mist-layer{ position:absolute; z-index:-2; inset:0; pointer-events:none; }
.mist{ position:absolute; border-radius:50%; background:radial-gradient(closest-side, rgba(252,247,238,.95), rgba(252,247,238,.6) 45%, rgba(252,247,238,0)); animation:mist 46s ease-in-out infinite alternate; }
.m1{ width:120vw; height:60vh; left:-10vw; top:4vh; }
.m2{ width:70vw; height:38vh; left:-24vw; bottom:16vh; animation-duration:58s; animation-delay:-20s; opacity:.85; }
.m3{ width:76vw; height:36vh; right:-28vw; bottom:6vh; animation-duration:52s; animation-delay:-8s; opacity:.8; }
@keyframes mist{ from{ transform:translate3d(-6vw,0,0); } to{ transform:translate3d(8vw,-2vh,0); } }
.gcloud{ position:absolute; color:var(--gold); opacity:.75; pointer-events:none; }
.gc-1{ width:clamp(90px,12vw,170px); height:auto; aspect-ratio:120/50; top:calc(var(--top-h) + 6vh); left:4vw; }
.gc-2{ width:clamp(70px,9vw,130px); aspect-ratio:120/50; top:calc(var(--top-h) + 22vh); right:5vw; transform:scaleX(-1); }

.hero-inner{ position:relative; width:100%; max-width:1240px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero-inner::before{ content:""; position:absolute; z-index:-1; inset:-6% -8% -14%; background:radial-gradient(closest-side, rgba(250,244,232,.92), rgba(250,244,232,.7) 60%, rgba(250,244,232,0)); pointer-events:none; }
.chip-new{
  display:inline-flex; align-items:center; padding:9px 20px; border-radius:999px;
  font:700 .82rem/1 var(--f-body); letter-spacing:.22em; color:var(--jing);
  background:rgba(252,247,238,.8); box-shadow:inset 0 0 0 1px var(--gold), 0 0 0 3px rgba(252,247,238,.8), 0 0 0 4px var(--gold-line);
}
.chip-new .dia{ width:6px; height:6px; margin-inline:10px; }
.chip-new .sep{ margin-inline:10px; color:var(--gold); }

.title{ display:flex; flex-direction:column; align-items:center; margin-top:clamp(18px,3vh,30px); font-weight:400; }
.title-art{ display:block; width:min(92vw, 860px); height:auto; filter:drop-shadow(0 14px 22px rgba(80,45,10,.18)); }
.hero-sub{ margin-top:clamp(6px,1.2vh,12px); text-align:center; font:italic 600 clamp(1.4rem, 3.4vw, 3rem)/1.15 var(--f-display); color:var(--jing); }
html[lang="ru"] .t-ru{ order:-1; }
.t{ display:flex; flex-direction:column; align-items:center; }
.t .mf{ display:none; }
/* active language: big cut-out */
html[lang="en"] .t-en .cut, html[lang="ru"] .t-ru .cut{
  display:block; font:900 clamp(2.55rem, 7.3vw, 7.1rem)/1 var(--f-display); letter-spacing:-.012em;
  text-wrap:balance; color:var(--ink); padding:.04em .06em .1em; max-width:13.5em;
}
html[lang="ru"] .t-ru .cut{ font-size:clamp(2.45rem, 7vw, 6.8rem); }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html[lang="en"] .t-en .cut, html[lang="ru"] .t-ru .cut{
    background-image:url("/s/img/title-fill.webp"); background-size:150% auto; background-position:8% 50%;
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 1px 0 rgba(255,250,240,.9)) drop-shadow(0 16px 26px rgba(80,45,10,.18));
    animation:drift 42s ease-in-out infinite alternate;
  }
}
@keyframes drift{ 0%{ background-position:4% 30%; } 50%{ background-position:60% 70%; } 100%{ background-position:96% 40%; } }
html[lang="en"] .t-en .l2, html[lang="ru"] .t-ru .l2{
  display:block; margin-top:.1em; font:italic 600 clamp(1.6rem, 3.6vw, 3.3rem)/1.1 var(--f-display); color:var(--jing);
}
/* one language per view: the other language is not rendered */
html[lang="en"] .t-ru, html[lang="ru"] .t-en{ display:none !important; }
.video-cut{ position:relative; isolation:isolate; }
.video-cut video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
html .video-cut .cut{ background:var(--paper) !important; color:#000 !important; -webkit-text-fill-color:#000 !important; mix-blend-mode:lighten; filter:none !important; animation:none !important; }

.hero-lede{ margin-top:clamp(20px,3vh,30px); max-width:34em; font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--ink-soft); text-wrap:balance; }
.facts{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; row-gap:6px;
  margin-top:22px; font:600 .95rem/1.4 var(--f-body); letter-spacing:.04em; color:var(--ink);
}
.facts .f-label{ color:var(--jing); text-transform:uppercase; letter-spacing:.16em; font-size:.8rem; }
.facts .dia{ width:5px; height:5px; margin-inline:12px; background:var(--gold); }
.spots{ margin-top:12px; font-size:.98rem; color:var(--ink-soft); display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; }
.spots[hidden]{ display:none; }
.spots .sp{ display:inline-flex; align-items:center; gap:8px; }
.pips{ display:inline-flex; gap:3px; }
.pips i{ width:7px; height:7px; transform:rotate(45deg); border:1px solid var(--gold); }
.pips i.on{ background:var(--gold); }
.hero-cta{ margin-top:clamp(24px,4vh,36px); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px 28px; }

/* ---------- reveals ---------- */
.js .rv{ opacity:0; transform:translate3d(0,22px,0); transition:opacity 1.1s var(--ease) var(--d,0ms), transform 1.1s var(--ease) var(--d,0ms); }
.js .rv.in{ opacity:1; transform:none; }

/* ---------- 2. welcome ---------- */
.welcome-grid{ display:grid; gap:24px; }
@media (min-width:960px){ .welcome-grid{ grid-template-columns:1.15fr .85fr; gap:96px; align-items:center; } }
.welcome h2{ max-width:14em; }
.welcome .prose{ margin-top:28px; max-width:34em; }
.principle{ font:italic 500 clamp(1.15rem,1.7vw,1.35rem)/1.45 var(--f-display); color:var(--jing-deep); padding-left:18px; border-left:1px solid var(--gold); margin-block:1.4em !important; }
.note{ font-size:.95rem; color:var(--muted); }
.nots{ position:relative; padding:clamp(28px,4vw,48px); }
.nots li{ font:500 clamp(1.4rem, 2.6vw, 2.1rem)/1.25 var(--f-display); color:var(--muted); padding-block:.18em; }
.nots li span{ position:relative; }
.nots li span::after{ content:""; position:absolute; left:-2%; right:-2%; top:56%; height:1.5px; background:var(--gold); transform-origin:left; transform:scaleX(0); transition:transform .9s var(--ease) calc(var(--d,0ms) + 450ms); }
.nots li.in span::after, html:not(.js) .nots li span::after{ transform:scaleX(1); }
.nots .is{ margin-top:.5em; font:italic 700 clamp(2.4rem, 5vw, 4rem)/1.05 var(--f-display); color:var(--jing); }

/* ---------- 3. inspiration ---------- */
.inspo{ background:var(--paper-2) var(--grain); border-block:1px solid var(--gold-line); }
.inspo-inner{ position:relative; max-width:820px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.inspo .eyebrow::after{ content:""; width:28px; height:1px; background:var(--gold); }
.asterisk{ font:700 clamp(7rem, 16vw, 12rem)/.7 var(--f-display); color:var(--jing); height:.55em; margin-bottom:14px; display:block; animation:spin 90s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.inspo-text{ font:400 clamp(1.25rem, 2.3vw, 1.75rem)/1.5 var(--f-display); color:var(--ink); text-wrap:pretty; }
.inspo-text cite{ font-style:italic; color:var(--jing-deep); }

/* ---------- 4. evening ---------- */
.evening{ padding-bottom:0; }
.tables{ display:grid; gap:28px 12px; grid-template-columns:1fr 1fr; }
.tb-shared{ grid-column:1 / -1; }
@media (min-width:720px){ .tables{ grid-template-columns:repeat(3,1fr); gap:24px; } .tb-shared{ grid-column:auto; } }
.tables{ align-items:end; }
.table{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.sign{ width:min(42vw, 300px); height:auto; filter:drop-shadow(0 22px 26px rgba(60,35,5,.22)) drop-shadow(0 4px 6px rgba(60,35,5,.12)); transition:transform .8s var(--ease); }
.table:hover .sign{ transform:translateY(-8px) rotate(-1deg); }
.tb-yang .sign{ width:min(40vw, 286px); }
.tb-cap b{ font-weight:700; }
.tb-cap{ margin-top:14px; font-weight:500; font-size:.92rem; line-height:1.35; max-width:16em; color:var(--ink-soft); }
.tb-yin .tb-cap{ color:#1F2C55; } .tb-yang .tb-cap{ color:var(--jing-deep); } .tb-shared .tb-cap{ color:var(--ink); }
.tables-note{ margin-top:18px; font-size:.95rem; color:var(--muted); text-align:center; }

.rounds{ margin-top:clamp(64px,9vw,120px); counter-reset:none; }
.round{ position:relative; isolation:isolate; overflow:hidden; padding-block:clamp(40px, 7vw, 110px); }
.r-art{ position:absolute; z-index:-1; inset:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  mask-image:linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent); }
.r-art img{ position:absolute; left:0; width:100%; top:-12%; height:124%; object-fit:cover; object-position:50% 50%; }
.r-inner{ position:relative; max-width:calc(1080px + 2*var(--gut)); margin-inline:auto; padding-inline:var(--gut); display:grid; gap:28px; justify-items:center; }
.r-card{ width:min(64vw, 300px); }
.r-card img{ width:100%; height:auto; border-radius:16px; box-shadow:0 0 0 1px rgba(176,138,62,.5), 0 30px 60px -28px rgba(40,25,5,.55), 0 10px 20px -12px rgba(40,25,5,.3); transform:rotate(-2.2deg); transition:transform .8s var(--ease); }
.alt .r-card img{ transform:rotate(2.2deg); }
.r-card:hover img{ transform:rotate(0) translateY(-6px); }
.r-panel{ width:100%; max-width:560px; padding:clamp(28px,4vw,46px) clamp(22px,3.6vw,46px); background:rgba(252,247,238,.9); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
@media (min-width:960px){
  .r-inner{ grid-template-columns:360px minmax(0,520px); justify-content:center; align-items:center; gap:72px; }
  .r-card{ width:100%; }
  .alt .r-card{ order:2; }
  .alt .r-inner{ grid-template-columns:minmax(0,520px) 360px; }
  .round{ min-height:min(92vh, 860px); display:flex; align-items:center; }
  .round > .r-inner{ width:100%; }
}
.r-step{ font:600 .78rem/1 var(--f-body); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); }
.r-title{ margin-top:12px; font:900 clamp(2.4rem, 4.6vw, 3.6rem)/1 var(--f-sc); letter-spacing:.005em; color:var(--wc); }
.r-title > span{ display:block; }
.r-ru{ margin-top:6px; font:700 clamp(1.25rem, 2.2vw, 1.7rem)/1.1 var(--f-sc); letter-spacing:.03em; color:var(--wc2, var(--wc)); }
html[lang="ru"] .r-title{ display:flex; flex-direction:column; }
html[lang="ru"] .r-title .r-ru{ order:-1; margin:0 0 8px; font:900 clamp(1.75rem, 2.9vw, 2.55rem)/1.05 var(--f-sc); overflow-wrap:anywhere; letter-spacing:.005em; color:var(--wc); }
html[lang="ru"] .r-title .r-en{ font:700 clamp(1.2rem, 2vw, 1.6rem)/1.1 var(--f-sc); letter-spacing:.03em; color:var(--wc2, var(--wc)); }
.r-treasure{ margin-top:16px; display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; font-weight:600; color:var(--ink-soft); }
.r-treasure .dot{ width:5px; height:5px; background:var(--gold); transform:rotate(45deg); }
.han{ font-family:var(--f-han); font-weight:600; }
.r-treasure .han{ font-size:1.5rem; line-height:1; color:var(--wc); margin-right:4px; }
.r-desc{ margin-top:16px; text-wrap:pretty; }
.r-q{ margin-top:24px; padding-top:22px; border-top:1px solid var(--gold-line); position:relative; }
.r-q::before{ content:""; position:absolute; top:-5px; left:0; width:9px; height:9px; background:var(--wc); transform:rotate(45deg); }
.q-label{ font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.q{ font:italic 500 1.12rem/1.45 var(--f-display); text-wrap:pretty; }
.q + .q{ margin-top:8px; }
/* one language per view: the other language's card titles, questions, quote and footer line are not rendered */
html[lang="en"] :is(.r-ru, .q-ru, .k-ru), html[lang="en"] .f-phrase [lang="ru"],
html[lang="ru"] :is(.r-en, .q-en, .k-en), html[lang="ru"] .f-phrase [lang="en"]{ display:none !important; }
html[lang="en"] .q-ru, html[lang="ru"] .q-en{ font-size:.98rem; color:var(--muted); }
html[lang="ru"] .q-ru{ order:-1; }
.r-q{ display:flex; flex-direction:column; }
.r-q .q-label{ order:-2; }
.w-play{ --wc:var(--chi-deep); --wc2:var(--chi); }
.w-explore{ --wc:var(--jing-deep); --wc2:var(--jing); }
.w-discover{ --wc:var(--shen-deep); --wc2:var(--shen); }
.w-between{ --wc:#3B3A44; --wc2:var(--gold-deep); }
.w-finale{ --wc:var(--ink); --wc2:var(--jing); }
.w-finale .r-art img{ opacity:.55; }
.r-medal{ display:grid; place-items:center; position:relative; aspect-ratio:1; width:min(62vw, 280px); }
.r-medal .medal{ width:100%; height:100%; overflow:visible; filter:drop-shadow(0 24px 30px rgba(40,25,5,.22)); }
.r-medal .spin{ transform-box:fill-box; transform-origin:center; animation:spin 140s linear infinite; }
.r-medal .lotus{ position:absolute; bottom:-34px; width:72px; height:44px; color:var(--gold); }
@media (min-width:960px){ .r-medal{ width:320px; justify-self:center; } }

/* ---------- 5. token ---------- */
.token-grid{ display:grid; gap:48px; align-items:center; }
@media (min-width:960px){ .token-grid{ grid-template-columns:minmax(0,440px) minmax(0,1fr); gap:96px; } }
.poster{ justify-self:center; width:min(80vw, 440px); }
.poster img{ width:100%; height:auto; border-radius:6px; box-shadow:0 0 0 1px var(--gold-line), 0 40px 70px -36px rgba(40,25,5,.6); }
.token .prose{ margin-top:24px; max-width:32em; }
.treasures{ margin-top:32px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tr{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:18px 8px 16px; border-radius:999px 999px 18px 18px; background:rgba(252,247,238,.7); border:1px solid var(--gold-line); font-size:.9rem; line-height:1.25; color:var(--ink-soft); }
.tr .han{ font-size:clamp(2rem,4vw,2.8rem); line-height:1.1; color:var(--tc); }
.tr b{ font:700 1.15rem/1.1 var(--f-sc); color:var(--tc); }
.tr-jing{ --tc:var(--jing); } .tr-chi{ --tc:var(--chi); } .tr-shen{ --tc:var(--shen); }
.keep{ margin-top:clamp(72px,10vw,128px); text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.keep .lotus{ width:56px; height:34px; color:var(--gold); margin-bottom:8px; }
.keep p{ text-wrap:balance; }
html[lang="en"] .k-en, html[lang="ru"] .k-ru{ font:italic 600 clamp(1.8rem, 4.4vw, 3.4rem)/1.15 var(--f-display); color:var(--jing-deep); max-width:18em; }
html[lang="en"] .k-ru, html[lang="ru"] .k-en{ font:italic 400 clamp(1rem,1.6vw,1.25rem)/1.4 var(--f-display); color:var(--muted); }
html[lang="ru"] .k-ru{ order:-1; } html[lang="ru"] .keep .lotus{ order:-2; }

/* ---------- 6. fit ---------- */
.fit{ background:var(--paper-2) var(--grain); border-block:1px solid var(--gold-line); overflow:hidden; }
.gc-3{ width:clamp(120px,16vw,220px); aspect-ratio:120/50; right:4vw; top:56px; opacity:.6; }
.fit-grid{ display:grid; gap:40px; }
@media (min-width:860px){ .fit-grid{ grid-template-columns:1fr 1fr; gap:72px; } }
.fit-col h3{ font:700 1.4rem/1.2 var(--f-sc); letter-spacing:.02em; color:var(--jing-deep); padding-bottom:14px; border-bottom:1px solid var(--gold-line); margin-bottom:8px; }
.dlist li{ position:relative; padding:14px 0 14px 30px; border-bottom:1px solid rgba(176,138,62,.22); text-wrap:pretty; }
.dlist li::before{ content:""; position:absolute; left:4px; top:1.35em; width:8px; height:8px; transform:rotate(45deg); border:1px solid var(--gold); background:var(--paper-3); }

/* ---------- 7. hosts ---------- */
.host-grid{ display:grid; gap:56px; grid-template-columns:1fr; max-width:900px; margin-inline:auto; }
@media (min-width:720px){ .host-grid{ grid-template-columns:1fr 1fr; gap:64px; } }
.hosts .sec-head{ margin-inline:auto; text-align:center; }
/* the header uses the hero's title treatment: the gradient-cut display type and the italic second line */
.everything{ padding-bottom:clamp(4px, 1vw, 12px); }
.everything .sec-head{ margin-inline:auto; text-align:center; margin-bottom:0; }
.everything-title{ font:900 clamp(2.55rem, 7.3vw, 7.1rem)/1 var(--f-display); letter-spacing:-.012em; color:var(--ink); text-wrap:balance; }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .everything-title{ background-image:url("/s/img/title-fill.webp"); background-size:150% auto; background-position:8% 50%;
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 1px 0 rgba(255,250,240,.9)) drop-shadow(0 16px 26px rgba(80,45,10,.18)); animation:drift 42s ease-in-out infinite alternate; }
}
.everything-sub{ margin-top:.2em; font:italic 600 clamp(1.6rem, 3.6vw, 3.3rem)/1.1 var(--f-display); color:var(--jing); }
/* the banner: poster frame, emblem on top, two lines of copy */
.banner{ padding-block:clamp(16px, 3vw, 36px) clamp(40px, 7vw, 88px); }
.banner-frame{ position:relative; text-align:center; padding:clamp(44px, 6vw, 72px) clamp(22px, 6vw, 84px) clamp(36px, 5vw, 56px); background:radial-gradient(ellipse at 50% 40%, rgba(255,251,242,.92), rgba(247,239,223,.35) 75%); }
.banner-frame::before{ content:""; position:absolute; inset:0; border:1px solid var(--gold); box-shadow:inset 0 0 0 5px var(--paper), inset 0 0 0 6px var(--gold-line); pointer-events:none; }
.banner-orn{ display:block; width:min(220px, 56%); height:auto; margin:0 auto clamp(6px,1.4vw,14px); }
.banner-h{ max-width:19em; margin-inline:auto; font:700 clamp(1.85rem, 4.4vw, 3.3rem)/1.12 var(--f-display); color:var(--jing-deep); text-wrap:balance; }
.banner-p{ max-width:31em; margin:clamp(14px,2vw,22px) auto 0; font:italic 600 clamp(1.15rem, 2.4vw, 1.6rem)/1.35 var(--f-display); color:var(--jing); text-wrap:balance; }
/* the book, one line before the book section */
.book-line{ padding-block:clamp(28px, 5vw, 56px); text-align:center; }
.book-line p{ font:italic 600 clamp(1.25rem, 2.5vw, 1.9rem)/1.3 var(--f-display); color:var(--jing); }
/* tighter rhythm inside the welcome block */
.welcome{ padding-bottom:clamp(24px, 4vw, 56px); }
.nots{ padding-top:clamp(4px, 1vw, 12px); }
.hosts .eyebrow{ justify-content:center; }
.hosts .eyebrow::after{ content:""; width:28px; height:1px; background:var(--gold); }
.host{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.arch{ position:relative; width:min(78vw, 340px); aspect-ratio:4/5; border-radius:999px 999px 14px 14px; padding:8px; border:1px solid var(--gold); }
.arch::after{ content:""; position:absolute; inset:-13px auto auto 50%; width:26px; height:26px; translate:-50% 0; background:var(--knot) center/contain no-repeat; }
.arch img{ position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); object-fit:cover; object-position:50% 22%; border-radius:999px 999px 8px 8px; }
.host h3{ margin-top:26px; font:700 2rem/1.1 var(--f-sc); letter-spacing:.02em; }
.h-lang{ margin-top:10px; display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 8px; border-radius:999px; background:rgba(252,247,238,.8); box-shadow:inset 0 0 0 1px var(--gold-line); font-weight:600; font-size:.98rem; }
.h-lang .flag{ width:28px; height:19px; border-radius:3px; box-shadow:0 0 0 1px rgba(30,36,48,.2); background:#fff; }
.h-line{ margin-top:12px; color:var(--ink); font-weight:600; max-width:34ch; }
.h-bio{ margin-top:10px; color:var(--ink-soft); max-width:42ch; font-size:.97rem; line-height:1.55; }

/* ---------- 8. practical ---------- */
.practical{ padding-top:0; }
.facts-grid{ display:grid; gap:14px; }
@media (min-width:720px){ .facts-grid{ grid-template-columns:repeat(3,1fr); gap:18px; } .fact-wide{ grid-column:1 / -1; } }
.fact{ padding:22px 24px; background:rgba(252,247,238,.75); border:1px solid var(--gold-line); border-radius:14px; }
.fact dt{ font:700 1.05rem/1.2 var(--f-sc); letter-spacing:.04em; color:var(--jing-deep); margin-bottom:8px; }
.fact dd{ text-wrap:pretty; }
.fact-wide{ border-color:var(--gold); background:rgba(252,247,238,.95); }

/* ---------- 9. register ---------- */
.register{ isolation:isolate; overflow:hidden; }
.reg-art{ position:absolute; inset:0; z-index:-1; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 82%, transparent); mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 82%, transparent); }
.reg-art img{ position:absolute; left:0; top:-10%; width:100%; height:120%; object-fit:cover; opacity:.9; }
.reg-card{ max-width:680px; margin-inline:auto; background:rgba(252,247,238,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:clamp(32px,5vw,60px) clamp(20px,5vw,60px); box-shadow:0 40px 80px -40px rgba(60,35,5,.45); }
.reg-head{ text-align:center; margin-bottom:34px; }
.reg-head .eyebrow{ justify-content:center; }
.reg-head .eyebrow::after{ content:""; width:28px; height:1px; background:var(--gold); }
.reg-head .lede{ margin-inline:auto; font-size:1.05rem; }

.field{ border:0; padding:0; margin:0 0 26px; min-width:0; }
.field legend, .field > label{ display:block; padding:0; margin-bottom:10px; font:700 1.02rem/1.3 var(--f-sc); letter-spacing:.04em; color:var(--ink); }
.field > .sub-label{ display:block; margin:14px 0 8px; font:500 .95rem/1.4 var(--f-body); letter-spacing:0; color:var(--ink-soft); }
input[type="text"]{
  width:100%; min-height:54px; padding:12px 16px; border-radius:12px;
  border:1px solid rgba(176,138,62,.7); background:#FFFDF8; font-size:1.08rem;
  transition:border-color .2s, box-shadow .2s;
}
input[type="text"]:focus{ outline:none; border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(217,184,102,.45); }
.invalid input[type="text"], input[aria-invalid="true"]{ border-color:var(--jing); }
.err{ color:var(--jing); font-size:.92rem; margin-top:6px; min-height:0; }
.err:empty{ display:none; }

.events{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (min-width:600px){ .events{ grid-template-columns:repeat(4,1fr); } }
.ev{ position:relative; display:block; cursor:pointer; }
.ev input, .choice input, .ch input{ position:absolute; opacity:0; width:1px; height:1px; }
.ev-body{ display:flex; flex-direction:column; gap:3px; min-height:76px; padding:12px 12px; border-radius:12px; border:1px solid rgba(176,138,62,.55); background:#FFFDF8; transition:all .25s; }
.ev-day{ font:700 1.06rem/1.2 var(--f-display); }
.ev-meta{ font-size:.82rem; color:var(--muted); line-height:1.3; }
.ev-tag{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--jing); font-weight:700; }
.ev input:checked + .ev-body{ border-color:var(--ink); background:var(--ink); color:var(--paper-3); box-shadow:0 0 0 3px rgba(217,184,102,.5); }
.ev input:checked + .ev-body .ev-meta{ color:rgba(252,247,238,.75); }
.ev input:checked + .ev-body .ev-tag{ color:var(--gold-hi); }
.ev input:focus-visible + .ev-body, .choice input:focus-visible + .c-body, .ch input:focus-visible + span{ outline:2px solid var(--jing); outline-offset:3px; }

.sex{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.choice{ cursor:pointer; display:block; }
.c-body{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:92px; padding:14px 10px; border-radius:16px; border:1px solid rgba(176,138,62,.6); background:#FFFDF8; text-align:center; transition:all .25s; }
.c-main{ font:700 clamp(1.25rem, 3vw, 1.55rem)/1.1 var(--f-display); }
.c-sub{ font-size:.84rem; color:var(--muted); line-height:1.25; }
.c-sub:empty{ display:none; }
.c-sub.full{ color:var(--jing); }
.choice input:checked + .c-body{ border-color:var(--jing); background:var(--jing); color:#FCF3E2; box-shadow:0 0 0 3px rgba(217,184,102,.55), 0 14px 26px -14px rgba(110,15,27,.6); }
.choice input:checked + .c-body .c-sub{ color:rgba(252,243,226,.85); }

.channel{ display:inline-flex; padding:4px; gap:4px; border-radius:999px; background:#FFFDF8; box-shadow:inset 0 0 0 1px rgba(176,138,62,.6); }
.ch{ cursor:pointer; }
.ch span{ display:flex; align-items:center; min-height:46px; padding:0 22px; border-radius:999px; font-weight:600; transition:all .25s; }
.ch input:checked + span{ background:var(--ink); color:var(--paper-3); }

.hp{ position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; }

.field > .check{ display:flex; align-items:center; gap:14px; min-height:48px; margin:0; cursor:pointer; font:500 1.05rem/1.3 var(--f-body); letter-spacing:0; }
.check input{ position:absolute; opacity:0; width:1px; height:1px; }
.check .box{ width:26px; height:26px; flex:none; border-radius:7px; border:1px solid var(--gold-deep); background:#FFFDF8; display:grid; place-items:center; transition:all .2s; }
.check input:checked + .box{ background:var(--jing); border-color:var(--jing); }
.check input:checked + .box::after{ content:""; width:7px; height:13px; border:solid #FCF3E2; border-width:0 2.5px 2.5px 0; transform:translateY(-2px) rotate(45deg); }
.check input:focus-visible + .box{ outline:2px solid var(--jing); outline-offset:3px; }

.msg-lang{ font-size:.94rem; color:var(--muted); margin:-4px 0 22px; display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; }
.linkish{ border:0; background:none; padding:10px 2px; min-height:44px; cursor:pointer; color:var(--jing); text-decoration:underline; text-underline-offset:3px; font-size:.94rem; }
.btn-wide{ width:100%; min-height:60px; font-size:1.15rem; }
.btn .when-busy{ display:none; }
.busy .btn .when-idle{ display:none; } .busy .btn .when-busy{ display:inline; }
.busy .btn{ opacity:.75; pointer-events:none; }
.form-error{ margin-top:16px; padding:14px 16px; border-radius:12px; background:rgba(158,27,42,.08); border:1px solid rgba(158,27,42,.35); color:var(--jing-deep); font-size:.98rem; }
.form-error[hidden]{ display:none; }

/* done states */
.done{ text-align:center; outline:none; }
.done[hidden]{ display:none; }
.done .d-mark{ width:74px; height:74px; margin:0 auto 18px; }
.done h3{ font:700 clamp(2rem,5vw,2.8rem)/1.1 var(--f-display); color:var(--jing-deep); }
.done .d-when{ margin-top:12px; font:600 1.08rem/1.4 var(--f-body); }
.done .d-text{ margin:14px auto 0; max-width:30em; color:var(--ink-soft); text-wrap:pretty; }
.done .d-actions{ margin-top:28px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.btn-tg{ padding:10px 24px; line-height:1.25; text-align:left; background:linear-gradient(180deg,#2AA3DD,#1E88C7); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px var(--gold), 0 0 0 4px var(--paper-3), 0 0 0 5px var(--gold-line), 0 16px 30px -14px rgba(20,90,140,.7); color:#fff; min-height:60px; font-size:1.1rem; }
.btn-tg svg{ width:24px; height:24px; }
.btn-line{ display:inline-flex; align-items:center; gap:10px; min-height:50px; padding:0 22px; border-radius:999px; text-decoration:none; font-weight:600; color:var(--ink); box-shadow:inset 0 0 0 1px var(--gold); background:#FFFDF8; }
.btn-line svg{ width:20px; height:20px; color:var(--gold-deep); }
.done .again{ margin-top:20px; }

/* ---------- footer ---------- */
.foot{ padding:72px 0 calc(48px + env(safe-area-inset-bottom)); border-top:1px solid var(--gold-line); background:var(--paper-2) var(--grain); text-align:center; }
.foot-inner{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.foot .lotus{ width:52px; height:31px; color:var(--gold); }
.f-phrase{ display:flex; flex-direction:column; gap:6px; font:italic 500 clamp(1.1rem,2vw,1.45rem)/1.35 var(--f-display); color:var(--jing-deep); }
html[lang="ru"] .f-phrase [lang="ru"]{ order:-1; }
.f-meta{ font-size:.9rem; letter-spacing:.06em; color:var(--muted); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 0; }
.f-meta .dia{ width:5px; height:5px; background:var(--gold); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .rv{ opacity:1; transform:none; transition:none; }
  .mist, .asterisk, .r-medal .spin, .lang button.nudge{ animation:none !important; }
  html[lang="en"] .t-en .cut, html[lang="ru"] .t-ru .cut{ animation:none !important; }
  .nots li span::after{ transform:scaleX(1); transition:none; }
  .btn, .r-card img{ transition:none; }
}
.hint{ font-size:.9rem; color:var(--muted); margin:-4px 0 12px; }
.hint[hidden]{ display:none; }
@media (max-width:719px){ .gc-2{ display:none; } .gc-1{ top:calc(var(--top-h) + 64px); left:2vw; opacity:.5; } }

/* ---------- round 2 review (16 Oct) ---------- */
/* inspiration: original 1969 jacket beside the text */
.inspo-inner{ max-width:1040px; flex-direction:row; align-items:center; gap:clamp(28px,6vw,72px); text-align:left; }
.inspo-copy{ display:flex; flex-direction:column; align-items:flex-start; flex:1; }
.inspo-copy .asterisk{ align-self:flex-start; }
.book{ margin:0; flex:0 0 clamp(170px,24vw,260px); position:relative; transform:rotate(-3deg); }
.book img{ width:100%; height:auto; display:block; box-shadow:0 30px 50px -24px rgba(60,35,5,.55), 0 2px 0 rgba(0,0,0,.08); border-radius:2px 4px 4px 2px; }
.book figcaption{ position:absolute; right:-14px; bottom:-14px; font:700 .8rem/1 var(--f-display); letter-spacing:.12em; color:var(--paper-3); background:var(--jing); padding:8px 10px; border-radius:2px; transform:rotate(3deg); }
@media (max-width:700px){
  .inspo-inner{ flex-direction:column; text-align:center; }
  .inspo-copy{ align-items:center; }
  .inspo-copy .asterisk{ align-self:center; }
  .book{ flex-basis:auto; width:min(62vw,240px); }
}
/* yin / yang places: indigo moon dots for women, crimson sun dots for men */
.pips i{ transform:none; border-radius:50%; width:8px; height:8px; }
.pips.yin i{ border-color:#1F2E55; } .pips.yin i.on{ background:#1F2E55; }
.pips.yang i{ border-color:var(--jing); } .pips.yang i.on{ background:var(--jing); }
.c-yy{ font:600 .7rem/1 var(--f-body,inherit); letter-spacing:.16em; text-transform:uppercase; }
.c-yy.yin{ color:#1F2E55; } .c-yy.yang{ color:var(--jing); }
/* registration: less empty sky above the card */
.sec.register{ padding-top:clamp(36px,5vw,64px); }
/* review-only switcher for host photo variants */
.hv-switch{ position:fixed; left:50%; bottom:16px; translate:-50% 0; z-index:90; display:flex; align-items:center; gap:6px; padding:6px 6px 6px 14px; border-radius:999px; background:rgba(30,36,48,.92); color:#F7EFDF; font:600 .85rem/1 var(--f-body); box-shadow:0 12px 30px -10px rgba(0,0,0,.5); max-width:calc(100vw - 32px); flex-wrap:nowrap; white-space:nowrap; }
.hv-switch button{ border:0; border-radius:999px; padding:9px 12px; min-height:40px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.hv-switch button.on{ background:#C9A24B; color:#1E2430; }

.hv-switch i{ font-style:normal; }
@media (max-width:600px){ .hv-switch{ bottom:10px; font-size:.8rem; } .hv-switch i{ display:none; } .hv-switch button{ min-width:40px; padding:9px 10px; } }