/* quaverley.com — printed-edition world, ported from the app. */

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

html { scroll-behavior: smooth; }

/* Keep in-page anchors clear of the sticky header. */
:target { scroll-margin-top: 84px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 540;
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-variation-settings: 'opsz' 48;
}

h1 { font-size: var(--display); }
h2 { font-size: var(--h2); }

h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

h3 { font-size: var(--h3); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: 0.35em; }

hr.hairline { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

::selection { background: var(--gold); color: var(--paper); }

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

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top 120ms ease;
}
.skip-link:focus { top: 1rem; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.band { padding: var(--band) 0; }
.band-tight { padding: calc(var(--band) * 0.66) 0; }
.band-sunken { background: var(--paper-sunken); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.band-rule { border-top: 1px solid var(--rule); }
.band-final { border-top: 0; }

/* The closing CTA is centred as one block: heading, button and microcopy share
   a single axis, rather than a full-width heading over a centred button. */
.final-cta { text-align: center; }
.final-cta h2 { max-width: 26ch; margin-inline: auto; }
.band-mentor { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper-sunken); }

/* Ornament divider: one rule with the disc centred on it, replacing the two
   hairlines that met where a sunken band finished and the final CTA began. */
.ornament-rule { position: relative; border-top: 1px solid var(--rule); }
.ornament-disc {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--paper);
  line-height: 0;
}
.ornament-disc img { width: 48px; height: 48px; border-radius: 50%; }
.band-sunken + .ornament-rule { margin-top: -1px; }

.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 2.5rem; }
.step-flush { border-top: 0; padding-top: 0; padding-bottom: 0; }
.step-flush-top { border-top: 0; padding-top: 0; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}

.eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-transform: none;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 0.6rem;
}
.eyebrow a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.eyebrow a:hover { border-color: currentColor; }

.lead { font-size: var(--text-lg); color: var(--ink-muted); max-width: var(--measure); }
.micro { font-size: var(--text-sm); color: var(--ink-muted); }
/* Buttons and links ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.btn:hover { background: var(--charcoal); border-color: var(--charcoal); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: default; }

.link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 140ms ease;
}
.link:hover { text-decoration-color: currentColor; }

.cta-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 1.4rem 0 0;
}
.cta-block .micro { margin: 0; }
.cta-block-centre { align-items: center; text-align: center; }
.cta-block .btn { align-self: flex-start; }
.cta-block-centre .btn { align-self: center; }

/* Header ----------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding-top: env(safe-area-inset-top);
  transition: background-color 180ms ease, border-color 180ms ease,
    color 180ms ease, transform 220ms ease;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}

.brand-disc {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
  flex: none;
}
.brand-disc img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }

.brand-word {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-variation-settings: 'opsz' 36;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.brand:hover .brand-word { text-decoration: underline; text-underline-offset: 3px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-right: auto;
}
.site-nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-muted);
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--gold); }
/* Home is shown in the collapsed menu only; the wordmark covers it otherwise. */
.nav-home { display: none; }

.nav-actions { display: flex; align-items: center; gap: 1.1rem; flex: none; }
.nav-signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}
.nav-signin:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav-actions .btn { min-height: 42px; padding: 0.55rem 1.1rem; font-size: var(--text-sm); }

/* The disclosure is a checkbox and label so it works with JavaScript off; the
   input is visually hidden but stays focusable, and the outline is moved to the
   label. */
.nav-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}
.nav-toggle {
  display: none;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem 0.9rem;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.nav-label-close { display: none; }
.nav-toggle-input:checked ~ .nav-toggle .nav-label-open { display: none; }
.nav-toggle-input:checked ~ .nav-toggle .nav-label-close { display: inline; }
.nav-toggle-input:focus-visible ~ .nav-toggle {
  outline: 3px solid var(--gold-ink);
  outline-offset: 2px;
}

/* Hero ------------------------------------------------------------------- */

.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 var(--band); }

[data-hero='a'] { display: inline; }
[data-hero='b'] { display: none; }
[data-hero-variant='b'] [data-hero='a'] { display: none; }
[data-hero-variant='b'] [data-hero='b'] { display: inline; }

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* The subhead belongs with the masthead: a tight gap above it, and a larger one
   below before the CTA, so it does not float towards the button.  Applies to
   every page head, not just the home hero. */
