/* CBX Germany · shared styles for every page.
   Direction (2026-10-11): quiet and natural, like a printed lookbook on rice paper.
   The creators' real photos carry the page; type is a soft book serif, colour stays out of the way.
   Brand orange only marks small things: the logo, the travelling dot, the full stop, focus. */

:root{
  --rice:#F1F0EB;      /* page */
  --linen:#E7E4DD;     /* alternate sections */
  --clay:#D8D1C7;      /* photo placeholders */
  --ink:#24211D;       /* text */
  --stone:#77716A;     /* secondary text */
  --orange:#FF6504;    /* brand, tiny doses */
  --hair:rgba(36,33,29,.14);
  --hair-strong:rgba(36,33,29,.32);

  --f-serif:'Newsreader','Songti SC','STSong','Noto Serif SC','Source Han Serif SC','Microsoft YaHei',Georgia,serif;
  --f-sans:'Hanken Grotesk','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;

  --t-hero:clamp(46px,5.9vw,94px);
  --t-h2:clamp(36px,4.5vw,68px);
  --t-h3:clamp(22px,1.8vw,27px);
  --t-body:clamp(16px,1.05vw,17.5px);

  --gutter:clamp(20px,4.2vw,56px);
  --max:1320px;
  --nav-h:68px;
  --section:clamp(88px,11vw,160px);

  --ease:cubic-bezier(.22,.8,.24,1);
  --shadow-print:0 1px 2px rgba(60,44,28,.06),0 18px 40px -22px rgba(60,44,28,.28);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  margin:0;
  background:var(--rice); color:var(--ink);
  font-family:var(--f-sans); font-size:var(--t-body); font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* paper grain over everything, very faint */
body::after{content:""; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.07; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body.menu-open{overflow:hidden}
img,video,svg{display:block; max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0; list-style:none}
button{font:inherit; color:inherit}
::selection{background:var(--ink); color:var(--rice)}
:focus-visible{outline:2px solid var(--orange); outline-offset:3px}

.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)}
.visually-hidden{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip-link{position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:var(--rice); padding:10px 14px; font-size:14px; text-decoration:none; border-radius:6px}
.skip-link:focus{top:12px}

/* ---------- surfaces: rice paper and linen, nothing darker ---------- */
.scene{position:relative; background-color:var(--bg); color:var(--fg)}
.scene--base{--bg:var(--rice); --fg:var(--ink); --muted:var(--stone); --line:var(--hair)}
.scene--tone{--bg:var(--linen); --fg:var(--ink); --muted:var(--stone); --line:var(--hair)}
.section{padding-block:var(--section)}

/* ---------- type ---------- */
.display{font-family:var(--f-serif); font-weight:340; font-optical-sizing:auto; letter-spacing:-.022em; line-height:1.02; text-wrap:balance}
.accent{font-style:italic; font-weight:300; letter-spacing:-.01em}
.dot{color:var(--orange)}
.label{font-family:var(--f-sans); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); line-height:1.4}
.lead{font-size:clamp(18px,1.35vw,21px); line-height:1.55; color:var(--muted); max-width:40ch; text-wrap:pretty}

.chapter{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:16px; border-top:1px solid var(--line); margin-bottom:clamp(36px,5vw,72px)}
.chapter .label:first-child{color:var(--fg)}
.chapter b{font-weight:500; color:var(--muted)}

/* headlines rise in softly, word by word (script.js splits the words) */
.rw .w{display:inline-block}
.js .rw .w{opacity:0; transform:translateY(.32em); transition:opacity .9s var(--ease),transform 1.1s var(--ease); transition-delay:calc(var(--i,0) * 55ms)}
.js .rw.is-on .w{opacity:1; transform:none}

