/* ============================================================================
   LINDA RUAN — Design system
   Two worlds: PAPER (classical) ⇄ NIGHT (contemporary).
   Ink + accent are drawn from the logo (deep olive + coral).
   Type: Schibsted Grotesk (display/UI/body) · Newsreader italic (editorial accents).
   Theme is driven by html[data-world]; every colour is a variable, so the whole
   page re-themes in one move. Content is fully readable without JS.
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..800;1,400..600&family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400..500&family=Cinzel:wght@400..600&display=swap');

/* ------------------------------------------------------------------ TOKENS */
:root{
  --serif:"Newsreader", Georgia, serif;
  --sans:"Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --logo:"Cinzel", "Newsreader", Georgia, serif;   /* echoes the logo wordmark */

  /* fluid type scale (note: clamp math needs spaces around + and -) */
  --step--1:clamp(.8rem, .77rem + .14vw, .88rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.1rem);
  --step-1: clamp(1.18rem, 1.08rem + .5vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.1rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.4vw, 4.4rem);
  --step-5: clamp(3.2rem, 2rem + 6.4vw, 7rem);

  --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem; --sp-8:2rem;
  --sp-12:3rem; --sp-16:4rem; --sp-24:6rem; --sp-32:8rem;

  --container:78rem;
  --radius:4px; --radius-lg:16px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-smooth:cubic-bezier(.65,0,.35,1); /* smooth in-out for the takeover morph */
  --spring:cubic-bezier(.30,1.80,.45,1);   /* playful overshoot (bouncier) */
  --dur:460ms;
  --paper:#efe7dc;   /* fixed light tone for the classical panel (never re-themes) */
  --z-nav:100; --z-overlay:200; --z-toast:1000;

  /* PAPER world (classical) — default */
  --bg:#efe7dc; --bg-2:#e7dccd; --surface:#f7f1e7;
  --ink:#2c2517; --muted:#837a66; --border:#dccfba;
  --accent:#c0443a; --accent-2:#a8392f; --accent-ink:#fff; --accent-soft:rgba(192,68,58,.10);
  --glow:rgba(192,68,58,.24);
  --shadow:0 1px 2px rgba(60,40,30,.05),0 18px 40px rgba(70,45,30,.09);
  --shadow-lg:0 2px 6px rgba(60,40,30,.07),0 40px 80px rgba(70,45,30,.15);
  --label-c:#241d10; --label-x:#f6eee2;
}
html[data-world="contemporary"]{
  /* NIGHT world — deep violet (more purple); coral glows against it */
  --bg:#1c1442; --bg-2:#261c54; --surface:#2e2263;
  --ink:#f2ead9; --muted:#b0a4cc; --border:#3e3270;
  --accent:#f0928a; --accent-2:#f4a79e; --accent-ink:#160f1e; --accent-soft:rgba(240,146,138,.14);
  --glow:rgba(240,146,138,.34);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.5);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 44px 90px rgba(0,0,0,.62);
}

/* ------------------------------------------------------------------ RESET */
*,*::before,*::after{box-sizing:border-box}*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);font-size:var(--step-0);line-height:1.62;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;line-height:1.02;letter-spacing:-.02em}
p{text-wrap:pretty}

/* ------------------------------------------------------------------ LAYOUT */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-6)}
.section{padding-block:clamp(var(--sp-16),9vw,var(--sp-32))}
.section--dark{background:var(--bg-2);transition:background-color var(--dur) var(--ease)}
.measure{max-width:60ch}
.center{text-align:center;margin-inline:auto}
.rule{height:1px;background:var(--border);border:0;transition:background-color var(--dur)}
.mt-8{margin-top:var(--sp-8)}

/* eyebrow / labels */
.eyebrow{font-family:var(--sans);font-size:var(--step--1);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:1.7em;height:1px;background:currentColor;opacity:.55}
.eyebrow--center{justify-content:center}

