/* =================================================================
   Юрий Моор-Мурадов · «Следствие по делу слова»
   series blue (dark) · teacher's red pencil (warm) · paper (light)
   + sky: the light-blue of the «Занимательный иврит» covers (a tint of the series blue)
   ================================================================= */
:root{
  --dark:#0D2B52;
  --accent:#0D2B52;                   /* palette is paper · sky · navy only: the accent is the navy */
  --accent-ink:#3B5878;               /* navy at ~78% on paper (opacity step), >= 7:1 */
  --light:#F6F3EC;
  --sky:#8FCDEB;
  --sky-2:color-mix(in srgb,var(--sky) 70%,#fff);
  --dark-2:color-mix(in srgb,var(--dark) 88%,var(--light));
  --paper:color-mix(in srgb,var(--light) 55%,#fff);
  --line:color-mix(in srgb,var(--dark) 16%,transparent);
  --line-d:color-mix(in srgb,var(--light) 16%,transparent);
  --mute:color-mix(in srgb,var(--dark) 68%,var(--light));
  --mute-d:color-mix(in srgb,var(--light) 70%,var(--dark));

  --display:"Cormorant Garamond","Times New Roman",serif;
  --font:"Golos Text","Segoe UI",Arial,system-ui,sans-serif;
  --he:"Frank Ruhl Libre","David",serif;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-io:cubic-bezier(.76,0,.24,1);

  --u:calc(100vw / 1280);
  --wrap:min(calc(1200*var(--u)),90vw);
  --gut:clamp(16px,4vw,calc(48*var(--u)));
  --sec:clamp(72px,9vw,calc(130*var(--u)));
  --hdr-h:calc(84*var(--u));

  /* type: 4 sizes + 1 small */
  --t1:min(calc(100*var(--u)),11svh);
  --t2:calc(64*var(--u));
  --t3:max(19px,calc(26*var(--u)));
  --t4:max(16px,calc(18*var(--u)));
  --t5:max(13px,calc(14*var(--u)));

  --btn-h:max(48px,calc(54*var(--u)));
  --r:2px;                               /* books and paper have square corners */
  --bh:min(calc(230*var(--u)),25svh);     /* book height on the shelf */
}
@media (min-width:1600px){:root{--u:calc((1600px + (100vw - 1600px) * .6) / 1280)}}
@media (max-width:1024px){:root{--u:calc(100vw / 900)}}
@media (max-width:700px){:root{
  --u:min(calc(100vw / 400),1.15px);
  --t1:calc(54*var(--u)); --t2:calc(36*var(--u)); --t3:max(18px,calc(20*var(--u)));
  --t4:max(15px,calc(16*var(--u))); --t5:max(13px,calc(13*var(--u)));
  --hdr-h:64px; --bh:170px;
}}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px);-webkit-text-size-adjust:100%}
html.lock{overflow:hidden}
body{margin:0;background:var(--light);color:var(--dark);font:400 var(--t4)/1.6 var(--font);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:600;line-height:1;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:var(--t2)}
h3{font-size:var(--t3);font-family:var(--font);font-weight:600;line-height:1.25;letter-spacing:0}
p{margin:0;text-wrap:pretty}
em{font-style:italic;font-weight:500;color:var(--accent-ink)}
.on-dark{background:var(--dark);color:var(--light)}
.on-dark em{color:var(--sky)}
.wrap{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto}
.sec{padding-block:var(--sec)}
.kicker{font-size:var(--t5);letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--accent-ink)}
.on-dark .kicker{color:var(--sky)}
.ph{border-bottom:1.5px dashed currentColor;font-size:var(--t5);font-family:var(--font);opacity:.85}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-80px;z-index:300;background:var(--dark);color:var(--light);padding:10px 16px}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--sky)}

/* ---- buttons: one shape site-wide (square, like a book) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:var(--btn-h);padding:0 1.5em;
  border:1.5px solid var(--dark);border-radius:var(--r);font-weight:500;font-size:var(--t4);white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn span{transition:transform .3s var(--ease)}
.btn:hover span{transform:translateX(4px)}
.btn.solid{background:var(--dark);color:var(--light)}
.btn.solid:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.ghost:hover{background:var(--dark);color:var(--light)}
.on-dark .btn{border-color:var(--light)}
.on-dark .btn.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.on-dark .btn.solid:hover{background:var(--light);border-color:var(--light)}
.on-dark .btn.ghost:hover{background:var(--light);color:var(--dark)}
.btn.sm{min-height:max(42px,calc(46*var(--u)));padding:0 1.2em;font-size:var(--t5)}

/* ---- reveal (content visible without JS) ---- */
.js .r{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .r.in,.static .r,.r-fail .r{opacity:1;transform:none}

/* ================= HEADER ================= */
/* over the sky hero the header is ink on blue; after scrolling it turns into a solid ink bar */
.hdr{position:fixed;inset:0 0 auto;z-index:50;color:var(--dark);transition:background .4s var(--ease),box-shadow .4s,color .4s}
.hdr.solid{background:color-mix(in srgb,var(--dark) 96%,transparent);color:var(--light);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line-d)}
.bar{display:flex;align-items:center;gap:calc(32*var(--u));height:var(--hdr-h)}
.mark{font-family:var(--display);font-size:max(20px,calc(26*var(--u)));font-weight:600;white-space:nowrap}
.mark i{font-weight:500;color:var(--accent)}
.hdr.solid .mark i{color:var(--sky)}
.nav{display:flex;gap:calc(30*var(--u));margin-inline-start:auto;font-size:var(--t5);letter-spacing:.04em;font-weight:500}
.nav a{position:relative;padding-block:6px;white-space:nowrap}
.nav a::after{content:"";position:absolute;inset:auto 0 0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover::after{transform:none}
.hdr-act{display:flex;align-items:center;gap:14px}
.hdr .btn.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.cart-btn{position:relative;width:44px;height:44px;display:grid;place-items:center}
.cart-btn svg{width:24px;fill:none;stroke:currentColor;stroke-width:1.6}
.cart-n{position:absolute;top:2px;right:0;min-width:19px;height:19px;border-radius:10px;background:var(--accent);color:#fff;font-size:11px;display:grid;place-items:center;font-weight:600}
.cart-n.pop{animation:pop .5s var(--ease)}
@keyframes pop{40%{transform:scale(1.35)}}
.burger{display:none;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;transition:transform .35s var(--ease)}
.burger span:first-child{top:17px}.burger span:last-child{top:25px}
.burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:45;padding:calc(var(--hdr-h) + 32px) var(--gut) 40px;display:flex;flex-direction:column;gap:32px}
.drawer nav{display:grid;gap:6px}
.drawer nav a{font-family:var(--display);font-size:var(--t2);font-weight:600;border-bottom:1px solid var(--line-d);padding-block:8px}
@media (max-width:900px){.nav,.hide-ph{display:none}.burger{display:block}.hdr-act{margin-inline-start:auto}}

/* ================= HERO (Keren's Figma): a deep-sky panel, everything placed on a 1400×785 grid ================= */
.hero{padding:var(--hdr-h) 20px 10px;background:var(--light)}
.stage{position:relative;aspect-ratio:1400/785;border-radius:calc((100vw - 40px)*29/1400);overflow:hidden;isolation:isolate;
  /* depth: a soft key light behind the author, a sky that falls off into ink at the edges, and a heavier floor */
  background:
    radial-gradient(34% 46% at 58% 34%,rgba(255,255,255,.6),rgba(255,255,255,0) 72%),
    radial-gradient(120% 110% at 54% 30%,#B2E0F5 0%,#8FCDEB 24%,#62A2CB 52%,#2D6491 78%,#123A63 100%);
  box-shadow:inset 0 0 calc((100vw - 40px)*.11) rgba(5,24,48,.45),inset 0 calc((100vw - 40px)*-.07) calc((100vw - 40px)*.08) calc((100vw - 40px)*-.03) rgba(5,24,48,.4)}
/* film grain, so the gradient reads as a photographed backdrop and never bands */
.stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.22;mix-blend-mode:soft-light;
  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 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.stage-in{position:absolute;inset:0;z-index:1;container-type:inline-size;--k:calc(1cqw / 14)}

.hero-h1{position:absolute;z-index:2;left:calc(42*var(--k));top:calc(125*var(--k));width:calc(615*var(--k));margin:0;
  font:700 calc(90*var(--k))/.95 var(--display);letter-spacing:-.015em;text-transform:uppercase;color:#002740}
.hero-yuri{position:absolute;z-index:3;left:calc(433*var(--k));top:calc(74*var(--k));width:calc(948*var(--k));height:auto;
  filter:drop-shadow(0 calc(30*var(--k)) calc(40*var(--k)) rgba(5,24,48,.35))}
.hero-side{position:absolute;z-index:4;left:calc(1014*var(--k));top:calc(61*var(--k));width:calc(351*var(--k));display:grid;justify-items:start}
.hero-name{font:600 italic calc(33.6*var(--k))/1.25 "Fira Sans Condensed",var(--font);color:var(--dark)}
.hero .lead{margin-top:calc(18*var(--k));font:400 max(14px,calc(15.75*var(--k)))/1.65 var(--font);color:#002740;max-width:none}
.hero-cta{margin-top:calc(27*var(--k));min-height:calc(61*var(--k));padding:0 calc(30*var(--k));font:400 calc(20*var(--k)) var(--font);
  text-transform:uppercase;letter-spacing:.02em;background:var(--dark);border-color:var(--dark);color:#fff}
.hero-cta:hover{background:var(--accent);border-color:var(--accent)}

/* the wave of books behind him (centres sit on the curve Keren drew) */
.wave{position:absolute;z-index:1;left:0;right:0;bottom:0;aspect-ratio:1400/785}
.w{position:absolute;width:calc(210*var(--k));height:auto;transform:rotate(var(--r));
  box-shadow:calc(12*var(--k)) calc(18*var(--k)) calc(30*var(--k)) calc(-10*var(--k)) rgba(5,24,48,.55),0 0 0 1px rgba(0,0,0,.06)}
.w1{left:calc(-15*var(--k));top:calc(557*var(--k));--r:10deg}
.w2{left:calc(135*var(--k));top:calc(560*var(--k));--r:-6deg}
.w3{left:calc(285*var(--k));top:calc(541*var(--k));--r:-2deg}
.w4{left:calc(435*var(--k));top:calc(511*var(--k));--r:-12deg}
.w5{left:calc(585*var(--k));top:calc(443*var(--k));--r:-9deg}
.w6{left:calc(735*var(--k));top:calc(372*var(--k));--r:-11deg}
.w7{left:calc(885*var(--k));top:calc(323*var(--k));--r:-4deg}
.w8{left:calc(1035*var(--k));top:calc(294*var(--k));--r:-3deg}
.w9{left:calc(1185*var(--k));top:calc(296*var(--k));--r:7deg}
.js .w{opacity:0;translate:0 calc(60*var(--k));transition:opacity .8s var(--ease),translate 1.1s var(--ease)}
.js .hero.in .w{opacity:1;translate:0 0}
.js .hero.in .w1{transition-delay:.05s}.js .hero.in .w2{transition-delay:.12s}.js .hero.in .w3{transition-delay:.19s}
.js .hero.in .w4{transition-delay:.26s}.js .hero.in .w5{transition-delay:.33s}.js .hero.in .w6{transition-delay:.4s}
.js .hero.in .w7{transition-delay:.47s}.js .hero.in .w8{transition-delay:.54s}.js .hero.in .w9{transition-delay:.5s}
.static .w,.r-fail .w{opacity:1;translate:0 0}

/* ---- the shelf, now its own band under the hero ---- */
.shelf-sec{padding-top:calc(120*var(--u))}
.shelf-wrap{position:relative}
.shelf{display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:calc(44*var(--u)) var(--gut) 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity}
.shelf::-webkit-scrollbar{display:none}
.plank{height:max(14px,calc(24*var(--u)));background:var(--dark)}
.shelf .gap{flex:none;width:calc(26*var(--u))}

/* a 3D book: box W x H x D, spine faces the viewer on the shelf */
.bk{--w:calc(var(--h)*.69);--d:calc(var(--h)*.15);--h:var(--bh);position:relative;flex:none;width:var(--d);height:var(--h);perspective:1600px;scroll-snap-align:center}
.bk.wide{--h:calc(var(--bh)*.62);--w:calc(var(--h)*1.52);--d:calc(var(--h)*.16)}
.bk.feat{width:var(--w);margin-inline:calc(30*var(--u))}
.bk-btn{position:absolute;inset:0;display:block;width:100%;height:100%}
.box{position:absolute;left:50%;top:0;width:var(--w);height:var(--h);margin-left:calc(var(--w)/-2);transform-style:preserve-3d;
  transform:rotateY(90deg);transition:transform .7s var(--ease)}
.bk.feat .box{transform:rotateY(-14deg)}
.f{position:absolute;left:50%;top:0;height:100%;backface-visibility:hidden;overflow:hidden}
.f img{width:100%;height:100%;object-fit:cover}
.f.spine img{object-fit:fill}
.f.front{width:var(--w);margin-left:calc(var(--w)/-2);transform:translateZ(calc(var(--d)/2));background:var(--tone)}
.f.back{width:var(--w);margin-left:calc(var(--w)/-2);transform:rotateY(180deg) translateZ(calc(var(--d)/2));background:var(--tone)}
.f.spine{width:var(--d);margin-left:calc(var(--d)/-2);transform:rotateY(-90deg) translateZ(calc(var(--w)/2));background:var(--tone)}
.f.pages{width:var(--d);margin-left:calc(var(--d)/-2);transform:rotateY(90deg) translateZ(calc(var(--w)/2 - 2px));
  background:repeating-linear-gradient(90deg,#efe8da 0 1px,#d9d0bf 1px 2px)}
.f.top{width:var(--w);height:var(--d);top:calc(50% - var(--d)/2);margin-left:calc(var(--w)/-2);transform:rotateX(90deg) translateZ(calc(var(--h)/2));
  background:repeating-linear-gradient(0deg,#efe8da 0 1px,#d9d0bf 1px 2px)}
.f.front::after,.f.spine::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 9%,rgba(255,255,255,.07) 12%,transparent 30%)}
.f.spine::after{background:linear-gradient(90deg,rgba(255,255,255,.12),transparent 40%,rgba(0,0,0,.35))}
.bk::after{content:"";position:absolute;left:-30%;right:-30%;bottom:-4px;height:10px;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);z-index:-1}
@media (hover:hover){
  .bk:not(.feat):hover{z-index:3}
  .bk:not(.feat):hover .box,.bk:not(.feat) .bk-btn:focus-visible .box{transform:translateY(-18px) translateZ(40px) rotateY(58deg)}
  .bk.feat:hover .box{transform:translateY(-10px) rotateY(-4deg)}
}
.bk-btn:focus-visible{outline:none}
.bk-btn:focus-visible .f.spine,.bk-btn:focus-visible .f.front{outline:3px solid var(--accent);outline-offset:-3px}
.bk-tag{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:var(--t5);background:var(--accent);color:#fff;padding:2px 10px;font-weight:600}
/* shelf entrance: books are put on the shelf one by one */
.js .shelf .bk{opacity:0;transform:translateY(-40px)}
.js .shelf.in .bk{opacity:1;transform:none;transition:opacity .6s var(--ease) calc(var(--i)*45ms),transform .8s var(--ease) calc(var(--i)*45ms)}
.static .shelf .bk,.r-fail .shelf .bk{opacity:1;transform:none}

/* CSS cover for books whose cover has not arrived yet (series design) */
.cv{position:relative;width:100%;height:100%;background:var(--tone);color:#fff;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:12% 9%;gap:5%;font-family:var(--display);container-type:inline-size}
.cv::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-35deg,rgba(255,255,255,.03) 0 2px,transparent 2px 7px)}
.cv small{font:500 7cqw/1.2 var(--font)}
.cv b{font-size:10.5cqw;line-height:1.05;font-weight:600}
.cv i{font-size:13cqw;font-weight:500;color:var(--sky);margin-top:auto}
.cv strong{font:700 15cqw/1 var(--font);letter-spacing:.02em}
.cv .cv-ph{position:absolute;bottom:4%;font:400 5cqw var(--font);opacity:.6;border-bottom:1px dashed}
.sp{width:100%;height:100%;background:var(--tone);color:#fff;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:space-between;
  padding:10% 0;font:600 calc(var(--d)*.36)/1 var(--font);white-space:nowrap;overflow:hidden}
.sp i{font:500 calc(var(--d)*.42)/1 var(--display);color:var(--sky)}

/* ================= TICKER ================= */
.ticker{position:relative;background:var(--accent);color:#fff;overflow:hidden;border-block:1px solid var(--dark)}
.ticker-in{display:flex;width:max-content;animation:tick 48s linear infinite}
.ticker span{display:flex;align-items:baseline;gap:.6em;padding:calc(16*var(--u)) calc(30*var(--u));white-space:nowrap;font-family:var(--display);font-style:italic;font-size:var(--t3)}
.ticker b{font:700 calc(var(--t3)*1.05) var(--he);font-style:normal}
.ticker span::after{content:"";width:9px;height:9px;border:2px solid #fff;border-radius:50%;margin-left:calc(30*var(--u));align-self:center}
.ticker.paused .ticker-in{animation-play-state:paused}
.ticker-pause{position:absolute;right:8px;top:50%;translate:0 -50%;width:34px;height:34px;background:var(--dark);color:#fff;font-size:12px;font-weight:700}
@keyframes tick{to{transform:translateX(-50%)}}

/* ================= SECTION HEAD ================= */
.sec-head{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:calc(40*var(--u));margin-bottom:calc(46*var(--u))}
.sec-head p{color:var(--mute);max-width:46ch}
.on-dark .sec-head p{color:var(--mute-d)}

/* ================= BOOKS ================= */
.tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:2px solid var(--dark);margin-bottom:calc(46*var(--u))}
.tabs button{padding:12px calc(22*var(--u)) 12px 0;margin-right:calc(22*var(--u));font-size:var(--t5);letter-spacing:.05em;text-transform:uppercase;color:var(--mute);position:relative}
.tabs button[aria-selected=true]{color:var(--dark);font-weight:600}
.tabs button[aria-selected=true]::after{content:"";position:absolute;left:0;right:calc(22*var(--u));bottom:-2px;height:4px;background:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(54*var(--u)) calc(36*var(--u))}
.card{display:grid;gap:14px;text-align:left;align-content:start}
.card[hidden]{display:none}
.card-cv{position:relative;aspect-ratio:.69;display:grid;place-items:end center;perspective:1200px}
.card-cv .cvi{width:100%;height:100%;box-shadow:0 1px 0 rgba(0,0,0,.08),12px 18px 30px -12px rgba(21,24,33,.45),2px 2px 6px rgba(21,24,33,.18);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease);transform-origin:left center;overflow:hidden;background:var(--tone)}
.card-cv .cvi::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 5%,rgba(255,255,255,.1) 7%,transparent 20%)}
.card-cv .cvi{position:relative}
.card-cv img{width:100%;height:100%;object-fit:cover}
.card.wide .card-cv .cvi{height:auto;aspect-ratio:1.55}
.card:hover .cvi,.card:focus-visible .cvi{transform:rotateY(-14deg) translateX(4px);box-shadow:0 1px 0 rgba(0,0,0,.08),26px 22px 34px -14px rgba(21,24,33,.5)}
.card-k{font-size:var(--t5);color:var(--accent-ink);letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.card-t{font-family:var(--display);font-size:var(--t3);font-weight:600;line-height:1.1}
.card-t[dir=rtl]{font-family:var(--he);text-align:right}
.card-p{font-size:var(--t5);color:var(--mute)}
.badge{position:absolute;top:10px;left:-8px;z-index:2;background:var(--dark);color:var(--sky);font-size:var(--t5);font-weight:600;padding:3px 10px;letter-spacing:.06em}

/* ================= LENS (signature) ================= */
.lensx-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"head board" "story board";column-gap:calc(64*var(--u));align-items:start}
.lensx-head{grid-area:head;display:grid;gap:calc(22*var(--u));align-content:start}
.board{grid-area:board}
.story{grid-area:story}
@media (max-width:700px){.lensx-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "board" "story";row-gap:28px}}
.lensx-head>p{color:var(--mute-d);max-width:40ch}
.story{margin-top:calc(16*var(--u));padding-top:calc(22*var(--u));border-top:2px solid var(--line-d);display:grid;gap:14px;justify-items:start;min-height:calc(230*var(--u))}
.story-src{font-size:var(--t5);color:var(--sky);letter-spacing:.06em}
.story-t{font-family:var(--display);font-size:calc(var(--t3)*1.1);line-height:1.35}
.board{--lr:110;--lx:-999;--ly:-999;position:relative;min-width:0;touch-action:pan-y;cursor:none;user-select:none}
.board-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--line-d);border:2px solid var(--line-d)}
.board-grid{grid-auto-rows:minmax(calc(230*var(--u)),auto)}
.cell{min-width:0;display:grid;place-content:center;gap:8px;text-align:center;padding:16px;background:var(--dark);cursor:none}
.cell .he{font:700 calc(var(--t3)*1.3)/1.15 var(--he);direction:rtl}
.cell .tr{font-size:var(--t5);color:var(--mute-d);font-style:italic}
.board-ru{position:absolute;inset:0;pointer-events:none;clip-path:circle(calc(var(--lr)*.92px) at calc(var(--lx)*1px) calc(var(--ly)*1px))}
.board-ru .cell{background:var(--light);color:var(--dark)}
.board-ru .ru small{color:var(--accent-ink)}
.board-ru .ru{font:600 italic var(--t3)/1.1 var(--display);max-width:10ch;margin-inline:auto}
.board-ru .ru small{display:block;font:400 var(--t5) var(--font);font-style:normal;margin-top:8px;opacity:.75}
.loupe{position:absolute;left:0;top:0;width:calc(var(--lr)*2.35px);height:calc(var(--lr)*2.35px);pointer-events:none;
  transform:translate(calc(var(--lx)*1px - var(--lr)*1.02px),calc(var(--ly)*1px - var(--lr)*1.02px))}
.loupe svg{width:100%;height:100%;overflow:visible;fill:none;stroke:var(--light);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.loupe path{stroke-width:14;stroke:var(--accent)}

/* ================= DETECTIVE ================= */
.det{position:relative;overflow:hidden;padding-top:calc(var(--sec) + 60*var(--u))}
.tape{position:absolute;left:-5%;right:-5%;top:calc(46*var(--u));transform:rotate(-2.4deg);background:var(--accent);color:#fff;border-block:3px solid var(--dark);
  font:700 var(--t5)/1 var(--font);letter-spacing:.24em;white-space:nowrap;overflow:hidden;padding:12px 0;box-shadow:0 10px 20px -10px rgba(21,24,33,.5)}
.tape span{display:inline-block;animation:tick 70s linear infinite}
.det-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(70*var(--u));align-items:center}
.det-txt{display:grid;gap:calc(24*var(--u));justify-items:start}
.det-txt>p{color:var(--mute);max-width:44ch}
blockquote{margin:0}
.det blockquote{border-left:4px solid var(--accent);padding-left:calc(24*var(--u))}
.det blockquote p{font-family:var(--display);font-size:calc(var(--t3)*1.25);line-height:1.3;font-style:italic}
cite{display:block;margin-top:10px;font-style:normal;font-size:var(--t5);color:var(--accent-ink)}
.det-books{position:relative;height:calc(520*var(--u));perspective:1600px}
.det-books .dbk{position:absolute;width:44%;aspect-ratio:.69;box-shadow:18px 24px 40px -14px rgba(21,24,33,.55),2px 2px 6px rgba(21,24,33,.2);
  transition:transform .8s var(--ease);background:var(--tone)}
.det-books .dbk img{width:100%;height:100%;object-fit:cover}
.det-books .dbk:nth-child(1){left:2%;top:10%;transform:rotate(-8deg)}
.det-books .dbk:nth-child(2){left:28%;top:2%;transform:rotate(3deg);z-index:2}
.det-books .dbk:nth-child(3){left:53%;top:14%;transform:rotate(9deg);z-index:1}
.det-books .dbk:nth-child(4){left:30%;top:42%;transform:rotate(-3deg);z-index:3;width:38%}
.det-books .dbk:hover{transform:rotate(0) translateY(-14px) scale(1.03);z-index:5}

/* ================= ABOUT ================= */
.about{background:var(--paper)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(80*var(--u));align-items:start}
.about-txt{display:grid;gap:calc(22*var(--u));justify-items:start;position:sticky;top:calc(var(--hdr-h) + 40px)}
.about-txt>p{color:var(--mute);max-width:46ch}
.facts{list-style:none;margin:0;padding:0;border-top:2px solid var(--dark)}
.facts li{display:grid;grid-template-columns:calc(170*var(--u)) 1fr;gap:20px;align-items:baseline;padding:calc(24*var(--u)) 0;border-bottom:1px solid var(--line)}
.facts b{font:500 italic calc(var(--t3)*1.35)/1 var(--display);color:var(--accent-ink)}

/* ================= LETTERS ================= */
.let-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(26*var(--u));align-items:start}
.letter{margin:0;background:var(--light);color:var(--dark);padding:calc(30*var(--u)) calc(26*var(--u));position:relative;
  box-shadow:0 22px 40px -18px rgba(0,0,0,.7);background-image:repeating-linear-gradient(transparent 0 calc(31px - 1px),color-mix(in srgb,var(--dark) 9%,transparent) calc(31px - 1px) 31px)}
.letter:nth-child(1){transform:rotate(-1.6deg)}
.letter:nth-child(2){transform:rotate(1.2deg);margin-top:40px}
.letter:nth-child(3){transform:rotate(-.6deg);margin-top:12px}
.letter:nth-child(4){transform:rotate(1.8deg);margin-top:56px}
.letter blockquote{font:500 italic calc(var(--t3)*1.02)/31px var(--display)}
.letter figcaption{margin-top:18px;font-size:var(--t5);color:var(--accent-ink);font-weight:600}
.js .letter.r{transform:translateY(28px)}
.js .letter.r.in:nth-child(1){transform:rotate(-1.6deg)}.js .letter.r.in:nth-child(2){transform:rotate(1.2deg)}
.js .letter.r.in:nth-child(3){transform:rotate(-.6deg)}.js .letter.r.in:nth-child(4){transform:rotate(1.8deg)}

/* ================= ORDER ================= */
.order h2{margin-bottom:calc(40*var(--u))}
.ord-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--dark)}
.fmt{padding:calc(30*var(--u)) calc(30*var(--u)) 0 0;display:grid;gap:12px;align-content:start}
.fmt+.fmt{padding-left:calc(30*var(--u));border-left:1px solid var(--line)}
.fmt .price{font:600 calc(var(--t3)*1.5)/1 var(--display)}
.fmt .price small{font:400 var(--t5) var(--font);color:var(--mute)}
.fmt p:last-child{color:var(--mute)}