.js .reveal{opacity:0; transform:translateY(18px); transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.is-in{opacity:1; transform:none}
.js .reveal[data-d="1"]{transition-delay:.1s}
.js .reveal[data-d="2"]{transition-delay:.2s}
.js .reveal[data-d="3"]{transition-delay:.3s}
.js .reveal[data-d="4"]{transition-delay:.4s}

/* small pill tags: "New", "UGC video" */
.tagbox{display:inline-flex; align-items:center; background:rgba(241,240,235,.92); color:var(--ink); font-family:var(--f-sans); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; line-height:1; border-radius:999px; white-space:nowrap; vertical-align:middle}
.tagbox--orange{background:var(--orange); color:var(--ink)}

/* ---------- route: China to Europe, one small dot crossing a hairline ---------- */
/* only transform and opacity animate; all parts share --route-t */
.route{display:flex; align-items:center; gap:14px; --route-t:6.5s}
.route .label{font-family:var(--f-serif); font-style:italic; font-size:18px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--fg)}
.route__line{position:relative; flex:1; height:9px; min-width:60px; background:linear-gradient(var(--hair-strong),var(--hair-strong)) center/100% 1px no-repeat}
.route__line::before,.route__line::after{content:""; position:absolute; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; border:1px solid var(--hair-strong); background:var(--bg,var(--rice))}
.route__line::before{left:-3.5px}
.route__line::after{right:-3.5px}
.route__dot{position:absolute; inset:0; z-index:1; pointer-events:none; transform:translateX(-100%); animation:route-move var(--route-t) infinite}
.route__dot::before{content:""; position:absolute; right:-3.5px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--orange); animation:route-dot var(--route-t) infinite}
/* the dot is fully visible on the China circle from the first frame, rests there, then travels */
@keyframes route-move{
  0%,14%{transform:translateX(-100%); animation-timing-function:cubic-bezier(.45,0,.25,1)}
  74%,100%{transform:translateX(0)}
}
@keyframes route-dot{
  0%,86%{opacity:1}
  97%,100%{opacity:0}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:0 24px;
  font-family:var(--f-sans); font-size:15px; font-weight:500; letter-spacing:0; line-height:1.2;
  text-decoration:none; color:var(--fg); background:transparent;
  border:1px solid var(--hair-strong); border-radius:999px; cursor:pointer;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .15s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn .arrow{transition:transform .25s var(--ease)}
.btn--solid{background:var(--ink); border-color:var(--ink); color:var(--rice)}
@media (hover:hover){
  .btn:hover{border-color:var(--fg)}
  .btn:hover .arrow{transform:translateX(4px)}
  .btn--solid:hover{background:#0F0D0B; border-color:#0F0D0B}
}
.btn--sm{min-height:40px; padding:0 16px; font-size:14px}
.btn--play::before{content:""; width:9px; height:10px; background:var(--orange); clip-path:polygon(0 0,100% 50%,0 100%); flex:none}

.textlink{font-size:15px; font-weight:500; text-decoration:none; color:var(--fg); border-bottom:1px solid var(--hair-strong); padding-bottom:2px; transition:border-color .2s var(--ease)}
.textlink:hover,.textlink:focus-visible{border-color:var(--orange)}
.textlink:active{opacity:.7}

/* ---------- logo ---------- */
.logo{display:inline-flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--ink); white-space:nowrap}
.logo__word{display:inline-flex; align-items:baseline; font-family:var(--f-sans); font-weight:600; font-size:21px; letter-spacing:-.01em; line-height:1}
.logo__word::after{content:""; width:.22em; height:.22em; background:var(--orange); margin-left:.08em}
.logo__sub{font-size:10.5px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--stone); margin-left:2px}

/* ---------- navigation ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h); color:var(--ink);
  background:rgba(241,240,235,.86); -webkit-backdrop-filter:saturate(1.1) blur(14px); backdrop-filter:saturate(1.1) blur(14px);
  border-bottom:1px solid var(--hair)}
.nav__inner{height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px}
.nav__right{display:flex; align-items:center; gap:clamp(14px,2.2vw,30px)}
.nav__link{position:relative; font-size:15px; text-decoration:none; color:rgba(36,33,29,.75); padding-block:8px; transition:color .2s var(--ease)}
.nav__link::after{content:""; position:absolute; left:0; right:0; bottom:3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease)}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after{transform:scaleX(1)}
.nav .btn--sm{--fg:var(--ink)}
.nav .btn[aria-current="page"]{background:transparent; color:var(--ink); border-color:var(--ink)}

.lang-toggle{display:inline-grid; place-items:center; min-width:46px; height:40px; padding:0 12px; background:transparent; color:var(--ink); border:1px solid var(--hair-strong); border-radius:999px; font-family:var(--f-sans); font-size:13.5px; font-weight:500; cursor:pointer; transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.lang-toggle:hover,.lang-toggle:focus-visible{border-color:var(--ink)}
.lang-toggle:active{transform:translateY(1px)}
html.i18n-pending body{visibility:hidden}

/* Chinese: no negative tracking, upright accents (no fake italics in CJK), a little more leading */
html[lang^="zh"] .display{letter-spacing:0; line-height:1.2; font-weight:500}
html[lang^="zh"] .accent{font-style:normal; font-weight:500}
html[lang^="zh"] .label{letter-spacing:.06em}
html[lang^="zh"] .route .label{font-style:normal}
html[lang^="zh"] .lead,html[lang^="zh"] .bio,html[lang^="zh"] p{line-break:strict}