.hero h1, .page-head h1 { margin-bottom: 0.35em; }
.hero .subhead { font-size: var(--text-lg); color: var(--ink-muted); max-width: 34rem; margin-bottom: 0; }
.hero .cta-block, .page-head .cta-block { margin-top: clamp(1.8rem, 3vw, 2.4rem); }

/* The device pair sits directly on the page: an enclosing mat reads as a second
   bezel around the tablet's own frame, so the frame is the only frame. */
.hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  width: min(460px, 100%);
}
/* The bezel is scaled to each device, so the phone's frame isn't proportionally
   heavier than the larger screen's. */
.device {
  display: block;
  border: 1px solid var(--device-rule);
  border-radius: 16px;
  background: var(--paper-raised);
  box-shadow: var(--shadow-device);
  padding: 7px;
}
.device img { border-radius: 10px; width: 100%; display: block; }
/* Desktop keeps the portrait tablet; the phone leans in at its bottom-right. */
.device-screen { grid-area: 1 / 1; align-self: center; width: min(400px, 100%); }
.device-phone {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: end;
  z-index: 2;
  width: min(188px, 44%);
  padding: 4px;
  border-radius: 11px;
  margin: 0 -0.4rem -0.6rem 0;
}
.device-phone img { border-radius: 7px; }
.hero-secondary { margin-top: 0.9rem; }

/* Evidence --------------------------------------------------------------- */

.evidence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.evidence-item { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.evidence-item h3 { margin-bottom: 0.35rem; }
.evidence-item p { margin: 0; }
.evidence-item p:only-child {
  font-family: var(--sans);
  font-size: var(--text-lg);
  line-height: 1.45;
  font-weight: 500;
}

/* Outcome cards ---------------------------------------------------------- */

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}
/* One frame per card, with the shot bleeding to the card edges, so the
   screenshots are shown whole and as large as the column allows. */
.outcome-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.outcome-shot {
  display: block;
  overflow: hidden;
  background: var(--paper-sunken);
  border-bottom: 1px solid var(--rule);
  aspect-ratio: 16 / 10;
}
.outcome-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.outcome-body { padding: clamp(1rem, 2vw, 1.4rem); }
.outcome-card h3 { margin-bottom: 0.35rem; }
.outcome-card p { color: var(--ink-muted); font-size: var(--text-sm); margin: 0; }

/* Subscription includes -------------------------------------------------- */

.include-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.include-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.include-shot {
  display: block;
  overflow: hidden;
  background: var(--paper-sunken);
  border-bottom: 1px solid var(--rule);
  aspect-ratio: 3 / 2;
}
.include-shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.include-body { padding: clamp(1rem, 2vw, 1.4rem); }
.include-card h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.include-card p { color: var(--ink-muted); font-size: var(--text-sm); margin: 0; }

/* Steps ------------------------------------------------------------------ */

.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  /* Block padding only: the horizontal padding is the wrap's gutter, and
     setting `padding: … 0` here silently removed it. */
  padding-block: calc(var(--band) * 0.7);
  border-top: 1px solid var(--rule);
}
.step:first-of-type { border-top: 0; }
/* Copy left, shot right by default; `.step-flip` swaps them.  Explicit rather
   than positional so a page can alternate regardless of how it is wrapped. */
.step-flip .step-copy { order: 2; }
.step-flip .step-shot { order: 1; }
.step-shot {
  justify-self: center;
  width: min(330px, 100%);
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--paper-raised);
  box-shadow: var(--shadow);
  padding: 10px;
}
.step-shot img { width: 100%; height: auto; display: block; border-radius: 8px; }

/* Work grid -------------------------------------------------------------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
}

.work-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
}
.work-cover {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 8px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.work-card:hover .work-cover { transform: translateY(-2px); box-shadow: var(--shadow); }
.work-cover img { border-radius: 3px; aspect-ratio: 336 / 444; object-fit: cover; width: 100%; }
.work-body { display: block; padding: 0.75rem 0.15rem 0; }
.work-name { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 500; line-height: 1.25; }
.work-composer { display: block; font-size: var(--text-sm); color: var(--ink-muted); margin-top: 0.15rem; }
.work-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: var(--text-sm); color: var(--ink-muted); }

/* Grade ------------------------------------------------------------------ */

.grade { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.grade-chip {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--grade, var(--charcoal));
  box-shadow: inset 0 0 0 1px rgb(33 29 25 / 18%);
  flex: none;
}
.fact { font-size: var(--text-sm); color: var(--ink-muted); }
.fact + .fact::before,
.piece-facts .grade + .fact::before { content: '·'; margin-right: 0.5rem; color: var(--rule); }

