/* =========================================================
   ROMANOVA v2 — font sets, best shots, portfolio v2
   ========================================================= */

/* ---------- FONT SETS (headings + paired text), independent from color theme ---------- */
[data-font]{--fds:normal;--fe:inherit;--fes:normal;--few:inherit;--fet:inherit}
[data-font="grotesk"]{--fd:'Oswald','Arial Narrow',sans-serif;--fdw:600;--fdt:uppercase;--fdl:-.01em;--fdlh:.88;--fb:'Manrope',system-ui,sans-serif;--fm:'Manrope',system-ui,sans-serif;--fk:1;--fe:'Cormorant Garamond',Georgia,serif;--fes:italic;--few:500;--fet:none}
body{font-family:var(--fb)}
.sec-label,.hero-meta,.scroll-cue,.wcard-b > span,.pre-cap,.pf-info,.lsw-lbl,.ses-meta,.dial-meta,.best-cap{font-family:var(--fm)}
[data-font="grotesk"] .logo{text-transform:uppercase;letter-spacing:.22em;font-size:21px}
.pcard .pp,.stat b,.works-count,.ftr-clock,.pre-count,.pg-big,.lb-count{font-style:var(--fds,normal)}
.about-photo .note{font-family:'Cormorant Garamond',serif;font-style:italic}

/* font switcher */
.fsw .tsw-btn b{font-family:var(--fd);font-weight:var(--fdw);font-style:var(--fds,normal);font-size:17px;line-height:1;text-transform:none;letter-spacing:0;min-width:24px;text-align:center}
.fsw .tsw-menu{width:330px}
.fsw-item .fs-a{flex:0 0 52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--bg2);font-size:24px;line-height:1}
.fsw-item b{font-size:16px}
.m-fonts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.m-fonts button{padding:12px 4px;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);display:grid;justify-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.m-fonts button span{font-size:24px;line-height:1;letter-spacing:0;text-transform:none}
.m-fonts button.on{border-color:var(--acc);background:var(--bg2)}

/* hot price card: accent outline instead of an inverted block */
.pcard.hot{background:var(--card);color:var(--ink);border:1.5px solid var(--acc);box-shadow:0 40px 80px -40px color-mix(in srgb,var(--acc) 55%,transparent)}
.pcard.hot .pt,.pcard.hot li{color:var(--muted)}
.pcard.hot .pp{color:var(--acc)}
[data-theme="rock"] .pcard.hot,[data-theme="cute"] .pcard.hot,[data-theme="silver"] .pcard.hot{background:var(--card);color:var(--ink)}
[data-theme="silver"] .pcard.hot .pp{color:var(--ink)}
.pcard.hot .btn{border-color:var(--acc);color:var(--on-acc);background:var(--acc)}
.pcard.hot .btn::before{background:var(--ink)}
.pcard.hot .btn:hover{color:var(--bg)}
.pcard.hot li::before{color:var(--acc)}
[data-theme="silver"] .pcard.hot .btn{background:var(--chrome);background-size:200% 100%;animation:shine2 9s linear infinite;border-color:transparent}
.hot-badge{background:var(--acc);color:var(--on-acc)}
[data-theme="silver"] .hot-badge{background:#e8eaed;color:#0b0c0e}

/* =========================================================
   HOME — «Лучшие кадры»
   ========================================================= */
.best-d{height:240vh;position:relative}
.best-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.best-title{position:absolute;inset:0;display:grid;place-items:center;text-align:center;z-index:5;pointer-events:none}
.best-title .h2{font-size:calc(var(--fk,1) * clamp(60px,9vw,170px))}
.best-title .sec-label{justify-content:center;margin-bottom:18px}
.best-title .sec-label::after{display:none}
.best-title .btn{pointer-events:auto;margin-top:28px}
.bp{position:absolute;left:0;top:0;overflow:hidden;border-radius:calc(var(--r) * .5 + 2px);cursor:pointer;will-change:transform;box-shadow:0 30px 60px -30px rgba(0,0,0,.55);transition:filter .6s, opacity .6s;z-index:2}
[data-theme="cute"] .bp{border-radius:22px}
.bp img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.best-d.hovering .bp{filter:grayscale(.85) brightness(.5)}
.best-d.hovering .bp.on{filter:none;z-index:6}
.bp.on img{transform:scale(1.08)}
.best-cap{position:fixed;left:0;top:0;z-index:50;pointer-events:none;padding:8px 12px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:0;white-space:nowrap}
/* mobile: three counter-moving columns */
.best-m{padding-top:90px;overflow:hidden}
.best-m .h2{margin-bottom:22px}
.bcols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;height:130vw;max-height:680px;overflow:hidden;margin:0 calc(var(--gut) * -1);padding:0 8px;-webkit-mask:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.bcol{display:flex;flex-direction:column;gap:8px;will-change:transform}
.bcol div{border-radius:calc(var(--r) * .4 + 4px);overflow:hidden;background:var(--bg2);flex:none}
.bcol img{width:100%;height:100%;object-fit:cover;display:block}

/* =========================================================
   PORTFOLIO v2
   ========================================================= */
.mode-sw{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:6px;border:1px solid var(--line);border-radius:999px;margin-top:34px;background:color-mix(in srgb,var(--card) 70%,transparent)}
.mode-sw button{position:relative;z-index:1;padding:16px 30px;border-radius:999px;font-family:var(--fd);font-weight:var(--fdw);font-style:var(--fds,normal);text-transform:var(--fdt);letter-spacing:var(--fdl);font-size:calc(var(--fk,1) * clamp(20px,2vw,28px));line-height:1;transition:color .5s var(--ease);white-space:nowrap}
.mode-sw button sup{font-family:var(--fm);font-size:11px;font-weight:600;font-style:normal;letter-spacing:.05em;margin-left:6px;opacity:.6;text-transform:none}
.mode-sw button.on{color:var(--on-acc)}
.mode-ind{position:absolute;top:6px;bottom:6px;border-radius:999px;background:var(--acc);transition:left .7s var(--ease),width .7s var(--ease)}
[data-theme="silver"] .mode-ind{background:var(--chrome);background-size:200% 100%;animation:shine2 10s linear infinite}
@media (max-width:899px){ .mode-sw{display:grid;width:100%} .mode-sw button{padding:14px 8px} }

/* sessions index */
.ses-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,40px) clamp(14px,2vw,30px);padding:34px 0 40px}
@media (max-width:1100px){ .ses-grid{grid-template-columns:repeat(2,1fr)} }
.ses{cursor:pointer;display:block}
@media (min-width:1101px){ .ses:nth-child(3n+2){margin-top:80px} }
@media (max-width:1100px){ .ses:nth-child(2n){margin-top:40px} }
.ses-img{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:calc(var(--r) * .5 + 2px);background:var(--bg2)}
[data-theme="cute"] .ses-img{border-radius:200px 200px 24px 24px}
.ses-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),opacity .7s}
.ses-img img:not(:first-child){opacity:0}
.ses:hover .ses-img img{transform:scale(1.05)}
.ses-num{position:absolute;left:14px;top:12px;z-index:2;color:#fff;font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.14em;mix-blend-mode:difference}
.ses-cnt{position:absolute;right:12px;bottom:12px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em}
.ses-b{padding-top:14px}
.ses-b h3{font-size:calc(var(--fk,1) * clamp(30px,3.2vw,56px));line-height:.95}
.ses-meta{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
@media (max-width:599px){ .ses-grid{gap:22px 10px} .ses-b h3{font-size:calc(var(--fk,1) * 28px)} .ses-meta{flex-direction:column;gap:2px;font-size:10px} }

/* session header */
.ses-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:10px 0 30px;border-bottom:1px solid var(--line);margin-bottom:24px}
.ses-head h2{font-size:calc(var(--fk,1) * clamp(60px,11vw,200px))}
.back{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.back svg{width:18px;height:18px;transition:transform .5s var(--ease)}
.back:hover svg{transform:translateX(-6px)}
.ses-facts{display:grid;gap:6px;text-align:right;font-size:13px;color:var(--muted)}
.ses-facts b{color:var(--ink);font-weight:600}
.ses-next{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:70px;padding:30px 0;border-top:1px solid var(--line);cursor:pointer}
.ses-next small{display:block;font-family:var(--fm);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.ses-next .disp{font-size:calc(var(--fk,1) * clamp(40px,6vw,100px))}
.ses-next img{width:clamp(90px,10vw,160px);aspect-ratio:4/5;object-fit:cover;border-radius:calc(var(--r) * .5);transition:transform .8s var(--ease)}
.ses-next:hover img{transform:rotate(-4deg) scale(1.06)}
@media (max-width:899px){ .ses-head{flex-direction:column;align-items:flex-start} .ses-facts{text-align:left} }

/* ---------- DIAL «Круг» ---------- */
.dial{position:relative;height:100vh;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw)}
.dial-bg{position:absolute;inset:-10%;background-size:cover;background-position:center;filter:blur(70px) saturate(1.2);opacity:.25}
.dial-photo{position:absolute;left:var(--gut);top:calc(var(--hdr) + 24px);bottom:70px;width:calc(66vw - var(--gut) - 90px);cursor:zoom-in;z-index:2}
.dial-photo .dp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.dial-photo img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:calc(var(--r) * .4 + 2px);box-shadow:0 50px 100px -40px rgba(0,0,0,.6)}
[data-theme="cute"] .dial-photo img{border-radius:24px}
.dial-ring{position:absolute;inset:0;pointer-events:none;z-index:3}
.dial-arc{position:absolute;border:1px solid var(--line);border-radius:50%;pointer-events:none}
.dial-mark{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 22%,transparent)}
.dt{position:absolute;left:0;top:0;width:86px;height:112px;margin:-56px 0 0 -43px;border-radius:calc(var(--r) * .3 + 4px);overflow:hidden;pointer-events:auto;cursor:pointer;background:var(--bg2);will-change:transform,opacity;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.dt img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.dial-info{position:absolute;right:var(--gut);top:calc(var(--hdr) + 24px);text-align:right;z-index:4;pointer-events:none}
.dial-num{font-family:var(--fd);font-weight:var(--fdw);font-style:var(--fds,normal);font-size:calc(var(--fk,1) * clamp(70px,7vw,130px));line-height:.85;letter-spacing:var(--fdl)}
.dial-num small{font-size:.3em;opacity:.45;margin-left:.15em}
.dial-meta{margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dial-hint{position:absolute;right:var(--gut);bottom:26px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--muted);display:flex;gap:10px;align-items:center;z-index:4}
.dial-prog{position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:2px;background:var(--line);z-index:4}
.dial-prog i{position:absolute;inset:0;background:var(--acc);transform-origin:left;transform:scaleX(0)}
@media (max-width:899px), (hover:none){
  .dial{height:100svh}
  .dial-photo{left:var(--gut);right:var(--gut);width:auto;top:calc(var(--hdr) + 62px);bottom:auto;height:47svh}
  .dt{width:56px;height:72px;margin:-36px 0 0 -28px}
  .dial-info{left:var(--gut);right:var(--gut);top:calc(var(--hdr) + 10px);text-align:left;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .dial-num{font-size:calc(var(--fk,1) * 44px)}
  .dial-meta{margin:0;font-size:10px;text-align:right}
  .dial-hint{right:auto;left:50%;transform:translateX(-50%);bottom:12px;white-space:nowrap}
}

/* ---------- BLINDS «Шторки» ---------- */
.blinds{display:flex;gap:8px;height:min(78vh,760px)}
.bl{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:calc(var(--r) * .5 + 2px);cursor:pointer;background:var(--bg2);transition:flex 1s var(--ease)}
.bl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .8s}
.bl:not(.on) img{filter:grayscale(.7) brightness(.75);transform:scale(1.15)}
.bl.on{flex:7}
.bl-t{position:absolute;left:14px;bottom:14px;z-index:2;color:#fff;font-family:var(--fm);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.bl.on .bl-t{writing-mode:horizontal-tb;transform:none}
.bl-n{position:absolute;right:14px;top:12px;z-index:2;color:#fff;font-family:var(--fd);font-weight:var(--fdw);font-style:var(--fds,normal);font-size:calc(var(--fk,1) * 40px);line-height:1;opacity:0;transition:opacity .6s}
.bl.on .bl-n{opacity:1}
.bl::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 60%,rgba(0,0,0,.45));pointer-events:none}
@media (max-width:899px), (hover:none){
  .blinds{flex-direction:column;height:auto;gap:6px}
  .bl{flex:none;height:64px;transition:height .9s var(--ease)}
  .bl.on{height:62svh;flex:none}
  .bl-t{top:50%;bottom:auto;margin-top:-8px;writing-mode:horizontal-tb;transform:none}
  .bl.on .bl-t{top:auto;bottom:14px;margin:0}
}

/* ---------- TUNNEL «Тоннель» ---------- */
.tunnel{position:relative;height:100vh;overflow:hidden;perspective:900px;width:100vw;margin-left:calc(50% - 50vw)}
.tn-world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.tn{position:absolute;left:0;top:0;cursor:pointer;will-change:transform,opacity}
.tn img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r) * .4 + 2px);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.tn-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:calc(var(--fk,1) * clamp(60px,10vw,180px));opacity:.08;white-space:nowrap;pointer-events:none}
.tn-hud{position:absolute;left:var(--gut);right:var(--gut);bottom:22px;display:flex;justify-content:space-between;font-family:var(--fm);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);z-index:3}

/* ---------- edit mode (portfolio.html?edit) ---------- */
.lb-star{position:absolute;left:20px;top:14px;width:auto !important;padding:0 18px;font-size:13px;font-weight:700;gap:8px;display:none !important}
body.edit-mode .lb-star{display:flex !important;align-items:center}
.lb-star.on{background:var(--acc);color:var(--on-acc)}
.edit-bar{position:fixed;left:20px;bottom:20px;z-index:80;display:flex;gap:8px;align-items:center;padding:8px 8px 8px 16px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:12px;font-weight:700;box-shadow:0 20px 50px -20px rgba(0,0,0,.5)}
.edit-bar button{padding:9px 14px;border-radius:999px;background:var(--bg);color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:899px){ .edit-bar{left:10px;right:10px;bottom:84px;justify-content:space-between} }

/* ---------- mobile horizontal sliders + explicit swipe hint ---------- */
.hs{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--gut) 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.hs::-webkit-scrollbar{display:none}
.hs-item{position:relative;flex:0 0 76vw;max-width:360px;aspect-ratio:4/5;scroll-snap-align:center;border-radius:calc(var(--r) * .5 + 6px);overflow:hidden;background:var(--bg2);transition:transform .5s var(--ease)}
.hs-item img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.hs-item span{position:absolute;left:12px;bottom:12px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.hs-end{flex:0 0 12px}
.hs-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hs-count{font-family:var(--fd);font-weight:var(--fdw);font-style:var(--fds,normal);font-size:calc(var(--fk,1) * 26px);line-height:1}
.swipe-hint{display:inline-flex;align-items:center;gap:12px;font-family:var(--fm);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.sh-hand{width:48px;height:30px;border-radius:999px;border:1px solid var(--acc);display:grid;place-items:center;overflow:hidden;flex:none}
.sh-hand svg{width:26px;height:14px;color:var(--acc);animation:swipe 1.6s var(--ease) infinite}
[data-theme="silver"] .sh-hand,[data-theme="silver"] .sh-hand svg{border-color:#fff;color:#fff}
.best-field{position:absolute;inset:0}

/* ---------- mobile fixes: layout switcher fits, info row, scrollable tabs hint ---------- */
@media (max-width:899px), (hover:none){
  .lsw{left:10px;right:10px;transform:none;max-width:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:5px}
  .lsw button{justify-content:center;padding:9px 2px;font-size:10px}
  .lsw-ind{top:5px;bottom:5px}
  .pf-info{flex-direction:column;align-items:flex-start;gap:6px}
  .styles{position:sticky}
  .styles .wrap{position:relative}
  .styles-in{-webkit-mask:linear-gradient(90deg,#000 80%,transparent);mask:linear-gradient(90deg,#000 80%,transparent);padding-right:56px}
  .styles.at-end .styles-in{-webkit-mask:none;mask:none}
  .tabs-hint{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;pointer-events:none;transition:opacity .4s}
  .tabs-hint svg{width:18px;height:10px;color:var(--acc);animation:swipe 1.6s var(--ease) infinite}
  [data-theme="silver"] .tabs-hint svg{color:#fff}
  .styles.at-end .tabs-hint{opacity:0}
}
@media (min-width:900px) and (hover:hover){ .tabs-hint{display:none} }
#pfInfo{white-space:nowrap}

/* words split into letters must never wrap letter-by-letter */
.w,.wi{white-space:nowrap}
@media (max-width:899px){
  .pf-title{font-size:calc(var(--fk,1) * 15.5vw)}
  .pf-title sup{font-size:12px;margin-top:.6em}
}