/* Site 3: the music school. Ravensworth School (fictional).
   Created and designed by Amy Garside Media. */

@font-face { font-family: "Gloock"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/gloock.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("assets/fonts/albert.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("assets/fonts/albert-i.woff2") format("woff2"); }

:root {
  --white: #FFFFFF;
  --ink: #15171C;
  --ink-soft: #4E535E;
  --cobalt: #1E3A8A;
  --cobalt-deep: #14265C;
  --cobalt-line: rgba(30,58,138,.18);
  --cobalt-line-strong: rgba(30,58,138,.4);
  --tint: #EEF2FA;
  --brass: #9A6B1F;
  --brass-deep: #6E4B12;
  --display: "Gloock", "Didot", Georgia, serif;
  --body: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --max: 78rem;
  --stave-gap: 14px;
  --ease: cubic-bezier(.16,1,.3,1);
  --top-h: 4.4rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 4px; }
b { font-weight: 700; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; top: -5rem; left: 1rem; z-index: 200; padding: .75rem 1rem; background: var(--cobalt); color: var(--white); font-weight: 700; text-decoration: none; }
.skip:focus { top: 1rem; }


/* ---- Type ---------------------------------------------------------------- */
.kicker { font-weight: 600; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt); }
.btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 3.25rem; padding: .8rem 1.5rem; font-weight: 600; font-size: .9375rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; font-family: inherit; transition: background .25s, color .25s, border-color .25s; }
.btn svg { width: 1.1rem; height: 1.1rem; }
.btn--brass { background: var(--brass); color: var(--white); }
.btn--brass:hover { background: var(--brass-deep); }
.btn--brass[aria-pressed="true"] { background: var(--cobalt); }
.btn--line { border-color: var(--cobalt); color: var(--cobalt); background: var(--white); }
.btn--line:hover { background: var(--tint); }

/* ---- Header --------------------------------------------------------------- */
.top { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 1.5rem; padding: .9rem var(--gutter); background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cobalt-line); }
.lockup { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.lockup__mark { width: 2.1rem; height: 2.1rem; color: var(--cobalt); flex: none; }
.lockup__name { font-weight: 600; font-size: .9375rem; letter-spacing: .01em; }
.lockup__name em { font-style: normal; color: var(--cobalt); font-family: var(--display); font-size: 1.05rem; margin-left: .35rem; }
.top__nav { display: flex; gap: 1.4rem; margin-left: auto; }
.top__nav a { font-size: .9375rem; font-weight: 500; text-decoration: none; padding: .5rem 0; position: relative; color: var(--ink-soft); }
.top__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 2px; background: var(--cobalt); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.top__nav a:hover, .top__nav a[aria-current="true"] { color: var(--ink); }
.top__nav a:hover::after, .top__nav a[aria-current="true"]::after { transform: scaleX(1); }
.top__cta { font-weight: 700; font-size: .875rem; text-decoration: none; padding: .6rem 1rem; background: var(--cobalt); color: var(--white); white-space: nowrap; transition: background .25s; }
.top__cta:hover { background: var(--cobalt-deep); }
.sound { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); background: transparent; border: 1px solid var(--cobalt-line-strong); padding: .5rem .8rem; cursor: pointer; transition: color .25s, border-color .25s; }
.sound__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--cobalt-line-strong); transition: background .25s, box-shadow .25s; }
.sound[aria-pressed="true"] { color: var(--brass-deep); border-color: var(--brass); }
.sound[aria-pressed="true"] .sound__dot { background: var(--brass); box-shadow: 0 0 0 4px rgba(154,107,31,.2); }
.top__menu { display: none; position: relative; }
.top__menu summary { list-style: none; cursor: pointer; width: 2.75rem; height: 2.75rem; display: grid; place-content: center; gap: 5px; border: 1px solid var(--cobalt-line-strong); }
.top__menu summary::-webkit-details-marker { display: none; }
.top__menu summary span { display: block; width: 1.1rem; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s; }
.top__menu[open] summary span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.top__menu[open] summary span:nth-child(2) { opacity: 0; }
.top__menu[open] summary span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.top__sheet { position: absolute; right: 0; top: calc(100% + .75rem); min-width: 15rem; background: var(--white); display: grid; padding: .5rem 0; box-shadow: 0 20px 50px rgba(21,23,28,.18); border: 1px solid var(--cobalt-line); }
.top__sheet a { padding: .8rem 1.25rem; font-family: var(--display); font-size: 1.25rem; text-decoration: none; border-top: 1px solid var(--cobalt-line); }
.top__sheet a:first-child { border-top: 0; }
@media (max-width: 64em) { .top__nav { display: none; } .top__cta { margin-left: auto; } .top__menu { display: block; } .sound { margin-left: auto; } .top__cta { margin-left: 0; } }
@media (max-width: 40em) { .top { padding: .7rem 1.25rem; gap: .6rem; } .lockup__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .top__cta { display: none; } .sound__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .sound { padding: .7rem; } }

