/* ---------------------------------------------------------------
   Piano4Beginners - site stylesheet

   Hand-written to replace MudBlazor. The old site loaded a component
   framework and then spent a block of !important rules fighting its
   defaults (it forced every heading to Roboto Slab weight 100). None
   of that is needed now, so nothing in this file uses !important.

   Palette and type match what was already live.
   --------------------------------------------------------------- */

:root {
  --gold: #FFC500;
  --gold-deep: #D99726;
  --red: #C7391B;
  --ink: #1A1A1A;
  --ink-soft: #17161A;
  --cream: #F5F2F0;

  /* The family's note: the ground is not pure white, it has a little warmth
     in it. --paper is that ground; --card is the white that sits on top of
     it, so cards keep their edge instead of dissolving into the page.

     2026-09-05: --paper was #FBF9F6, which next to the contact page's --cream
     read as two different whites down one site. They are now the same value.
     --cream is kept as a name so the older rules still read sensibly. */
  --paper: #F5F2F0;
  --card: #FFFFFF;
  --gold-wash: #FFF6DC;
  --muted: #6B6B6B;
  --rule: #E4E0DC;

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3, h4,
.banner-title, .chooser-title, .price-figure, .closing-line {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0 0 .5em;
}

h1 { font-weight: 700; font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(26px, 3.4vw, 40px); }
h3 { font-size: clamp(19px, 2vw, 24px); }

p { margin: 0 0 1.1em; }

a { color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }

ul.plain { list-style: none; margin: 0; padding: 0; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--gold);
  color: var(--ink);
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible {
  outline: 3px solid var(--gold-deep);
  outline-offset: 2px;
}

/* --- header ---------------------------------------------------- */

.site-header { background: var(--ink); }

.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 76px;
}


.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.site-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 26px 24px;
  color: var(--cream);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

/* Hover is the gold block, matching the original. The icon inherits
   currentColor, so it flips to ink with the label rather than needing a
   second rule. */
.site-nav a:hover,
.site-nav a:focus-visible {
  background: var(--gold);
  color: var(--ink);
}

.site-nav a.is-current {
  background: var(--gold);
  color: var(--ink);
  font-weight: 500;
}

.nav-icon {
  width: 17px;
  height: 17px;
  flex: none;
  display: block;
}

/* Mobile menu, CSS only - no JavaScript needed to open it. */
.nav-toggle-label { display: none; }

@media (max-width: 860px) {
  .nav-toggle-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    cursor: pointer;
  }
  .nav-toggle-label span {
    display: block;
    height: 2px;
    background: var(--gold);
  }
  .site-nav {
    display: none;
    flex-basis: 100%;
    order: 3;
  }
  .nav-toggle:checked ~ .site-nav { display: block; }
  .site-nav ul { flex-direction: column; }
  .site-nav a {
    padding: 15px 10px;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .header-inner { flex-wrap: wrap; min-height: 0; }
}

.accent-bar { line-height: 0; }
.accent-gold { height: 7px; background: var(--gold); }
.accent-red { height: 3px; background: var(--red); }

/* --- homepage chooser ------------------------------------------ */

.chooser {
  display: flex;
  flex-direction: column;
  min-height: 82vh;
  background-color: var(--ink-soft);
  background-image:
    radial-gradient(ellipse 120% 90% at 50% -10%, rgba(217,151,38,.16) 0%, rgba(217,151,38,0) 60%),
    radial-gradient(ellipse 80% 60% at 85% 110%, rgba(217,151,38,.07) 0%, rgba(217,151,38,0) 65%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 2px, rgba(255,255,255,0) 2px 5px),
    linear-gradient(175deg, #201E24 0%, #17161A 55%, #131215 100%);
}

.chooser-intro {
  text-align: center;
  padding: 52px 24px 34px;
  color: #F8F6F1;
}

.chooser-eyebrow {
  font-weight: 500;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 16px;
}

.chooser-title {
  font-size: clamp(38px, 6.4vw, 82px);
  line-height: 1.08;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  color: #F8F6F1;
}
.chooser-title .line { display: block; }
.chooser-title em { font-style: italic; color: var(--gold-deep); }

.chooser-sub {
  font-size: clamp(15px, 1.6vw, 19px);
  margin: 0;
  opacity: .78;
  color: #F8F6F1;
}

.chooser-split {
  display: flex;
  flex: 1 1 auto;
  min-height: 58vh;
}

.chooser-half {
  position: relative;
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  transition: flex-basis .45s ease;
}

.chooser-piano {
  background-image: url('/img/home/piano-hero.jpg');
  background-position: 62% center;
  border-right: 1px solid rgba(217,151,38,.6);
}

.chooser-violin {
  background-image: url('/img/home/violin-hero.jpg');
  background-position: 50% 38%;
}

.chooser-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.52);
  transition: background .35s ease;
}

.chooser-half:hover .chooser-overlay,
.chooser-half:focus-visible .chooser-overlay { background: rgba(0,0,0,.30); }

@media (min-width: 900px) {
  .chooser-half:hover { flex-basis: 58%; }
}

.chooser-content {
  position: relative;
  display: block;
  text-align: center;
  color: #fff;
  padding: 24px;
}