/* ================= CONTACT ================= */
.con-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(80*var(--u));align-items:start}
.con-grid>div{display:grid;gap:calc(22*var(--u));justify-items:start}
.con-grid>div>p{color:var(--mute-d);max-width:40ch}
.con-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.tel{font-family:var(--display);font-size:var(--t3);border-bottom:2px solid var(--sky)}
.form{display:grid;gap:18px}
.form label,#checkout label{display:grid;gap:4px}
.form label span,#checkout label span{font-size:var(--t5);opacity:.75}
.form input,.form textarea{background:transparent;border:0;border-bottom:1.5px solid var(--line-d);padding:10px 0;outline:none;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--sky)}
.form .chk{display:flex;gap:10px;align-items:center}
.form .chk input{width:18px;height:18px;accent-color:var(--sky)}
.form .chk a{text-decoration:underline}
.form .btn{justify-self:start}
.form-msg{font-size:var(--t5);color:var(--sky)}

/* ================= FOOTER ================= */
.ftr{background:var(--light);padding-block:calc(56*var(--u)) calc(30*var(--u));border-top:3px solid var(--accent)}
.ftr-in{display:grid;grid-template-columns:auto 1fr auto;gap:20px 40px;align-items:center}
.ftr-mark{font-family:var(--display);font-size:var(--t2);font-weight:600;line-height:1}
.ftr-mark i{color:var(--accent-ink)}
.ftr-he{font:700 var(--t3) var(--he);color:var(--mute)}
.ftr-nav{display:flex;gap:24px;font-size:var(--t5);justify-self:end}
.ftr-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;padding-top:20px;border-top:1px solid var(--line);font-size:var(--t5);color:var(--mute)}
.ftr-legal a:hover{color:var(--dark)}
.credit{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.credit img{height:26px;width:auto}

/* ================= MOBILE BAR ================= */
.mbar{display:none}
@media (max-width:700px){
  .mbar{position:fixed;inset:auto 0 0;z-index:40;display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--dark);color:var(--light);
    border-top:2px solid var(--sky);padding-bottom:env(safe-area-inset-bottom);transform:translateY(100%);transition:transform .4s var(--ease)}
  .mbar.on{transform:none}
  .mbar>*{display:flex;align-items:center;justify-content:center;gap:6px;height:56px;font-size:var(--t5);font-weight:500}
  .mbar>*+*{border-left:1px solid var(--line-d)}
  .mbar>a:last-child{background:var(--accent);color:#fff}
  .mbar b{background:var(--sky);color:var(--dark);border-radius:9px;min-width:18px;height:18px;font-size:11px;display:grid;place-items:center}
  body{padding-bottom:56px}
}

/* ================= DIALOGS ================= */
dialog{border:0;padding:0;max-width:none;max-height:none;color:inherit}
dialog::backdrop{background:color-mix(in srgb,var(--dark) 80%,transparent);backdrop-filter:blur(3px)}
.x{position:absolute;top:10px;right:10px;width:46px;height:46px;font-size:30px;line-height:1;z-index:3}
.bookdlg{width:min(1080px,94vw);max-height:92svh;overflow:auto;background:var(--light);color:var(--dark)}
.bookdlg[open]{animation:open .6s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(30px) scale(.98)}}
.bd-grid{display:grid;grid-template-columns:.9fr 1.1fr}
.bd-cover{background:var(--dark);display:grid;place-items:center;padding:56px 30px;perspective:1800px;min-height:100%;
  background-image:radial-gradient(60% 50% at 50% 45%,color-mix(in srgb,var(--sky) 22%,transparent),transparent 70%)}
