/* Piano Boise: site styles
   Palette: ink navy, paper white, brass, slate, rule grey.
   Type: Bodoni Moda (display, like an engraved edition title page) + Instrument Sans (text). */

:root{
  --ink:#1C2536;
  --ink-2:#2A3550;
  --paper:#FAFAF8;
  --white:#FFFFFF;
  --brass:#A8823A;
  --brass-dk:#8A6A2C;
  --slate:#5B6577;
  --rule:#D9DCE3;
  --mist:#EEF0F4;
  --display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --text:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --wrap:1160px;
  --gutter:clamp(20px, 5vw, 56px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--text); font-size:1.0625rem; line-height:1.6;
  font-feature-settings:"kern","liga";
}
img{max-width:100%; height:auto; display:block}
a{color:var(--ink); text-decoration-color:var(--brass); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--brass-dk)}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:2px}
.skip{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:100}
.skip:focus{left:12px; top:12px}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}

/* ---------- Type scale (1.25 ratio, Bringhurst-style restraint) ---------- */
h1,h2,h3{font-family:var(--display); font-weight:400; line-height:1.1; margin:0 0 .5em; letter-spacing:-.005em}
h1{font-size:clamp(2.6rem, 6.2vw, 5.1rem)}
h2{font-size:clamp(2rem, 3.6vw, 2.9rem)}
h3{font-size:1.5rem; line-height:1.2}
p{margin:0 0 1em; max-width:66ch}
.lede{font-size:1.25rem; line-height:1.55; color:var(--ink-2); max-width:56ch}
.muted{color:var(--slate)}
.small{font-size:.9rem}

/* ---------- Header ---------- */
.site-header{background:var(--paper); border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:50}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px}
.wordmark{font-family:var(--display); font-size:1.65rem; text-decoration:none; color:var(--ink); white-space:nowrap; line-height:1}
.wordmark span{font-style:italic; color:var(--brass-dk)}
.nav{display:flex; align-items:center; gap:4px}
.nav a{font-size:.95rem; text-decoration:none; padding:8px 11px; border-radius:4px; color:var(--ink-2)}
.nav a:hover{color:var(--ink); background:var(--mist)}
.nav a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--brass); border-radius:0}
.nav .more{position:relative}
.nav .more > button{font:inherit; font-size:.95rem; background:none; border:0; padding:8px 11px; color:var(--ink-2); cursor:pointer; border-radius:4px}
.nav .more > button:hover{background:var(--mist)}
.nav .more > button::after{content:""; display:inline-block; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); margin-left:8px}
.nav .more ul{list-style:none; margin:0; padding:8px; position:absolute; right:0; top:calc(100% + 6px); background:var(--white); border:1px solid var(--rule); border-radius:6px; min-width:220px; display:none; box-shadow:0 10px 30px -12px rgba(28,37,54,.25)}
.nav .more[data-open="true"] ul{display:block}
.nav .more ul a{display:block}
.btn{display:inline-block; font-family:var(--text); font-weight:600; font-size:1rem; text-decoration:none; padding:13px 22px; border-radius:4px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); cursor:pointer; line-height:1.2}
.btn:hover{background:var(--ink-2); color:var(--paper)}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:var(--mist); color:var(--ink)}
.nav .btn{padding:10px 16px; margin-left:10px; color:var(--paper)}
.menu-toggle{display:none; font:inherit; background:none; border:1px solid var(--rule); border-radius:4px; padding:8px 12px; cursor:pointer; color:var(--ink)}

@media (max-width: 940px){
  .menu-toggle{display:block}
  .nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--paper); flex-direction:column; align-items:stretch; padding:12px var(--gutter) 24px; border-bottom:1px solid var(--rule)}
  .nav[data-open="true"]{display:flex}
  .nav a, .nav .more > button{padding:12px 4px; font-size:1.05rem; text-align:left}
  .nav a[aria-current="page"]{box-shadow:none; color:var(--brass-dk)}
  .nav .more ul{position:static; display:block; border:0; box-shadow:none; padding:0 0 0 14px; background:none; min-width:0}
  .nav .more > button{display:none}
  .nav .btn{margin:12px 0 0; text-align:center}
}