/* ---- Hero ------------------------------------------------------------------- */
.hero { position: relative; padding: clamp(4rem, 9vw, 7rem) var(--gutter) 0; overflow: hidden; }
.hero > .hero__inner, .hero > .melody { position: relative; z-index: 1; max-width: var(--max); margin-inline: auto; }
.field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
html:not(.js) .field { display: none; }
.hero__inner { max-width: var(--max); }
.hero__inner > * { max-width: 44rem; }
.hero__title { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 6.4vw, 5.5rem); line-height: 1.02; letter-spacing: -.015em; margin-top: .75rem; text-wrap: balance; }
.hero__title em { font-style: normal; color: var(--cobalt); }
.hero__lede { margin-top: 1.5rem; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); max-width: 36rem; color: var(--ink-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1.75rem; }
.btn__pause, .btn[aria-pressed="true"] .btn__play { display: none; }
.btn[aria-pressed="true"] .btn__pause { display: block; }
.hero__track { margin-top: .9rem; min-height: 1.5rem; font-size: .8125rem; letter-spacing: .02em; color: var(--brass-deep); opacity: 0; transition: opacity .4s; }
.hero__track em { font-style: italic; }
.hero__track.is-on { opacity: 1; }
[data-audio] { display: none; }
/* The melody: a stave with a line that draws itself as the visitor scrolls */
.melody { width: 100%; height: auto; margin-top: clamp(2rem, 5vw, 3.5rem); color: var(--cobalt); }
.melody__lines { opacity: .35; }
.melody__clef { opacity: .9; }
.melody__line { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.melody__notes circle { opacity: 0; transition: opacity .3s; transform-box: fill-box; transform-origin: center; }
.melody__notes circle.is-on { opacity: 1; }
.melody__notes circle.is-hit { animation: hit .45s var(--ease); }
@keyframes hit { 0% { transform: scale(1); } 40% { transform: scale(1.8); } 100% { transform: scale(1); } }
html:not(.js) .melody__line { stroke-dashoffset: 0; }
html:not(.js) .melody__notes circle { opacity: 1; }

/* ---- Movements ------------------------------------------------------------- */
.movement { padding: clamp(4rem, 9vw, 7rem) var(--gutter); }
.movement__head, .movement__body { max-width: var(--max); margin-inline: auto; }
.movement__head { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .5rem 1rem; align-items: baseline; }

.movement__num { font-family: var(--display); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; color: var(--cobalt); grid-row: 1 / 3; }
.movement__title { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 4.25rem); line-height: 1; letter-spacing: -.015em; }
.movement__intro { grid-column: 2; margin-top: .75rem; max-width: 38rem; color: var(--ink-soft); font-size: 1.0625rem; }
.movement__body { margin-top: clamp(2rem, 5vw, 3.5rem); }
.movement--tint { background: var(--tint); }
.movement--cobalt { background: var(--cobalt); color: var(--white); }
.movement--cobalt .movement__num, .movement--cobalt .movement__intro, .movement--cobalt h3 { color: var(--white); }
.movement--cobalt .movement__intro { opacity: .85; }
h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.15; }
.plate { background: var(--tint); }
.plate img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.plate figcaption { margin-top: .6rem; font-size: .875rem; color: var(--ink-soft); }
.movement--cobalt .plate figcaption { color: var(--white); opacity: .8; }

/* I. Lessons */
.movement__body--lessons { display: grid; gap: 2.5rem 3rem; }
@media (min-width: 60em) { .movement__body--lessons { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.families { margin-top: 1.5rem; border-top: 1px solid var(--cobalt-line-strong); }
.families > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--cobalt-line); }
.families dt { font-weight: 600; }
.families dd { margin: 0; color: var(--ink-soft); }
.instruments__note { margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--tint); font-size: .9375rem; }
@media (max-width: 40em) { .families > div { grid-template-columns: 1fr; gap: .2rem; } }

/* II. Ensembles: the seating plan, the list, the photograph */
/* II. Ensembles. Two columns that flow independently, so the stage begins
   directly under the heading instead of waiting for the photograph's row.
   The stage then holds its place while the eleven groups scroll past it. */