.section-title{font-family:var(--logo);font-weight:600;font-size:var(--step-3);letter-spacing:.02em;text-transform:uppercase;margin-top:var(--sp-4)}
.section-lead{font-family:var(--serif);color:var(--muted);font-size:var(--step-1);margin-top:var(--sp-4);max-width:46ch;line-height:1.5}
.editorial{font-family:var(--serif)}
.italic{font-style:italic}

/* ------------------------------------------------------------------ BUTTONS / LINKS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;
  padding:.85rem 1.5rem;font-family:var(--sans);font-size:var(--step--1);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;border-radius:999px;
  transition:transform var(--dur) var(--ease),background-color var(--dur),color var(--dur),border-color var(--dur),box-shadow var(--dur)}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--accent);color:var(--accent-ink)}
.btn--solid:hover{filter:brightness(1.06);box-shadow:var(--shadow)}
.btn--ghost{border:1px solid var(--border);color:var(--ink)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}

.arrow{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-size:var(--step--1);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--border);padding-bottom:3px;transition:color var(--dur),border-color var(--dur)}
.arrow svg{transition:transform .45s var(--spring)}
.arrow:hover{color:var(--accent);border-color:var(--accent)}
.arrow:hover svg{transform:translateX(6px)}

/* external-link cue: a stout, rounded up-right arrow appended to any off-site link
   (added automatically in site.js). Signals "this leaves the site." */
.exta{width:.82em;height:.82em;display:inline-block;vertical-align:-.08em;margin-left:.18em;flex:none;
  color:var(--accent);opacity:.85;transition:transform .35s var(--spring),opacity var(--dur)}
.arrow .exta{margin-left:0;color:inherit;opacity:1}
a:hover .exta{transform:translate(2px,-2px);opacity:1}
.substack-lead{font-family:var(--serif);font-style:italic;color:var(--muted);margin-right:.55rem}
[data-substack]{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem}

/* ------------------------------------------------------------------ NAV */
.nav{position:sticky;top:0;z-index:var(--z-nav);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid transparent;transition:background-color var(--dur),border-color var(--dur)}
.nav.is-scrolled{border-bottom-color:var(--border)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
  min-height:66px;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-6)}
.nav__logo{display:inline-flex;align-items:center}
.nav__logo img{height:52px;width:auto;transition:filter var(--dur)}
html[data-world="contemporary"] .nav__logo img{filter:brightness(0) invert(1)}
.nav__right{display:flex;align-items:center;gap:var(--sp-6)}
.nav__links{display:flex;align-items:center;gap:var(--sp-6);list-style:none;padding:0}
.nav__links a{font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);position:relative;padding-block:.4rem;transition:color var(--dur)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--accent);transition:width var(--dur) var(--ease)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--ink)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{width:100%}

.toggle{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.toggle button{min-height:34px;padding:0 .8rem;border-radius:999px;font-family:var(--sans);font-size:.66rem;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color var(--dur),background-color var(--dur)}
.toggle button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}

.nav__burger{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.nav__burger span,.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;width:22px;height:2px;background:var(--ink);transition:transform var(--dur) var(--ease),top var(--dur) var(--ease)}
.nav__burger span{position:relative}
.nav__burger span::before{top:-7px}.nav__burger span::after{top:7px}
.nav.is-open .nav__burger span{background:transparent}
.nav.is-open .nav__burger span::before{top:0;transform:rotate(45deg)}
.nav.is-open .nav__burger span::after{top:0;transform:rotate(-45deg)}

@media (max-width:920px){
  .nav__burger{display:inline-flex}
  /* open menu: make the bar solid too, so the top strip matches the panel */
  .nav.is-open{background-color:var(--bg);border-bottom-color:transparent}
  .nav__links{position:fixed;inset:66px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--border);padding:var(--sp-2) var(--sp-6) var(--sp-6);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity var(--dur),transform var(--dur)}
  .nav.is-open .nav__links{opacity:1;transform:none;pointer-events:auto}
  /* full-width dividers between items (on the block link, not the inline text) */
  .nav__links a{display:block;padding-block:var(--sp-4);font-size:var(--step-1)}
  .nav__links li+li a{border-top:1px solid var(--border)}
  .nav__links a::after{display:none}
  .nav__right{gap:var(--sp-3)}
}
@media (max-width:520px){ .toggle button{padding:0 .6rem;font-size:.6rem} .nav__logo img{height:44px} }

