/* Bow: kinetic type on colour fields; motion comes from the instrument.
   Animated properties only: transform, opacity, clip-path (+ SVG path data of the strings, in script.js).
   Base styles = the final, fully visible state. Hidden-initial states live under html.js:not(.static).
   Inner pages: see "INNER-PAGE KIT" near the end of this file for the reusable classes. */

/* ---------- fonts: self-hosted Noto Serif Display + Noto Sans (SIL OFL 1.1, from Google Fonts); latin + latin-ext subset (Latin Extended-A, U+0100-017F) for Dvořák, Martinů, Český.
   Russian and Hebrew pages (ru/, he/): cyrillic files join the same two families; Hebrew has its own pair (Noto Serif Hebrew, Noto Sans Hebrew), named second in each stack.
   unicode-range keeps every file off the wire until a page uses its letters. ---------- */
@font-face { font-family: "Noto Serif Display"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/noto-serif-display-latin-ext.woff2) format("woff2"); unicode-range: U+0100-017F; }
@font-face { font-family: "Noto Serif Display"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/noto-serif-display-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: "Noto Serif Display"; font-style: italic; font-weight: 300 700; font-display: swap; src: url(fonts/noto-serif-display-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-017F; }
@font-face { font-family: "Noto Serif Display"; font-style: italic; font-weight: 300 700; font-display: swap; src: url(fonts/noto-serif-display-italic-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: "Noto Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/noto-sans-latin-ext.woff2) format("woff2"); unicode-range: U+0100-017F; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/noto-sans-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: "Noto Serif Display"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/noto-serif-display-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Noto Serif Display"; font-style: italic; font-weight: 300 700; font-display: swap; src: url(fonts/noto-serif-display-italic-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/noto-sans-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Noto Serif Hebrew"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/noto-serif-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: "Noto Sans Hebrew"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/noto-sans-hebrew.woff2) format("woff2"); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

:root {
  --cobalt: #1F3FD6; --deep: #0E1A5E; --cream: #FBF4E8; --mist: #CBD4FF; --orange: #FFB27A; --bone: #F4F1EA; --ink: #111318;
  --serif: "Noto Serif Display", "Noto Serif Hebrew", Georgia, "Times New Roman", serif;
  --sans: "Noto Sans", "Noto Sans Hebrew", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 64px;
  --lane: 0px;   /* mobile: right-hand lane kept free of text so the strings never run through copy */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--cobalt); }
html.menu-open { overflow: hidden; }
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ol, ul, figure, blockquote { margin: 0; }
em { font-style: italic; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.bone :focus-visible, html[data-nav="bone"] .nav :focus-visible { outline-color: var(--cobalt); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; inset-inline-start: 12px; top: -80px; z-index: 100; background: var(--cream); color: var(--deep); padding: .75rem 1rem; font: 600 .9rem var(--sans); }
.skip:focus { top: 12px; }

/* ---------- colour fields ---------- */
.sec { position: relative; padding-block: clamp(80px, 12vw, 180px); padding-inline: var(--gut) calc(var(--gut) + var(--lane)); overflow-x: clip; }
.cobalt { background: var(--cobalt); color: var(--cream); }
.deep { background: var(--deep); color: var(--cream); }
.bone { background: var(--bone); color: var(--ink); }
.inner { position: relative; max-width: 1560px; margin: 0 auto; padding-top: clamp(36px, 5vw, 72px); }

/* ---------- type ---------- */
.label { font: 600 .76rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.bone .label { color: var(--cobalt); }
.big { font: 300 clamp(3.2rem, 11vw, 10.5rem)/.95 var(--serif); letter-spacing: -.03em; }
.big em, .mega em { font-weight: 400; }
.mega { font: 300 clamp(3rem, 13.5vw, 14rem)/.92 var(--serif); letter-spacing: -.035em; }
.arrow-link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: .9rem 0; font: 600 .85rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--cobalt); }
.cobalt .arrow-link, .deep .arrow-link { color: var(--cream); }
.arrow-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .45rem; height: 1.5px; background: currentColor; transform-origin: 0 50%; transition: transform .5s var(--ease); }
.arrow-link span { display: inline-block; margin-inline-start: .35em; transition: transform .4s var(--ease); }
.arrow-link:hover span { transform: translateX(6px); }
.arrow-link:hover::after { transform: scaleX(.35); }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0 var(--gut); background: var(--cobalt); color: var(--cream); transition: transform .45s var(--ease); }
html[data-nav="deep"] .nav { background: var(--deep); }
html[data-nav="bone"] .nav { background: var(--bone); color: var(--ink); }
html.menu-open .nav { background: transparent; color: var(--cream); }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .14; }
.nav.hide { transform: translateY(-100%); }
.wordmark { display: inline-block; padding: .9rem 0; font: italic 400 1.3rem/1 var(--serif); letter-spacing: .005em; text-decoration: none; color: inherit; white-space: nowrap; }
.nav ul { display: flex; flex-wrap: wrap; gap: .2rem clamp(14px, 2vw, 32px); list-style: none; padding: 0; }
.nav a.l { position: relative; display: block; padding: 1rem 0; font: 500 .76rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; text-decoration: none; color: inherit; }
.nav a.l::after { content: ""; position: absolute; left: 0; right: 0; bottom: .45rem; height: 1.5px; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
html[data-nav="bone"] .nav a.l::after { background: var(--cobalt); }
.nav a.l:hover::after { transform: scaleX(1); }
.nav-links { margin-inline-start: auto; }   /* links and language switch sit together at the far end */
/* language links (written into the header and the menu of every page by i18n/build.mjs) */
.langs { display: flex; align-items: center; }
.langs a { position: relative; display: grid; place-items: center; min-width: 40px; min-height: 44px; padding: 0 .3rem; font: 600 .76rem/1 var(--sans); letter-spacing: .13em; text-decoration: none; color: inherit; }
.langs a[lang="he"] { font-size: .92rem; letter-spacing: 0; }
.langs a::after { content: ""; position: absolute; left: .3rem; right: .3rem; bottom: .45rem; height: 1.5px; background: var(--orange); transform: scaleX(0); transition: transform .45s var(--ease); }
html[data-nav="bone"] .nav .langs a::after { background: var(--cobalt); }
.langs a:hover::after, .langs a[aria-current]::after { transform: scaleX(1); }
.menu .langs { gap: .6rem; margin-bottom: 2rem; }
.menu .langs a { min-width: 48px; padding: 0 .5rem; font: 600 .95rem/1 var(--sans); letter-spacing: .13em; }
.menu .langs a[lang="he"] { font-size: 1.1rem; letter-spacing: 0; }
.menu-btn { display: none; min-height: 44px; font: 600 .76rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: inherit; background: none; border: 1px solid currentColor; border-radius: 99px; padding: .85rem 1.25rem; cursor: pointer; }
html:not(.js) .nav { position: absolute; height: auto; min-height: var(--nav-h); flex-wrap: wrap; padding-block: .5rem; }
html:not(.js) .menu { display: none; }
/* The row of links needs about 1200px with the language switch beside it (Russian is the widest). Below that, the Menu button.
   Above it, script.js still checks that the links sit on one line (largest text setting) and sets nav-compact when they do not. */
@media (max-width: 1199px) { html.js .nav-links, html.js .nav .langs { display: none; } html.js .menu-btn { display: inline-block; } }
html.js.nav-compact .nav-links, html.js.nav-compact .nav .langs { display: none; }
html.js.nav-compact .menu-btn { display: inline-block; }
@media (min-width: 1200px) { html:not(.nav-compact) .menu { display: none; } }
.menu { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--nav-h) + 24px) var(--gut) 8vh; background: var(--deep); color: var(--cream); clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease); }
.menu.open { clip-path: inset(0 0 0 0); }
.menu nav { margin-top: auto; }   /* bottom-aligned when it fits, scrollable from the top when it does not */
.menu ul { list-style: none; padding: 0; }
.menu a { display: block; padding: .06em 0; font: 300 clamp(2.6rem, 12.5vw, 5.5rem)/1.1 var(--serif); letter-spacing: -.02em; color: inherit; text-decoration: none; }
.menu li:nth-child(even) a { font-style: italic; }
.menu a:hover { color: var(--orange); }