.ens { max-width: var(--max); margin-inline: auto; display: grid; gap: 2.5rem 3rem; }
.ens .movement__head { max-width: none; margin-inline: 0; }
@media (min-width: 60em) {
  .ens { grid-template-columns: 1.15fr .85fr; }
  .plan { position: sticky; top: calc(var(--top-h) + 1.75rem); margin-top: clamp(2rem, 5vw, 3.5rem); }
}
/* Narrow: one column, and the photograph closes the section rather than
   sitting between the stage and the groups. The pinned stage needs its own
   ground, because the list scrolls underneath an open SVG. */
@media (max-width: 59.99em) {

  .ens__stage, .ens__groups { display: contents; }
  .ens .movement__head { order: 1; }
  .plan { order: 2; }
  .ensembles { order: 3; }
  .plate--strings { order: 4; }
  .plan { position: sticky; top: 4.1rem; z-index: 5; background: var(--tint); padding-block: .4rem .6rem; border-bottom: 1px solid var(--cobalt-line); margin-top: clamp(1.5rem, 4vw, 2.5rem); }
  .plan__svg { max-height: 30vh; }
  .plan__labels { font-size: 30px; }
}
.plan { margin: 0; color: var(--cobalt); }
.plan__svg { width: 100%; height: auto; }
.plan__row { fill: var(--white); stroke: var(--cobalt); stroke-width: 1.5; transition: fill .25s; cursor: pointer; }
.plan__row:hover, .plan__row.is-on { fill: var(--cobalt); }
.plan__row:hover + .plan__labels text, .plan__row.is-on ~ .plan__labels text { fill: var(--white); }
.plan__labels text { pointer-events: none; transition: fill .25s; }
.plan__labels { pointer-events: none; }
.plan.is-choir .plan__labels text:nth-child(1), .plan.is-perc .plan__labels text:nth-child(2), .plan.is-brass .plan__labels text:nth-child(3), .plan.is-wind .plan__labels text:nth-child(4), .plan.is-strings .plan__labels text:nth-child(5) { fill: var(--white); }
.plan__cap { margin-top: .75rem; font-size: .9375rem; color: var(--ink-soft); }
.plan__hint { color: var(--brass-deep); font-weight: 600; }
.ensembles li.is-lit { background: rgba(255,255,255,.85); }
.ensembles { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--cobalt-line-strong); counter-reset: e; }
.ensembles li { display: grid; grid-template-columns: 2.25rem minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .9fr); gap: .2rem .9rem; align-items: baseline; padding: .65rem 0; border-bottom: 1px solid var(--cobalt-line); transition: background .25s; position: relative; }
.ensembles li::before { counter-increment: e; content: counter(e); font-family: var(--display); color: var(--cobalt); font-size: 1.15rem; }
.ensembles li:hover, .ensembles li.is-sounding { background: rgba(255,255,255,.7); }
.ens__name { font-family: var(--display); font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); }
.ens__who, .ens__when { font-size: .9375rem; color: var(--ink-soft); }
.ensembles__note { margin-top: 1rem; font-size: .875rem; color: var(--brass-deep); font-weight: 600; }
@media (max-width: 40em) { .ensembles li { grid-template-columns: 2.25rem 1fr; } .ens__who, .ens__when { grid-column: 2; } }
/* Two columns arrive at 60em, but the list only has room for four columns of
   its own past 75em. Between the two, the times sit under the name. */
@media (min-width: 60em) and (max-width: 75em) { .ensembles li { grid-template-columns: 2.25rem minmax(0, 1fr); } .ens__who, .ens__when { grid-column: 2; } }

