/* ============================================================
   Kings Clarinets — first attempt (2026-11-12)
   Built from the bailar.co.uk cinematic design: same bones,
   Debbie's colours. Plum-black room, raspberry light, purple warmth.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --bg:      #140a16;   /* plum-black room                 */
  --bg-2:    #1d1020;   /* lifted plum                     */
  --bg-3:    #27152b;   /* panel                           */
  --ink:     #f6eef1;   /* warm white, a breath of pink    */
  --ink-dim: #e2d4da;   /* softened white                  */
  --muted:   #b9a3b0;   /* dusky mauve (AA on --bg)        */
  --rasp:    #b72a54;   /* logo raspberry — the one strong light */
  --rasp-2:  #e86a8e;   /* raspberry highlight, small text (AA on --bg) */
  --plum:    #784894;   /* stand-banner purple             */
  --plum-2:  #ad86cc;   /* purple highlight, eyebrows (AA on --bg) */
  --head:    #e86a8e;   /* headings: bright raspberry (Nick, 2026-11-12) */
  --line:    rgba(246,238,241,.14);
  --line-2:  rgba(246,238,241,.28);

  --display: "Bellefair", Georgia, serif;           /* the logo's own letters */
  --cond:    "Barlow Condensed", "Arial Narrow", sans-serif;
  --sans:    "Lato", system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);

  --z-grain: 60; --z-vignette: 5; --z-progress: 70; --z-head: 80; --z-menu: 90;
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(20,10,22,.52), rgba(20,10,22,.52)),
    url("img/parchment.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-attachment:fixed; background-blend-mode:normal, overlay;
  color:var(--ink);
  font-family:var(--sans); font-weight:400;
  font-size:clamp(1rem,.55vw + .88rem,1.14rem); line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--display); font-weight:400; line-height:1.02;
  letter-spacing:.005em; text-wrap:balance; color:var(--head); }
::selection{ background:var(--rasp); color:#fff; }

/* ---------- fixed atmosphere ---------- */
.grain{
  position:fixed; inset:-50%; z-index:var(--z-grain); pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed; inset:0; z-index:var(--z-vignette); pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(8,3,9,.55) 100%);
}
.hero__paper{
  position:absolute; inset:0; pointer-events:none;
  background:url("img/parchment.jpg") center/cover no-repeat; background-attachment:fixed;
  mix-blend-mode:soft-light; opacity:.5;
}
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:var(--z-progress);
  pointer-events:none;
}
.progress i{
  display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--plum),var(--rasp),var(--rasp-2));
}

/* ---------- header ---------- */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-head);
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1rem,2.2vw,1.7rem) var(--gutter);
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), padding .5s var(--ease);
}
.site-head.docked{
  background:rgba(20,10,22,.74); backdrop-filter:blur(10px) saturate(1.1);
  padding-top:.85rem; padding-bottom:.85rem;
  border-bottom:1px solid var(--line);
}
.site-head__brand{ line-height:0; }
.site-head__brand img{ height:clamp(26px,2.6vw,36px); width:auto; }
.site-nav{ display:flex; align-items:center; gap:clamp(1.4rem,2.6vw,2.6rem); }
.site-nav a{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.18em;
  font-size:1.12rem; font-weight:400; color:var(--ink-dim);
  position:relative; padding-block:.35em;
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:.05em; height:1px; width:100%;
  background:var(--rasp-2); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s var(--ease);
}
.site-nav a:hover, .site-nav a[aria-current="page"]{ color:var(--ink); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.site-nav .nav-cta{
  display:inline-flex; align-items:center; gap:.55em;
  color:var(--ink); border:1px solid var(--rasp); border-radius:100px;
  padding:.5em 1.15em; letter-spacing:.14em; font-size:1rem;
  position:relative; overflow:hidden; isolation:isolate; transition:color .4s var(--ease);
}
.site-nav .nav-cta::after{ display:none; }
.site-nav .nav-cta::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--rasp);
  transform:translateY(101%); transition:transform .5s var(--ease); }