/* ---------- the four strings (fixed overlay) ---------- */
.strings { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; overflow: visible; }
.sg-cream { color: var(--cream); opacity: .92; transition: opacity .6s ease; }
.sg-cobalt { color: var(--cobalt); opacity: 0; transition: opacity .6s ease; }
html[data-tone="light"] .sg-cream { opacity: 0; }
html[data-tone="light"] .sg-cobalt { opacity: .95; }
/* layers: section colour (auto) < photos (1) < strings (5) < text (10) < nav (60) */
.wipe, .hero-text, .orch li, .rep-rows, .cap, .rowclip, .arrow-link, .label, .mag-wrap { position: relative; z-index: 10; }
.ph, .tile-media, .hero-photo { position: relative; z-index: 1; overflow: hidden; background: var(--deep); }
.ph img, .tile-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- bow line ---------- */
.bow { display: block; position: relative; height: 8px; overflow: hidden; pointer-events: none; color: currentColor; }
.bone .bow { color: var(--cobalt); }
.bow::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1.5px; background: currentColor; opacity: .6; transform-origin: 0 50%; }
.bow::after { content: ""; position: absolute; inset: 2px 0; background: var(--orange); clip-path: inset(0 0 0 calc(100% - 30px) round 2px); }
.bow.edge { position: absolute; left: 0; right: 0; top: 0; z-index: 10; }
@keyframes bowline { to { transform: scaleX(1); } }
@keyframes bowtip { 0% { transform: translateX(-100%); opacity: 1; } 78% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr; column-gap: clamp(12px, 2vw, 28px); align-items: end; padding-block: calc(var(--nav-h) + 3vh) clamp(28px, 5vh, 56px); padding-inline: var(--gut) calc(var(--gut) + var(--lane)); }
.hero-text { grid-area: 1 / 1 / 2 / 13; align-self: end; }
.hero-photo { grid-area: 1 / 9 / 2 / 13; align-self: start; justify-self: end; width: 100%; max-width: 460px; margin-top: 1vh; overflow: visible; background: none; }
.frame { aspect-ratio: 3 / 4; }
.frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(14, 26, 94, .86) 0, rgba(14, 26, 94, .45) 24%, rgba(14, 26, 94, 0) 52%); }
.name { font: 300 clamp(2.5rem, 13.5vw, 13rem)/.92 var(--serif); letter-spacing: -.03em; color: var(--cream); }
.line { display: block; white-space: nowrap; }
.l2 { font-style: italic; font-weight: 400; padding-inline-start: .55em; }
.ch { display: inline-block; }
.hero-bow { margin-top: clamp(26px, 5vh, 52px); color: var(--cream); }
.hero-meta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.4rem 3.5rem; margin-top: clamp(14px, 2.4vh, 26px); }
@media (min-width: 640px) { .hero-meta { max-width: calc(72vw - var(--gut) - 48px); } }   /* meta stays left of the string lane */
.role { font: 600 .95rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--mist); }
.hero-quote { max-width: 28ch; }
.hero-quote p { font: italic 300 clamp(1.2rem, 1.8vw, 1.75rem)/1.25 var(--serif); color: var(--cream); }
.hero-quote figcaption { margin-top: .6rem; font: 600 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cream); }