.piece-facts { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.9rem 0 1.4rem; }

/* Mentor ----------------------------------------------------------------- */

.mentor {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}
.mentor-figure { width: min(260px, 42vw); mix-blend-mode: multiply; }
.mentor-copy .said {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-variation-settings: 'opsz' 72;
  line-height: 1.25;
  font-weight: 430;
  margin-bottom: 0.6rem;
}
.mentor-copy .attribution { font-size: var(--text-sm); color: var(--ink-muted); font-weight: 600; margin: 0; }

/* Pricing ---------------------------------------------------------------- */

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: stretch;
}
.price-card {
  position: relative;
  --price-card-pad: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--price-card-pad);
}
/* Cards are equal height; the last block (the CTA or the details link) sits on
   the baseline so the two cards line up. */
.price-card > :last-child { margin-top: auto; }
.price-card.featured { border-color: var(--ink); box-shadow: var(--shadow); }
.price-card h3 { font-size: 1.5rem; margin-bottom: 0.2rem; }
/* Floated into the card's top-right corner without taking a flex row, so the
   badge does not push the heading out of line with the other card. */
.price-badge {
  position: absolute;
  top: var(--price-card-pad);
  right: var(--price-card-pad);
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold-ink);
  background: rgb(176 138 62 / 12%);
  border: 1px solid rgb(176 138 62 / 45%);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}
.price-amount { display: block; font-family: var(--serif); font-size: 2.3rem; font-variation-settings: 'opsz' 60; font-weight: 480; margin: 0.4rem 0 0.1rem; }
.price-cadence { color: var(--ink-muted); font-size: var(--text-sm); margin-bottom: 1.1rem; }
.price-note { font-size: var(--text-sm); color: var(--ink-muted); }
.price-details { margin: 0.9rem 0 0; font-size: var(--text-sm); }
.price-card ul { padding-left: 1.15rem; }
.price-card li::marker { color: var(--gold); }

.pricing-lede { max-width: var(--measure); }
.pricing-lede p { color: var(--ink-muted); }
.pricing-lede strong { color: var(--ink); }

/* FAQ -------------------------------------------------------------------- */

.faq-list { max-width: 52rem; }
details.faq {
  border-bottom: 1px solid var(--rule);
}
details.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.05rem 0;
  font-weight: 600;
  font-size: var(--text-lg);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '+';
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--ink-muted);
  flex: none;
}
details.faq[open] summary::after { content: '–'; }
details.faq .faq-body { padding: 0 0 1.2rem; color: var(--ink-muted); max-width: 44rem; }
details.faq .faq-body p:last-child { margin-bottom: 0; }

/* Forms ------------------------------------------------------------------ */

.signup-form { max-width: 30rem; }
.signup-form label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: 0.4rem; }
.signup-form input[type='email'] {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: 0.9rem;
}
.signup-form input[type='email']:focus { outline: 3px solid var(--gold-ink); outline-offset: 1px; border-color: var(--ink); }
.signup-form .consent { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; margin-bottom: 1.1rem; }
.signup-form .consent input { width: 18px; height: 18px; margin-top: 0.2rem; accent-color: var(--ink); flex: none; }
.signup-form .form-status { margin-top: 1rem; font-size: var(--text-sm); }
.signup-form .form-status.error { color: var(--vermilion); }
.signup-form .form-fallback { margin-top: 0.9rem; font-size: var(--text-xs); color: var(--ink-faint); }
/* On a valid submit the form is replaced by a confirmation callout, so the
   visitor is told to finish the double opt-in rather than left on the form. */
.signup-form .form-success {
  display: none;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold-ink);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.signup-form.is-submitted .form-fields { display: none; }
.signup-form.is-submitted .form-success { display: block; }
.signup-form .form-success:focus { outline: 3px solid var(--gold-ink); outline-offset: 2px; }
.signup-form .form-success-title { font-family: var(--serif); font-size: var(--text-lg); font-weight: 600; margin-bottom: 0.3rem; }
.signup-form .form-success p:last-child { margin-bottom: 0; }
/* Brevo's honeypot and the hidden target the form posts into: both must stay
   in the DOM but out of sight. */
.signup-form .input--hidden,
.signup-form .signup-target { display: none; }

.newsletter, .teacher-form-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}