.burger{display:none; width:40px; height:40px; align-items:center; justify-content:center; background:none; border:1px solid var(--hair-strong); border-radius:999px; cursor:pointer; padding:0}
.burger:hover{border-color:var(--ink)}
.burger span{position:relative; display:block; width:15px; height:1.5px; background:var(--ink); transition:transform .25s var(--ease)}
.burger span::before{content:""; position:absolute; left:0; top:-5px; width:100%; height:100%; background:inherit; transition:transform .25s var(--ease)}
.burger[aria-expanded="true"] span{transform:translateY(2.5px) rotate(45deg)}
.burger[aria-expanded="true"] span::before{transform:translateY(5px) rotate(-90deg)}

.menu{position:fixed; inset:var(--nav-h) 0 0 0; z-index:55; background:var(--rice); color:var(--ink);
  padding:24px var(--gutter) 40px; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.menu.is-open{opacity:1; visibility:visible; transform:none; transition-delay:0s}
.menu a{display:flex; justify-content:space-between; align-items:baseline; padding-block:18px; border-bottom:1px solid var(--hair); font-family:var(--f-serif); font-weight:350; font-size:clamp(30px,8vw,40px); letter-spacing:-.02em; text-decoration:none; line-height:1.05}
.menu a .label{color:var(--orange)}
.menu__foot{margin-top:auto; display:flex; flex-direction:column; gap:10px; --muted:var(--stone)}

@media (max-width:860px){
  .nav__link{display:none}
  .burger{display:inline-flex}
}
.lang-toggle,.nav .btn--sm{white-space:nowrap}
@media (max-width:520px){
  .nav__right{gap:8px}
  .logo{gap:8px}
  .logo__word{font-size:19px}
  .logo__sub{font-size:9.5px; letter-spacing:.24em}
  .lang-toggle{min-width:40px; padding:0 9px; font-size:12.5px}
  .nav .btn--sm{padding:0 12px; font-size:13px}
}
@media (max-width:440px){
  .logo__sub{display:none}
}
@media (max-width:400px){
  .nav .btn--sm{padding:0 10px; font-size:12.5px}
}

/* ---------- photos laid out like prints ---------- */
.photo{display:block; text-decoration:none; color:var(--fg)}
.photo__img{display:block; position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--clay); border-radius:2px}
.photo__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.photo__cap{display:block; margin-top:12px; font-family:var(--f-serif); font-style:italic; font-size:16px; color:var(--muted); transition:color .2s var(--ease)}
.photo:hover .photo__img img{transform:scale(1.03)}
.photo:hover .photo__cap{color:var(--fg)}
.photo:active .photo__img img{transform:scale(1.01)}

/* ---------- hero ---------- */
.hero{padding-top:calc(var(--nav-h) + clamp(40px,6vw,88px)); padding-bottom:clamp(72px,9vw,128px)}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(40px,6vw,104px); align-items:center}
.hero h1{font-size:var(--t-hero)}
.hero .lead{margin-top:clamp(24px,2.6vw,34px)}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px}
.hero__photos{position:relative; padding-bottom:clamp(40px,7vw,96px)}
.hero__main{width:76%; margin-left:auto}
.hero__main .photo__cap{text-align:right}
.hero__side{position:absolute; left:0; bottom:0; width:42%}
.hero__side .photo__img{box-shadow:0 0 0 clamp(6px,.8vw,10px) var(--bg),var(--shadow-print)}
.hero__side .photo__cap{margin-top:calc(12px + clamp(6px,.8vw,10px))}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__photos{max-width:560px; width:100%; margin-inline:auto}
}
@media (max-width:640px){
  .hero__actions .btn{flex:1 1 100%}
}