/* ---------- biography ---------- */
.bio .inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 28px); row-gap: clamp(22px, 3vw, 44px); align-items: start; }
.bio .label { grid-column: 1 / -1; }
.lead { grid-column: 1 / 11; font: 300 clamp(2.5rem, 7.2vw, 7.2rem)/1 var(--serif); letter-spacing: -.025em; }
.lead em { font-weight: 400; color: var(--cobalt); }
.copy { grid-column: 1 / 6; display: grid; gap: 1.1rem; align-content: start; }
.copy p { max-width: 38ch; }
.copy .arrow-link { justify-self: start; }
.bio-photo { grid-column: 6 / 13; aspect-ratio: 3 / 2; }

/* ---------- credentials ---------- */
.orch { list-style: none; max-width: 1560px; margin: clamp(28px, 5vw, 64px) auto 0; padding: 0; }
.orch li { padding: .14em 0 .1em; border-top: 1px solid rgba(251, 244, 232, .2); font: 300 clamp(2rem, 6.9vw, 7.2rem)/1.04 var(--serif); letter-spacing: -.025em; }
.orch li:nth-child(even) { text-align: end; }
.orch em { font-weight: 400; color: var(--orange); }
.cond { margin-top: clamp(48px, 8vw, 120px); }
.cond ul { list-style: none; padding: 0; margin-top: 1.4rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .7rem 2rem; font-size: 1rem; line-height: 1.4; color: var(--mist); }

