/* Babska Strefa · stage J (client revision, 2026-10-24).
   1. Colour: the original palette stays (mulberry night, powder arches, lacquer rose button, champagne details);
      the client found the night a little too dark, so the mulberry is lifted a few steps, same hue
      (#170812 -> #26101f, the hero backdrop lifted to match in tools/hero-j-build.py).
   2. Headings: same Bodoni Moda, used for reading. A lower optical size gives the hairlines body, a touch more weight,
      more air between lines, balanced line breaks.
   3. The try-on: photographs of one eye in seven styles (site-j.js).
   Earlier files stay as they are; this one only overrides. */

:root{
  --canvas:#26101f;
  --canvas-deep:#1d0b17;
  --panel:#321827;
  --plum:#4a1d3d;
}

/* ---------- the lifted night where earlier files wrote the old one by hand ---------- */
.nav.solid{background:rgba(38,16,31,.74)}
.btn-ghost{background:rgba(38,16,31,.25)}
.scrim{background:radial-gradient(ellipse 120% 95% at 55% 45%,rgba(38,16,31,0) 40%,rgba(38,16,31,.6) 100%),
  linear-gradient(to bottom,rgba(38,16,31,.55),rgba(38,16,31,0) 18%)}
.band-side::before,.band-settle::before{background:radial-gradient(ellipse 60% 55% at 40% 50%,rgba(28,11,23,.66) 0%,rgba(28,11,23,.42) 48%,rgba(28,11,23,0) 76%)}
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .scrim{background:linear-gradient(to top,rgba(38,16,31,.95) 0%,rgba(38,16,31,.78) 34%,rgba(38,16,31,0) 62%),linear-gradient(to bottom,rgba(38,16,31,.6),rgba(38,16,31,0) 22%)}
}
.photo{background:radial-gradient(120% 90% at 28% 18%,#3a1830 0%,#2c1324 62%,#26101f 100%)}
.shot{background:#3a1c2e}
.frame-tag{background:rgba(38,16,31,.62)}
.lb::backdrop{background:rgba(29,11,23,.9)}
.lb-btn{background:rgba(38,16,31,.5)}
.lb-btn:hover{background:rgba(38,16,31,.8)}

/* ---------- headings: same typeface, made for reading ---------- */
.h2,.h3,.cap,.settle-h,.tryon-h,.step h3,.q-btn,.big-quote blockquote p,.owner-q,.fact b,.score b,.tab,.rev-card figcaption b,.mark-top,.mark-bottom{
  font-optical-sizing:none;font-variation-settings:"opsz" 30}
.h2{font-weight:500;font-size:clamp(36px,4.3vw,68px);line-height:1.1;letter-spacing:-.008em;max-width:17ch;text-wrap:balance}
.h2 em,.h3 em,.settle-h em{font-weight:500}
.h3,.tryon-h,.step h3,.q-btn,.fact b,.score b{font-weight:500}
.cap{font-weight:500;line-height:1.08}
.settle-h{font-weight:500;line-height:1.06;letter-spacing:-.01em}
.ptable td{font-weight:500;font-optical-sizing:none;font-variation-settings:"opsz" 24}
.label{font-size:12px;letter-spacing:.2em;margin-bottom:22px}
.label::before{width:32px;opacity:.85}
.lede{font-size:clamp(16px,1.15vw,18px)}

/* ---------- 01 · the try-on: one eye, seven styles, every style one tap away ---------- */
.tryon{background:radial-gradient(90% 80% at 50% 30%,#3a1630 0%,var(--panel) 55%,#2a1222 100%)}
.tryon-sub{max-width:48ch}
.look{position:relative;margin:clamp(16px,2vw,24px) 0 0}
.look-frame{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:var(--plum);isolation:isolate}
.look-pic{position:absolute;inset:0;display:block;opacity:0;transition:opacity .6s var(--ease-out)}
.look-pic.is-on{opacity:1}
.look-pic img{width:100%;height:100%;object-fit:cover;display:block}
.look-tag{position:absolute;left:14px;top:14px;z-index:2;padding:8px 13px;border-radius:999px;background:rgba(38,16,31,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font:500 13px/1 var(--f-body);letter-spacing:.02em;color:var(--text-primary);pointer-events:none}
.look-bare{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:9px 15px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(244,230,223,.55);background:rgba(38,16,31,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font:500 12px/1 var(--f-body);letter-spacing:.04em;color:var(--text-primary);transition:background-color .4s var(--ease-out),color .4s var(--ease-out)}
.look-bare::before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid currentColor}
.look-bare:hover{background:rgba(38,16,31,.75)}
.look-bare[aria-pressed="true"]{background:var(--text-primary);color:var(--canvas);border-color:var(--text-primary)}
.look-bare[aria-pressed="true"]::before{background:var(--accent);border-color:var(--accent)}

.looks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:clamp(14px,1.8vw,20px) 0 0;padding:0;border:0;min-width:0}
.looks input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.looks label{display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:56px;padding:10px 12px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(244,230,223,.24);transition:background-color .4s var(--ease-out),border-color .4s var(--ease-out),color .4s var(--ease-out)}
.looks label b{font:500 14px/1.15 var(--f-body);color:var(--text-primary)}
.looks label span{font:400 10px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.looks label:hover{border-color:rgba(244,230,223,.6)}
.looks input:checked+label{background:var(--text-primary);border-color:var(--text-primary)}
.looks input:checked+label b{color:var(--canvas)}
.looks input:checked+label span{color:var(--puder-soft)}
.looks input:focus-visible+label{outline:2px solid var(--accent);outline-offset:3px}

.tryon-read{min-height:6.4em}
.tryon-read b{display:inline;font:500 italic 22px/1.2 var(--f-display);font-variation-settings:"opsz" 30;color:var(--text-primary);margin-right:14px}
.tryon-read .lvl{display:inline-flex;gap:3px;vertical-align:middle;margin-right:8px;transform:translateY(-2px)}
.tryon-read .lvl i{display:block;width:14px;height:3px;border-radius:2px;background:rgba(244,230,223,.18)}
.tryon-read .lvl i.on{background:var(--szampan)}
.tryon-read em{font:400 10px/1 var(--f-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--szampan);vertical-align:middle}
.tryon-read span{margin-top:8px}

/* ---------- smaller screens ---------- */
@media (max-width:560px){
  .looks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .looks label{min-height:52px}
  .looks label:last-of-type{grid-column:1/-1}
  .look-frame{aspect-ratio:4/3;border-radius:16px}
  .look-pic img{object-position:46% 40%}
  .look-tag{left:10px;top:10px;padding:7px 11px;font-size:12px}
  .look-bare{right:8px;top:8px;bottom:auto;padding:7px 11px;font-size:11px}
  .tryon-read b{display:block;margin:0 0 8px}
}
@media (pointer:coarse){.looks label{min-height:56px}.look-bare{min-height:44px}}
@media (prefers-reduced-motion:reduce){.look-pic{transition:none}}