/* ==========================================================================
   Kara Music Academy — Design System
   Single stylesheet for the whole site. Do not add page-specific CSS files.
   Palette and type are brand-locked: see 02_Kara/04_Brand.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --gold:        #C6B081;
  --gold-deep:   #98814B;   /* darkened from #A8935F so large gold display text clears 3:1 on every light ground */
  --gold-pale:   #EFE7D6;
  --gold-wash:   #F7F2E8;

  --ink:         #2D2926;
  --ink-soft:    #55504B;
  --ink-mute:    #888789;

  --paper:       #F5F7F6;
  --paper-warm:  #FBFAF7;
  --white:       #FFFFFF;

  --sage:        #D2CDC3;
  --sage-pale:   #E9E6E0;

  /* Accents — used sparingly, from the Kara Harps palette */
  --blue:        #B0CBE7;
  --serenity:    #93A9D1;
  --blush:       #F5E2E2;

  /* Type */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scale */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
  --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.32rem + 0.65vw, 1.85rem);
  --step-3:  clamp(1.85rem, 1.60rem + 1.20vw, 2.60rem);
  --step-4:  clamp(2.30rem, 1.85rem + 2.20vw, 3.80rem);
  --step-5:  clamp(2.80rem, 2.05rem + 3.60vw, 5.20rem);

  /* Space */
  --s1: 0.5rem;
  --s2: 0.875rem;
  --s3: 1.25rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 4.5rem;
  --s7: 7rem;

  /* Layout */
  --gutter: 1.25rem;
  --max: 1180px;
  --max-prose: 68ch;

  --radius: 2px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px rgba(45,41,38,.06), 0 2px 8px rgba(45,41,38,.04);
  --shadow:    0 2px 4px rgba(45,41,38,.05), 0 8px 28px rgba(45,41,38,.07);
  --shadow-lg: 0 4px 8px rgba(45,41,38,.06), 0 18px 50px rgba(45,41,38,.10);

  --ease: cubic-bezier(.2,.7,.3,1);
}

@media (min-width: 720px) { :root { --gutter: 2.5rem; } }
@media (min-width: 1100px) { :root { --gutter: 3.5rem; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

p { text-wrap: pretty; }
p + p { margin-top: var(--s3); }

a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-deep); }

strong { font-weight: 600; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--s2);
}

.display-accent { font-style: italic; color: var(--gold-deep); }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 780px; }
.prose { max-width: var(--max-prose); }

.section { padding-block: var(--s6); }
.section--lg { padding-block: var(--s7); }
.section--tight { padding-block: var(--s5); }

.section--paper { background: var(--paper); }
.section--warm  { background: var(--paper-warm); }
.section--wash  { background: var(--gold-wash); }
.section--white { background: var(--white); }
.section--ink   { background: var(--ink); color: var(--paper); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--paper); }
.section--ink .lede { color: rgba(245,247,246,.78); }
.section--ink .eyebrow { color: var(--gold); }

.stack > * + * { margin-top: var(--s3); }
.stack-lg > * + * { margin-top: var(--s4); }