.bd-3d{--h:min(430px,56svh);--w:calc(var(--h)*.69);--d:calc(var(--h)*.11);position:relative;width:var(--w);height:var(--h)}
.bd-3d.wide{--h:min(250px,40svh);--w:calc(var(--h)*1.52);--d:calc(var(--h)*.16)}
.bd-3d .box{transform:rotateY(28deg) rotateX(4deg);animation:turn 1.1s var(--ease)}
.bd-3d:hover .box{transform:rotateY(8deg)}
@keyframes turn{from{transform:rotateY(90deg)}}
.bd-3d::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-24px;height:30px;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent)}
.bd-info{padding:clamp(28px,4vw,56px);display:grid;gap:16px;align-content:start}
.bd-info h2{font-size:calc(var(--t2)*.8)}
.bd-info h2[dir=rtl]{font-family:var(--he);text-align:right}
.bd-sub{color:var(--mute);font-family:var(--display);font-size:var(--t3);font-style:italic}
.bd-text{display:grid;gap:10px;color:color-mix(in srgb,var(--dark) 85%,var(--light))}
.fmt-pick{border:0;padding:0;margin:6px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fmt-pick label{position:relative;cursor:pointer}
.fmt-pick input{position:absolute;opacity:0}
.fmt-pick span{display:grid;gap:2px;padding:12px 14px;border:1.5px solid var(--line);transition:border-color .25s,background .25s}
.fmt-pick small{font-size:var(--t5);color:var(--mute)}
.fmt-pick input:checked+span{border-color:var(--dark);background:var(--paper);box-shadow:inset 4px 0 0 var(--accent)}
.fmt-pick input:focus-visible+span{outline:2px solid var(--accent)}
.fmt-pick input:disabled+span{opacity:.45;cursor:not-allowed}
.bd-buy{display:flex;gap:10px;flex-wrap:wrap}
.bd-wa{font-size:var(--t5);text-decoration:underline;color:var(--mute)}

.reader{width:min(1180px,96vw);height:min(92svh,900px);background:transparent;overflow:visible}
.reader .x{color:var(--light);top:-6px;right:-6px}
.spread{height:calc(100% - 64px);display:flex;justify-content:center;gap:2px;perspective:2000px}
.spread img{height:100%;width:auto;max-width:50%;object-fit:contain;background:#fff;box-shadow:0 30px 60px -20px #000;animation:page .6s var(--ease)}
@keyframes page{from{opacity:0;transform:rotateY(-12deg)}}
.reader-nav{display:flex;justify-content:center;align-items:center;gap:22px;height:64px;color:var(--light)}
.reader-nav button{width:48px;height:48px;border:1.5px solid var(--line-d);font-size:20px}
.reader-nav button:disabled{opacity:.3}

/* cart */
.cart{position:fixed;inset:0 0 0 auto;z-index:80;width:min(440px,100vw);background:var(--light);box-shadow:-30px 0 60px -20px rgba(0,0,0,.5);
  transform:translateX(100%);transition:transform .5s var(--ease);display:block}
.cart.open{transform:none}
.cart[hidden]{display:none}
.cart-in{height:100%;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:18px}
.cart header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--dark);padding-bottom:12px}
.cart h2{font-size:calc(var(--t2)*.6)}
.cart .x{position:static}
.cart-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ci{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px}
.ci .th{width:54px;aspect-ratio:.69;background:var(--tone);overflow:hidden;box-shadow:4px 6px 12px -6px rgba(0,0,0,.5)}
.ci .th img{width:100%;height:100%;object-fit:cover}
.ci b{display:block;font-family:var(--display);font-size:var(--t3);line-height:1.1}
.ci small{color:var(--mute);font-size:var(--t5)}
.qty{display:flex;align-items:center;border:1.5px solid var(--line)}
.qty button{width:32px;height:34px}
.qty span{min-width:22px;text-align:center;font-size:var(--t5)}
.cart-sum{display:flex;justify-content:space-between;font-family:var(--display);font-size:var(--t3)}
.cart-note{font-size:var(--t5);color:var(--mute)}
#checkout{display:grid;gap:12px}
#checkout input{background:var(--paper);border:1.5px solid var(--line);padding:11px 12px;outline:none}
#checkout input:focus{border-color:var(--dark)}
#checkout .btn{width:100%}
.cart-legal{font-size:var(--t5);color:var(--mute)}
.scrim{position:fixed;inset:0;z-index:70;background:color-mix(in srgb,var(--dark) 60%,transparent)}
.toast{position:fixed;left:50%;bottom:90px;z-index:90;transform:translate(-50%,20px);opacity:0;background:var(--dark);color:var(--light);padding:12px 20px;
  border-left:4px solid var(--accent);font-size:var(--t5);transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ================= RESPONSIVE ================= */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .let-grid{grid-template-columns:repeat(2,1fr)}
  .letter:nth-child(n){margin-top:0}
}
@media (max-width:700px){
  .hero{padding:var(--hdr-h) 8px 6px}
  .stage{aspect-ratio:auto;border-radius:18px}
  .stage-in{position:relative;inset:auto;padding:26px 20px 0;display:flex;flex-direction:column;align-items:flex-start;min-height:calc(100svh - var(--hdr-h) - 14px)}
  .hero-h1{position:relative;left:auto;top:auto;width:auto;font-size:40px}
  .hero-side{position:relative;left:auto;top:auto;width:auto;margin-top:14px;order:1}
  .hero-name{order:0}
  .hero-name{font-size:22px}
  .hero-cta{font-size:15px;min-height:50px;padding:0 22px;margin-top:16px}
  .hero-yuri{position:relative;left:auto;top:auto;width:108%;max-width:none;margin:10px 0 0 4%;align-self:center;order:2}
  .wave{container-type:inline-size;left:-28%;right:-28%;--k:calc(1cqw / 14)}
  .shelf-sec{padding-top:90px}
  .shelf{justify-content:flex-start}
  .ctas{width:100%}.ctas .btn{flex:1}
  .sec-head,.det-grid,.about-grid,.con-grid,.bd-grid{grid-template-columns:1fr}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tabs button{white-space:nowrap}
  .grid{grid-template-columns:repeat(2,1fr);gap:34px 16px}
  .story{min-height:0}
  .board-grid{grid-auto-rows:minmax(150px,auto)}
  .det-books{height:110vw}
  .about-txt{position:static}
  .facts li{grid-template-columns:96px 1fr}
  .let-grid{grid-template-columns:1fr;gap:22px}
  .ord-grid{grid-template-columns:1fr}
  .fmt+.fmt{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .fmt{padding:22px 0}
  .btn{width:100%}
  .bd-buy .btn,.con-links .btn{flex:1}
  .ftr-in{grid-template-columns:1fr}
  .ftr-nav{justify-self:start;flex-wrap:wrap}
  .credit{margin-left:0}
  .bd-cover{padding:36px 20px}
  .bd-3d{--h:240px}
  .fmt-pick{grid-template-columns:1fr}
  .spread img{max-width:100%}
  .spread img+img{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .r,.js .shelf .bk{opacity:1;transform:none}
}

/* ================= MINIMAL PASS: one red, more air, quieter devices ================= */
.mark i{color:var(--dark)}
.hdr.solid .mark i{color:var(--light)}
:root{--sec:clamp(88px,11vw,calc(160*var(--u)))}

.ticker{background:var(--light);color:var(--dark);border-block:1px solid var(--line)}
.ticker span{font-size:calc(var(--t3)*.9)}
.ticker b{font-weight:500}
.ticker span::after{width:4px;height:4px;border:0;background:var(--dark);opacity:.4}
.ticker-pause{background:transparent;color:var(--dark);border:1px solid var(--line)}

.tape span{animation:none}
.tape{box-shadow:none;border-block-width:1px}

.board-grid{gap:1px;border-width:1px}
.det blockquote{border-left-width:2px}
.det-books .dbk{box-shadow:10px 16px 30px -16px rgba(13,43,82,.45)}

.letters .let-grid{grid-template-columns:repeat(2,1fr);gap:calc(56*var(--u)) calc(80*var(--u))}
.letter,.js .letter.r.in:nth-child(n){transform:none;margin-top:0;background:none;box-shadow:none;color:var(--light);padding:calc(28*var(--u)) 0 0;border-top:1px solid var(--line-d)}
.letter blockquote{font:500 italic calc(var(--t3)*1.2)/1.35 var(--display)}
.letter figcaption{color:var(--sky);font-weight:500}
.ftr{border-top:1px solid var(--line)}
@media (max-width:700px){.letters .let-grid{grid-template-columns:1fr}}

/* header: the Yura Media magnifier from the books, next to the name; the solid header stays light so the logo reads */
.mark{display:flex;align-items:center;gap:calc(12*var(--u))}
.mark img{height:max(40px,calc(56*var(--u)));width:auto}
.hdr.solid{background:color-mix(in srgb,var(--light) 94%,transparent);color:var(--dark);box-shadow:0 1px 0 var(--line)}
.hdr.solid .mark i{color:var(--dark)}
@media (max-width:700px){.mark span{font-size:18px}.mark img{height:36px}}

/* ================= TYPE + HEADER after Keren's Figma ================= */
:root{--display:"Open Sans",Arial,sans-serif;--font:"Open Sans",Arial,sans-serif;--hdr-h:calc(93*var(--u))}
@media (max-width:700px){:root{--hdr-h:64px}}
h1,h2,h3{letter-spacing:-.015em}
h2{font-weight:700}
em{font-family:"Fira Sans Condensed",var(--font);font-weight:600}
.hdr,.hdr.solid{background:var(--light);color:var(--dark)}
.hdr.solid{box-shadow:0 1px 0 var(--line)}
.hdr .wrap.bar{width:calc(100% - 2*max(20px,calc(24*var(--u))))}
.mark img{height:max(40px,calc(63*var(--u)))}
.nav{margin-inline:auto;font-weight:700;text-transform:uppercase;letter-spacing:.04em;gap:calc(26*var(--u))}
.hdr .btn.solid{background:var(--sky);border-color:var(--sky);color:var(--dark);text-transform:uppercase;font-weight:400}
.hdr .btn.solid:hover{background:var(--dark);border-color:var(--dark);color:#fff}
.btn{text-transform:uppercase;letter-spacing:.02em}

/* ================= ONE TYPE SYSTEM, taken from the hero =================
   display: Open Sans 700 UPPERCASE · text: Open Sans · voice: Fira Sans Condensed 600 italic · Hebrew: Open Sans */
:root{--he:"Open Sans",Arial,sans-serif;--voice:"Fira Sans Condensed","Open Sans",Arial,sans-serif;--ink:#002740}
h1,h2{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:-.015em}
h2{color:var(--ink)}
.on-dark h2{color:var(--light)}
h2 em,h1 em{font-family:var(--voice);font-style:italic;font-weight:600;text-transform:none;letter-spacing:0}
h3,.card-t,.ci b{font-family:var(--display);font-weight:700;letter-spacing:-.005em}
.card-t{font-size:calc(var(--t3)*.9);line-height:1.2}
.kicker,.card-k,.tabs button,.story-src{font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
/* the voice: names, quotes, the lens, the reader letters */
.hero-name,.ticker span,.story-t,.det blockquote p,.facts b,.letter blockquote,.bd-sub,.board-ru .ru,.cell .tr,.cv i,.ftr-mark i{font-family:var(--voice);font-style:italic;font-weight:600}
.story-t{font-size:calc(var(--t3)*1.05);line-height:1.4}
.letter blockquote{font-size:calc(var(--t3)*1.05);line-height:1.45}
.facts b{font-size:calc(var(--t3)*1.25)}
.ticker b,.cell .he,.ftr-he{font-family:var(--he);font-weight:700}
.fmt .price,.cart-sum,.tel{font-family:var(--display);font-weight:700}
.ftr-mark{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.015em;color:var(--ink)}
.ftr-mark i{text-transform:none;letter-spacing:0;color:var(--ink)}
.drawer nav a{font-family:var(--display);font-weight:700;text-transform:uppercase}
.cv,.sp i{font-family:var(--display)}
.bd-info h2{font-size:calc(var(--t2)*.7);text-transform:none;line-height:1.05}
.bd-info h2[dir=rtl],.card-t[dir=rtl]{font-family:var(--he)}

/* ================= SHELF v2: uniform spines across the full width; hover turns a book to its cover =================
   15 spines + room for one open cover fill the shelf exactly; the spare room sits in the gaps (space-between)
   and is taken back by the book that turns, so its neighbours make way smoothly. */
.shelf-sec{padding-top:calc(90*var(--u))}
.shelf{--H:min(calc(300*var(--u)),36svh);--W:calc(var(--H)*.69);--G:6px;container-type:inline-size;
  width:var(--wrap);margin-inline:auto;padding:calc(70*var(--u)) 0 0;display:flex;justify-content:space-between;align-items:flex-end;gap:var(--G);overflow:visible}
.shelf .bk,.shelf .bk.wide{--h:var(--H);--w:var(--W);--d:calc((100cqw - var(--W) - 14*var(--G)) / 15);
  flex:0 0 var(--d);width:auto;height:var(--H);margin:0;perspective:1800px;transition:flex-basis .7s var(--ease)}
.shelf .bk::after{left:-10%;right:-10%}
.shelf .bk.wide .f.front img,.bd-3d.wide .f.front img{object-fit:contain}
@media (hover:hover){
  .shelf .bk:hover,.shelf .bk:focus-within{flex-basis:var(--W);z-index:3}
  .shelf .bk:hover .box,.shelf .bk:focus-within .box{transform:translateY(-12px) rotateY(0deg)}
}
/* the spine */
.sp{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;width:100%;height:100%;padding:14% 0 9%;
  writing-mode:horizontal-tb;transform:none;color:#fff;
  background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,0) 28%,rgba(0,0,0,0) 70%,rgba(0,0,0,.28)),var(--tone);
  box-shadow:inset 0 12px 0 -9px rgba(255,255,255,.4),inset 0 -12px 0 -9px rgba(255,255,255,.4)}
.sp small,.sp b{writing-mode:vertical-rl;transform:rotate(180deg);white-space:normal}
.sp small{font:600 clamp(8px,calc(var(--d)*.15),10px)/1 var(--font);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.sp b{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;
  font:700 clamp(11px,calc(var(--d)*.23),16px)/1.15 var(--font);letter-spacing:.01em}
.sp i{font:600 italic clamp(14px,calc(var(--d)*.4),26px)/1 var(--voice);min-height:1em}
.f.spine::after{display:none}
@media (max-width:700px){
  .shelf{--H:220px;width:auto;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;padding:44px var(--gut) 0;scroll-snap-type:x proximity}
  .shelf .bk,.shelf .bk.wide{--d:46px;flex-basis:var(--d)}
}

/* ================= SHELF v3: no layout change on hover (stable hit zones), visual-only motion ================= */
.shelf .bk,.shelf .bk.wide{transition:none}
@media (hover:hover){
  .shelf .bk:hover,.shelf .bk:focus-within{flex-basis:var(--d)}
  .shelf .bk:hover .box,.shelf .bk:focus-within .box{transform:translateX(var(--x,0px)) rotateY(90deg)}
}
.shelf .box{pointer-events:none;will-change:transform;transform:translateX(var(--x,0px)) rotateY(90deg);
  transition:transform .75s cubic-bezier(.22,.9,.28,1)}
.shelf .bk.open{z-index:5}
.shelf .bk.open .box,.shelf .bk.open:hover .box{transform:translateX(0) translateY(-14px) rotateY(0deg)}
.shelf .bk-btn{z-index:2}
@media (prefers-reduced-motion:reduce){.shelf .box{transition:none}}

/* ================= SHELF v4: real book proportions =================
   A paperback of 360 pages: cover ≈ 14.5 × 20.5 cm (0.705), spine ≈ 2.3 cm (0.11 of the height).
   The height is solved so that 15 spines + one open cover + the gaps fill the shelf width:
   15·0.11H + 0.705H + 14G = width  →  H = (width − 14G) / 2.355 (capped by the screen height). */
.shelf{--G:6px;--H:min(calc((100cqw - 14 * var(--G)) / 2.355),64svh);--W:calc(var(--H) * .705)}
.shelf .bk,.shelf .bk.wide{--d:calc(var(--H) * .11)}
.shelf .sp{padding:10% 0 7%}
.shelf .sp b{font-size:clamp(11px,calc(var(--d) * .25),17px)}
.shelf .sp small{font-size:clamp(8px,calc(var(--d) * .17),11px)}
.shelf .sp i{font-size:clamp(14px,calc(var(--d) * .42),26px)}
.bd-3d{--d:calc(var(--h) * .11);--w:calc(var(--h) * .705)}
@media (max-width:700px){
  .shelf{--H:min(300px,48svh)}
  .shelf .bk,.shelf .bk.wide{--d:calc(var(--H) * .11);flex-basis:var(--d)}
}
/* the phrasebook is the exception: a small landscape pocket book (≈ 15.5 × 10 cm, 119 pages) */
.shelf .bk.wide{--h:calc(var(--H) * .49);--w:calc(var(--h) * 1.55);--d:calc(var(--H) * .055);height:var(--h)}
.shelf .bk.wide .sp small,.shelf .bk.wide .sp i{display:none}
.shelf .bk.wide .sp{padding:8% 0}
.shelf .bk.wide .sp b{font-size:clamp(9px,calc(var(--d) * .38),12px)}
.bd-3d.wide{--h:min(230px,36svh);--w:calc(var(--h) * 1.55);--d:calc(var(--h) * .11)}
.shelf .bk.wide{flex-basis:calc(var(--H) * .11)}
.shelf .bk.open .box,.shelf .bk.open:hover .box{transform:translateX(var(--x,0px)) translateY(-14px) rotateY(0deg)}

/* ================= SHELF v5: the conveyor (Keren's reference) =================
   JS places every book (translateX); one book faces front in the middle; untidy heights, thicknesses and leans. */
.shelf{position:relative;display:block;width:100%;max-width:none;margin:0;padding:0;overflow:hidden;height:calc(var(--shelf-h,480px) + 50px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.shelf .bk,.shelf .bk.wide{position:absolute;left:0;bottom:0;margin:0;flex:none;height:var(--h);perspective:2000px;opacity:1;
  transition:transform 1.1s cubic-bezier(.65,0,.25,1),width 1.1s cubic-bezier(.65,0,.25,1),opacity .45s ease}
.shelf .bk.jump{transition:none;opacity:0}
.js .shelf .bk{opacity:0}
.js .shelf.in .bk:not(.jump),.static .shelf .bk,.r-fail .shelf .bk{opacity:1}
.shelf .box,.shelf .bk:hover .box,.shelf .bk:focus-within .box{transform-origin:50% 100%;transform:rotateZ(var(--lean,0deg)) rotateY(90deg);
  transition:transform 1.1s cubic-bezier(.65,0,.25,1)}
.shelf .bk:not(.open):hover .box{transform:translateY(-10px) rotateZ(var(--lean,0deg)) rotateY(90deg);transition-duration:.45s}
.shelf .bk.open .box,.shelf .bk.open:hover .box,.shelf .bk.open:focus-within .box{transform:rotateZ(0deg) rotateY(0deg)}
.shelf .bk:not(.open) .bk-btn{cursor:pointer}
.shelf .bk::after{left:-15%;right:-15%}
.shelf-ctrl{display:flex;justify-content:center;gap:10px;padding-top:18px}
.shelf-ctrl button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;font-size:16px;color:var(--dark);transition:background .25s,color .25s}
.shelf-ctrl button:hover{background:var(--dark);color:#fff}
.shelf-ctrl [data-pause]{font-size:12px;font-weight:700}
@media (max-width:700px){.shelf{padding:0;overflow:hidden;scroll-snap-type:none}}
@media (min-width:701px){.shelf{-webkit-mask-image:none;mask-image:none}}

/* ================= SHELF v6: choreography =================
   1. the open cover closes (0 → .55s)   2. the row glides to make room (.1 → 1.05s)   3. the new book turns to you (.45 → 1.35s)
   Books are placed by their centre (zero-width anchor); the hit zone is the --slot around it. */
.shelf .bk,.shelf .bk.wide{width:0!important;transition:transform 1s cubic-bezier(.45,.05,.2,1) .1s,opacity .45s ease}
.shelf .bk-btn{left:calc(var(--slot,40px) / -2);width:var(--slot,40px);right:auto}
.shelf .bk::after{left:calc(var(--slot,40px) / -2 - 10px);right:auto;width:calc(var(--slot,40px) + 20px)}
.shelf .box,.shelf .bk:hover .box,.shelf .bk:focus-within .box{transition:transform .55s cubic-bezier(.4,0,.2,1)}
.shelf .bk.open .box,.shelf .bk.open:hover .box,.shelf .bk.open:focus-within .box{transition:transform .9s cubic-bezier(.2,.75,.25,1) .45s}
.shelf .bk:not(.open):hover .box{transform:translateY(-8px) rotateZ(var(--lean,0deg)) rotateY(90deg);transition:transform .35s cubic-bezier(.3,.7,.3,1)}
/* caption of the open book */
.shelf-ctrl{align-items:center;gap:14px;padding-top:22px}
.shelf-cap{min-width:min(420px,60vw);text-align:center;display:grid;gap:2px;transition:opacity .26s ease,transform .26s ease}
.shelf-cap.swap{opacity:0;transform:translateY(4px)}
.shelf-cap span{font:700 var(--t5)/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.shelf-cap b{font:600 italic calc(var(--t3)*.95)/1.2 var(--voice);color:var(--ink)}
.shelf-ctrl [data-pause]{margin-left:8px;width:36px;height:36px;font-size:11px;opacity:.7}
@media (max-width:700px){.shelf-cap{min-width:0;flex:1}.shelf-ctrl{padding-inline:var(--gut)}}
@media (prefers-reduced-motion:reduce){.shelf .bk,.shelf .box{transition:none!important}}

/* ================= SHELF CAPTION: a title page, set in type ================= */
.shelf-sec{padding-bottom:calc(110*var(--u))}
.shelf-ctrl{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:calc(36*var(--u));width:var(--wrap);margin:calc(34*var(--u)) auto 0;padding:0}
.shelf-cap{min-width:0;display:grid;justify-items:center;gap:calc(8*var(--u));text-align:center;transition:opacity .3s ease,transform .3s ease;padding-inline:calc(36*var(--u))}
.shelf-cap.swap{opacity:0;transform:translateY(3px)}
.sc-meta{font:600 var(--t5)/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.sc-title{font:400 calc(var(--t3)*1.25)/1.15 "Literata",Georgia,serif;font-style:normal;color:var(--ink);letter-spacing:-.005em}
.sc-count{font:400 var(--t5)/1 "Literata",Georgia,serif;color:var(--mute);font-variant-numeric:oldstyle-nums;letter-spacing:.06em}
/* the arrows as words, joined to the title by hairlines (like a printed running head) */
.sc-btn{display:flex;align-items:center;gap:14px;font:600 var(--t5)/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding:12px 0;width:100%}
.sc-btn[data-prev]{justify-content:flex-start}
.sc-btn[data-next]{justify-content:flex-end}
.sc-btn[data-prev]::after,.sc-btn[data-next]::before{content:"";flex:1;height:1px;background:var(--line);order:2}
.sc-btn[data-next]::before{order:-1}
.sc-btn span{font-family:"Literata",Georgia,serif;font-size:1.25em;letter-spacing:0;transition:transform .3s var(--ease)}
.sc-btn:hover{color:var(--accent-ink)}
.sc-btn[data-prev]:hover span{transform:translateX(-4px)}
.sc-btn[data-next]:hover span{transform:translateX(4px)}
.sc-pause{display:block;margin:14px auto 0;font:600 calc(var(--t5)*.9)/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding:8px 10px;border-bottom:1px solid transparent}
.sc-pause:hover{color:var(--ink);border-bottom-color:var(--line)}
.shelf-ctrl button{width:auto;height:auto;border:0;border-radius:0;font-size:inherit;background:none}
.shelf-ctrl button:hover{background:none;color:var(--accent-ink)}
@media (max-width:700px){
  .shelf-ctrl{grid-template-columns:auto 1fr auto;gap:10px;width:auto;padding-inline:var(--gut)}
  .sc-btn{font-size:0;gap:0}.sc-btn span{font-size:22px}
  .sc-btn[data-prev]::after,.sc-btn[data-next]::before{display:none}
  .shelf-cap{padding:0}
}
.shelf-cap .sc-title{font:400 calc(var(--t3)*1.25)/1.15 "Literata",Georgia,serif;font-style:normal;color:var(--ink)}
.shelf-cap .sc-meta{font:600 var(--t5)/1 var(--display);font-style:normal;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.shelf-cap .sc-count{font:400 var(--t5)/1 "Literata",Georgia,serif;font-style:normal;color:var(--mute);letter-spacing:.06em;text-transform:none}
@media (max-width:700px){.shelf-ctrl .sc-btn{font-size:0;gap:0;width:44px;height:44px;justify-content:center}.shelf-ctrl .sc-btn span{font-size:22px}.shelf-cap .sc-meta{letter-spacing:.14em}}

/* ================= ONE FAMILY: Assistant (Cyrillic from its own base, Source Sans 3), hierarchy by WEIGHT only =================
   800 headlines · 700 titles & labels · 600 names & prices · 400 text · 300 the "voice" (accents, quotes) · 200 large numerals
   no italics, no second family */
:root{--fam:"Assistant","Source Sans 3",Arial,sans-serif;--display:var(--fam);--font:var(--fam);--voice:var(--fam);--he:var(--fam)}
body,button,input,textarea{font-family:var(--fam)}
h1,h2{font-family:var(--fam);font-weight:800;letter-spacing:-.01em}
h3,.card-t,.ci b,.bd-info h2{font-family:var(--fam);font-weight:700;font-style:normal}
em,h1 em,h2 em{font-family:var(--fam);font-style:normal;font-weight:300;text-transform:inherit;letter-spacing:inherit}
.hero-h1{font-family:var(--fam);font-weight:800;letter-spacing:-.01em}
.hero-name{font-family:var(--fam);font-style:normal;font-weight:700;letter-spacing:-.005em}
.hero .lead{font-weight:400}
.kicker,.card-k,.tabs button,.story-src,.nav,.sc-meta,.shelf-cap .sc-meta{font-family:var(--fam);font-weight:700}
.btn,.hero-cta,.hdr .btn.solid{font-family:var(--fam);font-weight:600}
/* the voice: light weight instead of italics */
.story-t,.det blockquote p,.letter blockquote,.bd-sub,.board-ru .ru,.cell .tr,.cv i{font-family:var(--fam);font-style:normal;font-weight:300}
.story-t{font-size:calc(var(--t3)*1.1)}
.det blockquote p{font-size:calc(var(--t3)*1.3);line-height:1.3}
.letter blockquote{font-size:calc(var(--t3)*1.12);line-height:1.45}
.board-ru .ru{font-weight:600}
.facts b{font-family:var(--fam);font-style:normal;font-weight:200;font-size:calc(var(--t3)*1.6)}
.fmt .price,.cart-sum,.tel{font-family:var(--fam);font-weight:600}
.ftr-mark{font-family:var(--fam);font-weight:800}
.ftr-mark i{font-family:var(--fam);font-style:normal;font-weight:300}
.ticker b,.cell .he,.ftr-he,.card-t[dir=rtl],.bd-info h2[dir=rtl]{font-family:var(--fam);font-weight:700}
.sp b{font-family:var(--fam);font-weight:700}
.sp small{font-family:var(--fam);font-weight:600}
.sp i{font-family:var(--fam);font-style:normal;font-weight:300}
/* the shelf caption: same family, four weights */
.shelf-cap .sc-meta{font-weight:700;letter-spacing:.22em}
.shelf-cap .sc-title{font-family:var(--fam);font-weight:300;font-size:calc(var(--t3)*1.45);letter-spacing:-.01em;line-height:1.1}
.shelf-cap .sc-count{font-family:var(--fam);font-weight:400;letter-spacing:.14em}
.sc-btn{font-family:var(--fam);font-weight:700}
.sc-btn span{font-family:var(--fam);font-weight:300;font-size:1.4em}
.sc-pause{font-family:var(--fam);font-weight:600}

/* ================= PALETTE: paper · sky · navy (no red) ================= */
.on-dark .btn.solid,.hero-cta:hover,.mbar>a:last-child{background:var(--sky);border-color:var(--sky);color:var(--dark)}
.on-dark .btn.solid:hover{background:var(--light);border-color:var(--light)}
.loupe path{stroke:var(--sky)}
.toast{border-left-color:var(--sky)}
.tape{background:var(--dark);color:var(--light);border-block:0}
.det blockquote{border-left-color:var(--sky)}
.tabs button[aria-selected=true]::after{background:var(--dark)}
.fmt-pick input:checked+span{box-shadow:inset 4px 0 0 var(--sky)}
.cart-n{background:var(--sky);color:var(--dark)}
.ftr{border-top:1px solid var(--line)}
/* caption, after Keren: the book title carries the weight; arrows only */
.shelf-cap .sc-title{font-weight:800;font-size:calc(var(--t3)*1.4);letter-spacing:-.01em}
.shelf-cap .sc-meta{font-weight:600;letter-spacing:.2em}
.shelf-ctrl{grid-template-columns:auto auto auto;justify-content:center;gap:calc(48*var(--u))}
.shelf-ctrl .sc-btn{width:52px;height:52px;padding:0;justify-content:center;border-radius:50%;transition:background .3s var(--ease),color .3s var(--ease)}
.shelf-ctrl .sc-btn::before,.shelf-ctrl .sc-btn::after{display:none}
.shelf-ctrl .sc-btn span{font-size:30px;font-weight:300;line-height:1}
.shelf-ctrl .sc-btn:hover{background:var(--dark);color:var(--light)}

/* ================= PRICES: two price tags instead of a paragraph ================= */
.books .sec-head{align-items:end}
.prices{display:grid;grid-template-columns:1fr 1fr;margin:0;border-top:2px solid var(--dark)}
.price-tag{padding:calc(20*var(--u)) calc(28*var(--u)) 0 0;display:grid;gap:calc(6*var(--u));align-content:start}
.price-tag+.price-tag{padding-left:calc(28*var(--u));border-left:1px solid var(--line)}
.prices dt{font:700 var(--t5)/1 var(--fam);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-ink)}
.prices dd{margin:0}
.pt-sum{display:flex;align-items:baseline;gap:8px;min-height:calc(var(--t2)*1.05);color:var(--ink)}
.pt-sum b{font:800 calc(var(--t2)*1.1)/1 var(--fam);letter-spacing:-.02em}
.pt-sum span{font:600 var(--t3)/1 var(--fam)}
.pt-sum .ph{font:400 var(--t5)/1.4 var(--fam);align-self:center}
.pt-note{font:400 var(--t5)/1.5 var(--fam);color:var(--mute)}
@media (max-width:700px){.price-tag{padding-right:14px}.price-tag+.price-tag{padding-left:14px}}
/* arrows stay put: the caption sits in a fixed-width middle column, whatever the title length */
.shelf-ctrl{grid-template-columns:52px minmax(0,min(640px,64vw)) 52px;justify-content:center}
.shelf-cap{width:100%;padding-inline:0}
.shelf-cap .sc-title{max-width:100%;text-wrap:balance}
@media (max-width:700px){.shelf-ctrl{grid-template-columns:44px minmax(0,1fr) 44px}}
.shelf-ctrl{align-items:start}
.shelf-ctrl .sc-btn{margin-top:calc(var(--t5) + 8 * var(--u) + var(--t3) * 1.4 * 1.1 / 2 - 26px)}
@media (max-width:700px){.shelf-ctrl .sc-btn{margin-top:calc(var(--t5) + 8 * var(--u) + var(--t3) * 1.4 * 1.1 / 2 - 22px)}}
/* price tags: label and price on one line, no description */
.price-tag{grid-template-columns:auto auto;justify-content:start;align-items:baseline;gap:0 calc(18*var(--u));padding-block:calc(18*var(--u)) 0}
.pt-sum{min-height:0}
.pt-sum b{font-size:calc(var(--t2)*.85)}
.prices dt,.pt-sum .ph{white-space:nowrap}.price-tag{align-items:center}

/* ================= CATALOG CARDS: price buttons next to every book ================= */
.card{display:grid;gap:12px;align-content:start}
.card-cv{display:grid}
.card-t a:hover{text-decoration:underline;text-underline-offset:4px}
.card-buy{display:flex;gap:8px;margin-top:4px}
.buy{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 14px;border-radius:var(--r);border:1.5px solid var(--dark);text-align:left;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.buy small{font:700 11px/1 var(--fam);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.buy b{font:800 calc(var(--t4)*1.15)/1.1 var(--fam);white-space:nowrap}
.buy b .ph,.buy-pdf b{font-size:calc(var(--t4)*1.15)}
.buy-print{background:var(--dark);color:#fff}
.buy-print:hover{background:var(--sky);border-color:var(--sky);color:var(--dark)}
.buy-pdf{background:transparent;color:var(--dark)}
.buy-pdf:hover{background:var(--dark);color:#fff}
.buy:active{transform:scale(.97)}
.buy.done{background:var(--sky);border-color:var(--sky);color:var(--dark)}
.buy.done b::after{content:" ✓"}

/* ================= CATALOG v2 (Stripe Press feeling): the book as an object, quiet type, one purchase bar ================= */
.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(80*var(--u)) calc(44*var(--u))}
.card{display:grid;grid-template-rows:auto auto auto 1fr;gap:0;align-content:stretch}
/* the book: front cover + a real spine edge + page block, at a slight angle; it turns to face you on hover */
.card-cv{display:grid;place-items:end center;aspect-ratio:.78;padding:0 6% 6%;perspective:1400px;
  background:radial-gradient(70% 18% at 50% 98%,rgba(13,43,82,.16),transparent 70%)}
.card.wide .card-cv{aspect-ratio:.78}
.card-cv .cvi,.card.wide .card-cv .cvi{position:relative;display:block;width:86%;aspect-ratio:.705;height:auto;background:var(--tone);
  transform-style:preserve-3d;transform:rotateY(-22deg) rotateX(2deg);transform-origin:50% 100%;
  box-shadow:18px 22px 30px -18px rgba(13,43,82,.55);transition:transform .8s cubic-bezier(.2,.75,.25,1),box-shadow .8s ease}
.card.wide .card-cv .cvi{aspect-ratio:1.55;width:100%}
.card-cv .cvi img,.card-cv .cvi .cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;backface-visibility:hidden}
.card.wide .card-cv .cvi img{object-fit:contain}
.card-cv .cvi::before{content:"";position:absolute;top:0;bottom:0;left:0;width:14px;transform-origin:left center;transform:rotateY(90deg);
  background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(255,255,255,.12) 40%,rgba(0,0,0,.2)),var(--tone)}
.card-cv .cvi::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.2),transparent 4%,rgba(255,255,255,.12) 5.5%,transparent 14%,transparent 85%,rgba(0,0,0,.08))}
.card:hover .card-cv .cvi,.card:focus-within .card-cv .cvi{transform:rotateY(0) rotateX(0) translateY(-8px);box-shadow:0 30px 40px -22px rgba(13,43,82,.55)}
/* the words */
.card-k{margin-top:calc(26*var(--u));font:600 var(--t5)/1 var(--fam);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.card-t{margin-top:10px;min-height:2.3em;font:700 calc(var(--t3)*.95)/1.15 var(--fam);letter-spacing:-.01em;color:var(--ink)}
.card-t a:hover{text-decoration:none;color:var(--accent-ink)}
.card-t[dir=rtl]{text-align:left}
/* one purchase bar, always at the bottom of the card */
.card-buy{align-self:end;display:grid;grid-template-columns:1fr auto;margin-top:18px;border:1.5px solid var(--dark);border-radius:var(--r);overflow:hidden}
.card-buy.one{grid-template-columns:1fr}
.buy{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0 16px;
  font:600 var(--t5)/1 var(--fam);letter-spacing:.12em;text-transform:uppercase;transition:background .25s var(--ease),color .25s var(--ease)}
.buy b{font:800 calc(var(--t4)*1.05)/1 var(--fam);letter-spacing:0;text-transform:none}
.buy-print{background:var(--dark);color:#fff}
.buy-print:hover{background:#163d6e}
.buy-pdf{color:var(--dark);border-left:1.5px solid var(--dark);justify-content:center;min-width:70px}
.buy-pdf:hover{background:var(--sky)}
.buy:focus-visible{outline:2px solid var(--sky);outline-offset:-4px}
.buy.done{background:var(--sky);color:var(--dark)}
.buy.done b::after,.buy-pdf.done span::after{content:" ✓"}
.badge{display:none}
@media (max-width:1024px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 16px}.buy{padding:0 10px;min-height:44px}.buy-pdf{min-width:54px}.card-cv .cvi::before{width:9px}}
@media (max-width:700px){.buy-print span{display:none}.buy-print{justify-content:center}.buy{padding:0 8px;letter-spacing:.08em}.buy-pdf{min-width:52px}.buy b{font-size:15px}}

/* ================= SHELF v7: a niche in the wall (after Keren's mockup) ================= */
/* the wall: warm plaster, light from the upper left, shadow pooling in the upper right, a soft niche at the top */
.shelf{height:calc(var(--shelf-h,480px) + 96px);
  background:
    radial-gradient(60% 85% at 18% -10%,rgba(255,255,255,.75),rgba(255,255,255,0) 65%),
    radial-gradient(45% 70% at 96% -5%,rgba(70,52,34,.16),rgba(70,52,34,0) 70%),
    linear-gradient(180deg,#e9e1d3 0%,#efe8dc 55%,#e8e0d2 100%);
  box-shadow:inset 0 34px 46px -34px rgba(60,44,28,.32),inset 0 -24px 30px -26px rgba(60,44,28,.25)}
.shelf::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .45 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* the ledge: a light board with a top face, a front edge and a soft cast shadow */
.plank{position:relative;z-index:2;height:max(16px,calc(22*var(--u)));border:0;
  background:linear-gradient(180deg,#fdfbf7 0%,#f6f2ea 55%,#ebe5d9 100%);
  box-shadow:inset 0 1px 0 #fff,0 1px 0 rgba(60,44,28,.08),0 16px 22px -10px rgba(60,44,28,.28),0 38px 60px -28px rgba(60,44,28,.22)}
.plank::before{content:"";position:absolute;left:0;right:0;top:-1px;height:6px;background:linear-gradient(180deg,rgba(60,44,28,.12),transparent)}
/* contact shadow of each book on the ledge */
.shelf .bk::after{bottom:-3px;height:12px;background:radial-gradient(closest-side,rgba(50,36,22,.45),transparent)}

/* spines: cloth-bound, rounded, with the title and the shelf number under a thin rule */
.shelf .f.spine{border-radius:3px 3px 1px 1px;box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.18)}
.shelf .sp{position:relative;padding:14% 0 8%;gap:10px;color:rgba(255,255,255,.93);
  background:linear-gradient(90deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.08) 9%,rgba(255,255,255,.18) 22%,rgba(255,255,255,.04) 46%,rgba(0,0,0,.08) 76%,rgba(0,0,0,.45) 100%),var(--tone);
  box-shadow:none}
.shelf .sp::before{content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4 .25' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E")}
.shelf .sp b{font:500 clamp(12px,calc(var(--d) * .27),17px)/1.2 var(--fam);letter-spacing:.02em}
.shelf .sp i{display:flex;flex-direction:column;align-items:center;gap:8px;font:300 clamp(14px,calc(var(--d) * .36),24px)/1 var(--fam);font-style:normal;color:rgba(255,255,255,.9)}
.shelf .sp i::before{content:"";width:58%;min-width:16px;height:1px;background:rgba(255,255,255,.4)}
.shelf .bk.wide .sp i{display:none}
/* the book that faces you: cloth-like cover with a deep shadow on the wall */
.shelf .f.front{border-radius:2px 4px 4px 2px;box-shadow:24px 26px 44px -16px rgba(40,28,16,.5),4px 4px 10px rgba(40,28,16,.18)}

/* ================= CAPTION v3 ================= */
.shelf-ctrl{grid-template-columns:64px minmax(0,min(760px,62vw)) 64px;gap:calc(44*var(--u));margin-top:calc(40*var(--u))}
.shelf-ctrl .sc-btn{width:64px;height:64px;border-radius:50%;background:#fff;color:var(--ink);
  box-shadow:0 10px 24px -10px rgba(60,44,28,.35),0 1px 2px rgba(60,44,28,.12);
  margin-top:calc(var(--t5) + 10px + var(--t2) * .95 * 1.05 / 2 - 32px);transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s}
.shelf-ctrl .sc-btn span{font:300 34px/1 var(--fam);transform:translateY(-2px)}
.shelf-ctrl .sc-btn:hover{background:#fff;color:var(--ink);transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(60,44,28,.45),0 1px 2px rgba(60,44,28,.12)}
.shelf-ctrl .sc-btn[data-prev]:hover span,.shelf-ctrl .sc-btn[data-next]:hover span{transform:translateY(-2px)}
.shelf-cap{gap:10px}
.shelf-cap .sc-meta{font:600 var(--t5)/1 var(--fam);letter-spacing:.24em;color:color-mix(in srgb,var(--tone,var(--dark)) 85%,#000)}
.shelf-cap .sc-title{font:600 calc(var(--t2) * .95)/1.05 var(--fam);letter-spacing:-.015em;color:var(--ink)}
.shelf-cap .sc-count{font:500 var(--t5)/1 var(--fam);letter-spacing:.08em;color:var(--ink);opacity:.75;margin-top:6px}
.sc-dots{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}
.sc-dots button{width:6px;height:6px;padding:0;border-radius:50%;background:color-mix(in srgb,var(--ink) 22%,transparent);transition:all .35s var(--ease)}
.sc-dots button:hover{background:color-mix(in srgb,var(--ink) 50%,transparent)}
.sc-dots button.on{width:12px;height:12px;background:var(--tone,var(--dark))}
.sc-pause{margin-top:18px}
.sc-pause::before{content:"";display:block;width:52px;height:1px;background:var(--line);margin:0 auto 14px}
@media (max-width:700px){
  .shelf-ctrl{grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
  .shelf-ctrl .sc-btn{width:44px;height:44px;margin-top:calc(var(--t5) + 10px + var(--t2) * .8 * 1.05 / 2 - 22px)}
  .shelf-ctrl .sc-btn span{font-size:26px}
  .shelf-cap .sc-title{font-size:calc(var(--t2) * .8)}
  .sc-dots{gap:7px}.sc-dots button{width:5px;height:5px}.sc-dots button.on{width:9px;height:9px}
}
.shelf-ctrl{grid-template-columns:64px minmax(0,min(900px,70vw)) 64px}
.shelf-cap .sc-title{font-size:calc(var(--t2) * .8)}
.shelf-ctrl .sc-btn{margin-top:calc(var(--t5) + 10px + var(--t2) * .8 * 1.05 / 2 - 32px)}
@media (max-width:700px){.shelf{height:calc(var(--shelf-h,300px) + 56px)}}
/* the wall fades in from the page: no hard edge at the top */
.shelf{box-shadow:inset 0 -24px 30px -26px rgba(60,44,28,.25);
  background:
    linear-gradient(180deg,var(--light) 0,rgba(246,243,236,.85) 50px,rgba(246,243,236,0) 170px),
    radial-gradient(60% 85% at 18% -10%,rgba(255,255,255,.75),rgba(255,255,255,0) 65%),
    radial-gradient(45% 70% at 96% 10%,rgba(70,52,34,.12),rgba(70,52,34,0) 70%),
    linear-gradient(180deg,#efe8dc 0%,#ece5d8 60%,#e7dfd1 100%)}
.shelf::before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 170px);mask-image:linear-gradient(180deg,transparent 0,#000 170px)}

/* ================= FONT PREVIEW: Assistant (default) or Bebas Neue headings (+ Oswald for Cyrillic) — remove the switcher before launch =================
html[data-font] :is(h1,h2) em,html[data-font] .ftr-mark i{font-family:inherit;font-weight:400}
/* the switcher (preview only) */
.fontswitch{position:fixed;left:16px;bottom:16px;z-index:200;display:flex;gap:4px;padding:5px;border-radius:999px;background:rgba(13,43,82,.92);box-shadow:0 10px 30px -10px rgba(0,0,0,.5);backdrop-filter:blur(6px)}
.fontswitch button{color:#fff;font:600 12px/1 var(--fam);letter-spacing:.06em;padding:9px 13px;border-radius:999px;opacity:.7}
.fontswitch button[aria-pressed=true]{background:var(--sky);color:var(--dark);opacity:1}
@media (max-width:700px){.fontswitch{bottom:70px;left:8px;right:8px;justify-content:center}.fontswitch button{padding:8px 9px;font-size:11px}}
@media (max-width:700px){html[data-font] .hero-h1{font-size:34px}html[data-font] .hero-name{font-size:20px}}
@font-face{font-family:"Bebas Neue";src:url(fonts/BebasNeue-Regular.ttf) format("truetype");font-display:swap}
html[data-font=bebas] :is(h1,h2,h3,.hero-h1,.shelf-cap .sc-title,.card-t,.ftr-mark,.drawer nav a,.bd-info h2,.fmt .price,.hero-name){
  font-family:"Bebas Neue","Oswald",var(--fam);font-weight:500;font-synthesis:none;letter-spacing:.01em;text-transform:uppercase}
html[data-font=bebas] .hero-h1{font-size:calc(96*var(--k));line-height:.92}

/* ================= THE SIGNATURE: Atziluth Script (Latin only), used as an autograph, never for reading text ================= */
@font-face{font-family:"Atziluth";src:url(fonts/AtziluthScript.ttf) format("truetype");font-display:swap}
.sig{display:block;font-family:"Atziluth",cursive;font-weight:400;font-style:normal;line-height:1;color:var(--dark);font-synthesis:none;pointer-events:none;user-select:none}
.sig-hero{font-size:calc(58*var(--k));margin:calc(-6*var(--k)) 0 calc(4*var(--k)) calc(8*var(--k));transform:rotate(-5deg);transform-origin:left center;opacity:.85}
.sig-about{font-size:calc(var(--t2)*1.15);margin:calc(6*var(--u)) 0 calc(10*var(--u));transform:rotate(-4deg);transform-origin:left center;color:var(--ink)}
@media (max-width:700px){.sig-hero{font-size:40px;margin:2px 0 0 4px}}

/* about column: no sticky (with signature it is taller than the viewport) */
.about-txt{position:relative;top:auto}

/* FINAL TYPE: Bebas. Hero headline a bit smaller with more air; CTA moved under the headline, off the books */
html[data-font=bebas] .hero-h1{top:calc(112*var(--k));font-size:calc(84*var(--k));line-height:1.04;letter-spacing:.015em}
html[data-font=bebas] .hero-name{font-size:calc(31*var(--k));line-height:1.1;letter-spacing:.02em}
.hero-cta{position:absolute;z-index:5;left:calc(42*var(--k));top:calc(400*var(--k));margin:0}
@media (max-width:700px){
  html[data-font=bebas] .hero-h1{font-size:36px;line-height:1.06}
  html[data-font=bebas] .hero-name{font-size:22px}
  .hero-cta{position:relative;left:auto;top:auto;order:2;align-self:stretch;justify-content:center;margin-top:18px}
  .hero-yuri{order:3}
}
@media (max-width:700px){html[data-font=bebas] .hero-h1{top:auto}html[data-font=bebas] .hero-side{margin-top:22px}}

/* CATALOG v3: quiet centred caption, two price columns split by a hairline */
.card{text-align:center}
.card-t{margin-top:calc(24*var(--u));min-height:0;font-size:calc(var(--t3)*.82);line-height:1.12}
html[data-font=bebas] .card-t{letter-spacing:.02em}
.card-t[dir=rtl]{text-align:center}
.card-k{margin-top:6px;font:400 var(--t5)/1.3 var(--fam);letter-spacing:.02em;text-transform:none;color:var(--accent-ink)}
.card-buy{align-self:end;display:grid;grid-template-columns:1fr 1fr;margin-top:18px;border:0;border-radius:0;overflow:visible}
.card-buy.one{grid-template-columns:1fr}
.buy{display:grid;justify-items:center;align-content:start;gap:8px;min-height:0;padding:6px 8px 8px;border-radius:6px;
  font:600 var(--t5)/1 var(--fam);letter-spacing:.02em;text-transform:none;color:var(--dark);background:transparent}
.buy span{display:inline-flex;align-items:center;gap:6px}
.buy svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.buy b{font:700 calc(var(--t4)*1.02)/1 var(--fam);letter-spacing:0}
.buy b .ph{font-style:normal;font-size:12px;font-weight:500}
.buy-print,.buy-pdf{background:transparent;color:var(--dark);border:0;min-width:0;justify-content:initial}
.buy-pdf{position:relative}
.buy-pdf::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:rgba(13,43,82,.18)}
.buy-print:hover,.buy-pdf:hover{background:rgba(143,205,235,.28)}
.buy.done{background:var(--sky);color:var(--dark)}
.buy-pdf.done span::after{content:none}
@media (max-width:700px){.buy{padding:6px 4px 8px}.buy-print span{display:inline-flex}.buy b{font-size:15px}.buy svg{width:16px;height:16px}}

/* Hebrew titles: Karantina, the condensed Hebrew partner of Bebas */
html[data-font=bebas] :is(.card-t,.bd-info h2)[dir=rtl]{font-family:"Karantina","Bebas Neue",var(--fam);font-weight:700;letter-spacing:0;font-size:calc(var(--t3)*1.05);line-height:1}
/* catalog books: no box behind the book, only a soft floor shadow that fades into the page */
.card-cv{background:none}
.card-cv::after{content:"";position:absolute;left:8%;right:2%;bottom:3%;height:9%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(13,43,82,.28),rgba(13,43,82,.1) 55%,transparent);filter:blur(5px)}
.card-cv .cvi,.card.wide .card-cv .cvi{box-shadow:6px 10px 22px -14px rgba(13,43,82,.45)}
.card:hover .card-cv .cvi,.card:focus-within .card-cv .cvi{box-shadow:0 22px 34px -24px rgba(13,43,82,.45)}
.card-cv{isolation:isolate}

/* CARD ACTIONS: hover bar on the cover (buy / favourite / back of the book), quick-buy panel, back cover */
.card{position:relative}
.card-stage{position:relative}
.card-acts{position:absolute;left:0;right:0;bottom:calc(12% + 4px);z-index:3;display:flex;justify-content:center;gap:8px;
  opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease),transform .35s var(--ease);pointer-events:none}
.card:hover .card-acts,.card:focus-within .card-acts,.card.faved .card-acts:has([data-fav][aria-pressed=true]:focus){opacity:1;transform:none;pointer-events:auto}
.card-acts button{all:unset;box-sizing:border-box;position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(13,43,82,.82);color:#fff;backdrop-filter:blur(6px);box-shadow:0 6px 16px -6px rgba(0,0,0,.45);transition:background .2s,color .2s,transform .2s}
.card-acts button:first-child{background:var(--sky);color:var(--dark)}
.card-acts button:hover{transform:translateY(-2px);background:#fff;color:var(--dark)}
.card-acts button:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.card-acts svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card-acts [data-fav][aria-pressed=true] svg{fill:currentColor}
.card-acts [data-fav][aria-pressed=true]{color:#fff}
.card-acts [data-flip][aria-pressed=true]{background:#fff;color:var(--dark)}
.card-acts em{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);white-space:nowrap;padding:5px 9px;border-radius:6px;
  background:var(--dark);color:#fff;font:600 11px/1 var(--fam);font-style:normal;letter-spacing:.02em;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.card-acts button:hover em,.card-acts button:focus-visible em{opacity:1;transform:translate(-50%,0)}
/* little heart badge so favourites are visible without hovering */
.card.faved .card-stage::before{content:"";position:absolute;top:4%;right:10%;z-index:3;width:26px;height:26px;border-radius:50%;
  background:var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 20s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.2a4.3 4.3 0 0 1 7.5 2.6C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E") center/14px no-repeat}
.tabs .tab-fav b{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 5px;border-radius:999px;background:var(--dark);color:#fff;font-size:11px}
/* back of the book */
.cvb{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;display:flex;flex-direction:column;gap:10px;padding:14% 11%;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(0,0,0,.18)),var(--tone);color:#fff;text-align:left;overflow:hidden}
.cvb b{font:700 15px/1.15 var(--fam);text-transform:uppercase;letter-spacing:.03em}
html[data-font=bebas] .cvb b{font-family:"Bebas Neue","Oswald",var(--fam);font-weight:500;font-size:20px}
.cvb span{font:400 12.5px/1.5 var(--fam);opacity:.92;display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden}
.cvb i{margin-top:auto;font:600 10px/1 var(--fam);font-style:normal;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.card.wide .cvb span{-webkit-line-clamp:3}
.card.flip .card-cv .cvi,.card.flip:hover .card-cv .cvi{transform:rotateY(180deg) translateY(-8px)}
.card.flip .card-cv .cvi::before{opacity:0}
/* quick-buy panel */
.qb-dim{position:fixed;inset:0;z-index:60;background:rgba(13,43,82,.38);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s}
.qb-dim.on{opacity:1;pointer-events:auto}
.card.qb-on{z-index:61}
.qb{position:absolute;left:-6%;right:-6%;top:6%;z-index:5;background:var(--light);border-radius:14px;padding:30px 16px 16px;text-align:center;
  box-shadow:0 30px 60px -20px rgba(13,43,82,.55);opacity:0;transform:translateY(12px) scale(.98);transition:opacity .25s var(--ease),transform .3s var(--ease)}
.qb.on{opacity:1;transform:none}
.qb-x{all:unset;position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:32px;height:32px;border-radius:50%;background:#fff;color:var(--dark);
  display:grid;place-items:center;font:400 22px/1 var(--fam);cursor:pointer;box-shadow:0 6px 14px -6px rgba(0,0,0,.35)}
.qb-x:focus-visible{outline:2px solid var(--sky)}
.qb h4{margin:0;font:700 22px/1.05 var(--fam);color:var(--dark)}
html[data-font=bebas] .qb h4{font-family:"Bebas Neue","Oswald",var(--fam);font-weight:500;font-size:28px;letter-spacing:.01em}
html[data-font=bebas] .qb h4[dir=rtl]{font-family:"Karantina",var(--fam);font-weight:700;font-size:30px}
.qb-by{margin:6px 0 0;font:400 13px/1.3 var(--fam);color:var(--accent-ink)}
.qb-link,.qb-more{all:unset;display:inline-block;margin-top:8px;font:600 12.5px/1.2 var(--fam);color:var(--dark);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.qb-fmts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px}
.qb-fmts.one{grid-template-columns:1fr}
.qb-f{display:grid;justify-items:center;gap:6px;padding:14px 8px 12px;border-radius:10px;background:#fff}
.qb-f.main{background:rgba(143,205,235,.35)}
.qb-f>span{display:inline-flex;align-items:center;gap:5px;font:600 12.5px/1 var(--fam);color:var(--dark)}
.qb-f b{font:700 20px/1 var(--fam);color:var(--dark)}
.qb-f b .ph{font-style:normal;font-size:12px;font-weight:500}
.qb-f small{font:400 11px/1 var(--fam);color:var(--accent-ink)}
.qb-f svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.qb-add{all:unset;box-sizing:border-box;margin-top:4px;display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--dark);color:var(--dark);font:600 12.5px/1 var(--fam);transition:background .2s,color .2s}
.qb-f.main .qb-add{background:var(--dark);color:#fff}
.qb-add:hover{background:var(--dark);color:#fff}
.qb-f.main .qb-add:hover{background:#163d6e}
.qb-add.done{background:var(--sky);border-color:var(--sky);color:var(--dark)}
.qb-add:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.qb-more{margin-top:14px}
@media (hover:none){.card-acts{opacity:1;transform:none;pointer-events:auto}.card-acts em{display:none}}
@media (max-width:700px){.card-acts{gap:6px}.card-acts button{width:34px;height:34px}.card-acts svg{width:16px;height:16px}
  .qb{position:fixed;left:12px;right:12px;top:auto;bottom:80px;z-index:62}.card.qb-on{z-index:auto}}

/* Bebas headings: the light second half uses Oswald Light, so both halves share one cap height */
html[data-font=bebas] :is(h1,h2,h3) em,html[data-font=bebas] .ftr-mark i{font-family:"Bebas Neue","Oswald",var(--fam);font-weight:300;font-style:normal;letter-spacing:.01em}
.card-cv .cvi{overflow:visible}.card.flip .card-cv .cvi::after{opacity:0}.card-cv .cvi::after{transition:opacity .4s}
.qb.sheet{position:fixed;left:10px;right:10px;top:auto;bottom:calc(64px + env(safe-area-inset-bottom));z-index:70;padding-top:34px}.qb.sheet .qb-x{top:10px;left:auto;right:10px;transform:none;box-shadow:none;background:rgba(13,43,82,.08)}
.fav-btn.on svg{fill:currentColor}

/* About portrait: Yuri on a stack of his books, true proportions, paper background melts into the page */
#about .about-ph{background:none;box-shadow:none;border-radius:0;overflow:visible}
#about .about-ph::before,#about .about-ph::after{display:none}
#about .about-ph img{width:100%;height:auto;max-height:none;aspect-ratio:3/4;object-fit:contain;mix-blend-mode:multiply;border-radius:0;
  -webkit-mask-image:radial-gradient(120% 95% at 50% 45%,#000 70%,transparent 100%);mask-image:radial-gradient(120% 95% at 50% 45%,#000 70%,transparent 100%)}
#about .about-ph img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect;filter:brightness(1.04) saturate(.95)}

/* ===================== ROUND 5 ===================== */
/* Type: Bebas is Latin-only, so Cyrillic headings are Oswald. Bebas now only covers Latin letters (no mixed punctuation),
   one bold weight + one light weight, real line spacing, sizes on one scale */
:root{--blue:#1F6FB0;--h2:clamp(40px,4.4vw,68px)}
html[data-font=bebas] h2{font-size:var(--h2);line-height:1.08;font-weight:600;letter-spacing:.005em}
html[data-font=bebas] h2 em{font-weight:300;letter-spacing:.005em}
html[data-font=bebas] h3{line-height:1.12}
html[data-font=bebas] .hero-h1{line-height:1.06;font-weight:600}
html[data-font=bebas] .hero-name{font-weight:600}
@media (max-width:700px){html[data-font=bebas] h2{line-height:1.1}}

/* Colour: a vivid book-blue for the light halves of headings and the small labels, sky tinted sections */
:root{--accent-ink:#1F5E96}
:not(.on-dark)>h2 em,section:not(.on-dark) h2 em{color:var(--blue)}
.kicker{color:var(--blue)}
.on-dark .kicker,.on-dark h2 em{color:var(--sky)}
#books{background:linear-gradient(180deg,var(--light) 0,#E4F1F9 220px,#E4F1F9 calc(100% - 220px),var(--light))}
#detective{background:var(--sky)}
#detective h2,#detective p,#detective .kicker{color:var(--dark)}
#detective h2 em{color:#fff}
#detective blockquote{border-color:var(--dark)}
.card-k{color:var(--accent-ink)}

/* Buttons: pill shape, sentence case, the arrow lives in its own circle */
.btn{border-radius:999px;text-transform:none;letter-spacing:0;font-weight:600;font-size:max(15px,calc(16*var(--u)));gap:.9em;padding:0 .45em 0 1.5em;border-width:1.5px}
.btn:not(:has(span[aria-hidden])){padding:0 1.6em}
.btn span[aria-hidden]{display:grid;place-items:center;width:calc(var(--btn-h) - 12px);height:calc(var(--btn-h) - 12px);border-radius:50%;
  background:#fff;color:var(--dark);font-size:1.05em;line-height:1;transition:transform .35s var(--ease),background .25s,color .25s}
.btn.ghost span[aria-hidden]{background:var(--dark);color:#fff}
.btn:hover span[aria-hidden]{transform:translateX(3px) rotate(-35deg)}
.btn.solid,.hero-cta{background:var(--dark);border-color:var(--dark);color:#fff}
.btn.solid:hover,.hero-cta:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.ghost{background:transparent;border-color:rgba(13,43,82,.35);color:var(--dark)}
.btn.ghost:hover{background:var(--dark);border-color:var(--dark);color:#fff}
.btn.ghost:hover span[aria-hidden]{background:#fff;color:var(--dark)}
.on-dark .btn.solid,#detective .btn.solid{background:var(--sky);border-color:var(--sky);color:var(--dark)}
.on-dark .btn.solid span[aria-hidden]{background:var(--dark);color:#fff}
.on-dark .btn.solid:hover{background:#fff;border-color:#fff;color:var(--dark)}
.on-dark .btn.ghost{border-color:rgba(255,255,255,.4);color:#fff}
.on-dark .btn.ghost span[aria-hidden]{background:#fff;color:var(--dark)}
.on-dark .btn.ghost:hover{background:#fff;color:var(--dark)}
.on-dark .btn.ghost:hover span[aria-hidden]{background:var(--dark);color:#fff}
.btn.sm{min-height:46px;font-size:14.5px;padding:0 .35em 0 1.25em}
.btn.sm span[aria-hidden]{width:34px;height:34px}
.hero-cta{font-size:max(15px,calc(18*var(--k)));min-height:calc(64*var(--k));padding:0 calc(8*var(--k)) 0 calc(30*var(--k))}
.hero-cta span[aria-hidden]{width:calc(48*var(--k));height:calc(48*var(--k))}
@media (max-width:700px){.hero-cta{min-height:54px;padding:0 6px 0 22px;justify-content:space-between}.hero-cta span[aria-hidden]{width:42px;height:42px}}

/* Header: slimmer, quieter nav, icon buttons in circles, pill CTA; floats with a soft shadow once you scroll */
:root{--hdr-h:calc(80*var(--u))}
@media (max-width:700px){:root{--hdr-h:64px}}
.hdr,.hdr.solid{background:color-mix(in srgb,var(--light) 88%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.hdr{box-shadow:none}
.hdr.solid{box-shadow:0 10px 30px -18px rgba(13,43,82,.35),0 1px 0 rgba(13,43,82,.06)}
.mark img{height:max(38px,calc(52*var(--u)))}
.nav{text-transform:none;font-weight:600;letter-spacing:0;font-size:max(14.5px,calc(15.5*var(--u)));gap:6px;padding:5px;border-radius:999px;background:rgba(13,43,82,.05)}
.nav a{padding:9px 16px;border-radius:999px;transition:background .25s,color .25s}
.nav a::after{display:none}
.nav a:hover{background:#fff;box-shadow:0 4px 12px -6px rgba(13,43,82,.25)}
.hdr-act{gap:8px}
.cart-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(13,43,82,.16);transition:background .25s,border-color .25s}
.cart-btn:hover{background:#fff;border-color:transparent;box-shadow:0 4px 12px -6px rgba(13,43,82,.3)}
.cart-btn svg{width:20px}
.cart-n{top:-3px;right:-3px}
.hdr .btn.solid{background:var(--dark);border-color:var(--dark);color:#fff;text-transform:none;font-weight:600;margin-inline-start:6px}
.hdr .btn.solid span[aria-hidden]{background:var(--sky);color:var(--dark)}
.hdr .btn.solid:hover{background:var(--blue);border-color:var(--blue)}
@media (max-width:1100px){.nav a{padding:9px 11px}}
@media (max-width:700px){.cart-btn{width:40px;height:40px}.cart-btn svg{width:19px}}
#about .about-ph img{aspect-ratio:1000/1433;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 30px 30px rgba(13,43,82,.18))}#about .about-ph{position:relative}#about .about-ph::before{content:'';display:block;position:absolute;left:4%;right:4%;top:18%;bottom:6%;z-index:-1;border-radius:50% 50% 24px 24px / 38% 38% 24px 24px;background:radial-gradient(80% 70% at 50% 35%,#cfe8f6,#8FCDEB)}
#about .about-ph{isolation:isolate}
#about .about-ph::before{display:none}#about .about-ph::after{content:'';display:block;position:absolute;left:18%;right:18%;bottom:1.5%;height:5%;z-index:-1;background:radial-gradient(closest-side,rgba(13,43,82,.28),transparent);filter:blur(6px)}#about .about-ph img{filter:none}
.ftr img[src*=credit]{filter:brightness(0) saturate(100%);opacity:.7}
.sig-img{display:block;width:clamp(96px,9vw,140px);height:auto;margin:calc(4*var(--u)) 0 calc(8*var(--u)) -6px}

/* ================= SHELF v8: Keren's favourite look — side column + a quiet bookcase ================= */
.shelf-sec{padding:calc(110*var(--u)) 0 calc(100*var(--u))}
.shelf-sec .shelf-wrap{width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:calc(40*var(--u));align-items:end}
.shelf-side{display:grid;gap:14px;align-content:end;padding-bottom:calc(40*var(--u))}
.shelf-sec .shelf-h{margin:0;font-size:clamp(34px,3.2vw,50px);line-height:1.05}
.shelf-sec .shelf-h em{display:block}
.shelf-hint{margin:0;font:400 var(--t4)/1.5 var(--fam);color:var(--accent-ink);max-width:24ch}
.shelf-sec .shelf-cap{display:grid;gap:6px;justify-items:start;text-align:left;margin-top:14px;min-height:5.2em}
.shelf-sec .shelf-cap .sc-meta{font:600 12px/1.2 var(--fam);letter-spacing:.14em;text-transform:uppercase}
.shelf-sec .shelf-cap .sc-title{font:600 clamp(18px,1.5vw,22px)/1.2 var(--fam);letter-spacing:0;text-transform:none}
.shelf-sec .shelf-cap .sc-count{font:500 12.5px/1 var(--fam);margin-top:2px}
.shelf-sec .shelf-ctrl{display:flex;align-items:center;gap:12px;width:auto;margin:10px 0 0;padding:0;grid-template-columns:none}
.shelf-sec .shelf-ctrl .sc-btn{width:48px;height:48px;margin:0;border-radius:50%;background:#fff;color:var(--dark);font-size:0;
  box-shadow:0 8px 20px -10px rgba(13,43,82,.35),0 1px 2px rgba(13,43,82,.1)}
.shelf-sec .shelf-ctrl .sc-btn span{font:400 20px/1 var(--fam);transform:none}
.shelf-sec .shelf-ctrl .sc-btn:hover{background:var(--dark);color:#fff;transform:translateY(-2px)}
.shelf-sec .sc-pause{margin:0 0 0 6px;padding:8px 4px;font:600 11px/1 var(--fam);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);background:none;border:0}
.shelf-sec .sc-pause::before{display:none}
/* the bookcase: a soft light back wall, a white ledge */
.shelf-stage{position:relative;border-radius:18px 18px 0 0;
  background:radial-gradient(90% 120% at 30% 0%,#fbf9f4 0%,#f1ece2 70%,#ebe5d9 100%);
  box-shadow:inset 0 30px 40px -34px rgba(60,44,28,.18)}
.shelf-sec .shelf{height:calc(var(--shelf-h,380px) + 70px);background:none;box-shadow:none;padding:0}
.shelf-sec .shelf::before{opacity:.18}
.shelf-sec .plank{margin:0 -14px;border-radius:3px;height:16px;
  background:linear-gradient(180deg,#fff 0%,#faf8f3 60%,#ece6da 100%);
  box-shadow:0 1px 0 rgba(60,44,28,.06),0 14px 20px -10px rgba(60,44,28,.26),0 30px 50px -26px rgba(60,44,28,.2)}
@media (max-width:900px){
  .shelf-sec .shelf-wrap{grid-template-columns:1fr;gap:18px;width:auto}
  .shelf-side{padding:0 var(--gut);gap:10px}
  .shelf-sec .shelf-cap{min-height:0;margin-top:6px}
  .shelf-stage{border-radius:0}
  .shelf-sec .plank{margin:0}
}

/* author's signature in the hero, right after the line about him */
.sig-hero-img{display:block;width:calc(96*var(--k));height:auto;margin:calc(10*var(--k)) 0 0 calc(-4*var(--k))}
@media (max-width:700px){.sig-hero-img{width:76px;margin:8px 0 0 -2px}}

/* CATALOG v4 (Keren's reference): flat covers with rounded corners, cart on the cover corner, title / tag / price below */
.tabs{display:flex;flex-wrap:wrap;gap:8px;border:0}
.tabs button{padding:11px 20px;border-radius:999px;background:#fff;color:var(--dark);border:0;font:600 14.5px/1 var(--fam);letter-spacing:0;text-transform:none;
  box-shadow:0 1px 2px rgba(13,43,82,.08);transition:background .25s,color .25s}
.tabs button::after{display:none}
.tabs button:hover{background:#fff;box-shadow:0 6px 16px -8px rgba(13,43,82,.35)}
.tabs button[aria-selected=true]{background:var(--dark);color:#fff}
.tabs .tab-fav b{background:var(--sky);color:var(--dark)}
.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(56*var(--u)) calc(28*var(--u))}
.card{text-align:left}
.card-stage{position:relative}
.card-cv,.card.wide .card-cv{display:block;aspect-ratio:auto;padding:0;background:none;perspective:1600px}
.card-cv::after{display:none}
.card-cv .cvi,.card.wide .card-cv .cvi{width:100%;aspect-ratio:.72;border-radius:10px;transform:none;overflow:visible;
  box-shadow:0 18px 30px -18px rgba(13,43,82,.45),0 2px 6px rgba(13,43,82,.08)}
.card.wide .card-cv .cvi{aspect-ratio:.72;background:#fff}
.card.wide .card-cv .cvi img{object-fit:contain;padding:18% 6%}
.card-cv .cvi img,.card-cv .cvi .cv{border-radius:10px}
.card-cv .cvi::before{display:none}
.card-cv .cvi::after{border-radius:10px;background:linear-gradient(90deg,rgba(0,0,0,.16),transparent 3%,rgba(255,255,255,.1) 4%,transparent 9%)}
.card:hover .card-cv .cvi,.card:focus-within .card-cv .cvi{transform:translateY(-6px);box-shadow:0 28px 40px -22px rgba(13,43,82,.5),0 2px 6px rgba(13,43,82,.08)}
.card.flip .card-cv .cvi,.card.flip:hover .card-cv .cvi{transform:rotateY(180deg) translateY(-6px)}
.cvb{border-radius:10px}
.card-cart{all:unset;box-sizing:border-box;position:absolute;right:12px;bottom:12px;z-index:4;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:#fff;color:var(--dark);cursor:pointer;box-shadow:0 8px 18px -8px rgba(13,43,82,.45);transition:background .25s,color .25s,transform .25s}
.card-cart svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card-cart:hover{background:var(--dark);color:#fff;transform:translateY(-2px)}
.card-cart:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.card:hover .card-cart,.card:focus-within .card-cart{transform:translateY(-6px)}
.card-cart:hover{transform:translateY(-8px)}
/* favourites + back of the book: small round buttons top-right, on hover */
.card-acts{top:12px;right:12px;left:auto;bottom:auto;flex-direction:column;gap:8px}
.card-acts button{width:38px;height:38px;background:rgba(255,255,255,.92);color:var(--dark)}
.card-acts button:first-child{background:rgba(255,255,255,.92);color:var(--dark)}
.card-acts [data-fav][aria-pressed=true]{background:var(--dark);color:#fff}
.card-acts em{bottom:auto;top:50%;left:auto;right:calc(100% + 8px);transform:translate(4px,-50%)}
.card-acts button:hover em,.card-acts button:focus-visible em{transform:translate(0,-50%)}
.card.faved .card-stage::before{display:none}
.card.faved .card-acts{opacity:1;transform:none;pointer-events:auto}
.card.faved .card-acts [data-flip]{opacity:0}
.card.faved:hover .card-acts [data-flip],.card.faved:focus-within .card-acts [data-flip]{opacity:1}
.card-t,html[data-font=bebas] .card-t{margin-top:16px;min-height:0;font:600 clamp(17px,1.35vw,20px)/1.25 var(--fam);letter-spacing:0;text-transform:none;color:var(--ink)}
html[data-font=bebas] .card-t[dir=rtl]{font:700 clamp(20px,1.6vw,24px)/1.1 "Karantina",var(--fam);text-align:left}
.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.tag{display:inline-block;padding:6px 11px;border-radius:999px;background:rgba(13,43,82,.07);color:var(--dark);font:600 12px/1 var(--fam)}
.tag.soft{background:transparent;box-shadow:inset 0 0 0 1px rgba(13,43,82,.15);color:var(--accent-ink)}
.card-price{display:flex;align-items:baseline;gap:8px;margin:12px 0 0;align-self:end}
.card-price b{font:700 18px/1 var(--fam);color:var(--dark)}
.card-price span{font:400 12.5px/1 var(--fam);color:var(--accent-ink)}
.card{grid-template-rows:auto auto auto 1fr}
@media (max-width:1024px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 14px}.card-cart{width:38px;height:38px;right:8px;bottom:8px;border-radius:10px}
  .card-acts{top:8px;right:8px}.card-acts button{width:32px;height:32px}.card-price span{display:none}.tabs button{padding:10px 14px;font-size:13.5px}}
#grid .card .card-t{font:600 clamp(17px,1.35vw,20px)/1.25 var(--fam);letter-spacing:0;text-transform:none}#grid .card .card-t[dir=rtl]{font:700 clamp(21px,1.7vw,25px)/1.05 'Karantina',var(--fam)}.sig-hero-img{width:calc(118*var(--k))}
@media (max-width:700px){.sig-hero-img{width:84px;margin:10px 0 0 -2px}}
@media (min-width:701px){.sig-hero-img{width:calc(92*var(--k));margin-top:calc(6*var(--k))}}

/* SHELF v9: less text, side column as tall as the shelf, no box edge */
.shelf-sec .shelf-wrap{align-items:stretch}
.shelf-side{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:calc(60*var(--u)) 0 calc(34*var(--u))}
.shelf-sec .shelf-cap{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;min-height:0}
.shelf-sec .shelf-hint{margin-top:12px}
.shelf-sec .shelf-ctrl{margin:0}
.shelf-sec .shelf-ctrl .sc-pause{width:40px;height:40px;margin-left:4px;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(13,43,82,.18);color:var(--dark)}
.shelf-sec .shelf-ctrl .sc-pause span{font-size:11px;letter-spacing:-1px}
.shelf-sec .shelf-ctrl .sc-pause:hover{background:var(--dark);color:#fff;box-shadow:none}
.shelf-stage{border-radius:0;box-shadow:none;background:radial-gradient(70% 90% at 50% 100%,#ece6da 0%,rgba(236,230,218,.55) 45%,rgba(246,243,236,0) 80%)}
@media (max-width:900px){.shelf-side{padding:0 var(--gut)}.shelf-sec .shelf-hint{margin-top:8px}}
.shelf-sec{padding-bottom:calc(40*var(--u))}
/* signature: big, bottom right of the hero, under the books, breaking out of the frame a little */
.hero{position:relative}
.sig-hero-img,.sig-hero-img[class]{position:absolute;z-index:6;right:calc(20px + 4%);bottom:-34px;width:clamp(150px,15vw,250px);margin:0;pointer-events:none;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.35))}
@media (max-width:700px){.sig-hero-img,.sig-hero-img[class]{right:22px;bottom:-22px;width:110px}}

/* SHELF v10: a rounded panel exactly as wide as the hero card, text + books inside it */
.shelf-sec{padding:14px 20px 0}
.shelf-sec .shelf-wrap{width:auto;margin:0;gap:calc(36*var(--u));padding:0 calc(40*var(--u)) 0 calc(56*var(--u));border-radius:32px;overflow:hidden;
  grid-template-columns:minmax(200px,260px) minmax(0,1fr);
  background:radial-gradient(70% 120% at 25% 0%,#fbf9f5 0%,#f1ece3 60%,#e9e2d5 100%);
  box-shadow:inset 0 0 0 1px rgba(60,44,28,.05),0 24px 50px -40px rgba(60,44,28,.35)}
.shelf-stage{background:none;padding-top:calc(40*var(--u))}
.shelf-side{padding:calc(70*var(--u)) 0 calc(60*var(--u))}
.shelf-sec .shelf-h{font-size:clamp(30px,2.6vw,42px)}
.shelf-sec .plank{margin:0 -12px calc(34*var(--u))}
.shelf-sec .shelf{height:calc(var(--shelf-h,380px) + 40px)}
.sig-hero-img,.sig-hero-img[class]{z-index:7}
@media (max-width:900px){
  .shelf-sec{padding:10px 8px 0}
  .shelf-sec .shelf-wrap{padding:0;border-radius:18px;grid-template-columns:1fr}
  .shelf-side{padding:28px var(--gut) 0}
  .shelf-stage{padding-top:10px}
  .shelf-sec .plank{margin:0 0 18px}
}

/* SHELF v11: no frame. The area reads through light (a soft lamp glow on the wall, a long shadow under the ledge),
   placement (text column top-aligned to the books, arrows on the ledge line) and type, all on the site's beige */
.shelf-sec{padding:calc(90*var(--u)) 0 calc(70*var(--u));background:var(--light)}
.shelf-sec .shelf-wrap{width:var(--wrap);margin:0 auto;padding:0;border-radius:0;overflow:visible;background:none;box-shadow:none;
  grid-template-columns:minmax(200px,270px) minmax(0,1fr);gap:calc(48*var(--u));align-items:stretch}
.shelf-stage{position:relative;padding-top:calc(30*var(--u));background:none;isolation:isolate}
.shelf-stage::before{content:"";position:absolute;z-index:-1;left:-6%;right:-6%;top:-12%;bottom:8%;pointer-events:none;
  background:radial-gradient(55% 60% at 50% 55%,rgba(255,255,255,.85),rgba(255,255,255,.35) 45%,rgba(246,243,236,0) 75%)}
.shelf-stage::after{content:"";position:absolute;z-index:-1;left:4%;right:4%;bottom:-22px;height:60px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 0%,rgba(60,44,28,.16),rgba(60,44,28,0) 100%);filter:blur(4px)}
.shelf-sec .plank{margin:0 -20px}
.shelf-side{padding:calc(30*var(--u)) 0 0;justify-content:space-between}
.shelf-side .shelf-ctrl{margin-bottom:-24px}
.shelf-sec .shelf-h{font-size:clamp(32px,2.8vw,46px)}
@media (max-width:900px){
  .shelf-sec{padding:50px 0 40px}
  .shelf-sec .shelf-wrap{width:auto;gap:22px}
  .shelf-side{padding:0 var(--gut)}
  .shelf-side .shelf-ctrl{margin:6px 0 0}
  .shelf-sec .plank{margin:0}
}
#books{background:var(--light)}
@media (max-width:900px){.shelf-sec .shelf-wrap{grid-template-columns:1fr}.shelf-side{justify-content:flex-start}}

/* SHELF v12: one ledge runs under the whole section; the title, hint and arrows stand on it like the books */
.shelf-sec .shelf-wrap{grid-template-rows:1fr auto;row-gap:0;align-items:end}
.shelf-sec .shelf-wrap>.plank{grid-column:1/-1;margin:0 -24px;position:relative;z-index:2}
.shelf-side{align-self:stretch;padding:calc(30*var(--u)) 0 calc(18*var(--u))}
.shelf-side .shelf-ctrl{margin:0}
.shelf-stage::after{display:none}
.shelf-sec .shelf-wrap>.plank::after{content:"";position:absolute;left:3%;right:3%;top:100%;height:50px;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0%,rgba(60,44,28,.16),rgba(60,44,28,0));filter:blur(4px)}
@media (max-width:900px){.shelf-sec .shelf-wrap>.plank{margin:0}.shelf-side{padding:0 var(--gut) 8px}}
#grid .card .card-t[dir=rtl]{font:600 clamp(17px,1.35vw,20px)/1.25 'Assistant',var(--fam);letter-spacing:0}
#grid .card.wide .card-cv{display:flex;align-items:flex-end;aspect-ratio:.72}#grid .card.wide .card-cv .cvi{aspect-ratio:1.55;background:none;width:100%}#grid .card.wide .card-cv .cvi img{object-fit:cover;padding:0}

/* CATALOG v5 (Keren's reference): six to a row, smaller covers, heart always on the cover, price + Купить */
#grid.grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:calc(44*var(--u)) calc(22*var(--u))}
#grid .card-cv .cvi,#grid .card.wide .card-cv{aspect-ratio:.8;border-radius:8px}
#grid .card-cv .cvi img,#grid .card-cv .cvi .cv,#grid .cvb,#grid .card-cv .cvi::after{border-radius:8px}
#grid .card.wide .card-cv .cvi{aspect-ratio:1.55}
#grid .card-cv .cvi{box-shadow:0 12px 22px -14px rgba(13,43,82,.45),0 1px 3px rgba(13,43,82,.08)}
#grid .card:hover .card-cv .cvi{transform:translateY(-4px)}
/* heart top-right always, back-of-book under it on hover */
#grid .card-acts{opacity:1;transform:none;pointer-events:auto;top:8px;right:8px;gap:6px}
#grid .card-acts button{width:34px;height:34px;background:#fff;box-shadow:0 4px 10px -4px rgba(13,43,82,.35)}
#grid .card-acts svg{width:16px;height:16px}
#grid .card-acts [data-flip]{opacity:0;transition:opacity .25s}
#grid .card:hover .card-acts [data-flip],#grid .card:focus-within .card-acts [data-flip],#grid .card.flip .card-acts [data-flip]{opacity:1}
#grid .card .card-t{margin-top:12px;font-size:clamp(15px,1.1vw,16.5px);line-height:1.25}
#grid .card .card-t[dir=rtl]{font-size:clamp(15px,1.1vw,16.5px)}
#grid .card-tags{margin:4px 0 0;gap:0}
#grid .card-tags .tag{padding:0;background:none;box-shadow:none;border-radius:0;font:400 12.5px/1.3 var(--fam);color:var(--accent-ink)}
#grid .card-tags .tag+.tag::before{content:"·";margin:0 5px}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;align-self:end}
.card-pr{font:700 15.5px/1 var(--fam);color:var(--dark);white-space:nowrap}
.card-buy-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;cursor:pointer;
  background:var(--dark);color:#fff;font:600 13px/1 var(--fam);transition:background .25s}
.card-buy-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card-buy-btn:hover{background:var(--blue)}
.card-buy-btn:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
/* tabs as one segmented control */
.tabs{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:rgba(13,43,82,.07)}
.tabs button{box-shadow:none;background:transparent;padding:10px 18px}
.tabs button:hover{background:rgba(255,255,255,.7);box-shadow:none}
@media (max-width:1200px){#grid.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:820px){#grid.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){#grid.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}
  .tabs{display:flex;flex-wrap:wrap;background:none;padding:0;gap:6px}.tabs button{background:#fff}
  .card-buy-btn{height:34px;padding:0 11px;font-size:12.5px}.card-pr{font-size:14px}}
#grid .card-acts [data-fav][aria-pressed=true]{background:var(--dark);color:#fff}#grid .card.wide .card-acts{top:auto;bottom:calc(64.5% - 34px)}
#grid .card.wide .card-acts{top:calc(48.4% + 8px);bottom:auto}
@media (min-width:901px){.shelf-side{padding-top:calc(30*var(--u) + 40px - .16em)}.shelf-sec .shelf-h{margin-top:0}}
/* catalog head: title and tabs on one line */
#books .sec-head{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:calc(40*var(--u))}
#books .sec-head h2{margin:0;font-size:clamp(34px,3.2vw,50px)}
#books .sec-head .tabs{margin:0}
@media (max-width:700px){#books .sec-head{align-items:flex-start}}
.card-pr{display:grid;gap:3px}.card-pr b{font:700 15.5px/1 var(--fam);color:var(--dark)}.card-pr small{font:500 11.5px/1 var(--fam);color:var(--accent-ink)}
@media (min-width:701px){
  .qb.sheet{left:50%;right:auto;top:50%;bottom:auto;width:min(440px,92vw);padding:34px 26px 24px;transform:translate(-50%,-46%) scale(.98)}
  .qb.sheet.on{transform:translate(-50%,-50%)}
  .qb.sheet h4{font-size:30px}
  .qb.sheet .qb-f{padding:18px 12px 16px}
  .qb.sheet .qb-f b{font-size:24px}
}
.qb-f>span{text-align:center}

/* ============ LENS BANNER (Keren's reference): books | title + text + button | a magnifier over Hebrew ============ */
.lens-banner-sec{padding:calc(70*var(--u)) 20px calc(20*var(--u))}
.lens-banner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:calc(30*var(--u));
  min-height:clamp(260px,24vw,340px);padding:0 calc(40*var(--u));border-radius:32px;overflow:hidden;isolation:isolate;
  background:radial-gradient(80% 120% at 50% 0%,#d9eef9 0%,#b9def2 55%,#9fd0ea 100%)}
.lens-banner::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 70% at 50% 50%,rgba(255,255,255,.45),transparent 70%)}
/* left: three real covers, fanned and resting on the bottom edge */
.lb-books{position:relative;align-self:stretch}
.lb-books img{position:absolute;bottom:-6%;width:clamp(110px,10.5vw,160px);aspect-ratio:.7;object-fit:cover;border-radius:4px;
  box-shadow:14px 18px 26px -14px rgba(13,43,82,.55),0 1px 3px rgba(13,43,82,.2)}
.lb-books .lb1{left:6%;transform:rotate(-12deg);transform-origin:bottom center}
.lb-books .lb2{left:30%;transform:rotate(6deg);transform-origin:bottom center;bottom:-9%}
.lb-books .lb3{left:17%;bottom:-2%;transform:rotate(-3deg);z-index:2;width:clamp(124px,12vw,182px)}
/* middle: the words */
.lb-txt{display:grid;gap:14px;justify-items:start;padding:calc(30*var(--u)) 0}
.lb-txt h2,html[data-font=bebas] .lb-txt h2{margin:0;font-size:clamp(32px,3vw,48px);line-height:1.05;color:var(--dark)}
.lb-txt p{margin:0;font:400 var(--t4)/1.55 var(--fam);color:#1d3d63;max-width:38ch}
.lb-txt .btn{margin-top:8px}
/* right: a magnifier enlarging a Hebrew phrase */
.lb-mag{position:relative;align-self:stretch}
.lb-words{position:absolute;inset:14% 0 auto auto;display:grid;gap:6px;justify-items:end;font:700 clamp(18px,1.6vw,24px)/1.2 "Assistant",var(--fam);color:rgba(13,43,82,.35)}
.lb-lens{position:absolute;right:12%;top:50%;transform:translateY(-58%);width:clamp(150px,14vw,210px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(70% 70% at 35% 30%,rgba(255,255,255,.98),rgba(240,248,253,.92) 60%,rgba(214,236,248,.9));
  box-shadow:inset 0 0 0 clamp(7px,.7vw,10px) var(--dark),inset 0 0 22px rgba(13,43,82,.25),0 22px 40px -16px rgba(13,43,82,.5)}
.lb-lens span{font:800 clamp(30px,2.9vw,44px)/1 "Assistant",var(--fam);color:var(--dark);letter-spacing:-.01em}
.lb-handle{position:absolute;right:calc(12% - clamp(34px,3.2vw,48px));top:calc(50% + clamp(40px,3.8vw,56px));width:clamp(16px,1.4vw,20px);height:clamp(80px,7.5vw,110px);
  border-radius:12px;background:linear-gradient(90deg,#0a2242,#1b4c80 45%,#0a2242);transform:rotate(-45deg);transform-origin:top center;
  box-shadow:6px 10px 18px -8px rgba(13,43,82,.5)}
/* the interactive board opens under the banner */
#lens{display:grid;grid-template-rows:1fr;transition:grid-template-rows .6s var(--ease),padding .6s var(--ease)}
#lens>.wrap{overflow:hidden;min-height:0}
#lens.lens-closed{grid-template-rows:0fr;padding-top:0;padding-bottom:0}
@media (max-width:900px){
  .lens-banner-sec{padding:40px 8px 10px}
  .lens-banner{grid-template-columns:1fr;padding:28px 22px 0;border-radius:22px;gap:10px}
  .lb-txt{order:1;padding:0}
  .lb-books{order:3;height:150px;margin:0 -22px}
  .lb-books img{width:96px}.lb-books .lb3{width:108px}
  .lb-books .lb1{left:12%}.lb-books .lb3{left:32%}.lb-books .lb2{left:52%}
  .lb-mag{order:2;height:170px}
  .lb-lens{right:auto;left:50%;transform:translate(-60%,-50%);width:140px}
  .lb-handle{right:auto;left:calc(50% + 34px);top:calc(50% + 30px);height:70px}
  .lb-words{inset:10px 0 auto auto;font-size:16px}
}
.lb-words{inset:auto 4% auto 0;top:50%;transform:translateY(-50%);gap:10px;justify-items:center;text-align:center;font-size:clamp(17px,1.45vw,22px);color:rgba(13,43,82,.28);white-space:nowrap}
.lb-lens{right:auto;left:50%;transform:translate(-50%,-50%)}
.lb-handle{right:auto;left:calc(50% + clamp(52px,5vw,74px));top:calc(50% + clamp(52px,5vw,74px))}
@media (max-width:900px){.lb-lens{transform:translate(-50%,-50%)}.lb-handle{left:calc(50% + 46px);top:calc(50% + 46px)}.lb-words{font-size:15px}}

/* the magnifier now reads a newspaper clipping: Yuri's column, one real line of his under the glass */
.lb-words{display:none}
.lb-paper{position:absolute;left:4%;right:2%;top:12%;bottom:-8%;transform:rotate(-4deg);padding:18px 18px 0;border-radius:2px;
  background:linear-gradient(180deg,#fbf8f1,#f1ece0);box-shadow:0 18px 30px -18px rgba(13,43,82,.45),0 1px 2px rgba(13,43,82,.12)}
.lb-paper::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .25 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.lb-col-t{margin:0 0 10px;padding-bottom:8px;border-bottom:1.5px solid rgba(13,43,82,.7);font:800 clamp(14px,1.2vw,18px)/1 "Oswald",var(--fam);letter-spacing:.04em;text-transform:uppercase;color:var(--dark)}
.lb-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;height:calc(100% - 40px)}
/* columns of small print, drawn as grey lines (no invented words) */
.lb-cols i{position:relative;display:block;background:repeating-linear-gradient(180deg,rgba(13,43,82,.32) 0 3px,transparent 3px 8px);
  -webkit-mask-image:linear-gradient(90deg,#000 0 92%,transparent);mask-image:linear-gradient(90deg,#000 0 92%,transparent)}
.lb-cols i.hl span{position:absolute;left:-2px;right:-6px;top:38%;padding:1px 2px;background:#f6f2e8;font:600 8.5px/1.25 var(--fam);color:var(--dark)}
.lb-lens{left:50%;top:52%;transform:translate(-50%,-50%) rotate(-4deg);width:clamp(160px,15vw,220px);
  background:radial-gradient(70% 70% at 35% 30%,rgba(255,255,255,.95),rgba(251,248,241,.94) 60%,rgba(236,230,214,.94))}
.lb-lens span{max-width:78%;text-align:center;font:700 clamp(17px,1.55vw,23px)/1.15 "Assistant",var(--fam);letter-spacing:0;color:var(--dark)}
.lb-handle{left:calc(50% + clamp(56px,5.3vw,78px));top:calc(52% + clamp(56px,5.3vw,78px));transform:rotate(-49deg)}
@media (max-width:900px){.lb-paper{left:10%;right:10%;top:6%;bottom:-10%;padding:12px 12px 0}.lb-lens{width:150px}.lb-lens span{font-size:16px}
  .lb-handle{left:calc(50% + 50px);top:calc(52% + 50px)}}

/* realistic loupe: chrome rim, lacquered handle, glass glare and a lifted shadow; the glass shows the line magnified */
.lb-lens,.lb-handle{display:none}
.loupe-r{position:absolute;left:50%;top:50%;width:clamp(210px,19vw,290px);aspect-ratio:1;transform:translate(-44%,-46%) rotate(-6deg);z-index:3}
.loupe-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.loupe-glass{position:absolute;left:6.67%;top:6.67%;width:60%;height:60%;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(180deg,#fbf8f1,#f2ede1);box-shadow:inset 0 0 18px 6px rgba(13,43,82,.16),inset 0 0 2px 1px rgba(255,255,255,.6)}
.loupe-glass::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,transparent 72%,rgba(13,43,82,.12) 92%,rgba(13,43,82,.22))}
.loupe-glass p{margin:0;width:82%;text-align:center;font:600 clamp(12.5px,1.12vw,16px)/1.22 var(--fam);color:#1b2b40;transform:scale(1.04);
  text-shadow:.4px 0 0 rgba(200,40,40,.25),-.4px 0 0 rgba(30,90,200,.25)}
.loupe-glass b{font-weight:800;color:var(--dark)}
/* the shadow the loupe casts on the paper: the rim ring and the handle, offset down-right */
.loupe-shadow{position:absolute;left:14%;top:16%;width:60%;height:60%;border-radius:50%;border:14px solid rgba(25,30,40,.22);filter:blur(7px)}
.loupe-shadow::after{content:"";position:absolute;left:84%;top:84%;width:22%;height:10%;border-radius:20px;background:rgba(25,30,40,.22);transform:rotate(45deg);transform-origin:left center;width:70%}
.lb-cols i.hl span{font-size:7.5px;line-height:1.25;top:40%}
.lb-col-t{font-size:clamp(11px,.95vw,14px);letter-spacing:.02em}
@media (max-width:900px){.loupe-r{width:220px;transform:translate(-46%,-48%) rotate(-6deg)}.loupe-glass p{font-size:13px}}

/* ABOUT v2: compact, photo left, route Ташкент → Москва → Израиль, the rest opens on demand */
#about{padding:calc(90*var(--u)) 0}
#about .about-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:calc(70*var(--u));align-items:center}
#about .about-ph{max-width:440px;justify-self:center;margin:0}
#about .about-txt{position:static;display:grid;gap:18px;justify-items:start}
#about .about-txt h2{margin:0}
#about .about-txt>p{margin:0;font:400 var(--t4)/1.6 var(--fam);color:#1d3d63;max-width:46ch}
.route{list-style:none;margin:4px 0;padding:0;display:flex;align-items:flex-start;gap:0}
.route li{position:relative;display:grid;gap:3px;padding-right:46px}
.route li:not(:last-child)::after{content:"";position:absolute;right:10px;top:.62em;width:26px;height:1.5px;background:var(--blue)}
.route li:not(:last-child)::before{content:"";position:absolute;right:8px;top:calc(.62em - 3.5px);width:8px;height:8px;border-top:1.5px solid var(--blue);border-right:1.5px solid var(--blue);transform:rotate(45deg)}
.route b{font:600 clamp(20px,1.7vw,26px)/1 "Oswald",var(--fam);letter-spacing:.01em;text-transform:uppercase;color:var(--dark)}
.route span{font:500 12.5px/1.2 var(--fam);color:var(--accent-ink)}
.about-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease);width:100%}
.about-more>div{overflow:hidden;min-height:0}
.about-more.open{grid-template-rows:1fr}
.about-more p{margin:0 0 18px;font:400 var(--t4)/1.6 var(--fam);color:#1d3d63;max-width:52ch}
#about .facts{margin:0 0 6px}
.about-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.about-toggle span[aria-hidden]{transition:transform .35s var(--ease)}
.about-toggle[aria-expanded=true] span[aria-hidden]{transform:rotate(180deg)}
.about-toggle:hover span[aria-hidden]{transform:none}
.about-toggle[aria-expanded=true]:hover span[aria-hidden]{transform:rotate(180deg)}
@media (max-width:900px){#about .about-grid{grid-template-columns:1fr;gap:28px}#about .about-ph{max-width:300px}.route li{padding-right:38px}}

/* the loupe is now a real photo; the glass is cut out so the magnified line shows through it */
.loupe-r{--W:clamp(230px,21vw,320px);width:var(--W);transform:translate(-38%,-34%) rotate(0deg)}
.loupe-photo{position:absolute;inset:0;width:100%;height:100%;z-index:2;
  -webkit-mask-image:radial-gradient(circle at 37.8% 31.9%,transparent calc(var(--W)*.236),#000 calc(var(--W)*.24));
  mask-image:radial-gradient(circle at 37.8% 31.9%,transparent calc(var(--W)*.236),#000 calc(var(--W)*.24));
  filter:drop-shadow(10px 14px 10px rgba(20,25,35,.28))}
.loupe-glass{left:calc(37.8% - 24.2%);top:calc(31.9% - 24.2%);width:48.4%;height:48.4%;z-index:1;
  box-shadow:inset 0 0 16px 4px rgba(13,43,82,.14)}
.loupe-glass::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:2;pointer-events:none;
  background:radial-gradient(60% 45% at 30% 22%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}
.loupe-shadow{display:none}
@media (max-width:900px){.loupe-r{--W:240px;transform:translate(-40%,-36%)}}
.loupe-r{--W:clamp(250px,23vw,350px)}.loupe-glass p{width:72%;font-size:clamp(12px,1.05vw,15px)}@media (max-width:900px){.loupe-r{--W:250px}.loupe-glass p{font-size:12.5px}}

/* ABOUT v3: short headline, real story, a quote of his, facts as cards on demand */
#about .about-txt h2,html[data-font=bebas] #about .about-txt h2{font-size:clamp(36px,3.4vw,54px)}
#about .about-txt>p{max-width:56ch}
.about-q{margin:4px 0 0;padding:14px 0 14px 20px;border-left:3px solid var(--sky)}
.about-q p{margin:0;font:500 clamp(16px,1.3vw,19px)/1.5 var(--fam);color:var(--dark)}
.about-q cite{display:block;margin-top:6px;font:500 12.5px/1 var(--fam);font-style:normal;color:var(--accent-ink)}
.about-facts{list-style:none;margin:6px 0 4px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.about-facts li{display:grid;gap:6px;padding:16px 18px;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(13,43,82,.06),0 10px 24px -18px rgba(13,43,82,.35)}
.about-facts b{font:600 13px/1 var(--fam);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.about-facts span{font:400 14.5px/1.5 var(--fam);color:#1d3d63}
@media (max-width:700px){.about-facts{grid-template-columns:1fr}}

/* BOOK DIALOG v2: everything fits in one screen, no scrolling */
.bookdlg{max-height:min(640px,calc(100svh - 48px));overflow:hidden}
.bookdlg .bd-grid{height:100%;max-height:inherit;align-items:stretch}
.bookdlg .bd-info{overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:10px;padding-block:clamp(24px,3vw,40px)}
.bookdlg .bd-info .kicker{margin:0}
.bookdlg .bd-info h2,html[data-font=bebas] .bookdlg .bd-info h2{margin:0;font-size:clamp(26px,2.3vw,36px);line-height:1.05}
html[data-font=bebas] .bookdlg .bd-info h2[dir=rtl]{font:700 clamp(28px,2.5vw,40px)/1 "Karantina",var(--fam)}
.bookdlg .bd-sub{margin:0;font:400 15px/1.4 var(--fam);color:var(--accent-ink)}
.bookdlg .bd-text{margin:2px 0 0}
.bookdlg .bd-text p{margin:0 0 8px;font:400 14.5px/1.55 var(--fam);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.bookdlg .bd-text p+p{-webkit-line-clamp:2}
.bookdlg .fmt-pick{margin:6px 0 0;gap:8px}
.bookdlg .fmt-pick label span{padding:10px 14px}
.bookdlg .bd-buy{margin-top:4px;gap:8px}
.bookdlg .bd-buy .btn{min-height:46px}
.bookdlg .bd-wa{margin-top:2px;font-size:13px}
.bookdlg .bd-cover{min-height:0}
@media (max-width:700px){
  .bookdlg{max-height:calc(100svh - 16px)}
  .bookdlg .bd-cover{max-height:30svh}
  .bookdlg .bd-info{padding:18px 18px 20px;gap:8px;justify-content:flex-start}
  .bookdlg .bd-text p{-webkit-line-clamp:3}.bookdlg .bd-text p+p{display:none}
}
@media (max-width:700px){.bookdlg .bd-cover{height:30svh;max-height:none;display:grid;place-items:center;overflow:hidden;padding:12px 0}.bookdlg .bd-cover .bd-3d{transform:scale(.68);transform-origin:center}}
/* one warm cream background everywhere */
body,#about,.sec.about,.lens-banner-sec,.shelf-sec,#books,.sec.order,.hero{background:var(--light)}

/* ============ HERO · MOBILE (Keren's Figma frame «Hero / Mobile 375», stage 359×776) ============ */
@media (max-width:700px){
  .stage{aspect-ratio:auto}
  .stage-in{--m:calc((100vw - 16px) / 359);position:relative;display:block;inset:auto;padding:0;min-height:0;height:calc(776 * var(--m));container-type:normal}
  .stage-in>*{order:initial}
  html[data-font=bebas] .hero-h1,.hero-h1{position:absolute;left:calc(20 * var(--m));top:calc(24 * var(--m));width:calc(311 * var(--m));margin:0;
    font-size:calc(40 * var(--m));line-height:1.06;z-index:4}
  .hero-h1 br:nth-of-type(2){display:none}
  .hero-h1 br:first-of-type{display:none}
  .hero-side{position:absolute;left:calc(20 * var(--m));top:calc(134 * var(--m));width:calc(300 * var(--m));margin:0;display:block;z-index:4}
  html[data-font=bebas] .hero-name,.hero-name{margin:0;font-size:calc(22 * var(--m));line-height:1.1}
  .hero .lead{margin:calc(8 * var(--m)) 0 0;font-size:calc(15 * var(--m));line-height:1.5}
  .hero-cta{position:absolute;left:calc(20 * var(--m));top:calc(230 * var(--m));width:calc(230 * var(--m));min-height:0;height:calc(54 * var(--m));margin:0;
    padding:0 calc(6 * var(--m)) 0 calc(22 * var(--m));font-size:calc(15 * var(--m));justify-content:space-between;align-self:auto;z-index:4}
  .hero-cta span[aria-hidden]{width:calc(42 * var(--m));height:calc(42 * var(--m))}
  .hero-yuri{position:absolute;left:calc(2 * var(--m));top:calc(305 * var(--m));width:calc(441 * var(--m));max-width:none;margin:0;z-index:3}
  .sig-hero-img,.sig-hero-img[class]{display:none}
  /* books: a tilted cascade down the right edge */
  .wave{position:absolute;inset:0;left:0;right:0;aspect-ratio:auto;container-type:normal;z-index:2}
  .wave .w{position:absolute;width:calc(102 * var(--m));height:calc(144 * var(--m));object-fit:cover;left:calc(250 * var(--m));
    transform:rotate(-14deg);transform-origin:top left;border-radius:2px;box-shadow:8px 10px 18px -8px rgba(5,24,48,.45)}
  .wave .w4,.wave .w5,.wave .w6{display:none}
  .wave .w8{top:calc(316 * var(--m))}
  .wave .w2{top:calc(392 * var(--m))}
  .wave .w7{top:calc(467 * var(--m))}
  .wave .w3{top:calc(542 * var(--m))}
  .wave .w1{top:calc(618 * var(--m))}
  .wave .w9{top:calc(693 * var(--m))}
}
@media (max-width:700px){html[data-font=bebas] .hero-side,.hero-side{margin-top:0}}
/* mobile hero books: real depth (soft cast shadow, contact shadow, slight 3D turn) */
@media (max-width:700px){
  .wave .w{box-shadow:none;border-radius:1px 3px 3px 1px;
    transform:rotate(-14deg) perspective(700px) rotateY(-16deg);
    filter:drop-shadow(1px 1px 0 rgba(255,255,255,.35)) drop-shadow(-3px 6px 5px rgba(5,24,48,.35)) drop-shadow(-12px 18px 18px rgba(5,24,48,.35))}
}
@media (max-width:700px){
  .wave .w{transform:rotate(-14deg)}
  .wave .w8{z-index:1}.wave .w2{z-index:2}.wave .w7{z-index:3}.wave .w3{z-index:4}.wave .w1{z-index:5}.wave .w9{z-index:6}
}

/* ABOUT v4 (Keren's reference tone): name, warm summary, the outlets he worked with, a real quote with his signature */
#about .about-txt h2,html[data-font=bebas] #about .about-txt h2{font-size:clamp(34px,3vw,46px)}
.about-name{margin:-6px 0 0;font:700 clamp(19px,1.5vw,22px)/1.2 var(--fam);color:var(--dark)}
.press{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.press li{font:700 clamp(14px,1.1vw,16px)/1 "Oswald",var(--fam);letter-spacing:.04em;text-transform:uppercase;color:var(--dark);opacity:.72}
.press li:not(:last-child)::after{content:"·";margin-left:22px;opacity:.5}
.about-qcard{position:relative;margin:6px 0 0;padding:22px 24px 16px 54px;border-radius:16px;background:#ece6da;max-width:520px}
.about-qcard::before{content:"“";position:absolute;left:18px;top:6px;font:700 54px/1 Georgia,serif;color:var(--blue);opacity:.55}
.about-qcard blockquote{margin:0}
.about-qcard p{margin:0;font:500 clamp(16px,1.25vw,18px)/1.5 var(--fam);color:var(--dark)}
.about-qcard figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.about-qcard figcaption img{width:58px;height:auto}
.about-qcard figcaption span{font:500 12.5px/1 var(--fam);color:var(--accent-ink)}
.about-q{display:none}
.route{display:none}
#about .kicker{display:none}
#about .about-txt>p.about-name{margin:-6px 0 0;font:700 clamp(19px,1.5vw,22px)/1.2 var(--fam);color:var(--dark)}
/* press logos: one grey row, colour on hover */
.press{gap:14px 30px;margin-top:8px}
.press li{opacity:1;display:flex;align-items:center}
.press li::after{content:none !important}
.press img{display:block;width:auto;filter:grayscale(1) contrast(1.1);opacity:.62;transition:filter .3s,opacity .3s}
.press li:hover img{filter:none;opacity:1}
.press .wm{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:-.01em;text-transform:none;color:#3d4450;opacity:.7;line-height:1}
.press .wm-nn{font-size:19px;font-style:italic}
.press .wm-7i{font-size:18px;font-variant:small-caps;letter-spacing:.02em}

/* ============ LOWER SECTIONS in the language of the top: cream page, hero-width rounded panels, white cards, pill buttons ============ */
/* detectives: a navy panel as wide as the hero, the crime tape crossing it */
#detective{margin:calc(30*var(--u)) 20px 0;border-radius:32px;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 120% at 80% 10%,#1b4577 0%,#0d2b52 55%,#0a2140 100%);color:#fff;padding-bottom:calc(70*var(--u))}
#detective h2,#detective p,#detective .kicker,#detective cite,#detective blockquote p{color:#fff}
#detective h2 em{color:var(--sky)}
#detective .kicker{color:var(--sky)}
#detective blockquote{border-color:var(--sky)}
#detective blockquote cite{color:rgba(255,255,255,.7)}
#detective .tape{background:var(--sky);color:var(--dark)}
#detective .btn.solid{background:var(--sky);border-color:var(--sky);color:var(--dark)}
#detective .btn.solid span[aria-hidden]{background:var(--dark);color:#fff}
#detective .btn.solid:hover{background:#fff;border-color:#fff}
#detective .btn.ghost{border-color:rgba(255,255,255,.45);color:#fff}
#detective .btn.ghost span[aria-hidden]{background:#fff;color:var(--dark)}
/* letters: white cards on cream, like the catalog and the about facts */
#letters{background:var(--light);color:var(--dark);padding:calc(90*var(--u)) 0}
#letters .sec-head h2{font-size:var(--h2)}
#letters h2 em{color:var(--blue)}
#letters .let-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
#letters .letter{position:relative;margin:0;padding:30px 30px 24px 64px;border-radius:18px;background:#fff;border:0;
  box-shadow:0 1px 2px rgba(13,43,82,.06),0 16px 34px -24px rgba(13,43,82,.35)}
#letters .letter::before{content:"“";position:absolute;left:22px;top:14px;font:700 56px/1 Georgia,serif;color:var(--sky)}
#letters .letter blockquote{margin:0;font:400 clamp(16px,1.2vw,18px)/1.6 var(--fam);color:var(--dark)}
#letters .letter figcaption{margin-top:14px;font:600 13px/1 var(--fam);letter-spacing:.04em;color:var(--blue)}
#letters .letter:nth-child(n){margin-top:0}
/* how to get a book: three white cards */
.sec.order{padding:calc(40*var(--u)) 0 calc(90*var(--u))}
.sec.order .ord-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;border:0}
.sec.order .fmt{padding:28px 26px;border-radius:18px;background:#fff;border:0 !important;
  box-shadow:0 1px 2px rgba(13,43,82,.06),0 16px 34px -24px rgba(13,43,82,.35)}
.sec.order .fmt:first-child{background:linear-gradient(160deg,#dff0fa,#bfe1f3)}
.sec.order .fmt h3{margin:0 0 10px;font-size:clamp(20px,1.6vw,24px)}
.sec.order .fmt .price{margin:0 0 12px;font:700 clamp(26px,2.2vw,34px)/1 var(--fam);color:var(--dark)}
.sec.order .fmt .price small{font:500 13px/1 var(--fam);color:var(--accent-ink)}
.sec.order .fmt p{font:400 15px/1.55 var(--fam);color:#1d3d63}
/* contact: a navy panel as wide as the hero, soft rounded fields */
#contact{margin:0 20px;border-radius:32px;overflow:hidden;background:radial-gradient(90% 120% at 15% 0%,#1b4577 0%,#0d2b52 55%,#0a2140 100%)}
#contact .form input,#contact .form textarea{border:0;border-radius:12px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);padding:12px 14px;color:#fff}
#contact .form input:focus,#contact .form textarea:focus{box-shadow:inset 0 0 0 1.5px var(--sky);outline:0}
#contact .form label>span{color:rgba(255,255,255,.75)}
.ftr{background:var(--light);margin-top:calc(30*var(--u))}
@media (max-width:900px){
  #detective,#contact{margin-left:8px;margin-right:8px;border-radius:22px}
  #letters .let-grid,.sec.order .ord-grid{grid-template-columns:1fr}
  #letters .letter{padding:26px 22px 20px 54px}
}

/* ============ ONE TYPE SCALE for the whole page ============
   H2 section titles one size · body 16–18px · quotes 20–26px · no small labels above titles */
:root{--fs-h2:clamp(34px,3vw,48px);--fs-body:clamp(16px,1.15vw,18px);--fs-quote:clamp(19px,1.55vw,25px)}
html[data-font=bebas] main h2,html[data-font=bebas] main .sec-head h2,html[data-font=bebas] #letters .sec-head h2,
html[data-font=bebas] .lb-txt h2,html[data-font=bebas] #about .about-txt h2,html[data-font=bebas] #books .sec-head h2,
html[data-font=bebas] .shelf-sec .shelf-h{font-size:var(--fs-h2);line-height:1.06}
main .kicker,#lens .kicker,#detective .kicker{display:none}
.shelf-sec .shelf-hint,.lb-txt p,#about .about-txt>p:not(.about-name),#lens .lensx-head p,#detective .det-txt>p,#contact .con-grid p.r,.sec.order .fmt p,
#about .about-more p{font:400 var(--fs-body)/1.6 var(--fam)}
#detective blockquote p,#lens .story-t,#letters .letter blockquote{font:400 var(--fs-quote)/1.5 var(--fam);letter-spacing:0}
#letters .letter blockquote{font-size:clamp(17px,1.3vw,20px)}
#lens .story-src{font:600 12.5px/1.2 var(--fam);letter-spacing:.12em;text-transform:uppercase}
#detective blockquote cite{font:500 13px/1.3 var(--fam);font-style:normal}
html[data-font=bebas] .sec.order .fmt h3{font-size:clamp(20px,1.5vw,24px)}
.sec.order .fmt .price{font-size:clamp(26px,2vw,32px)}
#contact .con-links .tel{font:600 var(--fs-body)/1 var(--fam)}

/* ============ CONTACT v2: moving title + draggable stickers (Keren's reference, in the site's palette) ============ */
.contact2{padding:calc(40*var(--u)) 20px 0;background:var(--light)}
.c2-panel{position:relative;border-radius:32px;overflow:hidden;color:var(--light);padding:calc(26*var(--u)) 0 calc(18*var(--u));
  background:radial-gradient(90% 120% at 20% 0%,#1b4577 0%,#0d2b52 55%,#0a2140 100%)}
.c2-marquee{overflow:hidden;white-space:nowrap;border-bottom:1px solid rgba(246,243,236,.25);padding-bottom:calc(10*var(--u))}
.c2-track{display:inline-flex;animation:c2scroll 38s linear infinite}
.c2-track span{font:500 clamp(70px,11vw,170px)/1 "Bebas Neue","Oswald",var(--fam);text-transform:uppercase;letter-spacing:.01em;padding-right:.25em;color:var(--light)}
@keyframes c2scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.c2-track{animation:none}}
.c2-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:14px calc(36*var(--u)) 0}
.c2-meta p{margin:0;font:600 11.5px/1.45 var(--fam);letter-spacing:.12em;text-transform:uppercase;color:rgba(246,243,236,.75)}
.c2-meta p:nth-child(2){text-align:center}.c2-meta p:nth-child(3){text-align:right}
.c2-field{position:relative;height:clamp(300px,30vw,420px);margin:6px calc(20*var(--u)) 0;touch-action:none}
.stk{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--r));user-select:none;-webkit-user-select:none;cursor:grab;touch-action:none;
  transition:box-shadow .2s,transform .25s cubic-bezier(.2,.8,.2,1);z-index:1}
.stk.drag{cursor:grabbing;transition:box-shadow .2s;box-shadow:0 26px 40px -16px rgba(0,0,0,.55);z-index:5}
.stk img{pointer-events:none;-webkit-user-drag:none}
.stk.pill{display:inline-flex;align-items:center;padding:14px 30px;border-radius:999px;background:var(--light);color:var(--dark);
  font:500 clamp(22px,2.2vw,34px)/1 "Bebas Neue","Oswald",var(--fam);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;
  box-shadow:inset 0 0 0 2px var(--dark),inset 0 0 0 4px var(--light),inset 0 0 0 5.5px rgba(13,43,82,.5),0 10px 22px -12px rgba(0,0,0,.5)}
.stk.pill:hover{background:#fff}
.stk.badge{display:grid;place-items:center;width:clamp(120px,10.5vw,150px);aspect-ratio:1;border-radius:50%;background:var(--light);color:var(--dark);
  box-shadow:0 0 0 6px var(--light),0 0 0 7.5px rgba(246,243,236,.5),0 12px 26px -12px rgba(0,0,0,.55)}
.stk.badge::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px dashed rgba(13,43,82,.25);pointer-events:none}
.stk.badge svg{position:absolute;inset:0;width:100%;height:100%;animation:c2spin 18s linear infinite}
.stk.badge text{font:700 10.5px/1 var(--fam);letter-spacing:.18em;text-transform:uppercase;fill:var(--dark)}
@keyframes c2spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.stk.badge svg{animation:none}}
.b-loupe img{width:52%;height:auto}
.b-book img{width:40%;height:auto;border-radius:3px;box-shadow:0 6px 12px -6px rgba(0,0,0,.5);transform:rotate(-6deg)}
.b-heb b{font:800 clamp(24px,2.2vw,32px)/1 "Assistant",var(--fam);color:var(--blue)}
.c2-mail{display:block;margin:0 calc(36*var(--u));padding-top:6px;font:300 clamp(34px,5.6vw,86px)/1.1 var(--fam);color:rgba(246,243,236,.32);
  text-decoration:none;letter-spacing:-.01em;transition:color .3s;overflow-wrap:anywhere}
.c2-mail:hover{color:var(--light)}
@media (max-width:700px){
  .contact2{padding:30px 8px 0}.c2-panel{border-radius:22px}
  .c2-meta{grid-template-columns:1fr;gap:8px;padding:12px 20px 0}.c2-meta p,.c2-meta p:nth-child(n){text-align:left}
  .c2-field{height:440px;margin:6px 10px 0}
  .stk.pill{padding:12px 22px;font-size:24px}
  .stk.badge{width:112px}
  .c2-mail{margin:0 20px;font-size:28px}
}
/* calm version: nothing moves on its own, no dragging */
.c2-track{animation:none}
.stk.badge svg{animation:none}
.stk{cursor:default;touch-action:auto}
a.stk{cursor:pointer}
a.stk.pill:hover{transform:rotate(var(--r)) translateY(-2px)}
.stk.badge text{font-size:10px;letter-spacing:.06em}
.c2-field{touch-action:auto}
/* stickers in order, with a wink: one centred row, gentle alternating tilts and offsets */
.c2-field{height:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 30px;padding:clamp(40px,4vw,64px) 20px clamp(34px,3.5vw,54px);margin:0}
.c2-field .stk{position:relative;left:auto;top:auto}
.c2-field .stk:nth-child(1){--r:-10deg;transform:rotate(var(--r)) translateY(-6px)}
.c2-field .stk:nth-child(2){--r:-4deg;transform:rotate(var(--r)) translateY(10px)}
.c2-field .stk:nth-child(3){--r:3deg;transform:rotate(var(--r)) translateY(-8px)}
.c2-field .stk:nth-child(4){--r:8deg;transform:rotate(var(--r)) translateY(6px)}
.c2-field .stk:nth-child(5){--r:-3deg;transform:rotate(var(--r)) translateY(-10px)}
.c2-field .stk:nth-child(6){--r:5deg;transform:rotate(var(--r)) translateY(8px)}
.c2-field .stk:nth-child(7){--r:-8deg;transform:rotate(var(--r)) translateY(-4px)}
.c2-field a.stk.pill:hover{transform:rotate(0deg) translateY(-4px)}
@media (max-width:700px){.c2-field{gap:16px 14px;padding:30px 12px 26px}.c2-field .stk.badge{width:104px}}
.c2-field{max-width:880px;margin:0 auto}
/* the title is one whole word, sized to fit the panel at any width */
.c2-marquee{padding:0 calc(36*var(--u)) calc(10*var(--u));white-space:nowrap}
.c2-track{display:block}
.c2-track span{display:block;font-size:min(170px,calc((100vw - 110px) / 4.3));padding:0}
.c2-track i{font-style:normal;font-size:.55em;vertical-align:.32em;color:var(--sky)}
@media (max-width:700px){.c2-marquee{padding:0 20px 8px}.c2-track span{font-size:calc((100vw - 56px) / 4.4)}}
.c2-track span{display:flex;align-items:center;gap:.12em}
.c2-loupe{width:.62em;height:.62em;color:var(--sky);flex:none;transform:translateY(-.02em)}
@media (max-width:700px){.c2-track span{font-size:calc((100vw - 56px) / 5.1)}}
.ftr img[src*=credit]{filter:none;opacity:1;height:26px;width:auto}
/* «КОНТАКТЫ ⌕ КОНТАКТЫ»: two whole words with the loupe between them, never cut */
.c2-track span{justify-content:space-between;gap:.18em;font-size:calc((100vw - 120px) / 14.6)}
.c2-track b{font-weight:inherit}
.c2-loupe{width:.7em;height:.7em}
@media (max-width:700px){
  .c2-track span{flex-wrap:wrap;justify-content:flex-start;column-gap:.14em;row-gap:0;font-size:calc((100vw - 56px) / 7.3)}
  .c2-track b:last-child{flex-basis:100%}
}
/* exact fit: word = 4.42em, loupe .7em, two gaps .3em → 10.15em per line on desktop; 5.3em (word + loupe) on phones */
.c2-track span{justify-content:center;gap:.3em;font-size:calc((100vw - 40px - 72 * var(--u)) / 10.35)}
@media (max-width:700px){.c2-track span{justify-content:flex-start;column-gap:.14em;font-size:calc((100vw - 56px) / 5.4)}}
@media (max-width:700px){.c2-track span{font-size:calc((100vw - 56px) / 5.75);column-gap:.12em}.c2-loupe{width:.6em;height:.6em}}
.c2-marquee{overflow:visible}.c2-track span{line-height:1.18;padding-top:.04em}

/* ============ INNER PAGES (book.html, articles.html) ============ */
main.pg{padding:calc(var(--hdr-h) + 24px) 0 calc(60*var(--u));background:var(--light)}
.pg-wrap{width:var(--wrap);margin:0 auto}
.pg-back{display:inline-block;margin:0 0 18px;font:600 14px/1 var(--fam);color:var(--accent-ink);text-decoration:none}
.pg-back:hover{color:var(--dark)}
/* book */
.pg-book{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:calc(56*var(--u));align-items:center;padding:calc(48*var(--u));border-radius:32px;
  background:radial-gradient(80% 120% at 25% 10%,#e3f2fb 0%,#c3e3f4 55%,#a9d6ee 100%)}
.pg-cover{display:grid;place-items:center}
.pg-cv{display:block;width:min(100%,380px);height:auto;border-radius:6px;box-shadow:20px 28px 44px -20px rgba(13,43,82,.55),0 2px 6px rgba(13,43,82,.15)}
.pg-cover.wide .pg-cv{width:100%;max-width:520px}
.pg-nocover{display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:.7;padding:12% 10%;color:#fff;background:var(--tone)}
.pg-nocover b{font:700 clamp(18px,2vw,28px)/1.15 var(--fam)}.pg-nocover i{font:600 12px/1 var(--fam);font-style:normal;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.pg-label{margin:0 0 10px;font:600 13px/1.2 var(--fam);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.pg-info h1,html[data-font=bebas] .pg-info h1{margin:0;font-size:clamp(36px,3.6vw,56px);line-height:1.04;color:var(--dark)}
html[data-font=bebas] .pg-info h1[dir=rtl]{font:700 clamp(40px,4vw,60px)/1 "Karantina",var(--fam)}
.pg-sub{margin:8px 0 0;font:500 var(--fs-body)/1.4 var(--fam);color:var(--accent-ink)}
.pg-text{margin-top:18px}.pg-text p{margin:0 0 10px;font:400 var(--fs-body)/1.6 var(--fam);color:#1d3d63;max-width:58ch}
.pg-fmts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px;max-width:620px}
.pg-fmt{display:grid;gap:6px;justify-items:start;padding:18px 18px 16px;border-radius:16px;background:rgba(255,255,255,.75)}
.pg-fmt.main{background:#fff;box-shadow:0 14px 30px -22px rgba(13,43,82,.5)}
.pg-fmt span{font:600 14px/1 var(--fam);color:var(--dark)}.pg-fmt b{font:700 30px/1 var(--fam);color:var(--dark)}.pg-fmt small{font:400 12.5px/1.2 var(--fam);color:var(--accent-ink)}
.pg-fmt .btn{margin-top:8px}
.pg-actions{display:flex;flex-wrap:wrap;gap:8px 22px;margin:18px 0 0}
.pg-link{all:unset;cursor:pointer;font:600 15px/1.3 var(--fam);color:var(--dark);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--sky);text-decoration-thickness:2px}
.pg-link:hover{text-decoration-color:var(--dark)}
.pg-pay{margin:10px 0 0;font:400 13px/1.4 var(--fam);color:var(--accent-ink)}
.pg-more{margin-top:calc(70*var(--u))}
.pg-more h2{margin:0 0 22px;font-size:var(--fs-h2)}
.pg-more-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px}
.pg-mini{display:grid;gap:8px;text-decoration:none;color:var(--dark)}
.pg-mini-cv{width:100%;aspect-ratio:.72;object-fit:cover;border-radius:8px;box-shadow:0 12px 22px -14px rgba(13,43,82,.45);transition:transform .3s}
.pg-mini:hover .pg-mini-cv{transform:translateY(-4px)}
.pg-mini b{font:600 15px/1.25 var(--fam)}.pg-mini span{font:400 12.5px/1.2 var(--fam);color:var(--accent-ink)}
.pg-mini .pg-nocover b{font-size:14px}
/* articles */
.art-hero{padding:calc(56*var(--u)) calc(48*var(--u));border-radius:32px;margin-bottom:calc(36*var(--u));
  background:radial-gradient(80% 120% at 25% 10%,#e3f2fb 0%,#c3e3f4 55%,#a9d6ee 100%)}
.art-hero h1,html[data-font=bebas] .art-hero h1{margin:0;font-size:clamp(40px,4.4vw,68px);line-height:1.04;color:var(--dark)}
.art-hero h1 em{font-weight:300;font-style:normal;color:var(--blue)}
.art-hero p{margin:14px 0 0;font:400 var(--fs-body)/1.6 var(--fam);color:#1d3d63;max-width:60ch}
.art-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.art-card{display:flex;flex-direction:column;gap:6px;padding:26px 24px 22px;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgba(13,43,82,.06),0 16px 34px -24px rgba(13,43,82,.35)}
.art-he{margin:0;font:800 clamp(24px,2vw,30px)/1.2 "Assistant",var(--fam);color:var(--blue);text-align:right}
.art-tr{margin:0;font:500 13px/1.2 var(--fam);font-style:italic;color:var(--accent-ink)}
.art-card h3,html[data-font=bebas] .art-card h3{margin:8px 0 0;font:600 clamp(19px,1.5vw,22px)/1.2 var(--fam);text-transform:none;letter-spacing:0;color:var(--dark)}
.art-story{margin:4px 0 8px;font:400 var(--fs-body)/1.6 var(--fam);color:#1d3d63}
.art-src{margin-top:auto;font:600 13.5px/1.2 var(--fam);color:var(--blue);text-decoration:none}
.art-src:hover{text-decoration:underline}
.art-press{margin-top:calc(70*var(--u))}
.art-press h2{margin:0 0 18px;font-size:var(--fs-h2)}
.art-press ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.art-press a{display:grid;grid-template-columns:140px 1fr auto;align-items:center;gap:18px;padding:18px 22px;border-radius:14px;background:#fff;text-decoration:none;color:var(--dark);
  box-shadow:0 1px 2px rgba(13,43,82,.06);transition:box-shadow .25s,transform .25s}
.art-press a:hover{transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(13,43,82,.45)}
.art-press span{font:600 12.5px/1 var(--fam);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.art-press b{font:600 var(--fs-body)/1.35 var(--fam)}
.art-press i{font-style:normal;font-size:18px;color:var(--blue)}
@media (max-width:1100px){.pg-more-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.art-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  main.pg{padding-top:calc(var(--hdr-h) + 12px)}.pg-wrap{width:auto;margin:0 8px}
  .pg-book{grid-template-columns:1fr;padding:26px 20px;border-radius:22px;gap:24px}.pg-cv{width:min(70%,280px)}
  .pg-fmts{grid-template-columns:1fr}.pg-more-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .art-hero{padding:30px 22px;border-radius:22px}.art-grid{grid-template-columns:1fr}
  .art-press a{grid-template-columns:1fr auto;gap:6px 12px}.art-press span{grid-column:1/-1}
  .pg-back,.pg-more h2,.art-press h2{margin-left:12px}
}
/* designer credit: its own line, the logo at a proper size */
.ftr-legal{flex-wrap:wrap}
.ftr .credit{display:flex;align-items:center;gap:14px;width:100%;justify-content:flex-start;margin-top:18px;padding-top:18px;border-top:1px solid rgba(13,43,82,.1);text-decoration:none;color:var(--accent-ink)}
.ftr .credit span{font:500 13px/1 "Assistant",var(--fam)}
.ftr img[src*=credit]{height:42px;width:auto}

/* press: old inline list hidden */
.art-press{display:none}
/* PUBLICATIONS · image cards */
.pubs{margin-top:calc(80*var(--u))}
.pubs-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:calc(32*var(--u))}
.pubs-head h2,html[data-font=bebas] main .pubs-head h2{margin:0;font-size:clamp(34px,3.2vw,50px)}
.pubs-tabs{margin:0}
.pubs-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:calc(28*var(--u)) calc(18*var(--u))}
.pub{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:#fbf9f4;color:var(--dark);text-decoration:none;
  box-shadow:0 1px 0 rgba(13,43,82,.06),0 14px 30px -22px rgba(13,43,82,.45);transition:transform .35s,box-shadow .35s}
.pub[hidden]{display:none}
.pub:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(13,43,82,.06),0 22px 40px -24px rgba(13,43,82,.55)}
.pub:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.pub-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#e8e2d4}
.pub-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.pub:hover .pub-img img{transform:scale(1.04)}
.pub-play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(246,243,236,.95);box-shadow:0 8px 20px -6px rgba(0,0,0,.5)}
.pub-play::after{content:"";position:absolute;left:22px;top:17px;border-left:16px solid var(--dark);border-top:10px solid transparent;border-bottom:10px solid transparent}
.pub-body{display:flex;flex-direction:column;gap:8px;padding:16px 16px 18px;flex:1}
.pub-kind{font:700 10.5px/1.3 var(--fam);letter-spacing:.14em;text-transform:uppercase;color:#7a7263}
.pub-t{font:600 clamp(15px,1.1vw,16.5px)/1.25 var(--fam);letter-spacing:0;color:var(--ink)}
.pub-d{margin-top:auto;padding-top:6px;font:500 13px/1 var(--fam);color:#7a7263}
@media (max-width:1200px){.pubs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.pubs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.pubs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.pub-body{padding:12px 12px 14px}.pub-t{font-size:15px}.pub-kind{font-size:9.5px;letter-spacing:.1em}}
/* catalog: every cover whole, at its own proportions (--r set from the image), sitting on the bottom of one shared slot */
#grid .card-stage{aspect-ratio:.66;display:flex;align-items:flex-end}
#grid .card-cv,#grid .card.wide .card-cv{display:block;width:100%;aspect-ratio:auto}
#grid .card-cv .cvi,#grid .card.wide .card-cv .cvi{display:block;width:100%;aspect-ratio:var(--r,.7);background:none}
#grid .card-cv .cvi img,#grid .card.wide .card-cv .cvi img{width:100%;height:100%;object-fit:cover;padding:0}
#grid .card-acts,#grid .card.wide .card-acts{top:calc((1 - .66 / var(--r,.7)) * 100% + 8px);bottom:auto}
/* SINGLE COLUMN page (article.html) */
.tx{max-width:760px;margin:calc(20*var(--u)) auto 0}
.tx-kind{margin:0 0 14px;font:700 12px/1.4 var(--fam);letter-spacing:.14em;text-transform:uppercase;color:#7a7263}
.tx-head h1,html[data-font=bebas] .tx-head h1{margin:0;font-size:clamp(34px,4vw,58px);line-height:1.05;color:var(--dark)}
.tx-by{margin:14px 0 0;font:600 15px/1 var(--fam);color:var(--blue)}
.tx-img{margin:calc(32*var(--u)) 0;border-radius:16px;overflow:hidden;aspect-ratio:3/2;background:#e8e2d4}
.tx-img img{width:100%;height:100%;object-fit:cover;display:block}
.tx-body p{margin:0 0 1.1em;font:400 clamp(17px,1.25vw,19px)/1.75 var(--fam);color:var(--ink)}
.tx-body p:first-child::first-letter{float:left;font:700 3.4em/.85 var(--fam);margin:.06em .1em 0 0;color:var(--dark)}
.tx-words{margin:calc(40*var(--u)) 0;padding:26px 28px;border-radius:16px;background:#fbf9f4;box-shadow:0 1px 0 rgba(13,43,82,.06),0 14px 30px -22px rgba(13,43,82,.45)}
.tx-words h2,html[data-font=bebas] main .tx-words h2{margin:0 0 14px;font-size:clamp(22px,2vw,28px)}
.tx-words ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.tx-words li{padding:7px 12px;border-radius:999px;background:rgba(13,43,82,.07);font:500 17px/1.3 "Assistant",var(--fam);color:var(--dark)}
.tx-book{display:flex;align-items:center;gap:22px;padding:22px;border-radius:16px;background:var(--dark);color:#fff;text-decoration:none;margin-bottom:calc(60*var(--u))}
.tx-book img{width:92px;height:auto;border-radius:4px;box-shadow:0 12px 24px -10px rgba(0,0,0,.6)}
.tx-book span{display:grid;gap:4px}
.tx-book small{font:600 12px/1 var(--fam);letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.tx-book b{font:700 22px/1.2 var(--fam)}
.tx-book em{font:400 15px/1.3 var(--fam);font-style:normal;opacity:.8}
.tx-book i{margin-top:6px;font:600 14px/1 var(--fam);font-style:normal;color:var(--sky)}
@media (max-width:700px){.tx-words{padding:20px}.tx-book{gap:16px;padding:16px}.tx-book img{width:70px}.tx-book b{font-size:18px}}
.tx-src{margin:calc(30*var(--u)) 0;padding-top:16px;border-top:1px solid rgba(13,43,82,.15);font:400 14.5px/1.6 var(--fam);color:#5b6b80}
.tx-src a{color:var(--blue);font-weight:600}
/* detective panel: tighter, the tape only needs its own band above the content */
#detective.det{padding-top:calc(150*var(--u));padding-bottom:calc(60*var(--u))}
#detective .det-books{height:calc(440*var(--u))}
@media (max-width:900px){#detective.det{padding-top:110px;padding-bottom:40px}#detective .det-books{height:92vw}}
/* phone: price above, buy button full width under it, so the foot never overflows the card */
@media (max-width:700px){#grid .card-foot{flex-wrap:wrap;gap:10px}#grid .card-buy-btn{width:100%;justify-content:center}}
/* HOME · publications row */
.hpress-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hpress-head h2{margin:0}
.hpress-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.hpress-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Facebook posts: the key Hebrew word stands in for a photo */
.pub-word,.tx-word{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;padding:12px;text-align:center;
  background:radial-gradient(120% 90% at 30% 20%,#dceefa 0,#b9dcf1 60%,#9fcbe8 100%);color:var(--dark)}
.pub-word b{font:700 clamp(26px,2.4vw,36px)/1.1 "Assistant",var(--fam)}
.pub-word i,.tx-word i{font:italic 400 14px/1.2 var(--fam);color:#2c5580}
.tx-word{aspect-ratio:3/1}
.tx-word b{font:700 clamp(40px,5vw,72px)/1 "Assistant",var(--fam)}
.tx-word i{font-size:16px}
.tx-body p.tx-he{text-align:right;font-family:"Assistant",var(--fam);font-weight:600;color:var(--dark)}
/* designer credit: centred and large enough to read */
.ftr .credit{justify-content:center;gap:20px;margin-top:24px;padding-top:28px}
.ftr .credit span{font:600 17px/1.2 "Assistant",var(--fam)}
.ftr img[src*=credit]{height:72px}
@media (max-width:700px){.ftr .credit{flex-direction:column;gap:10px}.ftr img[src*=credit]{height:60px}}
/* FOOTER v3: logo, site map, books, contact, legal row, designer credit */
.ftr{margin-top:calc(60*var(--u));padding:calc(64*var(--u)) 0 calc(28*var(--u));background:#efe9dc;border-top:0;color:var(--ink)}
.ftr-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:calc(48*var(--u))}
.ftr-logo img{display:block;width:120px;height:auto}
.ftr-name{margin:18px 0 0;font:700 18px/1.3 var(--fam);color:var(--dark)}
.ftr-name span{display:block;margin-top:2px;font:600 16px/1.3 "Assistant",var(--fam);color:var(--blue)}
.ftr-about{margin:10px 0 0;max-width:34ch;font:400 15px/1.6 var(--fam);color:#4a5b70}
.ftr-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ftr-col h2,html[data-font=bebas] .ftr .ftr-col h2{margin:0 0 6px;font:700 12px/1 var(--fam);letter-spacing:.16em;text-transform:uppercase;color:#7a7263}
.ftr-col a{font:500 15.5px/1.3 var(--fam);color:var(--dark);text-decoration:none}
.ftr-col a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.ftr-pay{margin:6px 0 0;font:400 13.5px/1.5 var(--fam);color:#4a5b70}
.ftr-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:calc(48*var(--u));padding-top:20px;border-top:1px solid rgba(13,43,82,.15);font:400 13.5px/1.4 var(--fam);color:#4a5b70}
.ftr-bottom nav{display:flex;gap:20px;flex-wrap:wrap}
.ftr-bottom a{color:#4a5b70;text-decoration:none}.ftr-bottom a:hover{color:var(--dark);text-decoration:underline}
@media (max-width:900px){.ftr-top{grid-template-columns:1fr 1fr;gap:36px 24px}.ftr-brand{grid-column:1/-1}}
@media (max-width:700px){.ftr{padding-bottom:90px}.ftr-bottom{flex-direction:column;align-items:flex-start}}
.ftr-name span{text-align:left}
/* footer in the site's sky blue, same light as the «Слово под лупой» banner */
.ftr{background:radial-gradient(80% 140% at 50% 0%,#d9eef9 0%,#b9def2 55%,#9fd0ea 100%)}
.ftr-about,.ftr-pay,.ftr-bottom,.ftr-bottom a{color:#1d3d63}
.ftr-col h2,html[data-font=bebas] .ftr .ftr-col h2{color:#2c5580}
.ftr-bottom{border-top-color:rgba(13,43,82,.2)}
.ftr .credit{border-top-color:rgba(13,43,82,.2)}
.ftr .credit span{color:var(--dark)}
/* order: two formats, print and digital */
@media (min-width:901px){.sec.order .ord-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* button arrows: a drawn arrow, exactly centred in its circle (the font glyph sat low and to the side) */
.btn>span[aria-hidden]{display:grid;place-items:center;font-size:0;line-height:0}
.btn>span[aria-hidden]::before{content:"";width:46%;height:auto;aspect-ratio:1;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
/* arrow centred absolutely: the hidden glyph no longer shares the circle's layout */
.btn>span[aria-hidden]{position:relative;display:block;font-size:0;line-height:0}
.btn>span[aria-hidden]::before{position:absolute;inset:0;margin:auto;width:46%;height:46%;aspect-ratio:auto}
/* LEGAL pages */
.legal{max-width:780px;margin:calc(20*var(--u)) auto calc(60*var(--u))}
.legal-kind{margin:0 0 12px;font:700 12px/1.4 var(--fam);letter-spacing:.14em;text-transform:uppercase;color:#7a7263}
.legal h1,html[data-font=bebas] .legal h1{margin:0;font-size:clamp(34px,4vw,56px);line-height:1.05;color:var(--dark)}
.legal-date{margin:12px 0 28px;font:500 14px/1.4 var(--fam);color:#5b6b80}
.legal h2,html[data-font=bebas] main .legal h2{margin:36px 0 12px;font-size:clamp(22px,2vw,28px);line-height:1.15;color:var(--dark)}
.legal p,.legal li{font:400 clamp(16px,1.15vw,17.5px)/1.7 var(--fam);color:var(--ink)}
.legal p{margin:0 0 12px}
.legal ul,.legal ol{margin:0 0 14px;padding-left:22px}
.legal li{margin:0 0 6px}
.legal a{color:var(--blue);font-weight:600}
.legal .legal-contacts{list-style:none;padding:18px 22px;border-radius:14px;background:#fbf9f4;box-shadow:0 1px 0 rgba(13,43,82,.06),0 14px 30px -24px rgba(13,43,82,.45)}
.legal-he{margin-top:48px;padding-top:28px;border-top:1px solid rgba(13,43,82,.15);text-align:right}
.legal-he p{font-family:"Assistant",var(--fam)}
.legal-cta{margin:16px 0 4px}
.legal-cta .btn{color:var(--dark)}
/* desktop: no signature in the hero */
.sig-hero-img{display:none}
/* phone hero: the whole frame fits one screen under the header; scale by the tighter of width and height */
@media (max-width:700px){
  .hero .stage-in{--m:min(calc((100vw - 16px) / 359), calc((100svh - 80px) / 776))}
  .hero .stage{width:calc(359 * min(calc((100vw - 16px) / 359), calc((100svh - 80px) / 776)));margin-inline:auto}
}
/* shelf controls line up with the text on the left */
.shelf-side .shelf-ctrl{justify-content:flex-start}
/* phone hero: the photo runs past the bottom of the frame, so its cut edge and the book stack under Yuri stay hidden */
@media (max-width:700px){.hero .hero-yuri{top:auto;bottom:calc(-46 * var(--m))}}
/* phone hero: text block sits a little lower, off the top edge */
@media (max-width:700px){
  html[data-font=bebas] .hero .hero-h1,.hero .hero-h1{top:calc(46 * var(--m))}
  .hero .hero-side{top:calc(156 * var(--m))}
  .hero .hero-cta{top:calc(252 * var(--m))}
}
/* shelf drag on phones: sideways gestures belong to the shelf, vertical ones still scroll the page */
#shelf{touch-action:pan-y;transition:translate .45s cubic-bezier(.2,.7,.2,1)}
#shelf.dragging{transition:none;cursor:grabbing}
/* phone: the tabs wrap onto rows, so the pill-shaped container must not clip them */
@media (max-width:700px){.tabs{border-radius:0;overflow:visible}}
/* excerpt reader: a clear round close button and round arrows, like every other button on the site */
.reader .x{position:absolute;top:10px;right:10px;z-index:5;width:48px;height:48px;border-radius:50%;border:0;padding:0;font-size:0;cursor:pointer;
  background:var(--light);color:var(--dark);box-shadow:0 10px 24px -8px rgba(0,0,0,.55);display:grid;place-items:center;transition:transform .2s,background .2s}
.reader .x::before,.reader .x::after{content:"";position:absolute;width:20px;height:2.5px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
.reader .x::after{transform:rotate(-45deg)}
.reader .x:hover{background:#fff;transform:scale(1.06)}
.reader .x:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.reader-nav button{position:relative;width:52px;height:52px;border-radius:50%;border:0;padding:0;font-size:0;cursor:pointer;background:var(--light);color:var(--dark);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.55);transition:transform .2s,background .2s}
.reader-nav button::before{content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
#rd-prev::before{transform:scaleX(-1)}
.reader-nav button:hover:not(:disabled){background:#fff;transform:scale(1.06)}
.reader-nav button:disabled{opacity:.35;cursor:default}
.reader-nav button:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.reader-nav span{font:600 16px/1 var(--fam);color:var(--light)}
/* phone: compact filters so they pack two to a row even on narrow phones */
@media (max-width:700px){#books .tabs{gap:6px}#books .tabs button{padding:8px 13px;font-size:13px}}
/* phone lens banner: the clipping under the loupe on top, the text in the middle, the books peeking from the bottom edge */
@media (max-width:700px){
  .lens-banner .lb-mag{order:1;margin:0 0 72px}
  .lens-banner .lb-txt{order:2}
  .lens-banner .lb-books{order:3;margin-top:18px}
}
/* phone: buttons keep their own size like everywhere else (only the cart's order button stays full width) */
@media (max-width:700px){
  .btn{width:auto}
  #checkout .btn{width:100%}
  .lens-banner .lb-txt{text-align:center}
  .lens-banner .lb-txt .btn{margin-inline:auto}
  .lens-banner .lb-txt p{margin-inline:auto}
}
/* LOADER: the logo's own loupe searches, finds «Yura Media», then «Publishing house» appears and the logo stands complete */
.ldr-on body{overflow:hidden}
.ldr{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:var(--light);transition:opacity .7s ease,visibility .7s}
.ldr.out{opacity:0;visibility:hidden}
.ldr-logo{width:min(78vw,440px);height:auto;overflow:visible}
.ldr-words-blur{opacity:.35;transition:opacity .5s ease}
.ldr-arc{opacity:0;transform:translateY(8px);transition:opacity .6s ease .15s,transform .6s ease .15s}
.ldr.found .ldr-words-blur{opacity:0}
.ldr.found .ldr-arc{opacity:1;transform:none}
/* phone lens banner: the heading spans the full width so it centres; the loupe photo loses the box-shaped shadow */
@media (max-width:700px){.lens-banner .lb-txt h2{max-width:none;width:100%;margin-inline:auto}}
.loupe-photo{filter:none}
/* phone: «Все публикации» comes after the cards you just looked at */
@media (max-width:700px){
  #press .wrap{display:flex;flex-direction:column}
  #press .hpress-head{display:contents}
  #press .hpress-head h2{order:1;margin-bottom:calc(28*var(--u))}
  #press .hpress-grid{order:2}
  #press .hpress-head .btn{order:3;align-self:flex-start;margin-top:26px}
}
/* hero books arrive one by one, quick and in order: left to right on desktop, bottom to top on phones */
.js .w{transition:opacity .5s var(--ease),translate .6s var(--ease)}
.js .hero.in .w1{transition-delay:0s}.js .hero.in .w2{transition-delay:.08s}.js .hero.in .w3{transition-delay:.16s}
.js .hero.in .w4{transition-delay:.24s}.js .hero.in .w5{transition-delay:.32s}.js .hero.in .w6{transition-delay:.4s}
.js .hero.in .w7{transition-delay:.48s}.js .hero.in .w8{transition-delay:.56s}.js .hero.in .w9{transition-delay:.64s}
@media (max-width:700px){
  .js .hero.in .w9{transition-delay:0s}.js .hero.in .w1{transition-delay:.08s}.js .hero.in .w3{transition-delay:.16s}
  .js .hero.in .w7{transition-delay:.24s}.js .hero.in .w2{transition-delay:.32s}.js .hero.in .w8{transition-delay:.4s}
}
/* while the loader is on screen the books wait; they start the moment it leaves */
.ldr-on .js .hero .w,.ldr-on.js .hero .w{opacity:0;translate:0 calc(60*var(--k));transition:none}
/* phone: one «Контакты» with its loupe, on one line (the doubled word only works side by side) */
@media (max-width:700px){
  .c2-track span b:last-of-type{display:none}
  .c2-track span{flex-wrap:nowrap;align-items:center;column-gap:.16em;font-size:calc((100vw - 56px) / 5.3)}
  .c2-loupe{width:.62em;height:.62em}
}
.c2-mail{text-align:center;justify-content:center;display:flex}
.ldr-logo{width:min(46vw,220px)}
/* the cart's order button looks like every other button: own width, not stretched */

#checkout .btn{width:auto;align-self:flex-start;justify-self:start}
@media (max-width:700px){#checkout .btn{width:auto}}
/* desktop: the photo spans the text column from its top edge to its bottom edge, standing on the bottom */
@media (min-width:901px){
  #about .about-grid{align-items:stretch}
  #about .about-ph{position:relative;align-self:stretch;width:100%;max-width:none;min-height:420px}
  #about .about-ph img{position:absolute;left:50%;bottom:0;top:0;height:100%;width:auto;max-width:100%;translate:-50% 0;object-fit:contain;object-position:center bottom;aspect-ratio:auto}
}
/* book page: front / back of the cover */
.pg-cover{display:flex;flex-direction:column;align-items:center;gap:18px}
.pg-flip{margin:0}
.pg-back-cv[hidden],.pg-cover>.pg-cv[hidden]{display:none}
/* book page: enlarge the cover */
.pg-cover{position:relative}
.pg-cover>.pg-cv{cursor:zoom-in}
.pg-zoom{position:absolute;top:10px;right:10px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;padding:0;cursor:zoom-in;
  background:rgba(246,243,236,.95);color:var(--dark);box-shadow:0 8px 20px -8px rgba(0,0,0,.45);transition:transform .2s}
.pg-zoom::before{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center/contain no-repeat}
.pg-zoom:hover{transform:scale(1.06)}
.pg-zoom:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.cvz{width:min(96vw,980px);max-height:96svh;padding:56px 16px 18px;border:0;border-radius:18px;background:transparent;overflow:visible}
.cvz::backdrop{background:rgba(13,43,82,.82);backdrop-filter:blur(4px)}
.cvz[open]{display:flex;flex-direction:column;align-items:center;gap:16px}
.cvz-img{display:block;max-width:100%;max-height:calc(96svh - 150px);width:auto;height:auto;border-radius:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.cvz .x{position:absolute;top:0;right:8px;width:48px;height:48px;border-radius:50%;border:0;padding:0;font-size:0;cursor:pointer;background:var(--light);color:var(--dark);box-shadow:0 10px 24px -8px rgba(0,0,0,.55)}
.cvz .x::before,.cvz .x::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:2.5px;margin:-1.25px 0 0 -10px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
.cvz .x::after{transform:rotate(-45deg)}
.cvz-flip{background:rgba(246,243,236,.92)}
/* tabs: no leftover side margin from the first tab design, so the pill hugs its buttons */
.tabs button{margin:0}
/* cart: thank-you after an order */
.cart-thanks{margin:8px 0 18px;padding:20px 22px;border-radius:14px;background:#e3f2fb;color:var(--dark)}
.cart-thanks b{display:block;margin-bottom:6px;font:700 18px/1.3 var(--fam)}
.cart-thanks p{margin:0;font:400 15px/1.55 var(--fam)}
#checkout .btn.busy{opacity:.6;pointer-events:none}

/* checkout: full delivery address, button dimmed until the form is complete, send error */
#checkout .co-addr{display:grid;gap:12px}
#checkout .co-addr[hidden]{display:none}
#checkout .co-row{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:12px}
#checkout .co-zip{max-width:180px}
#checkout input::placeholder{color:var(--mute);opacity:.7}
#checkout .btn.off{opacity:.45}
.cart-err{margin:0;padding:12px 14px;border-radius:10px;background:#fbe9e7;color:#8a2a1c;font:400 15px/1.5 var(--fam)}
.cart-err a{color:inherit;text-decoration:underline}
#checkout .co-row label,#checkout .co-row input,#checkout .co-zip input{min-width:0;width:100%;box-sizing:border-box}
#checkout .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* phone hero, v2: the frame always runs the full width (8px gutters); on short screens it gets shorter instead of narrower.
   Yuri is anchored to the bottom edge and the book stack is cropped there, so the text block at the top keeps its place */
@media (max-width:700px){
  .hero .stage-in{--m:min(calc((100vw - 16px) / 359), calc((100svh - 80px) / 776 * 1.18));height:min(calc(776 * var(--m)), calc(100svh - 80px))}
  .hero .stage{width:calc(100vw - 16px)}
  .hero .stage-in{width:100%}
}
/* short phone screens (wide aspect, e.g. Android with address and nav bars): Yuri follows the frame height, the text sits higher */
@media (max-width:700px) and (min-aspect-ratio:10/19){
  .hero .stage-in{--mh:calc((100svh - 80px) / 776)}
  .hero .hero-yuri{width:calc(441 * min(var(--m), var(--mh) * 1.02));left:calc(2 * var(--m));bottom:calc(-46 * var(--mh))}
  html[data-font=bebas] .hero .hero-h1,.hero .hero-h1{top:calc(30 * var(--m))}
  .hero .hero-side{top:calc(138 * var(--m))}
  .hero .hero-cta{top:calc(232 * var(--m))}
}
#shelf.dragging .bk{transition:none}
.shelf-hint .hint-touch{display:none}
@media (max-width:700px){.shelf-hint .hint-hover{display:none}.shelf-hint .hint-touch{display:inline}}
/* short phone screens: the six hero books close up evenly so the last one still peeks in at the bottom, as on tall phones */
@media (max-width:700px) and (min-aspect-ratio:10/19){
  .hero .wave{--top:calc(300 * var(--m));--step:calc((min(calc(776 * var(--m)), calc(100svh - 80px)) - 83 * var(--m) - var(--top)) / 5)}
  .hero .wave .w8{top:var(--top)}
  .hero .wave .w2{top:calc(var(--top) + var(--step))}
  .hero .wave .w7{top:calc(var(--top) + 2 * var(--step))}
  .hero .wave .w3{top:calc(var(--top) + 3 * var(--step))}
  .hero .wave .w1{top:calc(var(--top) + 4 * var(--step))}
  .hero .wave .w9{top:calc(var(--top) + 5 * var(--step))}
}
/* phone hero: the book stack peeks in from the right edge, about a quarter of each cover stays outside the frame */
@media (max-width:700px){.hero .wave .w{left:calc(282 * var(--m))}}
/* phone menu: everything fits on short screens too (links scale with the screen height), and the panel scrolls if it still runs over */
.drawer{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-top:calc(var(--hdr-h) + min(32px, 3svh));padding-bottom:max(24px, env(safe-area-inset-bottom));gap:min(32px, 3svh)}
html[data-font=bebas] .drawer nav a,.drawer nav a{font-size:min(var(--t2), 4.8svh);padding-block:min(8px, .9svh)}
.pg-meta{margin:6px 0 0;font-size:var(--t5);color:var(--mute)}
.ftr-sub{margin:10px 0 2px;font-size:var(--t5);opacity:.7}
.ftr-col .ftr-sub:first-of-type{margin-top:0}

/* ===== audit fixes, Oct 2026 ===== */
/* checkout fields: 16px so iPhone does not zoom on tap, a border you can see (about 4.9:1), a clear focus ring, a marked error */
#checkout input{font-size:16px;border-color:var(--mute)}
#checkout input:focus{border-color:var(--dark);outline:2px solid var(--accent);outline-offset:2px}
#checkout input[aria-invalid=true]{border-color:#b3261e;box-shadow:0 0 0 1px #b3261e}
#checkout .cart-priv{margin:0;font-size:13px;line-height:1.45;color:var(--mute)}
#checkout .cf-turnstile{min-height:65px}
/* book dialog on short screens: the last link stays inside, the panel scrolls if it has to */
@media (max-height:720px){.bookdlg .bd-info{overflow-y:auto;justify-content:flex-start;padding-bottom:28px}}
/* bigger touch targets on phones: filter tabs, heart and quick-buy, quantity, back link */
@media (max-width:700px){
  .tabs button{min-height:44px}
  .card-acts button{width:44px;height:44px}
  .qty button{width:40px;height:40px}
  .pg-back{display:inline-block;padding-block:12px}
}

/* fonts hosted on the site (were on Google Fonts): latin, cyrillic and hebrew subsets, woff2 */
@font-face { font-family: 'Assistant'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/gf/assistant-hebrew.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Assistant'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/gf/assistant-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Karantina'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/gf/karantina-hebrew.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Karantina'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/gf/karantina-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap; src: url(fonts/gf/oswald-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap; src: url(fonts/gf/oswald-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(fonts/gf/source-sans-3-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url(fonts/gf/source-sans-3-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }