/* =========================================================
   ROMANOVA v3 — real fonts, one heading font everywhere,
   seamless soft mercury, button & card fixes
   ========================================================= */



/* ---------- one heading font, no italic inserts anywhere ---------- */
.disp em,.disp em .wi,.disp em .ch{font:inherit !important;letter-spacing:inherit !important;text-transform:inherit !important;color:inherit}
.about-big{font-family:var(--fb);font-weight:500;font-size:clamp(22px,2.2vw,34px);line-height:1.3}
.about-photo .note{font-family:var(--fd) !important;font-style:var(--fds,normal) !important;font-weight:var(--fdw);text-transform:var(--fdt);font-size:clamp(22px,2.2vw,34px)}
.theme-wipe .tw-name{font-size:calc(var(--fk,1) * clamp(70px,16vw,260px));line-height:.9;white-space:nowrap}

/* split words get room for side bearings / overhangs so glyphs are never clipped */
.w{padding:.08em .16em .2em;margin:-.08em -.16em -.2em}
.hero-name,.ftr-giant,.pf-title,.contact-big,.ses-head h2,.best-title .h2{max-width:100%}
.ftr{overflow:hidden}
.ftr-giant{padding:0 var(--gut)}

/* ---------- seamless soft mercury ---------- */
@property --sh{syntax:'<length>';inherits:true;initial-value:0px}
:root{--merc:radial-gradient(circle at 30% 40%,#fff,#c4c9cf 60%)}
[data-theme="silver"] .chrome{animation:mercsh 40s linear infinite}
@keyframes mercsh{from{--sh:0px}to{--sh:-1024px}}
[data-theme="silver"] .chrome:not(.split):not(:has(.w)),
[data-theme="silver"] .chrome .wi:not(:has(.ch)),
[data-theme="silver"] .chrome .ch{
  background-image:var(--merc) !important;background-color:transparent !important;
  background-size:1024px 512px !important;background-repeat:repeat !important;background-attachment:scroll !important;
  /* background-position is animated by v5 (mercflow); an !important value here would freeze it */
  -webkit-background-clip:text !important;background-clip:text !important;
  color:transparent !important;-webkit-text-fill-color:transparent !important;animation:none !important
}
[data-theme="silver"] .chrome .wi:has(.ch){background:none !important;animation:none !important}

/* mercury fills (buttons, switches, badges, the Love Story card) */
@keyframes mercpan{from{background-position:0 0}to{background-position:-520px 0}}
[data-theme="silver"] .btn--acc,[data-theme="silver"] .mode-ind,[data-theme="silver"] .pg.on,[data-theme="silver"] .st-ind,
[data-theme="silver"] .circle-btn,.pcard.hot{
  background-image:var(--merc) !important;background-color:#c9ced4 !important;background-size:520px 260px !important;
  background-repeat:repeat !important;animation:mercpan 22s linear infinite !important
}
[data-theme="silver"] .btn--acc{color:#0b0c0e !important;border-color:transparent !important}

/* ---------- buttons: fill always reaches the corners, label always readable ---------- */
.btn::before{z-index:-1}
.btn:hover::before{width:var(--d,520px);height:var(--d,520px)}
.circle-btn:hover::before{transform:scale(1.02)}
[data-theme="silver"] .btn:not(.btn--acc):hover{color:#0b0c0e !important}
[data-theme="silver"] .btn:not(.btn--acc)::before{background:#e3e6ea}
[data-theme="silver"] .btn--acc::before{background:#0b0c0e !important}
[data-theme="silver"] .btn--acc:hover{color:#fff !important;border-color:#0b0c0e !important}
[data-theme="silver"] .circle-btn{color:#0b0c0e !important}
[data-theme="silver"] .circle-btn::before{background:#0b0c0e !important}
[data-theme="silver"] .circle-btn:hover{color:#fff !important}
.btn--fill:hover{color:var(--on-acc) !important}
[data-theme="silver"] .btn--fill:hover{color:#0b0c0e !important}

/* ---------- Love Story price card: mercury background + black text (all themes) ---------- */
.pcard.hot{color:#0b0c0e !important}
.pcard.hot h3,.pcard.hot .pp{color:#0b0c0e !important;-webkit-text-fill-color:#0b0c0e}
.pcard.hot .btn,.pcard.hot .hot-badge,.pcard.hot .btn *{-webkit-text-fill-color:currentColor !important}
.pcard.hot{border-color:transparent !important;box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.pcard.hot .pt,.pcard.hot li{color:rgba(11,12,14,.72) !important}
.pcard.hot li::before{color:#0b0c0e !important}
.pcard.hot .hot-badge{background:#0b0c0e !important;color:#fff !important}
.pcard.hot .btn{background:#0b0c0e !important;color:#fff !important;border-color:#0b0c0e !important;animation:none !important}
.pcard.hot .btn::before{background:#ffffff !important}
.pcard.hot .btn:hover{color:#0b0c0e !important}
.pcard.hot .chrome .wi,.pcard.hot .chrome .ch{background:none !important;-webkit-text-fill-color:#0b0c0e !important;color:#0b0c0e !important}

/* ---------- liquid mercury canvas (silver hero) ---------- */
.merc{display:none !important}
.merc-cv{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
[data-theme="rock"] .merc-cv,[data-theme="cute"] .merc-cv{display:none}

/* font menu now has 6 options */
.m-fonts{grid-template-columns:repeat(3,1fr)}

/* rolling labels: the span holds the label + its copy, so it must move by half its height */
.btn:hover .btn-t>span{transform:translateY(-50%)}
.nav a:hover span{transform:translateY(-50%)}

.hero-m .merc-cv{z-index:5}

/* ---------- flying mercury on/off ---------- */
[data-merc="off"] .merc-cv{display:none}
[data-merc="off"] .chrome{animation:none !important}
[data-merc="off"] .btn--acc,[data-merc="off"] .mode-ind,[data-merc="off"] .pg.on,[data-merc="off"] .st-ind,[data-merc="off"] .circle-btn,[data-merc="off"] .pcard.hot{animation:none !important}
.mtg{display:none;align-items:center;gap:9px;padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:color-mix(in srgb,var(--card) 70%,transparent);transition:border-color .3s}
[data-theme="silver"] .mtg{display:inline-flex}
.mtg:hover{border-color:var(--acc)}
.mtg i,.m-mtg i{position:relative;width:34px;height:20px;border-radius:999px;background:var(--line);transition:background .35s;flex:none}
.mtg i::after,.m-mtg i::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform .45s var(--ease),background .35s}
.mtg[aria-pressed="true"] i,.m-mtg[aria-pressed="true"] i{background-image:var(--merc);background-size:120px 60px;background-color:#c9ced4}
.mtg[aria-pressed="true"] i::after,.m-mtg[aria-pressed="true"] i::after{transform:translateX(14px);background:#0b0c0e}
.m-mtg{display:none;width:100%;justify-content:space-between;align-items:center;margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
[data-theme="silver"] .m-mtg{display:flex}
@media (max-width:1179px), (hover:none), (pointer:coarse){ .hdr .mtg span{display:none} .hdr .mtg{padding:6px} }

/* header fits on laptops: compact controls < 1520px, sections menu → burger < 1340px */
@media (max-width:1519px){
  .hdr .tsw-btn > span:last-child,.hdr .mtg span{display:none}
  .hdr .tsw-btn{padding:6px 10px 6px 6px}
  .hdr .mtg{padding:6px}
}
@media (min-width:900px) and (max-width:1339px){
  .burger{display:grid}
  .m-menu{display:flex !important}
  .nav{display:none !important}
}