/* ==========================================================================
   Graded Path page
   Sits on top of the landing page's own tokens.css and styles.css, which
   supply the header, footer, .section, .eyebrow, .section__title, .btn,
   .check-row, the week chart and the FAQ accordion. Everything in here is
   page-only and prefixed gp-.

   Breakpoints follow styles.css: 1023px (tablet), 900px (the site's main
   mobile switch), 560px (small phones).
   ========================================================================== */

.gp-page { background: var(--bg-light); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Section bands alternate white / subtle, like the landing page. */
.gp-band--white  { background: var(--surface-default); }
.gp-band--subtle { background: var(--surface-subtle); }
section[id] { scroll-margin-top: var(--header-h); }

/* A left-aligned eyebrow (the shared one centres itself). */
.gp-left { justify-content: flex-start; }

/* ==========================================================================
   01 Hero: a grand piano in a sunlit room fills the band. The copy sits on
   the bare wall to the left; the wall is dark enough for white text as is.
   ========================================================================== */
.gp-hero {
  position: relative;
  overflow: hidden;
  background:
    url("hero-piano-1781.webp") 72% 100% / cover no-repeat,
    #686662;
  padding: calc(var(--header-h) + 72px) var(--gutter) 88px;
  color: var(--text-inverse);
}
@media (max-width: 1200px) {
  .gp-hero {
    background:
      /* Narrower screens crop the photo so the piano slides under the
         copy; a fade in the wall's own grey (no colour) keeps it legible. */
      linear-gradient(90deg, rgb(104 102 98 / 0.92) 0%, rgb(104 102 98 / 0.82) 42%, rgb(104 102 98 / 0) 68%),
      url("hero-piano-1200.webp") 72% 100% / cover no-repeat,
      #686662;
  }
}
.gp-hero__inner {
  position: relative;
  z-index: 1;
  min-height: min(600px, calc(100svh - var(--header-h) - 160px));
  display: flex;
  align-items: center;
}
.gp-hero__copy { display: flex; flex-direction: column; gap: 22px; max-width: 560px; }
/* Breadcrumb: Home > Graded Path, small and quiet above the title. */
.gp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gp-crumbs li { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-weight: 500; font-size: 14px; letter-spacing: 0.02em; }
.gp-crumbs a { color: rgb(255 255 255 / 0.8); text-decoration: none; transition: color 0.2s ease; }
.gp-crumbs a:hover, .gp-crumbs a:focus-visible { color: var(--lime-200); }
.gp-crumbs svg { width: 18px; height: 18px; color: rgb(255 255 255 / 0.6); }
.gp-crumbs [aria-current] { color: var(--lime-200); }
.gp-hero__title {
  font-weight: 700;
  font-size: clamp(44px, 4.6vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text-inverse);
}
/* One word picked out in lime, in the title's own face and weight. */
.gp-hero__title em {
  font-style: normal;
  color: var(--lime-300);
}
.gp-hero__lede {
  font-family: var(--font-body);
  font-size: var(--size-body-lg);
  line-height: 1.6;
  color: rgb(255 255 255 / 0.88);
  max-width: 520px;
}
.gp-hero__stats { display: flex; margin: 6px 0 0; }
.gp-hero__stats div { padding: 0 28px; border-left: 1px solid rgb(255 255 255 / 0.16); text-align: center; }
.gp-hero__stats div:first-child { padding-left: 0; border-left: 0; }
.gp-hero__stats dt {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--size-h3);
  line-height: 1;
  color: var(--lime-200);
}
.gp-hero__stats dd { margin: 6px 0 0; font-family: var(--font-body); font-size: var(--size-body-sm); color: rgb(255 255 255 / 0.85); }
.gp-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.gp-btn--ghost-dark { color: var(--text-inverse); border-color: rgb(255 255 255 / 0.28); }
.gp-btn--ghost-dark:hover { background: rgb(255 255 255 / 0.08); }
.gp-btn--ghost-dark:focus-visible { outline: 2px solid var(--lime-200); outline-offset: 2px; }

/* Load: the copy rises in, line by line. */
@media (prefers-reduced-motion: no-preference) {
  .gp-hero__copy > * { opacity: 0; animation: gp-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  .gp-hero__copy > :nth-child(1) { animation-delay: 0.05s; }
  .gp-hero__copy > :nth-child(2) { animation-delay: 0.12s; }
  .gp-hero__copy > :nth-child(3) { animation-delay: 0.2s; }
  .gp-hero__copy > :nth-child(4) { animation-delay: 0.28s; }
  .gp-hero__copy > :nth-child(5) { animation-delay: 0.36s; }
}
@keyframes gp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Scroll reveal (graded-path.js adds .is-in). Visible by default without JS. */
.js .gp-reveal { opacity: 0; transform: translateY(28px); }
.js .gp-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .js .gp-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   02 The route: four milestones on one vertical timeline
   ========================================================================== */
#route { overflow-x: clip; padding-bottom: var(--space-16); }
.gp-ms {
  --ring: 220px;
  --gap: 72px;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The spine runs from the first ring's centre to the last one's (graded-path.js
   measures it) and fills in indigo as you scroll down the climb. */
.gp-ms__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--border-default);
}
.gp-ms__rail span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-primary);
  transform-origin: top;
  transform: scaleY(var(--p, 1));
}

/* One milestone per screen: how long | ring | what you play on. */
.gp-ms__step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ring) minmax(0, 1fr);
  grid-template-areas: "time hub stuff";
  align-items: center;
  column-gap: var(--gap);
  min-height: max(640px, calc(100svh - var(--header-h) - 56px));
  padding-block: 48px;
}
/* The first milestone follows the section heading directly; only the
   later ones get a full screen each. */
.gp-ms__step--1 { min-height: 0; padding-top: var(--space-14); }
/* The last one ends where its content ends, not a screen of white. */
.gp-ms__step--4 { min-height: 0; padding-bottom: 0; }

/* ---- The ring: fills a quarter more at every milestone ---- */
.gp-ms__hub { grid-area: hub; position: relative; z-index: 1; text-align: center; }
.gp-ring {
  position: relative;
  width: var(--ring);
  height: var(--ring);
  margin-inline: auto;
}
.gp-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  border-radius: 50%;
  background: var(--surface-default);
}
/* Dotted leaders out to both sides, as on a printed timeline. */
.gp-ring::before,
.gp-ring::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--gap) - 16px);
  height: 4px;
  margin-top: -2px;
  background: radial-gradient(circle, var(--indigo-200) 1.5px, transparent 2px) 0 0 / 10px 4px repeat-x;
}
.gp-ring::before { right: calc(100% + 8px); }
.gp-ring::after  { left: calc(100% + 8px); }

.gp-ring__track, .gp-ring__arc { fill: none; stroke-width: 14; }
.gp-ring__track { stroke: var(--indigo-50); }
.gp-ring__arc {
  stroke: var(--brand-primary);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--to));
  transform: rotate(-90deg);
  transform-origin: 100px 100px;
}
.gp-ring__knob {
  transform-origin: 100px 100px;
  transform: rotate(calc(var(--to) * 3.6deg));
}
.gp-ring__knob circle { fill: var(--brand-accent); stroke: var(--brand-primary); stroke-width: 4; }

.gp-ring__text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.gp-ring__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-accent);
}
.gp-ring__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: var(--weight-bold);
  line-height: 1.1;
  color: var(--text-brand);
}
.gp-ms__step--3 .gp-ring__name { font-size: 25px; }
.gp-ms__what {
  margin: 18px auto 0;
  max-width: 260px;
  padding: 8px 0;
  background: var(--surface-default);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.5;
  color: var(--text-secondary);
}
.gp-ms__what b { color: var(--text-primary); }

/* ---- The two sides ---- */
.gp-ms__side { width: 100%; max-width: 380px; }
.gp-ms__side--time  { grid-area: time; justify-self: end; }
.gp-ms__side--stuff { grid-area: stuff; justify-self: start; }