.site-nav .nav-cta:hover, .site-nav .nav-cta[aria-current="page"]{ color:#fff; }
.site-nav .nav-cta:hover::before, .site-nav .nav-cta[aria-current="page"]::before{ transform:translateY(0); }
.site-nav .nav-cta .btn__dot{ width:6px; height:6px; border-radius:50%; background:var(--rasp-2); transition:background .4s var(--ease); }
.site-nav .nav-cta:hover .btn__dot, .site-nav .nav-cta[aria-current="page"] .btn__dot{ background:#fff; }
.nav-toggle{ display:none; }

/* ---------- sub-pages ---------- */
.subpage .site-head{
  background:rgba(20,10,22,.74); backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--line); padding-top:.85rem; padding-bottom:.85rem;
}
.page-intro{ padding-top:clamp(7.5rem,17vh,12rem); padding-bottom:clamp(1.5rem,4vh,3rem); text-align:center; }
.page-intro h1{ font-size:clamp(3rem,8.5vw,6.2rem); margin-top:.5rem; }
.page-lead{ text-align:center; max-width:62ch; margin:0 auto; color:var(--ink-dim); }
.page-lead + .page-lead{ margin-top:1.3rem; }
.subpage .contact{ background:transparent; }
.subpage main .section{ padding-top:0; }
.subpage main .section:last-of-type{ padding-bottom:clamp(3rem,7vh,5rem); }

/* ---------- shared layout ---------- */
.section{ position:relative; padding-block:clamp(5rem,11vh,9rem); }
.wrap{ width:min(var(--wrap),100% - var(--gutter)*2); margin-inline:auto; }
.eyebrow{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.32em;
  font-size:1.05rem; font-weight:400; color:var(--plum-2);
}
.rule{ height:1px; width:64px; background:var(--rasp); }
.h-sec{ font-size:clamp(2.3rem,4.8vw,3.9rem); margin:.8rem 0 1.4rem; }
.h-sec em, .story__lead h2 em, .hero__title em{ font-style:normal; color:inherit; }   /* headings stay one colour (Nick, 2026-11-12) */

/* reveal (JS gates visibility only when motion is on) */
.js-motion [data-reveal]{ opacity:0; }
.js-motion [data-reveal="up"]{ transform:translateY(26px); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:grid; align-items:end; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:120%; object-fit:cover; object-position:center 40%;
  filter:grayscale(1) contrast(1.08) brightness(.66);
  will-change:transform;   /* no extra zoom: the tree photo's edge players stay in (2026-11-12) */
}
/* plum + raspberry grade over the b&w */
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(80% 70% at 75% 30%, rgba(183,42,84,.32), transparent 62%),
    radial-gradient(70% 60% at 10% 90%, rgba(120,72,148,.38), transparent 65%),
    linear-gradient(180deg, rgba(20,10,22,.55) 0%, rgba(20,10,22,.25) 38%, rgba(20,10,22,.94) 100%),
    linear-gradient(90deg, rgba(20,10,22,.7), transparent 60%);
}
.hero__inner{
  position:relative; z-index:2; padding-inline:var(--gutter);
  padding-bottom:clamp(6rem,16vh,10rem);
  width:min(var(--wrap),100%); margin-inline:auto;
}
.hero__kick{
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.24em;
  font-size:clamp(.8rem,2.4vw,1.45rem); font-weight:300; color:var(--ink-dim);
  margin-bottom:1.1rem; padding-left:.1em; line-height:1.3;
}
.hero__kick b{ font-weight:400; }
.hero__title{
  font-size:clamp(3.1rem,10.5vw,8.4rem); line-height:.95; letter-spacing:0; color:var(--ink);
}
.hero__title .ln{ display:block; overflow:hidden; padding-bottom:.08em; }
/* logo-led hero (Nick, 2026-11-12): her full logo, centred, in place of the tagline */
.hero--logo{ align-items:center; }
.hero--logo .hero__scrim{
  background:
    radial-gradient(48% 46% at 50% 50%, rgba(20,10,22,.62), transparent 100%),
    radial-gradient(80% 70% at 80% 20%, rgba(183,42,84,.30), transparent 62%),
    radial-gradient(70% 60% at 15% 90%, rgba(120,72,148,.36), transparent 65%),
    linear-gradient(180deg, rgba(20,10,22,.5) 0%, rgba(20,10,22,.3) 40%, rgba(20,10,22,.94) 100%);
}
.hero__inner--logo{ text-align:center; padding-bottom:0; display:flex; flex-direction:column; align-items:center; }
.hero__logo{ line-height:0; }
.hero__logo img{ width:clamp(260px,44vw,640px); height:auto; filter:drop-shadow(0 6px 30px rgba(8,3,9,.55)); }
.hero__inner--logo .hero__kick{ margin:clamp(1.4rem,3vh,2.2rem) 0 0; padding-left:.24em; }
/* on the home page the header name waits until you scroll past the big logo */
.js-motion body:not(.subpage) .site-head__brand{ transition:opacity .5s var(--ease); }
.js-motion body:not(.subpage) .site-head:not(.docked) .site-head__brand{ opacity:0; pointer-events:none; }
.hero__cue{
  position:absolute; z-index:2; left:50%; bottom:2.2rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.3em;
  font-size:.72rem; color:var(--muted);
}
.hero__cue i{ width:1px; height:44px; background:linear-gradient(var(--rasp),transparent); overflow:hidden; position:relative; }
.hero__cue i::after{ content:""; position:absolute; inset:0; background:var(--rasp-2); animation:cue 2.1s var(--ease) infinite; }
@keyframes cue{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ============================================================
   WELCOME + FAQ — sticky head beside a reading column
   ============================================================ */
.split > .wrap:first-child{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,6vw,6rem); align-items:start; }
.split__head{ position:sticky; top:clamp(6rem,14vh,9rem); }
.welcome__body p{ color:var(--ink-dim); max-width:60ch; }
.welcome__body p + p{ margin-top:1.2rem; }
.welcome__body p:first-child{ font-family:var(--display); font-size:clamp(1.35rem,2vw,1.65rem); line-height:1.45; color:var(--ink); }
.welcome__body em{ font-style:italic; color:var(--rasp-2); }

/* numbers band */
.facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,4vw,3rem);
  border-block:1px solid var(--line); padding-block:clamp(2rem,4vh,2.8rem); text-align:center;
}
.facts--band{ margin-top:clamp(3.5rem,8vh,6rem); }
.fact h4{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.24em; font-size:1.05rem; color:var(--plum-2); font-weight:400; margin-bottom:.7rem; }
.fact p{ font-family:var(--display); font-size:clamp(1.5rem,2.8vw,2.3rem); line-height:1.1; color:var(--ink); }
.fact p span{ display:block; font-family:var(--sans); text-transform:uppercase; letter-spacing:.06em;
  font-size:.82rem; color:var(--muted); margin-top:.6rem; line-height:1.55; }

/* ============================================================
   STORY — three numbered rows
   ============================================================ */
.story{ padding-block:clamp(4rem,9vh,7rem); }
.story__lead{ text-align:center; margin:0 auto clamp(3rem,7vh,5rem); }
.story__lead h2{ font-size:clamp(2.6rem,6.6vw,5.2rem); }
.story__lead h2 .tl{ display:block; }
.row{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,5vw,5rem);
  align-items:center; margin-block:clamp(3rem,8vh,6rem);
}
.row--flip{ direction:rtl; }
.row--flip > *{ direction:ltr; }
.row__text{ max-width:44ch; }
.row__text .num{
  font-family:var(--cond); color:var(--rasp-2); font-size:1.1rem; letter-spacing:.3em;
  text-transform:uppercase; display:block; margin-bottom:1rem;
}
.row__text h3{ font-size:clamp(2.1rem,4vw,3.2rem); margin-bottom:1rem; }
.row__text p{ color:var(--muted); }
.row__text p + p{ margin-top:1rem; }
.frame{ position:relative; overflow:hidden; border-radius:2px; box-shadow:0 40px 80px -40px rgba(0,0,0,.8);
  aspect-ratio:4/3; }
.frame--tall{ aspect-ratio:4/5; }
/* small source photo: no parallax oversize, so it isn't blown up */
.frame--still{ aspect-ratio:653/399; }
.frame--still img{ top:0; height:100%; object-position:50% 40%; }
/* image is taller than the frame so the parallax drift never exposes the frame behind it */
.frame img{ position:absolute; top:-20%; left:0; width:100%; height:140%; object-fit:cover;
  will-change:transform; filter:url(#duo) contrast(1.04); }
.frame__tint{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 58%, rgba(20,10,22,.55)); }
.frame__cap{
  position:absolute; left:1rem; bottom:.85rem; z-index:2;
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.2em;
  font-size:1.05rem; color:var(--ink); text-shadow:0 1px 10px rgba(0,0,0,.7);
}

/* ============================================================
   GALLERY — a still photo wall (Bailar's sideways filmstrip stays with Bailar)
   ============================================================ */
.gallery{ padding-block:clamp(4rem,9vh,7rem); }
.gallery__head{ text-align:center; margin-bottom:clamp(2.2rem,5vh,3.4rem); }
.gallery__head h2{ font-size:clamp(2.4rem,5.4vw,4.2rem); margin-top:.6rem; }
.wall{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:clamp(150px,17vw,250px);
  gap:clamp(.6rem,1.4vw,1.1rem);
}
.tile{ position:relative; overflow:hidden; border-radius:2px; }
.tile--w{ grid-column:span 2; }
.tile--t{ grid-row:span 2; }
.tile img{ width:100%; height:100%; object-fit:cover; filter:url(#duo) contrast(1.04);
  transform:scale(1.02); transition:transform 1.2s var(--ease), filter .8s var(--ease); }
.tile::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%, rgba(20,10,22,.8)); }
.tile figcaption{ position:absolute; left:1rem; bottom:.8rem; z-index:2;
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.2em; font-size:.95rem; color:var(--ink); }
/* hover brings the real colour back — the orange shirts are half the story */
@media (hover:hover){
  .tile:hover img{ filter:none; transform:scale(1.06); }
}