/* ---------- problem ---------- */
.problem__grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(36px,6vw,104px); align-items:end}
.problem h2{font-size:var(--t-h2)}
.problem h2 .soft{display:block; color:var(--muted)}
.problem .lead{color:var(--fg)}
@media (max-width:960px){ .problem__grid{grid-template-columns:1fr} }

/* ---------- film: a quiet frame, no overlays ---------- */
.filmsec{padding-bottom:var(--section)}
.film{max-width:1040px; margin-inline:auto}
.film__screen{position:relative; aspect-ratio:16/9; background:#1c1a17; overflow:hidden; border-radius:3px; box-shadow:var(--shadow-print)}
.film__screen video{width:100%; height:100%; object-fit:cover}
.film__bar{display:flex; justify-content:space-between; align-items:center; gap:18px; padding-top:14px}
.film__bar .label:first-child{color:var(--fg)}
/* sits below the centre so it never covers the film's opening line */
.play{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:transparent; border:0; cursor:pointer; color:var(--ink); padding:20% 0 0; transition:opacity .3s var(--ease)}
.play__btn{display:grid; place-items:center; width:clamp(64px,6.4vw,84px); aspect-ratio:1; border-radius:50%; background:var(--ink); color:var(--rice); box-shadow:0 10px 30px -10px rgba(0,0,0,.4); transition:transform .4s var(--ease)}
.play__btn svg{width:30%; height:30%; margin-left:7%}
.play__label{font-size:14px; font-weight:500; background:var(--rice); padding:6px 14px; border-radius:999px}
.play:hover .play__btn{transform:scale(1.06)}
.play:active .play__btn{transform:scale(.98)}
.play:focus-visible{outline:none}
.play:focus-visible .play__btn{outline:2px solid var(--orange); outline-offset:5px}
.film.is-started .play{opacity:0; visibility:hidden; transition:opacity .2s,visibility 0s .2s}
@media (max-width:640px){
  .film__bar .spec{display:none}
  .play__label{display:none}
}

/* ---------- how we help ---------- */
.help__head{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(24px,5vw,80px); align-items:end; margin-bottom:clamp(48px,6vw,88px)}
.help h2{font-size:var(--t-h2)}
.services{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(28px,3vw,48px)}
.service{display:flex; flex-direction:column; gap:14px; padding-top:22px; border-top:1px solid var(--hair-strong)}
.service h3{font-family:var(--f-serif); font-weight:400; font-size:var(--t-h3); letter-spacing:-.01em; line-height:1.15; display:flex; align-items:center; flex-wrap:wrap; gap:10px}
.service p{color:var(--muted); font-size:16px}
.service .textlink{align-self:flex-start; margin-top:auto}
@media (max-width:1060px){ .services{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:44px} }
@media (max-width:820px){ .help__head{grid-template-columns:1fr} }
@media (max-width:580px){ .services{grid-template-columns:1fr; row-gap:36px} }

/* ---------- how it works ---------- */
.how__title{font-size:var(--t-h2); margin-bottom:clamp(48px,6vw,88px)}
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3.4vw,56px)}
.step{display:flex; flex-direction:column; gap:12px; padding-top:22px; border-top:1px solid var(--hair-strong)}
.step__num{font-family:var(--f-serif); font-style:italic; font-weight:300; font-size:clamp(56px,5.6vw,84px); line-height:.9; color:var(--fg); margin-bottom:clamp(12px,2vw,28px)}
.step h3{font-family:var(--f-serif); font-weight:400; font-size:var(--t-h3); line-height:1.15}
.step p{color:var(--muted); font-size:16px; max-width:34ch}
@media (max-width:820px){ .steps{grid-template-columns:1fr; gap:40px} }