.gp-ms__label {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
* + .gp-ms__label { margin-top: 32px; }

/* The plan: how long and daily practice on one card, an icon tile per row. */
.gp-plan {
  width: 100%;
  max-width: 340px;
  padding: var(--space-6);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl);
  background: var(--surface-default);
  box-shadow: 0 24px 48px -32px rgb(30 26 77 / 0.35);
}
.gp-plan__row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas: "icon label" "icon value";
  column-gap: var(--space-4);
  align-items: center;
}
.gp-plan__row + .gp-plan__row { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border-default); }
.gp-plan__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  background: var(--lime-100);
  color: var(--brand-primary);
}
.gp-plan__icon svg { width: 24px; height: 24px; }
.gp-plan__label {
  grid-area: label;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.gp-plan__value {
  grid-area: value;
  margin: 2px 0 0;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--weight-medium);
  line-height: 1.1;
  color: var(--text-primary);
}
.gp-plan__value b { font-size: 36px; font-weight: var(--weight-bold); color: var(--text-brand); }
.gp-plan__value small {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
/* On the stand: the real books stacked one over the other, each one a
   little lower and further right, the back book tilted left and the front
   one tilted right, on a soft indigo patch. Hover spreads them apart. */
.gp-stack {
  --w: 150px;
  --h: 200px;
  --step: 72px;
  --drop: 18px;
  --tilt: 10deg;
  position: relative;
  isolation: isolate;
  width: calc(var(--w) + (var(--n) - 1) * var(--step));
  height: calc(var(--h) + (var(--n) - 1) * var(--drop));
  margin: 0 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}
.gp-stack::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -8%;
  right: -12%;
  top: 14%;
  bottom: 2%;
  border-radius: 48% 52% 46% 54% / 55% 50% 50% 45%;
  background: var(--indigo-50);
  transform: rotate(-6deg);
}
.gp-stack:hover { --step: 88px; }
.gp-stack__book {
  /* -6deg on the back book to +4deg on the front one, spread evenly. */
  --r: calc(-6deg + var(--i) * var(--tilt) / max(var(--n) - 1, 1));
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w);
  height: var(--h);
  border-radius: 4px 10px 10px 4px;
  overflow: hidden;
  background: var(--surface-subtle);
  box-shadow: 0 22px 34px -18px rgb(30 26 77 / 0.55), 0 2px 6px rgb(30 26 77 / 0.14);
  transform:
    translate(calc(var(--i) * var(--step)), calc(var(--i) * var(--drop) - var(--lift, 0px)))
    rotate(var(--r));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.gp-stack__book:hover { --lift: 12px; box-shadow: 0 30px 42px -20px rgb(30 26 77 / 0.6), 0 2px 6px rgb(30 26 77 / 0.14); }
.gp-stack__book img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The spine's crease and a soft sheen, so a flat cover reads as a book. */
.gp-stack__book::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.28) 0 4px, rgb(255 255 255 / 0.22) 4px 6px, rgb(0 0 0 / 0.08) 6px 12px, transparent 16px),
    linear-gradient(115deg, rgb(255 255 255 / 0.16) 0%, transparent 38%);
}

.gp-ms__small {
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-size: var(--size-body-sm);
  line-height: 1.6;
  color: var(--text-muted);
}


/* ---- Motion: each milestone plays in as it reaches the middle of the
   screen (graded-path.js adds .is-in). Without JS everything is drawn. ---- */