/* ============================================================
   HEAR US — sample music players
   ============================================================ */
.listen{ padding-block:clamp(4rem,9vh,7rem); }
.listen__head{ text-align:center; margin-bottom:clamp(2rem,5vh,3rem); }
.track{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1rem,2.4vw,1.8rem); align-items:center;
  padding:clamp(1rem,2vw,1.4rem) 0; border-top:1px solid var(--line);
}
.track__play{
  width:56px; height:56px; border-radius:50%; border:1px solid var(--rasp); background:transparent;
  color:var(--ink); display:grid; place-items:center; cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.track__play:hover{ background:var(--rasp); color:#fff; }
.track__play:focus-visible{ outline:2px solid var(--rasp-2); outline-offset:4px; }
.track__play svg{ width:22px; height:22px; fill:currentColor; }
.track__play .i-pause, .track.is-playing .track__play .i-play{ display:none; }
.track.is-playing .track__play .i-pause{ display:block; }
.track.is-playing .track__play{ background:var(--rasp); color:#fff; }
.track__who{ display:block; font-family:var(--cond); text-transform:uppercase; letter-spacing:.2em; font-size:.92rem; line-height:1.5; color:var(--plum-2); text-wrap:balance; }
.track__title{ font-size:clamp(1.5rem,2.6vw,2rem); margin:.2rem 0 .1rem; }
.track__sub{ color:var(--muted); font-size:.95rem; }
.track__time{ display:flex; align-items:center; gap:.8rem; margin-top:.7rem;
  font-family:var(--cond); letter-spacing:.08em; font-size:.9rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.track__bar{
  --p:0%; --fill:var(--rasp-2); --rest:var(--line-2);
  flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:4px; cursor:pointer; background:
    linear-gradient(90deg, var(--fill) var(--p), var(--rest) var(--p));
}
.track__bar::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--fill); border:0; }
.track__bar::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--fill); border:0; }
.track__bar:focus-visible{ outline:2px solid var(--rasp-2); outline-offset:6px; }
.tracks{ margin-top:clamp(1.4rem,3vh,2rem); }
.tracks .track:last-child{ border-bottom:1px solid var(--line); }
/* the featured track: Debbie solo, on her raspberry→purple */
.track--feature{
  border:0; border-radius:4px; padding:clamp(1.4rem,3vw,2.4rem);
  background:linear-gradient(120deg, var(--rasp) 0%, #93306f 55%, var(--plum) 100%);
  box-shadow:0 34px 70px -42px rgba(120,40,90,.6);
  grid-template-columns:auto minmax(0,1fr); gap:clamp(1.2rem,3vw,2.4rem);
}
.track--feature .track__play{ width:clamp(64px,8vw,88px); height:clamp(64px,8vw,88px); background:#fff; border-color:#fff; color:var(--rasp); }
.track--feature .track__play svg{ width:34px; height:34px; }
.track--feature .track__play:hover, .track--feature.is-playing .track__play{ background:#fff; color:#7d1f45; transform:scale(1.05); }
.track--feature .track__who{ color:#f8dbe5; }
.track--feature .track__title{ color:#fff; font-size:clamp(2rem,4vw,3.1rem); }
.track--feature .track__sub, .track--feature .track__time{ color:#f4e2ea; }
.track--feature .track__bar{ --fill:#fff; --rest:rgba(255,255,255,.3); }

/* ============================================================
   FOUNDER
   ============================================================ */
.founder .row{ margin-block:0; }
.founder .row__text{ max-width:52ch; }
.founder .row__text p{ color:var(--ink-dim); }
.founder .sig{ display:block; margin-top:1.4rem; font-family:var(--display); font-size:1.6rem; color:var(--rasp-2); }

/* ============================================================
   IN THE PRESS — one linked card
   ============================================================ */
.press{ padding-block:clamp(2rem,5vh,4rem); }
.press__card{
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr); gap:clamp(1.4rem,4vw,3.5rem); align-items:center;
  max-width:980px; margin-inline:auto; padding:clamp(1rem,2vw,1.4rem);
  border:1px solid var(--line); border-radius:3px; background:rgba(255,255,255,.025);
  transition:border-color .45s var(--ease), background .45s var(--ease);
}
.press__card:hover{ border-color:var(--rasp); background:rgba(255,255,255,.05); }
.press__card:focus-visible{ outline:2px solid var(--rasp-2); outline-offset:4px; }
.press__img{ aspect-ratio:4/3; overflow:hidden; border-radius:2px; }
.press__img img{ width:100%; height:100%; object-fit:cover; filter:url(#duo) contrast(1.04);
  transition:transform 1.2s var(--ease); }
.press__card:hover .press__img img{ transform:scale(1.04); }
.press__text h3{ font-size:clamp(2rem,3.6vw,2.9rem); margin:.7rem 0 1rem; }
.press__text p{ color:var(--ink-dim); max-width:52ch; }
.press__more{ display:inline-block; margin-top:1.3rem; font-family:var(--cond); text-transform:uppercase;
  letter-spacing:.2em; font-size:.95rem; color:var(--rasp-2); border-bottom:1px solid currentColor; padding-bottom:.15em; }
[data-photos="half"] .press__img img{ filter:url(#duo-half) contrast(1.04); }
[data-theme="light"] .press__card{ background:rgba(255,255,255,.45); }
[data-theme="light"] .press__card:hover{ background:rgba(255,255,255,.7); }

/* ============================================================
   EVENT — next Play Day
   ============================================================ */
.event{ padding-block:clamp(5rem,11vh,9rem); }
.event__title{ text-align:center; margin-bottom:clamp(2rem,5vh,3rem); }
.event__title h2{ font-size:clamp(2.6rem,5.6vw,4.4rem); margin-top:.6rem; }
.event__banner{ overflow:hidden; border-radius:2px; box-shadow:0 50px 90px -50px rgba(0,0,0,.85);
  max-width:75%; margin:0 auto clamp(2.4rem,5vh,3.6rem); aspect-ratio:16/8; position:relative; }
.event__banner img{ width:100%; height:100%; object-fit:cover; filter:url(#duo) contrast(1.04); }
.event .facts{ max-width:75%; margin-inline:auto; }
/* the recital clarinet: its background is the page colour, so no frame, shadow or tint */
.event__banner--still{ box-shadow:none; border-radius:0; aspect-ratio:2/1; }
.event__banner--still img,
[data-photos="half"] .event__banner--still img{ filter:none; object-fit:contain;
  -webkit-mask-image:radial-gradient(closest-side, #000 76%, transparent 100%);
          mask-image:radial-gradient(closest-side, #000 76%, transparent 100%); }
.event__note{ text-align:center; max-width:52ch; margin:clamp(2rem,4vh,2.6rem) auto 0; color:var(--ink-dim); }
.event__cta{ display:flex; justify-content:center; margin-top:clamp(2.2rem,4vh,2.8rem); }

/* ============================================================
   FAQ
   ============================================================ */
.faq__list{ display:flex; flex-direction:column; }
.faq__item{ padding-block:clamp(1.4rem,3vh,2rem); border-top:1px solid var(--line); }
.faq__item:last-child{ border-bottom:1px solid var(--line); }
.faq__item h3{ font-size:clamp(1.55rem,2.6vw,2.1rem); line-height:1.1; margin-bottom:.7rem; }
.faq__item p{ color:var(--ink-dim); max-width:60ch; }
.faq__item a, .ev-know a, .prose a{ color:var(--rasp-2); border-bottom:1px solid rgba(232,106,142,.4); }
.faq__item a:hover, .ev-know a:hover, .prose a:hover{ border-bottom-color:var(--rasp-2); }

/* ============================================================
   LESSONS page
   ============================================================ */
.instruments{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.4vw,2rem);
  margin-top:clamp(3rem,7vh,5rem);
}
.inst{ border-top:1px solid var(--rasp); padding-top:1.4rem; }
.inst h3{ font-size:clamp(1.9rem,3vw,2.5rem); margin-bottom:.6rem; }
.inst p{ color:var(--muted); }
.lessons__row{ margin-top:clamp(4rem,9vh,7rem); }

/* event page prose blocks */
.ev-know{ max-width:62ch; margin:clamp(2.5rem,6vh,4rem) auto 0; text-align:center; }
.ev-know h3{ font-family:var(--cond); text-transform:uppercase; font-weight:400; letter-spacing:.18em;
  font-size:1.1rem; color:var(--plum-2); margin-bottom:1.1rem; }
.ev-know p{ color:var(--ink-dim); }
.ev-know p + p{ margin-top:.9rem; }

/* buttons */
.btn{
  --pad:1.05em 2.1em;
  display:inline-flex; align-items:center; gap:.7em; padding:var(--pad);
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.2em; font-size:.95rem; font-weight:400;
  border-radius:100px; border:1px solid var(--rasp); color:var(--ink);
  background:transparent; cursor:pointer;
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease);
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--rasp); transform:translateY(101%); transition:transform .5s var(--ease); }
.btn:hover{ color:#fff; }
.btn:hover::before{ transform:translateY(0); }
.btn__dot{ width:6px; height:6px; border-radius:50%; background:var(--rasp-2); transition:background .4s var(--ease); }
.btn:hover .btn__dot{ background:#fff; }
.btn:focus-visible, .site-nav a:focus-visible, .contact__ways a:focus-visible{ outline:2px solid var(--rasp-2); outline-offset:4px; }

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact{ background:linear-gradient(180deg,transparent,#0c060d); padding-top:clamp(5rem,11vh,9rem); }
.contact .wrap:not(:last-child){ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.contact__intro p{ color:var(--ink-dim); max-width:40ch; margin-bottom:2rem; }
/* live site while the form is held: the intro alone, centred */
.contact .wrap.no-form{ display:block; max-width:640px; }
.contact__ways{ list-style:none; display:flex; flex-direction:column; gap:1.1rem; }
.contact__ways a{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .9rem; padding-bottom:1rem; border-bottom:1px solid var(--line);
  font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em; font-size:clamp(1.1rem,2vw,1.5rem); font-weight:300;
  transition:color .35s var(--ease), padding-left .35s var(--ease); }
.contact__ways a:hover{ color:var(--rasp-2); padding-left:.4rem; }
.contact__ways a small{ font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:1.05rem; color:var(--muted); }

.form{ display:grid; gap:1.3rem; }
.form__title{ font-size:clamp(1.8rem,3.6vw,2.4rem); margin-bottom:.3rem; }
.field{ position:relative; }
.field input, .field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-2);
  color:var(--ink); font-family:var(--sans); font-size:1.05rem; padding:.8em 0; resize:vertical;
  transition:background-color 600000s 0s;
}
.field textarea{ min-height:110px; }
.field label{ position:absolute; left:0; top:.8em; color:var(--muted); pointer-events:none;
  transition:transform .35s var(--ease), color .35s var(--ease); transform-origin:0 50%; }
.field input:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--rasp-2); }
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label{
  transform:translateY(-1.7em) scale(.8); color:var(--rasp-2);
}
.field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill, .field input:autofill, .field textarea:autofill{
  -webkit-text-fill-color:var(--ink) !important;
  -webkit-box-shadow:0 0 0 1000px #1d1020 inset !important;
  box-shadow:0 0 0 1000px #1d1020 inset !important;
  transition:background-color 600000s 0s !important;
  caret-color:var(--ink);
}
.field input:-webkit-autofill + label, .field input:autofill + label{
  transform:translateY(-1.7em) scale(.8); color:var(--rasp-2);
}
.form .btn{ justify-self:start; }
.form__note{ font-size:.85rem; color:var(--muted); }

.foot{
  margin-top:clamp(4rem,9vh,7rem); border-top:1px solid var(--line);
  padding:clamp(2.5rem,5vh,3.5rem) 0;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.2rem;
}
.foot img{ height:96px; width:auto; opacity:.92; }
.foot span{ font-family:var(--cond); text-transform:uppercase; letter-spacing:.18em; font-size:.92rem; color:var(--muted); line-height:1.6; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .nav-toggle{
    display:inline-flex; background:none; border:0; color:var(--ink); cursor:pointer;
    font-size:1.5rem; line-height:1; padding:.2em;
    position:relative; z-index:calc(var(--z-menu) + 1);
  }
  /* backdrop-filter would make the header the containing block for the fixed overlay menu */
  .site-head.docked, .subpage .site-head{
    backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(20,10,22,.95);
  }
  .site-nav{
    position:fixed; inset:0; z-index:var(--z-menu); flex-direction:column; justify-content:center;
    gap:2rem; background:rgba(20,10,22,.97);
    transform:translateY(-100%); transition:transform .55s var(--ease); pointer-events:none;
  }
  .site-nav.open{ transform:translateY(0); pointer-events:auto; }
  .site-nav a{ font-size:1.4rem; }
  .site-nav .nav-cta{ font-size:1.3rem; padding:.55em 1.4em; margin-top:.4rem; }
  .split > .wrap:first-child{ grid-template-columns:1fr; }
  .split__head{ position:static; }
  .row, .contact .wrap:not(:last-child){ grid-template-columns:1fr; }
  .row--flip{ direction:ltr; }
  .row--flip .row__text{ order:2; }
  .facts{ grid-template-columns:1fr; gap:1.6rem; }
  .fact{ border-bottom:1px solid var(--line); padding-bottom:1.4rem; }
  .fact:last-child{ border-bottom:0; padding-bottom:0; }
  .event__banner, .event .facts{ max-width:100%; }
  .event__banner{ aspect-ratio:4/3; }
  .event__banner--still{ aspect-ratio:2/1; }
  .wall{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(140px,40vw,220px); }
  .instruments{ grid-template-columns:1fr; }
  .hero__logo img{ width:min(80vw,340px); }
  .press__card{ grid-template-columns:1fr; }
  .press__img{ aspect-ratio:16/10; }
}

/* ---------- half-colour version (body data-photos="half") ----------
   A halfway house between full colour and the plum duotone. */
[data-photos="half"] .hero__media img{ filter:grayscale(.5) contrast(1.05) brightness(.62); }
[data-photos="half"] .frame img,
[data-photos="half"] .tile img,
[data-photos="half"] .event__banner img{ filter:url(#duo-half) contrast(1.04); }

/* ============================================================
   LIGHT VERSION (body data-theme="light", 2026-11-12)
   Same site on a warm blush-cream page; the hero stays photographic.
   ============================================================ */
.on-light{ display:none; }
[data-theme="light"] .on-light{ display:block; }
[data-theme="light"] .on-dark{ display:none; }
/* over the home hero photo (header not docked) the white name is the right one */
[data-theme="light"]:not(.subpage) .site-head:not(.docked) .on-light{ display:none; }
[data-theme="light"]:not(.subpage) .site-head:not(.docked) .on-dark{ display:block; }
[data-theme="light"]{
  --bg:      #f7f0eb;   /* warm blush-cream page           */
  --bg-2:    #efe4de;
  --bg-3:    #e7d9d2;
  --ink:     #2b1631;   /* plum-black text                 */
  --ink-dim: #44304a;
  --muted:   #6b566e;   /* AA on --bg                      */
  --rasp-2:  #a3234a;   /* deeper raspberry for small text on light */
  --plum-2:  #6b3f88;
  --head:    #b72a54;   /* headings: the logo raspberry */
  --line:    rgba(43,22,49,.14);
  --line-2:  rgba(43,22,49,.30);
  background-image:
    linear-gradient(rgba(247,240,235,.84), rgba(247,240,235,.84)),
    url("img/parchment.jpg");
}
[data-theme="light"] .vignette{ background:radial-gradient(120% 90% at 50% 30%, transparent 50%, rgba(90,40,70,.10) 100%); }
[data-theme="light"] .site-head.docked,
[data-theme="light"].subpage .site-head{ background:rgba(247,240,235,.86); }
/* over the home hero photo the nav stays light until the header docks */
@media (min-width:861px){
  [data-theme="light"]:not(.subpage) .site-head:not(.docked) .site-nav a{ color:#f6eef1; }
}
[data-theme="light"]:not(.subpage) .site-head:not(.docked) .nav-toggle{ color:#f6eef1; }
[data-theme="light"] .site-head .nav-toggle[aria-expanded="true"]{ color:var(--ink); }
[data-theme="light"] .hero__kick, [data-theme="light"] .hero__cue{ color:#f2e6ea; }
[data-theme="light"] .hero--logo .hero__scrim{
  background:
    radial-gradient(48% 46% at 50% 50%, rgba(20,10,22,.6), transparent 100%),
    radial-gradient(80% 70% at 80% 20%, rgba(183,42,84,.28), transparent 62%),
    radial-gradient(70% 60% at 15% 90%, rgba(120,72,148,.30), transparent 65%),
    linear-gradient(180deg, rgba(20,10,22,.5) 0%, rgba(20,10,22,.28) 45%, rgba(20,10,22,.32) 80%, var(--bg) 100%);
}
[data-theme="light"] .frame__cap, [data-theme="light"] .tile figcaption{ color:#fff; }
[data-theme="light"] .frame{ box-shadow:0 30px 60px -36px rgba(60,20,50,.45); }
[data-theme="light"] .event__banner{ box-shadow:0 36px 70px -44px rgba(60,20,50,.5); }
/* the recital clarinet keeps its dark ground, as a card */
[data-theme="light"] .event__banner--still{ background:#140a16; border-radius:3px; }
[data-theme="light"] .event__banner--still img{ -webkit-mask-image:none; mask-image:none; }
[data-theme="light"] .contact{ background:linear-gradient(180deg,transparent,var(--bg-2)); }
[data-theme="light"] .faq__item a, [data-theme="light"] .ev-know a, [data-theme="light"] .prose a{ border-bottom-color:rgba(163,35,74,.35); }
[data-theme="light"] .field input:-webkit-autofill,
[data-theme="light"] .field textarea:-webkit-autofill,
[data-theme="light"] .field input:autofill{
  -webkit-box-shadow:0 0 0 1000px #fff inset !important; box-shadow:0 0 0 1000px #fff inset !important;
}
@media (max-width:860px){
  [data-theme="light"] .site-head.docked, [data-theme="light"].subpage .site-head{ background:rgba(247,240,235,.96); }
  [data-theme="light"] .site-nav{ background:rgba(247,240,235,.98); }
}

/* ---------- full-colour photos (body data-photos="full") — Debbie, 2026-11-12: "more colour" ---------- */
[data-photos="full"] .hero__media img{ filter:saturate(1.05) brightness(.86); }
[data-photos="full"] .frame img,
[data-photos="full"] .tile img,
[data-photos="full"] .event__banner img,
[data-photos="full"] .press__img img{ filter:none; }

/* ---------- light version: more of her raspberry + purple ---------- */
[data-theme="light"] .btn, [data-theme="light"] .site-nav .nav-cta{ background:var(--rasp); border-color:var(--rasp); color:#fff; }
[data-theme="light"] .btn::before, [data-theme="light"] .site-nav .nav-cta::before{ background:#8a1d40; }
[data-theme="light"] .btn__dot, [data-theme="light"] .site-nav .nav-cta .btn__dot{ background:#fff; }
[data-theme="light"] .facts{
  background:linear-gradient(120deg, var(--rasp) 0%, #93306f 55%, var(--plum) 100%);
  border:0; border-radius:4px; padding-inline:clamp(1rem,3vw,2rem);
  box-shadow:0 30px 60px -40px rgba(120,40,90,.55);
}
[data-theme="light"] .facts .fact h4{ color:#f8dbe5; }
[data-theme="light"] .facts .fact p{ color:#fff; }
[data-theme="light"] .facts .fact p span{ color:#f4e2ea; }
[data-theme="light"] #gallery{ background:linear-gradient(180deg, transparent, #efe3f3 18%, #efe3f3 82%, transparent); }
[data-theme="light"] #event{ background:linear-gradient(180deg, transparent, #f9e3eb 18%, #f9e3eb 82%, transparent); }
[data-theme="light"] .contact{ background:linear-gradient(180deg, transparent, #ecdff2); }
[data-theme="light"] .press__card{ background:#fff; border-color:rgba(183,42,84,.25); }
[data-theme="light"] .press__card:hover{ background:#fff; border-color:var(--rasp); }
[data-theme="light"] .hero--logo .hero__scrim{
  background:
    radial-gradient(46% 44% at 50% 50%, rgba(20,10,22,.5), transparent 100%),
    radial-gradient(80% 70% at 85% 15%, rgba(183,42,84,.30), transparent 60%),
    radial-gradient(70% 60% at 10% 90%, rgba(120,72,148,.32), transparent 65%),
    linear-gradient(180deg, rgba(20,10,22,.42) 0%, rgba(20,10,22,.12) 40%, rgba(20,10,22,.18) 80%, var(--bg) 100%);
}
@media (max-width:860px){
  [data-theme="light"] .facts .fact{ border-bottom-color:rgba(255,255,255,.25); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .js-motion [data-reveal]{ opacity:1 !important; transform:none !important; }
  .hero__cue i::after{ animation:none; }
  .grain{ display:none; }
  .tile img{ transition:none; }
}