/* ------------------------------------------------------------------ SOCIAL ICON ROW */
.social{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border:1px solid var(--border);border-radius:999px;color:var(--muted);
  transition:color var(--dur),border-color var(--dur),background-color var(--dur),transform var(--dur) var(--ease)}
.social a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.social a[aria-disabled="true"]{opacity:.45;pointer-events:none}
.social svg{width:20px;height:20px;display:block}

/* ------------------------------------------------------------------ HERO (signature) */
.hero{display:flex;flex-direction:column}
.hero__head{text-align:center;padding:clamp(1.4rem,4vh,2.6rem) var(--sp-6) clamp(1rem,3vh,1.6rem)}
.hero__name{font-family:var(--logo);font-weight:600;font-size:clamp(2.6rem, 1.6rem + 4.6vw, 5.6rem);line-height:1.02;letter-spacing:.05em;text-transform:uppercase;margin:.5rem 0}
.hero__tag{font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--step-2);color:var(--accent)}
.hero__prompt{margin-top:var(--sp-4);font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* height drives the size so the aspect ratio (and the crop) stay constant at every
   window size; width follows via aspect-ratio, capped at max-width and centred. */
.stage{position:relative;height:min(84vh,47rem);aspect-ratio:1.4;width:auto;max-width:66rem;min-height:20rem;margin:0 auto;
  border-radius:0;overflow:hidden;background:transparent}
.side{position:absolute;inset:0;padding:0;border:0;background:none;cursor:pointer;
  transition:clip-path .8s var(--ease-smooth);backface-visibility:hidden;transform:translateZ(0)}
/* 4-point polygons (last point duplicated) so the wedge can morph to full-bleed */
.side--classical{clip-path:polygon(0 0,100% 0,0 100%,0 100%)}          /* top-left wedge */
.side--contemporary{clip-path:polygon(100% 0,100% 100%,0 100%,100% 0)} /* bottom-right wedge */
/* TAKEOVER: the chosen side expands to fill; the other collapses to an edge */
.stage[data-active="classical"] .side--classical{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);z-index:4}
.stage[data-active="classical"] .side--contemporary{clip-path:polygon(100% 0,100% 100%,100% 100%,100% 0)}
.stage[data-active="contemporary"] .side--contemporary{clip-path:polygon(100% 0,100% 100%,0 100%,0 0);z-index:4}
.stage[data-active="contemporary"] .side--classical{clip-path:polygon(0 0,100% 0,0 0,0 0)}
.stage[data-active] .seam{opacity:0;transition:opacity .2s var(--ease) 0s}   /* vanishes fast on takeover */
/* TAKEOVER REVEAL: the chosen side pulls back from the tight diptych crop to a
   waist-up view. background-size stays a single (width-based) % so it tweens
   smoothly from the split state, and 100% fills the frame width (no side bars)
   while the top-biased position keeps the head in and shows head-to-waist. */
.stage[data-active="classical"] .side--classical .side__img,
.stage[data-active="contemporary"] .side--contemporary .side__img{background-size:100%;background-position:50% 8%}
.stage[data-active] .side__img::after{opacity:0}   /* drop the crop-fade once the full shot is shown */
/* fill the reveal's surrounding space with the photo's OWN studio backdrop, then
   fade to the page colour at the edges, so the portrait melts into the site
   rather than sitting in a visible mat. Solid band (26-74%) spans the shot. */