/* ---------- watch ---------- */
.watch-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 2rem; }
.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(36px, 5vw, 72px) clamp(12px, 2vw, 28px); margin: clamp(36px, 6vw, 88px) 0 clamp(16px, 3vw, 40px); }
.tile { grid-column: 1 / -1; }
.tile a { display: block; text-decoration: none; color: inherit; }
.tile-media { aspect-ratio: 16 / 9; transform-origin: 50% 50%; }
.play { position: absolute; inset-inline-end: clamp(12px, 2vw, 22px); bottom: clamp(12px, 2vw, 22px); display: grid; place-items: center; width: clamp(48px, 6vw, 72px); aspect-ratio: 1; border-radius: 50%; background: var(--cobalt); }
.play::before { content: ""; margin-left: 14%; border: .55rem solid transparent; border-left: .95rem solid var(--cream); border-right: 0; }
h3.cap { margin: 1.1rem 0 .4rem; font: 400 clamp(1.45rem, 2.3vw, 2.1rem)/1.12 var(--serif); letter-spacing: -.01em; }
h3.cap em { font-weight: 300; color: var(--cobalt); }
p.cap { font: 600 .72rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cobalt); }
.tile a:hover h3.cap span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
@media (min-width: 640px) { .tile .cap { max-width: 66%; } }          /* captions stay left of the string lane (72%) */
@media (min-width: 800px) {
  .tile .cap { max-width: none; }
  .t1 { grid-column: 1 / 8; }
  .t2 { grid-column: 10 / 13; margin: clamp(80px, 13vw, 220px) 0 0; margin-inline-start: 28px; }
  .t3 { grid-column: 4 / 12; }
  .t3 .cap { max-width: 62%; }
}

/* ---------- press ---------- */
.row { display: grid; gap: clamp(56px, 9vw, 96px); }
.pp-title { display: grid; gap: 1rem; justify-items: start; }
.pp-title .big em { color: var(--orange); }
.quote p { font: 300 clamp(2rem, 6.6vw, 4.2rem)/1.1 var(--serif); letter-spacing: -.015em; }
.quote em { font-weight: 400; color: var(--orange); }
.q-long p { font-size: clamp(1.8rem, 5.2vw, 3.3rem); }
.quote figcaption { margin-top: 1.4rem; font: 600 .78rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.prog { display: none; }
@media (min-width: 1024px) and (min-height: 640px) {   /* needs ~590px of height; shorter windows keep the normal vertical stack */
  html.js:not(.static) .press { height: 300vh; padding: 0; }
  html.js:not(.static) .press .stage { position: sticky; top: 0; z-index: 10; height: 100vh; overflow: clip; display: flex; }   /* sticky makes a stacking context: lift it so quotes stay above the strings */
  html.js:not(.static) .press .inner { flex: 1; min-width: 0; display: flex; flex-direction: column; max-width: none; margin: 0; padding: var(--nav-h) 0 0; }   /* min-width:0 keeps it as wide as the stage, not as wide as the travelling row */
  html.js:not(.static) .press .bow.edge { top: calc(var(--nav-h) + 16px); left: var(--gut); right: var(--gut); }
  html.js:not(.static) .press .rowclip { flex: 1; display: flex; align-items: center; overflow: hidden; }
  html.js:not(.static) .press .row { display: flex; align-items: center; gap: clamp(72px, 9vw, 150px); width: max-content; padding: 0 var(--gut); will-change: transform; }
  html.js:not(.static) .press .quote { flex: 0 0 min(66vw, 940px); }
  html.js:not(.static) .press .q-long { flex-basis: min(62vw, 880px); }
  html.js:not(.static) .press .pp-title { flex: 0 0 min(42vw, 600px); }
  html.js:not(.static) .press .prog { display: block; position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(28px, 6vh, 56px); height: 2px; background: rgba(251, 244, 232, .22); z-index: 10; }
  html.js:not(.static) .prog i { display: block; height: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); }
}

/* ---------- repertoire ---------- */
.rep-rows { margin: calc(clamp(80px, 12vw, 180px) * -.35) calc(var(--gut) * -1) clamp(40px, 6vw, 96px); overflow: hidden; display: grid; gap: 0; }
.rrow { display: flex; gap: .5em; width: max-content; padding: 0 var(--gut); font: italic 300 clamp(4.4rem, 14.5vw, 14.5rem)/1.02 var(--serif); letter-spacing: -.02em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.4px var(--mist); }
.rrow:nth-child(2) { -webkit-text-stroke-color: var(--orange); }
.rrow span::after { content: " —"; }
.works { list-style: none; padding: 0; columns: 2 22rem; column-gap: clamp(24px, 5vw, 96px); margin: clamp(28px, 4vw, 56px) 0 clamp(20px, 3vw, 40px); }
.works li { break-inside: avoid; padding: 1rem 0 1.1rem; border-top: 1px solid rgba(203, 212, 255, .28); line-height: 1.45; color: var(--mist); }
.works b { display: block; margin-bottom: .15rem; font: italic 400 clamp(1.5rem, 2.3vw, 2.1rem)/1.1 var(--serif); letter-spacing: -.01em; color: var(--cream); }