.chooser-label {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.chooser-price {
  display: block;
  font-size: clamp(13px, 1.3vw, 16px);
  margin-top: 10px;
  opacity: .82;
  letter-spacing: .06em;
}

.chooser-cta {
  display: inline-block;
  margin-top: 26px;
  padding: 11px 28px;
  border: 1px solid rgba(255,255,255,.75);
  color: #fff;
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.chooser-half:hover .chooser-cta,
.chooser-half:focus-visible .chooser-cta {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: #000;
}

.chooser-foot {
  text-align: center;
  padding: 20px 24px 28px;
  margin: 0;
  color: var(--cream);
  font-size: 14px;
}
.chooser-foot a { color: var(--gold-deep); text-decoration: none; }
.chooser-foot a:hover { text-decoration: underline; }
.chooser-dot { margin: 0 10px; opacity: .5; }

@media (max-width: 899px) {
  .chooser-split { flex-direction: column; min-height: auto; }
  .chooser-half { min-height: 38vh; flex-basis: auto; }
  .chooser-piano { border-right: none; border-bottom: 1px solid rgba(217,151,38,.6); }
}

/* --- content bands --------------------------------------------- */

.intro-band { padding: clamp(56px, 8vw, 92px) 0; }

.intro-band > .wrap > h2 { max-width: 16ch; margin-bottom: 0; }
.intro-band > .wrap > p { color: #3A3A3A; margin-bottom: 1.2em; }
.intro-band > .wrap > p:last-of-type { margin-bottom: 0; }

@media (min-width: 900px) {
  .intro-band > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 6vw, 90px);
    align-items: start;
  }
  .intro-band > .wrap > h2 { grid-column: 1; grid-row: 1 / span 2; }
  .intro-band > .wrap > p  { grid-column: 2; }
  .intro-cards { grid-column: 1 / -1; }
}

.intro-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 34px);
  margin-top: clamp(36px, 5vw, 56px);
}

.intro-card {
  border-top: 3px solid var(--gold);
  padding-top: 22px;
}
.intro-card h3 { margin-bottom: .4em; }
.intro-card p { color: #4A4A4A; font-size: 16px; }

.text-link {
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .02em;
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}
.text-link:hover { border-bottom-color: var(--red); }

.cta-band {
  background: var(--gold);
  color: var(--ink);
  text-align: center;
  padding: clamp(48px, 6vw, 72px) 0;
}
.cta-band h2 { margin-bottom: .3em; }
.cta-band p { margin-bottom: 0; }
.cta-actions { margin-top: 28px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.btn-dark { background: var(--ink); color: var(--cream); }
.btn-dark:hover { background: #000; }
.btn-outline { border: 2px solid var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--cream); }

/* --- footer ----------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: #fff;
  padding: clamp(40px, 5vw, 64px) clamp(20px, 8vw, 96px) 32px;
  font-size: 16px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  max-width: var(--wrap);
  margin: 0 auto;
}

.footer-head {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold);
  margin: 0 0 14px;
}

.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer li { padding: 3px 0; }

.hours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 16px;
  margin: 0;
}
.hours dt { opacity: .75; }
.hours dd { margin: 0; }

.footer-areas,
.footer-legal {
  max-width: var(--wrap);
  margin: 34px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 14px;
  opacity: .7;
}
.footer-legal { margin-top: 14px; padding-top: 0; border-top: 0; }

/* --- page banner ------------------------------------------------ */

.banner {
  position: relative;
  min-height: clamp(320px, 46vw, 520px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  text-align: center;
  color: #fff;
}

.banner-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.62) 100%);
}

.banner-inner {
  position: relative;
  padding: clamp(48px, 7vw, 84px) clamp(20px, 5vw, 40px);
  max-width: 900px;
}

.banner-kicker {
  font-size: clamp(15px, 1.8vw, 20px);
  letter-spacing: .04em;
  margin: 0 0 .5em;
  opacity: .9;
}

.banner-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1.04;
  margin: 0 0 .25em;
  color: #fff;
}
.banner-title em { font-style: italic; font-weight: 600; color: var(--gold); }

.banner-strap {
  font-size: clamp(16px, 1.9vw, 22px);
  margin: 0;
}
.banner-strap b { color: var(--gold); }

.banner-sub {
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .72;
  margin: 1.1em 0 0;
}

/* --- shared section furniture ----------------------------------- */

.section-title { text-align: center; margin-bottom: .4em; }

.section-lead {
  text-align: center;
  color: var(--muted);
  max-width: 60ch;
  margin: 0 auto 2em;
}

/* --- "who can we teach" ----------------------------------------- */

.audience { padding: clamp(52px, 7vw, 84px) 0; }

/* The gold band, back at the family's request. Everything on it is ink, not
   grey: mid-grey on gold is the one combination here that fails contrast. */
.audience-gold { background: var(--gold); color: var(--ink); }

/* Explicit 4-up rather than auto-fit. auto-fit was leaving "Advanced" alone
   on a second row, centred, which read as an afterthought rather than as the
   top of the ladder. */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(30px, 4vw, 50px);
}