.stage[data-active="classical"]{background:linear-gradient(90deg,var(--bg) 0%,#c6cdd8 26%,#c6cdd8 74%,var(--bg) 100%)}
.stage[data-active="contemporary"]{background:linear-gradient(90deg,var(--bg) 0%,#241a54 26%,#241a54 74%,var(--bg) 100%)}
.side__img{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;backface-visibility:hidden;will-change:transform,background-size;
  transition:transform .7s var(--spring),filter var(--dur),background-size .8s var(--ease-smooth),background-position .8s var(--ease-smooth)}
/* both sides share a gentle grade so the diptych reads as one series */
.side--classical .side__img{background-image:url(../img/hero-classical.jpg);background-size:112%;background-position:50% 12%;
  filter:sepia(.09) saturate(.9) brightness(1.03) contrast(.98)}
.side--contemporary .side__img{background-image:url(../img/hero-contemporary.jpg);background-size:145%;background-position:2% 9%;
  filter:saturate(.96) contrast(1.01)}
.side__img::after{content:"";position:absolute;inset:0;transition:opacity .8s var(--ease-smooth)}
/* light fade of the classical studio grey — fixed paper tone so it never turns purple in night mode */
.side--classical .side__img::after{background:linear-gradient(152deg, var(--paper) 0%, transparent 30%)}
.side--contemporary .side__img::after{background:linear-gradient(315deg,rgba(10,7,16,.66),transparent 46%)}
.side__label{position:absolute;z-index:3;max-width:58%}
.side--classical .side__label{top:6%;left:6%;color:var(--label-c)}
.side--contemporary .side__label{bottom:6%;right:6%;text-align:right;color:var(--label-x)}
.side__tag{display:block;font-family:var(--sans);font-weight:700;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1;letter-spacing:-.02em}
.side__desc{display:block;font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.6vw,1.3rem);margin-top:.2rem}
.side--classical .side__desc{color:#a8392f}
.side--contemporary .side__desc{color:#f4a79e}
.side__enter{display:inline-block;margin-top:.7rem;font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.85;transition:letter-spacing .5s var(--spring),transform .5s var(--spring)}
.side__enter::after{content:" →"}
.seam{position:absolute;inset:0;z-index:2;pointer-events:none;width:100%;height:100%;opacity:1;
  transition:opacity .4s var(--ease) .5s}   /* reappears only after the split has re-formed */
.seam line{stroke:var(--accent);stroke-width:2;opacity:.9}
.stage:not([data-active]):hover .side:not(:hover) .side__img{filter:grayscale(.5) brightness(.72)}
.stage:not([data-active]) .side:hover .side__img{transform:scale(1.06)}
.side:hover .side__enter{letter-spacing:.34em;transform:translateX(4px)}
.side:focus-visible{outline:2px solid var(--accent);outline-offset:-6px}
@media (max-width:720px){
  .hero{min-height:0}
  .stage{height:auto;aspect-ratio:3/4;width:100%;max-width:none;max-height:80vh;min-height:26rem}
  .side__tag{font-size:var(--step-2)}
  /* taller, near-square frame → the full portrait fills more of the width */
  .stage[data-active="classical"] .side--classical .side__img,
  .stage[data-active="contemporary"] .side--contemporary .side__img{background-size:82%}
  /* photo is near full-width on mobile, so widen the backdrop band to its edges */
  .stage[data-active="classical"]{background:linear-gradient(90deg,var(--bg) 0%,#c6cdd8 8%,#c6cdd8 92%,var(--bg) 100%)}
  .stage[data-active="contemporary"]{background:linear-gradient(90deg,var(--bg) 0%,#241a54 8%,#241a54 92%,var(--bg) 100%)}
}

/* ------------------------------------------------------------------ SECTION HEAD */
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);margin-bottom:var(--sp-12)}
.sec-head__text{max-width:46ch}

/* ------------------------------------------------------------------ HELLO */
.hello__lead{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.5;max-width:46ch;margin-top:var(--sp-6)}
.hello__lead b{color:var(--accent);font-weight:400;font-style:italic}
/* per-world mission beat: the statement you land on after entering a world.
   soft accent-glow gradient over the deep tone, matching the site palette. */
.mission-beat{text-align:center;padding-block-start:clamp(var(--sp-8),4.5vw,var(--sp-16));background:radial-gradient(130% 130% at 50% -15%, var(--accent-soft), transparent 60%), var(--bg-2);transition:background-color var(--dur) var(--ease)}
.mission{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.4rem, 1.05rem + 1.3vw, 2.05rem);line-height:1.5;max-width:50ch;margin:var(--sp-4) auto 0;color:var(--ink)}

/* ------------------------------------------------------------------ CONCERTS */
.concerts{display:grid;gap:0;margin-top:var(--sp-4)}
.concert{display:grid;grid-template-columns:8.5rem 1fr auto;gap:var(--sp-6);align-items:center;
  padding:var(--sp-6) 0;border-top:1px solid var(--border);position:relative}
.concert:last-child{border-bottom:1px solid var(--border)}
.concert::before{content:"";position:absolute;left:-1rem;top:0;bottom:0;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform var(--dur) var(--ease)}
.concert:hover::before{transform:scaleY(1)}
.concert__day{font-family:var(--sans);font-weight:700;font-size:var(--step-2);line-height:1}
.concert__monthyear{font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}
.concert__main{min-width:0}
.concert__world{display:inline-block;font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:.2rem .6rem;border-radius:999px;margin-bottom:.55rem}
.concert__world--classical{color:var(--accent);background:var(--accent-soft)}
.concert__world--contemporary{color:var(--ink);background:color-mix(in srgb,var(--ink) 9%,transparent)}
.concert__title{font-family:var(--sans);font-weight:600;font-size:var(--step-1)}
.concert__venue{font-family:var(--sans);color:var(--muted);font-size:.82rem;margin-top:.35rem}
.concert__desc{font-family:var(--serif);color:var(--muted);font-size:var(--step-0);margin-top:.5rem;max-width:52ch;line-height:1.45}
.concert__cta{justify-self:end;text-align:right}
.concert__time{font-family:var(--sans);color:var(--muted);font-size:.74rem;font-variant-numeric:tabular-nums;margin-bottom:.5rem}
@media (max-width:720px){
  .concert{grid-template-columns:1fr;gap:var(--sp-3)}
  .concert__cta{justify-self:start;text-align:left}
  .concert__day{display:inline}.concert__monthyear{display:inline;margin-left:.5rem}
}

/* ------------------------------------------------------------------ CARDS / GRID */
.grid{display:grid;gap:var(--sp-6)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid--3,.grid--2{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-8);position:relative;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .6s var(--spring),box-shadow var(--dur),border-color var(--dur),background-color var(--dur)}
.card:hover{transform:translateY(-9px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.card__meta{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card__title{font-family:var(--sans);font-weight:600;font-size:var(--step-1);margin:var(--sp-3) 0}
.card__body{font-family:var(--serif);color:var(--muted);font-size:var(--step-0);line-height:1.5}
.card__foot{margin-top:auto;padding-top:var(--sp-6)}

/* collaborations — horizontal alternating rows */
.collabs{display:grid;gap:clamp(var(--sp-12),6vw,var(--sp-24))}
.collab{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.collab:nth-child(even) .collab__visual{order:2}
.collab__visual{aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--bg-2)}
.collab__visual img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease)}
.collab:hover .collab__visual img{transform:scale(1.03)}
.collab__ph{width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:var(--sp-6);
  background:radial-gradient(120% 90% at 30% 20%,var(--accent-soft),transparent 60%),var(--bg-2)}
.collab__ph span{font-family:var(--serif);font-style:italic;font-size:var(--step-2);color:var(--accent);opacity:.8}
.collab__name{font-family:var(--sans);font-weight:700;font-size:var(--step-3);letter-spacing:-.02em}
.collab__role{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:.6rem 0 var(--sp-4)}
.collab__blurb{font-family:var(--serif);color:var(--muted);font-size:var(--step-1);line-height:1.55;max-width:46ch}
.collab__foot{margin-top:var(--sp-6)}
@media (max-width:760px){
  .collab{grid-template-columns:1fr;gap:var(--sp-6)}
  .collab:nth-child(even) .collab__visual{order:0}
  .collab__visual{aspect-ratio:16/10;max-height:22rem}
}

/* ------------------------------------------------------------------ VIDEO */
.video__frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:#000;border:1px solid var(--border);box-shadow:var(--shadow)}
.video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__poster{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;background:linear-gradient(160deg,#241830,#0a0710)}
.video__poster .play{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);transition:transform var(--dur) var(--ease)}
.video__poster:hover .play{transform:scale(1.08)}
.video__meta{margin-top:var(--sp-4);display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4)}
.video__title{font-family:var(--sans);font-weight:600;font-size:var(--step-1)}
.video__note{font-family:var(--sans);color:var(--muted);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

/* ------------------------------------------------------------------ FOOTER (compact, horizontal) */
.footer{background:var(--bg-2);border-top:1px solid var(--border);padding-block:var(--sp-8);transition:background-color var(--dur),border-color var(--dur)}
.footer__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-6) var(--sp-8)}
.footer__id{display:flex;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap}
.footer__brand{font-family:var(--logo);font-weight:600;font-size:var(--step-1);letter-spacing:.05em;text-transform:uppercase}
.footer__tag{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:.9rem}
.footer__nav{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-6)}
.footer__nav a{font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);transition:color var(--dur)}
.footer__nav a:hover{color:var(--accent)}
.footer .social a{width:38px;height:38px}
.footer .social svg{width:18px;height:18px}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-4);margin-top:var(--sp-6);padding-top:var(--sp-6);
  border-top:1px solid var(--border);font-family:var(--sans);color:var(--muted);font-size:.72rem}
@media (max-width:720px){.footer__inner{flex-direction:column;align-items:flex-start;gap:var(--sp-6)}}

/* ------------------------------------------------------------------ INTERIOR PAGE HEADER */
.page-hero{padding-block:clamp(var(--sp-16),12vw,var(--sp-24)) var(--sp-12)}
.page-hero__title{font-family:var(--logo);font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  font-size:var(--step-4);margin-top:var(--sp-4);line-height:1.04}
.page-hero__lead{font-family:var(--serif);color:var(--muted);font-size:var(--step-1);margin-top:var(--sp-6);max-width:52ch;line-height:1.5}
.page-hero__lead b{color:var(--accent);font-weight:400;font-style:italic}
.page-jump{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-top:var(--sp-8)}
.page-jump a{font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);padding-bottom:4px;border-bottom:1px solid var(--border);transition:color var(--dur),border-color var(--dur)}
.page-jump a:hover{color:var(--accent);border-color:var(--accent)}
section[id]{scroll-margin-top:84px}

/* ------------------------------------------------------------------ STORY (About) */
.story{display:grid;gap:clamp(var(--sp-16),9vw,var(--sp-32))}
.story__panel{display:grid;grid-template-columns:0.95fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.story__panel:nth-child(even) .story__visual{order:2}
.story__visual{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);aspect-ratio:4/5;background:var(--bg-2)}
.story__visual img{width:100%;height:100%;object-fit:cover;transition:transform 800ms var(--ease)}
.story__panel:hover .story__visual img{transform:scale(1.03)}
.story__num{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.story__title{font-family:var(--logo);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:var(--step-3);margin:var(--sp-3) 0 var(--sp-6)}
.story__body{font-family:var(--serif);font-size:var(--step-1);line-height:1.6;color:var(--fg);max-width:46ch}
.story__body p+p{margin-top:var(--sp-4)}
.story__body b{color:var(--accent);font-weight:400;font-style:italic}
.story__body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:opacity var(--dur)}
.story__body a:hover{opacity:.7}
@media (max-width:760px){
  .story__panel{grid-template-columns:1fr;gap:var(--sp-6)}
  .story__panel:nth-child(even) .story__visual{order:0}
  .story__visual{aspect-ratio:16/11;max-height:24rem}
}

/* ------------------------------------------------------------------ FORMAL BIO */
.bio{scroll-margin-top:5rem}
.bio__wrap{max-width:44rem;margin-inline:auto}
.bio__text{font-family:var(--serif);font-size:var(--step-1);line-height:1.65;color:var(--fg)}
.bio__text p{margin-top:var(--sp-4)}
.bio__text p:first-child{margin-top:var(--sp-6)}
.bio__meta{margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--border);
  font-family:var(--sans);font-size:.82rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:var(--sp-6)}