@media (min-width: 640px) { .works, .cond ul { max-width: 66%; } }   /* small text keeps clear of the strings */

/* ---------- gallery ---------- */
.gal-grid { max-width: 1560px; margin: clamp(36px, 6vw, 80px) auto clamp(20px, 3vw, 40px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); align-items: start; }
.gal-grid figure { background: var(--deep); }
.g-a { grid-column: 1 / 10; aspect-ratio: 2 / 3; }
.g-b { grid-column: 4 / 13; aspect-ratio: 3 / 2; }
.g-c { grid-column: 1 / 8; aspect-ratio: 3 / 2; }
.g-d { grid-column: 9 / 13; aspect-ratio: 1; margin-top: clamp(0px, 7vw, 120px); }
@media (min-width: 800px) {
  .g-a { grid-column: 1 / 6; grid-row: 1 / 3; }
  .g-b { grid-column: 6 / 13; grid-row: 1; }
  .g-c { grid-column: 6 / 10; grid-row: 2; }
  .g-d { grid-column: 10 / 13; grid-row: 2; margin-top: clamp(0px, 5vw, 80px); }
}

/* ---------- contact + footer ---------- */
.contact { padding-bottom: clamp(72px, 10vw, 150px); }
.mag-wrap { display: inline-block; margin: clamp(26px, 4vw, 64px) 0 0; margin-inline-start: -14px; padding: 14px; }
.mag { display: inline-flex; align-items: center; gap: 1.2rem; padding: .8rem; padding-inline-start: 2.2rem; border-radius: 99px; background: var(--cream); color: var(--cobalt); font: italic 400 clamp(1.5rem, 3.2vw, 2.5rem)/1 var(--serif); text-decoration: none; will-change: transform; }
.mag b { display: grid; place-items: center; width: 2.3em; aspect-ratio: 1; border-radius: 50%; background: var(--orange); color: var(--deep); font: 500 .8em var(--sans); transition: transform .5s var(--ease); }
.mag:hover b { transform: rotate(45deg); }
.foot { position: relative; display: grid; gap: 1.2rem; padding-block: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 40px); padding-inline: var(--gut) calc(var(--gut) + var(--lane)); }
.foot::before { content: ""; position: absolute; inset-inline: var(--gut) calc(var(--gut) + var(--lane)); top: 0; height: 1px; background: currentColor; opacity: .25; }
.foot > * { position: relative; z-index: 10; }
.foot-name { font: italic 400 1.5rem/1 var(--serif); }
.foot ul { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; list-style: none; padding: 0; }
.foot a { display: block; padding: 1rem 0; font: 500 .76rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: .3em; }
.foot-small { font-size: .8rem; color: var(--mist); }

/* ---------- play cursor (fine pointers only) ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 70; display: grid; place-items: center; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--cobalt); box-shadow: 0 0 0 2px var(--cream); color: var(--cream); font: 600 .86rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; pointer-events: none; opacity: 0; transform: translate3d(-200px, -200px, 0) scale(0); }
html:not(.fx) .cursor { display: none; }
html.fx .play { display: none; }
html.fx .tile-media, html.fx .tile-media * { cursor: none; }

/* ---------- small screens ---------- */
@media (max-width: 639px) {
  :root { --lane: 15.5vw; }
  .name { font-size: 12.2vw; }
  .bio-photo, .tile-media, .gal-grid { margin-inline-end: calc(var(--lane) * -1); }
  .hero-photo { width: calc(100% + var(--lane)); margin-inline-end: calc(var(--lane) * -1); }
  .wordmark { font-size: 1.02rem; }
  .nav { gap: .75rem; }
  .menu-btn { padding: .75rem 1rem; }
}
@media (max-width: 759px) {
  .hero { grid-template-rows: auto auto; align-content: end; row-gap: clamp(22px, 4vh, 40px); }
  .hero-text { grid-area: 1 / 1 / 2 / 13; }
  .hero-photo { grid-area: 2 / 5 / 3 / 13; align-self: end; margin-top: 0; }
  .lead, .copy, .bio-photo { grid-column: 1 / -1; }
  .bio-photo { grid-row: auto; }
  .hero-quote { max-width: 28ch; margin-inline-start: 0; }
}

/* ---------- entrance + scroll states (only with JS and motion allowed) ---------- */
html.js:not(.static) .ch { opacity: 0; transform: translateY(62%) rotate(6deg); transform-origin: 0 100%; }
html.js:not(.static) .hero.go .ch { opacity: 1; transform: none; transition: transform 1.1s var(--ease) calc(var(--b) + var(--i) * 35ms), opacity .5s ease calc(var(--b) + var(--i) * 35ms); }
.l1 { --b: .3s; } .l2 { --b: .42s; }
html.js:not(.static) .after { opacity: 0; transform: translateY(18px); }
html.js:not(.static) .hero.go .after { opacity: 1; transform: none; transition: opacity .9s ease 1.1s, transform 1.1s var(--ease) 1.1s; }
html.js:not(.static) .frame { clip-path: inset(0 101% 0 0); }
html.js:not(.static) .frame img { transform: scale(1.1); }
html.js:not(.static) .hero.go .frame { clip-path: inset(0 0 0 0); transition: clip-path 1.2s var(--ease) .9s; }
html.js:not(.static) .hero.go .frame img { transform: none; transition: transform 1.9s var(--ease) .9s; }

html.js:not(.static) .bow::before { transform: scaleX(0); }
html.js:not(.static) .bow::after { transform: translateX(-100%); }
html.js:not(.static) .in > .bow::before, html.js:not(.static) .go .bow::before { animation: bowline .9s var(--ease) both; }
html.js:not(.static) .in > .bow::after, html.js:not(.static) .go .bow::after { animation: bowtip .9s var(--ease) both; }
html.js:not(.static) .hero.go .bow::before { animation-duration: 1.3s; animation-delay: .15s; }
html.js:not(.static) .hero.go .bow::after { animation-duration: 1.3s; animation-delay: .15s; }

html.js:not(.static) .wipe { clip-path: inset(-8% 110% -8% -8%); transition: clip-path .9s var(--ease) var(--d, 0s); }
html.js:not(.static) .in .wipe:not([data-reveal]), html.js:not(.static) .wipe[data-reveal].in { clip-path: inset(-8% -8% -8% -8%); }
html.js:not(.static) .wipe img { transform: scale(1.14); }
html.js:not(.static) .in .wipe:not([data-reveal]) img, html.js:not(.static) .wipe[data-reveal].in img { transform: none; transition: transform 1.7s var(--ease) var(--d, 0s); }
html.js:not(.static) .rise, html.js:not(.static) .cap { opacity: 0; transform: translateY(18px); }
html.js:not(.static) .in .rise, html.js:not(.static) .in .cap { opacity: 1; transform: none; transition: opacity .8s ease calc(var(--d, 0s) + .35s), transform 1s var(--ease) calc(var(--d, 0s) + .35s); }
html.js:not(.static) .orch li { opacity: 0; transform: translate3d(var(--sx), 0, 0); }
html.js:not(.static) .orch li.in { opacity: 1; transform: none; transition: opacity .8s ease, transform 1.2s var(--ease); }

/* ============================================================
   INNER-PAGE KIT: shared by home and the 7 inner pages. Reuse these classes; do not redefine them in css/<page>.css.
   Section colours  .sec + .cobalt | .deep | .bone, each with data-bg="cobalt|deep|bone" (data-bg drives the nav and string colour).
   Wrappers         .inner (max 1560px, centred); first child <i class="bow edge" aria-hidden="true"></i> draws the bow line.
                    .bio on a section turns its .inner into the 12-column grid used by .label, .lead, .copy and .bio-photo.
   Type             .label (small caps), .big (section title), .mega (headline), .lead (large sentence), .copy (38ch body column),
                    .arrow-link (add <span aria-hidden="true">→</span>), .role, .foot-small.
   Reveals          JS adds .in to each [data-reveal] element once it is ~20% into the viewport. .wipe (clip-path stroke) and
                    .rise / .cap (fade up) need a [data-reveal] ancestor (.wipe may also carry data-reveal itself); --d:.1s staggers.
                    .bow.edge must be a direct child of the [data-reveal] element. Everything is visible without JS, with ?static=1
                    and with reduced motion. Animate only transform, opacity, clip-path.
   Images           .ph frame (overflow hidden, deep fill) around an <img> that carries width/height; loading="lazy" below the fold.
   Tiles            .tile > a > .tile-media.wipe (img + .play) + h3.cap + p.cap.sub; script.js adds the play cursor and tilt to .tile-media.
   Lists            .works (two-column list, <b> = composer), .orch (huge alternating rows; each li needs data-reveal and style="--sx:-14vw|14vw"),
                    .quote (figure > blockquote + figcaption), .mag-wrap > a.mag (magnetic pill button), .cond ul (name list).
   Page hero        section.sec.cobalt.page-hero[data-bg="cobalt"] > .inner[data-reveal] > i.bow.edge + h1.big.wipe + p.intro.wipe.
   STRING LANE      the four strings run at ~72% of the width from 640px up (phones: right-hand lane, already padded by --lane).
                    Text wider than 640px must stay out of that lane (max-width ~66% of .inner) or sit on a surface above the
                    strings (z-index 10, see the layer list above). ============================================================ */
.page-hero { min-height: clamp(360px, 58svh, 640px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--nav-h) + clamp(32px, 6vw, 96px)); padding-bottom: clamp(56px, 8vw, 120px); }
.page-hero .inner { width: 100%; }
.page-hero .big, .page-hero .intro { position: relative; z-index: 10; }
.page-hero .intro { max-width: 46ch; margin-top: clamp(20px, 3vw, 40px); font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.5; color: var(--mist); }
@media (min-width: 640px) {
  .page-hero .inner > :where(:not(.bow)) { max-width: 66%; }
  .page-hero .intro { max-width: min(46ch, 66%); }
}
.nav a.l[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--orange); }
.foot a[aria-current="page"] { color: var(--cream); text-decoration: underline; text-underline-offset: .3em; }

/* ---------- site tools (tools.js): accessibility button bottom left, WhatsApp bottom right, consent notice between them.
   Fixed layer 58: under the nav (60), above the mobile menu (55); hidden while that menu is open. ---------- */
.tools { position: fixed; inset: auto 0 0 0; z-index: 58; pointer-events: none; }
.tools > * { pointer-events: auto; }
html.menu-open .tools { display: none; }
.tool { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 2px solid var(--deep); border-radius: 50%; background: var(--cream); color: var(--deep); cursor: pointer; box-shadow: 0 6px 18px rgba(14, 26, 94, .28); transition: transform .3s var(--ease); }
.tool:hover { transform: scale(1.07); }
.tool:active { transform: scale(.95); }
.tool svg { width: 28px; height: 28px; fill: currentColor; }
.tool-a11y { left: max(16px, env(safe-area-inset-left)); }
.tool-wa { right: max(16px, env(safe-area-inset-right)); background: #0E7A4B; border-color: #fff; color: #fff; }
.tool-wa svg { width: 32px; height: 32px; }
.tool-wa .wa-bubble { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.tools :focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; box-shadow: 0 0 0 3px var(--deep); }
.a11y-panel, .consent { position: absolute; background: var(--deep); color: var(--cream); border: 1px solid rgba(203, 212, 255, .35); box-shadow: 0 18px 48px rgba(5, 10, 45, .45); }
.a11y-panel[hidden], .consent[hidden] { display: none; }
.a11y-panel { left: max(16px, env(safe-area-inset-left)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px); display: grid; width: min(280px, calc(100vw - 32px)); padding: .5rem; max-height: calc(100vh - var(--nav-h) - 100px); max-height: calc(100dvh - var(--nav-h) - 100px); overflow-y: auto; overscroll-behavior: contain; }   /* short screens: the list scrolls and stays below the nav */
.a11y-panel { z-index: 2; }   /* opened on purpose: it lies over the consent notice, and closes on Escape or a press outside */
.a11y-h, .consent-h { font: italic 400 1.35rem/1.1 var(--serif); }
.a11y-h { padding: .6rem .7rem .5rem; }
.a11y-panel button { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: .5rem .7rem; border: 0; border-top: 1px solid rgba(203, 212, 255, .22); background: none; color: inherit; font: 500 .95rem/1.2 var(--sans); text-align: start; cursor: pointer; }
.a11y-panel button:hover { background: rgba(203, 212, 255, .12); }
.a11y-panel button b { font: 600 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.a11y-panel button[aria-pressed="true"] b { color: var(--orange); }
.a11y-reset { color: var(--mist); }
.a11y-link { display: block; padding: .8rem .7rem .6rem; border-top: 1px solid rgba(203, 212, 255, .22); font-size: .9rem; color: var(--mist); text-underline-offset: .25em; }
.consent { left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); width: min(560px, calc(100vw - 168px)); padding: 1.1rem 1.2rem 1.2rem; transform: translateX(-50%); max-height: calc(100vh - var(--nav-h) - 32px); max-height: calc(100dvh - var(--nav-h) - 32px); overflow-y: auto; overscroll-behavior: contain; }
.consent-p { margin-top: .5rem; font-size: .92rem; line-height: 1.5; color: var(--mist); }
.consent-p a { color: var(--cream); text-underline-offset: .25em; }
.consent-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1rem; }
.consent-btns button { min-height: 46px; padding: .6rem 1rem; border: 2px solid var(--cream); border-radius: 99px; background: var(--cream); color: var(--deep); font: 600 .8rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; cursor: pointer; }   /* both choices carry the same weight */
.consent-btns button:hover { background: var(--orange); border-color: var(--orange); }
@media (max-width: 719px) {
  .consent { left: 12px; right: 12px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 64px); width: auto; transform: none; max-height: calc(100vh - var(--nav-h) - 100px); max-height: calc(100dvh - var(--nav-h) - 100px); }   /* phones: sits above the two round buttons */
}
.foot button { display: block; padding: 1rem 0; border: 0; background: none; color: inherit; font: 500 .76rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; cursor: pointer; }
.foot button:hover { text-decoration: underline; text-underline-offset: .3em; }
.foot { padding-block-end: calc(clamp(28px, 4vw, 40px) + 68px); }   /* the last line of the footer clears the two round buttons */

