/* Design 3: night studio. Chrome french as a dark cinematic hero, her highlights become a story viewer. */
:root{--bg:#0E0C0D;--ink:#F3EAE3;--soft:#B5A89F;--acc:#D9B88F;--acc-ink:#17110C;--card:#1A1617;--line:#332B2D;--fd:"Karantina",system-ui,sans-serif;--ft:"Assistant",system-ui,sans-serif;--r:4px;--ri:6px}
body{font-size:18px}
section h2{font-weight:700;font-size:clamp(46px,7vw,84px);letter-spacing:.01em}

.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,5vw,64px);background:linear-gradient(rgba(14,12,13,.75),transparent)}
.logo{font:700 34px var(--fd);letter-spacing:.14em;text-decoration:none;direction:ltr}
.mini{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border:1px solid var(--acc);color:var(--acc);text-decoration:none;font-weight:700}

.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:clamp(40px,8vw,90px)}
.hero .bg{position:absolute;inset-block:0;inset-inline-end:0;width:46%;z-index:0;overflow:hidden}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 78%;filter:brightness(.82) saturate(.9);transform:scale(calc(1.04 + var(--y,0) * .1)) translateY(calc(var(--y,0) * 40px))}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,transparent 55%,var(--bg))}
.frame{position:absolute;inset-block:7vmin;inset-inline-end:4vmin;width:calc(46% - 8vmin);border:1px solid var(--acc);opacity:.6;z-index:2;transform:translateY(calc(var(--y,0) * -40px));pointer-events:none}
.hero .copy{position:relative;z-index:3;max-width:min(640px,50%)}
.kick{color:var(--acc);font-weight:700;letter-spacing:.2em;margin-bottom:10px}
.hero h1{font:700 clamp(84px,15vw,230px)/.8 var(--fd);margin-bottom:22px}
.lead{color:var(--soft);font-size:19px;max-width:40ch;margin-bottom:26px}

.stories .sub{color:var(--soft);margin:-14px 0 26px}
.rings{display:flex;gap:clamp(18px,4vw,44px);flex-wrap:wrap}
.ring{display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;color:var(--ink);cursor:pointer;font:600 17px var(--ft);padding:4px}
.ring img{width:104px;height:104px;border-radius:50%;object-fit:cover;padding:4px;background:var(--bg);box-shadow:0 0 0 3px var(--acc),0 0 0 6px var(--bg),0 0 0 7px #8A4F5C;transition:transform .25s}
.ring:hover img{transform:scale(1.06)}

.track{display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,380px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-color:var(--acc) var(--card)}
.strip{overflow:hidden}
.track{width:100%;min-width:0}
.track .igp{scroll-snap-align:start;max-width:none;--ig-bg:var(--card);--ig-ink:var(--ink);--ig-line:var(--line);--ig-r:6px}
.track .igp .av{--av-bg:linear-gradient(135deg,var(--acc),#8A4F5C)}

.story h2{font-size:clamp(50px,8vw,100px)}
.story-body p{font-size:clamp(19px,2.1vw,23px);color:var(--ink)}
.pill{border-color:var(--acc);color:var(--acc);letter-spacing:.2em}
.facts li{background:transparent;border-color:var(--acc);color:var(--acc)}

.tabs [role=tab]{background:transparent;border-color:var(--line);border-radius:var(--r)}
.tabs [aria-selected=true]{background:var(--acc);color:var(--acc-ink);border-color:var(--acc)}
.menu b{color:var(--acc)}
.ask{--ask-bg:#151011;--orb1:#D9B88F;--orb2:#8A4F5C;--orb3:#3B2F4A;--her-bg:#D9B88F;--her-ink:#17110C;--av-bg:linear-gradient(135deg,#D9B88F,#8A4F5C)}
.ask-head h2{font:700 40px var(--fd)}

.close{margin:clamp(20px,5vw,60px);border:1px solid var(--acc);padding-block:clamp(56px,8vw,100px)}
.close h2{font-size:clamp(52px,9vw,110px)}
.btn:not(.ghost){color:var(--acc-ink)}

dialog.viewer{border:0;padding:0;background:#000;color:#fff;width:min(460px,100vw);max-width:100vw;height:min(820px,100svh);max-height:100svh;border-radius:14px;overflow:hidden}
dialog.viewer::backdrop{background:rgba(0,0,0,.86)}
.viewer figure{height:100%;display:flex;flex-direction:column;justify-content:center}
.viewer img{width:100%;height:100%;object-fit:cover}
.viewer .cap{position:absolute;bottom:0;inset-inline:0;padding:40px 18px 18px;background:linear-gradient(transparent,rgba(0,0,0,.8));font-weight:600}
.viewer .bars{position:absolute;top:10px;inset-inline:10px;display:flex;gap:4px;z-index:2}
.viewer .bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden;position:relative}
.viewer .bars i.done{background:#fff}
.viewer .bars i.now::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:right;animation:bar 4.2s linear forwards}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.viewer .nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#111;font:700 26px/1 var(--ft);cursor:pointer;z-index:2}
.viewer .prev{inset-inline-start:10px}
.viewer .next{inset-inline-end:10px}
.viewer .x{position:absolute;top:22px;inset-inline-end:12px;width:44px;height:44px;border:0;background:none;color:#fff;font-size:34px;cursor:pointer;z-index:3}
.viewer :focus-visible{outline-color:#fff}

@media (max-width:760px){
  .hero h1{font-size:28vw}
  .hero .bg{width:100%;inset-block-end:auto;height:60%}
  .hero .bg img{object-position:50% 88%;filter:brightness(.85) saturate(.9)}
  .hero .bg::after{background:linear-gradient(transparent 45%,var(--bg))}
  .frame{inset:4vmin;width:auto}
  .hero .copy{max-width:none}
  dialog.viewer{border-radius:0;width:100vw;height:100svh}
}