.grid { display: grid; gap: var(--s4); }
@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--split { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s6); }
  .grid--sidebar { grid-template-columns: 1.6fr 1fr; gap: var(--s6); align-items: start; }
}
@media (min-width: 720px) and (max-width: 979px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

.section-head { max-width: 62ch; margin-bottom: var(--s5); }

/* Hairline divider */
.rule {
  border: 0;
  border-top: 1px solid var(--sage-pale);
  margin-block: var(--s5);
}

/* ---------- Skip link ---------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s2) var(--s3);
  z-index: 200;
}
.skip:focus { left: var(--s3); top: var(--s3); }

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

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245,247,246,.90);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--sage-pale);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .5ch;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.brand b { font-weight: 400; }
.brand span {
  font-family: var(--font-body);
  font-size: .56em;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
}
.brand:hover { color: var(--ink); }

.nav-links {
  display: none;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  padding: 0;
  margin-inline: auto;
}
.nav-links a {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: .4rem;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--gold);
}

/* .btn is defined later in this file and also sets display, so these two
   need the extra specificity or the button re-shows itself on mobile. */
.site-header .nav-cta { display: none; }

/* Base state: mobile. The desktop override MUST come after this block,
   or the later rule wins and the Menu button shows on wide screens. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6ch;
  background: none;
  border: 1px solid var(--sage);
  border-radius: var(--radius);
  padding: .5rem .8rem;
  font-size: var(--step--1);
  font-weight: 500;
  cursor: pointer;
  color: var(--ink);
  white-space: nowrap;
}
.nav-toggle svg { width: 16px; height: 16px; }

@media (min-width: 1040px) {
  .nav-links { display: flex; }
  .site-header .nav-cta { display: inline-flex; }
  .site-header .nav-toggle { display: none; }
}

/* Mobile drawer */
.nav-drawer {
  display: none;
  border-top: 1px solid var(--sage-pale);
  background: var(--paper);
  padding-block: var(--s3) var(--s4);
}
.nav-drawer.is-open { display: block; }
.nav-drawer ul { list-style: none; padding: 0; }
.nav-drawer li + li { border-top: 1px solid var(--sage-pale); }
.nav-drawer a {
  display: block;
  padding: .85rem 0;
  text-decoration: none;
  font-weight: 500;
  color: var(--ink);
}
.nav-drawer .btn { margin-top: var(--s3); width: 100%; justify-content: center; }
@media (min-width: 1040px) { .nav-drawer { display: none !important; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6ch;
  padding: .85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .2s var(--ease),
              color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--gold-deep); color: var(--white); box-shadow: var(--shadow); }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-deep); color: var(--white); box-shadow: var(--shadow); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--sage); }
.btn--ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

.btn--onink { background: var(--gold); color: var(--ink); }
.btn--onink:hover { background: var(--white); color: var(--ink); }

.btn--lg { padding: 1.05rem 2.1rem; font-size: var(--step-0); }
.btn--wa { background: #25D366; color: #06331A; border-color: #25D366; }
.btn--wa:hover { background: #1FB855; color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--sage-pale);
  border-radius: var(--radius-lg);
  padding: var(--s4);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--gold);
}
.card h3 { margin-bottom: var(--s2); }
.card p { color: var(--ink-soft); font-size: var(--step-0); }

.card--feature { padding: var(--s5) var(--s4); }

.card-price {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--gold-deep);
  display: block;
  margin-top: var(--s3);
}
.card-price small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--ink-mute);
  letter-spacing: .04em;
  margin-top: .25rem;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: var(--s7) var(--s6);
  background:
    radial-gradient(90rem 44rem at 78% -12%, rgba(198,176,129,.22), transparent 62%),
    radial-gradient(60rem 36rem at 4% 6%, rgba(176,203,231,.16), transparent 58%),
    linear-gradient(180deg, var(--paper-warm), var(--paper));
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(45,41,38,.028) 0 1px, transparent 1px 100%);
  background-size: 6rem 100%;
  mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent);
}
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { max-width: 16ch; }
.hero .lede { margin-top: var(--s3); }
.hero .btn-row { margin-top: var(--s4); }

.hero--page { padding-block: var(--s6) var(--s5); }
.hero--page h1 { font-size: var(--step-4); max-width: 20ch; }

/* ---------- Figure / image slot ---------- */
.figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--sage-pale);
  box-shadow: var(--shadow);
}
.figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.figure figcaption {
  padding: var(--s2) var(--s3);
  font-size: var(--step--1);
  color: var(--ink-mute);
  background: var(--white);
}

.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-1x1  { aspect-ratio: 1 / 1; }
.ratio-3x4  { aspect-ratio: 3 / 4; }

/* Placeholder — visible, deliberately unmistakable, removed when real assets land */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(45deg, var(--gold-pale) 0 12px, var(--gold-wash) 12px 24px);
  border: 1px dashed var(--gold-deep);
  color: var(--gold-deep);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--s3);
  min-height: 8rem;
}
.ph--video { aspect-ratio: 16 / 9; }
.ph--portrait { aspect-ratio: 3 / 4; }
.ph--square { aspect-ratio: 1 / 1; }
.ph--wide { aspect-ratio: 21 / 9; }

/* ---------- Teacher card ---------- */
.teacher { text-align: left; }
.teacher .ph, .teacher img { margin-bottom: var(--s3); border-radius: var(--radius-lg); }
.teacher h3 { font-size: var(--step-1); margin-bottom: .2rem; }
.teacher .role {
  font-size: var(--step--1);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  margin-bottom: var(--s2);
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step-0);
  min-width: 34rem;
}
th, td {
  text-align: left;
  padding: var(--s3) var(--s2);
  border-bottom: 1px solid var(--sage-pale);
  vertical-align: top;
}
th {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
tbody tr:hover { background: var(--gold-wash); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Pricing ---------- */
.price-grid { display: grid; gap: var(--s3); }
@media (min-width: 820px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }

.price-card {
  background: var(--white);
  border: 1px solid var(--sage-pale);
  border-radius: var(--radius-lg);
  padding: var(--s5) var(--s4);
  display: flex;
  flex-direction: column;
}
.price-card--feature {
  border-color: var(--gold);
  box-shadow: var(--shadow);
  position: relative;
}
.price-card--feature::before {
  content: "Flagship";
  position: absolute;
  top: -.7rem;
  left: var(--s4);
  background: var(--gold);
  color: var(--ink);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .25rem .7rem;
  border-radius: var(--radius);
}
.price-card h3 { font-size: var(--step-2); }
.price-card .amount {
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--gold-deep);
  margin-block: var(--s2) .1rem;
}
.price-card .per { font-size: var(--step--1); color: var(--ink-mute); letter-spacing: .04em; }
.price-card ul { list-style: none; padding: 0; margin-top: var(--s3); }
.price-card li {
  padding-left: 1.5rem;
  position: relative;
  font-size: var(--step-0);
  color: var(--ink-soft);
}
.price-card li + li { margin-top: .55rem; }
.price-card li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------- Notice / callout ---------- */
.notice {
  border-left: 3px solid var(--gold);
  background: var(--gold-wash);
  padding: var(--s3) var(--s4);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.notice h4 { margin-bottom: var(--s1); }
.notice p { color: var(--ink-soft); font-size: var(--step-0); }

.notice--warn { border-left-color: #C2703F; background: #FBF1E9; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--sage-pale); }
.faq details {
  border-bottom: 1px solid var(--sage-pale);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s3) 2.5rem var(--s3) 0;
  font-weight: 600;
  font-size: var(--step-1);
  font-family: var(--font-display);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--gold-deep);
  line-height: 1;
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { content: "–"; }
.faq details > *:not(summary) { padding-bottom: var(--s3); color: var(--ink-soft); max-width: var(--max-prose); }

/* ---------- Steps ---------- */
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3.25rem;
  min-height: 2.25rem;
}
.steps li + li { margin-top: var(--s4); }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold-deep);
  font-family: var(--font-display);
  font-size: var(--step-0);
}
.steps h4 { margin-bottom: .3rem; }
.steps p { color: var(--ink-soft); }

/* ---------- Stat row ---------- */
.stats { display: grid; gap: var(--s4); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat .n {
  font-family: var(--font-display);
  font-size: var(--step-4);
  color: var(--gold-deep);
  line-height: 1;
}
.stat .l {
  font-size: var(--step--1);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: var(--s2);
}

/* ---------- Forms ---------- */
.field { display: block; }
.field + .field { margin-top: var(--s3); }
.field label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: .4rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--sage);
  border-radius: var(--radius);
  background: var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold-deep);
  outline: none;
  box-shadow: 0 0 0 3px rgba(198,176,129,.25);
}
.field .hint { font-size: var(--step--1); color: var(--ink-mute); margin-top: .35rem; }

.form-embed {
  background: var(--white);
  border: 1px solid var(--sage-pale);
  border-radius: var(--radius-lg);
  padding: var(--s4);
  box-shadow: var(--shadow-sm);
}
.form-embed iframe { width: 100%; border: 0; min-height: 640px; }

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: .6ch;
  background: #25D366;
  color: #06331A;
  padding: .8rem 1.1rem;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: transform .2s var(--ease);
}
.wa-float:hover { transform: translateY(-2px); color: #06331A; }
.wa-float svg { width: 20px; height: 20px; }
.wa-float .label { display: none; }
@media (min-width: 560px) { .wa-float .label { display: inline; } }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s6);
  text-align: center;
}
.cta-band h2 { color: var(--paper); max-width: 22ch; margin-inline: auto; }
.cta-band p { color: rgba(245,247,246,.75); max-width: 52ch; margin: var(--s3) auto 0; }
.cta-band .btn-row { justify-content: center; margin-top: var(--s4); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(245,247,246,.72);
  padding-block: var(--s6) var(--s4);
  font-size: var(--step--1);
}
.site-footer a { color: rgba(245,247,246,.72); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-grid { display: grid; gap: var(--s4); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s5); } }
.site-footer h4 {
  color: var(--gold);
  font-family: var(--font-body);
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--s2);
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-top: .5rem; }
.site-footer .brand { color: var(--paper); font-size: var(--step-2); }
.site-footer .brand span { color: var(--gold); }
.footer-bottom {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid rgba(245,247,246,.14);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  justify-content: space-between;
  color: rgba(245,247,246,.5);
}