/* accessibility options (classes set on <html> by tools.js) */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }
@media (max-width: 379px) { html.a11y-text-1 { font-size: 108%; } html.a11y-text-2 { font-size: 115%; } }   /* narrowest phones: the nav still fits */
@media (max-width: 339px) { html.a11y-text-1 { font-size: 105%; } html.a11y-text-2 { font-size: 110%; } }
html.a11y-contrast { --cobalt: #0A1A6B; --deep: #050B33; --cream: #FFFFFF; --mist: #FFFFFF; --bone: #FFFFFF; --ink: #000000; --orange: #FFD08A; }
html.a11y-links a:not(.tool):not(.mag) { text-decoration: underline !important; text-underline-offset: .22em; }

/* plain-text pages (privacy, accessibility): one readable column, clear of the strings */
.doc .inner { display: grid; gap: clamp(28px, 4vw, 48px); }
.doc-block { position: relative; z-index: 10; display: grid; gap: .9rem; max-width: 62ch; }
.doc-block h2 { font: 400 clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--serif); letter-spacing: -.015em; }
.doc-block ul { display: grid; gap: .5rem; padding-inline-start: 1.2rem; }
.doc-block a { color: var(--cobalt); text-underline-offset: .22em; overflow-wrap: anywhere; }
.doc-block button { justify-self: start; min-height: 46px; padding: .6rem 1.4rem; border: 2px solid var(--cobalt); border-radius: 99px; background: var(--cobalt); color: var(--cream); font: 600 .8rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; cursor: pointer; }
@media (min-width: 640px) { .doc-block { max-width: min(62ch, 66%); } }

/* ---------- Russian and Hebrew pages ----------
   Hebrew has no italic: a slanted Hebrew letter is a browser fake, so emphasis there rests on colour and weight alone. */
html[lang="he"] body, html[lang="he"] body * { font-style: normal !important; }
html[lang="he"] :is(.big, .mega, .name, .lead) { letter-spacing: -.01em; }
html[lang="ru"] .name { font-size: clamp(2.2rem, 11.4vw, 11rem); }   /* "Кагановский" is a letter longer and wider than the Latin name */
@media (max-width: 639px) { html[lang="ru"] .name { font-size: 10.2vw; } }

/* Right to left (Hebrew). Spacing above is written with logical properties, so the layout mirrors by itself; these lines mirror
   what has a direction of its own: strokes, wipes, slides (script.js mirrors the strings and the scroll travel).
   :where() keeps each selector exactly as specific as the rule it mirrors, so the revealed states still win.
   Page files (css/<page>.css) end with the same kind of lines for their own pieces.
   The two round buttons keep their sides: accessibility left, WhatsApp right. */
:where([dir="rtl"]) .bow { transform: scaleX(-1); }
:where([dir="rtl"]) .arrow-link::after, :where([dir="rtl"]) .nav a.l::after { transform-origin: 100% 50%; }
:where([dir="rtl"]) .arrow-link:hover span { transform: translateX(-6px); }
:where([dir="rtl"]) .mag:hover b { transform: rotate(-45deg); }
html.js:not(.static):where([dir="rtl"]) .prog i { transform-origin: 100% 50%; }
html.js:not(.static):where([dir="rtl"]) .frame { clip-path: inset(0 0 0 101%); }
html.js:not(.static):where([dir="rtl"]) .wipe { clip-path: inset(-8% -8% -8% 110%); }
html.js:not(.static):where([dir="rtl"]) .orch li { transform: translate3d(calc(var(--sx) * -1), 0, 0); }

/* ---------- reduced motion / ?static=1: nothing moves ---------- */
html.static *, html.static *::before, html.static *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }