/* ============================================================================
   base.css — structure and behaviour shared by all five versions.
   Personality lives in v1..v5.css, which override the tokens below.

   Design system: JL Dossier · v1. Paper and ink, madder as accent only.
   Oswald = names and numbers. Golos Text = everything read.
   JetBrains Mono = uppercase service captions only.
   Steps 4 / 8 / 20. Radii 5 / 8 / 10 / 14. Gutter 18 on mobile.
   ========================================================================== */

@font-face{font-family:Oswald;src:url(/assets/fonts/oswald.woff2)format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:Golos;src:url(/assets/fonts/golos.woff2)format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:JBMono;src:url(/assets/fonts/jbmono.woff2)format("woff2");font-weight:400 700;font-display:swap}

:root{
  --paper:#e8e0cf;
  --paper-out:#d8cfba;
  --ink:#231d14;
  --accent:#a8321e;              /* 5.09:1 on paper */
  --accent-on-ink:#e9967a;       /* 7.24:1 on ink — madder itself is 2.5:1 there */
  --ink-72:#5a5348;              /* 5.80:1 on paper */
  --ink-fill:rgba(35,29,20,.09);
  --line:rgba(35,29,20,.25);
  --line-hard:rgba(35,29,20,.34);
  --hair:rgba(35,29,20,.16);
  --on-ink:#e8e0cf;
  --on-ink-60:rgba(232,224,207,.62);   /* 5.69:1 on ink */
  --on-ink-72:rgba(232,224,207,.74);   /* 7.50:1 on ink */
  --field:rgba(232,224,207,.09);
  --field-line:rgba(232,224,207,.34);
  --scrim:rgba(24,19,13,.86);

  --ff-display:Oswald,"Arial Narrow",sans-serif;
  --ff-body:Golos,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ff-mono:JBMono,ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --gut:18px; --s1:4px; --s2:8px; --s3:20px;
  --maxw:1080px;
  --r1:5px; --r2:8px; --r3:10px; --r4:14px;
  --block:clamp(30px,6vw,58px);
  --header:123px;

  /* Height of a work frame. Versions override this — it is the one number
     that decides whether the work reads as evidence or as texture. */
  --reelh:min(62vh,440px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header) + 10px)}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 15px/1.6 var(--ff-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:var(--accent);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:99;padding:12px 18px;background:var(--accent);color:var(--on-ink)}
.skip:focus{left:8px;top:8px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.cap{font:400 11px/1 var(--ff-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-72)}

/* --- Header + tabs ------------------------------------------------------- */
.top{position:sticky;top:0;z-index:40;background:var(--ink);color:var(--on-ink)}
.top-in{display:flex;justify-content:space-between;align-items:center;
  padding:10px var(--gut);max-width:var(--maxw);margin-inline:auto}
.lockup{display:flex;align-items:center;gap:2px;color:var(--on-ink);min-height:44px}
.lockup b{font:700 19px/1 var(--ff-display);letter-spacing:.06em}
.lockup span{font:400 14px/1 var(--ff-body);opacity:.85}
.langbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px var(--s1);
  font:400 11px/1 var(--ff-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-60)}
:root[lang=en] .langbtn .l-ru,:root[lang=ru] .langbtn .l-en{color:var(--on-ink-60)}
:root[lang=en] .langbtn .l-en,:root[lang=ru] .langbtn .l-ru{color:var(--on-ink)}
.tabs{background:var(--ink);display:flex;padding:0 10px;max-width:var(--maxw);margin-inline:auto}
.tabs a{flex:1;padding:13px var(--s1);text-align:center;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  font:400 11px/1 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-ink-60);border-radius:var(--r2) var(--r2) 0 0;transition:color .18s,background .18s}
.tabs a[aria-current=true]{background:var(--paper);color:var(--ink)}
.tabs a:not([aria-current=true]):hover{color:var(--on-ink)}
@media(min-width:760px){.tabs a{flex:0 0 auto;padding:13px 26px}}

/* --- Blocks -------------------------------------------------------------- */
main{display:block}
.block{padding-top:var(--block)}
.block-head{margin-bottom:12px}

/* --- 01 Profile ----------------------------------------------------------
   Depth here is composition, not decoration: the figure is cut out and sits
   against the paper with nothing behind it. An earlier pass floated a faded
   desk photo back there and it read as a grey smudge — website.md is explicit
   that flatness is solved by hierarchy, not by adding another layer. ------ */