/* III. Concerts: the year as a stave, then the list and the pictures */
.movement__body--concerts { display: grid; gap: 2.5rem 3rem; }
@media (min-width: 60em) { .movement__body--concerts { grid-template-columns: 1.3fr .9fr; grid-template-areas: "year year" "list plates"; align-items: start; } .year { grid-area: year; } .season { grid-area: list; } .concerts__plates { grid-area: plates; } }
.concerts__plates { display: grid; gap: 1.5rem; }
.year { margin: 0; color: var(--cobalt); }
.year__scroll { overflow-x: auto; scrollbar-width: thin; }
.year__svg { width: 100%; min-width: 46rem; height: auto; display: block; }
.year__lines { opacity: .45; }
.year__months text { fill: var(--ink-soft); }
.year__note { cursor: pointer; transition: opacity .25s; }
.year__note text { transition: fill .25s; }
.year__note.is-on ellipse, .year__note:hover ellipse { fill: var(--brass); }
.year__note.is-on line, .year__note:hover line { stroke: var(--brass); }
.year__note.is-on text, .year__note:hover text { fill: var(--brass-deep); }
.year__cap { margin-top: .5rem; font-size: .9375rem; color: var(--ink-soft); }
.season li.is-lit { background: var(--tint); }
.season li { padding-inline: .4rem; margin-inline: -.4rem; transition: background .25s; }
.season { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--cobalt-line-strong); }
.season li { display: grid; grid-template-columns: 11rem 1fr; gap: .2rem 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--cobalt-line); }
.season time { font-weight: 600; color: var(--cobalt); font-variant-numeric: tabular-nums; }
.season__name { font-family: var(--display); font-size: clamp(1.3rem, 1.1rem + .9vw, 1.9rem); line-height: 1.1; }
.season__where { grid-column: 2; color: var(--ink-soft); font-size: .9375rem; }
@media (max-width: 40em) { .season li { grid-template-columns: 1fr; } .season__where { grid-column: 1; } }

/* IV. Exams and fees, on cobalt */
.movement__body--fees { display: grid; gap: 2.5rem 3rem; }
@media (min-width: 60em) { .movement__body--fees { grid-template-columns: 1fr 1fr; grid-template-areas: "fees text" "photo text"; } .fees { grid-area: fees; } .fees__text { grid-area: text; } .plate--cases { grid-area: photo; } }
.fees { border-collapse: collapse; width: 100%; }
.fees th, .fees td { padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.25); text-align: left; vertical-align: top; font-weight: 400; }
.fees td { font-family: var(--display); font-size: 1.5rem; text-align: right; padding-left: 1.5rem; white-space: nowrap; }
.fees__text h3 { margin-top: 1.5rem; }
.fees__text h3:first-child { margin-top: 0; }
.fees__text p { margin-top: .5rem; opacity: .92; max-width: 34rem; }
.movement--cobalt .plate { background: var(--cobalt-deep); }

/* ---- Coda: contact over the choir ------------------------------------------ */
.coda { position: relative; display: grid; }
.coda__fig { margin: 0; }
.coda__fig img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; max-height: 80vh; }
.coda__copy { max-width: var(--max); margin-inline: auto; width: 100%; padding: clamp(3rem, 7vw, 5rem) var(--gutter); display: grid; gap: 1rem; justify-items: start; }
.coda__title { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 5vw, 4.25rem); line-height: 1; letter-spacing: -.015em; }
.coda__title em { font-style: normal; color: var(--cobalt); }
.coda__copy p { max-width: 36rem; color: var(--ink-soft); }
.coda__who { color: var(--ink) !important; }
@media (min-width: 60em) { .coda { grid-template-columns: 1fr 1fr; align-items: center; } .coda__fig img { max-height: none; aspect-ratio: 4 / 5; } }

/* ---- Footer ----------------------------------------------------------------- */
.foot { border-top: 1px solid var(--cobalt-line-strong); padding: 3rem var(--gutter) 2.5rem; background: var(--white); }
.foot__inner { max-width: var(--max); margin-inline: auto; display: grid; gap: 2rem; align-items: end; }
@media (min-width: 60em) { .foot__inner { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot__school { font-family: var(--display); font-size: 1.375rem; }
.foot__small { margin-top: .5rem; font-size: .9375rem; color: var(--ink-soft); max-width: 38rem; }
.foot__links { display: grid; gap: .5rem; font-size: .9375rem; }
.foot__links a { padding-block: .3rem; text-decoration-color: var(--cobalt-line-strong); text-underline-offset: .2em; }
.foot__credit { font-size: .875rem; color: var(--ink-soft); }
.foot__credit a { color: var(--ink); text-decoration-color: var(--brass); text-underline-offset: .2em; }
@media (min-width: 60em) { .foot__credit { text-align: right; } }

/* ---- Reveals, default visible; motion only with JS and no reduce ------------ */
@media (prefers-reduced-motion: no-preference) {
  .js .movement__head, .js .plate, .js .ensembles, .js .season, .js .fees, .js .fees__text, .js .families { opacity: 0; transform: translateY(1rem); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .melody__line { stroke-dashoffset: 0 !important; }
  .melody__notes circle { opacity: 1 !important; animation: none !important; }
}
.year, .plan, .season, .concerts__plates, .ensembles { min-width: 0; }

.year__note { pointer-events: bounding-box; }
.year__lines { opacity: .35; }
.year__terms text { fill: var(--ink-soft); }