/* ---------- Utilities ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mb-3 { margin-bottom: var(--s3); }
.mb-4 { margin-bottom: var(--s4); }
.muted { color: var(--ink-mute); }
.soft { color: var(--ink-soft); }
.small { font-size: var(--step--1); }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border-radius: var(--radius);
  background: var(--gold-pale);
  color: var(--gold-deep);
}

/* ---------- Print ---------- */
@media print {
  .site-header, .wa-float, .cta-band, .nav-toggle { display: none !important; }
  body { background: #fff; }
}

/* ---------- Poco a Poco wordmark ----------
   Brand asset, italic serif outlined to paths. Never re-typeset it in a
   font: the supplied SVG is the wordmark. Cream variant is for dark grounds. */
.pap-wordmark {
  width: min(420px, 62%);
  height: auto;
  margin-bottom: var(--s3);
}
.section--ink .pap-wordmark,
.cta-band .pap-wordmark { width: min(340px, 56%); }
.cta-band .pap-wordmark { margin-inline: auto; }
.pap-inline { width: min(260px, 48%); height: auto; vertical-align: baseline; }

/* ==========================================================================
   v2 — BOLD LAYER
   Added 2026-09-20. Everything above still applies; this layer scales the
   type, introduces the Kara Harps accent palette for colour blocking, and
   adds the structural devices (marquee, slabs, badges, arrow CTAs).
   Nothing above was deleted, so every v1 page keeps working.
   ========================================================================== */

:root {
  /* Kara Harps accents — already in the Kara brand standards, sharing the gold */
  --tiger:      #E2583E;
  --tiger-deep: #C4452D;
  --whispy:     #B0CBE7;
  --blush:      #F5E2E2;
  --cream:      #FBF8F1;

  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Bigger, tighter display scale */
  --step-4: clamp(2.6rem, 1.9rem + 3.2vw, 4.6rem);
  --step-5: clamp(3.2rem, 2.1rem + 5.2vw, 7.2rem);
  --step-6: clamp(3.8rem, 2.2rem + 7.4vw, 9rem);
}

/* ---------- Display type: larger, tighter, more confident ---------- */
h1, .h1 {
  line-height: 0.94;
  letter-spacing: -0.035em;
}
h2 { line-height: 1.02; letter-spacing: -0.028em; }
.hero h1 { max-width: 14ch; }
.hero--page h1 { max-width: 18ch; }

.xl { font-size: var(--step-6); line-height: 0.9; letter-spacing: -0.04em; }

/* ---------- Eyebrow becomes a mono label ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  display: inline-flex;
  align-items: center;
  gap: .8ch;
}
.eyebrow::before {
  content: "✳";
  font-size: .9em;
  opacity: .8;
}

/* ---------- New section grounds ---------- */
.section--tiger   { background: var(--tiger); color: #FFF4F1; }
.section--tiger h1, .section--tiger h2, .section--tiger h3 { color: #FFF8F6; }
.section--tiger .eyebrow { color: #FFD9CF; }
.section--tiger .lede, .section--tiger .soft, .section--tiger p { color: rgba(255,244,241,.88); }

.section--whispy  { background: var(--whispy); }
.section--blush   { background: var(--blush); }
.section--cream   { background: var(--cream); }
.section--serenity{ background: var(--serenity); color: #0F1A2B; }
.section--serenity h2, .section--serenity h3 { color: #0F1A2B; }
.section--serenity .eyebrow { color: #26365B; }

/* ---------- Slab: full-bleed colour block with oversized type ---------- */
.slab { padding-block: var(--s7); position: relative; overflow: hidden; }
.slab h2 { font-size: var(--step-4); max-width: 15ch; }
.slab .lede { font-size: var(--step-1); max-width: 48ch; margin-top: var(--s4); }

/* ---------- Marquee ticker ---------- */
.marquee {
  background: var(--ink);
  color: var(--gold);
  padding-block: .95rem;
  overflow: hidden;
  white-space: nowrap;
  border-block: 1px solid rgba(198,176,129,.25);
}
.marquee--gold { background: var(--gold); color: var(--ink); border-color: rgba(45,41,38,.18); }
.marquee--tiger { background: var(--tiger); color: #FFF4F1; border-color: rgba(255,255,255,.2); }
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 500;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { text-align: center; }
}

/* ---------- Circular sticker badge ---------- */
.badge-circle {
  display: grid;
  place-items: center;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  text-align: center;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
  padding: 1rem;
  transform: rotate(-9deg);
  box-shadow: var(--shadow);
}
.badge-circle--tiger { background: var(--tiger); color: #FFF4F1; }
.badge-circle--ink { background: var(--ink); color: var(--gold); }
.badge-circle--whispy { background: var(--whispy); color: var(--ink); }
@media (min-width: 900px) { .badge-circle { width: 10rem; height: 10rem; font-size: .72rem; } }

/* ---------- Arrow CTAs ---------- */
.btn--arrow::after {
  content: "↗";
  font-size: 1.05em;
  line-height: 1;
  transition: transform .22s var(--ease);
}
.btn--arrow:hover::after { transform: translate(2px, -2px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .6ch;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: .25rem;
}
.link-arrow::after { content: "↗"; transition: transform .22s var(--ease); }
.link-arrow:hover::after { transform: translate(2px,-2px); }

/* ---------- Image hero ---------- */
.hero--image {
  position: relative;
  padding-block: 0;
  background: var(--ink);
  min-height: min(84vh, 720px);
  display: grid;
  align-items: end;
}
.hero--image::after { display: none; }
.hero--image .hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .82;
}
.hero--image .wrap {
  position: relative;
  z-index: 2;
  padding-block: var(--s6);
  background: linear-gradient(to top, rgba(24,21,19,.92) 8%, rgba(24,21,19,.55) 55%, transparent);
}
.hero--image h1 { color: #FBF8F1; }
.hero--image .lede { color: rgba(251,248,241,.86); }
.hero--image .eyebrow { color: var(--gold); }
.hero--image .small.muted { color: rgba(251,248,241,.62); }

/* ---------- Split hero with bleed image ---------- */
.hero--split { padding-block: 0; }
.hero--split .hero__inner {
  display: grid;
  gap: var(--s5);
  align-items: center;
  padding-block: var(--s6);
}
.hero--split .hero__art { position: relative; }
.hero--split .hero__art img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: 38% center;   /* keeps the harp in frame on a landscape source */
  border-radius: var(--radius-lg);
}
.hero--split .badge-circle {
  position: absolute;
  right: -1.2rem;
  bottom: -1.6rem;
}
@media (min-width: 900px) {
  .hero--split .hero__inner { grid-template-columns: 1.15fr .85fr; gap: var(--s6); padding-block: var(--s7); }
}

/* ---------- Figure with real image ---------- */
.shot {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  display: block;
}
.shot--portrait { aspect-ratio: 3/4; }
.shot--landscape { aspect-ratio: 4/3; }
.shot--wide { aspect-ratio: 16/9; }
.shot--tall { aspect-ratio: 4/5; }

.shot-wrap { position: relative; }
.shot-wrap .badge-circle { position: absolute; right: -1rem; bottom: -1.5rem; }

/* Full-bleed band image */
.band {
  position: relative;
  min-height: 40vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
}
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.band::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 50% 50%, rgba(24,21,19,.72), rgba(24,21,19,.34));
  z-index: 1;
}
.band .wrap { position: relative; z-index: 2; text-align: center; padding-block: var(--s6); }
.band h2 { color: #FBF8F1; max-width: 20ch; margin-inline: auto; }
.band .eyebrow { color: var(--gold); }

/* ---------- Bigger stats ---------- */
.stat .n { font-size: var(--step-5); line-height: .9; letter-spacing: -.03em; }
.stat .l { font-family: var(--font-mono); letter-spacing: .18em; font-size: .7rem; }

/* ---------- Cards get a touch more presence ---------- */
.card { border-radius: var(--radius-lg); }
.card h3 { letter-spacing: -.02em; }
.card-price { font-size: var(--step-2); letter-spacing: -.02em; }
.card-price small { font-family: var(--font-mono); letter-spacing: .12em; font-size: .68rem; }

.price-card .amount { font-size: var(--step-4); letter-spacing: -.035em; }
.price-card .per { font-family: var(--font-mono); letter-spacing: .14em; font-size: .7rem; }

/* ---------- Tag pill ---------- */
.tag { font-family: var(--font-mono); letter-spacing: .16em; }

/* ---------- Steps numbering in mono ---------- */
.steps li::before { font-family: var(--font-mono); font-size: .85rem; }

/* ---------- CTA band gets the slab treatment ---------- */
.cta-band h2 { font-size: var(--step-4); }

/* ---------- Placeholder: quieter now that real art exists ---------- */
.ph { font-family: var(--font-mono); letter-spacing: .12em; font-size: .68rem; }

/* ---------- Real wordmark (replaces the typeset brand text) ---------- */
.brand img { height: 26px; width: auto; display: block; }
@media (min-width: 720px) { .brand img { height: 30px; } }
.site-footer .brand img { height: 34px; }
.brand { gap: 0; }

/* ---------- Video band ---------- */
.band video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;
  z-index: 0;
}
.band--film { min-height: 62vh; }
.band--film .wrap { max-width: 900px; }
.film-note {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(251,248,241,.55);
  margin-top: var(--s3);
}

/* ==========================================================================
   Accessibility fix — small gold labels
   --gold-deep #A8935F is a decorative gold. As SMALL text it fails WCAG AA
   on every light ground (3.00:1 on white, 2.41 on blush, 1.79 on whispy).
   Small labels therefore use --gold-text, which passes 4.5:1 on the neutral
   and blush grounds, and switch to ink on the two blue grounds where no
   gold can pass at all. Large gold display numbers keep --gold-deep, which
   only needs 3:1.
   ========================================================================== */
:root { --gold-text: #7A6537; }

.eyebrow, .tag { color: var(--gold-text); }
.ph { color: var(--gold-text); }
.card-price small, .price-card .per { color: var(--ink-soft); }

/* Blue grounds: no gold reaches 4.5:1, so small labels go to ink. */
.section--whispy .eyebrow,
.section--whispy .tag,
.section--whispy .ph,
.section--serenity .eyebrow,
.section--serenity .tag,
.section--serenity .ph { color: var(--ink); }

/* Dark grounds keep the bright gold, which has plenty of contrast. */
.section--ink .eyebrow,
.slab.section--ink .eyebrow,
.band .eyebrow,
.hero--image .eyebrow,
.cta-band .eyebrow { color: var(--gold); }
.section--tiger .eyebrow { color: #FFD9CF; }

/* ==========================================================================
   Accessibility fix — muted text and the tiger ground
   1. --ink-mute #888789 (brand Chrome) fails AA as small text on every light
      ground (3.58:1 on white). Darkened to #636265, which passes on the
      neutral grounds. On the two blue grounds no grey passes, so muted text
      there falls back to --ink-soft.
   2. Tiger #E2583E cannot carry small body text at all: even pure white is
      only 3.68:1. Text-bearing tiger sections therefore use --tiger-deep
      #C4452D (4.59:1 with cream). The bright tiger is kept for badges and
      marquees, which are large or decorative.
   ========================================================================== */
:root { --ink-mute: #636265; }

.section--whispy .muted,
.section--whispy .stat .l,
.section--serenity .muted,
.section--serenity .stat .l { color: var(--ink-soft); }

.section--tiger { background: var(--tiger-deep); }
.section--tiger .lede,
.section--tiger .soft,
.section--tiger p,
.section--tiger li { color: #FFF4F1; }
.section--tiger .muted { color: rgba(255,244,241,.82); }

/* Badges and marquees keep the brighter tiger: large or decorative text only. */
.badge-circle--tiger { background: var(--tiger); color: #2D1410; }
.marquee--tiger { background: var(--tiger-deep); }

/* Final contrast pass: role labels, placeholder captions, accent italics. */
.teacher .role { color: var(--gold-text); }
.ph { color: var(--ink-soft); border-color: var(--ink-mute); }
.section--tiger .ph { color: #FFF4F1; border-color: rgba(255,244,241,.6); }
.section--tiger .eyebrow { color: #FFF4F1; }
.section--whispy .display-accent,
.section--serenity .display-accent,
.section--whispy .role,
.section--serenity .role { color: var(--ink); }