/* Mobile sets the type around the figure rather than beside it. A two-column
   grid here leaves the left column empty above a short portrait, because the
   text block is always taller; a float lets the name, badges and line wrap
   past the figure and close that hole. */
.who{display:block}
.who-stage{position:relative;float:left;width:136px;margin:2px 16px 10px 0}
.who-txt{min-width:0}
.portrait{position:relative;aspect-ratio:892/1166;border:1px solid var(--line);
  border-radius:var(--r2);overflow:hidden;background:var(--ink-fill)}
.portrait img{width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.who-name{font:600 clamp(26px,7.6vw,32px)/1 var(--ff-display);letter-spacing:.005em;text-transform:uppercase}
.who-meta{margin-top:var(--s2);font:400 11px/1.9 var(--ff-mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-72)}
.who-badges{margin-top:10px;display:flex;flex-wrap:wrap;gap:5px}
.badge{display:inline-flex;align-items:center;border-radius:var(--r1);
  font:400 11px/1 var(--ff-mono);letter-spacing:.11em;text-transform:uppercase;padding:6px 9px}
.badge-fill{background:var(--accent);color:var(--on-ink);font-weight:700;letter-spacing:.13em}
.badge-line{border:1px solid var(--line-hard);color:var(--ink)}
.who-line{margin-top:12px;font-size:14px;line-height:1.6;color:var(--ink-72);max-width:46ch}

/* Tools. Marks, not a logo wall: one row, small, captioned once. */
.kit{clear:left;margin-top:16px;padding-top:12px;border-top:1px solid var(--hair)}
.kit-cap{display:block;margin-bottom:8px}
.kit-row{display:flex;flex-wrap:wrap;gap:6px}
.kit-i{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--r1);
  border:1px solid var(--hair);background:rgba(35,29,20,.03);overflow:hidden}
.kit-i img{width:24px;height:24px;object-fit:contain}

/* --- 02 Work: a real horizontal reel ------------------------------------
   Frames autoplay muted and loop, because that is what a reel does. Sound is
   one tap away. Only what is on screen is allowed to play, so seventeen
   clips never become seventeen decoders. -------------------------------- */
.strip{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:0 var(--gut) 6px;scroll-padding-left:var(--gut);
  scrollbar-width:none;min-height:var(--reelh)}
.strip::-webkit-scrollbar{display:none}
@media(min-width:760px){
  .strip{padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2 + var(--gut)))}
}
.strip-empty{align-self:center;font-size:13px;color:var(--ink-72)}
.frame{position:relative;flex:0 0 auto;height:var(--reelh);aspect-ratio:9/16;
  scroll-snap-align:start;border:1px solid var(--line-hard);border-radius:var(--r2);
  overflow:hidden;background:var(--ink-fill);padding:0;cursor:pointer;
  transition:border-color .18s}
.frame:hover{border-color:var(--accent)}
.frame img,.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame video{opacity:0;transition:opacity .3s}
.frame.playing video{opacity:1}
.frame-lang{position:absolute;top:6px;left:6px;z-index:3;padding:3px 6px;border-radius:3px;
  background:var(--scrim);color:var(--paper);
  font:400 11px/1 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase}
/* Sound + fullscreen controls sit in the corner, not across the picture. */
.frame-ctl{position:absolute;right:6px;bottom:6px;z-index:4;display:flex;gap:6px}
.fbtn{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r1);
  background:var(--scrim);color:var(--paper);transition:background .18s}
.fbtn:hover{background:var(--accent)}
.fbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.strip-note{margin-top:10px;font-size:13px;line-height:1.6;color:var(--ink-72)}

/* --- 03 Included --------------------------------------------------------- */
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{border:1px solid var(--line);border-radius:var(--r1);padding:6px 9px;
  font:400 11px/1 var(--ff-mono);letter-spacing:.09em;text-transform:uppercase}
.note{margin-top:10px;font-size:13px;line-height:1.55;color:var(--ink-72);max-width:60ch}
.note-quiet{margin-top:6px}
/* One callout per screen, only where the benefit is not self-evident. */
.callout{margin-top:14px;padding:12px 14px;border-left:2px solid var(--accent);
  background:rgba(35,29,20,.04);border-radius:0 var(--r2) var(--r2) 0}
.callout-h{font:600 14px/1.3 var(--ff-body)}
.callout-b{margin-top:4px;font-size:13px;line-height:1.55;color:var(--ink-72)}

/* --- 04 Price ------------------------------------------------------------ */
.rate{border:1px solid var(--line-hard);border-radius:var(--r3);background:rgba(35,29,20,.04);overflow:hidden}
.rate-h{padding:9px 12px;border-bottom:1px solid var(--line);
  font:400 11px/1 var(--ff-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-72)}
.rate-b{padding:14px 12px 12px}
.rate-n{font:600 clamp(34px,9vw,42px)/.9 var(--ff-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.rate-n i{font:400 14px/1 var(--ff-body);font-style:normal;color:var(--ink-72)}
.rails{padding:10px 12px 12px;border-top:1px solid var(--hair)}
.rails-cap{display:block;margin-bottom:8px}
.rails-row{display:flex;flex-wrap:wrap;gap:6px}
.rail{display:inline-flex;align-items:center;gap:6px;padding:5px 9px 5px 6px;
  border:1px solid var(--hair);border-radius:var(--r1);background:var(--paper)}
.rail img{width:20px;height:20px;object-fit:contain}
.rail span{font:400 11px/1 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-72)}

/* --- 05 Ladder ----------------------------------------------------------- */
.ladder{border:1px solid var(--line-hard);border-radius:var(--r3);overflow:hidden}
.ladder li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;
  padding:11px 12px;border-bottom:1px solid var(--hair);font-size:13.5px;line-height:1.5}
.ladder li:last-child{border-bottom:0}
.ladder .n{font:400 11px/1.5 var(--ff-mono);color:var(--accent)}

/* --- 06 Start ------------------------------------------------------------
   The closing block is ink, and the madder is the button. The colour rule is
   explicit that madder is never the background of a large area, and a
   full-width madder band is exactly that. -------------------------------- */
.start{margin-top:var(--block);background:var(--ink);color:var(--on-ink);
  padding-block:clamp(26px,5vw,44px)}
.start-h{font:600 clamp(24px,6.4vw,34px)/1.05 var(--ff-display);
  letter-spacing:.02em;text-transform:uppercase}
.start-s{margin-top:8px;font-size:14px;line-height:1.6;color:var(--on-ink-72);max-width:44ch}
.start-acts{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 22px;border-radius:var(--r2);
  font:600 15px/1 var(--ff-display);letter-spacing:.05em;text-transform:uppercase;
  transition:filter .18s,background .18s,border-color .18s}
.btn-primary{background:var(--accent);color:var(--on-ink)}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost{border:1px solid var(--field-line);color:var(--on-ink)}
.btn-ghost:hover{background:rgba(232,224,207,.1)}
.btn-wide{width:100%;margin-top:6px}
.btn-arrow{font-size:19px;line-height:1}
.btn-ic{width:20px;height:20px;object-fit:contain;flex:0 0 auto}
.btn[aria-disabled=true]{opacity:.6;pointer-events:none}

/* --- Brief form ---------------------------------------------------------- */
.brief{margin-top:20px;max-width:520px;display:grid;gap:14px}
.brief-alert{padding:12px 14px;border-radius:var(--r2);
  border:1px solid var(--accent-on-ink);background:rgba(233,150,122,.12);
  color:var(--on-ink);font-size:13.5px;line-height:1.55}
.brief-alert ul{margin-top:6px;display:grid;gap:2px}
.brief-alert a{color:var(--accent-on-ink);text-decoration:underline}
.brief-ok{border-color:var(--field-line);background:rgba(232,224,207,.08)}
.brief-ok b{display:block;font:600 15px/1.3 var(--ff-body);margin-bottom:4px}

.f{display:grid;gap:5px}
.f-row{display:grid;gap:14px;grid-template-columns:minmax(0,1fr) minmax(0,110px)}
.f-l{font:400 11px/1 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink-60)}
.f-i{width:100%;min-height:48px;padding:12px 13px;border-radius:var(--r1);
  border:1px solid var(--field-line);background:var(--field);color:var(--on-ink);
  font:400 15px/1.4 var(--ff-body);transition:border-color .18s}
