/* Luxury Girl — site.css
   Mobile first. Phones (< 600px) are the base rules; every component then has its tablet layer right below it, always in the same
   order: 600px (all tablets: 7" Android, foldables, phones on their side) → 734px (tablets) → 1068px (landscape tablets, desktop) →
   special cases (short landscape screens, hover). Photo cards on wide-but-short screens are capped by the screen height (svh).
   Type on tablets (600px+): one scale for every tablet, small text a step up from the phone (body 19, lists and cards 16–17,
   captions 13–15, nothing under 12), so it holds its own next to the bigger headings; text-wrap keeps single words off last lines.
   Order: tokens → base → type → buttons → nav/dock → section rhythm → sections top to bottom → reduced motion. */

@font-face{font-family:"LG Display";src:url(../fonts/wix-madefor-display-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"LG Display";src:url(../fonts/wix-madefor-display-cyrillic-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"LG Display";src:url(../fonts/wix-madefor-display-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"LG Display";src:url(../fonts/wix-madefor-display-cyrillic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"LG Text";src:url(../fonts/wix-madefor-text-latin-wght-normal.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"LG Text";src:url(../fonts/wix-madefor-text-cyrillic-wght-normal.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"LG Text";src:url(../fonts/wix-madefor-text-latin-wght-italic.woff2) format("woff2");font-style:italic;font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"LG Display";src:url(../fonts/wix-madefor-display-latin-ext-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"LG Display";src:url(../fonts/wix-madefor-display-latin-ext-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"LG Text";src:url(../fonts/wix-madefor-text-latin-ext-wght-normal.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"LG Text";src:url(../fonts/wix-madefor-text-latin-ext-wght-italic.woff2) format("woff2");font-style:italic;font-weight:400 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --black:#000;
  --tile:#161617;
  --tile-2:#1d1d1f;
  --tile-3:#232325;
  --paper:#f5f5f7;
  --white:#fff;
  --mist:#86868b;
  --mist-2:#a1a1a6;
  --dim:#424245;
  --line:rgba(255,255,255,.14);
  --action:#0071e3;
  --action-hover:#0077ed;
  --gold:#d8b98a;
  /* champagne: the display type (title, headings, popup titles, lit statement words) is filled top to bottom with a warm metallic
     gradient — beige at the top edge of the capitals, white across their upper half, warm beige at the baseline and below. Stops from the
     font (Wix Madefor Display: ascent 1.01, descent .25, capitals .72 em). Placements of the same colours:
     --champ-band  on a line box of about 1–1.2 em (headings, one band per line: see "Champagne" at the end)
     --champ-hero  on the title's tight .92 em line
     (the statement words, inline spans, build theirs on the font's own box from --w1…--w4: stops 21/32/56/86%) */
  --champ-1:#d9c6ae;--champ-2:#fff;--champ-3:#f2ebe3;--champ-4:#d6c1a8;
  --champ-band:linear-gradient(180deg,var(--champ-1) 15%,var(--champ-2) 28%,var(--champ-3) 57%,var(--champ-4) 93%);
  --champ-hero:linear-gradient(180deg,var(--champ-1) 11%,var(--champ-2) 25%,var(--champ-3) 58%,var(--champ-4));
  --live:#30d158;
  --of:linear-gradient(180deg,#14b3f2,#009bda);
  --fansly:linear-gradient(180deg,#2e9ef7,#1b87e4);
  --tg:linear-gradient(180deg,#30b0ec,#1e98d6);

  --fd:"LG Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ft:"LG Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --gutter:20px;
  --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);   /* the two sides separately: on iPhone Duo they differ */
  --wrap:1180px;
  --nav-h:52px;
  --sec:clamp(76px,12vw,160px);   /* one step between sections (4px grid) */
  --head:24px;                    /* heading → content */
  --r-sm:14px;                   /* small tiles, photo inside a row */
  --r-btn:16px;                  /* buttons, sheet rows */
  --r-md:20px;                   /* row cards, small cards */
  --r-lg:20px;
  --r-xl:28px;                   /* big photo/text cards */
  --gap:12px;                    /* between cards */
  --ease:cubic-bezier(.28,.11,.32,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@media (min-width:600px){:root{--gutter:32px}}
@media (min-width:734px){:root{--gutter:40px;--gap:16px}}
@media (min-width:1068px){:root{--gutter:56px}}

/* =====================================================================
   Base
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px);scrollbar-gutter:stable}   /* no sideways jump when a sheet locks the scroll (desktop) */
/* tablets: a link or button reached with the keyboard is scrolled clear of the buttons fixed at the bottom (the bar below 734 px, the logos above) */
@media (max-width:599.98px){html.dock-on{scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom))}}   /* phones: while the bar is up */
@media (min-width:600px){html{scroll-padding-bottom:96px}}
@media (min-width:734px){html{scroll-padding-bottom:150px}}
@media (min-width:600px) and (max-height:500.98px){html{scroll-padding-bottom:0}}
@media (min-width:734px) and (min-aspect-ratio:6/5) and (min-height:501px),(min-width:1440px) and (min-aspect-ratio:1/1) and (min-height:501px){html:not(.dock-on){scroll-padding-bottom:0}}   /* the push-in hero (sticky): only while the dock is up */
body{margin:0;background:var(--black);color:var(--paper);font-family:var(--ft);font-size:17px;line-height:1.47;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
svg.i{width:1em;height:1em;fill:currentColor;flex:none}
::selection{background:var(--action);color:#fff}
:focus-visible{outline:2px solid var(--action);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.no-ring:focus-visible{outline:none}
.shot-btn:focus-visible{outline-offset:-3px;border-radius:var(--r-lg)}   /* inside the photo: the strip scrolls sideways and would cut a ring outside it */

/* film grain over everything */
body::after{content:"";position:fixed;inset:-10%;z-index:500;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:lg-grain 1.1s steps(5) infinite}
@keyframes lg-grain{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-4%,3%,0)}40%{transform:translate3d(3%,-5%,0)}60%{transform:translate3d(-2%,4%,0)}80%{transform:translate3d(5%,1%,0)}100%{transform:translate3d(0,0,0)}}

.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--paper);color:var(--black);padding:10px 16px;border-radius:999px;font-weight:600}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:max(var(--gutter),var(--sal)) max(var(--gutter),var(--sar))}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* photos fade in over their blurred placeholder (lq.css) */
.js .lq img{opacity:0;transition:opacity .45s var(--ease),transform 1.2s var(--ease-out),filter 1s var(--ease)}
.js .lq img.is-in{opacity:1}
.lq.lq-off{background-image:none!important}

/* =====================================================================
   Type
   ===================================================================== */
.h2{font-family:var(--fd);font-weight:600;font-size:clamp(36px,7.4vw,72px);line-height:calc(1em + 2px);letter-spacing:-.032em;text-wrap:balance}
.h3{font-family:var(--fd);font-weight:600;font-size:clamp(21px,2.4vw,28px);line-height:calc(1em + 5px);letter-spacing:-.018em}
.lead{font-size:clamp(19px,2.1vw,24px);line-height:calc(1em + 7px);letter-spacing:-.014em;color:var(--mist-2);text-wrap:pretty;max-width:34ch}
.h2 + .lead{margin-top:12px}
.fine{font-size:12px;line-height:18px;color:var(--mist);letter-spacing:0}
@media (min-width:600px){
  .h2{font-size:clamp(36px,min(7.4vw,11svh),72px)}          /* wide but short screens: headings scale with the height too */
  .lead{font-size:clamp(21px,2.1vw,24px);line-height:calc(1em + 8px);text-wrap:balance}
  .h2 + .lead{margin-top:16px}
  .fine{font-size:13px;line-height:20px}
}
.it{font-family:var(--ft);font-style:italic;font-weight:500;letter-spacing:-.025em}

html[lang="ru"] .it{font-style:normal}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--ft);font-weight:600;letter-spacing:-.01em;border-radius:999px;background:var(--action);color:#fff;white-space:nowrap;transition:background-color .25s var(--ease),transform .4s var(--ease-out);-webkit-tap-highlight-color:transparent}
@media (hover:hover){.btn:hover{background:var(--action-hover)}}
.btn:active{transform:scale(.97)}
.btn .i{font-size:1.15em}
.btn-sm{font-size:12px;padding:6px 14px;min-height:28px}
.btn-md{font-size:15px;padding:11px 22px;min-height:44px}
.btn-lg{font-size:17px;padding:15px 28px;min-height:52px}
.btn-ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
@media (hover:hover){.btn-ghost:hover{background:rgba(255,255,255,.08)}}
.link{position:relative;color:var(--paper);font-size:17px;font-weight:500;white-space:nowrap;box-shadow:inset 0 -1px 0 rgba(245,245,247,.35);padding-bottom:1px;transition:box-shadow .25s var(--ease)}
@media (hover:hover){.link:hover{box-shadow:inset 0 -1px 0 var(--paper)}}
.link::after{content:"";position:absolute;inset:-10px -4px}            /* 46 px tall tap area */

/* platform pills: OnlyFans and Fansly always as an equal pair, straight to the platform */
.pp-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);width:100%}
.pp{display:flex;align-items:center;gap:12px;min-height:56px;padding:0 16px;border-radius:var(--r-btn);color:#fff;text-align:left;background:var(--pp-bg,var(--action));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.24),0 10px 24px -14px rgba(0,0,0,.7);
  white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform .35s var(--ease-out),filter .25s var(--ease)}
.pp:active{transform:scale(.97)}
@media (hover:hover){.pp:hover{filter:brightness(1.07)}}
.pp-onlyfans{--pp-bg:var(--of)}
.pp-fansly{--pp-bg:var(--fansly)}
.pp-telegram{--pp-bg:var(--tg)}
.pp-ic{display:grid;place-items:center;flex:none}
.pp-ic .i{width:22px;height:22px}
.pp .cta-label{display:flex;flex-direction:column;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:20px;font-family:var(--fd);font-weight:600;font-size:17px;letter-spacing:-.012em}
.pp .cta-label::before{content:attr(data-k);font-family:var(--ft);font-size:11px;line-height:14px;font-weight:500;letter-spacing:0;color:rgba(255,255,255,.82)}
.pp .cta-label:not([data-k])::before{display:none}
@media (min-width:600px){.pp .cta-label::before{font-size:12px;line-height:15px}}
@media (max-width:733.98px){.pp{padding:0 12px;gap:8px}}          /* room for longer words above "OnlyFans" (German, Italian…) */
@media (max-width:319.98px){.pp{padding:0 8px;gap:6px}}           /* narrower than any current phone (Galaxy Fold cover, Duo Split View): Firefox sets the labels 3 px wider than Chromium */
@media (max-width:359.98px){
  .pp .cta-label{font-size:16px}
  .pp .cta-label::before{font-size:10px}
  .buy .pp-ic{display:none}
  .buy .pp{justify-content:center}
}
.route-telegram .pp-alt{display:none}
.route-telegram .pp-pair{grid-template-columns:1fr}
.route-telegram .pp{justify-content:center}
.ph-bottom .pp-pair{margin-top:14px}

/* app-style platform tile (Telegram row, sheets) */
.plat-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:24px;color:#fff;flex:none}
.plat-ic.onlyfans{background:#00aff0}.plat-ic.fansly{background:#2699f7}.plat-ic.telegram{background:#26a5e4}
.chev{width:9px;height:15px;stroke:var(--mist);stroke-width:2;fill:none;flex:none}
.lock{width:30px;height:30px;fill:none;stroke:var(--paper);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   Nav + dock
   ===================================================================== */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);transition:background-color .4s var(--ease),box-shadow .4s var(--ease)}
.nav.is-solid{background:rgba(0,0,0,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{position:relative;font-family:var(--fd);font-weight:600;font-size:19px;letter-spacing:-.022em}
.brand::after{content:"";position:absolute;inset:-12px -8px}          /* 52 px tall tap area */
.nav-end{display:flex;align-items:center;gap:14px}
.nav .btn-sm{position:relative;transition:opacity .3s var(--ease),transform .3s var(--ease),background-color .25s var(--ease)}
.nav .btn-sm::after{content:"";position:absolute;inset:-8px -4px}       /* 46 px tall tap area */

/* language switcher: the current language in the nav, a compact list under it (opens and closes instantly) */
.lang-pick{position:relative}
.lang-btn{position:relative;display:flex;align-items:center;gap:4px;height:28px;padding:0 2px 0 4px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.02em;color:var(--mist-2);transition:color .2s;-webkit-tap-highlight-color:transparent}
.lang-btn::after{content:"";position:absolute;inset:-8px -8px -8px -6px}         /* a 44 px tap target around the small label */
.lang-pick.is-open .lang-btn{color:var(--paper)}
@media (hover:hover){.lang-btn:hover{color:var(--paper)}}
.lang-chev{width:10px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.lang-pick.is-open .lang-chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 12px);right:-8px;z-index:2;width:208px;padding:6px;border-radius:var(--r-sm);
  max-height:calc(100vh - var(--nav-h) - 24px);max-height:calc(100svh - var(--nav-h) - 24px);overflow-y:auto;overscroll-behavior:contain;   /* phones on their side */
  background:#232325;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 24px 48px -12px rgba(0,0,0,.7);transform-origin:calc(100% - 20px) 0}   /* solid: a blur inside the blurred nav doesn't render */
.lang-pick.is-open .lang-menu{animation:lg-menu-in .16s var(--ease-out)}
@keyframes lg-menu-in{from{opacity:0;transform:scale(.94)}}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px;padding:0 12px;border-radius:8px;font-size:16px;line-height:20px;color:var(--paper);-webkit-tap-highlight-color:transparent}
.lang-menu a:focus-visible{background:rgba(255,255,255,.1);outline:none}
@media (hover:hover){.lang-menu a:hover{background:rgba(255,255,255,.1);outline:none}}
.lang-menu a[aria-current]{font-weight:600}
html:not([lang="ru"]) [lang="ru"][data-lang]{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}   /* one Cyrillic word shouldn't pull a 14 KB font into every page */
.lang-ok{width:16px;height:16px;fill:none;stroke:var(--action);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:var(--gap);align-items:center;padding:12px max(var(--gutter),var(--sar)) calc(12px + env(safe-area-inset-bottom)) max(var(--gutter),var(--sal));
  background:rgba(0,0,0,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 -1px 0 rgba(255,255,255,.08);
  transform:translateY(110%);visibility:hidden;transition:transform .55s var(--ease-out),visibility 0s .55s}
.dock.is-on{transform:none;visibility:visible;transition:transform .55s var(--ease-out),visibility 0s}
.dock .btn{flex:1}
.dock-pair{padding-block:10px calc(10px + env(safe-area-inset-bottom))}
.dock-pair .pp{min-height:52px;border-radius:var(--r-btn)}
.dock-pair .pp .cta-label{font-size:16px}
/* phones (the dock is a bar below 734 px): the nav and the dock solid black, without the blur. Safari 26 on iPhone fills the strip under
   the status bar and the strip behind its floating address bar with the colour of the fixed bar at that edge — but only a solid one:
   through a translucent, blurred bar (backdrop-filter) it showed the page scrolling past, and the nav and the buttons looked like bands
   across the content instead of the top and the bottom of the screen (25.10, iPhone). Black = the page, so the edges are seamless.
   Over the hero the nav stays clear (no background): the photo goes up under the status bar */
@media (max-width:733.98px){
  .nav.is-solid,.dock{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}
  body::after{z-index:80}   /* the film grain under the nav and the dock (90, 100), not over them: at the screen's edges Safari has to find
                                the bars, not this full-screen layer */
}
@media (max-width:733.98px){
  .dock-on .nav .btn-sm{opacity:0;transform:scale(.9);pointer-events:none;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}   /* the nav's Join steps aside while the dock is up */
}
@media (max-width:359.98px){
  .nav-in{gap:12px}
  .nav-end{gap:10px}
  .nav .btn-sm{padding-inline:12px}
  .fresh{font-size:12px;padding-right:12px}
}
@media (min-width:600px){
  .brand{font-size:21px}
  .nav .btn-sm{font-size:14px;padding:7px 16px;min-height:32px}
  .nav .btn-sm::after{inset:-6px -4px}                                       /* still a 44 px tap area */
  .lang-btn{font-size:13px}
}
@media (min-width:734px){
  /* tablets and desktop: OnlyFans over Fansly as two round logos on the right edge of the screen, no panel behind them (on wide
     screens they sit in the side margin, clear of the content). A logo opens to "Join on OnlyFans" only under a mouse pointer or keyboard
     focus; on touch screens it stays a logo and a tap goes straight to the platform. Same logic as on phones: up after the hero, away
     over blocks that have these buttons themselves */
  .dock,.dock-pair{left:auto;right:max(16px,env(safe-area-inset-right),calc((100% - 1180px) / 2 - 200px));bottom:calc(20px + env(safe-area-inset-bottom));
    padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
    transform:translateY(calc(100% + 32px));opacity:0;
    transition:transform .55s var(--ease-out),opacity .35s var(--ease),visibility 0s .55s}
  .dock.is-on{transform:none;opacity:1;transition:transform .55s var(--ease-out),opacity .35s var(--ease),visibility 0s}
  .dock .pp-pair{display:flex;flex-direction:column;align-items:flex-end;gap:10px;width:auto}
  /* position:relative on both: they paint in page order, so the upper button's shadow never lands on the lower one (with only the
     hovered one carrying a filter, it was painted above the other and its shadow showed as a dark band across Fansly) */
  .dock .pp,.dock .btn{position:relative;flex:none;width:52px;min-height:52px;border-radius:26px;padding:0 0 0 15px;gap:10px;overflow:hidden;justify-content:flex-start;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.24),0 10px 22px -12px rgba(0,0,0,.75);
    transition:width .4s var(--ease-out),transform .35s var(--ease-out)}
  .dock .btn{padding-left:16px}
  .dock .cta-label{flex:none;overflow:visible;white-space:nowrap;opacity:0;transition:opacity .15s var(--ease)}
  .dock .pp:focus-visible{width:176px}
  .dock .btn:focus-visible{width:236px}
  .dock .pp:focus-visible .cta-label,.dock .btn:focus-visible .cta-label{opacity:1;transition:opacity .25s var(--ease) .12s}
  .dock .pp:hover,.dock .btn:hover{filter:none}                     /* no brightness filter here (the base .pp/.btn hover) */
}
@media (min-width:1068px) and (max-width:1439.98px) and (pointer:fine){   /* laptop windows: 52 px logos 16 px from the edge reached 12 px into the column */
  .dock,.dock-pair{right:8px}
  .dock .pp,.dock .btn{width:44px;min-height:44px;border-radius:22px}
  .dock .pp{padding-left:11px}
  .dock .btn{padding-left:12px}
}
@media (min-width:734px) and (hover:hover){
  .dock .pp:hover{width:176px}
  .dock .btn:hover{width:236px;background:var(--action)}
  .dock .pp:hover .cta-label,.dock .btn:hover .cta-label{opacity:1;transition:opacity .25s var(--ease) .12s}
}

/* =====================================================================
   Sections: one rhythm
   ===================================================================== */
.statement,.inside,.drops,.looks,.personal,.about,.awards-mini,.choose,.follow{padding:var(--sec) 0 0}
.statement{padding-top:28px}
.awards-mini{padding-top:clamp(48px,7vw,96px)}
.follow{padding-bottom:var(--sec)}
@media (min-width:600px){.statement{padding-top:40px}}
@media (min-width:734px){.statement{padding-top:clamp(40px,8vw,120px)}}

/* =====================================================================
   Hero: the photo shrinks into a card while you scroll
   ===================================================================== */
.hero{position:relative;height:calc(100vh + 296px);height:calc(100svh + 296px);--p:0}   /* 296px of scroll for the zoom, whole pixels */
.hero-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;overflow:clip}   /* clip: not a scroll container, so focus or
                                                                     scrollIntoView can't scroll the photo inside it */
.hero-frame{position:absolute;inset:0;overflow:hidden;overflow:clip;--zt:0;--zx:0;--zl:0;--zb:0;--zr:0;will-change:clip-path;   /* --zl: left inset (= --zx except the landscape layout) */
  clip-path:inset(calc(var(--zt) * 1px) calc(var(--zx) * 1px) calc(var(--zb) * 1px) calc(var(--zl) * 1px) round calc(var(--zr) * 1px))}
.hero-frame picture,.hero-frame img{width:100%;height:100%}
.hero-frame picture{animation:lg-breathe 18s ease-in-out infinite alternate}
.hero-frame img{object-fit:cover;object-position:50% 24%;transform:scale(calc(1.12 - var(--p) * .12));transform-origin:50% 30%;will-change:transform}
.hero-shade{position:absolute;inset:-2px 0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.38) 2px,rgba(0,0,0,0) calc(18% + 1.28px),rgba(0,0,0,0) calc(46% + .16px),rgba(0,0,0,.55) calc(70% - .8px),rgba(0,0,0,.88) calc(100% - 2px))}
/* the shade lies over the frame, not inside it, so the card's rounded clip doesn't cut it: Safari clipped the photo layer and the shade
   a pixel apart, and a bright one-pixel line of unshaded photo showed along the card's edges. Outside the card it darkens only black.
   It also reaches 2 px above and below the screen (the stops are shifted so the gradient over the screen is unchanged): when the page
   is drawn scaled (the prototype's device frame, zoom) the photo's last row of pixels no longer peeks out below it */
.hero-copy{position:absolute;inset:auto 0 0 0;padding:0 max(var(--gutter),var(--sar)) max(36px,calc(env(safe-area-inset-bottom) + 28px)) max(var(--gutter),var(--sal));text-align:center;display:flex;flex-direction:column;align-items:center;
  opacity:calc(1 - var(--p) * 2.6);transform:translate3d(0,calc(var(--p) * -60px),0)}
.hero.is-zoomed .hero-copy{visibility:hidden}
.hero-title{font-family:var(--fd);font-weight:700;font-size:clamp(64px,17.4vw,200px);font-size:clamp(64px,min(17.4vw,22svh),200px);line-height:.92;letter-spacing:-.05em;margin-left:-.04em}
.hero-ry{margin-left:.04em}   /* in this font "r" and "y" are the closest pair; at −.05em they touched (owner, 25.10): .04em = the gap of "x" and "u" on every screen */
.hero-ctas{margin-top:20px;width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:14px}
.hero-ctas .btn-lg{min-width:min(100%,300px)}
.hero-copy .fine{margin-top:16px;color:rgba(245,245,247,.55);max-width:34ch;text-wrap:balance}
.hero-title,.hero-ctas,.hero-copy .fine{animation:lg-rise 1.15s var(--ease-out) both}
.hero-title{animation-delay:.15s}
.hero-ctas{animation-delay:.45s}
.hero-copy .fine{animation-delay:.6s}
@keyframes lg-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* Home pages: until the first screen's fonts are in (lang.js, html.lg-fwait, at most 1.5 s) its text stays hidden and the intro
   waits, so the text appears once, in its own font — no jump from the fallback font mid-intro (v12.16). The photo shows as usual. */
.lg-fwait .nav-in,.lg-fwait .hero-awards,.lg-fwait .hero-title,.lg-fwait .fresh,.lg-fwait .hero-ctas,.lg-fwait .hero-copy .fine{visibility:hidden}
.lg-fwait .hero-title,.lg-fwait .fresh,.lg-fwait .hero-ctas,.lg-fwait .hero-copy .fine{animation-play-state:paused}
@keyframes lg-breathe{from{transform:scale(1)}to{transform:scale(1.06)}}

/* "new video … ago" pill */
.fresh{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:7px 14px 7px 8px;line-height:18px;border-radius:999px;background:rgba(255,255,255,.13);max-width:100%;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:13px;font-weight:500;color:var(--paper);animation:lg-rise 1.15s var(--ease-out) .3s both}
.fresh-ic{display:flex;flex:none}
.fresh-ic .i{width:22px;height:22px;padding:4px;border-radius:50%;color:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.fresh-ic .i:first-child{background:#00aff0}
.fresh-ic .i + .i{background:#2699f7;margin-left:-6px}
.fresh-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fresh::after{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--live);animation:lg-ping 2s ease-out infinite}
@keyframes lg-ping{0%{box-shadow:0 0 0 0 rgba(48,209,88,.55)}100%{box-shadow:0 0 0 8px rgba(48,209,88,0)}}

/* awards, one at a time */
.hero-awards{position:absolute;left:max(var(--gutter),var(--sal));right:max(var(--gutter),var(--sar));top:calc(var(--nav-h) + 14px);height:44px;opacity:calc(1 - var(--p) * 3);pointer-events:none}
.award{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--gold);opacity:0;transform:translateY(6px);transition:opacity .8s var(--ease),transform .8s var(--ease-out)}
.award.is-on{opacity:1;transform:none}
.award .laurel{width:22px;display:block;flex:none}
.award .laurel svg,.awm-wins .laurel svg{display:block;width:100%;height:auto}
.award p{text-align:center;line-height:1.2}
.award b{display:block;font-family:var(--fd);font-weight:600;font-size:13px;color:var(--paper);letter-spacing:-.005em}
.award span{display:block;font-size:11px;color:var(--gold);margin-top:2px}
.hero-frame,.hero-pin{contain:paint}
/* hero-keyframes:start — generated by _work/hero_keyframes.py (the formulas and the why are there); edit that, not this */
@supports (animation-timeline:scroll()){
  @media (max-width:599.98px) and (prefers-reduced-motion:no-preference){
    .hero-frame{transform-origin:50% 64.2857%;will-change:transform;animation:lg-card linear both;animation-timeline:scroll(root);animation-range:0 296px}
    .hero-frame img{animation:lg-card-img linear both;animation-timeline:scroll(root);animation-range:0 296px}
    .hero-copy{animation:lg-card-copy linear both;animation-timeline:scroll(root);animation-range:0 296px}
    .hero-awards{animation:lg-card-awards linear both;animation-timeline:scroll(root);animation-range:0 296px}
  }
}
@keyframes lg-card{
  0%{clip-path:none;scale:1 1;border-radius:0px/0px}
  12%{scale:1 1;border-radius:0px/0px}
  14%{scale:0.992 0.9907;border-radius:1.75px/1.75px}
  16%{scale:0.9844 0.9818;border-radius:3.44px/3.45px}
  18%{scale:0.9771 0.9733;border-radius:5.08px/5.1px}
  20%{scale:0.9702 0.9652;border-radius:6.66px/6.7px}
  22%{scale:0.9636 0.9575;border-radius:8.19px/8.25px}
  24%{scale:0.9573 0.9502;border-radius:9.66px/9.74px}
  26%{scale:0.9514 0.9432;border-radius:11.08px/11.17px}
  28%{scale:0.9457 0.9367;border-radius:12.43px/12.55px}
  30%{scale:0.9404 0.9305;border-radius:13.73px/13.88px}
  32%{scale:0.9354 0.9246;border-radius:14.97px/15.15px}
  34%{scale:0.9306 0.9191;border-radius:16.15px/16.35px}
  36%{scale:0.9262 0.9139;border-radius:17.27px/17.51px}
  38%{scale:0.922 0.909;border-radius:18.34px/18.6px}
  40%{scale:0.918 0.9044;border-radius:19.34px/19.64px}
  42%{scale:0.9144 0.9001;border-radius:20.29px/20.62px}
  44%{scale:0.9109 0.8961;border-radius:21.19px/21.54px}
  46%{scale:0.9077 0.8923;border-radius:22.02px/22.4px}
  48%{scale:0.9048 0.8889;border-radius:22.81px/23.21px}
  50%{scale:0.902 0.8857;border-radius:23.54px/23.97px}
  52%{scale:0.8995 0.8827;border-radius:24.21px/24.67px}
  54%{scale:0.8971 0.88;border-radius:24.84px/25.33px}
  56%{scale:0.895 0.8775;border-radius:25.42px/25.93px}
  58%{scale:0.893 0.8752;border-radius:25.95px/26.48px}
  60%{scale:0.8913 0.8731;border-radius:26.43px/26.98px}
  62%{scale:0.8897 0.8713;border-radius:26.87px/27.44px}
  64%{scale:0.8882 0.8696;border-radius:27.27px/27.85px}
  66%{scale:0.8869 0.8681;border-radius:27.62px/28.22px}
  68%{scale:0.8858 0.8667;border-radius:27.94px/28.56px}
  70%{scale:0.8848 0.8655;border-radius:28.22px/28.85px}
  72%{scale:0.8839 0.8645;border-radius:28.47px/29.11px}
  74%{scale:0.8831 0.8636;border-radius:28.68px/29.33px}
  76%{scale:0.8824 0.8628;border-radius:28.87px/29.52px}
  78%{scale:0.8819 0.8622;border-radius:29.02px/29.68px}
  80%{scale:0.8814 0.8616;border-radius:29.15px/29.82px}
  82%{scale:0.881 0.8612;border-radius:29.26px/29.93px}
  84%{scale:0.8807 0.8608;border-radius:29.34px/30.02px}
  86%{scale:0.8805 0.8606;border-radius:29.41px/30.09px}
  88%{scale:0.8803 0.8604;border-radius:29.46px/30.14px}
  90%{scale:0.8802 0.8602;border-radius:29.5px/30.18px}
  92%{scale:0.8801 0.8601;border-radius:29.52px/30.21px}
  94%{scale:0.88 0.86;border-radius:29.53px/30.22px}
  96%{scale:0.88 0.86;border-radius:29.54px/30.23px}
  98%{scale:0.88 0.86;border-radius:29.55px/30.23px}
  100%{clip-path:none;scale:0.88 0.86;border-radius:29.55px/30.23px}
}
@keyframes lg-card-img{
  0%{transform:scale(1.12);scale:1 1;translate:0 0svh}
  12%{transform:scale(1.1056);scale:1 1;translate:0 0svh}
  14%{transform:scale(1.1032);scale:1.0081 1.0094;translate:0 -0.319svh}
  16%{transform:scale(1.1008);scale:1.0159 1.0186;translate:0 -0.629svh}
  18%{transform:scale(1.0984);scale:1.0234 1.0275;translate:0 -0.93svh}
  20%{transform:scale(1.096);scale:1.0308 1.0361;translate:0 -1.222svh}
  22%{transform:scale(1.0936);scale:1.0378 1.0444;translate:0 -1.504svh}
  24%{transform:scale(1.0912);scale:1.0446 1.0524;translate:0 -1.776svh}
  26%{transform:scale(1.0888);scale:1.0511 1.0602;translate:0 -2.038svh}
  28%{transform:scale(1.0864);scale:1.0574 1.0676;translate:0 -2.29svh}
  30%{transform:scale(1.084);scale:1.0634 1.0747;translate:0 -2.531svh}
  32%{transform:scale(1.0816);scale:1.0691 1.0816;translate:0 -2.762svh}
  34%{transform:scale(1.0792);scale:1.0745 1.0881;translate:0 -2.983svh}
  36%{transform:scale(1.0768);scale:1.0797 1.0943;translate:0 -3.193svh}
  38%{transform:scale(1.0744);scale:1.0846 1.1002;translate:0 -3.392svh}
  40%{transform:scale(1.072);scale:1.0893 1.1057;translate:0 -3.581svh}
  42%{transform:scale(1.0696);scale:1.0937 1.111;translate:0 -3.76svh}
  44%{transform:scale(1.0672);scale:1.0978 1.116;translate:0 -3.928svh}
  46%{transform:scale(1.0648);scale:1.1017 1.1206;translate:0 -4.086svh}
  48%{transform:scale(1.0624);scale:1.1053 1.125;translate:0 -4.234svh}
  50%{transform:scale(1.06);scale:1.1086 1.1291;translate:0 -4.372svh}
  52%{transform:scale(1.0576);scale:1.1118 1.1329;translate:0 -4.5svh}
  54%{transform:scale(1.0552);scale:1.1147 1.1364;translate:0 -4.619svh}
  56%{transform:scale(1.0528);scale:1.1173 1.1396;translate:0 -4.728svh}
  58%{transform:scale(1.0504);scale:1.1198 1.1426;translate:0 -4.829svh}
  60%{transform:scale(1.048);scale:1.122 1.1453;translate:0 -4.921svh}
  62%{transform:scale(1.0456);scale:1.124 1.1477;translate:0 -5.004svh}
  64%{transform:scale(1.0432);scale:1.1259 1.15;translate:0 -5.08svh}
  66%{transform:scale(1.0408);scale:1.1275 1.152;translate:0 -5.147svh}
  68%{transform:scale(1.0384);scale:1.129 1.1538;translate:0 -5.208svh}
  70%{transform:scale(1.036);scale:1.1303 1.1553;translate:0 -5.261svh}
  72%{transform:scale(1.0336);scale:1.1314 1.1567;translate:0 -5.308svh}
  74%{transform:scale(1.0312);scale:1.1324 1.1579;translate:0 -5.349svh}
  76%{transform:scale(1.0288);scale:1.1332 1.159;translate:0 -5.384svh}
  78%{transform:scale(1.0264);scale:1.1339 1.1598;translate:0 -5.414svh}
  80%{transform:scale(1.024);scale:1.1345 1.1606;translate:0 -5.439svh}
  82%{transform:scale(1.0216);scale:1.135 1.1612;translate:0 -5.459svh}
  84%{transform:scale(1.0192);scale:1.1354 1.1617;translate:0 -5.475svh}
  86%{transform:scale(1.0168);scale:1.1357 1.162;translate:0 -5.488svh}
  88%{transform:scale(1.0144);scale:1.136 1.1623;translate:0 -5.497svh}
  90%{transform:scale(1.012);scale:1.1361 1.1625;translate:0 -5.504svh}
  92%{transform:scale(1.0096);scale:1.1362 1.1626;translate:0 -5.509svh}
  94%{transform:scale(1.0072);scale:1.1363 1.1627;translate:0 -5.512svh}
  96%{transform:scale(1.0048);scale:1.1363 1.1628;translate:0 -5.513svh}
  98%{transform:scale(1.0024);scale:1.1364 1.1628;translate:0 -5.514svh}
  100%{transform:scale(1);scale:1.1364 1.1628;translate:0 -5.514svh}
}
@keyframes lg-card-copy{0%{opacity:1;transform:none}38.4615%{opacity:0}100%{opacity:0;transform:translate3d(0,-60px,0)}}
@keyframes lg-card-awards{0%{opacity:1}33.3333%{opacity:0}100%{opacity:0}}
/* hero-keyframes:end */
@media (min-width:600px){
  .hero-copy .fine{color:rgba(245,245,247,.64)}
  .hero-awards{height:52px}
  .award{gap:10px}
  .award .laurel{width:26px}
  .award b{font-size:15px}
  .award span{font-size:13px}
  .fresh{gap:10px;padding:8px 16px 8px 9px;font-size:15px;line-height:20px}
  .fresh-ic .i{width:24px;height:24px}
}
@media (min-width:734px){
  .hero{height:calc(100vh + 448px);height:calc(100svh + 448px)}
  .hero-ctas{flex-direction:row;gap:26px}
  .hero-ctas-alt{max-width:none;justify-content:center}   /* a button and a link side by side (pages without subscriptions): centered as a pair */
  .hero-frame img{object-position:50% 26%}
  .hero-title{margin-bottom:.08em;--gx-mb:.08em}   /* the "y" reaches below the tight line box: keep it off the pill at 150–200 px */
}
@media (min-width:1024px) and (min-height:1000px),(min-width:1440px) and (min-height:840px) and (min-aspect-ratio:1/1){   /* the title is 150–200 px here (big tablets, desktop windows): the buttons, pill, award and fine print one step up with it */
  .hero-awards{height:58px}
  .award .laurel{width:28px}
  .award b{font-size:17px}
  .award span{font-size:14px}
  .fresh{font-size:16px;line-height:22px}
  .hero-ctas{max-width:420px}
  .hero-ctas .pp{min-height:62px;padding:0 20px;gap:14px}
  .hero-ctas .pp-ic .i{width:24px;height:24px}
  .hero-ctas .pp .cta-label{font-size:19px;line-height:22px}
  .hero-ctas .pp .cta-label::before{font-size:13px;line-height:16px}
  .hero-ctas .btn-lg{font-size:19px;min-height:60px;padding-inline:32px}
  .hero-copy .fine{margin-top:18px;font-size:14px;line-height:21px}
}
@media (max-height:500.98px){.hero-awards{display:none}}   /* phones on their side, very short windows: no room above the title */
@media (min-aspect-ratio:4/3){.hero-frame img{object-position:50% 30%}}
/* almost square portrait screens (foldables unfolded, 4:3 iPads): the photo is cropped from the top, not around the face, so her face
   sits higher and the title and buttons at the bottom stay under her chin instead of over her mouth */
@media (min-width:600px) and (min-aspect-ratio:3/4) and (max-aspect-ratio:6/5){       /* and it starts less zoomed in (1.04, not 1.12), so the whole face fits between the award line and the title */
  .hero-frame img{object-position:50% 85%;transform:scale(calc(1.04 - var(--p) * .04))}
}
/* landscape screens from 734 px: the photo on the right, the copy on the left. Centred over a full-width portrait photo, the title and
   buttons covered her face and only the eyes showed; a portrait photo can't move sideways in a landscape frame, so it gets a panel.
   While scrolling, the panel itself becomes the card (site.js: left inset --zl = 38% from the start, so all four corners round together)
   and its soft left edge fades out (::before) */
@media (min-width:734px) and (min-aspect-ratio:6/5),(min-width:1440px) and (min-aspect-ratio:1/1){   /* (desktop windows down to square: see the desktop block) */
  .hero-frame picture{position:absolute;top:0;right:0;width:62%}
  .hero-frame img{object-position:50% 18%}
  .hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.35) 2px,rgba(0,0,0,0) calc(16% + 2px),rgba(0,0,0,0) calc(64% + 2px),rgba(0,0,0,.55) calc(100% - 2px))}
  .hero-shade::before{content:"";position:absolute;inset:0;opacity:calc(1 - var(--p) * 1.8);
    background:linear-gradient(90deg,#000 38%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.18) 54%,rgba(0,0,0,0) 62%)}
  .hero-copy{inset:0 auto 0 0;width:56%;justify-content:center;align-items:flex-start;text-align:left;
    padding:calc(var(--nav-h) + 74px) 0 40px max(var(--gutter),var(--sal),calc((100% - 1180px) / 2))}   /* the award line above stays clear of the title */
  .hero-title{font-size:clamp(64px,13vw,176px);font-size:clamp(64px,min(13vw,18svh),176px);margin-left:-.055em;margin-bottom:.12em;--gx-mb:.12em}
  .hero-ctas{width:360px;max-width:100%}
  .hero-ctas-alt{width:auto;max-width:none;flex-wrap:wrap;justify-content:flex-start;row-gap:12px}   /* button + link (/ru/lite/) */
  .hero-copy .fine{text-align:left}
  .hero-awards{left:max(var(--gutter),var(--sal),calc((100% - 1180px) / 2));right:auto;width:50%}
  .award{justify-content:flex-start}
  .award p{text-align:left}
}
@media (min-width:734px) and (min-aspect-ratio:6/5) and (max-height:500.98px){.hero-copy{padding-top:calc(var(--nav-h) + 16px)}}   /* no award line there */
@media (min-width:734px) and (min-aspect-ratio:6/5) and (min-height:501px),(min-width:1440px) and (min-aspect-ratio:1/1) and (min-height:501px){.hero-title{max-width:min-content}}   /* "Luxury / Girl" on two lines even when the height cap makes it small enough for one (1024×600, 1280×720) */
@media (min-width:1024px) and (min-height:1000px) and (min-aspect-ratio:6/5),(min-width:1440px) and (min-height:840px) and (min-aspect-ratio:1/1){.hero-ctas{width:420px}}
/* landscape tablets (from 734 px, 6:5 and wider, taller than 500 px — phones on their side keep the card) and desktop (from 1440 px down
   to square windows, and laptops from 1280 px with a wide, short window — no tablet is that wide or that flat; the 13" iPad Pro is
   1366–1376 px): the first screen is lit like a portrait session. Her face is in a pool of light right of centre and everything around it
   falls off into black (.hero-light, an overlay in screen space: clear around her face, black at the photo's edges, so the photo has no
   visible edge anywhere); the copy sits on the page column on the left with the award line just above the title. The page opens on this
   frame (no light opening up from a narrow vignette, no blur on the copy: Alex wants it to start here). Scrolling is a slow
   camera push-in (site.js, push): one translate + scale for the photo and its light (--pt) moves the camera in to her eyes and lips until
   the close-up fills the screen, the light opens up (--li), and the copy, nearer to the camera, drifts past and fades (--ct, --at, --co).
   At the end the bottom falls to black (--xo), so the close-up leaves into the next block */
.hero-light{display:none}
@media (min-width:734px) and (min-aspect-ratio:6/5) and (min-height:501px),(min-width:1440px) and (min-aspect-ratio:1/1) and (min-height:501px){
  .hero{height:calc(100vh + 88vh);height:calc(100svh + 88svh);
    --pr:max(0px,calc((100cqw - 2000px) / 2));               /* wider than 2000 px: the composition stays on a 2000 px stage */
    --w0:min(110svh,66cqw);                                   /* the photo's width at the start (cqw: the page width, .hero-pin) */
    --fxi:.5;--fyi:.41;                                       /* the focal point in the photo: between her eyes and her lips */
    --fx0:max(calc(var(--pr) + (100cqw - var(--pr) * 2) * .68),calc(max(var(--gutter),var(--sal),(100cqw - 1180px) / 2) + var(--cw) + var(--w0) * .3));
    --fy0:46svh;                                              /* … and where it is on the screen at the start: 68% across (the stage), and on
                                                                 big screens far enough right that the title ends in the dark beside her */
    --lrx:.5;--lry:.86;                                       /* the pool of light, in photo widths (.5: black at the photo's sides) */
    --z1:1;--ex:.46;--ey:.53;                                 /* the close-up at the end: the photo as wide as the screen (stage), its focal point a little left of and below centre */
    --tb:386px;                                               /* the height that is not title: nav, award line, pill, buttons, fine print, gaps */
    --tfs:clamp(64px,min(13vw,18svh,(100svh - var(--tb)) / 1.94),176px);   /* title: the tablet size (desktop below); never taller than the
                                                                 screen leaves room for (short windows: 1300 × 520, 1020 × 510) */
    --cw:max(340px,calc(var(--tfs) * 2.98));                  /* the buttons: as wide as the title, but never so narrow that "Abonnieren auf"
                                                                 is cut (iPhone Duo inner screen on its side, 806 px with the Safari rail) */
    --ah:52px;--agap:22px;                                    /* award line and its gap to the title */
    --atop:max(calc(var(--nav-h) + 24px),calc((100svh + var(--nav-h) * .5 - var(--ah) - var(--agap) - var(--tfs) * 1.94 - 184px) / 2))}
  .hero-pin{container-type:inline-size}
  .hero-frame picture{left:calc(var(--fx0) - var(--w0) * var(--fxi));top:calc(var(--fy0) - var(--w0) * 1.5 * var(--fyi));right:auto;
    width:var(--w0);height:calc(var(--w0) * 1.5);transform-origin:calc(var(--fxi) * 100%) calc(var(--fyi) * 100%);transform:var(--pt,none);animation:none}
  .hero-frame img{object-position:50% 50%;transform-origin:calc(var(--fxi) * 100%) calc(var(--fyi) * 100%);transform:none;will-change:auto;
    animation:lg-breathe 18s ease-in-out infinite alternate}
  /* the light reaches 60% of the screen past every edge (its coordinates shift by that much), so wherever the push-in moves it, its own
     edge never comes into view: outside the pool it is just black */
  .hero-light{display:block;position:absolute;inset:-60svh -60cqw;pointer-events:none;--lx:calc(var(--fx0) + 60cqw);--ly:calc(var(--fy0) + 60svh);
    transform-origin:var(--lx) var(--ly);transform:var(--pt,none);--li:40;
    background:radial-gradient(calc(var(--w0) * .34) calc(var(--w0) * .42) at calc(var(--lx) - var(--w0) * .39) calc(var(--ly) - var(--w0) * .21),
        rgba(0,0,0,.62),rgba(0,0,0,.36) 45%,rgba(0,0,0,0)),      /* a flag over the bright, blurred leaves left of her face */
      radial-gradient(calc(var(--w0) * var(--lrx)) calc(var(--w0) * var(--lry)) at var(--lx) var(--ly),
      rgba(0,0,0,0) calc(var(--li) * 1%),rgba(0,0,0,.42) calc((var(--li) + (100 - var(--li)) * .42) * 1%),
      rgba(0,0,0,.86) calc((var(--li) + (100 - var(--li)) * .74) * 1%),rgba(0,0,0,.97) calc((var(--li) + (100 - var(--li)) * .9) * 1%),#000 100%)}
  .hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.42) 2px,rgba(0,0,0,0) calc(15% + 2px),rgba(0,0,0,0) calc(80% + 2px),rgba(0,0,0,.35) calc(100% - 2px))}
  .hero-shade::before{opacity:var(--xo,0);background:linear-gradient(180deg,rgba(0,0,0,0) 70%,rgba(0,0,0,.62) 88%,#000 calc(100% - 2px))}
  .hero-copy{width:56%;justify-content:flex-start;padding:calc(var(--atop) + var(--ah) + var(--agap)) 0 32px max(var(--gutter),var(--sal),calc((100% - 1180px) / 2));
    opacity:var(--co,1);transform-origin:0 0;transform:var(--ct,none)}   /* the copy rises in as on phones (no blur: Alex) */
  .hero-title{font-size:var(--tfs);margin-bottom:.1em;--gx-mb:.1em}
  .hero-ctas{width:var(--cw);max-width:100%}
  .hero-copy .fine{max-width:var(--cw)}
  .hero-awards{top:var(--atop);height:var(--ah);opacity:var(--co,1);transform-origin:0 0;transform:var(--at,none)}
}
@media (min-width:1440px) and (min-aspect-ratio:1/1),(min-width:1280px) and (min-aspect-ratio:17/10){.hero{--tfs:clamp(80px,min(20svh,11vw,(100svh - var(--tb)) / 1.94),232px)}}   /* desktop: the title bigger */
/* short landscape screens and windows (501–560 px high): no award line, the copy starts under the nav */
@media (min-width:734px) and (min-aspect-ratio:6/5) and (min-height:501px) and (max-height:560.98px){   /* (every window this low and 734+ px wide is wider than 6:5) */
  .hero{--tb:304px;--ah:0px;--agap:0px;--atop:calc(var(--nav-h) + 16px)}
  .hero-awards{display:none}
}
@media (min-width:1024px) and (min-height:1000px) and (min-aspect-ratio:6/5),(min-width:1440px) and (min-height:840px) and (min-aspect-ratio:1/1){   /* the bigger award line (iPad Pro 13", big windows) */
  .hero{--ah:58px;--atop:max(calc(var(--nav-h) + 24px),calc((100svh + var(--nav-h) * .5 - var(--ah) - var(--agap) - var(--tfs) * 1.94 - 200px) / 2))}
}

/* Very short portrait windows still leave the title below the fixed navigation. */
@media (max-width:599.98px) and (max-height:400.98px){
  .hero-copy{padding-bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px))}
  .hero-title{font-size:clamp(40px,min(17.4vw,13svh),64px)}
  .fresh{margin-top:12px}
  .hero-ctas{margin-top:12px}
  .hero-copy .fine{margin-top:12px}
}

/* =====================================================================
   Statement + roles
   ===================================================================== */
.st-kicker{font-size:clamp(20px,5vw,30px);line-height:calc(1em + 4px);color:var(--mist-2);margin-bottom:16px}
.statement-text{font-family:var(--fd);font-weight:600;font-size:clamp(28px,7vw,60px);line-height:calc(1em + 4px);letter-spacing:-.03em;max-width:22ch;text-wrap:pretty}
.statement-text .w{color:var(--dim);transition:color .35s linear}
@media (min-width:600px){.statement-text{font-size:clamp(28px,min(7vw,9svh),60px)}}
.statement-text .w.on{color:var(--paper)}
/* lit words in champagne: the four gradient colours are registered properties, so a word fades from grey into the gradient (without
   @property support it switches at once) */
@property --w1{syntax:"<color>";inherits:false;initial-value:#424245}
@property --w2{syntax:"<color>";inherits:false;initial-value:#424245}
@property --w3{syntax:"<color>";inherits:false;initial-value:#424245}
@property --w4{syntax:"<color>";inherits:false;initial-value:#424245}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .statement-text .w{--w1:var(--dim);--w2:var(--dim);--w3:var(--dim);--w4:var(--dim);
    background:linear-gradient(180deg,var(--w1) 21%,var(--w2) 32%,var(--w3) 56%,var(--w4) 86%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    padding-right:.08em;margin-right:-.08em;                       /* the last letter's ink past its box (negative tracking) is filled too; one word never
                                                                      breaks, so no box-decoration-break (clone changed how the paragraph wraps) */
    transition:--w1 .35s linear,--w2 .35s linear,--w3 .35s linear,--w4 .35s linear}
  .statement-text .w.on{--w1:var(--champ-1);--w2:var(--champ-2);--w3:var(--champ-3);--w4:var(--champ-4)}
}
.st-ask{margin-top:32px;--gx-mt:32px;font-family:var(--fd);font-weight:600;font-size:clamp(22px,5.6vw,34px);line-height:calc(1em + 6px);letter-spacing:-.02em}
.roles{margin-top:16px;display:grid;gap:var(--gap)}
.role{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:10px 16px 10px 10px;border-radius:24px;background:var(--tile);box-shadow:inset 0 0 0 1.5px transparent;
  transition:box-shadow .3s var(--ease),background-color .3s var(--ease),transform .4s var(--ease-out)}
.role:active{transform:scale(.985)}
.role-ph{width:64px;height:64px;border-radius:var(--r-sm);overflow:hidden;flex:none;background:var(--tile-3)}
.role-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.role-tx{flex:1;min-width:0}
.role-tx b{display:block;font-family:var(--fd);font-weight:600;font-size:19px;line-height:24px;letter-spacing:-.015em}
.role-tx span{display:block;margin-top:2px;font-size:14px;line-height:20px;color:var(--mist-2)}
.role-tick{position:relative;width:24px;height:24px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25);transition:background-color .25s,box-shadow .25s}
.role[aria-pressed="true"]{background:#1b2533;box-shadow:inset 0 0 0 1.5px var(--action)}
.role[aria-pressed="true"] .role-tick{background:var(--action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.4l3.6 3.6 7.4-8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;box-shadow:none}
/* from 600 px: three cards side by side, a 4:5 photo on top (role_pic in build.py), the tick on the photo */
@media (min-width:600px){
  .roles{margin-top:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .role{position:relative;flex-direction:column;align-items:stretch;gap:0;padding:8px;border-radius:var(--r-xl)}
  .role-ph{width:100%;height:auto;aspect-ratio:4/5;border-radius:20px;max-height:max(220px,calc(100vh - 190px));max-height:max(220px,calc(100svh - 190px))}
  .role-ph img{object-position:50% 50%;transition:transform 1.2s var(--ease-out)}
  .role-tx{padding:14px 8px 8px}
  .role-tx b{font-size:21px;line-height:26px}
  .role-tx span{margin-top:4px;font-size:15px;line-height:22px;text-wrap:balance}
  .role-tick{position:absolute;top:18px;right:18px;width:28px;height:28px;background:rgba(0,0,0,.28);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.72)}
}
@media (min-width:734px){.role-tx span{font-size:16px;line-height:23px}}
@media (min-width:1068px){
  .role{padding:10px}
  .role-tx{padding:16px 10px 10px}
  .role-tx b{font-size:24px;line-height:30px}
  .role-tx span{font-size:17px;line-height:24px}
  .role-tick{top:22px;right:22px}
}
@media (min-width:600px) and (hover:hover){
  .role:hover .role-ph img{transform:scale(1.035)}
  .role:not([aria-pressed="true"]):hover{background:var(--tile-2)}
}

/* =====================================================================
   What's waiting inside: bento + the vault
   ===================================================================== */
.inside-head{margin-bottom:var(--head)}
.bento{display:grid;gap:var(--gap);grid-template-columns:repeat(2,minmax(0,1fr))}
.tile{position:relative;overflow:hidden;border-radius:var(--r-xl);-webkit-clip-path:inset(0 round var(--r-xl));clip-path:inset(0 round var(--r-xl));background:var(--tile);isolation:isolate}
.tile picture,.tile img{width:100%;height:100%}
.tile img{object-fit:cover;transition:transform 1.2s var(--ease-out)}
.tile-cap{position:absolute;inset:auto 0 0 0;z-index:2;padding:24px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.66) 52%)}
.tile-cap p{margin-top:4px;color:rgba(245,245,247,.78);font-size:15px;line-height:calc(1em + 5px);max-width:30ch}
.tile-xl{grid-column:1 / -1;aspect-ratio:4/5}
.tile-xl img{object-position:50% 30%}
.tile-a,.tile-b{aspect-ratio:3/5}
.tile-xl .tile-cap{padding:20px}
.tile-a .tile-cap,.tile-b .tile-cap{padding:16px}
.tile-a .h3,.tile-b .h3{font-size:19px}
html:not([lang="en"]) .tile-a .h3,html:not([lang="en"]) .tile-b .h3{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}   /* long single words in two narrow tiles */
.tile-a .tile-cap p,.tile-b .tile-cap p{font-size:13px}
@media (hover:hover){.tile:hover img{transform:scale(1.035)}}
/* phones: photo cards get whole-pixel heights on a 4px step (no half-pixel drift down the page) */
@supports (height:round(1.5px,1px)){
  @media (max-width:599.98px){
    .tile-xl{aspect-ratio:auto;height:round(calc((100vw - var(--gutter) * 2) * 1.25),4px)}
    .tile-a,.tile-b{aspect-ratio:auto;height:round(calc((100vw - var(--gutter) * 2 - var(--gap)) / 2 * 5 / 3),4px)}
    .about-photo{aspect-ratio:auto;height:round(calc((100vw - var(--gutter) * 2) * 1.25),4px)}
    .shot picture{aspect-ratio:auto;height:round(calc(min(78vw,420px) * 1.25),4px)}
  }
}

.vault{grid-column:1 / -1;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;background:#0b0b0c}
.tile-veil{position:absolute;inset:0;z-index:0;overflow:hidden}
.tile-veil picture,.tile-veil img{width:100%;height:100%}
.tile-veil img{object-fit:cover;object-position:50% 58%;filter:blur(16px) saturate(1.2) brightness(.62) contrast(1.1);transform:scale(1.2)}
@media (hover:hover){.tile:hover .tile-veil img{transform:scale(1.2)}}
.vault.is-peek .tile-veil img{filter:blur(5px) saturate(1.2) brightness(.8) contrast(1.05)}
.tile-veil::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 28%,rgba(0,0,0,.72))}
.tile-lock{position:relative;z-index:1;height:100%;padding:24px 20px 20px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}
.vault-t{font-family:var(--fd);font-weight:600;font-size:30px;line-height:calc(1em + 2px);letter-spacing:-.026em;color:#fff;max-width:13ch;text-wrap:balance}
.vault-n{margin-top:8px;font-size:15px;line-height:calc(1em + 5px);color:rgba(255,255,255,.72);max-width:30ch}
.unlock{position:relative;margin-top:24px;width:100%;height:62px;border-radius:999px;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;--x:0px;--p:0}
.unlock-knob{position:absolute;left:5px;top:5px;width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;
  transform:translate3d(var(--x),0,0);transition:transform .5s var(--ease-out);box-shadow:0 2px 12px rgba(0,0,0,.28)}
.unlock.is-drag .unlock-knob,.unlock.is-drag .unlock-txt{transition:none}
@media (hover:hover){.unlock{cursor:grab}.unlock.is-drag{cursor:grabbing}}
.lk{width:22px;height:22px;fill:none;stroke:#000;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.lk-s{transform-box:view-box;transform-origin:7px 10px;transition:transform .4s var(--ease-out) .1s}
.unlock.is-open .lk-s{transform:translateY(-1.6px) rotate(-30deg)}
.unlock-txt{position:absolute;inset:0;display:grid;place-items:center;padding-left:46px;font-size:17px;font-weight:500;letter-spacing:-.01em;
  color:transparent;background:linear-gradient(100deg,rgba(255,255,255,.42) 42%,#fff 50%,rgba(255,255,255,.42) 58%) 0 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text;
  animation:lg-shine 2.8s linear infinite;opacity:calc(1 - var(--p) * 1.8);transition:opacity .3s}
@keyframes lg-shine{from{background-position:100% 0}to{background-position:0 0}}

/* from 600 px: big photo + tall photo, then a photo and the vault side by side */
@media (min-width:600px){
  .bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tile > picture{position:absolute;inset:0}                      /* the photo fills the tile: the tile's height comes from the grid, not the photo */
  .tile-xl{grid-column:1 / span 4;grid-row:span 2;aspect-ratio:auto;
    min-height:min(calc(100vw - 70px),max(400px,calc(100vh - 96px)));min-height:min(calc(100vw - 70px),max(400px,calc(100svh - 96px)))}
  .tile-a{grid-column:5 / span 2;grid-row:span 2;aspect-ratio:auto}
  .tile-a img{object-position:30% 50%}                           /* a narrow, tall crop: keep her face in it */
  .tile-b{grid-column:1 / span 3;aspect-ratio:auto;
    min-height:min(calc(50vw + 60px),max(340px,calc(100vh - 200px)));min-height:min(calc(50vw + 60px),max(340px,calc(100svh - 200px)))}
  .vault{grid-column:4 / span 3;min-height:0}
  /* captions: one inset and one description size for all four tiles, so in each row the captions (and the slider) end on one line */
  .tile-xl .tile-cap,.tile-a .tile-cap,.tile-b .tile-cap,.tile-lock{padding:20px}
  .tile-xl .h3{font-size:24px}
  .tile-a .h3,.tile-b .h3{font-size:20px}
  .tile-cap p,.tile-a .tile-cap p,.tile-b .tile-cap p,.vault-n{margin-top:6px;font-size:16px;line-height:22px;text-wrap:balance}
}
@media (min-width:734px){
  .tile-xl{min-height:min(760px,max(400px,calc(100vh - 120px)));min-height:min(760px,max(400px,calc(100svh - 120px)))}
  .tile-b{min-height:min(440px,max(340px,calc(100vh - 280px)));min-height:min(440px,max(340px,calc(100svh - 280px)))}
  .tile-xl .tile-cap,.tile-a .tile-cap,.tile-b .tile-cap,.tile-lock{padding:32px}   /* 32: the end of the vault slider stays clear of the round buttons at the screen edge */
  .tile-xl .h3{font-size:clamp(26px,2.8vw,32px)}
  .tile-a .h3,.tile-b .h3{font-size:clamp(22px,2.4vw,28px)}
  .tile-cap p,.tile-a .tile-cap p,.tile-b .tile-cap p,.vault-n{font-size:17px;line-height:24px}
  .vault-t{font-size:clamp(32px,3.2vw,40px)}
}
@media (min-width:1068px){
  .tile-xl{min-height:min(860px,max(480px,calc(100vh - 120px)));min-height:min(860px,max(480px,calc(100svh - 120px)))}
  .tile-b{min-height:min(500px,max(380px,calc(100vh - 300px)));min-height:min(500px,max(380px,calc(100svh - 300px)))}
}

/* =====================================================================
   New every week: last seven days, next video, latest four
   ===================================================================== */
.c2{margin-top:24px}
.c2-head,.c2-grid{display:grid;grid-template-columns:repeat(7,minmax(0,44px));justify-content:space-between;justify-items:center}   /* first and last day sit on the page edges */
.c2-head span{font-size:12px;line-height:1;color:var(--mist)}
.c2-head span.is-today{color:var(--paper)}
.c2-grid{margin-top:12px;row-gap:10px}
.c2-d{position:relative;width:100%;max-width:44px;aspect-ratio:1;border-radius:var(--r-sm);display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.c2-d b{position:relative;z-index:2;font-family:var(--fd);font-weight:600;font-size:17px;line-height:1;color:var(--mist-2);font-variant-numeric:tabular-nums}
.c2-d.is-today:not(.is-drop)::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--paper)}
.c2-d.is-today:not(.is-drop) b{color:#000}
.c2-img{position:absolute;inset:0;border-radius:inherit;overflow:hidden;background-color:var(--tile)}
.c2-img img{width:100%;height:100%;object-fit:cover;filter:blur(3px) brightness(.62) saturate(1.15);transform:scale(1.15)}
.c2-d.is-drop{transition:transform .35s var(--ease-out)}
.c2-d.is-drop:active{transform:scale(.92)}
.c2-d.is-drop b{color:#fff}
.c2-d i{position:absolute;z-index:3;right:-5px;bottom:-5px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 2.5px var(--black)}
.c2-d i svg{width:8px;height:8px}
.c2-d.is-video i{background:var(--action)}
.c2-d.is-video i svg{fill:#fff;margin-left:1px}
.c2-d.is-photos i{background:#fff}
.c2-d.is-photos i svg{width:10px;height:10px;fill:none;stroke:#000;stroke-width:2.4}
.c2-d.is-later{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
.c2-d.is-next{box-shadow:inset 0 0 0 2px var(--action)}
.c2-d.is-next b{color:var(--paper)}
.c2-d.is-next::after{content:"";position:absolute;inset:-5px;border-radius:18px;box-shadow:0 0 0 1.5px rgba(0,113,227,.7);animation:lg-halo 2.6s ease-out infinite}
.c2-d.is-today.is-drop{box-shadow:0 0 0 2px var(--black),0 0 0 3.5px var(--paper)}
@keyframes lg-halo{0%{transform:scale(.92);opacity:1}100%{transform:scale(1.18);opacity:0}}

.tl-next{margin-top:20px;width:100%;display:flex;align-items:center;gap:16px;padding:16px 20px 16px 16px;border-radius:var(--r-md);background:var(--tile);text-align:left;-webkit-tap-highlight-color:transparent;transition:background-color .25s var(--ease),transform .4s var(--ease-out)}
.tl-next:active{transform:scale(.985)}
@media (hover:hover){.tl-next:hover{background:var(--tile-2)}}
.tl-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--action)}
.tl-ic svg{width:15px;height:15px;fill:#fff;margin-left:2px}
.tl-tx{flex:1;min-width:0}
.tl-tx b{display:block;font-weight:600;font-size:16px;line-height:20px;text-wrap:balance}
.tl-tx span{display:block;margin-top:0;font-size:14px;line-height:20px;color:var(--mist)}
.tl-tx em{font-style:normal;font-weight:500;color:var(--paper);font-variant-numeric:tabular-nums}

.dr-sub{margin-top:40px;font-family:var(--fd);font-weight:600;font-size:21px;line-height:28px;letter-spacing:-.018em}
.dr-grid{margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.dg{display:block;min-width:0;text-align:left;-webkit-tap-highlight-color:transparent;transition:transform .4s var(--ease-out)}
.dg:active{transform:scale(.97)}
.dg-box{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--r-md);overflow:hidden;-webkit-clip-path:inset(0 round var(--r-md));clip-path:inset(0 round var(--r-md));background-color:var(--tile)}
.dg-box picture{position:absolute;inset:0}
.dg-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(13px) brightness(.62) saturate(1.15);transform:scale(1.25)}
.dg.is-video .dg-box img{animation:lg-motion 1.7s ease-in-out infinite;animation-play-state:paused}
.dg.is-video .dg-box::before{content:"";position:absolute;inset:-20%;z-index:1;background:radial-gradient(40% 35% at 50% 50%,rgba(255,220,200,.22),transparent 70%);animation:lg-light 3.4s ease-in-out infinite;animation-play-state:paused}
.dg.is-video.is-vis .dg-box img,.dg.is-video.is-vis .dg-box::before{animation-play-state:running}
.dg-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:12px}
.dg-top{display:flex;align-items:center;justify-content:space-between;height:24px}
.dg-new{font-size:11px;line-height:16px;font-weight:700;padding:4px 8px;border-radius:999px;background:var(--action)}
.dg .lock{width:20px;height:20px;stroke:rgba(255,255,255,.92);stroke-width:1.7}
.dg-ic{position:absolute;left:calc(50% - 24px);top:calc(50% - 24px);left:round(down,calc(50% - 24px),1px);top:round(down,calc(50% - 24px),1px);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dg-ic svg{width:16px;height:16px;fill:#fff;margin-left:3px}
.dg.is-photos .dg-ic svg{fill:none;stroke:#fff;stroke-width:1.7;width:21px;height:21px;margin:0}
.dg-cap{display:block;margin-top:8px}
.dg-cap b{display:block;font-weight:600;font-size:15px;line-height:20px}
.dg-cap span{display:block;font-size:13px;line-height:18px;color:var(--mist)}
@media (hover:hover){                                              /* a pointer over a locked drop: the preview lifts a little, the badge brightens */
  .dg-box img,.c2-img img{transition:filter .35s var(--ease)}
  .dg-ic{transition:background-color .25s var(--ease)}
  .dg:hover .dg-box img{filter:blur(13px) brightness(.78) saturate(1.15)}
  .dg:hover .dg-ic{background:rgba(255,255,255,.32)}
  .c2-d.is-drop:hover .c2-img img{filter:blur(3px) brightness(.82) saturate(1.15)}
}
@keyframes lg-motion{0%{transform:scale(1.25) translate3d(0,0,0)}22%{transform:scale(1.3) translate3d(-1.6%,1.8%,0)}50%{transform:scale(1.26) translate3d(.4%,-1%,0)}74%{transform:scale(1.31) translate3d(1.7%,2%,0)}100%{transform:scale(1.25) translate3d(0,0,0)}}
@keyframes lg-light{0%,100%{transform:translate3d(-12%,6%,0)}50%{transform:translate3d(14%,-8%,0)}}
/* tablets: bigger days on the same edges as the page (first and last day on the margins, like everything below them), four latest drops in a row */
@media (min-width:600px){
  .c2-head,.c2-grid{grid-template-columns:repeat(7,minmax(0,52px))}
  .c2-head span{font-size:13px}
  .c2-d{max-width:52px}
  .c2-d b{font-size:19px}
  .tl-tx b{font-size:17px;line-height:22px}
  .tl-tx span{font-size:14px;line-height:20px}
  .dr-sub{font-size:24px;line-height:30px}
  .dr-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dg-new{font-size:12px;padding:4px 9px}
  .dg-cap{margin-top:10px}
  .dg-cap b{font-size:17px;line-height:22px}
  .dg-cap span{font-size:14px;line-height:20px}
}
@media (min-width:1280px){                                         /* wide screens: the heading on the left, the week on the right (narrower: the 72 px heading broke into 2–3 lines) */
  .drops .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:64px;align-items:end}
  .drops .h2,.drops .lead{grid-column:1}
  .c2{grid-column:2;grid-row:1 / span 2;margin-top:0}
  .dr-sub,.dr-grid{grid-column:1 / -1}
}

/* =====================================================================
   A little taste: gallery rail
   ===================================================================== */
.looks-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:var(--head)}
.rail-btns{display:none;gap:12px}
.rail-btn{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;transition:background-color .25s,opacity .25s}
@media (hover:hover){.rail-btn:hover{background:rgba(255,255,255,.2)}}
.rail-btn[disabled]{opacity:.35;cursor:default}
.rail-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rail{display:flex;gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-inline:max(var(--gutter),var(--sal),calc((100% - var(--wrap)) / 2)) max(var(--gutter),var(--sar),calc((100% - var(--wrap)) / 2));
  scroll-padding-inline:max(var(--gutter),var(--sal),calc((100% - var(--wrap)) / 2)) max(var(--gutter),var(--sar),calc((100% - var(--wrap)) / 2))}   /* 100%, not 100vw: a classic scrollbar (Windows) is not part of the page */
.rail::-webkit-scrollbar{display:none}
.shot{flex:0 0 auto;width:min(78vw,420px);scroll-snap-align:start}
.shot picture{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background-color:var(--tile);transition:filter .6s var(--ease),transform .7s var(--ease-out)}
.shot img{width:100%;height:100%;object-fit:cover}
.rail.is-js .shot:not(.is-on) picture{filter:brightness(.42) saturate(.8);transform:scale(.965)}
.rail-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.rail-dots i{width:6px;height:6px;border-radius:999px;background:var(--dim);transition:width .4s var(--ease-out),background-color .3s}
.rail-dots i.on{width:22px;background:var(--paper)}
@media (min-width:600px){.shot{width:40vw;width:min(40vw,calc((100svh - 120px) * .8))}}       /* on short screens the 4:5 photo fits the height */
@media (min-width:734px){.rail-btns{display:flex}.shot{width:min(38vw,420px);width:min(38vw,420px,calc((100svh - 120px) * .8))}}
@media (min-width:1068px){.shot{width:min(28vw,400px);width:min(28vw,400px,calc((100svh - 120px) * .8))}}

/* =====================================================================
   From Polina, personally (shown when there is a voice note)
   ===================================================================== */
.personal .lead{margin-top:12px;max-width:40ch}
.ps-card{margin-top:var(--head);border-radius:var(--r-xl);background:var(--tile);padding:20px 18px 22px;max-width:480px}
.ps-who{display:flex;align-items:center;gap:12px}
.ps-ava{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;box-shadow:0 0 0 2px var(--live)}
.ps-ava img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ps-who b{display:block;font-weight:600;font-size:16px}
.ps-who span{display:block;font-size:13px;color:var(--mist)}
.voice{margin-top:16px;display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px;border-radius:26px 26px 26px 8px;background:var(--action)}
.voice-play{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--action);display:grid;place-items:center;flex:none}
.voice-play svg{width:16px;height:16px;fill:currentColor;margin-left:2px}
.wave{flex:1;height:30px;display:block}
.wave svg{display:block;width:100%;height:100%}
.wave .w-base{fill:rgba(255,255,255,.5)}
.wave .w-done{fill:#fff}
.voice-dur{font-size:13px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.ps-note{margin-top:16px;font-size:14px;color:var(--mist-2)}

/* =====================================================================
   About + awards
   ===================================================================== */
.about-grid{display:grid;gap:var(--head);align-items:center}
.about-photo{width:100%;border-radius:var(--r-xl);overflow:hidden;-webkit-clip-path:inset(0 round var(--r-xl));clip-path:inset(0 round var(--r-xl));aspect-ratio:4/5;background:var(--tile)}
.about-photo picture,.about-photo img{width:100%;height:100%}
.about-photo img{object-fit:cover;object-position:50% 25%}
.about-text p{margin-top:16px;color:var(--mist-2);font-size:clamp(17px,1.6vw,19px);line-height:calc(1em + 7px);max-width:38ch}
.timeline{margin-top:24px;display:grid;grid-template-columns:minmax(64px,max-content) 1fr;column-gap:16px;border-top:1px solid var(--line)}
.timeline li{display:grid;grid-column:1/-1;grid-template-columns:minmax(64px,max-content) minmax(0,1fr);gap:16px;padding:14px 0 13px;border-bottom:1px solid var(--line);font-size:15px;line-height:20px}
@supports (grid-template-columns:subgrid){.timeline li{grid-template-columns:subgrid}}   /* the year column as wide as its longest label ("Aujourd’hui") */
.timeline b{font-family:var(--fd);font-weight:600;letter-spacing:-.01em}
@media (min-width:600px){
  .about-text p{font-size:19px;line-height:28px;text-wrap:pretty}
  .timeline{grid-template-columns:minmax(72px,max-content) 1fr;column-gap:20px}
  .timeline li{gap:20px;padding:16px 0 15px;font-size:17px;line-height:24px}                  /* columns stay the subgrid (longest label) */
  .timeline span{text-wrap:balance}
}
/* 600–1067 px: the photo beside the introduction (stretched to its height), the timeline across the page below */
@media (min-width:600px) and (max-width:1067.98px){
  .about-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:32px;row-gap:0;align-items:stretch}
  .about-text{display:contents}
  .about-photo{aspect-ratio:auto;min-height:calc((100vw - var(--gutter) * 2 - 32px) * 5 / 12 * 1.25);
    min-height:min(calc((100vw - var(--gutter) * 2 - 32px) * 5 / 12 * 1.25),max(260px,calc(100svh - 96px)))}
  .about-intro{align-self:start}
  .timeline{grid-column:1 / -1;margin-top:40px}
}
@media (min-width:734px) and (max-width:1067.98px){
  .about-grid{column-gap:48px}
  .about-photo{min-height:calc((100vw - var(--gutter) * 2 - 48px) * 5 / 12 * 1.25);
    min-height:min(calc((100vw - var(--gutter) * 2 - 48px) * 5 / 12 * 1.25),max(260px,calc(100svh - 96px)))}
}
@media (min-width:1068px){.about-grid{grid-template-columns:5fr 6fr;gap:64px;align-items:start}}
@media (min-width:1440px) and (min-height:840px) and (min-aspect-ratio:1/1){    /* the join buttons the size of the hero ones on big windows */
  .buy .pp{min-height:62px;padding:0 20px;gap:14px}
  .buy .pp-ic .i{width:24px;height:24px}
  .buy .pp .cta-label{font-size:19px;line-height:22px}
  .buy .pp .cta-label::before{font-size:13px;line-height:16px}
}
@media (min-width:1440px) and (min-aspect-ratio:1/1),(min-width:1280px) and (min-aspect-ratio:17/10){.about-grid{align-items:stretch}.about-photo{align-self:stretch}}   /* desktop: the photo grows with the text (4:5 at least) */

.awm-title{font-family:var(--fd);font-weight:600;font-size:22px;line-height:28px;letter-spacing:-.02em}
.awm-wins{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.awm-wins li{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-md);background:var(--tile)}
.awm-wins .laurel{width:16px;flex:none;color:var(--gold)}
.awm-wins div{min-width:0}
.awm-wins b{display:block;font-family:var(--fd);font-weight:600;font-size:14px;line-height:18px;letter-spacing:-.01em}
.awm-wins span{display:block;margin-top:2px;font-size:12px;line-height:16px;color:var(--gold)}
.awm-more{margin-top:var(--gap);border-radius:var(--r-md);background:var(--tile)}
.awm-more summary{cursor:pointer;list-style:none;padding:14px 16px;font-size:14px;line-height:20px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.awm-more summary::-webkit-details-marker{display:none}
.awm-more summary::after{content:"";width:8px;height:8px;border:solid var(--mist);border-width:0 1.8px 1.8px 0;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.awm-more[open] summary::after{transform:rotate(-135deg)}
@media (hover:hover){
  .awm-more{transition:background-color .25s var(--ease)}
  .awm-more:not([open]):hover{background:var(--tile-2)}
  .awm-more summary:hover::after{border-color:var(--paper)}
}
.awm-more ul{display:grid;grid-template-columns:minmax(52px,max-content) 1fr;column-gap:12px;padding:0 16px 8px}
.awm-more li{display:grid;grid-column:1/-1;grid-template-columns:minmax(52px,max-content) minmax(0,1fr);gap:12px;padding:10px 0 9px;border-top:1px solid var(--line);font-size:13px;color:var(--mist-2);line-height:18px}
@supports (grid-template-columns:subgrid){.awm-more li{grid-template-columns:subgrid}}
.awm-more li b{color:var(--paper);font-weight:600}
@media (min-width:600px){
  .awm-title{font-size:28px;line-height:34px}
  .awm-wins{margin-top:20px}
  .awm-n3{grid-template-columns:minmax(0,1fr)}                     /* three awards (/ru/lite/): one under another (three across were cramped, no lone card either) … */
  .awm-wins li{gap:14px;padding:18px 20px}
  .awm-wins .laurel{width:19px}
  .awm-wins b{font-size:17px;line-height:22px;text-wrap:balance}
  .awm-wins span{margin-top:3px;font-size:14px;line-height:20px;text-wrap:balance}
  /* the list of nominations and records is set exactly like the timeline above it (About): same typefaces, size and rows */
  .awm-more summary{padding:20px 24px;font-size:17px;line-height:24px}
  .awm-more ul{grid-template-columns:minmax(72px,max-content) 1fr;column-gap:20px;padding:0 24px 12px}
  .awm-more li{gap:20px;padding:16px 0 15px;font-size:17px;line-height:24px;color:var(--paper)}
  .awm-more li b{font-family:var(--fd);letter-spacing:-.01em}
  .awm-more li span{text-wrap:balance}
}
@media (min-width:960px){.awm-n3{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* … and in one row where each has room */
@media (min-width:1440px),(min-width:1300px) and (min-aspect-ratio:17/10){   /* desktop (and flat laptop windows): all awards in one row (4; 3 on /ru/lite/), titles one step smaller so each fits on one line; tablets — 2 × 2 */
  .awm-wins{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .awm-wins b{font-size:16px}
}

/* =====================================================================
   Where shall we meet: the buy box
   ===================================================================== */
.buy{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);-webkit-clip-path:inset(0 round var(--r-xl));clip-path:inset(0 round var(--r-xl));min-height:600px;display:flex;flex-direction:column;justify-content:flex-end;background:#000}
.buy-ph{position:absolute;inset:0;z-index:-1;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.75) 0,#000 22%,#000 40%,rgba(0,0,0,.4) 62%,rgba(0,0,0,.1) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.75) 0,#000 22%,#000 40%,rgba(0,0,0,.4) 62%,rgba(0,0,0,.1) 100%)}
.buy-ph picture,.buy-ph img{width:100%;height:100%}
.buy-ph img{object-fit:cover;object-position:50% 18%}
.buy-in{padding:24px 16px 16px}
.buy-t{font-family:var(--fd);font-weight:600;font-size:40px;line-height:1em;letter-spacing:-.034em;color:#fff;max-width:9ch;min-width:min-content}   /* a long word widens it instead of spilling out */
.buy-l{margin-top:12px;font-size:16px;line-height:calc(1em + 6px);color:rgba(255,255,255,.82);max-width:30ch}
.buy .pp-pair{margin-top:24px}
.buy-f{margin-top:16px;font-size:13px;line-height:18px;color:rgba(255,255,255,.64);text-align:center}
.both{margin-top:var(--gap);padding:20px;border-radius:var(--r-xl);background:var(--tile)}
.both-t{font-family:var(--fd);font-weight:600;font-size:19px;line-height:24px;letter-spacing:-.015em}
.of-list{margin-top:16px;display:grid;gap:12px}
.of-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:20px}
.of-list li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:rgba(0,113,227,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.4' fill='none' stroke='%236cb4ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.of-free{display:block;margin-top:12px;font-size:14px;line-height:20px;color:#6cb4ff;font-weight:600}
.tg-free{margin-top:var(--gap);display:flex;align-items:center;gap:16px;padding:16px 20px 16px 16px;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:background-color .2s}
@media (hover:hover){.tg-free:hover{background:var(--tile)}}
.tg-free .plat-ic{width:40px;height:40px;border-radius:50%;font-size:20px}
.tg-free div{flex:1;min-width:0}
.tg-free b{display:block;font-weight:600;font-size:15px;line-height:20px}
.tg-free div span{display:block;font-size:13px;color:var(--mist);line-height:18px}
@media (min-width:600px){
  .buy{min-height:560px;min-height:min(560px,max(400px,calc(100svh - 96px)))}
  .buy-in{padding:40px 32px 32px;max-width:520px}
  .buy-t{font-size:56px;font-size:min(56px,max(40px,13svh))}
  .buy-l{font-size:18px;text-wrap:balance}
  .buy-f{font-size:14px;line-height:20px;text-align:left}
  .both{padding:24px}
  .both-t{font-size:21px;line-height:26px}
  /* two columns on every tablet: four across squeezed the longer lines onto two rows next to one-line ones */
  .of-list{margin-top:18px;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px}
  .of-list li{font-size:17px;line-height:24px;text-wrap:balance}
  .of-list li::before{width:20px;height:20px;margin-top:2px;background-size:20px}
  .of-free{font-size:15px;line-height:22px}
  .tg-free{padding:18px 24px 18px 18px}
  .tg-free .plat-ic{width:44px;height:44px;font-size:22px}
  .tg-free b{font-size:17px;line-height:22px}
  .tg-free div span{font-size:14px;line-height:20px;text-wrap:balance}
}
@media (min-width:734px){
  .buy{min-height:640px;min-height:min(640px,max(420px,calc(100svh - 96px)))}
  .buy-in{padding:48px 44px 44px;max-width:560px}
  .buy-t{font-size:64px;font-size:min(64px,max(40px,13svh))}
  .both{padding:28px}
}

/* =====================================================================
   Follow + footer
   ===================================================================== */
.follow .h2{margin-bottom:var(--head);--gx-mb:var(--head)}
.socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.socials a{display:flex;align-items:center;gap:12px;min-width:0;padding:16px 12px;border-radius:var(--r-md);background:var(--tile);transition:background-color .25s var(--ease)}
@media (hover:hover){.socials a:hover{background:var(--tile-2)}}
.socials .i{font-size:22px}
.socials b{display:block;font-weight:600;font-size:15px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.socials span{display:block;font-size:13px;color:var(--mist);line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.socials div{min-width:0}
@media (max-width:733.98px){.socials a{gap:8px}}
@media (max-width:389.98px){.socials span{font-size:12px}}            /* every handle fits from 360 px wide */
@media (max-width:359.98px){                                          /* 320–359 px: icon above the text, so names and handles still fit */
  .socials a{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 12px}
  .socials div{align-self:stretch}
}
@media (max-width:319.98px){.socials a{padding-inline:8px}}          /* below 320 px: the longest card name ("Schreiben Sie uns") fits without the ellipsis (in Firefox too) */
@media (min-width:360px) and (max-width:374.98px){.socials a{padding-inline:10px;gap:6px}.pp{padding:0 10px}}   /* 360–374 px (Android): Firefox sets the handles and button labels 2–6 px wider than Chromium and Safari, which fit with 1 px to spare */
@media (min-width:600px){.socials a{padding:18px 16px}.socials b{font-size:17px;line-height:22px}}
@media (min-width:734px){.socials{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:734px) and (max-width:899.98px){                   /* four across but narrow: the icon above the name, so the longest card name ("Schreiben Sie uns") fits */
  .socials a{flex-direction:column;align-items:flex-start;gap:12px}
  .socials div{align-self:stretch}
}
@media (min-width:900px){.socials a{padding:20px}.socials span{font-size:14px;line-height:20px}}   /* narrower columns keep 13 px so the longest card name ("Schreiben Sie uns") fits */

.foot{border-top:1px solid var(--line);padding:32px 0 calc(112px + env(safe-area-inset-bottom));color:var(--mist);font-size:12px;line-height:18px}
.foot-row{display:flex;flex-wrap:wrap;gap:26px 24px;align-items:center}   /* wrapped lines 44 px apart: every link a 44 × 44 px target */
.foot-row + .foot-row{margin-top:26px}
.foot a{position:relative;color:var(--mist-2);transition:color .2s}
.foot a::after{content:"";position:absolute;inset:-13px min(-8px,calc((100% - 44px) / 2))}
@media (hover:hover){.foot a:hover{color:var(--paper)}}
.foot p{max-width:80ch}
.foot-lang{column-gap:20px}
.foot-lang [aria-current]{color:var(--paper)}
.nf-lang{display:flex;flex-wrap:wrap;gap:26px 20px;margin-top:40px;font-size:14px;color:var(--mist-2)}
.nf-lang a{position:relative}
.nf-lang a::after{content:"";position:absolute;inset:-12px min(-8px,calc((100% - 44px) / 2))}   /* 44 × 44 px targets */
@media (min-width:600px){
  .foot{font-size:13px;line-height:20px}
  .foot-row{row-gap:24px}
  .foot a::after{inset:-12px min(-8px,calc((100% - 44px) / 2))}
  .foot p{text-wrap:pretty}
}
@media (min-width:734px){.foot{padding-bottom:calc(150px + env(safe-area-inset-bottom))}}   /* room for the two buttons at the very bottom */
@media (min-width:600px) and (max-height:500.98px){                  /* phones on their side: the bar (or capsule) would cover a big part of the screen; Join stays in the nav */
  .dock{display:none}
  .dock-on .nav .btn-sm{opacity:1;transform:none;pointer-events:auto;visibility:visible}
  .foot{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
}

/* business page, 404 */
.page{padding:calc(var(--nav-h) + clamp(70px,12vw,140px)) 0 clamp(90px,12vw,150px);min-height:80vh;min-height:80svh}
.page .h2{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.page .lead{margin-top:18px}
.page-actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}
/* terms and privacy (/terms/, /privacy/): long English text, a comfortable line length */
.legal-date{margin-top:14px;color:var(--mist-2);font-size:15px;line-height:22px}
.legal-text{margin-top:36px;max-width:720px}
.legal-text h2{margin-top:40px;font-family:var(--fd);font-weight:600;font-size:22px;line-height:28px;letter-spacing:-.012em;color:var(--paper)}
.legal-text p,.legal-text li{color:var(--mist-2);font-size:16px;line-height:26px;overflow-wrap:break-word}
.legal-text p{margin-top:14px}
.legal-text h2 + p{margin-top:10px}
.legal-text ul{margin-top:12px;padding-left:22px;list-style:disc}
.legal-text li{margin-top:8px}
.legal-text li::marker{color:var(--mist-2)}
/* way back to the home page, above the title (the button after the text is .page-actions) */
.legal-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:-6px 0 6px;color:var(--mist-2);font-size:15px;line-height:22px;text-decoration:none;transition:color .2s}
.legal-back:hover{color:var(--paper)}
.back-chev{width:8px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.legal-text strong{font-weight:600;color:var(--paper)}
.legal-text a{color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (min-width:600px){
  .legal-text{margin-top:44px}
  .legal-text h2{margin-top:48px;font-size:24px;line-height:30px}
  .legal-text p,.legal-text li{font-size:17px;line-height:28px}
}
/* biography (/bio/ and its languages, v12.13): name and photo, facts at a glance, sections of text, the timeline of the home page
   (.timeline), then the home page's awards (.awards-mini), a closing box with the OnlyFans | Fansly pair and the profiles (.follow).
   The page's own bottom padding gives way to the sections after it (they bring their own --sec) */
.bio{padding-bottom:0;min-height:0}
.bio-head{display:grid;gap:32px;margin-top:12px}
.bio-kicker{font-size:15px;line-height:20px;font-weight:600;color:var(--mist-2)}
.bio-intro .h2{margin-top:6px}
.bio-aka{margin-top:4px;font-family:var(--fd);font-weight:600;font-size:clamp(21px,2.4vw,28px);line-height:calc(1em + 5px);letter-spacing:-.018em;color:var(--mist-2)}
.bio-intro .lead{max-width:40ch}
.bio-intro .lead strong{font-weight:600;color:var(--paper)}
.bio-photo{width:100%;max-width:480px;border-radius:var(--r-xl);overflow:hidden;-webkit-clip-path:inset(0 round var(--r-xl));clip-path:inset(0 round var(--r-xl));aspect-ratio:4/5;background:var(--tile)}
.bio-photo picture,.bio-photo img{width:100%;height:100%}
.bio-photo img{object-fit:cover;object-position:50% 25%}
.bio-facts{margin-top:48px;display:grid;border-top:1px solid var(--line)}
.bio-facts div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;padding:14px 0 13px;border-bottom:1px solid var(--line);font-size:15px;line-height:20px}
.bio-facts dt{color:var(--mist-2)}
.bio-facts dd{margin:0;color:var(--paper)}
.bio-sec{margin-top:56px;max-width:720px}
.bio-h{font-family:var(--fd);font-weight:600;font-size:clamp(26px,3.2vw,36px);line-height:calc(1em + 6px);letter-spacing:-.024em;text-wrap:balance}
.bio-sec p{margin-top:14px;color:var(--mist-2);font-size:17px;line-height:27px;text-wrap:pretty}
.bio-sec .timeline{margin-top:20px}
.bio-qa{margin-top:24px}
.bio-qa h3{font-family:var(--fd);font-weight:600;font-size:19px;line-height:25px;letter-spacing:-.012em;color:var(--paper)}
.bio-sec .bio-qa p{margin-top:6px}
.bio-press{margin-top:20px;display:grid;gap:var(--gap)}
.bio-press a{display:block;padding:16px;border-radius:var(--r-md);background:var(--tile);transition:background-color .25s var(--ease)}
@media (hover:hover){.bio-press a:hover{background:var(--tile-2)}}
.bio-press b{display:block;font-weight:600;font-size:15px;line-height:20px}
.bio-press span{display:block;margin-top:2px;font-size:14px;line-height:20px;color:var(--mist-2)}
.bio-upd{margin-top:32px;color:var(--mist-2);font-size:13px;line-height:18px}
.bio-cta{padding:var(--sec) 0 0}
.bio-cta-in{padding:36px 20px 24px;border-radius:var(--r-xl);background:var(--tile);text-align:center}
.bio-cta-in p{margin:12px auto 0;max-width:34ch;color:var(--mist-2)}
.bio-cta .pp-pair{margin:24px auto 0;max-width:440px}
.about-more{display:inline-block;margin-top:20px}                    /* home page → the biography, under the About text */
@media (min-width:734px){
  .bio-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;column-gap:48px}
  .bio-facts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px;margin-top:64px}
  .bio-facts div{padding:16px 0 15px;font-size:17px;line-height:24px}
  .bio-sec{margin-top:72px}
  .bio-sec p{margin-top:16px;font-size:19px;line-height:30px}
  .bio-qa{margin-top:32px}
  .bio-qa h3{font-size:22px;line-height:28px}
  .bio-press{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bio-cta-in{padding:56px 40px 40px}
}
@media (min-width:1068px){
  .bio-head{column-gap:64px}
}

/* =====================================================================
   Champagne (display headings)
   ===================================================================== */
/* A gradient band per line (background-size 1lh, from the content box), painted through the glyphs. The box gets room around the text —
   accents above the first line, descenders below the last, the last letter's ink right of its box (negative tracking) — and gives it
   back with negative margins, so nothing moves. The band repeats sideways too (it only changes from top to bottom, so the tiles are
   seamless): with repeat-y alone it covered just the content box, and ink beyond it — the last letter, a single word longer than the
   line ("Geschäftsanfragen" in a 320 px sheet) — was not painted at all. Own margins come in as --gx-mt / --gx-mb (set next to the margin itself); a capped width
   grows by the same .1em. Not on an inline span: box-decoration-break: clone (needed there for every line) stops text-wrap: balance/pretty,
   and without it the ink at the end of an inner line is cut */
@supports ((-webkit-background-clip:text) or (background-clip:text)) and (height:1lh){
  .hero-title,.h2,.st-ask,.vault-t,.buy-t,.awm-title,.bio-h{
    background:var(--gx-band,var(--champ-band)) 0 0 / 100% 1lh repeat;background-origin:content-box;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    padding-top:.16em;padding-bottom:.2em;padding-right:.1em;
    margin-top:calc(var(--gx-mt,0px) - .16em);margin-bottom:calc(var(--gx-mb,0px) - .2em);margin-right:-.1em}
  .hero-title{--gx-band:var(--champ-hero)}
  .vault-t{max-width:calc(13ch + .1em)}
  .buy-t{max-width:calc(9ch + .1em)}
  .follow .h2{margin-bottom:calc(var(--gx-mb) - .2em)}          /* its own margin rule is more specific than the list above */
}

/* endless animations stop while their block is off the screen (site.js toggles .is-away on the hero, "inside" and the drops). !important: the
   animation shorthand on the animated elements resets the play state */
.is-away *,.is-away *::before,.is-away *::after{animation-play-state:paused!important}

/* printing: backgrounds on (the champagne headings are a background clipped to the letters; light text on a page printed without
   its black background would vanish too) */
@media print{html{-webkit-print-color-adjust:exact;print-color-adjust:exact}.nav,.dock,.pop,body::after{display:none}}

/* =====================================================================
   Computers (a mouse, from 1068 px): headings and photos also by the window's height
   ===================================================================== */
/* v12.8 (25.10, owner on a 14" MacBook, window 1496×781: "everything is huge"): on a laptop the window is wide but short, and the
   headings and photos, sized by the width, filled a whole screen each — the statement two screens at 60 px, the big tile 661 of 781 px.
   Here they are bounded by the height as well, a step smaller on laptops and up to the old sizes on big monitors only where there is
   room. Body text, the lead, captions, buttons and the hero stay as they are. Touch tablets keep their layout (pointer:fine only) */
@media (min-width:1068px) and (hover:hover) and (pointer:fine){
  :root{--sec:clamp(76px,min(12vw,16svh),160px)}                                 /* between blocks: 125 px on a 781 px window, 160 on tall ones */
  .h2{font-size:clamp(36px,min(4.2vw,7svh),64px)}                               /* 72 → 55 px on 1496×781, 64 on 1920×947 */
  .statement-text{font-size:clamp(28px,min(3.2vw,5.6svh),48px)}                 /* 60 → 44 px on 1496×781, 48 on big windows */
  .tile-xl{min-height:min(660px,max(440px,62svh))}                              /* 661 → 484 px on a 781 px window */
  .tile-b{min-height:min(420px,max(320px,44svh))}                               /* 481 → 344 */
  .shot{width:min(24vw,340px,calc((100svh - 160px) * .7))}                      /* the photo strip: 400 → 340 px wide */
  .about-grid{grid-template-columns:4fr 6fr;align-items:start}                  /* the portrait narrower; it stays 4:5 and in view while the text scrolls */
  .about-photo{align-self:start;aspect-ratio:4/5;min-height:0;max-height:calc(100svh - var(--nav-h) - 64px);position:sticky;top:calc(var(--nav-h) + 32px)}
  .buy{min-height:min(560px,max(420px,70svh))}                                  /* 640 → 547 */
  .buy-t{font-size:min(56px,max(40px,8svh))}                                    /* 64 → 56 */
}
/* the hero title on computers a step smaller too (owner, 25.10): v12.9 took it to 85% (156 → 133 px on 1496×781), v12.11 back up by
   a tenth (owner: "увеличь на 10%"): 146 px on 1496×781, 177 on 1920×947, 220 at most on big monitors (232 before v12.9). The buttons
   under it follow (--cw: as wide as the title), the award line and the copy keep their place (--atop uses --tfs) */
@media (min-width:1440px) and (min-aspect-ratio:1/1) and (hover:hover) and (pointer:fine),(min-width:1280px) and (min-aspect-ratio:17/10) and (hover:hover) and (pointer:fine){
  .hero{--tfs:clamp(79px,min(18.7svh,10.45vw,(100svh - var(--tb)) / 1.94),220px)}
}

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero{height:100vh;height:100svh}
  .hero-frame{clip-path:none}
  .hero-frame img{transform:none}
  .hero-frame picture,.hero-light,.hero-awards{transform:none}
  .hero-light{opacity:1}
  .hero-awards{opacity:1}
  .hero-copy{opacity:1;transform:none}
  .hero-title,.hero-ctas,.hero-copy .fine,.fresh{animation:none}
  .lang-menu,.lang-chev{animation:none!important;transition:none!important}
  body::after,.hero-frame picture,.hero-frame img,.fresh::after,.dg-box img,.dg-box::before,.join-prev .jp-img img,.unlock-txt,.c2-d::after{animation:none!important}
  .unlock-txt{color:#fff;background:none}
  .award,.tile img,.btn,.pp,.dock,.js .lq img{transition:none}
  .role,.role-ph img,.c2-d,.tl-next,.dg,.shot-btn picture,.shot picture,.rail-dots i{transition:none!important}
  .rail.is-js .shot:not(.is-on) picture{filter:none;transform:none}
  .statement-text .w{color:var(--paper);transition:none;--w1:var(--champ-1);--w2:var(--champ-2);--w3:var(--champ-3);--w4:var(--champ-4)}
  .dock.is-on,.unlock-knob,.lk-s,.nav .btn-sm,.dock-on .nav .btn-sm,.dock .pp,.dock .btn,.dock .cta-label{transition:none!important}
}