@media (max-width: 980px) { .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .audience-grid { grid-template-columns: 1fr; } }

.audience-card { text-align: center; }

/* White mount around the photograph, as on the original. It separates the
   image from the gold, which the warmer photos otherwise bleed into. */
.audience-frame {
  background: #fff;
  padding: 8px;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 12px 28px rgba(0,0,0,.08);
  margin-bottom: 20px;
}

.audience-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1px;
}

.audience-card h3 {
  font-family: var(--serif);
  font-size: clamp(21px, 2.3vw, 29px);
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: uppercase;
  margin-bottom: .35em;
}

.audience-for {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: .5em;
}

.audience-list { font-size: 16px; color: var(--ink); }
.audience-list li { padding: 2px 0; }

/* --- pricing ----------------------------------------------------- */

.pricing {
  padding: clamp(52px, 7vw, 84px) 0;
  background: var(--cream);
}

/* "Bold and bigger where it counts" - the family, on this section. What
   counts on a price card is the tier name, the figure and the lesson length.
   Everything else is support and stays quiet. */
.price-group-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 38px);
  text-align: center;
  margin: 2.4em 0 .2em;
}

.price-group-lead {
  text-align: center;
  color: var(--muted);
  margin-bottom: 2em;
}

.price-grid {
  /* Flex, not grid. CSS grid cannot centre a SHORT FINAL ROW - justify-content
     centres the whole block and leaves the orphan hard against the left edge.
     Flex wrapping centres each row independently, which is the whole reason
     for the switch. */
  display: flex;
  /* Violin has FIVE tiers against piano's four, so the last card was landing
     alone on a second row beside three empty columns. Squeezing all five onto
     one row was tried and is worse - at 199px "INTERMEDIATE" overflowed its
     card and every "Start now" broke across two lines. So the tracks are
     capped rather than stretched, and the row is centred: a short final row
     now sits in the middle of the grid instead of hanging off the left edge.

     252px is not arbitrary: the content column is 1100px, so four capped
     tracks plus three 26px gaps come to 1098. A wider cap drops piano to
     three across and strands ITS last card, which is the bug we started
     with wearing a different hat. */
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 2.2vw, 26px);
}

.price-card {
  flex: 1 1 212px;
  max-width: 252px;
  /* Without this a flex item refuses to go below its min-content width, and
     measuring the row showed the Intermediate card holding 252px while the
     two beside it were squeezed to 228 - three cards of visibly different
     widths in the same row. The widest heading is 210px against a 212px
     basis, so nothing overflows. */
  min-width: 0;
  /* The cap is there to stop four cards ballooning on a wide screen. On a
     phone, where the cards stack anyway, it would instead leave a narrow
     column floating in the middle of the screen - so it is lifted. */
  }

/* 480px, not 620: above this the 212px basis still fits two cards side by
   side and each stays under the cap, which is the right look on a tablet.
   Only a phone gets one card per row. */
@media (max-width: 480px) {
  .price-card { flex-basis: 100%; max-width: none; }
}

.price-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 28px 24px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
}

.price-name {
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: .35em;
}

/* Gold hairline under the name, so the eye lands name-then-figure. */
.price-name::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  background: var(--gold);
  margin: 12px auto 0;
}

.price-figure {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(52px, 5.6vw, 70px);
  line-height: 1;
  margin: .28em 0 .1em;
}
.price-sym { font-size: .62em; vertical-align: .12em; margin-right: .02em; }

.price-sub {
  font-size: 14px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5em;
}

.price-list {
  font-size: 16px;
  text-align: left;
  margin: 0 auto 26px;
  flex: 1 1 auto;
}
.price-list li {
  padding: 6px 0 6px 24px;
  position: relative;
  color: #333;
}
/* The lesson length is the first bullet, and the thing most often misread
   between the 30-minute and the 1-hour grid, so it carries the weight. */
.price-list li:first-child { font-weight: 600; color: var(--ink); }
.price-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 14px;
  width: 9px;
  height: 9px;
  background: var(--gold);
  border-radius: 50%;
}

.pricing-note {
  text-align: center;
  color: var(--muted);
  max-width: 60ch;
  margin: 2.6em auto 0;
  font-size: 15px;
}

.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-deep); }
.btn-ghost { border: 2px solid currentColor; color: inherit; }
.btn-ghost:hover { background: rgba(0,0,0,.08); }

/* --- violin "starting now" band --------------------------------- */

.new-band {
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: clamp(44px, 6vw, 68px) 0;
}
.new-band h2 { font-weight: 400; margin-bottom: .5em; }
.new-band .btn-dark { background: var(--ink); color: #fff; }

.cta-warm { background: var(--red); color: #fff; }
.cta-warm .btn-dark { background: var(--ink); color: #fff; }
.cta-warm b { color: var(--gold); }

/* --- benefits, find us, closing --------------------------------- */

/* --- "why learn" band -------------------------------------------
   Two complaints to answer at once: black-on-white was characterless, and
   text laid straight over the photograph was hard to read. So: keep the
   photograph, darken it hard, and then put the words on a solid panel rather
   than on the image. Contrast is fixed by the panel, not left to whatever
   happens to be behind a given line.
   ----------------------------------------------------------------- */

.why {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: clamp(56px, 8vw, 100px) 0;
}

.why-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(12,11,13,.94) 0%, rgba(12,11,13,.86) 46%, rgba(12,11,13,.55) 100%);
}

.why-inner { position: relative; }

.why-panel {
  max-width: 62ch;
  color: #F1EDE6;
  border-left: 4px solid var(--gold);
  padding-left: clamp(20px, 3vw, 34px);
}

.why-panel h2 {
  color: var(--gold);
  margin-bottom: .55em;
}

.why-panel p {
  font-size: clamp(16px, 1.7vw, 18px);
  line-height: 1.72;
  margin-bottom: 1.2em;
}
.why-panel p:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
  .why-shade { background: rgba(12,11,13,.9); }
}