/* ---------- creator teaser ---------- */
.teaser__head{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(24px,5vw,80px); align-items:end; margin-bottom:clamp(44px,6vw,80px)}
.teaser h2{font-size:var(--t-h2)}
.teaser__grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px)}
.tcard{display:block; text-decoration:none; color:var(--fg)}
.tcard__img{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--clay); border-radius:2px}
.tcard__img img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.tcard:hover img,.tcard:focus-visible img{transform:scale(1.035)}
.tcard:active img{transform:scale(1.01)}
.tcard__name{margin-top:14px; font-family:var(--f-serif); font-size:21px; line-height:1.15; letter-spacing:-.005em}
.tcard__meta{margin-top:6px}
.teaser__cta{display:flex; justify-content:center; margin-top:clamp(48px,6vw,80px)}
@media (max-width:1000px){
  .teaser__head{grid-template-columns:1fr}
  .teaser__grid{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); gap:12px; margin-inline:calc(var(--gutter) * -1); padding:4px var(--gutter) 6px; scrollbar-width:none}
  .teaser__grid::-webkit-scrollbar{display:none}
  .tcard{flex:0 0 min(62vw,280px); scroll-snap-align:start}
}

/* ---------- the other direction ---------- */
.strip{padding-block:clamp(64px,8vw,112px)}
.strip__inner{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(28px,5vw,88px); align-items:end}
.strip h2{font-size:clamp(32px,3.6vw,54px)}
.strip__copy{display:flex; flex-direction:column; align-items:flex-start; gap:20px}
.strip p{max-width:44ch; color:var(--muted)}
@media (max-width:820px){ .strip__inner{grid-template-columns:1fr} }

/* ---------- contact ---------- */
.contact__grid{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(40px,6vw,104px); align-items:center}
.contact h2{font-size:var(--t-h2)}
.contact .lead{margin-top:28px}
.contact__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:40px}
.contact__photo{width:100%; max-width:380px; justify-self:end}
@media (max-width:900px){
  .contact__grid{grid-template-columns:1fr}
  .contact__photo{justify-self:start; max-width:300px}
}