/* ---------- Hero: the edition title page ---------- */
.hero{padding:clamp(48px,8vw,104px) 0 clamp(56px,8vw,96px); position:relative; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero h1{margin-bottom:.35em}
.hero h1 em{font-style:italic}
.hero .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.hero-figure{margin:0; position:relative}
.hero-figure img, .hero-figure .ph{aspect-ratio:4/5; object-fit:cover; width:100%; border-radius:2px}
.hero-figure figcaption{font-size:.85rem; color:var(--slate); margin-top:10px}
@media (max-width: 820px){ .hero .wrap{grid-template-columns:1fr} .hero-figure img,.hero-figure .ph{aspect-ratio:3/2} }

/* Placeholder used only in the preview build, where photos can't load */
.ph{background:linear-gradient(135deg,var(--mist),#E1E4EB); display:flex; align-items:center; justify-content:center; text-align:center; color:var(--slate); font-size:.9rem; padding:16px; min-height:180px}

/* ---------- Sections ---------- */
.section{padding:clamp(56px,8vw,104px) 0}
.section + .section{border-top:1px solid var(--rule)}
.section.tint{background:var(--white)}
[id]{scroll-margin-top:96px}
.section.dark{background:var(--ink); color:var(--paper)}
.section.dark a{color:var(--paper)}
.section.dark .muted{color:#B9C0CE}
.section-head{max-width:720px; margin-bottom:40px}
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,88px); align-items:start}
.split.media-left{grid-template-columns:.9fr 1.1fr}
@media (max-width: 820px){ .split, .split.media-left{grid-template-columns:1fr} }

/* What students learn: a definition list, not cards */
.learn{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0; border-top:1px solid var(--rule)}
.learn div{padding:26px 28px 26px 0; border-bottom:1px solid var(--rule)}
.learn dt{font-family:var(--display); font-size:1.4rem; margin-bottom:6px}
.learn dd{margin:0; color:var(--slate)}
@media (max-width: 820px){ .learn{grid-template-columns:1fr} .learn div{padding-right:0} }

/* Season: the performance year as a timeline */
.season{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:2px solid var(--brass)}
.season li{padding:20px 22px 0 0; position:relative}
.season li::before{content:""; position:absolute; top:-7px; left:0; width:12px; height:12px; border-radius:50%; background:var(--paper); border:2px solid var(--brass)}
.section.dark .season li::before{background:var(--ink)}
.season .when{font-size:.9rem; color:var(--brass)}
.season h3{font-size:1.35rem; margin:.2em 0 .35em}
@media (max-width: 820px){ .season{grid-template-columns:1fr 1fr; row-gap:30px} }
@media (max-width: 520px){ .season{grid-template-columns:1fr} }

/* Testimonials */
.quotes{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px)}
.quotes blockquote{margin:0}
.quotes p{font-family:var(--display); font-size:clamp(1.4rem,2.2vw,1.8rem); line-height:1.35; font-style:italic}
.quotes cite{font-style:normal; color:var(--slate); font-size:.95rem}
@media (max-width: 820px){ .quotes{grid-template-columns:1fr} }

/* Tuition */
.rates{border-collapse:collapse; width:100%; max-width:520px; margin:8px 0 18px}
.rates th, .rates td{padding:14px 0; border-bottom:1px solid var(--rule); text-align:left; font-weight:400}
.rates td{text-align:right; font-family:var(--display); font-size:1.5rem}
.rates caption{text-align:left; color:var(--slate); font-size:.95rem; padding-bottom:6px}

/* Page header for inner pages */
.page-head{padding:clamp(48px,7vw,88px) 0 clamp(28px,4vw,44px)}
.page-head .wrap > :last-child{margin-bottom:0}

/* Prose pages */
.prose{max-width:720px}
.prose h2{font-size:clamp(1.7rem,3vw,2.2rem); margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose ul{padding-left:1.2em; margin:0 0 1.2em}
.prose li{margin:.3em 0}

/* People (About) */
.person{display:grid; grid-template-columns:280px 1fr; gap:clamp(24px,4vw,56px); padding:40px 0; border-top:1px solid var(--rule)}
.person img, .person .ph{aspect-ratio:4/5; object-fit:cover; width:100%}
.person h3{font-size:1.9rem}
.person ul{padding-left:1.1em; margin:0; color:var(--ink-2)}
.person li{margin:.35em 0}
@media (max-width: 720px){ .person{grid-template-columns:1fr} .person img,.person .ph{max-width:320px} }


/* FAQ */
.faq details{border-top:1px solid var(--rule); padding:4px 0}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer; list-style:none; font-family:var(--display); font-size:1.5rem; padding:20px 40px 20px 0; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:16px; font-family:var(--text); font-size:1.6rem; color:var(--brass); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 22px; max-width:64ch}

/* Videos */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.filters button{font:inherit; font-size:.95rem; padding:8px 16px; border:1px solid var(--rule); background:var(--white); border-radius:999px; cursor:pointer; color:var(--ink-2)}
.filters button[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.vgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px 24px}
@media (max-width: 900px){ .vgrid{grid-template-columns:1fr 1fr} }
@media (max-width: 560px){ .vgrid{grid-template-columns:1fr} }
.vid .frame{position:relative; aspect-ratio:16/9; background:var(--ink); border-radius:2px; overflow:hidden; display:block; width:100%; border:0; padding:0; cursor:pointer}
.vid .frame img{width:100%; height:100%; object-fit:cover; opacity:.9}
.vid .frame .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.vid .frame .play::before{content:""; width:58px; height:58px; border-radius:50%; background:rgba(250,250,248,.92)}
.vid .frame .play::after{content:""; position:absolute; border-left:16px solid var(--ink); border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:5px}
.vid .frame .notes{position:absolute; inset:0; display:flex; align-items:flex-end; padding:14px; color:#C9CFDA; font-family:var(--display); font-style:italic; font-size:1.1rem; background:repeating-linear-gradient(180deg, transparent 0 13px, rgba(250,250,248,.08) 13px 14px)}
.vid iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.vid h3{font-family:var(--text); font-size:1.02rem; font-weight:600; margin:12px 0 2px; line-height:1.35}
.vid .tags{font-size:.85rem; color:var(--slate)}
.vid .sheet-link{display:inline-block; margin-top:6px; font-size:.88rem; font-weight:700}


/* Sheet music */

/* Contact form */
.form{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; max-width:680px}
.form .full{grid-column:1 / -1}
.form label{display:block; font-weight:600; font-size:.95rem; margin-bottom:6px}
.form .opt{font-weight:400; color:var(--slate)}
.form input, .form select, .form textarea{width:100%; font:inherit; padding:12px 14px; border:1px solid #C5CAD4; border-radius:4px; background:var(--white); color:var(--ink)}
.form input:focus, .form select:focus, .form textarea:focus{outline:2px solid var(--brass); outline-offset:0; border-color:var(--brass)}
.form textarea{min-height:130px; resize:vertical}
.form .hp{position:absolute; left:-5000px}
.notice{padding:16px 18px; border-left:3px solid var(--brass); background:var(--white); margin-bottom:24px; max-width:680px}
.notice.err{border-left-color:#9B2C2C}
@media (max-width: 600px){ .form{grid-template-columns:1fr} }

/* Footer */
.site-footer{background:var(--ink); color:#C9CFDA; padding:64px 0 40px; font-size:.95rem}
.site-footer a{color:var(--paper); text-decoration-color:rgba(168,130,58,.7)}
.site-footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
.site-footer .wordmark{color:var(--paper); font-size:1.9rem}
.site-footer .wordmark span{color:#D2B072}
.site-footer ul{list-style:none; margin:0; padding:0}
.site-footer li{margin:6px 0}
.site-footer .fine{margin-top:48px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); color:#8F98AB; font-size:.85rem}
@media (max-width: 760px){ .site-footer .cols{grid-template-columns:1fr} }

.cta-band{display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap}
.cta-band h2{margin:0}
.section.dark .btn{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.section.dark .btn:hover{background:#fff}
.section.dark .btn.ghost{background:transparent; color:var(--paper); border-color:rgba(250,250,248,.5)}

/* Closing call-to-action, sits right above the navy footer */
.section.cta{background:var(--mist); border-top:3px solid var(--brass)}
.section.cta .muted{color:var(--slate)}

.wrap.prose{max-width:var(--wrap)}
.wrap.prose > *{max-width:720px}

/* At-a-glance facts (About) */
.facts{margin:0; border-top:1px solid var(--rule)}
.facts div{display:grid; grid-template-columns:200px 1fr; gap:24px; padding:14px 0; border-bottom:1px solid var(--rule)}
.facts dt{font-weight:600}
.facts dd{margin:0; color:var(--ink-2); max-width:66ch}
@media (max-width: 600px){ .facts div{grid-template-columns:1fr; gap:2px} }

/* =====================================================================
   Design v2: modeled on a full-screen-photo studio layout
   Classical serif headlines (Bodoni Moda) + clean sans text (Mulish)
   ===================================================================== */
:root{
  --text:"Mulish", "Helvetica Neue", Arial, sans-serif;
  --accent:#8A6A2C;          /* deep brass: passes contrast with white text */
  --accent-lt:#D2B072;       /* light brass for dark backgrounds */
  --grey:#F4F4F2;
}
body{background:var(--white)}
.eyebrow{font-family:var(--text); font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 14px}

/* Header: white bar; floats transparent over the cover photo on the home page */
.site-header{background:rgba(255,255,255,.97); border-bottom:1px solid #E7E8EC; transition:background .25s, border-color .25s}
.site-header .wrap{min-height:80px}
.nav a{font-weight:600; font-size:.93rem}
.btn{font-family:var(--text); font-weight:700; border-radius:3px}
.btn.accent, .nav .btn{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.accent:hover, .nav .btn:hover{background:#73581F; border-color:#73581F; color:#fff}
.btn.outline-light{background:transparent; border-color:rgba(255,255,255,.75); color:#fff}
.btn.outline-light:hover{background:rgba(255,255,255,.12); color:#fff}

body.has-cover .site-header{position:fixed; left:0; right:0; top:0; background:transparent; border-color:transparent}
body.has-cover .site-header .wordmark, body.has-cover .site-header .nav > a:not(.btn), body.has-cover .nav .more > button{color:#fff}
body.has-cover .site-header .wordmark span{color:var(--accent-lt)}
body.has-cover .nav > a:not(.btn):hover, body.has-cover .nav .more > button:hover{background:rgba(255,255,255,.14)}
body.has-cover .menu-toggle{color:#fff; border-color:rgba(255,255,255,.5)}
body.has-cover.scrolled .site-header{background:rgba(255,255,255,.97); border-color:#E7E8EC; box-shadow:0 6px 24px -18px rgba(28,37,54,.5)}
body.has-cover.scrolled .site-header .wordmark, body.has-cover.scrolled .nav > a:not(.btn), body.has-cover.scrolled .nav .more > button{color:var(--ink)}
body.has-cover.scrolled .site-header .wordmark span{color:var(--brass-dk)}
body.has-cover.scrolled .menu-toggle{color:var(--ink); border-color:var(--rule)}
body.has-cover.scrolled .nav > a:not(.btn):hover, body.has-cover.scrolled .nav .more > button:hover{background:var(--mist)}
@media (max-width: 940px){
  body.has-cover .nav[data-open="true"] a:not(.btn), body.has-cover .nav[data-open="true"] .more a{color:var(--ink)}
  body.has-cover .site-header:has(.nav[data-open="true"]){background:#fff}
  body.has-cover .site-header:has(.nav[data-open="true"]) .wordmark{color:var(--ink)}
  body.has-cover .site-header:has(.nav[data-open="true"]) .menu-toggle{color:var(--ink); border-color:var(--rule)}
}

/* Full-screen cover */
.cover{position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; color:#fff; overflow:hidden; background:#151B27}
.cover picture, .cover-img{position:absolute; inset:0; width:100%; height:100%}
.cover-img{object-fit:cover; object-position:30% 55%}
.cover-shade{position:absolute; inset:0;
  background:
    linear-gradient(270deg, rgba(14,19,30,.88) 0%, rgba(14,19,30,.72) 38%, rgba(14,19,30,.18) 70%, rgba(14,19,30,.05) 100%),
    linear-gradient(0deg, rgba(14,19,30,.45) 0%, rgba(14,19,30,0) 30%),
    linear-gradient(180deg, rgba(14,19,30,.55) 0%, rgba(14,19,30,0) 22%)}
.cover-inner{position:relative; width:100%; display:flex; justify-content:flex-end; padding-top:110px; padding-bottom:72px}
.cover-text{max-width:560px}
.cover .eyebrow{color:var(--accent-lt)}
.cover h1{color:#fff; font-size:clamp(2.9rem, 6vw, 5.4rem); line-height:1.02; margin-bottom:.4em; text-shadow:0 2px 30px rgba(0,0,0,.25)}
.cover-lede{font-size:1.18rem; line-height:1.6; color:#E9ECF2; max-width:52ch}
.cover .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.cover-note{margin-top:20px; font-size:.95rem; color:#C9CFDA}
.cover .small.muted{color:#C9CFDA; margin-top:6px}
.cover .small.muted a{color:#fff}
@media (prefers-reduced-motion: no-preference){
  .cover-img{animation:coverzoom 14s ease-out both}
  @keyframes coverzoom{from{transform:scale(1.06)}to{transform:scale(1)}}
}
@media (max-width: 820px){
  .cover{align-items:flex-end}
  .cover-img{object-position:22% 50%}
  .cover-shade{background:linear-gradient(0deg, rgba(14,19,30,.94) 0%, rgba(14,19,30,.80) 45%, rgba(14,19,30,.25) 75%, rgba(14,19,30,.45) 100%)}
  .cover-inner{justify-content:flex-start; padding-top:140px; padding-bottom:40px}
}

/* Quote + stats band under the cover */
.band{background:var(--ink); color:#fff; padding:56px 0}
.band-grid{display:grid; grid-template-columns:1fr 1.4fr; gap:48px; align-items:center}
.band-quote{margin:0; border-left:3px solid var(--accent-lt); padding:4px 0 4px 22px}
.band-quote p{font-family:var(--display); font-style:italic; font-size:1.45rem; line-height:1.4; margin:0 0 12px}
.band-quote cite{font-style:normal; font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#AEB6C6}
.band-quote.light{border-left-color:var(--accent)}
.band-quote.light p{color:var(--ink); font-size:clamp(1.4rem,2.4vw,1.9rem)}
.band-quote.light cite{color:var(--slate)}
.narrow-quote{max-width:860px}
.stats{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px}
.stats li{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:4px; padding:18px 20px}
.stats strong{display:block; font-size:1.05rem; margin-bottom:4px}
.stats span{color:#B9C0CE; font-size:.93rem}
@media (max-width: 860px){ .band-grid{grid-template-columns:1fr} }
@media (max-width: 480px){ .stats{grid-template-columns:1fr} }

/* Contact strip */
.contact-strip{background:#fff; border-bottom:1px solid #E7E8EC}
.strip-grid{display:grid; grid-template-columns:repeat(3,1fr)}
.strip-grid > div{padding:22px 24px 22px 0; font-weight:600}
.strip-grid > div + div{border-left:1px solid #E7E8EC; padding-left:24px}
.strip-label{display:block; font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin-bottom:4px}
.strip-grid a{text-decoration:none}
@media (max-width: 760px){ .strip-grid{grid-template-columns:1fr} .strip-grid > div + div{border-left:0; border-top:1px solid #E7E8EC; padding-left:0} }

/* Sections: alternating white / soft grey, roomier */
.section.tint{background:var(--grey)}
.section + .section{border-top:0}
.section h2{font-size:clamp(2rem,3.4vw,2.8rem)}
.learn{border-top:0; gap:16px}
.learn div{background:#fff; border:1px solid #E7E8EC; border-radius:4px; padding:24px}
.section:not(.tint) .learn div{background:var(--grey); border-color:transparent}
.page-head{background:var(--grey)}
.page-head + .section{padding-top:clamp(40px,5vw,64px) !important}
.section.cta{background:var(--ink); border-top:0; color:#fff}
.section.cta h2{color:#fff}
.section.cta .muted{color:#B9C0CE}
.section.cta .btn{background:var(--accent); border-color:var(--accent)}

/* Phones: photo on top (pianist in view), words below on dark: nothing covers the soloist */
@media (max-width: 820px){
  .cover{display:block; min-height:0; background:#141A27}
  .cover picture{position:relative; display:block; height:62svh; min-height:360px}
  .cover-img{position:absolute; object-position:16% 70%}
  .cover-shade{bottom:auto; height:62svh; min-height:360px;
    background:linear-gradient(180deg, rgba(14,19,30,.55) 0%, rgba(14,19,30,0) 22%, rgba(14,19,30,0) 62%, #141A27 100%)}
  .cover-inner{padding-top:0; padding-bottom:44px; margin-top:-64px}
  .cover .eyebrow{font-size:.7rem; letter-spacing:.1em}
  .cover h1{font-size:2.6rem}
}

/* Logo legibility over the cover photo: same brass color, darker backdrop behind the menu bar */
body.has-cover:not(.scrolled) .site-header{background:linear-gradient(180deg, rgba(12,16,26,.72) 0%, rgba(12,16,26,.38) 70%, rgba(12,16,26,0) 100%)}
body.has-cover:not(.scrolled) .site-header .wordmark{text-shadow:0 1px 2px rgba(0,0,0,.55), 0 0 22px rgba(0,0,0,.45)}
body.has-cover:not(.scrolled) .site-header .wordmark span{font-weight:500}
body.has-cover:not(.scrolled) .nav > a:not(.btn), body.has-cover:not(.scrolled) .nav .more > button{text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* Our teachers spotlight (home) */
.spotlight{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.spotlight article{display:grid; grid-template-columns:160px 1fr; gap:22px; background:#fff; border:1px solid #E7E8EC; border-radius:4px; padding:22px}
.spotlight img, .spotlight .ph{width:100%; aspect-ratio:4/5; object-fit:cover; min-height:0; border-radius:2px}
.spotlight h3{font-size:1.6rem; margin-bottom:.4em}
.spotlight ul{margin:0; padding-left:1.1em; color:var(--ink-2)}
.spotlight li{margin:.35em 0}
@media (max-width: 980px){ .spotlight{grid-template-columns:1fr} }
@media (max-width: 520px){ .spotlight article{grid-template-columns:1fr} .spotlight img, .spotlight .ph{max-width:220px} }

/* Bios as prose */
.person p{color:var(--ink-2); max-width:68ch}
.spotlight p{margin:0; color:var(--ink-2)}

/* Training and experience (About) */
.creds{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.creds + .creds{margin-top:24px}
.creds article{background:#fff; border:1px solid #E7E8EC; border-radius:4px; padding:28px 30px}
.creds h3{font-size:1.7rem; margin-bottom:.6em}
.creds dl{margin:0}
.creds dl div{display:grid; grid-template-columns:150px 1fr; gap:18px; padding:12px 0; border-top:1px solid #EEF0F3}
.creds dt{font-weight:700; font-size:.9rem; color:var(--slate)}
.creds dd{margin:0; color:var(--ink-2)}
.creds p{margin:0; color:var(--ink-2)}
@media (max-width: 860px){ .creds{grid-template-columns:1fr} }
@media (max-width: 520px){ .creds dl div{grid-template-columns:1fr; gap:2px} }

/* Getting started steps (a real sequence, so numbered) */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step}
.steps li{counter-increment:step; background:var(--grey); border-radius:4px; padding:28px 26px; position:relative}
.steps li::before{content:counter(step); display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; margin-bottom:16px}
.steps h3{font-size:1.45rem; margin-bottom:.4em}
.steps p{margin:0; color:var(--ink-2)}
@media (max-width: 860px){ .steps{grid-template-columns:1fr} }
.role, .spotlight .role, .person .role{font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:-.2em 0 .7em !important}

/* Christmas page: one carol per row, text left, recording right */
.carols{list-style:none; margin:0; padding:0; max-width:1000px; border-top:1px solid var(--rule)}
.carol{display:grid; grid-template-columns:1fr 360px; gap:40px; align-items:center; padding:28px 0; border-bottom:1px solid var(--rule)}
.carol:not(.has-vid){grid-template-columns:1fr}
.carol-text{display:flex; flex-direction:column; align-items:flex-start}
.carol-text h2{font-family:var(--display); font-size:1.6rem; line-height:1.2; margin:0}
.carol-text .lvl{color:var(--slate); font-size:.92rem; margin-top:8px}
.carol-text .btn{margin-top:16px}
.btn.small{padding:9px 16px; font-size:.92rem}
.carol .vid .frame{aspect-ratio:16/9; width:100%}
.carol .vid .frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.carol-vid .frame .play::before{width:48px; height:48px}
.carols-head{max-width:1000px; margin-bottom:12px}
.carols-head h2{margin-bottom:.2em}
@media (max-width: 760px){ .carol{grid-template-columns:1fr; gap:18px; padding:24px 0} }

/* Home "Hi, we're Adam and Anna": taller photo, centered beside the longer text */
.intro-split{align-items:center}
.intro-split img{aspect-ratio:4/5; width:100%; height:auto; object-fit:cover; object-position:62% center}
@media (max-width: 820px){ .intro-split img{aspect-ratio:3/2; object-position:center} }

/* About "Our story": photo stays in view while the story scrolls (desktop only) */
.sticky-photo{position:sticky; top:110px}
@media (max-width: 820px){ .sticky-photo{position:static} }

/* Calendar */
.cal-feature{display:grid; grid-template-columns:1fr 1fr; background:#fff; border:1px solid #E7E8EC; border-radius:6px}
.cal-feature-img{border-radius:6px 0 0 6px; overflow:hidden}
.cal-feature-img picture{display:block; height:100%}
.cal-feature-img img, .cal-feature-img .ph{display:block; width:100%; height:100%; min-height:320px; object-fit:cover; object-position:var(--focus, 50% 50%)}
.cal-feature-body{padding:clamp(24px,4vw,44px)}
.cal-feature-body h2{margin:0 0 .2em}
.cal-feature-date{font-weight:700; color:var(--ink-2)}
.cal-times{list-style:none; padding:0; margin:14px 0 18px; display:flex; gap:10px; flex-wrap:wrap}
.cal-times li{background:var(--mist); border:1px solid #E1E3E8; border-radius:999px; padding:6px 14px; font-weight:700; font-size:.95rem}
.cal-feature-links{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; margin-top:22px}
.cal-feature.simple{grid-template-columns:1fr; max-width:900px}
@media (max-width: 820px){
  .cal-feature{grid-template-columns:1fr}
  .cal-feature-img{border-radius:6px 6px 0 0}
  .cal-feature-img img, .cal-feature-img .ph{min-height:0; height:auto; aspect-ratio:16/10}
}
.cal-add{position:relative; display:inline-block}
.cal-add > summary{list-style:none; cursor:pointer}
.cal-add > summary::-webkit-details-marker{display:none}
.cal-add > summary.btn::after, .cal-add > summary.cal-add-link::after{content:""; display:inline-block; margin-left:8px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; vertical-align:middle}
.cal-add[open] > summary::after{transform:rotate(180deg)}
.cal-add-opts{position:absolute; left:0; top:calc(100% + 6px); z-index:20; min-width:190px; display:flex; flex-direction:column; padding:6px; background:#fff; border:1px solid var(--rule); border-radius:6px; box-shadow:0 10px 30px -12px rgba(28,37,54,.3)}
.cal-add-opts a{padding:10px 12px; border-radius:4px; text-decoration:none; font-weight:700; color:var(--ink)}
.cal-add-opts a:hover, .cal-add-opts a:focus-visible{background:var(--mist)}
.cal-add-link{display:inline-block; margin-top:8px; font-weight:700; font-size:.92rem; color:var(--accent); text-decoration:underline; text-underline-offset:3px}

.cal-wrap{max-width:900px}
.cal-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px 20px; flex-wrap:wrap; margin-bottom:8px}
.cal-head h2{margin:0}
.cal-month{font-family:var(--text); font-size:.8rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin:34px 0 10px}
.cal-list{list-style:none; margin:0; padding:0}
.cal-row{display:grid; grid-template-columns:72px 1fr; gap:20px; align-items:start; padding:16px 0; border-top:1px solid #ECEEF1}
.cal-tile{width:72px; border-radius:6px; overflow:hidden; text-align:center; border:1px solid #E1E3E8; background:#fff}
.cal-tile span{display:block; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; padding:3px 0}
.cal-tile b{display:block; font-family:var(--display); font-weight:400; font-size:1.9rem; line-height:1.4}
.k-perform .cal-tile span{background:var(--accent)}
.k-makeup .cal-tile span{background:#4F6B8A}
.k-off .cal-tile span{background:#B8BDC7; color:var(--ink)}
.k-off h4, .k-off .cal-tile b, .k-off .cal-body p{color:var(--slate)}
.cal-kind{font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--slate)}
.k-perform .cal-kind{color:var(--accent)}
.k-makeup .cal-kind{color:#4F6B8A}
.cal-body h4{font-family:var(--text); font-weight:700; font-size:1.1rem; margin:2px 0 4px; line-height:1.35}
.cal-body p{margin:0; color:var(--ink-2)}
.cal-body p.cal-details{margin-top:4px; color:var(--slate)}
.cal-watch{display:none; margin-top:8px; font-weight:700; font-size:.92rem}
.cal-past{margin-top:44px; border-top:1px solid var(--rule); padding-top:18px}
.cal-past > summary{cursor:pointer; font-family:var(--display); font-size:1.5rem}
.cal-past .cal-row{opacity:.8}
.cal-past .cal-add{display:none}
.cal-past .cal-watch{display:inline-block}
.cal-empty{margin:24px 0 0}
@media (max-width: 560px){ .cal-row{grid-template-columns:60px 1fr; gap:14px} .cal-tile{width:60px} .cal-tile b{font-size:1.6rem} }

/* About: "In our own words" */
.own-words{max-width:680px; margin:0 auto}
.own-words h2{margin:0 0 .4em}
.own-words h3{font-size:1.45rem; margin:1.6em 0 .45em}
.own-words p{color:var(--ink-2); font-size:1.08rem; line-height:1.7}
.pull-quote{margin:34px 0; padding:30px clamp(22px,4vw,40px); background:var(--mist); border-left:4px solid var(--accent); border-radius:0 6px 6px 0}
.pull-quote blockquote{margin:0}
.pull-quote blockquote p{font-family:var(--display); font-size:clamp(1.3rem,2.4vw,1.65rem); line-height:1.4; color:var(--ink); margin:0}
.pull-quote figcaption{margin-top:14px; font-size:.8rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.own-words .signature{margin-top:2em; font-family:var(--display); font-size:1.35rem; color:var(--ink)}
.spotlight.single{grid-template-columns:1fr; max-width:640px}

/* Typography: no single words stranded on a paragraph's last line; balanced headings */
p, li, dd, blockquote, figcaption, .lede{text-wrap:pretty}
h1, h2, h3, h4{text-wrap:balance}

/* Teacher cards: Read more / Show less (full bio is in the HTML; site.js animates it) */
.spotlight{align-items:start}
.visually-hidden{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.bio-more{display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease}
.bio-more > div{min-height:0; overflow:hidden}
.bio-more.open{grid-template-rows:1fr}
.bio-more p{margin-top:.8em !important}
.bio-toggle{display:inline-flex; align-items:center; gap:.4em; margin-top:.8em; padding:.35em 0; background:none; border:0; font:inherit; font-size:.92rem; font-weight:700; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.bio-toggle::after{content:""; width:.45em; height:.45em; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-.15em) rotate(45deg); transition:transform .25s ease}
.bio-toggle[aria-expanded="true"]::after{transform:translateY(.1em) rotate(-135deg)}
.bio-toggle:hover{text-decoration-thickness:2px}
.bio-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
@media (prefers-reduced-motion: reduce){ .bio-more, .bio-toggle::after{transition:none} }

/* FAQ groups: small label like .eyebrow, but in sentence case */
.faq h2.faq-group{font-family:var(--text); font-size:.95rem; font-weight:800; letter-spacing:.02em; line-height:1.3; color:var(--accent); margin:48px 0 6px; text-transform:none}
.faq h2.faq-group:first-child{margin-top:0}
.faq h2.faq-group + details{border-top:1px solid var(--rule)}
.faq details:has(+ h2.faq-group){border-bottom:1px solid var(--rule)}
.faq details{scroll-margin-top:96px}