.find-us { padding: 0 0 clamp(52px, 7vw, 84px); }
.find-us-lead {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto 2em;
  color: #3A3A3A;
}
.find-us-imgs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  max-width: 820px;
  margin: 0 auto;
}
.find-us-imgs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }

/* --- closing band -------------------------------------------------
   Was flat black, which the family found characterless. Gold, with the
   stave motif from the original running along both edges - one tiling SVG,
   about 2KB, crisp at any width and no photograph to load.
   ----------------------------------------------------------------- */

.closing {
  position: relative;
  background: var(--gold);
  color: var(--ink);
  text-align: center;
  padding: 0;
  overflow: hidden;
}

.closing-stave {
  height: clamp(58px, 8vw, 92px);
  background: url('/img/stave.svg') repeat-x center / auto 100%;
  opacity: .5;
}
.closing-stave-bottom { transform: rotate(180deg); }

.closing-inner { padding: clamp(24px, 4vw, 44px) 0 clamp(30px, 4.5vw, 52px); }

.closing-line {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.2;
  max-width: 20ch;
  margin: 0 auto .9em;
}

.closing .btn-dark { background: var(--ink); color: #fff; }
.closing .btn-dark:hover { background: #000; }

/* --- contact ----------------------------------------------------- */

.page-hero {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding: clamp(52px, 7vw, 88px) 0;
}
.page-hero h1 { color: #fff; margin-bottom: .3em; }
.page-hero p { margin: 0; opacity: .8; }

.contact-body {
  padding: clamp(48px, 6vw, 76px) 0 clamp(56px, 7vw, 88px);
  background: var(--cream);
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
  max-width: 760px;
  margin: 0 auto clamp(44px, 5vw, 68px);
}

.contact-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 34px 26px 30px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 26px rgba(0,0,0,.05);
}
.contact-card h2 { font-size: clamp(21px, 2.1vw, 26px); margin-bottom: .3em; }
.contact-card p { color: var(--muted); font-size: 15px; }

/* Gold disc behind the icon. This is the thing the old page had and the
   first static version did not - a shape you can find without reading. */
.contact-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
}
.contact-badge svg,
.contact-badge .nav-icon { width: 28px; height: 28px; }

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(22px, 3vw, 40px);
  border-top: 1px solid var(--rule);
  padding-top: clamp(36px, 4.5vw, 56px);
}

.info-block h2 {
  font-size: clamp(20px, 2vw, 24px);
  margin-bottom: .45em;
}
.info-block p { font-size: 16px; color: #3A3A3A; }
.info-block p:last-child { margin-bottom: 0; }

.info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: var(--gold-wash);
  color: var(--gold-deep);
  border: 1px solid #F0DFAE;
}
.info-icon svg,
.info-icon .nav-icon { width: 22px; height: 22px; }

.hours-light { color: var(--ink); max-width: 300px; }
.hours-light dt { opacity: .6; }

/* --- legal pages -------------------------------------------------- */

/* --- legal pages ---------------------------------------------------
   Dull to read is the point; dull to look at is not. The document gets a
   header band, sits on a white sheet over the cream ground, and every
   numbered section is announced by a gold rule so it can be found by
   scrolling rather than by reading.
   ------------------------------------------------------------------ */

.legal { background: var(--cream); }

.legal-head {
  background: var(--ink);
  color: #fff;
  padding: clamp(44px, 6vw, 72px) 0 clamp(52px, 7vw, 84px);
}
.legal-head h1 { color: #fff; margin: 0 0 .25em; }

.legal-kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}

.legal-date { color: rgba(255,255,255,.62); font-size: 15px; margin: 0; }

.legal-body {
  max-width: 900px;
  padding-bottom: clamp(52px, 7vw, 88px);
}

/* Pulled up over the header band, so the sheet reads as a document laid on
   the page rather than another full-width stripe. */
.legal-sheet {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: clamp(30px, 5vw, 60px) clamp(24px, 5vw, 64px);
  margin-top: clamp(-64px, -5vw, -34px);
  box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 18px 44px rgba(0,0,0,.07);
}

.legal-sheet > :first-child { margin-top: 0; }

.legal-sheet h2 {
  font-size: clamp(21px, 2.3vw, 28px);
  margin-top: 2.2em;
  margin-bottom: .55em;
  padding-top: 1.1em;
  border-top: 1px solid var(--rule);
}
.legal-sheet h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--gold);
  margin-bottom: 18px;
}
.legal-sheet h2:first-child { border-top: 0; padding-top: 0; }

.legal-sheet p { color: #333; }
.legal-sheet p b { color: var(--ink); }

.legal-sheet ul { list-style: none; padding-left: 0; margin: 0 0 1.2em; }
.legal-sheet li {
  position: relative;
  padding-left: 26px;
  margin-bottom: .5em;
  color: #333;
}
.legal-sheet li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.legal hr { display: none; }

.legal-contact {
  margin-top: 3em;
  padding-top: 1.6em;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 15px;
}

/* Whoever is on one of these is often after a different one. */
.legal-more {
  margin-top: clamp(28px, 4vw, 44px);
  text-align: center;
}
.legal-more h2 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.legal-more ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.legal-more a {
  display: inline-block;
  padding: 9px 20px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 15px;
  text-decoration: none;
}
.legal-more a:hover { border-color: var(--gold-deep); background: var(--gold-wash); }

/* Ask for a review.
   Cream, not gold - the closing band on the same page is already gold and two
   gold bands in a row read as one long one. Centred and narrow because it is
   a single request, not a section to read. */
.review-band {
  background: var(--gold-wash);
  border-top: 1px solid rgba(0,0,0,.07);
  border-bottom: 1px solid rgba(0,0,0,.07);
  padding: clamp(38px, 5vw, 60px) 0;
  text-align: center;
}
.review-inner { max-width: 52ch; margin-inline: auto; }
.review-stars {
  display: block;
  color: var(--gold);
  font-size: 22px;
  letter-spacing: 4px;
  margin-bottom: 10px;
}
.review-band h2 {
  font-family: var(--serif);
  font-size: clamp(23px, 2.4vw, 30px);
  margin: 0 0 10px;
}
.review-band p { margin: 0 0 22px; }


/* ===================================================================
   Piano Stars  -  /piano-stars
   -------------------------------------------------------------------
   The page that has no equivalent on any competitor site. Four of the
   six local schools show a teacher's certificates; none of them show a
   child playing. The design has one job: get out of the way of the
   footage.

   So: no decoration inside the frame, no gradient over a face, one
   accent colour, and a card that reads the same whether it holds a
   video or a photograph.
   =================================================================== */


/* --- the results strip ---------------------------------------------
   Ink, sitting between two pale bands, so the eye cannot skip it. Gold
   numerals - the only place on the site where the brand colour is used
   at that size, which is what makes it read as the claim of the page.
-------------------------------------------------------------------- */

.results {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(44px, 6vw, 68px) 0;
}

.results-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
  text-align: center;
}

.results-cell { margin: 0; }

.results-figure {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(46px, 7vw, 76px);
  line-height: 1;
  color: var(--gold);
  margin: 0 0 10px;
}

/* Units sit smaller and lighter so the number itself is what carries. */
.results-unit { font-size: .5em; font-weight: 600; }

.results-label {
  margin: 0 auto;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  max-width: 22ch;
}

.results-foot {
  margin: clamp(28px, 4vw, 44px) auto 0;
  max-width: 58ch;
  text-align: center;
  color: rgba(255,255,255,.72);
  font-size: 16px;
}

@media (max-width: 720px) {
  .results-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* --- the media frame ------------------------------------------------
   Shared by the feature and the grid so a mixed row lines up. The fixed
   aspect ratio is what stops the page jumping as posters load, and the
   near-black ground means a portrait clip letterboxes into something
   deliberate rather than a white gap.
-------------------------------------------------------------------- */

.star-media {
  position: relative;
  /* Portrait, because every clip and photograph the families sent is
     portrait - they were shot on a phone in a front room. A 16:9 frame
     cropped a child at a piano down to a strip of keyboard. */
  aspect-ratio: 3 / 4;
  background: #101010;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
}

.star-media video,
.star-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Only ever visible while stars.json still holds example entries.
   build.py --check refuses to ship a page containing one. */
.star-draft {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 2px;
}

/* --- badges --------------------------------------------------------- */

.star-badges {
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 2px;
  line-height: 1.3;
}

.badge-grade { background: var(--ink); color: var(--cream); }

/* Gold is reserved for the award. If every badge were gold the
   distinction would stop meaning anything. */
.badge-award { background: var(--gold); color: var(--ink); }

/* ===================================================================
   Frequently asked questions  -  /faq
   -------------------------------------------------------------------
   <details>/<summary>, not a scripted accordion: keyboard accessible
   without any work, open before JavaScript runs, and - the part that
   matters on a page whose whole purpose is search - every answer is in
   the HTML whether or not it is expanded.
   =================================================================== */

.page-hero-lead {
  max-width: 56ch;
  margin: 0;
  color: rgba(255,255,255,.82);
}

.faq-group { padding: clamp(38px, 5vw, 56px) 0 0; }
.faq-group:last-of-type { padding-bottom: clamp(48px, 7vw, 76px); }

.faq-heading {
  font-size: clamp(22px, 2.6vw, 29px);
  margin: 0 0 6px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--gold);
}

.faq-list { max-width: 80ch; }

.faq-item { border-bottom: 1px solid var(--rule); }

.faq-q {
  cursor: pointer;
  list-style: none;
  padding: 20px 44px 20px 0;
  position: relative;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 600;
  line-height: 1.35;
}

.faq-q::-webkit-details-marker { display: none; }

/* A plus that becomes a minus. Two bars of background colour rather
   than a glyph, so it stays crisp and needs no icon font. */
.faq-q::after,
.faq-q::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  background: var(--gold-deep);
  transition: transform .18s ease, opacity .18s ease;
}

.faq-q::before { width: 16px; height: 2px; margin-top: -1px; }
.faq-q::after  { width: 2px; height: 16px; margin-top: -8px; right: 15px; }

.faq-item[open] .faq-q::after { transform: rotate(90deg); opacity: 0; }

.faq-q:hover { color: var(--gold-deep); }

.faq-a { padding: 0 44px 22px 0; }
.faq-a p { margin: 0; max-width: 68ch; color: #3A3A3A; }

@media (prefers-reduced-motion: reduce) {
  .faq-q::after, .faq-q::before { transition: none; }
}

/* The featured pupil's frame runs a little taller than the grid's. It sits
   beside a column of text rather than above one, so the extra height costs
   nothing and lets a whole child fit in the frame. */
.star-feature-media .star-media { aspect-ratio: 4 / 5; }

@media (max-width: 900px) {
  /* Stacked, the feature is just a wide card again. */
  .star-feature-media .star-media { aspect-ratio: 3 / 4; }
}

/* ===================================================================
   Motion
   -------------------------------------------------------------------
   The family asked for the page to feel less plain, and specifically
   for the numbers to climb as you reach them.

   What was NOT done, deliberately: a carousel. It would hide most of
   the children behind a control nobody presses, and a crawler reads
   only the visible slide - so it would cost us the one page whose
   whole purpose is to be read. Scale and movement do the same job
   without taking the content away.

   Everything below is enhancement. `.reveal` only hides itself under
   `html.js`, which is set by an inline script before first paint, so
   with scripting off the page is simply static.
   =================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .62s cubic-bezier(.22, .61, .36, 1),
              transform .62s cubic-bezier(.22, .61, .36, 1);
}

/* The figures are tabular while counting so the row does not jitter as
   the digit count changes on the way up to 100. */
.results-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* --- the media lifts under the cursor --------------------------------
   A small, slow lift. Anything faster reads as a web app; this should
   read as a photograph someone has picked up.
-------------------------------------------------------------------- */



/* Only stills. Scaling a playing video is a repaint on every frame, and
   a parent watching does not want the picture creeping. */

/* --- the featured pupil sits on a gold plate -------------------------
   The page's one moment of composition: the photograph is offset from a
   block of colour behind it, so it reads as placed rather than pasted.
   Decorative, so it is hidden from assistive technology by being drawn
   with a pseudo-element rather than an extra node.
-------------------------------------------------------------------- */

.star-feature { position: relative; overflow: hidden; }

.star-feature-media { position: relative; }

.star-feature-media::before {
  content: "";
  position: absolute;
  inset: 26px -26px -26px 26px;
  background: var(--gold);
  border-radius: 3px;
  z-index: 0;
}

.star-feature-media .star-media { position: relative; z-index: 1; }

@media (max-width: 900px) {
  /* Stacked, the offset plate runs off the side of a phone. */
  .star-feature-media::before { display: none; }
}

/* A very soft warm wash behind the feature, so the band separates from
   the plain paper above it without another hard edge. */
.star-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--paper) 0%, var(--gold-wash) 100%);
  opacity: .55;
  z-index: -1;
}

/* --- honour the setting ---------------------------------------------
   Someone who has asked their device for less motion gets none of it.
   The count-up is disabled in script as well, so the number is simply
   correct from the first paint.
-------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .star-card,
  .star-media img,
  .star-media video { transition: none; }
  .star-card:hover { transform: none; }
  .star-card:hover .star-media img { transform: none; }
}

/* --- a little more air and scale ------------------------------------
   The other half of "it looks plain": the type was sized for a text
   page and the cards were packed. Bigger names, wider gutters, and
   three across instead of four on a large screen so each photograph
   gets to be a photograph.
-------------------------------------------------------------------- */

.star-grid {
  grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 30vw, 340px), 1fr));
  gap: clamp(28px, 3.6vw, 46px);
}

.star-name { font-size: clamp(22px, 2.3vw, 26px); }

.stars-consent {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  color: var(--muted);
  max-width: 68ch;
}

/* --- the play button -------------------------------------------------
   Replaces Chrome's control bar, which it draws across an idle poster -
   a scrubber, a volume slider and a kebab menu lying over a child's
   face on every card. Ours is one target, big enough for a thumb, and
   it gets out of the way the moment the clip starts.
-------------------------------------------------------------------- */

.star-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Deliberately NOT gold. The family: "too much" - and they were right.
     Every card already carries a gold sticker, and a second gold disc in
     the middle of the photograph fought it. A plain white disc reads as a
     control rather than as decoration, and it disappears the moment the
     clip starts. */
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), background .28s ease;
}

.star-play:hover,
.star-play:focus-visible {
  background: #FFFFFF;
  transform: translate(-50%, -50%) scale(1.08);
}

/* The triangle, drawn from a border rather than a glyph so it stays
   crisp and needs no icon font. Nudged right, because a triangle
   centred on its bounding box looks left of centre. */
.star-play-tri {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 20px solid var(--ink);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}

.star-feature-media .star-play { width: 88px; height: 88px; }
.star-feature-media .star-play-tri {
  border-left-width: 25px;
  border-top-width: 16px;
  border-bottom-width: 16px;
}

/* A card with only a name in it should not reserve space for the
   paragraph it has not got. */

@media (prefers-reduced-motion: reduce) {
  .star-play { transition: none; }
  .star-play:hover { transform: translate(-50%, -50%); }
}

/* ===================================================================
   Stars
   -------------------------------------------------------------------
   The family picked four of the twelve: soft, double, shooting, starry.
   Dealt out in that order so no two neighbouring cards match.

   Shooting and starry are the busy ones. They are legible at 60px and
   they are mush at 40, which is why the corner mark got bigger rather
   than the shapes getting simpler.
   =================================================================== */

.star-mark { display: block; fill: var(--gold); color: var(--gold); }

/* The darker inner star on style 9. It has to be a colour, not an
   opacity, or it disappears over a light photograph. */
.star-mark .star-inner { fill: var(--gold-deep); }

/* Big, beside the featured pupil's name. */
.star-lg {
  width: clamp(74px, 7.5vw, 96px);
  height: auto;
  margin: 0 0 14px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .16));
}

/* Bigger still, filling the hole under the intro heading. */
.star-xl {
  width: clamp(110px, 12vw, 156px);
  height: auto;
  margin: 34px 0 0;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .13));
}

@media (max-width: 860px) {
  .star-xl { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .star-corner { transition: none; }
  .star-card:hover .star-corner { transform: none; }
}

/* ===================================================================
   RESTORED. The layout corrections below were collateral damage when
   the seal stylesheet was deleted - they had been appended after it,
   and the delete took a range rather than a block. Re-added verbatim.
   =================================================================== */

/* The card grid was fitting TWO across on a wide screen, not three: the
   minimum column clamped to 340px and three of those plus two 46px gaps
   came to 1112px against 1100px available. Twelve pixels short, so every
   card doubled in size. */
.star-grid {
  grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 20vw, 300px), 1fr));
  gap: clamp(22px, 2.6vw, 38px);
}

/* The intro is a two column band inherited from the homepage. It suits a
   long heading and leaves a hole under a short one, so the column is
   narrower and the big star goes in the hole. */

/* The featured pupil: text floating beside a much taller photograph. The
   columns are closer to even now, and the text sits on a panel so a
   sparse column reads as a deliberate block rather than as unfinished. */
.star-feature-inner { grid-template-columns: 1.06fr 1fr; }

.star-feature-body {
  background: var(--card);
  border-radius: 3px;
  padding: clamp(28px, 3.2vw, 44px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .07);
  border-top: 4px solid var(--gold);
}

@media (max-width: 900px) {
  .star-feature-inner { grid-template-columns: 1fr; }
}

/* The gold plate behind the featured photograph was reading as a stray
   yellow bar down one edge. Pulled in and softened. */
.star-feature-media::before {
  inset: 20px -20px -20px 20px;
  opacity: .9;
}

/* ===================================================================
   The star as a sticker
   -------------------------------------------------------------------
   Overhanging the top right corner of the frame rather than sitting
   inside it - the family's word was "sticker", and a sticker is only
   a sticker if it breaks the edge.

   That means the CARD cannot clip: .star-card loses overflow:hidden,
   and the frame keeps its own so the photograph still respects the
   rounded corner. The white outline is what makes it read as applied
   rather than as part of the picture.
   =================================================================== */


.star-sticker {
  position: absolute;
  top: -20px;
  right: -16px;
  width: 68px;
  height: 68px;
  z-index: 4;
  transform: rotate(12deg);
  /* Two shadows: a white one to cut the star out of whatever is behind
     it, and a real one underneath so it sits above the page. */
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 3px #fff)
          drop-shadow(0 5px 10px rgba(0, 0, 0, .28));
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

.star-sticker-lg {
  width: clamp(78px, 8vw, 104px);
  height: auto;
  top: -26px;
  right: -22px;
}


/* The feature's frame sits on a gold plate that overhangs to the right,
   so its sticker needs to clear that too. */
.star-feature-media { position: relative; }

@media (max-width: 620px) {
  .star-sticker { width: 54px; height: 54px; top: -14px; right: -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .star-sticker { transition: none; }
  .star-card:hover .star-sticker { transform: rotate(12deg); }
}

/* The intro band is a two column grid, so the big star flowed into the
   second column and landed on top of the first paragraph. Pin it under
   the heading, which is the hole it was drawn to fill. */

/* The intro band is a two column grid, and every paragraph was a separate
   grid item. The left column - heading plus a 156px star - was taller
   than the right, so the grid stretched the right column's rows to match
   and left a hole in the middle of the copy. One wrapper makes the right
   column a single item that sizes to its own content. */
.stars-intro-body {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}


@media (max-width: 860px) {
  .stars-intro-body { grid-column: 1; grid-row: auto; }
}

/* ===================================================================
   The wall
   -------------------------------------------------------------------
   No names (2026-09-06), so there are no cards any more - a card is a
   container for a name and a line of text, and there is neither. What
   is left is a wall of children playing, which is what the page was
   always actually about.
   =================================================================== */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 18vw, 268px), 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}

.tile {
  position: relative;
  margin: 0;
}

.tile .star-media {
  border-radius: 3px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1),
              box-shadow .35s ease;
}

.tile:hover .star-media {
  transform: translateY(-5px);
  box-shadow: 0 20px 42px rgba(0, 0, 0, .17);
}

.tile-badges {
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* --- the empty tiles -------------------------------------------------
   While we wait on the other families. Drawn as an obvious blank rather
   than left as a gap, so the last row does not end mid-air - and it says
   what it is, rather than looking like a photograph that failed.
-------------------------------------------------------------------- */

.tile-empty .star-media,
.tile-empty { box-shadow: none; }

.tile-empty-inner {
  aspect-ratio: 3 / 4;
  border: 2px dashed #DCD6CF;
  border-radius: 3px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: #A9A29A;
  background: rgba(255, 255, 255, .4);
}

.tile-empty-star { width: 44px; height: 44px; opacity: .5; }

.tile-empty p {
  margin: 0;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .tile .star-media { transition: none; }
  .tile:hover .star-media { transform: none; }
}

/* ===================================================================
   The brand lockup
   -------------------------------------------------------------------
   Real text beside the original gold icon, replacing a 146KB traced
   SVG that said "PIANO FOR BEGINNERS" while everything else on the
   internet said Piano4Beginners (Q46).

   Playfair Display at the same weights the headings use, so it belongs
   to the same typographic family rather than approximating a logo.
   =================================================================== */

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 0;
  margin-right: auto;
  text-decoration: none;
  color: var(--cream);
}

.brand-icon {
  width: 34px;
  height: 44px;
  flex: none;
  display: block;
}

.brand-word {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--serif);
  text-transform: uppercase;
}

.brand-line-1 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .012em;
}

/* The 4 is the whole point of the change, so it is allowed to be gold.
   It also stops "PIANO4" reading as a typo for "PIANO". */
.brand-four { color: var(--gold); }

.brand-line-2 {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .118em;
  margin-top: 2px;
}

@media (max-width: 520px) {
  .brand-icon { width: 27px; height: 35px; }
  .brand-line-1 { font-size: 20px; }
  .brand-line-2 { font-size: 12.5px; letter-spacing: .1em; }
}

/* The wall's own spacing. This was lost when the card stylesheet was
   deleted - the block that held it also held `.stars`, and the grid ended
   up butting straight into the dark band above and the red band below.

   The top padding is larger than it looks like it needs to be because the
   star stickers overhang the first row by 20px; without the extra, they
   collide with whatever section sits above. */
.stars {
  padding: clamp(56px, 7vw, 92px) 0 clamp(56px, 8vw, 96px);
}

/* And the heading that introduces it, when there is one. */
.stars-more { padding: clamp(28px, 4vw, 48px) 0 0; }

/* The illustration label. Legible without shouting: a parent who looks
   should be able to tell, which is the entire purpose. Deliberately not
   made subtle enough to miss. */
.tile-illustration {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  background: rgba(26, 26, 26, .82);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 2px;
}

/* ===================================================================
   The celebration band
   -------------------------------------------------------------------
   Replaces the paragraph that used to explain the page. The family
   wanted the words gone, more than one colour, stars behind, and the
   photographs underneath.

   The restraint is deliberate: the stars sit between 13% and 28%
   opacity and never overlap the text's own column at full size. At
   full strength they compete with the children's faces in the grid
   below, which are the actual subject.
   =================================================================== */

.celebrate {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--paper) 0%, var(--gold-wash) 100%);
  padding: clamp(64px, 8vw, 108px) 0 clamp(56px, 7vw, 92px);
  text-align: center;
}

.scatter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scatter-star {
  position: absolute;
  display: block;
  color: var(--gold-deep);
  fill: var(--gold-deep);
}

.scatter-star svg { width: 100%; height: auto; display: block; }

.celebrate-inner { position: relative; }

.celebrate-kicker {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.celebrate-title {
  margin: 0 0 .35em;
  font-size: clamp(38px, 6.4vw, 78px);
  line-height: 1.02;
  letter-spacing: -.015em;
}

/* The second colour. Gold on the words that matter, ink on the rest -
   two colours, not four, or the line stops reading as a sentence. */
.celebrate-gold { color: var(--gold-deep); }

.celebrate-small {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-size: .52em;
  color: var(--ink);
  margin-top: .12em;
}

.celebrate-line {
  margin: 0 auto;
  max-width: 38ch;
  font-size: clamp(17px, 1.9vw, 21px);
  color: #3A3A3A;
}

@media (max-width: 640px) {
  /* Half the scatter on a phone - at that width the full dozen crowds
     the headline instead of framing it. */
  .scatter-star:nth-child(even) { display: none; }
}