.js .gp-ms__rail span { transform: scaleY(var(--p, 0)); }
.js .gp-ring { transform: scale(0.86); opacity: 0.35; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s; }
.js .gp-ring__arc { stroke-dashoffset: calc(100 - var(--from)); transition: stroke-dashoffset 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.15s; }
.js .gp-ring__knob { transform: rotate(calc(var(--from) * 3.6deg)); transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.15s; }
.js .gp-ms__what,
.js .gp-ms__side { opacity: 0; transition: opacity 0.7s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.js .gp-ms__what { transform: translateY(16px); transition-delay: 0.3s; }
.js .gp-ms__side--time  { transform: translateX(-56px); transition-delay: 0.2s; }
.js .gp-ms__side--stuff { transform: translateX(56px); transition-delay: 0.2s; }
.js .gp-stack__book {
  opacity: 0;
  transform: translate(calc(var(--i) * var(--step) + 80px), calc(var(--i) * var(--drop) + 24px)) rotate(14deg);
  transition: opacity 0.6s, transform 0.9s cubic-bezier(0.34, 1.3, 0.64, 1);
  transition-delay: calc(0.4s + var(--i) * 0.14s);
}

.js .gp-ms__step.is-in .gp-ring { transform: none; opacity: 1; }
.js .gp-ms__step.is-in .gp-ring__arc { stroke-dashoffset: calc(100 - var(--to)); }
.js .gp-ms__step.is-in .gp-ring__knob { transform: rotate(calc(var(--to) * 3.6deg)); }
.js .gp-ms__step.is-in .gp-ms__what,
.js .gp-ms__step.is-in .gp-ms__side { opacity: 1; transform: none; }
.js .gp-ms__step.is-in .gp-stack__book {
  opacity: 1;
  transform:
    translate(calc(var(--i) * var(--step)), calc(var(--i) * var(--drop) - var(--lift, 0px)))
    rotate(var(--r));
}
/* Once in, hover moves quickly again (no stagger). */
.js .gp-ms__step.is-in .gp-stack:hover .gp-stack__book { transition-delay: 0s; transition-duration: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  .js .gp-ms *, .js .gp-ms *::before, .js .gp-ms *::after { transition: none !important; }
}


/* ==========================================================================
   04 Skills: "Five Skills. Trained Every Week."
   One big dark card for Pieces (most of the marks), four light cards for
   the rest. Every card is copy top-left and a 3D illustration anchored
   bottom-right, sitting on a soft indigo disc so the art has a ground to
   stand on rather than floating on white. The art (skills/*.webp) is
   trimmed to its own edges, so each one's size and offset below is set by
   eye against its shape, not by a shared box.
   ========================================================================== */
.gp-skills-band {
  --skill-blue: var(--indigo-700);
  background:
    radial-gradient(60% 50% at 6% 12%, color-mix(in srgb, var(--indigo-50) 90%, transparent), transparent 70%),
    radial-gradient(45% 45% at 96% 4%, color-mix(in srgb, var(--indigo-50) 80%, transparent), transparent 70%),
    var(--surface-default);
}

.gp-skills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1.42fr repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(250px, auto);
  gap: 20px;
}
.gp-skill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--indigo-100);
  border-radius: var(--radius-2xl);
  background: linear-gradient(160deg, var(--surface-default) 40%, color-mix(in srgb, var(--indigo-50) 70%, var(--surface-default)));
  box-shadow: 0 12px 32px -18px color-mix(in srgb, var(--indigo-900) 22%, transparent);
}
/* The disc behind the art. */
.gp-skill::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -56px;
  bottom: -72px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--indigo-100) 85%, transparent) 0%, color-mix(in srgb, var(--indigo-50) 60%, transparent) 55%, transparent 72%);
}
.gp-skill__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Headings run the full card width; only the line under them makes room
   for the art in the bottom-right corner. */
.gp-skill p { max-width: 60%; }
.gp-skill h3 {
  font-weight: 600;
  font-size: var(--size-h5);
  line-height: var(--lh-h5);
  letter-spacing: var(--track-h5);
  color: var(--text-primary);
}
.gp-skill p {
  font-family: var(--font-body);
  font-size: var(--size-body-sm);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--track-body-sm);
  color: var(--text-secondary);
}

.gp-skill__art {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.gp-skill__art--scales  { width: 60%; right: -3%; bottom: -3%; }
.gp-skill__art--reading { width: 42%; right: 3%;  bottom: -3%; }
.gp-skill__art--aural   { width: 40%; right: 3%;  bottom: 6%; }
.gp-skill__art--theory  { width: 42%; right: 0;   bottom: 2%; }

/* Pieces: the big one, dark, with the grand piano filling its right half. */
.gp-skill--lead {
  grid-row: span 2;
  padding: 36px;
  border-color: var(--surface-inverse);
  background:
    radial-gradient(70% 55% at 85% 30%, color-mix(in srgb, var(--indigo-700) 45%, transparent), transparent 70%),
    linear-gradient(160deg, var(--indigo-900), var(--surface-inverse) 60%);
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--indigo-950) 45%, transparent);
}
.gp-skill--lead::after { display: none; }
.gp-skill--lead .gp-skill__copy { max-width: 52%; gap: 14px; }
.gp-skill--lead p { max-width: none; }
.gp-skill--lead h3 { color: var(--text-inverse); font-size: var(--size-h3); line-height: 1.15; letter-spacing: -0.01em; }
.gp-skill--lead p { color: var(--text-inverse-muted); font-size: var(--size-body); line-height: var(--lh-body); }
.gp-skill--lead .gp-skill__art { width: 84%; right: -8%; bottom: -4%; }
.gp-skill__share {
  align-self: flex-start;
  margin-top: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--indigo-300);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--indigo-100);
}

/* Below 1100px three columns leave the small cards too narrow for their
   headings ("Sight-reading" breaks), so Pieces goes full width on top and
   the other four sit two by two under it. */
@media (max-width: 1100px) {
  .gp-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(230px, auto); }
  .gp-skill--lead { grid-column: 1 / -1; grid-row: auto; min-height: 340px; }
  .gp-skill--lead .gp-skill__copy { max-width: 48%; }
  .gp-skill--lead .gp-skill__art { width: 50%; right: -2%; bottom: -4%; }
}

/* ==========================================================================
   09 Closing: one centred call to action.
   ========================================================================== */
.gp-cta { position: relative; background: var(--surface-inverse); padding-top: 72px; padding-bottom: 40px; }
/* The CTA and the footer share one dark band, so they close the page
   together in a single screen instead of two padded blocks. */
main + .footer { padding-top: 32px; }
.gp-cta__inner { position: relative; display: flex; justify-content: center; text-align: center; }
.gp-cta__copy { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 640px; }
.gp-cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; margin-top: 8px; }
.gp-cta__alt {
  font-family: var(--font-body);
  font-size: var(--size-body-sm);
  color: var(--text-inverse-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gp-cta__alt:hover { color: var(--brand-accent); }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Desktop: the card, the ring and the book stack share one centre line.
   The note under the ring, the label over the books and the caption under
   them hang off that line instead of pushing it around. */
@media (min-width: 901px) {
  .gp-ms__hub, .gp-ms__side--stuff { position: relative; }
  .gp-ms__what { position: absolute; top: 100%; left: 50%; width: 260px; margin: 18px 0 0 -130px; }
  .gp-ms__side--stuff > .gp-ms__label { position: absolute; bottom: 100%; left: 0; margin-bottom: var(--space-2); }
  .gp-ms__side--stuff > .gp-ms__small { position: absolute; top: 100%; left: 0; right: 0; margin-top: var(--space-5); }
  /* Those hang below the line, so the last milestone keeps room for them
     before the section ends. */
  .gp-ms__step--4 { padding-bottom: var(--space-16); }
}

/* Small laptops and landscape tablets: the copy narrows off the piano. */
@media (max-width: 1200px) {
  .gp-hero__copy { max-width: 500px; }
}

@media (max-width: 1023px) {
  .gp-ms { --ring: 190px; --gap: 40px; }
  .gp-ring__name { font-size: 26px; }
}

@media (max-width: 900px) {
  /* Phones: the piano side of the photo, under the copy. The wall colour
     fills the top, and the wash runs top-down instead of left-right. */
  .gp-hero {
    padding: calc(var(--header-h-mobile) + 40px) var(--gutter-mobile) 0;
    /* The photo is 88vw tall at full width; its top 30vw fade into the
       wall colour so there's no hard edge under the buttons. */
    background:
      linear-gradient(180deg, #736e68 calc(100% - 88vw), rgb(115 110 104 / 0) calc(100% - 58vw)),
      url("hero-piano-800.webp") 50% 100% / 100% auto no-repeat,
      #736e68;
  }
  .gp-hero__inner { min-height: 0; padding-bottom: 82vw; }
  .gp-hero__title { font-size: 42px; }
  .gp-hero__lede { font-size: var(--size-body); }
  .gp-hero__stats div { padding: 0 18px; }
  .gp-hero__stats dt { font-size: var(--size-h4-m); }
  section[id] { scroll-margin-top: var(--header-h-mobile); }

  /* Milestones: the spine moves to the left edge; ring, then how long, then
     books or grades stack beside it. */
  .gp-ms { --ring: 84px; }
  .gp-ms__rail { left: calc(var(--ring) / 2); }
  .gp-ms__step {
    grid-template-columns: var(--ring) minmax(0, 1fr);
    grid-template-areas: "hub hub" ". time" ". stuff";
    column-gap: 20px;
    row-gap: 32px;
    min-height: 0;
    padding-block: 40px;
  }
  .gp-ms__hub { text-align: left; }
  .gp-ring { display: flex; align-items: center; gap: 20px; width: auto; height: var(--ring); }
  .gp-ring::before, .gp-ring::after { display: none; }
  .gp-ring svg { position: relative; flex: none; width: var(--ring); height: var(--ring); }
  .gp-ring__track, .gp-ring__arc { stroke-width: 16; }
  .gp-ring__text { position: static; align-items: flex-start; }
  .gp-ring__name { font-size: var(--size-h3-m); }
  .gp-ms__what { margin: 10px 0 0 calc(var(--ring) + 20px); max-width: none; padding: 0; background: none; }
  .gp-ms__side { max-width: none; justify-self: stretch; }
  .gp-stack { --w: 120px; --h: 160px; --step: 58px; --drop: 14px; margin-left: var(--space-4); }
  .gp-stack:hover { --step: 70px; }
  .gp-ms__step .gp-ring__name { font-size: var(--size-h3-m); }
  .gp-ms__step--1 { padding-top: var(--space-14); }
  .gp-ms__step--4 { padding-bottom: 0; }
  .js .gp-ms__side--time, .js .gp-ms__side--stuff { transform: translateY(24px); }

  .gp-skill { padding: 24px; }
  .gp-skill--lead { padding: 28px; }
  .gp-skill--lead h3 { font-size: var(--size-h3-m); }

  .gp-cta { padding: 48px var(--gutter-mobile) 24px; }
  main + .footer { padding-top: 24px; }
  .gp-cta__inner { padding: 0; }
}

/* Tablet portrait (561-900): the milestones keep the left spine, but the
   two sides sit next to each other under the ring instead of stacking; the
   hero shows the whole wide photo under the copy, not the tall phone crop. */
@media (min-width: 561px) and (max-width: 900px) {
  .gp-hero {
    background:
      linear-gradient(180deg, #716c65 calc(100% - 50vw), rgb(113 108 101 / 0) calc(100% - 32vw)),
      url("hero-piano-1200.webp") 50% 100% / 100% auto no-repeat,
      #716c65;
  }
  .gp-hero__inner { padding-bottom: 38vw; }
  .gp-hero__title { font-size: 56px; }
  .gp-hero__copy { max-width: 600px; }

  .gp-ms__step {
    grid-template-columns: var(--ring) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "hub hub hub" ". time stuff";
    align-items: start;
    column-gap: var(--space-5);
  }
  /* 20px from the ring lines the left side up with the milestone name;
     the right side takes a little more air from its neighbour. */
  .gp-ms__side--stuff { padding-left: var(--space-3); }
}

@media (max-width: 560px) {
  .gp-plan { max-width: none; padding: var(--space-5); }
  .gp-hero__stats { justify-content: space-between; }
  .gp-hero__stats div { padding: 0 12px; }
  .gp-hero__ctas .btn { flex: 1 1 100%; }
  .gp-hero__stats dt { font-size: var(--size-h4-m); }
  .gp-skills { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; }
  .gp-skill { min-height: 170px; }
  .gp-skill p { max-width: 62%; }
  .gp-skill--lead p { max-width: none; }
  .gp-skill::after { width: 200px; height: 200px; right: -50px; bottom: -60px; }
  .gp-skill__art--scales  { width: 48%; }
  .gp-skill__art--reading,
  .gp-skill__art--aural,
  .gp-skill__art--theory  { width: 34%; }
  /* Pieces stacks: copy, then the piano in flow, bleeding off the
     bottom-right corner instead of sitting under the text. */
  .gp-skill--lead { min-height: 0; padding-bottom: 0; }
  .gp-skill--lead .gp-skill__copy { max-width: none; }
  .gp-skill--lead .gp-skill__art { position: relative; width: 88%; right: auto; bottom: auto; align-self: flex-end; margin: 8px -28px -6px 0; }
  .gp-cta__actions .btn { width: 100%; }
}

/* Narrow phones: a smaller stack so three books fit beside the spine. */
@media (max-width: 400px) {
  .gp-stack { --w: 100px; --h: 133px; --step: 46px; --drop: 12px; margin-left: var(--space-2); }
  .gp-plan { padding: var(--space-4); }
  .gp-plan__row { grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-3); }
  .gp-plan__icon { width: 40px; height: 40px; }
  .gp-plan__value b { font-size: 30px; }
  .gp-stack:hover { --step: 54px; }
}

/* ---- Milestones on phones and tablet portrait: one card per milestone ----
   The spine stays at the left edge; the ring becomes a small dot on it
   (still the element graded-path.js measures the spine from), and the
   milestone's name, what you play, the plan and the books sit together in
   one card beside it. */
@media (max-width: 900px) {
  .gp-ms { --node: 18px; --card-x: 36px; }
  .gp-ms__rail { left: calc(var(--node) / 2); }
  .gp-ms__step,
  .gp-ms__step--1,
  .gp-ms__step--4 {
    position: relative;
    display: block;
    min-height: 0;
    margin: 0 0 var(--space-5) var(--card-x);
    padding: var(--space-6);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-2xl);
    background: var(--surface-default);
    box-shadow: 0 24px 48px -32px rgb(30 26 77 / 0.35);
  }
  .gp-ms__step--1 { margin-top: var(--space-10); }
  .gp-ms__step--4 { margin-bottom: 0; }
  .gp-ms__hub, .gp-ring { position: static; }
  .gp-ring { display: block; height: auto; }
  .js .gp-ring { transform: none; opacity: 1; }
  .gp-ring svg {
    position: absolute;
    top: 30px;
    left: calc(-1 * var(--card-x) - 1px);
    width: var(--node);
    height: var(--node);
  }
  .gp-ring__arc, .gp-ring__knob { display: none; }
  .gp-ring__track { fill: var(--brand-accent); stroke: var(--brand-primary); stroke-width: 30; }
  .gp-ms__what { margin: var(--space-2) 0 0; }
  .gp-ms__side--time { margin-top: var(--space-5); }
  .gp-plan {
    max-width: none;
    padding: var(--space-4) 0 0;
    border: 0;
    border-top: 1px solid var(--border-default);
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  .gp-ms__side--stuff { margin-top: var(--space-5); padding-left: 0; }
  .gp-stack { margin-left: 0; }
  .js .gp-ms__side--time, .js .gp-ms__side--stuff { transform: translateY(16px); }
}
/* Tablet portrait: the plan and the books share a row inside the card. */
@media (min-width: 561px) and (max-width: 900px) {
  .gp-ms__step { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "hub hub" "time stuff"; column-gap: var(--space-8); align-items: start; }
  .gp-ms__side--stuff { margin-top: var(--space-5); }
}