.f-i:hover{border-color:var(--on-ink-60)}
.f-t{min-height:104px;resize:vertical}
select.f-i{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--on-ink-60) 50%),
    linear-gradient(135deg,var(--on-ink-60) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.f-h{font-size:12.5px;line-height:1.5;color:var(--on-ink-60)}
.f-e{font-size:12.5px;line-height:1.5;color:var(--accent-on-ink)}
.f-i[aria-invalid=true]{border-color:var(--accent-on-ink);background:rgba(233,150,122,.1)}
.f-foot{margin-top:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Footer -------------------------------------------------------------- */
.foot{background:var(--ink);color:var(--on-ink-60);border-top:1px solid rgba(232,224,207,.14)}
.foot-in{max-width:var(--maxw);margin-inline:auto;padding:4px var(--gut);min-height:52px;
  display:flex;flex-wrap:wrap;gap:0 16px;align-items:center;justify-content:space-between;
  font:400 11px/1.6 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase}
.foot-in a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-ink-60);transition:color .18s}
.foot-in a:hover{color:var(--on-ink)}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 14px}

/* --- Fullscreen player --------------------------------------------------- */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(24,19,13,.94);
  display:grid;place-items:center;padding:20px}
.lb-stage{position:relative;height:min(88vh,900px);aspect-ratio:9/16;max-width:100%;
  border-radius:var(--r3);overflow:hidden;background:#000}
.lb-stage video{width:100%;height:100%;object-fit:contain;background:#000}
.lb-close{position:absolute;top:14px;right:16px;z-index:2;width:44px;height:44px;
  display:grid;place-items:center;border-radius:var(--r1);
  background:rgba(232,224,207,.14);color:var(--paper);font-size:18px}
.lb-close:hover{background:var(--accent)}

/* --- Version switcher ---------------------------------------------------- */
.vswitch{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;
  display:flex;flex-direction:column-reverse;align-items:flex-end;gap:8px}
.vtoggle{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);
  font:600 .78rem/1 var(--ff-mono);color:var(--ink-72);
  box-shadow:0 4px 14px rgba(35,29,20,.14);transition:color .2s,border-color .2s}
.vtoggle:hover,.vtoggle[aria-expanded=true]{color:var(--ink);border-color:var(--ink)}
.vlist{display:flex;flex-direction:column;gap:3px;padding:6px;border-radius:var(--r2);
  border:1px solid var(--line);background:var(--paper);
  box-shadow:0 10px 30px rgba(35,29,20,.18)}
.vlist button{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:var(--r1);
  min-height:44px;font:400 11px/1 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-72);white-space:nowrap;transition:background .15s,color .15s}
.vlist button:hover{color:var(--ink);background:var(--ink-fill)}
.vlist button[aria-current=true]{color:var(--accent)}
.vlist button i{font-style:normal;opacity:.55;min-width:9px}

/* --- Desktop shell ------------------------------------------------------- */
@media(min-width:760px){
  :root{--gut:40px}
  body{background:var(--paper-out);font-size:16px}
  .page{max-width:var(--maxw);margin-inline:auto;background:var(--paper);
    box-shadow:0 0 0 1px rgba(35,29,20,.1)}
  .who{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center}
  .who-stage{float:none;width:auto;margin:0}
  .portrait{height:min(34vh,340px);width:auto;aspect-ratio:892/1166}
  .who-name{font-size:min(clamp(44px,5vw,62px),7.4vh)}
  .pair{display:grid;grid-template-columns:1fr 340px;gap:36px;align-items:start}
  .how-in{display:grid;grid-template-columns:minmax(0,620px) minmax(0,1fr);gap:34px;align-items:start}
  .how-side .note{margin-top:0;padding-left:16px;border-left:2px solid var(--accent);max-width:30ch}
  .how-side .note-quiet{margin-top:10px;border-left-color:var(--line)}
  .ladder li{font-size:14px;padding:13px 16px}
  .start-acts{gap:10px}
  .btn{padding:14px 26px}
  .btn-wide{width:auto;min-width:220px}
}
@media(min-width:1400px){
  :root{--maxw:1240px;--gut:52px}
}
@media(min-width:1700px){:root{--maxw:1340px}}

/* Wide but short — an ordinary 16:9 monitor. Vertical space is the scarce
   axis, so the profile tightens and the reel stays on the first screen. */
@media(min-width:1000px) and (max-height:1100px){
  :root{--block:clamp(22px,3.2vh,38px);--reelh:min(52vh,400px)}
  .portrait{height:min(28vh,300px)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
}