/* ---------- WeChat dialog ---------- */
.modal{padding:0; border:0; background:transparent; color:var(--ink); max-width:calc(100vw - 32px); max-height:calc(100svh - 32px)}
.modal::backdrop{background:rgba(36,33,29,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.modal__panel{position:relative; width:min(400px,calc(100vw - 32px)); background:var(--rice); border-radius:6px; padding:44px 32px 30px; text-align:center; box-shadow:0 30px 80px -30px rgba(36,33,29,.5)}
.modal h2{font-size:34px; margin-top:8px}
.modal__qr{width:min(240px,64vw); margin:22px auto 18px; background:#fff; padding:14px; border-radius:6px}
.modal__qr img{width:100%; height:auto}
.modal__id{font-size:14px; letter-spacing:.04em; color:var(--ink)}
.modal__hint{margin-top:10px}
.modal__close{position:absolute; top:12px; right:12px; width:40px; height:40px; display:grid; place-items:center; background:none; border:1px solid var(--hair-strong); border-radius:50%; cursor:pointer; transition:border-color .2s,background-color .2s}
.modal__close:hover{border-color:var(--ink); background:var(--linen)}
.modal__close:active{transform:scale(.96)}

/* ---------- footer ---------- */
.footer{padding-top:clamp(80px,10vw,140px)}
.footer__bottom{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line); padding-block:22px 30px}
.talk{display:flex; flex-direction:column; align-items:center; text-align:center; padding-bottom:clamp(64px,8vw,112px)}
.talk__title{font-size:clamp(56px,8vw,120px); margin-top:14px}
.talk__mail{margin-top:26px; font-size:clamp(17px,1.6vw,20px); font-weight:500; text-decoration:none; color:var(--fg); border-bottom:1px solid var(--hair-strong); padding-bottom:4px; transition:border-color .2s var(--ease)}
.talk__mail:hover{border-color:var(--orange)}
.talk__label{margin-top:44px}
.talk__qr{margin-top:14px; padding:0; border:0; background:none; cursor:pointer; transition:transform .3s var(--ease)}
.talk__qr img{width:190px; height:190px; border-radius:10px; object-fit:contain; background:#fff; padding:6px; box-shadow:var(--shadow-print)}
.talk__qr:hover{transform:translateY(-2px)}
.talk__qr:active{transform:none}
.talk__id{margin-top:14px; font-size:13px; letter-spacing:.06em; color:var(--muted)}
.talk__route{width:min(520px,100%); margin-top:clamp(52px,6vw,76px)}
.footer--compact{padding-top:0}
.footer--compact .footer__bottom{border-top:0}
.footer__legal{display:flex; flex-wrap:wrap; gap:20px}
.footer__legal a{text-decoration:none; transition:color .2s var(--ease)}
.footer__legal a:hover,.footer__legal a[aria-current="page"]{color:var(--fg)}

/* ---------- creators page ---------- */
.cintro{padding-top:calc(var(--nav-h) + clamp(48px,7vw,104px)); padding-bottom:clamp(64px,8vw,104px)}
.cintro__grid{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:end}
.cintro h1{font-size:var(--t-hero)}
.cindex{display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(40px,5vw,64px)}
.cindex a{font-size:14.5px; text-decoration:none; color:var(--fg); border:1px solid var(--hair-strong); border-radius:999px; padding:8px 15px; transition:border-color .2s,background-color .2s}
.cindex a:hover{border-color:var(--ink); background:var(--rice)}
.cindex a:active{transform:translateY(1px)}
@media (max-width:900px){ .cintro__grid{grid-template-columns:1fr} }

.roster{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(72px,8vw,120px) clamp(28px,4vw,64px)}
.ccard{min-width:0; display:flex; flex-direction:column; gap:24px; scroll-margin-top:calc(var(--nav-h) + 28px)}
.ccard__media{position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.tile{position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--clay); border-radius:2px}
.tile img,.tile video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .4s var(--ease),transform 1.2s var(--ease)}
.tile video{opacity:0; object-position:center 25%}
.tile.is-playing video{opacity:1}
.tile.is-playing img{opacity:0}
.tile:hover img{transform:scale(1.03)}
.tile .tagbox{position:absolute; left:10px; bottom:10px; z-index:2}
.pos-top{object-position:top}
.ccard__head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 16px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.ccard h2{font-family:var(--f-serif); font-weight:350; font-size:clamp(30px,3vw,44px); line-height:1.05; letter-spacing:-.018em}
.ccard .stats{white-space:nowrap; color:var(--fg)}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tags li{font-size:13px; border:1px solid var(--hair-strong); border-radius:999px; padding:5px 12px; line-height:1.3}
.bio{color:var(--muted); max-width:60ch}
.ccard__body{display:flex; flex-direction:column; gap:16px}
.ccard__more{align-self:flex-start; margin-top:4px}
@media (max-width:900px){ .roster{grid-template-columns:minmax(0,1fr)} }

/* ---------- inquiry form ---------- */
.inquiry__grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,6vw,104px); align-items:start}
.inquiry h2{font-size:var(--t-h2)}
.form{display:flex; flex-direction:column; gap:22px}
.field{display:flex; flex-direction:column; gap:10px}
.field input,.field select,.field textarea{width:100%; font-family:var(--f-sans); font-size:16px; color:var(--fg); background-color:rgba(255,255,255,.45); border:1px solid var(--hair-strong); border-radius:8px; padding:14px 16px; outline:none; transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.field select{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:44px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2324211D' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center}
.field textarea{resize:vertical; min-height:150px; line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink); background-color:rgba(255,255,255,.75)}
.form__foot{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:6px}
.form__note{font-size:14px; color:var(--muted)}
.form__note.is-error{color:#A43C0A}
.form__note.is-ok{color:var(--fg)}
.form button[disabled]{opacity:.6; cursor:wait}
@media (max-width:900px){ .inquiry__grid{grid-template-columns:1fr} }

/* ---------- creator detail pages ---------- */
.cdetail{padding-top:calc(var(--nav-h) + clamp(36px,5vw,72px)); padding-bottom:clamp(64px,8vw,112px)}
.cdetail .back{display:inline-block; margin-bottom:clamp(32px,4vw,56px)}
.cdetail__grid{display:flex; flex-direction:column; gap:clamp(32px,4vw,56px)}
/* sized so the longest surname (Tatarnikova) fits the full width on every screen */
.cdetail h1{font-size:clamp(44px,10vw,140px); line-height:.95; max-width:100%}
.nowrap{white-space:nowrap}
.cdetail__side{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(24px,5vw,80px); align-items:start; border-top:1px solid var(--line); padding-top:clamp(20px,2.4vw,32px)}
.cdetail__facts{display:flex; flex-direction:column; gap:14px}
.cdetail .stats{color:var(--fg)}
@media (max-width:800px){ .cdetail__side{grid-template-columns:1fr} }

.vgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.vtile{position:relative; aspect-ratio:9/16; background:#1c1a17; overflow:hidden; border-radius:2px}
.vtile video{width:100%; height:100%; object-fit:cover; display:block}
.vtile--fit video{object-fit:contain}
@media (max-width:1000px){ .vgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:700px){ .vgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px} }

.pgrid{columns:3 260px; column-gap:12px}
.ptile{display:block; width:100%; margin:0 0 12px; padding:0; border:0; background:var(--clay); cursor:zoom-in; break-inside:avoid; overflow:hidden; border-radius:2px}
.ptile img{width:100%; height:auto; display:block; transition:transform 1.2s var(--ease)}
.ptile:hover img{transform:scale(1.025)}
.ptile:active img{transform:none}
@media (max-width:560px){ .pgrid{columns:2 140px; column-gap:8px} .ptile{margin-bottom:8px} }

.lightbox{padding:0; border:0; margin:0; width:100vw; height:100svh; max-width:100vw; max-height:100svh; background:rgba(30,27,24,.96); color:var(--rice)}
.lightbox[open]{display:flex; align-items:center; justify-content:center}
.lightbox::backdrop{background:rgba(30,27,24,.9)}
.lightbox__img{max-width:calc(100vw - 160px); max-height:calc(100svh - 120px); width:auto; height:auto; object-fit:contain}
.lightbox__bar{position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:14px var(--gutter)}
.lightbox__count{color:var(--rice)}
.lightbox__btn{width:48px; height:48px; display:grid; place-items:center; background:rgba(30,27,24,.5); color:var(--rice); border:1px solid rgba(241,240,235,.3); border-radius:50%; cursor:pointer; font-size:17px; transition:background-color .2s,border-color .2s,color .2s}
.lightbox__btn:hover{background:var(--rice); border-color:var(--rice); color:var(--ink)}
.lightbox__btn:active{opacity:.8}
.lightbox__prev,.lightbox__next{position:absolute; top:50%; transform:translateY(-50%)}
.lightbox__prev{left:var(--gutter)}
.lightbox__next{right:var(--gutter)}
@media (max-width:700px){
  .lightbox__img{max-width:100vw; max-height:calc(100svh - 160px)}
  .lightbox__prev,.lightbox__next{top:auto; bottom:20px; transform:none}
}

.cnav{border-top:1px solid var(--line)}
.cnav__inner{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding-block:clamp(32px,4vw,56px)}
.cnav__link{display:flex; flex-direction:column; gap:8px; text-decoration:none; color:var(--fg)}
.cnav__link--next{align-items:flex-end; text-align:right}
.cnav__name{font-family:var(--f-serif); font-weight:350; letter-spacing:-.015em; font-size:clamp(24px,3vw,40px); line-height:1.05; transition:opacity .2s var(--ease)}
.cnav__link:hover .cnav__name{opacity:.65}
@media (max-width:640px){
  .cnav__inner{grid-template-columns:1fr 1fr}
  .cnav__all{grid-column:1 / -1; grid-row:2; justify-self:center}
}

/* ---------- legal pages and 404 ---------- */
.legal{padding-top:calc(var(--nav-h) + clamp(48px,7vw,96px)); padding-bottom:var(--section)}
.legal .wrap{max-width:820px}
.legal h1{font-family:var(--f-serif); font-weight:350; font-size:clamp(32px,5vw,64px); hyphens:auto; overflow-wrap:break-word; letter-spacing:-.02em; line-height:1; margin:12px 0 32px}
.legal h2{font-weight:600; font-size:18px; margin:40px 0 12px; color:var(--fg)}
.legal h2 .num{color:var(--muted); margin-right:10px; font-size:15px; font-weight:500}
.legal p{color:var(--muted); line-height:1.75; margin-bottom:12px}
.legal a.inline{color:var(--fg); text-decoration:underline; text-decoration-color:var(--hair-strong); text-underline-offset:3px}
.legal a.inline:hover{text-decoration-color:var(--orange)}
.legal .back{display:inline-block; margin-bottom:8px}
.notfound{min-height:100svh; display:flex; align-items:center; padding-top:var(--nav-h)}
.notfound h1{font-size:var(--t-hero)}
.notfound p{margin:20px 0 32px}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; transition-delay:0s!important}
  .route__dot,.route__dot::before{animation:none!important}
  .route__dot{transform:translateX(-50%)}
  .route__dot::before{opacity:1}
}