/* The sign-up slide is taller than the viewport on small screens; keep its
   top clear of the sticky header when the CTA scrolls it into view. */
#teacher-list { scroll-margin-top: 84px; }

/* Journal ---------------------------------------------------------------- */

.journal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); }

.journal-masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.masthead-figure { width: min(190px, 30vw); flex: none; margin-bottom: -0.5rem; }
.journal-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.journal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.journal-card h2 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.journal-card p { color: var(--ink-muted); font-size: var(--text-sm); }
.journal-date { font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--gold-ink); font-weight: 700; margin-bottom: 0.5rem; }
.journal-card .link { font-size: var(--text-sm); font-weight: 600; }

/* Help ------------------------------------------------------------------- */

.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); margin-top: 2.5rem; }
.help-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border-top: 2px solid var(--ink);
  padding-top: 1rem;
}
.help-card h2 { font-size: 1.3rem; margin-bottom: 0.35rem; }
.help-card p { color: var(--ink-muted); font-size: var(--text-sm); }
.filter-label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
.help-filter {
  width: min(30rem, 100%);
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  font: inherit;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.help-filter:focus { outline: 3px solid var(--gold-ink); outline-offset: 1px; border-color: var(--ink); }
.help-results { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.help-results li { border-bottom: 1px solid var(--rule); padding: 0.85rem 0; }
.help-results .cat { display: block; font-size: var(--text-xs); color: var(--ink-muted); }
.help-results a { font-weight: 600; text-decoration: none; }
.help-results a:hover { text-decoration: underline; text-underline-offset: 3px; }
.help-empty { margin-top: 1.5rem; color: var(--ink-muted); }

/* Prose ------------------------------------------------------------------ */

.prose { max-width: var(--measure); }
.prose h1 { font-size: clamp(2rem, 4vw, 3rem); }
.prose h2 { font-size: 1.55rem; margin-top: 2.4rem; }
.prose h3 { font-size: 1.2rem; margin-top: 2rem; }
.prose p, .prose li { color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 1.5rem; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.5rem; }
.prose > p:first-of-type { margin-top: 0; }
.prose .legal-meta { color: var(--ink-muted); font-size: var(--text-sm); }
.prose .legal-short {
  color: var(--ink-muted);
  border-left: 3px solid var(--gold);
  padding-left: 0.9rem;
  margin: 1.2rem 0;
}
.prose .legal-toc { columns: 2; column-gap: 2.5rem; }
.prose .legal-toc li { margin-bottom: 0.35rem; break-inside: avoid; }
.prose blockquote {
  margin: 2rem 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.4;
}
.prose blockquote p { margin-bottom: 0.5rem; }

/* Essays: a wider measure, broken up with pull quotes. */
.prose.essay { max-width: 74ch; }
.prose.essay .pull-quote {
  margin: 2.4rem 0;
  padding: 0 0 0 1.4rem;
  border-left: 3px solid var(--gold);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-variation-settings: 'opsz' 72;
  font-weight: 480;
  line-height: 1.3;
  color: var(--ink);
}
.prose.essay .pull-quote p { margin: 0; }
.essay-back { margin-top: 1.8rem; font-size: var(--text-sm); }

.essay-footer { font-size: var(--text-sm); color: var(--ink-muted); }

/* Page heads ------------------------------------------------------------- */

.page-head { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-head .lead { margin-bottom: 1.2rem; }
/* The pricing head continues with prose rather than a CTA, so the lede stays
   tight to the lead. */
.page-head .pricing-lede { margin-top: 0; }

.piece-head {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}
.piece-cover-large {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 10px;
  max-width: 320px;
}
.piece-cover-large img { border-radius: 3px; }
.piece-composer { font-size: var(--text-lg); color: var(--ink-muted); margin-bottom: 0.2rem; }
.attribution { color: var(--ink-muted); font-size: var(--text-sm); white-space: pre-line; }
.attribution-links { font-size: var(--text-sm); }
.from-journal p { color: var(--ink-muted); }

/* Footer ----------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: rgb(248 244 236 / 78%);
  padding: clamp(3rem, 6vw, 4.5rem) 0 max(2rem, env(safe-area-inset-bottom));
  font-size: var(--text-sm);
}
.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer .brand { color: var(--paper); }
.site-footer .brand-disc { background: var(--paper-sunken); border-color: transparent; }
.site-footer :focus-visible { outline-color: var(--gold); }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
/* The link groups are wrapped so the stacked footer can be two real columns
   rather than a grid of cells (which leaves row gaps). */
.footer-cols { display: contents; }
.footer-col h2 { font-family: var(--sans); font-size: var(--text-xs); letter-spacing: 0.09em; font-weight: 700; color: var(--paper); margin-bottom: 0.9rem; }
.footer-col a { display: flex; align-items: center; min-height: 44px; }
.footer-brand .brand { margin-bottom: 1rem; }
.footer-note { max-width: 22rem; color: rgb(248 244 236 / 62%); }

.footer-base {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-top: 1px solid rgb(248 244 236 / 18%);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  font-size: var(--text-xs);
  color: rgb(248 244 236 / 62%);
}
.footer-base p { margin: 0; }

/* 404 and utilities ------------------------------------------------------ */

.not-found {
  text-align: center;
  padding: clamp(3rem, 8vw, 6rem) 0;
}
.not-found .mentor-figure { width: min(220px, 50vw); margin: 0 auto 1.5rem; mix-blend-mode: multiply; }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1000px) {
  /* Three real columns rather than a cell grid: the groups are placed into
     fixed columns so the long Legal section fills the last column instead of
     leaving an empty cell and stretching the row it shares with others. To
     balance the columns Legal and Company trade places (Company joins Support
     in the middle column). The placements mirror FOOTER_COLUMNS in
     generate.py: the first wrapper is Product/Support/Company and the second
     is Who it's for/Legal. */
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .footer-brand { grid-column: 1 / -1; grid-row: 1; }
  .footer-grid > .footer-cols:nth-child(2) .footer-col:nth-child(1) { grid-area: 2 / 1; }
  .footer-grid > .footer-cols:nth-child(2) .footer-col:nth-child(2) { grid-area: 2 / 2; }
  .footer-grid > .footer-cols:nth-child(2) .footer-col:nth-child(3) { grid-area: 3 / 2; }
  .footer-grid > .footer-cols:nth-child(3) .footer-col:nth-child(1) { grid-area: 3 / 1; }
  .footer-grid > .footer-cols:nth-child(3) .footer-col:nth-child(2) { grid-area: 2 / 3 / span 2; }
}

/* Collapse the header before the nav labels crowd each other; the rest of the
   layout keeps its wider breakpoint below. */
@media (max-width: 1024px) {
  /* Once the menu is open the header wraps to several lines, so it no longer
     relies on min-height to centre a single row. The block padding keeps that
     first row (the brand and the Close button) clear of the viewport edge,
     matching where the Menu button sits when the bar is closed. */
  .header-inner { flex-wrap: wrap; padding-block: 0.85rem; }
  .nav-toggle { display: inline-flex; }
  .site-nav, .nav-actions {
    display: none;
    width: 100%;
  }
  .site-nav { flex-direction: column; align-items: flex-start; gap: 0; margin: 0; padding: 0.5rem 0 1rem; }
  .site-nav a { padding: 0.7rem 0; width: 100%; border-bottom: 1px solid var(--rule); }
  .nav-home { display: block; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: 0.9rem; padding-bottom: 1.2rem; }
  .nav-actions .btn { order: -1; width: 100%; }
  .nav-toggle-input:checked ~ .site-nav,
  .nav-toggle-input:checked ~ .nav-actions { display: flex; }

  /* On scroll the bar becomes an ink accent carrying the one primary CTA, so
     the hero can stand on its own at the top; the full nav stays behind Menu. */
  body.is-scrolled .site-header {
    background: var(--ink);
    border-bottom: 2px solid var(--gold);
    color: var(--paper);
  }
  body.is-scrolled .site-header .header-inner { gap: 0.5rem; }
  body.is-scrolled .site-header .brand { color: var(--paper); }
  body.is-scrolled .site-header .brand-disc { border-color: transparent; }
  body.is-scrolled .site-header .brand-word { display: none; }
  body.is-scrolled .site-header .site-nav a {
    color: rgb(248 244 236 / 78%);
    border-bottom-color: rgb(248 244 236 / 18%);
  }
  body.is-scrolled .site-header .site-nav a:hover { color: var(--paper); }
  body.is-scrolled .site-header .site-nav a[aria-current='page'] { color: var(--paper); border-bottom-color: var(--gold); }
  body.is-scrolled .site-header .nav-signin { color: var(--paper); }
  body.is-scrolled .site-header .nav-actions .btn {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
  }
  body.is-scrolled .site-header .nav-actions .btn:hover { background: var(--paper); border-color: var(--paper); }
  body.is-scrolled .site-header .nav-toggle {
    color: var(--paper);
    border-color: rgb(248 244 236 / 35%);
  }
  body.is-scrolled .site-header .nav-toggle-input:focus-visible ~ .nav-toggle { outline-color: var(--gold); }

  /* Compact bar: only the CTA and the menu share the brand's row. */
  body.is-scrolled .nav-toggle-input:not(:checked) ~ .nav-actions {
    order: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0.5rem;
    padding: 0;
  }
  body.is-scrolled .nav-toggle-input:not(:checked) ~ .nav-actions .nav-signin { display: none; }
  body.is-scrolled .nav-toggle-input:not(:checked) ~ .nav-actions .btn {
    order: 0;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    min-height: 40px;
    padding: 0.35rem 0.8rem;
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.is-scrolled .nav-toggle-input:not(:checked) ~ .brand { order: 1; }
  body.is-scrolled .nav-toggle-input:not(:checked) ~ .nav-toggle { order: 3; margin-left: 0; padding: 0.4rem 0.7rem; }

  /* Headroom: yield the bar while reading down; any upward scroll brings it back. */
  body.header-hidden .site-header { transform: translateY(-100%); }
}

/* On the narrowest phones the CTA and Menu carry the bar alone. */
@media (max-width: 420px) {
  body.is-scrolled .site-header .brand { display: none; }
}

/* The disclosure control is a small-screen affordance only; keep it out of the
   desktop tab order. */
@media (min-width: 1025px) {
  .nav-toggle-input { display: none; }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero { padding-bottom: 2.5rem; }
  .hero-stage { justify-self: center; }
  .evidence-grid { grid-template-columns: 1fr; }
  .outcome-grid { grid-template-columns: 1fr; }
  .include-grid { grid-template-columns: 1fr; }
  .prose .legal-toc { columns: 1; }
  .step { grid-template-columns: 1fr; }
  .step-flip .step-copy { order: 1; }
  .step-flip .step-shot { order: 2; }
  .step-shot { justify-self: center; }
  .mentor { flex-direction: column; align-items: flex-start; }
  /* The mascot faces left, so it sits on the right to look into the page. */
  .mentor-figure { width: min(220px, 60vw); align-self: flex-end; }
  .journal-masthead { flex-direction: column-reverse; align-items: flex-start; }
  .masthead-figure { width: min(150px, 45vw); }
  .piece-head { grid-template-columns: 1fr; }
  .newsletter, .teacher-form-wrap { grid-template-columns: 1fr; }
  .piece-cover-large { justify-self: center; }

  /* Stacked, the tablet shows the score and the phone the library, both in
     landscape. The tablet is a little smaller and left-aligned so the phone
     overlapping it reads as a device, not an edge-to-edge crop. */
  .device-screen { align-self: start; width: 97%; justify-self: start; }
  .device-screen img { aspect-ratio: 1194 / 834; }
  .device-phone { width: min(190px, 48%); }
  .device-phone img { aspect-ratio: 844 / 560; }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two real columns (Product / Support / Company and Who it's for / Legal),
     so sections stack without the row gaps a cell grid would leave. */
  .footer-cols { display: block; }
  .footer-cols .footer-col + .footer-col { margin-top: 1.75rem; }
}

/* Two covers abreast on phones, as in the app's library, so a shelf is scanned
   rather than scrolled through one card at a time. */
@media (max-width: 600px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .work-body { padding-top: 0.6rem; }
  .work-name { font-size: 1rem; }
  .work-composer, .work-meta { font-size: var(--text-xs); }
  .work-meta { gap: 0.35rem; }
}

/* Below 480px the footer keeps two columns: five stacked sections make a long
   tail on every page. */
@media (max-width: 480px) {
  .footer-grid { column-gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Touch has no hover: give taps their own feedback and stop a tapped card's
   hover lift from sticking. */
@media (hover: none) {
  .work-card:hover .work-cover,
  .journal-card:hover { transform: none; box-shadow: none; }
  .work-card:active .work-cover { transform: translateY(-1px); box-shadow: var(--shadow); }
  .journal-card:active { transform: translateY(-1px); box-shadow: var(--shadow); }
  .site-nav a:active,
  .footer-col a:active,
  .nav-signin:active,
  .link:active { color: var(--gold-ink); }
}