.bio__meta b{color:var(--fg);font-weight:600}

/* ------------------------------------------------------------------ MEDIA: GALLERY */
.gallery{columns:3 17rem;column-gap:var(--sp-4)}
.gallery figure{break-inside:avoid;margin:0 0 var(--sp-4)}
.gallery img{width:100%;display:block;border-radius:var(--radius-lg);border:1px solid var(--border);transition:transform 600ms var(--ease)}
.gallery a{display:block;overflow:hidden;border-radius:var(--radius-lg)}
.gallery a:hover img{transform:scale(1.03)}
.gallery figcaption{font-family:var(--sans);font-size:.7rem;letter-spacing:.02em;color:var(--muted);margin-top:.4rem}
.credit{font-family:var(--sans);font-size:.74rem;color:var(--muted);margin-top:var(--sp-8);font-style:normal}

/* ------------------------------------------------------------------ MEDIA: SAMPLE PROGRAMS */
.programs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-6)}
@media (max-width:760px){.programs{grid-template-columns:1fr}}
.program{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-8);
  transition:border-color var(--dur),background-color var(--dur)}
.program__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);padding-bottom:var(--sp-4);border-bottom:1px solid var(--border)}
.program__title{font-family:var(--logo);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:var(--step-2)}
.program__dur{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.program__note{font-family:var(--serif);font-style:italic;color:var(--muted);margin-top:var(--sp-3)}
.program__works{list-style:none;padding:0;margin:var(--sp-4) 0 0}
.program__work{display:flex;justify-content:space-between;gap:var(--sp-6);padding:.6rem 0;border-top:1px solid var(--border)}
.program__work:first-child{border-top:0}
.program__composer{font-family:var(--sans);font-weight:600;font-size:var(--step-0)}
.program__piece{font-family:var(--serif);color:var(--muted);text-align:right;font-size:var(--step-0)}

/* ------------------------------------------------------------------ MEDIA: PRESS KIT */
.epk{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:760px){.epk{grid-template-columns:1fr;gap:var(--sp-8)}}
.epk__list{list-style:none;padding:0;margin:0;display:grid;gap:0}
.epk__list li{display:flex;justify-content:space-between;gap:var(--sp-4);align-items:baseline;padding:var(--sp-4) 0;border-top:1px solid var(--border)}
.epk__list li:last-child{border-bottom:1px solid var(--border)}
.epk__label{font-family:var(--sans);font-weight:600}
.epk__val{font-family:var(--sans);font-size:.82rem;color:var(--muted);text-align:right}

/* ------------------------------------------------------------------ CONTACT */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,5rem);align-items:start}
@media (max-width:760px){.contact{grid-template-columns:1fr;gap:var(--sp-12)}}
.contact__email{display:inline-block;font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.4vw,2.5rem);
  color:var(--accent);border-bottom:1px solid var(--border);padding-bottom:.12em;transition:border-color var(--dur),opacity var(--dur);word-break:break-word}
.contact__email:hover{border-color:var(--accent);opacity:.8}
.contact__note{font-family:var(--serif);color:var(--muted);font-size:var(--step-1);margin-top:var(--sp-6);max-width:36ch;line-height:1.5}
.contact__social{margin-top:var(--sp-8)}

/* ------------------------------------------------------------------ REVEAL ON SCROLL */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal.is-in{opacity:1;transform:none}
html.reveal-fallback .reveal{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}}

/* ------------------------------------------------------------------ CURSOR FOLLOWER
   A small ring that trails the pointer with a little lag + spring, growing over
   interactive things. Pointer-only; hidden on touch and for reduced motion. */
.cursor-dot{position:fixed;top:0;left:0;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--accent);background:transparent;pointer-events:none;z-index:9999;
  opacity:0;will-change:transform;
  transition:width .35s var(--spring),height .35s var(--spring),background-color .3s var(--ease),opacity .3s var(--ease)}
.cursor-dot.is-active{opacity:.9}
.cursor-dot.is-hover{width:52px;height:52px;background:var(--accent-soft)}
@media (hover:none),(pointer:coarse){.cursor-dot{display:none}}
@media (prefers-reduced-motion:reduce){.cursor-dot{display:none}}