/*
 * Shine 2026 — design system
 * Spec: _bmad-output/planning-artifacts/11-visual-refresh-homepage-v2.md
 *
 * Structure:
 *   1. Design tokens (:root custom properties)
 *   2. Reset + base
 *   3. Typography
 *   4. Layout primitives (container, sections)
 *   5. Components (button, pill, card)
 *   6. Header
 *   7. Footer
 *   8. Homepage blocks (hero, heritage band)
 *   9. Placeholder content shells (page, single, archive)
 *  10. Utilities
 *  11. Responsive
 */

/* =========================================================
   1. Design tokens
   ========================================================= */

:root {
    /* Palette */
    --color-canvas: #F9F3EA;        /* Cotton Beige — page background */
    --color-surface: #FFFFFF;        /* Card / contrast surface */
    --color-surface-soft: #E5DECE;   /* Crème — secondary block bg */
    --color-ink: #2A2622;            /* Warm near-black — body text + dark blocks */
    --color-ink-muted: #6B5D52;      /* Warm dark gray — secondary text */
    --color-ink-on-dark: #F9F3EA;    /* Cotton beige used as text on dark blocks */
    --color-accent: #FFA552;         /* Sorbet Orange — primary CTAs, links */
    --color-accent-hover: #C97B5C;   /* Terracotta — hover / deep accents */
    --color-tertiary: #C7D5DD;       /* Soft Blue — sparing accents */
    --color-teal: #03989E;           /* Teal of the live site's buttons — a sparing accent (Kathleen, 2026-11-05) */
    --color-teal-soft: #027479;      /* The same teal, darker, for small text on beige */
    --color-rule: rgba(42, 38, 34, 0.12); /* 12% ink — borders, dividers */

    /* Editorial direction (Kathleen's mockups, 2026-06-01) */
    --color-orange-bold: #DD7A2E;    /* Pumpkin orange — category tiles, "music classes", "Our" */
    --color-hero-bg: #ECE5D6;         /* Warm greige field behind the editorial sections */
    --color-cream-btn: #E9E2D1;       /* Cream action button (Reserve / Sign up) */
    --color-cream-btn-hover: #DED5C0;

    /* Typography */
    /* The two Fallback faces are local Georgia / Times scaled to Libre Baskerville's metrics (functions.php
       shine_2026_font_faces()): the first paint already wraps like the web font, so its swap moves nothing. */
    --font-display: 'Libre Baskerville', 'Libre Baskerville Fallback', 'Libre Baskerville Fallback Times', Baskerville, Georgia, 'Times New Roman', serif;
    --font-body: 'Libre Baskerville', 'Libre Baskerville Fallback', 'Libre Baskerville Fallback Times', Baskerville, Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* orange tiles only */

    --type-h1: 64px;
    --type-h2: 40px;
    --type-h3: 22px;
    --type-stat: 56px;
    --type-lead: 19px;
    --type-body: 17px;
    --type-small: 15px;
    --type-caption: 13px;

    --type-h1-mobile: 40px;
    --type-h2-mobile: 28px;
    --type-h3-mobile: 20px;
    --type-stat-mobile: 40px;
    --type-lead-mobile: 17px;
    --type-body-mobile: 16px;

    --leading-display: 1.05;
    --leading-h2: 1.15;
    --leading-h3: 1.3;
    --leading-body: 1.55;

    --tracking-caps: 0.08em;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* Section padding */
    --section-pad-y: var(--space-32);
    --section-pad-y-mobile: var(--space-20);

    /* Container */
    --container-max: 1280px;
    --container-pad-x: var(--space-6);
    --container-pad-x-desktop: var(--space-10);
    --reading-max: 680px;

    /* Radii */
    --radius-card: 4px;
    --radius-chip: 2px;

    /* Shadow (used only on hover) */
    --shadow-lift: 0 2px 12px rgba(42, 38, 34, 0.06);

    /* Transitions */
    --t-fast: 120ms ease;
    --t-base: 200ms ease;
}

/* =========================================================
   2. Reset + base
   ========================================================= */

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

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

body {
    margin: 0;
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--type-body);
    line-height: var(--leading-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}
/* shine_picture() wraps a theme photo's <img> in a <picture> to offer WebP
   copies (inc/click-to-load.php). The wrapper draws no box of its own, so the
   <img> sits in the layout exactly as it did unwrapped. Its <source> is not
   hidden by the browser's own styles, and in a flex column with a gap
   (.masthead__cta) it would count as an empty item and add a gap. */
.shine-pic { display: contents; }
.shine-pic source { display: none; }

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--t-fast);
}

a:hover {
    color: var(--color-accent-hover);
}

button {
    font: inherit;
    cursor: pointer;
}

/* =========================================================
   3. Typography
   ========================================================= */

.h1, h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--type-h1);
    line-height: var(--leading-display);
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--color-ink);
}

.h2, h2 {
    font-family: var(--font-display);
    font-weight: 400;   /* Libre Baskerville reads best at regular; matches the hero */
    font-size: var(--type-h2);
    line-height: var(--leading-h2);
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--color-ink);
}

.h3, h3 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--type-h3);
    line-height: var(--leading-h3);
    margin: 0;
    color: var(--color-ink);
}

p {
    margin: 0 0 var(--space-4);
}

.lead {
    font-size: var(--type-lead);
    line-height: var(--leading-body);
    color: var(--color-ink);
}

.eyebrow {
    font-family: var(--font-sans);   /* clean sans for small-caps labels, pairing the serif */
    font-weight: 600;
    font-size: var(--type-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-accent-hover);
    margin: 0 0 var(--space-3);
    display: block;
}

.caption {
    font-family: var(--font-sans);
    font-size: var(--type-caption);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink);
}

.muted {
    color: var(--color-ink-muted);
}

/* =========================================================
   4. Layout primitives
   ========================================================= */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-pad-x);
    padding-right: var(--container-pad-x);
}

.section {
    padding-top: var(--section-pad-y);
    padding-bottom: var(--section-pad-y);
}

.section--canvas { background: var(--color-canvas); }
.section--surface { background: var(--color-surface); }
.section--soft { background: var(--color-surface-soft); }
.section--dark {
    background: var(--color-ink);
    color: var(--color-ink-on-dark);
}
.section--dark .h1,
.section--dark .h2,
.section--dark .h3 {
    color: var(--color-ink-on-dark);
}

.stack > * + * {
    margin-top: var(--space-4);
}

.reading {
    max-width: var(--reading-max);
}

/* =========================================================
   5. Components
   ========================================================= */

/* Button — primary (sorbet orange, near-black text) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-card);
    background: var(--color-accent);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--type-small);
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base), transform var(--t-fast);
}

.btn:hover {
    background: var(--color-accent-hover);
    color: var(--color-ink);
}

.btn:active {
    transform: translateY(1px);
}

.btn--sm {
    padding: 10px 18px;
    font-size: var(--type-caption);
}

.btn--lg {
    padding: 16px 32px;
    font-size: var(--type-body);
}

/* Picker pill — inert visual placeholder for Story 1 */
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-width: 220px;
    padding: 14px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--type-small);
    color: var(--color-ink);
    cursor: pointer;
    transition: border-color var(--t-base);
}

.pill:hover {
    border-color: rgba(42, 38, 34, 0.6);
}

.pill__caret {
    color: var(--color-ink-muted);
    font-size: 12px;
}

/* Link with arrow (used in lead-out copy) */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--color-accent);
}

.link-arrow:hover { color: var(--color-accent-hover); }

/* =========================================================
   6. Header / nav
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-surface);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-base);
}

.site-header.is-scrolled {
    border-bottom-color: rgba(42, 38, 34, 0.08);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    min-height: 72px;
}

.site-header__logo {
    display: inline-flex;
    align-items: center;
}

.site-header__logo img {
    height: 40px;
    width: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.site-nav__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.site-nav__menu a {
    color: var(--color-ink);
    font-weight: 500;
    font-size: var(--type-small);
    text-decoration: none;
    padding: var(--space-2) 0;
    border-bottom: 2px solid transparent;
    transition: border-color var(--t-base);
}

.site-nav__menu a:hover {
    border-bottom-color: var(--color-accent);
    color: var(--color-ink);
}

.site-nav__menu .current-menu-item a,
.site-nav__menu .current_page_item a {
    border-bottom-color: var(--color-accent-hover);
}

.site-nav__lang {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--type-caption);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink);
}

.site-nav__lang a {
    color: var(--color-ink);
}

.site-nav__lang a:hover { color: var(--color-accent); }

.site-nav__lang .is-disabled {
    color: var(--color-ink-muted);
    pointer-events: none;
}

.site-nav__lang .separator {
    color: var(--color-ink-muted);
}

.site-nav__cta {
    margin-left: var(--space-4);
}

/* Mobile-nav toggle (hidden on desktop) */
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    padding: 10px 14px;
    color: var(--color-ink);
    font-size: var(--type-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

/* =========================================================
   7. Footer
   ========================================================= */

.site-footer {
    background: var(--color-ink);
    color: var(--color-ink-on-dark);
    padding: var(--space-20) 0 var(--space-10);
}

.site-footer a {
    color: var(--color-ink-on-dark);
    transition: color var(--t-fast);
}

.site-footer a:hover {
    color: var(--color-accent);
}

.site-footer__cols {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: var(--space-10);
}

.site-footer__brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--color-canvas);
    margin-bottom: var(--space-4);
}

.site-footer__brand-logo img {
    width: 56px;
    height: auto;
}

/* Brand parakeet clip in place of the logo: feathered edges melt into the dark
   footer, and a slight darken sinks its grey background toward the footer colour
   while the parakeet stays in full colour (multiply would crush it to black). */
.site-footer__brand-video { width: clamp(200px, 22vw, 280px); margin: calc(-1 * var(--space-3)) 0 var(--space-2); line-height: 0; }
.site-footer__brand-video video {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0.85) contrast(1.05);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    mask-composite: intersect;
}

.site-footer__tagline {
    font-size: var(--type-small);
    color: rgba(249, 243, 234, 0.8);
    margin: 0;
    max-width: 280px;
}

.site-footer__col-heading {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--type-caption);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: rgba(249, 243, 234, 0.6);
    margin: 0 0 var(--space-4);
}

.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 14px;
}

.site-footer__list--meta {
    color: rgba(249, 243, 234, 0.85);
}

.site-footer__bottom {
    margin-top: var(--space-16);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(249, 243, 234, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    font-size: var(--type-caption);
    color: rgba(249, 243, 234, 0.6);
}

.site-footer__social {
    display: inline-flex;
    gap: var(--space-4);
}

/* =========================================================
   8. Homepage blocks
   ========================================================= */

/* Hero */
.hero {
    background: var(--color-canvas);
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-16);
    align-items: center;
}

.hero__h1 {
    margin: 0 0 var(--space-5);
}

.hero__sub {
    font-size: var(--type-lead);
    line-height: var(--leading-body);
    color: var(--color-ink);
    opacity: 0.75;
    margin: 0 0 var(--space-10);
    max-width: 520px;
}

.hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.hero__cta {
    margin-bottom: var(--space-4);
}

.hero__sub-link {
    display: inline-block;
    font-size: var(--type-small);
    color: rgba(42, 38, 34, 0.6);
}

.hero__sub-link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.hero__image {
    border-radius: var(--radius-card);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    max-height: 560px;
    background: var(--color-surface-soft); /* visible if image fails */
}

.hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Heritage credibility band */
.heritage {
    background: var(--color-surface);
    padding: var(--space-20) 0;
}

.heritage__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-16);
    text-align: center;
}

.heritage__stat-num {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--type-stat);
    color: var(--color-accent-hover);
    line-height: 1;
    margin: 0;
}

.heritage__stat-label {
    margin-top: var(--space-3);
    font-size: var(--type-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink);
    text-transform: none;
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Explore Shine 4-card grid ---------- */
.explore {
    background: var(--color-canvas);
    padding: var(--section-pad-y) 0;
}

.explore__heading {
    margin: 0 0 var(--space-12);
    max-width: 720px;
}

.explore__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.explore__card {
    display: flex;
    flex-direction: column;
    padding: var(--space-8);
    background: var(--color-surface);
    border-radius: var(--radius-card);
    color: var(--color-ink);
    text-decoration: none;
    transition: transform var(--t-fast), box-shadow var(--t-base);
    min-height: 240px;
}

.explore__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
    color: var(--color-ink);
}

.explore__card .eyebrow {
    margin-bottom: var(--space-4);
}

.explore__card-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 var(--space-3);
    color: var(--color-ink);
}

.explore__card:hover .explore__card-title {
    color: var(--color-accent-hover);
}

.explore__card-body {
    flex: 1;
    margin: 0 0 var(--space-6);
    font-size: var(--type-small);
    color: var(--color-ink-muted);
    line-height: var(--leading-body);
}

.explore__card-link {
    font-weight: 600;
    font-size: var(--type-small);
    color: var(--color-accent);
}

/* ---------- Teacher Matching block ---------- */
.matching {
    background: var(--color-surface-soft);
    padding: var(--section-pad-y) 0;
}

.matching__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-16);
    align-items: center;
}

.matching__h2 {
    margin: 0 0 var(--space-6);
    max-width: 520px;
}

.matching__body {
    font-size: var(--type-lead);
    line-height: var(--leading-body);
    color: var(--color-ink);
    max-width: 520px;
    margin: 0 0 var(--space-8);
    opacity: 0.85;
}

.matching__actions {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.matching__secondary {
    font-size: var(--type-small);
}

.matching__image {
    border-radius: var(--radius-card);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    max-height: 560px;
    background: var(--color-canvas);
}

.matching__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Online + Gift — two orange cards on the dark block ---------- */
.online {
    position: relative;
    overflow: hidden;            /* clip the decorative drums to the dark block */
    padding: var(--section-pad-y) 0;
}
.online .container { position: relative; z-index: 1; }   /* cards stay above the drums */
.online__drums {
    position: absolute;
    right: clamp(8px, 5.5vw, 93px);   /* eased back toward the right corner */
    bottom: 0;
    width: clamp(157px, 19.8vw, 281px);   /* drums sizing */
    height: auto;
    z-index: 2;                  /* in front of the cards (pointer-events:none keeps the card clickable) */
    pointer-events: none;
    user-select: none;
}
@media (max-width: 720px) {
    .online__drums { display: none; }   /* would crowd the stacked cards on phones */
}

.online__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}

.online-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-10);
    background: var(--color-orange-bold);
    border-radius: var(--radius-card);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);   /* soft drop shadow, deeper so it reads on dark */
    color: #FFFFFF;
    text-decoration: none;
    transition: box-shadow var(--t-base), background var(--t-base), transform var(--t-fast);
}

.online-card:hover {
    background: #C96B22;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42);
    transform: translateY(-2px);
    color: #FFFFFF;
}

.online-card__eyebrow {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-4);
}

.online-card__title {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.1;
    margin: 0 0 var(--space-4);
    color: #FFFFFF;
}

.online-card__body {
    font-size: var(--type-small);
    line-height: var(--leading-body);
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 var(--space-6);
}

.online-card__niches {
    list-style: none;
    margin: 0 0 var(--space-8);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.online-card__niche {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-chip);
    padding: 4px 10px;
}

.online-card__cta {
    margin-top: auto;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: var(--type-small);
    color: #FFFFFF;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}

/* ---------- What we teach — services overview ---------- */
.services {
    background: var(--color-canvas);
    padding: var(--section-pad-y) 0;
}

.services__heading {
    margin: 0 0 var(--space-12);
}

.services__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
}

.services__col .eyebrow {
    margin-bottom: var(--space-5);
}

.services__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-rule);
}

.services__list li {
    border-bottom: 1px solid var(--color-rule);
}

.services__list a {
    display: block;
    padding: var(--space-3) 0;
    color: var(--color-ink);
    font-size: var(--type-body);
    text-decoration: none;
    transition: color var(--t-fast), padding var(--t-fast);
}

.services__list a:hover {
    color: var(--color-accent-hover);
    padding-left: var(--space-2);
}

/* ---------- Featured blog ---------- */
.featured-blog {
    background: var(--color-surface);
    padding: var(--section-pad-y) 0;
}

.featured-blog__heading {
    margin: 0 0 var(--space-4);   /* the intro line sits under it */
    max-width: 720px;
}
.featured-blog__intro {
    margin: 0 0 var(--space-12);
    max-width: 720px;
    color: var(--color-ink-muted);
}

.featured-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}

.blog-card {
    /* wrapper */
}

.blog-card__link {
    display: flex;
    flex-direction: column;
    color: var(--color-ink);
    text-decoration: none;
}

.blog-card__link:hover {
    color: var(--color-ink);
}

.blog-card__image {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-surface-soft);
    margin-bottom: var(--space-4);
}

.blog-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card__image--placeholder {
    background: linear-gradient(135deg, var(--color-surface-soft), var(--color-canvas));
}

.blog-card__cat {
    margin: 0 0 var(--space-2);
}

.blog-card__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
    margin: 0 0 var(--space-2);
    color: var(--color-ink);
}

.blog-card__link:hover .blog-card__title {
    color: var(--color-accent-hover);
}

.blog-card__excerpt {
    font-size: var(--type-small);
    color: var(--color-ink-muted);
    line-height: var(--leading-body);
    margin: 0 0 var(--space-4);
}

.blog-card__more {
    font-weight: 600;
    font-size: var(--type-small);
    color: var(--color-accent);
}

.featured-blog__all {
    margin-top: var(--space-12);
    text-align: center;
}

/* ---------- Cross-brand bar ---------- */
.collective {
    background: var(--color-canvas);
    padding: var(--space-20) 0;
}

.collective__heading {
    text-align: center;
    color: rgba(42, 38, 34, 0.6);
    margin: 0 0 var(--space-10);
}

.collective__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

.collective__card {
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    background: var(--color-surface);
    border-radius: var(--radius-card);
    color: var(--color-ink);
    text-decoration: none;
    transition: transform var(--t-fast), box-shadow var(--t-base);
}

.collective__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
    color: var(--color-ink);
}

.collective__card--current {
    border-bottom: 2px solid var(--color-accent);
}

.collective__name {
    margin: 0 0 var(--space-2);
    font-weight: 600;
    font-size: var(--type-small);
    color: var(--color-ink);
}

.collective__desc {
    margin: 0;
    font-size: 13px;
    color: var(--color-ink-muted);
    line-height: 1.45;
}

/* =========================================================
   9. Placeholder content shells
   (page, single, archive — for content surfaces not yet
    fully designed against spec; later stories replace each)
   ========================================================= */

.content-shell {
    padding: var(--space-20) 0;
}

.content-shell__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--type-h2);
    line-height: var(--leading-h2);
    margin: 0 0 var(--space-8);
    color: var(--color-ink);
}

.content-shell__body {
    max-width: var(--reading-max);
    margin: 0 auto;
}

.content-shell__body h2 {
    font-size: var(--type-h2);
    margin: var(--space-12) 0 var(--space-4);
}

.content-shell__body h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--type-h3);
    margin: var(--space-8) 0 var(--space-3);
}

.content-shell__body p {
    margin: 0 0 var(--space-4);
}

.content-shell__body img {
    border-radius: var(--radius-card);
    margin: var(--space-6) 0;
}

.content-shell__body ul,
.content-shell__body ol {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-6);
}

.content-shell__body blockquote {
    border-left: 3px solid var(--color-accent);
    padding-left: var(--space-6);
    margin: var(--space-6) 0;
    color: var(--color-ink-muted);
    font-style: italic;
}

.content-shell__placeholder-note {
    background: var(--color-surface-soft);
    border-radius: var(--radius-card);
    padding: var(--space-4) var(--space-6);
    font-size: var(--type-caption);
    color: var(--color-ink-muted);
    margin-bottom: var(--space-8);
    max-width: var(--reading-max);
    margin-left: auto;
    margin-right: auto;
}

/* 404 */
.not-found {
    padding: var(--space-32) 0;
    text-align: center;
}

.not-found__code {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 96px;
    color: var(--color-accent-hover);
    margin: 0;
    line-height: 1;
}

.not-found__title {
    margin: var(--space-6) 0 var(--space-4);
}

.not-found__cta {
    margin-top: var(--space-8);
}

/* =========================================================
   10. Utilities
   ========================================================= */

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-ink);
    color: var(--color-ink-on-dark);
    padding: var(--space-3) var(--space-4);
    z-index: 1000;
}

.skip-link:focus {
    left: var(--space-4);
}

/* =========================================================
   10b. Editorial direction (Kathleen's mockups, 2026-06-01)
   Masthead, split nav, hero composition, category tiles,
   connections, reviews + Our Teachers.
   ========================================================= */

/* Italic emphasis inside display headings (the roman/italic mix) */
h1 em, h2 em, .h1 em, .h2 em,
.home-hero__headline em, .explore__heading em {
    font-style: italic;
    font-weight: inherit;
}

/* ---------- Cream action button (Reserve / Sign up / Choose) ---------- */
.btn-cream {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    background: var(--color-cream-btn);
    border: 1px solid rgba(42, 38, 34, 0.14);
    border-radius: var(--radius-chip);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base);
}
.btn-cream:hover { background: var(--color-cream-btn-hover); color: var(--color-ink); }
.btn-cream--sm { padding: 9px 18px; font-size: 13px; }
.btn-cream--orange { background: var(--color-orange-bold); border-color: transparent; color: var(--color-ink-on-dark); }
.btn-cream--orange:hover { background: #c46a22; color: var(--color-ink-on-dark); }
/* "Reserve a class" (home masthead and the header on every other page) turns orange on hover. */
.masthead__cta .btn-cream:hover, .site-header .btn-cream--sm:hover { background: var(--color-orange-bold); border-color: var(--color-orange-bold); color: var(--color-ink-on-dark); }

/* ---------- Cream central column (homepage) ----------
   Body is white; the homepage content sits in a centered cream column
   with white margins either side, and the content is narrower still. */
.home #main {
    max-width: 1120px;
    margin: 0 auto;
    background: var(--color-hero-bg);
}
.home #main .container {
    max-width: 960px;
}

/* ---------- Masthead (homepage) ---------- */
.masthead {
    position: relative;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    min-height: 94vh;          /* fills the screen; the nav row sits at the top */
}
.masthead > .container {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* brand sits in the vertical middle of the tall masthead */
}

.masthead__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.masthead__media {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-455px, -45%);   /* floated further left (~10%) for the square ShineParakeet clip */
    height: clamp(480px, 70vh, 730px);
    width: auto;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: multiply;             /* light video background melts into the white masthead */
    /* No CSS filter (13 Nov 2026): the clip is ShineParakeet-phone.mp4, whose
       file carries the grade this rule used to apply, brightness(0.95)
       contrast(1.15) saturate(0.85), and a pure white ground. In WebKit the
       filter left the ground a shade below white, a white square behind the
       bird on an iPad, an iPhone turned sideways and Safari on a Mac. The
       four edges feathered, as the phone clip's (section 11b). */
    -webkit-mask-image:
        linear-gradient(to right, rgba(0,0,0,0) 0, #000 9%, #000 91%, rgba(0,0,0,0) 100%),
        linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 4%, #000 96%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, rgba(0,0,0,0) 0, #000 9%, #000 91%, rgba(0,0,0,0) 100%),
        linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 4%, #000 96%, rgba(0,0,0,0) 100%);
    mask-composite: intersect;
}

.masthead__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    z-index: 2;
}
.masthead__estudio {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(32px, 4.8vw, 56px);
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--color-ink);
}
.masthead__wordmark {
    width: clamp(180px, 25vw, 290px);
    height: auto;
    margin-top: var(--space-2);
}

.masthead__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-8);
    position: relative;
    z-index: 2;
}
.masthead__pick { width: 40px; height: auto; }
/* The top edge of the home page's beige column fades up into the white
   masthead instead of starting on a hard line (Kathleen, 2026-10-03). */
.home .home-hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--space-20);
    background: linear-gradient(to bottom, var(--color-surface) 0%, rgba(236, 229, 214, 0) 100%);
    pointer-events: none;
    z-index: 0;
}
.home .home-hero > .container { position: relative; z-index: 1; }

/* ---------- Split nav row ---------- */
.topnav {
    background: var(--color-surface);
    border-top: 1px solid var(--color-rule);
}
.topnav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    min-height: 56px;
    padding-top: var(--space-3);
    padding-bottom: var(--space-5);
}
.topnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--space-8);
}
.topnav__list--right { justify-content: flex-end; }
.topnav__list a {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-ink);
    text-decoration: none;
}
.topnav__list a:hover { color: var(--color-orange-bold); }
.topnav__list a.topnav__em,
.topnav__list a.topnav__phone {
    text-transform: none;
    font-style: italic;
    letter-spacing: 0;
}

/* Compact header (inner pages) */
.topnav--compact { border-top: 0; background: transparent; }
/* Home page: the menu row sits above the masthead, ruled underneath. */
.topnav--top { position: relative; z-index: 30; border-top: 0; border-bottom: 1px solid var(--color-rule); }
.topnav--top .topnav__inner { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.topnav--compact .topnav__inner { min-height: 0; gap: var(--space-6); }
.topnav--compact .topnav__list { gap: var(--space-6); }
.topnav--compact .topnav__list a { font-size: 15px; }
/* Language switcher: EN | ES (| CA where a Catalan page exists). */
.lang-switch { display: flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.06em; }
.topnav .topnav__list .lang-switch__item { font-family: var(--font-sans); font-size: 13px; font-weight: 600; font-style: normal; letter-spacing: 0.06em; color: var(--color-ink-muted); text-decoration: none; }
.topnav .topnav__list a.lang-switch__item:hover { color: var(--color-orange-bold); }
/* Menu items, the phone and the button never break onto a second line. */
.topnav__list a, .topnav__phone, .topnav .btn-cream--sm { white-space: nowrap; }
/* Spanish and Catalan words run longer than the English, so the menu is set a
   little smaller there to keep it on one neat line (Kathleen, 2026-10-03).
   The one-line row is the desktop menu (1200px and wider); below that the
   menu panel sets its own sizes (mobile audit, 11 Nov 2026). */
@media (min-width: 1200px) {
    html[lang^="es"] .topnav__list a, html[lang^="ca"] .topnav__list a { font-size: 13px; letter-spacing: 0.03em; }
    html[lang^="es"] .topnav--compact .topnav__list a, html[lang^="ca"] .topnav--compact .topnav__list a { font-size: 13px; }
    html[lang^="es"] .topnav--compact .topnav__list, html[lang^="ca"] .topnav--compact .topnav__list { gap: var(--space-5); }
    html[lang^="es"] .topnav .btn-cream--sm, html[lang^="ca"] .topnav .btn-cream--sm { font-size: 12px; padding: 9px 14px; }
}
.lang-switch__item.is-current { color: var(--color-ink); font-weight: 700; }
.lang-switch__sep { color: var(--color-rule); }

/* ---------- Nav dropdowns ---------- */
.topnav__list { position: relative; }          /* anchor for the wide instruments panel */
.has-dropdown { position: relative; }
.has-dropdown > a::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 7px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.55;
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.has-dropdown:hover > a::after,
.has-dropdown:focus-within > a::after { opacity: 1; transform: translateY(2px); }

.dropdown,
.megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    box-shadow: 0 20px 44px rgba(42, 38, 34, 0.16);
    padding: var(--space-4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:hover > .megamenu,
.has-dropdown:focus-within > .dropdown,
.has-dropdown:focus-within > .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Simple dropdown — Courses */
.dropdown__list { list-style: none; margin: 0; padding: 0; min-width: 250px; }
.dropdown__list a {
    display: block;
    padding: 9px 14px;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-ink);
    text-decoration: none;
    border-radius: var(--radius-card);
    white-space: nowrap;
}
.dropdown__list a:hover,
.dropdown__list a:focus { background: var(--color-canvas); color: var(--color-orange-bold); }
/* Nested Teachers menu: instrument categories with fly-out teacher submenus */
.has-subdropdown { position: relative; }
.has-subdropdown > a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.has-subdropdown__chev { color: var(--color-ink-muted); font-size: 18px; line-height: 1; }
.subdropdown { top: calc(-1 * var(--space-4)); left: 100%; margin-left: var(--space-2); z-index: 61; }
.has-subdropdown:hover > .subdropdown,
.has-subdropdown:focus-within > .subdropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.has-subdropdown:hover > a, .has-subdropdown:focus-within > a { background: var(--color-canvas); color: var(--color-orange-bold); }

/* Mega panel — Instruments. Anchored to the whole nav row so it never overflows. */
.has-dropdown--mega { position: static; }
.megamenu { left: 0; right: auto; min-width: 640px; max-width: min(900px, 94vw); }
.megamenu__cols {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
}
/* Seven families since 11 Nov 2026 (Strings, Keys, Wind, Percussion, Voice,
   Music studies, Other). The panel gets a set width, so it no longer shrinks
   to its 640px minimum: 900px, or the window less 120px when the window is
   narrow. The panel starts where the menu starts, which is up to 349px in on
   a wide window (the Catalan inner pages) and up to 93px in on a narrow one,
   so its right edge stays on screen in all three languages (measured at
   721 to 1440px, 11 Nov 2026). Wide windows: the seven side by side, each
   column as wide as its names need (auto), names wrapping inside their
   column rather than running into the next. From 1100px down: four columns,
   then the last three on a second row. */
.has-dropdown--mega > .megamenu { width: min(900px, calc(100vw - 120px)); max-width: none; min-width: 0; }
.has-dropdown--mega .megamenu__cols { grid-template-columns: repeat(7, auto); gap: var(--space-5) var(--space-4); }
.has-dropdown--mega .megamenu__group-title,
.has-dropdown--mega .megamenu__list a { white-space: normal; }
.has-dropdown--mega .megamenu__list a { line-height: 1.3; text-wrap: balance; } /* "Music awareness, / 3 to 5", not a lone "5" */
@media (max-width: 1100px) {
    .has-dropdown--mega .megamenu__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.megamenu__group-title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-ink-muted);
}
.megamenu__list { list-style: none; margin: 0; padding: 0; }
.megamenu__list a {
    display: block;
    padding: 5px 0;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-ink);
    text-decoration: none;
}
.megamenu__list a:hover,
.megamenu__list a:focus { color: var(--color-orange-bold); }

/* Teachers mega panel — far more names than the instruments menu, so stack the
   families and flow each name list into balanced columns; cap the height and
   scroll if it gets very tall. */
.megamenu--teachers { max-width: min(1100px, 94vw); max-height: 72vh; overflow-y: auto; }
.megamenu--teachers .megamenu__cols { display: block; }
.megamenu--teachers .megamenu__group + .megamenu__group {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-rule);
}
.megamenu--teachers .megamenu__list--names {
    column-width: 165px;
    column-gap: var(--space-6);
}
.megamenu--teachers .megamenu__list--names li { break-inside: avoid; }
.megamenu--teachers .megamenu__list--names a { padding: 4px 0; font-size: 14px; }

/* ---------- Home hero ---------- */
.home-hero {
    background: var(--color-hero-bg);
    padding: var(--space-20) 0 var(--space-24);
}
.home-hero__grid {
    display: grid;
    grid-template-columns: 1fr 0.82fr;
    gap: var(--space-16);
    align-items: start;
}
.home-hero__headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(38px, 5.2vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-6);
    color: var(--color-ink);
}
.home-hero__tagline {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.9vw, 21px);
    line-height: 1.4;
    color: var(--color-ink);
    margin: 0 0 var(--space-5);   /* the lead follows close; it keeps the gap to the picker */
}
/* The H1 is the small eyebrow above the big line (an h1 would otherwise
   bring its tight display line height to a label that can wrap on phones). */
.home-hero__eyebrow { line-height: 1.4; }
/* Live's SEO opening under the tagline (Phase 3 merge, 9 Nov 2026). */
.home-hero__lead {
    max-width: 34em;
    margin: 0 0 var(--space-10);
}

/* ---------- Picker card ---------- */
.picker-card__wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
}
.picker-card {
    position: relative;
    z-index: 2;
    width: min(360px, 100%);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    box-shadow: 0 10px 24px rgba(42, 38, 34, 0.08);
    padding: var(--space-10) var(--space-10) var(--space-12);
}
.picker-card__body { position: relative; z-index: 2; }
.picker-card__title {
    font-family: var(--font-sans);   /* same chunky sans as the orange tiles */
    font-weight: 800;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: lowercase;
    color: var(--color-orange-bold);
    margin: 0 0 var(--space-4);
    max-width: 6em;
}
.picker-card__intro {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-ink);
    margin: 0 0 var(--space-5);
    max-width: 64%;
}
.picker-card__form { position: relative; z-index: 2; }
.picker-card__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0 0 var(--space-8);
}
.picker-field { display: block; position: relative; }
.picker-field__select {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-rule);
    border-radius: 0;
    padding: var(--space-2) var(--space-6) var(--space-2) 0;
    cursor: pointer;
}
.picker-field__select:focus {
    outline: none;
    border-bottom-color: var(--color-orange-bold);
}
/* before a choice is made the placeholder option is selected (value="") -> muted */
.picker-field__select:invalid { color: var(--color-ink-muted); }
.picker-field::after {
    content: '\25BE';
    position: absolute;
    right: var(--space-1);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-ink-muted);
    font-size: 12px;
    pointer-events: none;
}
.picker-card__guitar {
    position: absolute;
    top: 40px;
    right: -40px;          /* pokes out to the right of the narrow card, stays in the left column */
    width: clamp(140px, 15vw, 190px);
    height: auto;
    z-index: 0;            /* behind the white card; only the part beyond the card shows */
    pointer-events: none;
}

/* ---------- Category tiles ---------- */
.home-hero__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}
.cat-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* minmax: a long word never widens the column (es 'PARTICULARES' at 320px) */
    gap: var(--space-6) var(--space-8);
}
.cat-card {
    display: flex;
    align-items: flex-end;
    min-height: 210px;
    padding: var(--space-6);
    background: var(--color-orange-bold);
    border-radius: var(--radius-card);
    box-shadow: 0 10px 22px rgba(42, 38, 34, 0.16);
    text-decoration: none;
    transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.cat-card:hover {
    background: #C96B22;
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(42, 38, 34, 0.22);
}
.cat-card__label {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: clamp(16px, 1.7vw, 20px);
    line-height: 1.1;
    text-transform: uppercase;
    color: #FFFFFF;
}

/* ---------- Connections block ---------- */
.connections {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);   /* mirrors the tile grid so the logo card == a tile */
    gap: var(--space-8);
    align-items: start;
}
.connections__lead {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.35;
    color: var(--color-ink);
    margin: 0 0 var(--space-3);
}
.connections__body {
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-ink);
    margin: 0;
}
.connections__logo {
    min-height: 210px;          /* same size as the orange tiles */
    background: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: 0 10px 22px rgba(42, 38, 34, 0.16);   /* soft shadow, matching .cat-card */
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    text-align: center;
    text-decoration: none;
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.connections__logo:hover {
    box-shadow: 0 16px 30px rgba(42, 38, 34, 0.22);
    transform: translateY(-3px);
}
.connections__logo-pick { width: 64px; height: auto; }
.connections__logo-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ll-shine {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 30px;
    line-height: 1;
    color: var(--color-ink);
}
.ll-sub {
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12px;
    color: var(--color-ink);
    margin-top: var(--space-2);
}

/* ---------- Explore heading (editorial override) ---------- */
.explore {
    background: var(--color-orange-bold);
    padding-top: var(--space-12);   /* tight top gap, with a little breathing room for the colour block (Kathleen 2026-06-04) */
    position: relative;
    z-index: 1;                     /* sits a layer below the hero so the floating guitar tucks behind it */
}
.explore__heading {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(32px, 4.4vw, 54px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    max-width: none;
    color: var(--color-ink-on-dark);   /* off-white on the orange block */
    margin-top: clamp(60px, 7vw, 100px);   /* drop the title below the floating guitar */
}

/* Floating guitar: rests on top of the orange block but its top edge is
   covered by the hero section above, so it reads as emerging from behind it.
   Tuning knobs are `top` (more negative = more tucked behind) and `width`. */
.home-hero {
    position: relative;
    z-index: 2;                     /* opaque beige hero paints over the guitar's top */
}
.explore__guitar {
    position: absolute;
    left: clamp(19px, 6.3vw, 110px);   /* eased back toward the left edge */
    top: -40px;                     /* small tuck behind the hero (violin is short, so less overlap) */
    width: clamp(274px, 31.8vw, 446px);   /* 50% of the first pass, then +20% */
    height: auto;
    z-index: 0;                     /* above the orange field, below the text/cards */
    pointer-events: none;
    user-select: none;
}
.explore .container {
    position: relative;
    z-index: 1;                     /* headline + cards stay above the guitar */
}
@media (max-width: 1024px) {
    .explore__guitar { top: -24px; }
}
@media (max-width: 720px) {
    .explore__guitar { display: none; }   /* would crowd the wrapped headline on phones */
    .explore__heading { margin-top: 0; }  /* no guitar to clear here */
}

/* ---------- Reviews + Our Teachers ---------- */
/* ---------- Why Shine (brand video + approach) ---------- */
.why {
    background: var(--color-surface);
    padding: var(--space-24) 0;
}
.why__grid {
    display: grid;
    grid-template-columns: 1.65fr 1fr;   /* video column gets the majority width */
    gap: var(--space-10) var(--space-12);
    align-items: center;                 /* text floats centred alongside the title + video */
}
.why__eyebrow { color: var(--color-orange-bold); }
.why__heading {
    margin: 0 0 var(--space-6);   /* title sits directly above the video */
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--color-ink);
}
.why__lead {
    margin: 0 0 var(--space-4);
    font-size: var(--type-lead);
    line-height: 1.6;
    color: var(--color-ink);
}
.why__body {
    margin: 0 0 var(--space-6);
    font-size: var(--type-body);
    line-height: 1.6;
    color: var(--color-ink-muted);
}
.why__video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-ink);
    box-shadow: 0 24px 60px rgba(42, 38, 34, 0.18);
}
.why__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
@media (max-width: 860px) {
    .why { padding: var(--space-16) 0; }
    .why__grid { grid-template-columns: 1fr; gap: var(--space-8); }   /* title + video, then text */
}

.proof {
    background: var(--color-hero-bg);
    padding: var(--space-8) 0 var(--space-24);
}
.proof__head {
    max-width: 640px;
    margin: 0 auto var(--space-12);
    text-align: center;
}
.proof__eyebrow {
    color: var(--color-orange-bold);
    margin-bottom: var(--space-3);
}
.proof__heading {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--color-ink);
}
.proof__sub {
    margin: var(--space-4) 0 0;
    font-size: var(--type-small);
    color: var(--color-ink-muted);
}
/* Reviews slider — 3 per view desktop, 2 tablet, 1 mobile; auto-advancing */
.reviews-slider {
    position: relative;
    min-width: 0;   /* respect the grid column; without this the track's intrinsic width overflows it */
}
.reviews-slider__viewport {
    overflow: hidden;
    transition: height var(--t-base);
}
.reviews-slider__track {
    display: flex;
    align-items: flex-start;   /* each card hugs its own content, not the tallest */
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform var(--t-base);
    will-change: transform;
}
.reviews-slider__slide {
    flex: 0 0 calc(((100% - 2 * var(--space-5)) / 3) * 0.96);   /* 3 per view on desktop, slight peek of the next */
    min-width: 0;
}
.reviews-slider__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}
.reviews-slider__dots {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.reviews-slider__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-rule);
    cursor: pointer;
    transition: background var(--t-base), transform var(--t-base);
}
.reviews-slider__dot[aria-current="true"] {
    background: var(--color-orange-bold);
    transform: scale(1.3);
}
/* The arrows and the "2 / 9" count are the phones' (section 11b). */
.reviews-slider__arrow,
.reviews-slider__status { display: none; }
.review-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    margin: 0;
}
.review-card__stars {
    color: var(--color-accent);
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: var(--space-3);
}
.review-card__quote {
    font-size: var(--type-small);
    line-height: 1.5;
    color: var(--color-ink-muted);
    font-style: italic;
    margin: 0 0 var(--space-3);
}
.review-card__source {
    padding-top: var(--space-3);
    font-size: var(--type-caption);
    color: var(--color-ink-muted);
}
/* Our Teachers — removed from the homepage 2026-06-04; styles kept for easy restore */
.our-teachers { text-align: center; }
.our-teachers__collage {
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 0 auto var(--space-4);
}
.our-teachers__heading {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 42px);
    letter-spacing: 0.02em;
    line-height: 1.05;
    margin: 0 0 var(--space-5);
    color: var(--color-orange-bold);
    text-transform: uppercase;
    white-space: nowrap;        /* keep "Our TEACHERS" on one line */
}
.our-teachers__heading em {
    font-style: italic;
    text-transform: none;
    color: var(--color-orange-bold);
}
.our-teachers__cta { background: var(--color-surface); }   /* white, not cream */
.our-teachers__cta:hover { background: var(--color-cream-btn); }

/* ---------- Editorial responsive ---------- */
@media (max-width: 960px) {
    .home-hero__grid { grid-template-columns: 1fr; gap: var(--space-16); }
    .picker-card { max-width: 520px; }
}

/* Reviews slider drops to 2 per view on tablet */
@media (max-width: 1024px) and (min-width: 721px) {
    .reviews-slider__slide { flex-basis: calc(((100% - var(--space-5)) / 2) * 0.95); }
}

/* Tablets (721-1199px, owner's mobile review 11 Nov 2026): the desktop
   parakeet sits 455px left of the middle, so on a 768px screen it was cut off
   at the left edge, inside 94vh of white. Here it stands above the wordmark,
   centred (its sculpture sits left of the clip's middle, so the clip moves 6%
   right), the masthead only as tall as its content. Desktop (1200+) is as
   before. */
@media (min-width: 721px) and (max-width: 1199px) {
    .masthead { min-height: 0; }
    .masthead > .container { padding-top: var(--space-6); padding-bottom: var(--space-12); }
    .masthead__media {
        position: static;
        transform: translateX(6%);
        width: min(56vw, 46vh, 440px);
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 auto calc(-1 * var(--space-6));
    }
}

@media (max-width: 720px) {
    .masthead__media { display: none; }   /* phones show .masthead__media-phone instead (section 11b) */
    /* The nav row is the bar + menu panel below 1200px (section 11b). */
    .cat-grid { gap: var(--space-3); }
    .cat-card { min-height: 120px; }
}
@media (max-width: 400px) {
    /* Very small phones (320-400px): the tile labels wrap or hyphenate inside
       the tile instead of pushing the page wider (11 Nov 2026). */
    .cat-card { padding: var(--space-4); }
    .cat-card__label { overflow-wrap: anywhere; hyphens: auto; }
    .connections { grid-template-columns: 1fr; }
    .connections__logo { width: 130px; }
    .picker-card { max-width: 100%; }
    .picker-card__intro { max-width: 100%; }
    /* The card is full width on phones, so the guitar poking out beside a
       narrow card cannot work: only an 8px dark sliver showed past its edge. */
    .picker-card__guitar { display: none; }
    .reviews-slider__slide { flex-basis: 100%; }   /* one review per view on mobile */
}

/* ---------- Community page ---------- */
.community-hero {
    background: var(--color-hero-bg);
    padding: var(--section-pad-y) 0;
    text-align: center;
}
.community-hero .eyebrow { color: var(--color-orange-bold); }
.community-hero__title { margin: 0 0 var(--space-5); }
.community-hero__lead {
    max-width: 600px;
    margin: 0 auto var(--space-8);
    color: var(--color-ink);
}
.community-blocks { padding: var(--section-pad-y) 0; }
.community-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12);
}
.community-item .eyebrow { color: var(--color-orange-bold); }
.community-item h2 { margin: 0 0 var(--space-4); }
.community-item p { color: var(--color-ink); margin: 0; }
.community-cta {
    background: var(--color-hero-bg);
    padding: var(--section-pad-y) 0;
    text-align: center;
}
.community-cta h2 { margin: 0 0 var(--space-4); }
.community-cta__body {
    max-width: 560px;
    margin: 0 auto var(--space-6);
    color: var(--color-ink);
}

@media (max-width: 720px) {
    .community-grid { grid-template-columns: 1fr; gap: var(--space-12); }
}

/* =========================================================
   11. Responsive
   ========================================================= */

@media (min-width: 720px) {
    .container {
        padding-left: var(--container-pad-x-desktop);
        padding-right: var(--container-pad-x-desktop);
    }
}

@media (max-width: 960px) {
    .hero__grid {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }
    .hero__image {
        order: -1; /* image above text on mobile */
        max-height: 420px;
    }
}

@media (max-width: 720px) {
    :root {
        --type-h1: var(--type-h1-mobile);
        --type-h2: var(--type-h2-mobile);
        --type-h3: var(--type-h3-mobile);
        --type-stat: var(--type-stat-mobile);
        --type-lead: var(--type-lead-mobile);
        --type-body: var(--type-body-mobile);
        --section-pad-y: var(--section-pad-y-mobile);
        --container-pad-x: var(--space-5);   /* a 20px side gutter on phones (mobile audit, 11 Nov 2026) */
    }

    .site-nav__menu,
    .site-nav__lang {
        display: none;
    }

    .site-nav__cta {
        margin-left: 0;
    }

    .hero__pills {
        flex-direction: column;
    }

    .hero__pills .pill {
        width: 100%;
    }

    .hero__cta {
        width: 100%;
    }

    .heritage__row {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    /* Footer on phones (mobile audit, 11 Nov 2026): the brand and Visit us
       full width, then Quick links beside Shine Collective, so it is no longer
       one 1,360px column; every link is a 44px row; the extra 64px at the
       bottom keeps the last links clear of the WhatsApp Chat button. */
    .site-footer {
        padding: var(--space-16) 0 calc(var(--space-8) + 64px);
    }

    .site-footer__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-10) var(--space-6);
    }

    .site-footer__cols > div:nth-child(-n+2) {
        grid-column: 1 / -1;
    }

    .site-footer__tagline,
    .site-footer__list {
        font-size: 16px;
    }

    .site-footer__list {
        gap: 0;
    }

    .site-footer__list--meta {
        gap: var(--space-1);
    }

    .site-footer__list a,
    .site-footer__social a,
    .site-footer__legal a,
    .site-footer__legal .shine-consent-link {
        display: inline-flex;
        align-items: center;
        min-width: 44px;
        min-height: 44px;
    }

    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        margin-top: var(--space-10);
    }

    .site-footer__social {
        flex-wrap: wrap;
        gap: 0 var(--space-6);
    }

    /* The legal links wrap; a "·" left at a line end looked stray, so on
       phones the 44px rows are set apart by space alone. */
    .site-footer .site-footer__legal {
        gap: 0 var(--space-5);
    }

    .site-footer__legal .separator {
        display: none;
    }

    .explore__grid,
    .featured-blog__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .matching__grid {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .matching__image {
        order: -1;
    }

    .matching__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .online__cards {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .online-card {
        padding: var(--space-8);
    }

    .services__grid {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .collective__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Narrow tablets (an iPad mini is 744px): the four footer columns need about
   760px (the email address cannot wrap), so they sit two by two up to 900px
   instead of pushing the page wider than the screen (mobile audit, 11 Nov 2026). */
@media (max-width: 900px) and (min-width: 721px) {
    .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet — 2-up cards where 4-up doesn't fit */
@media (max-width: 1024px) and (min-width: 721px) {
    .explore__grid,
    .collective__grid,
    .featured-blog__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .featured-blog__grid {
        gap: var(--space-8);
    }
}

/* =========================================================
   11b. Phone and tablet header: one bar + the menu panel
   (mobile audit, 11 Nov 2026)

   The one-row desktop menu needs about 1,100px in English and
   1,200px in Spanish. Below that it ran off the screen (a 390px
   phone page was up to 532px wide, a tablet page 1,117px),
   squeezed the logo to 0px and could not open its submenus by
   touch. So below 1200px: one 60px bar (the pick logo, home, on
   the left; Reserve and the menu button on the right) and a
   full-screen panel with the same two lists, each submenu an
   accordion behind its + button (header.php; the script is
   shine_2026_inline_menu_script() in functions.php). From
   1200px up none of this applies: the desktop header is as it was.
   ========================================================= */

/* Desktop: the panel draws no box, so its two lists stay items of the nav
   row; the phone and tablet pieces are hidden. */
.topnav__panel { display: contents; }
.topnav__logo,
.topnav__sub,
.topnav__reserve--bar,
.topnav__reserve--panel,
.masthead__media-phone { display: none; }

@media (max-width: 1199px) {
    /* ---- The bar ---- */
    .site-header__inner { min-height: 60px; gap: var(--space-3); }
    .site-header__logo {
        flex: 0 0 auto;              /* a flex item may shrink: it went to 0px beside the too-wide menu */
        min-width: 44px;             /* the pick (33px) sits on the gutter line; the tap area is 44px */
        min-height: 44px;
    }
    .site-header__logo img { height: 36px; width: auto; max-width: none; }
    .topnav__logo { display: inline-flex; }
    .masthead__pick { display: none; }   /* the bar carries the pick now; no second one under Reserve */

    .topnav__inner,
    .topnav--top .topnav__inner {
        flex-wrap: nowrap;
        gap: var(--space-2);
        min-height: 60px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .topnav--compact .topnav__inner { justify-content: flex-end; min-height: 0; gap: var(--space-2); }

    .topnav__reserve--wide { display: none; }
    .topnav .topnav__reserve--bar {
        display: inline-flex;
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0 var(--space-4);
        font-size: 12px;
        letter-spacing: 0.06em;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        flex: 0 0 auto;
        min-width: 44px;
        min-height: 44px;
        padding: 0 var(--space-3);
        background: var(--color-surface);
    }
    .nav-toggle:hover { border-color: rgba(42, 38, 34, 0.4); }
    .nav-toggle:focus-visible,
    .topnav__sub:focus-visible { outline: 2px solid var(--color-orange-bold); outline-offset: 2px; }
    /* Three bars drawn in CSS; open, they turn into a cross. */
    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after {
        display: block;
        width: 18px;
        height: 2px;
        border-radius: 1px;
        background: currentColor;
        transition: transform var(--t-base), background-color var(--t-base);
    }
    .nav-toggle__bars { position: relative; }
    .nav-toggle__bars::before,
    .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
    .nav-toggle__bars::before { top: -6px; }
    .nav-toggle__bars::after { top: 6px; }
    .nav-open .nav-toggle__bars { background-color: transparent; }
    .nav-open .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
    .nav-open .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

    /* ---- The panel: closed until the button opens it, then a sheet from
       the bar down to the bottom of the screen that scrolls on its own. ---- */
    .topnav__panel { display: none; }
    .nav-open .topnav__panel {
        display: block;
        position: fixed;
        top: 61px;                   /* the script sets the bar's own bottom edge */
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: var(--space-2) max(var(--container-pad-x-desktop), calc((100% - 720px) / 2)) var(--space-12);   /* a 720px column on tablets */
        background: var(--color-surface);
        border-top: 1px solid var(--color-rule);
        text-align: left;
    }
    /* The page behind stays put. On html only: hiding body's overflow as
       well would unstick the header. */
    html { scrollbar-gutter: stable; }   /* the bar does not jump sideways when the menu opens (classic scrollbars) */
    html.nav-open { overflow: hidden; }
    html.nav-open .qlwapp__container { display: none; }   /* the WhatsApp Chat button never floats over the menu */

    /* Home: the masthead's Reserve is under the panel, so it comes first in it. */
    .topnav .topnav__reserve--panel {
        display: flex;
        width: 100%;
        min-height: 48px;
        margin: var(--space-4) 0 var(--space-2);
    }

    /* One row per item, a rule under each, 52px to tap. */
    .topnav__panel .topnav__list { display: block; }
    .topnav__panel .topnav__list > li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid var(--color-rule);
    }
    .topnav .topnav__panel .topnav__list > li:not(.lang-switch) > a {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        align-items: center;
        min-height: 52px;
        font-size: 16px;
        white-space: normal;
    }
    .topnav__panel .has-dropdown > a::after,
    .topnav__panel .has-subdropdown__chev { display: none; }   /* the desktop caret and chevrons: the + buttons stand in */

    /* The + button: 48px to tap; open, its upright turns flat (a minus). */
    .topnav__sub {
        display: inline-flex;
        position: relative;
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        margin-right: calc(-1 * var(--space-3));   /* the + lines up with the panel edge; the tap area stays 48px */
        padding: 0;
        border: 0;
        border-radius: var(--radius-card);
        background: none;
        color: var(--color-ink);
    }
    .topnav__sub::before,
    .topnav__sub::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14px;
        height: 2px;
        margin: -1px 0 0 -7px;
        border-radius: 1px;
        background: currentColor;
        transition: transform var(--t-base);
    }
    .topnav__sub::after { transform: rotate(90deg); }
    .topnav__sub[aria-expanded="true"] { color: var(--color-orange-bold); }
    .topnav__sub[aria-expanded="true"]::after { transform: rotate(0deg); }

    /* Submenus open in place under their row, indented: no hover on touch. */
    .topnav__panel .dropdown,
    .topnav__panel .megamenu {
        display: none;
        position: static;
        flex: 0 0 100%;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
        padding: 0 0 var(--space-3) var(--space-4);
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    .topnav__panel .is-open > .dropdown,
    .topnav__panel .is-open > .megamenu { display: block; }
    .topnav__panel .dropdown__list { min-width: 0; }
    .topnav__panel .dropdown__list > li { display: flex; flex-wrap: wrap; align-items: center; }
    .topnav .topnav__panel .dropdown__list a {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: var(--space-1) 0;
        font-size: 16px;
        white-space: normal;
        border-radius: 0;
        background: none;
    }
    .topnav__panel .has-subdropdown > a { justify-content: flex-start; }
    .topnav__panel .has-subdropdown:hover > a,
    .topnav__panel .has-subdropdown:focus-within > a { background: none; color: var(--color-ink); }   /* its orange + shows it is open */

    /* Instruments: the seven families flow down two columns (three on tablets). */
    .topnav__panel .has-dropdown--mega .megamenu__cols { display: block; column-count: 2; column-gap: var(--space-6); }
    .topnav__panel .megamenu__group { break-inside: avoid; padding-top: var(--space-3); }
    .topnav__panel .megamenu__group-title { margin: 0 0 var(--space-1); }
    .topnav .topnav__panel .megamenu__list a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: var(--space-1) 0;
        font-size: 16px;
    }

    /* EN | ES | CA as three 44px buttons, the page's own filled. */
    .topnav__panel .topnav__list > li.lang-switch {
        flex-wrap: wrap;
        gap: var(--space-2);
        padding-top: var(--space-5);
        border-bottom: 0;
    }
    .topnav__panel .lang-switch__sep { display: none; }
    .topnav .topnav__panel .lang-switch__item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 52px;
        min-height: 44px;
        padding: 0 var(--space-3);
        border: 1px solid var(--color-rule);
        border-radius: var(--radius-card);
        font-size: 14px;
    }
    .topnav .topnav__panel .lang-switch__item.is-current {
        background: var(--color-ink);
        border-color: var(--color-ink);
        color: var(--color-ink-on-dark);
    }

    /* /exams/ loads reCAPTCHA, whose badge Google pins to the bottom right,
       under the Chat button: there the button moves up clear of it. */
    body:has(.grecaptcha-badge) .qlwapp__container.qlwapp__container--bottom-right { bottom: 70px; }
}

@media (min-width: 600px) and (max-width: 1199px) {
    .topnav__panel .has-dropdown--mega .megamenu__cols { column-count: 3; }
}

/* Tablets: at the end of the page the legal links sit at the bottom right,
   under the Chat button, so 64px more below them (phones: section 11). */
@media (min-width: 721px) and (max-width: 1199px) {
    .site-footer { padding-bottom: calc(var(--space-10) + 64px); }
}

@media (max-width: 720px) {
    .nav-open .topnav__panel { padding-left: var(--container-pad-x); padding-right: var(--container-pad-x); }

    /* ---- Home, first screen ----
       The masthead was 94vh of white (the desktop parakeet is hidden here),
       with the H1 below the fold. Now: the parakeet clip above the wordmark,
       its sculpture centred (it sits left of the clip's middle, so the clip
       moves 6% right), the clip's white foot tucked under ESTUDIO, then
       Reserve, and the hero's headline comes up into the first screen. */
    .masthead { min-height: 0; }
    .masthead > .container { padding-top: var(--space-4); padding-bottom: var(--space-12); }
    .masthead__media-phone {
        display: block;
        width: min(78vw, 320px);
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 auto calc(-1 * var(--space-5));
        transform: translateX(6%);
        /* The clip's first frame until it plays (or for good, with reduced
           motion): a background, so only phones fetch it. */
        background: url("../video/ShineParakeet-phone-poster.jpg") center / cover no-repeat;
        mix-blend-mode: multiply;   /* its pure white ground melts into the white page */
        /* As the courses page's parakeet (.tarch-hero__media video), which
           looks right on an iPhone (owner, 12 Nov 2026): the grade is in the
           file, the white ground is pure white in every frame, no CSS
           filter, the four edges feathered. Here the desktop clip's CSS
           brightness(0.95) contrast(1.15) saturate(0.85) left the ground a
           shade below white in Safari (WebKit measured 253 on the 255 page)
           and up to 22% of the clip's own ground decoded at 250 to 253, so a
           white square showed behind the bird. ShineParakeet-phone.mp4 and
           its poster carry that grade baked in, with a white point that
           clears the ground (tests/redesign/phase6/b4/bake-phone-parakeet.swift);
           they read 2 to 3 levels lighter than before. */
        -webkit-mask-image:
            linear-gradient(to right, rgba(0,0,0,0) 0, #000 9%, #000 91%, rgba(0,0,0,0) 100%),
            linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 4%, #000 96%, rgba(0,0,0,0) 100%);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(to right, rgba(0,0,0,0) 0, #000 9%, #000 91%, rgba(0,0,0,0) 100%),
            linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 4%, #000 96%, rgba(0,0,0,0) 100%);
        mask-composite: intersect;
        pointer-events: none;
    }
    .masthead__cta { padding-top: var(--space-6); }
    .home-hero { padding-top: var(--space-12); }

    /* ---- Reviews (owner, 12 Nov 2026): one review per view in a row the
       finger scrolls and that stops on each review (scroll-snap, not the
       desktop slider's sliding track), with "2 / 9" between two 44px arrow
       buttons for a mouse or a keyboard. The dots are the desktop's. The
       script (functions.php) keeps the count and the arrows and moves
       nothing by itself here. ---- */
    .reviews-slider__viewport {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .reviews-slider__viewport::-webkit-scrollbar { display: none; }
    .reviews-slider__viewport:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
    .reviews-slider__track { transition: none; will-change: auto; }
    .reviews-slider__slide { scroll-snap-align: start; scroll-snap-stop: always; }
    .reviews-slider__dots { display: none; }
    .reviews-slider__controls { justify-content: space-between; gap: var(--space-3); }
    .reviews-slider__arrow:not([hidden]) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--color-rule);
        border-radius: 50%;
        background: var(--color-surface);
        color: var(--color-ink);
        cursor: pointer;
    }
    .reviews-slider__arrow:disabled { opacity: 0.35; cursor: default; }
    .reviews-slider__arrow:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
    .reviews-slider__status:not([hidden]) {
        display: block;
        margin: 0;
        font-size: var(--type-small);
        font-variant-numeric: tabular-nums;
        color: var(--color-ink-muted);
    }

    /* ---- Part of Shine Music Collective: body-size text on phones ---- */
    .collective__name { font-size: 17px; }
    .collective__desc { font-size: 16px; }
}

/* Narrow phones: the menu button is the three bars alone (its name stays for
   screen readers), so "RESERVA UNA CLASSE" still fits the bar at 360px. */
@media (max-width: 400px) {
    .nav-toggle { padding: 0; }
    .nav-toggle__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* The smallest phones (320 to 359px): a tighter Reserve keeps the bar on one
   line in Catalan, the longest label ("RESERVA UNA CLASSE"). */
@media (max-width: 359px) {
    .site-header__inner,
    .topnav--compact .topnav__inner { gap: var(--space-2); }
    .topnav .topnav__reserve--bar { padding: 0 var(--space-3); letter-spacing: 0.02em; }
}

/* Collective cards: one per row on phones, where two left each name about
   100px and wrapped it over three lines. */
@media (max-width: 520px) {
    .collective__grid { grid-template-columns: 1fr; gap: var(--space-3); }
    .collective__card { padding: var(--space-4) var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after,
    .topnav__sub::before,
    .topnav__sub::after { transition: none; }
}

/* =========================================================
   Instrument page (flagship pattern — Guitar first)
   Spec: _bmad-output/planning-artifacts/13-instrument-page-pattern.md
   Re-skinned to the sorbet-orange / beige palette + 29€ trial copy.
   ========================================================= */

.guitar-page { background: var(--color-canvas); }
.guitar-page .h2 { margin: 0; }
.instrument-page { background: var(--color-canvas); }   /* generalised instrument pages reuse the .ginstr-* styling */

/* ---- Hero (flagship orange block) ---- */
.ginstr-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 58vh;
    background: var(--color-orange-bold);
    color: var(--color-ink-on-dark);
    padding: var(--space-20) 0;
    overflow: hidden;
}
.ginstr-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}
.ginstr-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.ginstr-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    /* fade the photo into solid orange on the left, where the text sits */
    background: linear-gradient(to right, var(--color-orange-bold) 0%, var(--color-orange-bold) 42%, rgba(221, 122, 46, 0.45) 66%, rgba(221, 122, 46, 0) 88%);
}
.ginstr-hero > .container { position: relative; z-index: 1; width: 100%; }   /* width:100% stops the flex parent shrinking the container, so the text lines up with the sections below */
.ginstr-hero__grid {
    display: block;   /* video moved to the next section; text spans the hero */
}
.ginstr-hero__text { max-width: 760px; }
.ginstr-hero__eyebrow { color: var(--color-ink-on-dark); opacity: 0.85; }
.ginstr-hero__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(34px, 4.6vw, 58px);
    line-height: 1.06;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-5);
    color: var(--color-ink-on-dark);
}
.ginstr-hero__lead {
    font-size: var(--type-lead);
    line-height: var(--leading-body);
    color: var(--color-ink-on-dark);
    max-width: 30em;
    margin: 0 0 var(--space-8);
}
.ginstr-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-6);
}
.ginstr-hero__link {
    color: var(--color-ink-on-dark);
    font-family: var(--font-display);
    border-bottom: 1px solid rgba(249, 243, 234, 0.5);
    padding-bottom: 2px;
}
.ginstr-hero__link:hover { color: var(--color-ink-on-dark); border-bottom-color: var(--color-ink-on-dark); }
.ginstr-hero__chip {
    margin: var(--space-8) 0 0;
    font-size: var(--type-small);
    color: var(--color-ink-on-dark);
    opacity: 0.85;
}
.ginstr-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(42, 38, 34, 0.28);
    background: var(--color-ink);
    margin: var(--space-6) 0 var(--space-8);
}
.ginstr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Group + combos as small orange cards under the signup form */
.ginstr-learn__extras { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.gtile {
    display: block;
    padding: var(--space-5);
    background: var(--color-orange-bold);
    border-radius: var(--radius-card);
    box-shadow: 0 10px 22px rgba(42, 38, 34, 0.16);
    color: #fff;
    text-decoration: none;
    transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-base);
}
.gtile:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(42, 38, 34, 0.22); background: #C96B22; color: #fff; }
.gtile__title { display: block; font-family: var(--font-display); font-size: var(--type-h3); line-height: 1.1; margin-bottom: var(--space-1); }
.gtile__text { display: block; font-size: var(--type-small); line-height: 1.4; color: rgba(255, 255, 255, 0.92); margin-bottom: var(--space-3); }
.gtile__cta { font-family: var(--font-sans); font-size: var(--type-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; }

/* ---- Learn + signup (two columns) ---- */
.ginstr-learn { background: var(--color-canvas); padding: var(--space-24) 0; }
.ginstr-learn__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-16);
    align-items: start;
}
.ginstr-intro__heading { margin-bottom: var(--space-10); }
.ginstr-learn__intro p { color: var(--color-ink-muted); }
.ginstr-form-card {
    background: var(--color-surface);
    border: 2px solid var(--color-orange-bold);
    border-radius: 4px;
    padding: var(--space-12) var(--space-8);
    box-shadow: none;
}
.ginstr-form-card__title {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(30px, 3.4vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: lowercase;
    margin: 0 0 var(--space-4);
    color: var(--color-orange-bold);
}
.ginstr-styles {
    list-style: none;
    margin: var(--space-8) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.ginstr-styles__item {
    font-family: var(--font-sans);
    font-size: var(--type-caption);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-accent-hover);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: 999px;
    padding: 6px 14px;
}

/* ---- Signup form (inside the two-column learn card) ---- */
.ginstr-signup__copy { font-family: var(--font-body); font-style: italic; font-size: 16px; line-height: 1.5; color: var(--color-ink); max-width: 30ch; margin: 0 0 var(--space-7); }
.ginstr-form { margin: 0; }
.ginstr-form__fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}
.ginstr-form__label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--type-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink-muted);
    margin-bottom: var(--space-2);
}
.ginstr-form__fixed { cursor: default; color: var(--color-ink); }
.picker-field--fixed::after { content: none; }


/* ---- Pricing ---- */
/* Off-white cards on the near-black field. Three across rather than two stacked
   columns, which roughly halves the height of the section. */
.ginstr-pricing {
    background: var(--color-ink);
    padding: var(--space-16) 0;
}
.ginstr-pricing__head { max-width: 720px; margin: 0 auto var(--space-8); text-align: center; }
.ginstr-pricing__head .h2 { color: var(--color-ink-on-dark); }
.ginstr-pricing__sub { color: rgba(255, 255, 255, 0.72); margin: var(--space-3) 0 0; }
.ginstr-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    align-items: stretch;
    max-width: 1040px;
    margin: 0 auto;
}
.gprice-card {
    background: var(--color-canvas);
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
    color: var(--color-ink);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
}
.gprice-card__head { margin-bottom: var(--space-3); }
.gprice-card__title { color: var(--color-ink); font-family: var(--font-display); font-weight: 400; font-size: 19px; }
.gprice-card__note { margin: var(--space-1) 0 0; font-size: var(--type-caption); color: var(--color-ink-muted); }
.gprice-card__rows { list-style: none; margin: 0; padding: 0; }
.gprice-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-rule);
}
.gprice-card__rows .gprice-row:first-child { border-top: 0; }
.gprice-row__unit { color: var(--color-ink); font-size: var(--type-small); }
.gprice-row__rec {
    display: inline-block;
    margin-left: var(--space-2);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #FFFFFF;
    background: var(--color-orange-bold);
    border-radius: 999px;
    padding: 2px 8px;
    vertical-align: middle;
}
.gprice-row__price { font-family: var(--font-display); font-size: 19px; color: var(--color-ink); white-space: nowrap; }
/* The sign-up cell is a card in its own right, matching the price cards in size,
   shape and shadow, but orange so it reads as the action among the information.
   Grid stretch gives it the same height as Trial and Group beside it. */
.ginstr-pricing__cta {
    display: flex;
    background: var(--color-orange-bold);
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
    transition: transform var(--t-fast), background var(--t-base), box-shadow var(--t-base);
}
.ginstr-pricing__cta:hover { transform: translateY(-2px); background: #C96B22; box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42); }
/* The whole card is the click target, so the button drops its own chrome. */
.ginstr-pricing__cta .btn-cream {
    flex: 1;
    padding: var(--space-5);
    background: transparent;
    border: 0;
    border-radius: 14px;
    color: #FFFFFF;
    text-align: center;
}
.ginstr-pricing__cta .btn-cream:hover { background: transparent; color: #FFFFFF; }
@media (max-width: 900px) { .ginstr-pricing__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .ginstr-pricing__grid { grid-template-columns: 1fr; } }

/* ---- Group / learn with others ---- */
.ginstr-group { background: var(--color-surface-soft); padding: var(--space-20) 0; }
.ginstr-group__text { max-width: 640px; margin-bottom: var(--space-10); }
.ginstr-group__text p { color: var(--color-ink-muted); margin: var(--space-3) 0 0; }
.ginstr-group__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}
.ginstr-gcard {
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    padding: var(--space-8);
}
.ginstr-gcard p { color: var(--color-ink-muted); margin: var(--space-3) 0 var(--space-5); }
.ginstr-gcard__link { font-family: var(--font-display); }

/* ---- Meet the teachers ---- */
.ginstr-teachers { background: var(--color-surface); padding: var(--space-24) 0; }
.ginstr-teachers__head { max-width: 640px; margin-bottom: var(--space-10); }
.ginstr-teachers__sub { color: var(--color-ink-muted); margin: var(--space-3) 0 0; }
.ginstr-teachers__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
.tcard {
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-ink);   /* backdrop behind any transparent photo edges */
    transition: transform var(--t-fast), box-shadow var(--t-base);
}
.tcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.tcard__link {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;   /* portrait photo tile */
    color: #fff;
}
.tcard__link:hover { color: #fff; }
.tcard__photo,
.tcard__initials {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.tcard__photo { object-fit: cover; object-position: center top; }
.tcard__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-accent), var(--color-orange-bold));
    color: #fff;
    font-family: var(--font-display);
    font-size: 64px;
    letter-spacing: 0.02em;
}
.tcard__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-5);
    /* dark scrim so the overlaid text stays legible over any photo */
    background: linear-gradient(to top, rgba(42, 38, 34, 0.92) 0%, rgba(42, 38, 34, 0.75) 24%, rgba(42, 38, 34, 0.2) 54%, rgba(42, 38, 34, 0) 78%);
}
/* Long single-word surnames (Neuenschwander) are wider than a card, so let them
   hyphenate rather than overflow. Short names are unaffected. */
.tcard__name { font-family: var(--font-display); font-size: 21px; line-height: 1.15; color: #fff; overflow-wrap: break-word; hyphens: auto; }
.tcard__spec { font-size: var(--type-small); line-height: 1.35; color: rgba(255, 255, 255, 0.88); margin: var(--space-1) 0 var(--space-3); }
.tcard__cta {
    font-family: var(--font-sans);
    font-size: var(--type-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
}
.tcard:hover .tcard__cta { color: var(--color-accent); }
.ginstr-teachers__all { margin: var(--space-10) 0 0; font-family: var(--font-display); }

/* Compact horizontal teacher cards, shown inline in the intro on instruments
   with a small roster (1-3) instead of a full grid section lower down. */
.tinline__label { margin: var(--space-6) 0 var(--space-3); }
.tinline { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.tinline__note { font-size: 15px; color: var(--color-ink-muted); margin: calc(-1 * var(--space-3)) 0 var(--space-6); }
/* The on-request line follows a paragraph, not the card list: the paragraph's own gap above it. */
.tinline__note--alone { margin-top: 0; }
.tinline__card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(42, 38, 34, 0.08);
    text-decoration: none;
    transition: transform var(--t-fast), box-shadow var(--t-base);
}
.tinline__card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(42, 38, 34, 0.14); }
.tinline__photo,
.tinline__initials {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    flex: none;
}
.tinline__photo { object-fit: cover; object-position: center top; }
.tinline__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-accent), var(--color-orange-bold));
    color: #fff;
    font-family: var(--font-display);
    font-size: 22px;
}
.tinline__body { display: flex; flex-direction: column; min-width: 0; }
.tinline__name { font-family: var(--font-display); font-size: 18px; line-height: 1.15; color: var(--color-ink); }
.tinline__spec { font-size: 13px; line-height: 1.4; color: var(--color-ink-muted); margin: 2px 0 4px; }
.tinline__cta { font-family: var(--font-sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-orange-bold); }
/* Teacher cards on instrument pages match the teachers page: same target width
   (~190px, so more per row and smaller) and the 18px name that width needs. */
.ginstr-teachers .ginstr-teachers__grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ginstr-teachers .tcard__name { font-size: 18px; }

/* Teachers landing page (archive-teachers.php) */
.tarch-hero { padding: var(--space-16) 0 var(--space-10); }
/* Text left, parakeet clip right. The video sits on white, so it multiplies
   into the page the same way the homepage masthead clip does. */
.tarch-hero__inner {
    display: grid;
    grid-template-columns: 0.85fr 1.4fr;
    gap: var(--space-12);
    align-items: center;
}
.tarch-hero__body { min-width: 0; }
/* Heading stays first in the markup for reading order; CSS moves the clip left. */
.tarch-hero__media { min-width: 0; order: -1; }
.tarch-hero__media video {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    mix-blend-mode: multiply;
    /* Grading (exposure/contrast) is baked into the clips now, so no CSS filter
       here; the backdrop is pure white in the file, which multiply erases.
       Do NOT add a CSS brightness() below 1 to darken these: the page behind is
       white, so anything under 1 greys the backdrop and the clip shows as a box.
       Regrade the file instead, from the ORIGINAL clip (git history), never from
       the shipped one, or the grades compound. Softening works by raising the black
       point with white pinned at 255, which narrows the range without touching the
       backdrop. The chain, in RGB so pure white is preserved exactly:
         format=rgb24,
         colorlevels=rimax=..   clears the backdrop to 255
                                (piano .996, brass .800/.808/.788)
         colorlevels=romin=.12  lifts the blacks; higher = softer, flatter
         lutrgb=pow(val/255,E)  deepens midtones; higher E = more depth
       All four clips are ping-pong looped (forward then reversed, in the same
       pass as the grade) so the loop point is seamless; a crossfade at the seam
       ghosted the bird for half a second, since it moves too much between the
       last frame and the first. 12s each.
       Per clip (Kathleen's picks): piano + brass soften with lift .12
       (2026-09-17); the dark-wood violin + guitar clips flatten under a lift, so
       they use no lift and E=1.20 instead (2026-09-18). Brass carries E=1.07 on
       top of its lift, a small step darker (2026-09-28); the courses and teachers
       clips use no lift and E=1.20 like the other wood ones.
       ORDER MATTERS: run the depth curve BEFORE the white point when the source
       backdrop is not already 255. The curve pulls a near-white backdrop down
       (253 becomes 251), and that reads as a grey box under multiply. When the
       white point clears the backdrop to exactly 255 first, a curve after it is
       safe, since pow(1) is 1.
       Judge a grade on the ENCODED file, never on a frame straight out of the
       filter chain: the mp4 decodes through a limited-range conversion that
       lifts the midtones, so pre-encode frames read darker than the real thing. Do not clip the
       highlights to force the backdrop white: an earlier pass did, and it took the
       drop shadow and all the key shading with it, which read as over-exposed.
       eq=gamma cannot be used here: it works in limited-range YUV and pulls white
       down to 235, which greys the backdrop. */
    /* Fade every edge, not just the corners: two linear masks (one horizontal, one
       vertical) intersected, so each side gets a band of fade and the corners get
       both. A radial mask left the mid-edges harder than the corners. The sides
       fade over 9%, the top and bottom over 4%: the clips are taller than they
       are wide once the subject is in frame, and a 9% vertical band ate into it
       (Kathleen, 2026-09-28). */
    -webkit-mask-image:
        linear-gradient(to right, rgba(0,0,0,0) 0, #000 9%, #000 91%, rgba(0,0,0,0) 100%),
        linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 4%, #000 96%, rgba(0,0,0,0) 100%);
    mask-image:
        linear-gradient(to right, rgba(0,0,0,0) 0, #000 9%, #000 91%, rgba(0,0,0,0) 100%),
        linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 4%, #000 96%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
@media (max-width: 900px) {
    .tarch-hero__inner { grid-template-columns: 1fr; gap: var(--space-8); }
    /* Stacked: heading first, clip under it, so the page does not open on a video. */
    .tarch-hero__media { max-width: 340px; margin: 0 auto; order: 0; }
}
/* Full-width CTA band between the intro and the teacher grid. Mirrors the
   dark band used on the instrument pages. */
.tarch-cta { padding: var(--space-16) 0; }
.tarch-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    flex-wrap: wrap;
}
.tarch-cta__text { max-width: 560px; }
.tarch-cta__text .h2 { margin: 0; }
.tarch-cta__text p {
    color: var(--color-ink-on-dark);
    opacity: 0.88;
    margin: var(--space-3) 0 0;
    line-height: var(--leading-body);
}
@media (max-width: 700px) {
    .tarch-cta__inner { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
}

/* The matching promise, as three short points instead of a prose paragraph. */
.tarch-points {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}
.tarch-point {
    background: var(--color-surface);
    border-radius: 14px;
    padding: var(--space-5);
    box-shadow: 0 10px 24px rgba(42, 38, 34, 0.08);
}
.tarch-point__title {
    font-family: var(--font-sans);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 11px;
    line-height: 1.3;
    color: var(--color-orange-bold);
    margin: 0 0 var(--space-2);
}
.tarch-point__text {
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-ink);
    margin: 0;
}
@media (max-width: 1100px) {
    .tarch-points { grid-template-columns: 1fr; }
}
.tarch-hero__title { margin: var(--space-2) 0 0; }
.tarch-hero__lead { max-width: 70ch; margin: var(--space-6) 0 0; }
.tarch-hero__lead p { margin: 0 0 var(--space-4); line-height: var(--leading-body); color: var(--color-ink-muted); }
.tarch-hero__cta { margin-top: var(--space-6); }
.tarch-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-12); align-items: center; }
.tarch-hero__text { min-width: 0; }
.tarch-hero__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 900px) { .tarch-hero__grid { grid-template-columns: 1fr; gap: var(--space-8); } }
.tarch-list { background: var(--color-surface); padding: var(--space-16) 0 var(--space-24); }
.tarch-cat { margin-bottom: var(--space-16); }
.tarch-cat:last-child { margin-bottom: 0; }
.tarch-cat__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.6vw, 34px); margin: 0 0 var(--space-6); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-rule); }
/* Teachers landing: alphabetical grid + sticky instrument filter sidebar. */
.tteach { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-10); align-items: start; }
.tteach__filter { position: sticky; top: var(--space-6); }
.tteach__filter-label { font-family: var(--font-sans); font-size: 12px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-muted); margin: 0 0 var(--space-4); }
.tteach__filter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tteach__btn { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; background: transparent; font-family: var(--font-display); font-size: 15px; color: var(--color-ink); border-radius: var(--radius-card); cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.tteach__btn:hover { background: var(--color-canvas); color: var(--color-orange-bold); }
.tteach__btn.is-active { background: var(--color-orange-bold); color: #fff; }
/* The entries are links to each category's page (11 Nov 2026), drawn as the
   buttons they were. */
a.tteach__btn { box-sizing: border-box; text-decoration: none; }
/* Four cards a row, not five: at a 150px minimum these came out ~175px wide with
   only ~135px of text, which overflowed on long surnames (Neuenschwander) and
   fragmented the specialty lists. A 190px minimum gives ~225px cards and ~185px
   of text, which fits both comfortably. */
.tteach__grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.tteach__grid .tcard__name { font-size: 18px; }
.tteach__empty { color: var(--color-ink-muted); margin: var(--space-8) 0 0; }

/* ---------- Teachers page only (.arch-dark) ----------
   The grid section carries the same dark field as the CTA band above it, so
   the two read as one block. Scoped to .arch-dark because .tarch-list and
   .tcard are shared with the Instruments archive and the instrument pages. */
.arch-dark .tarch-list { background: var(--color-ink); }
.arch-dark .tteach__filter-label { color: rgba(255, 255, 255, 0.6); }
.arch-dark .tteach__btn { color: rgba(255, 255, 255, 0.82); }
.arch-dark .tteach__btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.arch-dark .tteach__btn.is-active { background: var(--color-orange-bold); color: #fff; }
.arch-dark .tteach__empty { color: rgba(255, 255, 255, 0.7); }

/* Photographs lead; hovering fades the portrait out to the orange card beneath
   and brings the name and specialties up in its place. */
:is(.arch-dark, .ginstr-teachers) .tcard { background: var(--color-orange-bold); }
:is(.arch-dark, .ginstr-teachers) .tcard__photo,
:is(.arch-dark, .ginstr-teachers) .tcard__initials {
    opacity: 1;
    transition: opacity var(--t-base);
}
:is(.arch-dark, .ginstr-teachers) .tcard:hover .tcard__photo,
:is(.arch-dark, .ginstr-teachers) .tcard:focus-within .tcard__photo,
:is(.arch-dark, .ginstr-teachers) .tcard:hover .tcard__initials,
:is(.arch-dark, .ginstr-teachers) .tcard:focus-within .tcard__initials { opacity: 0; }
/* No scrim needed: the text only ever sits on flat orange, never over a photo. */
:is(.arch-dark, .ginstr-teachers) .tcard__body {
    background: none;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity var(--t-base);
}
:is(.arch-dark, .ginstr-teachers) .tcard:hover .tcard__body,
:is(.arch-dark, .ginstr-teachers) .tcard:focus-within .tcard__body { opacity: 1; }
/* Focus reveals the same panel as hover; the ring marks which card is active. */
:is(.arch-dark, .ginstr-teachers) .tcard:focus-within {
    outline: 3px solid var(--color-orange-bold);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    :is(.arch-dark, .ginstr-teachers) .tcard__photo,
    :is(.arch-dark, .ginstr-teachers) .tcard__initials,
    :is(.arch-dark, .ginstr-teachers) .tcard__body { transition: none; }
}
/* Without hover the name would never appear, so show photo and text together
   with a scrim to keep the text legible over the portrait. */
@media (hover: none) {
    :is(.arch-dark, .ginstr-teachers) .tcard__photo,
    :is(.arch-dark, .ginstr-teachers) .tcard__initials { opacity: 1; }
    :is(.arch-dark, .ginstr-teachers) .tcard__body {
        opacity: 1;
        background: linear-gradient(to top, rgba(42, 38, 34, 0.92) 0%, rgba(42, 38, 34, 0.75) 24%, rgba(42, 38, 34, 0.2) 54%, rgba(42, 38, 34, 0) 78%);
    }
}
@media (max-width: 860px) {
	.tteach { grid-template-columns: 1fr; gap: var(--space-6); }
	.tteach__filter { position: static; }
	.tteach__filter-list { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
	.tteach__btn { width: auto; }
}
/* Instruments landing: square tiles cropping the clear right-hand slice of the wide
   hero banners (their left side carries the hero text fade). */
.instr-arch .tcard__link { aspect-ratio: 1 / 1; }
.instr-arch .tcard__photo { object-position: right center; }
/* A card with no photo has nothing to reveal, so it would sit as a blank orange
   tile. Keep its name showing at rest. */
:is(.arch-dark, .ginstr-teachers) .tcard--noimg .tcard__body { opacity: 1; }
/* The band and the grid below it are both dark, so they read as one block. Their
   stacked padding left a large empty gap between them. */
.arch-dark .tarch-cta { padding: var(--space-16) 0 var(--space-10); }
.arch-dark .tarch-list { padding-top: var(--space-6); }

/* Cross-links closing the instruments page (they used to sit in the hero). */
.instr-explore { background: var(--color-surface); padding: var(--space-16) 0 var(--space-20); }
.instr-explore__title { margin: 0 0 var(--space-8); }
.instr-explore__cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}
@media (max-width: 900px) { .instr-explore__cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .instr-explore__cards { grid-template-columns: 1fr; } }
/* Every card as tall as the longest, so the calls to action line up. */
.instr-explore__cards li { display: flex; }
.instr-explore__cards .gtile {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Soft drop shadow, matching the front-page category tiles, not the hard
       offset the sidebar tiles use. */
    box-shadow: 0 10px 22px rgba(42, 38, 34, 0.16);
    transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.instr-explore__cards .gtile:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(42, 38, 34, 0.22);
}
.instr-explore__cards .gtile__title {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2);
}
.instr-explore__cards .gtile__text { margin-bottom: var(--space-4); }
.instr-explore__cards .gtile__cta {
    margin-top: auto;                 /* pins the CTA to the bottom of every card */
    font-family: var(--font-display);
    font-size: var(--type-small);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.instr-arch .tcard__initials--label { font-size: clamp(20px, 3vw, 28px); text-align: center; padding: var(--space-4); line-height: 1.15; }

/* ---- Online (dark block) ---- */
/* Guitar heritage — classical / Spanish / flamenco editorial + blog link */
.ginstr-heritage { position: relative; overflow: hidden; background: var(--color-surface); padding: var(--space-24) 0; }
.ginstr-heritage__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}
.ginstr-heritage__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    /* fade the photo into the solid surface on the left, where the text sits */
    background: linear-gradient(to right, var(--color-surface) 0%, var(--color-surface) 42%, rgba(255, 255, 255, 0.45) 66%, rgba(255, 255, 255, 0) 88%);
}
.ginstr-heritage > .container { position: relative; z-index: 1; }
.ginstr-heritage__inner { max-width: 760px; }
.ginstr-heritage__heading { margin: var(--space-3) 0 var(--space-12); }
.ginstr-heritage__inner > p:not(.eyebrow) {
    font-size: var(--type-body);
    line-height: var(--leading-body);
    color: var(--color-ink-muted);
    margin: 0 0 var(--space-5);
}
.ginstr-heritage__inner > p.ginstr-heritage__note { margin-bottom: var(--space-3); }
.ginstr-heritage__links {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    display: grid;
    gap: var(--space-2);
}
.ginstr-heritage__links a {
    font-family: var(--font-display);
    font-size: var(--type-body);
    color: var(--color-accent);
    text-decoration: none;
}
.ginstr-heritage__links a:hover { color: var(--color-accent-hover); text-decoration: underline; }

.ginstr-online { padding: var(--space-20) 0; }
.ginstr-online__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    flex-wrap: wrap;
}
.ginstr-online__text { max-width: 640px; }
.ginstr-online__text .h2 { color: var(--color-ink-on-dark); }
.ginstr-online__text p { color: var(--color-ink-on-dark); opacity: 0.88; margin: var(--space-4) 0 0; }

/* ---- FAQ ---- */
/* Two columns: the heading and a way to ask on the left, the questions as cards
   on the right. The old version was a full-width list of hairlines. */
.ginstr-faq { background: var(--color-canvas); padding: var(--space-20) 0; }
.ginstr-faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    column-gap: var(--space-12);
    align-items: start;
}
/* The heading and questions share one left column that flows on its own, so the
   only gap between the intro and the first question is the heading's margin. The
   aside is a separate column and can no longer push them apart. */
.ginstr-faq__left { grid-column: 1; min-width: 0; }
.ginstr-faq__aside {
    grid-column: 2;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.ginstr-faq__head { margin-bottom: var(--space-6); }
.ginstr-faq__heading { margin: var(--space-2) 0 var(--space-4); }
.ginstr-faq__sub { color: var(--color-ink-muted); margin: 0 0 var(--space-5); max-width: 56ch; }
.ginstr-faq__list { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item {
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(42, 38, 34, 0.08);
    transition: box-shadow var(--t-base);
}
.faq-item[open] { box-shadow: 0 14px 28px rgba(42, 38, 34, 0.13); }
/* Owner 11 Nov 2026 (Phase 6): the open card is light teal so it stands out,
   on every FAQ of the site; the panel's student-list teal (brand-100). */
.faq-item[open] { background: #D0E6E8; }
.faq-item[open] .faq-item__a p { color: var(--color-ink); }
.faq-item__q {
    list-style: none;
    cursor: pointer;
    padding: var(--space-5) var(--space-12) var(--space-5) var(--space-5);
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.35;
    color: var(--color-ink);
    position: relative;
}
.faq-item__q::-webkit-details-marker { display: none; }
/* The marker is a filled orange disc, so it reads as a control rather than a
   stray character sitting in the margin. */
.faq-item__q::after {
    content: '+';
    position: absolute;
    right: var(--space-5);
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-orange-bold);
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
}
.faq-item[open] .faq-item__q::after { content: '\2212'; }
.faq-item__a { padding: 0 var(--space-5) var(--space-5); }
.faq-item__a p { margin: 0; color: var(--color-ink-muted); line-height: var(--leading-body); }
/* Reviews sit under the orange cards, two across, kept small so they read as
   supporting evidence beside the questions rather than a section of their own. */
.faq-reviews__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    margin: var(--space-8) 0 var(--space-4);
}
.faq-reviews {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.mini-review {
    margin: 0;
    /* Portrait cards. Aspect-ratio sets the shape; a long quote can still push
       the card taller rather than spilling out of it. */
    aspect-ratio: 3 / 4;
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 10px 22px rgba(42, 38, 34, 0.08);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
}
.mini-review__stars { color: var(--color-orange-bold); font-size: 13px; letter-spacing: 0.1em; }
.mini-review__quote {
    margin: var(--space-3) 0 var(--space-4);
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-ink);
}
.mini-review__source {
    margin-top: auto;
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--color-ink-muted);
}
@media (max-width: 900px) {
    .ginstr-faq__inner { grid-template-columns: 1fr; gap: var(--space-8); }
    .ginstr-faq__head { position: static; }
    .ginstr-faq__aside { grid-column: 1; grid-row: auto; }
}

/* ---- Related ---- */
.ginstr-related { background: var(--color-canvas); padding: var(--space-20) 0; border-top: 1px solid var(--color-rule); }
.ginstr-related__heading { margin-bottom: var(--space-10); }
.ginstr-related__grid {
    list-style: none;
    margin: var(--space-8) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}
.rtile {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-6);
    background: var(--color-orange-bold);
    border-radius: var(--radius-card);
    box-shadow: 0 10px 22px rgba(42, 38, 34, 0.16);   /* soft drop shadow, matching the front-page tiles */
    color: #fff;
    text-decoration: none;
    transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-base);
}
.rtile:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(42, 38, 34, 0.22);
    background: #C96B22;
    color: #fff;
}
.rtile__eyebrow {
    font-family: var(--font-sans);
    font-size: var(--type-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space-2);
}
.rtile__name {
    font-family: var(--font-display);
    font-size: var(--type-h3);
    line-height: 1.15;
    flex: 1;
}
.rtile__arrow { margin-top: var(--space-4); font-size: 20px; color: #fff; }

/* ---- Instrument page responsive ---- */
@media (max-width: 1024px) {
    .ginstr-hero__grid { grid-template-columns: 1fr; }
    .ginstr-hero__media { order: -1; max-width: 460px; }
    .ginstr-learn__grid { grid-template-columns: 1fr; gap: var(--space-10); }
    .ginstr-pricing__grid { grid-template-columns: repeat(2, 1fr); }
    .ginstr-teachers__grid { grid-template-columns: repeat(3, 1fr); }
    .ginstr-reviews__grid { grid-template-columns: repeat(3, 1fr); }
    .ginstr-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .ginstr-hero { padding: var(--space-16) 0; }
    .ginstr-learn, .ginstr-pricing, .ginstr-teachers, .ginstr-reviews, .ginstr-faq { padding: var(--space-16) 0; }
    .ginstr-group, .ginstr-online, .ginstr-related { padding: var(--space-16) 0; }
    .ginstr-group__cards { grid-template-columns: 1fr; }
    .ginstr-pricing__grid { grid-template-columns: 1fr; }
    .ginstr-teachers__grid { grid-template-columns: repeat(2, 1fr); }
    .ginstr-reviews__grid { grid-template-columns: 1fr; }
    .ginstr-online__inner { flex-direction: column; align-items: flex-start; }
    /* On a phone the text spans the full width, so a side fade left the right
       third of it on the photo (grey on a dark photo on singing). The photo
       becomes a band across the top that fades into the section, and the text
       sits on plain white under it (mobile audit, 11 Nov 2026). */
    .ginstr-heritage { padding-top: calc(220px + var(--space-2)); }
    .ginstr-heritage__heading { margin-bottom: var(--space-6); }
    .ginstr-heritage__bg { inset: 0 0 auto 0; height: 220px; background-position: center; }
    .ginstr-heritage__bg::after {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, var(--color-surface) 100%);
    }
}
/* No one-column teacher grid on phones any more: two compact cards a row
   (the phone rules near the end of this file). The related instruments too:
   two short tiles a row rather than four full-width blocks of orange. */
@media (max-width: 460px) {
    .ginstr-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .rtile { padding: var(--space-4); }
    .rtile__name { font-size: 18px; }
    .rtile__arrow { margin-top: var(--space-2); }
}

/* ---- Reviews (guitar-specific) ---- */
.ginstr-reviews { background: var(--color-canvas); padding: var(--space-24) 0; }
.ginstr-reviews__head { max-width: 640px; margin-bottom: var(--space-10); }
.ginstr-reviews__sub { color: var(--color-ink-muted); margin: var(--space-3) 0 0; }
.ginstr-reviews__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    align-items: start;
}

/* =========================================================
   Instrument page font mix (Kathleen 2026-06-08): all text uses the serif
   (Libre Baskerville) for headings AND body, matching the rest of the site.
   Sans (Inter) stays only on the small accent labels handled by their own
   component rules (eyebrows, style chips, form labels, Recommended tags,
   teacher CTAs). No page-wide font override needed.
   ========================================================= */


/* =========================================================
   Teacher profile (single-teachers.php)
   ========================================================= */
.tprofile { background: var(--color-canvas); }

/* Header */
.tprofile-head { padding: var(--space-16) 0 var(--space-8); }
.tprofile-head__eyebrow a { color: var(--color-ink-muted); }
.tprofile-head__eyebrow a:hover { color: var(--color-orange-bold); }
.tprofile-head__grid { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
.tprofile-head__photo,
.tprofile-head__initials { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; }
.tprofile-head__initials { display: grid; place-items: center; background: var(--color-orange-bold); color: var(--color-ink-on-dark); font-family: var(--font-display); font-size: 40px; }
.tprofile-head__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 48px); line-height: 1.08; margin: 0 0 var(--space-2); }
.tprofile-head__fname { font-style: italic; }
.tprofile-head__role { color: var(--color-ink-muted); margin: 0 0 var(--space-3); }
.tprofile-head__tags { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

/* Reworked white hero (sample on one teacher): title + tags + intro on the left,
   the bird video on the right, on a white band so the multiply-blended clip melts
   in cleanly. The video reuses the .tprofile__aside-video-el blend. */
/* No section padding so the photo can reach the top and bottom edges; the text
   column carries its own vertical padding instead. */
.tprofile-hero2 { background: var(--color-surface); padding: 0; }
.tprofile-hero2__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items: stretch; width: calc(50vw + 50%); margin-left: calc(50% - 50vw); }
.tprofile-hero2__grid--solo { grid-template-columns: 1fr; }
.tprofile-hero2__grid--solo .tprofile-hero2__text { max-width: 70ch; }
.tprofile-hero2__text { min-width: 0; padding: var(--space-16) 0; }
.tprofile-hero2__intro { margin: var(--space-5) 0 0; }
.tprofile-hero2__intro p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--color-ink); max-width: 48ch; margin: 0; }
/* Artist layer: "find them online" links under the intro. */
.tprofile-hero2__links { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.tprofile-link { display: inline-flex; align-items: center; font-size: 14px; color: var(--color-ink); text-decoration: none; border-bottom: 1px solid var(--color-orange-bold); padding-bottom: 1px; }
.tprofile-link:hover { color: var(--color-orange-bold); }
/* Featured photo fills the full height of the hero (top to bottom edge) and fades
   only to the right, into the white where the text sits. */
.tprofile-hero2__media { min-width: 0; order: -1; position: relative; }
/* Highlight tags that link to an instrument page. */
.tspec-card { display: inline-flex; align-items: center; }
a.tspec-card { text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
a.tspec-card:hover { background: var(--color-orange-bold); color: var(--color-ink-on-dark); border-color: var(--color-orange-bold); }
/* Sign-up CTA + "find them online" buttons in the hero. */
.tprofile-hero2__cta { margin: var(--space-6) 0 0; }
.tprofile-hero2__cta .btn-orange { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.06em; }
.tprofile__online { margin: 0 0 var(--space-12); display: flex; flex-wrap: wrap; gap: 10px; }
/* "Listen and watch": media embeds (video, Spotify) pulled out of the bio. */
.tprofile__media { margin: 0 0 var(--space-12); }
.tprofile__media-h { margin: 0 0 var(--space-5); }
.tprofile__media-grid { display: grid; gap: var(--space-6); }
.tprofile__media-item--video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; }
.tprofile__media-item--video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tprofile__media-item--audio iframe { display: block; width: 100%; height: 352px; border: 0; border-radius: var(--radius-card); }
.btn-ghost { display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--color-rule); background: transparent; color: var(--color-ink); font-family: var(--font-display); font-size: 15px; line-height: 1; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; }
.btn-ghost:hover { border-color: var(--color-orange-bold); color: var(--color-orange-bold); }
/* Hero image slideshow: stacked images crossfading. */
.tprofile-hero2__slides .tprofile-hero2__img { opacity: 0; transition: opacity 1s ease-in-out; }
.tprofile-hero2__slides .tprofile-hero2__img.is-active { opacity: 1; }
.tprofile-hero2__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask-image: linear-gradient(to right, #000 45%, transparent 100%);
	mask-image: linear-gradient(to right, #000 45%, transparent 100%);
}
/* v2 sample also flips the page grid so the sticky sign-up sits on the left, and
   gives the body real breathing room below the white hero. */
.tprofile--v2 .tprofile__grid { grid-template-columns: 360px minmax(0, 1fr); padding-top: var(--space-12); }
.tprofile--v2 .tprofile__aside { order: -1; }
@media (max-width: 900px) {
	.tprofile-hero2__grid { grid-template-columns: 1fr; gap: var(--space-6); width: auto; margin-left: 0; }
	.tprofile-hero2__text { padding: var(--space-10) 0 var(--space-2); }
	.tprofile-hero2__media { order: 0; }                  /* image below the text when stacked */
	.tprofile-hero2__img { position: static; height: auto; -webkit-mask-image: none; mask-image: none; border-radius: var(--radius-card); }
	.tprofile-hero2__slides { aspect-ratio: 4 / 3; }
	.tprofile-hero2__slides .tprofile-hero2__img { position: absolute; height: 100%; -webkit-mask-image: none; mask-image: none; border-radius: var(--radius-card); }
	.tprofile--v2 .tprofile__grid { grid-template-columns: 1fr; padding-top: var(--space-8); }
	.tprofile--v2 .tprofile__aside { order: 0; }
}
.tprofile-head__chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.tprofile-chip { font-family: var(--font-sans); font-size: 12px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: 999px; padding: 4px 12px; }

/* Two-column body with sticky form */
.tprofile__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-12); align-items: start; padding-bottom: var(--space-20); }
.tprofile__intro p { font-size: var(--type-lead); line-height: var(--leading-body); color: var(--color-ink); margin: 0 0 var(--space-8); }
.tprofile__intro { margin: 0 0 var(--space-8); }
.tprofile__intro p { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; color: var(--color-ink); margin: 0 0 var(--space-4); }
.tprofile__intro p:last-child { margin-bottom: 0; }
.tprofile__bio { margin-bottom: var(--space-12); }
.tprofile__bio-heading { margin: 0 0 var(--space-5); }
.tprofile__bio p, .tprofile__bio ul, .tprofile__bio ol { margin: 0 0 var(--space-4); line-height: var(--leading-body); }
.tprofile__bio img { max-width: 100%; height: auto; border-radius: var(--radius-card); margin: var(--space-4) 0; }

.tprofile__teaches { margin-bottom: var(--space-12); }
.tprofile__teaches .h2 { margin: 0 0 var(--space-6); }
.tprofile__cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.tcard-instr { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-card); text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
.tcard-instr:hover { border-color: var(--color-orange-bold); transform: translateY(-2px); }
.tcard-instr__eyebrow { font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink-muted); }
.tcard-instr__name { font-family: var(--font-display); font-size: 20px; color: var(--color-ink); }
.tcard-instr__spec { font-size: 14px; color: var(--color-ink-muted); }
.tcard-instr__cta { margin-top: auto; font-family: var(--font-display); font-size: 14px; color: var(--color-orange-bold); }

.tprofile__cta-band { border-radius: var(--radius-card); padding: var(--space-8); }
.tprofile__cta-band .h2 { margin: 0 0 var(--space-3); }
.tprofile__cta-band p { color: var(--color-ink-muted); margin: 0 0 var(--space-5); max-width: 48ch; }

/* Feature video (curated profiles) */
.tprofile__video { margin: 0 0 var(--space-8); max-width: 720px; }
.tprofile__video--end { margin: var(--space-6) 0 0; }

/* Specialties: little tags with orange letters */
.tprofile__specialties {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.tspec-card {
    background: var(--color-surface);
    color: var(--color-orange-bold);
    border: 1px solid rgba(221, 122, 46, 0.4);
    border-radius: 999px;
    padding: 5px 14px;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Orange instrument card links (with a bit more info) */
.tprofile__instr-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
}
.tcard-orange {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: var(--space-5);
    background: var(--color-orange-bold);
    color: var(--color-ink-on-dark);
    border-radius: var(--radius-card);
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease;
}
.tcard-orange:hover { transform: translateY(-2px); background: #c46a22; color: var(--color-ink-on-dark); }
.tcard-orange__eyebrow { font-family: var(--font-sans); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: 0.85; }
.tcard-orange__name { font-family: var(--font-display); font-size: 20px; }
.tcard-orange__info { font-size: 14px; opacity: 0.92; }
.tcard-orange__cta { margin-top: auto; font-family: var(--font-display); font-size: 14px; }

/* Sidebar price summary + trust line */
.tprofile-prices { margin: 0 0 var(--space-3); padding: var(--space-4); background: var(--color-canvas); border-radius: var(--radius-card); }
.tprofile-prices__row { margin: 0 0 6px; font-size: 13px; line-height: 1.55; color: var(--color-ink); }
.tprofile-prices__link { font-family: var(--font-display); font-size: 13px; color: var(--color-orange-bold); text-decoration: none; }
.tprofile-prices__link:hover { text-decoration: underline; }
.tprofile-trust { margin: 0 0 var(--space-5); font-size: 12px; line-height: 1.55; color: var(--color-ink-muted); }
.tprofile-prices__row span, .tprofile-trust span { color: var(--color-orange-bold); }

/* Reviews on the teacher page (reuses .review-card) */
.tprofile__reviews { margin-bottom: var(--space-12); }
.tprofile__reviews .h2 { margin: 0 0 var(--space-6); }
.tprofile__reviews-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }

/* Recommended way to study with this teacher (curated callout) */
.tprofile-rec { margin: 0 0 var(--space-12); padding: var(--space-6); background: var(--color-surface); border-left: 4px solid var(--color-orange-bold); border-radius: var(--radius-card); }
.tprofile-rec__heading { font-family: var(--font-display); font-size: 18px; margin: 0 0 var(--space-2); color: var(--color-ink); }
.tprofile-rec__text { margin: 0 0 var(--space-3); color: var(--color-ink-muted); line-height: var(--leading-body); max-width: 60ch; }
.tprofile-rec__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; }
.tprofile-rec__link { font-family: var(--font-display); font-size: 15px; color: var(--color-orange-bold); text-decoration: none; }
.tprofile-rec__link:hover { text-decoration: underline; }

/* Extra images pulled from the teacher's profile, as a standardised slider */
.tprofile__gallery { margin: 0 0 var(--space-12); }
.tprofile__gallery-slider {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-3);
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-rule) transparent;
}
.tprofile__gallery-slider::-webkit-scrollbar { height: 8px; }
.tprofile__gallery-slider::-webkit-scrollbar-thumb { background: var(--color-rule); border-radius: 999px; }
.tprofile__gallery-slide { flex: 0 0 auto; width: clamp(220px, 32%, 300px); scroll-snap-align: start; }
.tprofile__gallery-img { width: 100%; height: 280px; object-fit: cover; border-radius: var(--radius-card); display: block; }
@media (max-width: 600px) {
    .tprofile__gallery-slide { width: 78%; }
    .tprofile__gallery-img { height: 240px; }
}

/* Sticky sign-up sidebar */
.tprofile__aside { position: sticky; top: var(--space-6); }
/* Sits directly on the page canvas (no card) and melts into the beige: multiply
   blends the light video background, brightness lifts its grey toward white so it
   melts further, and a feathered mask fades all four edges so there is no hard
   square boundary. Same spirit as the homepage masthead video. */
.tprofile__aside-video { margin-bottom: var(--space-4); line-height: 0; }
.tprofile__aside-video-el {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
	filter: brightness(1.18) contrast(1.02) saturate(0.9);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
	mask-composite: intersect;
}
.tprofile-form-card { background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-12) var(--space-8); box-shadow: 0 10px 24px rgba(42, 38, 34, 0.08); }
.tprofile-form-card__title { font-family: var(--font-sans); font-weight: 700; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.02em; text-transform: lowercase; color: var(--color-orange-bold); margin: 0 0 var(--space-4); }
.tprofile-form-card__copy { font-family: var(--font-body); font-style: italic; font-size: 16px; line-height: 1.5; color: var(--color-ink); max-width: 30ch; margin: 0 0 var(--space-7); }
.tprofile-form .picker-field { margin-bottom: var(--space-4); }
.tprofile-form__cta, .ginstr-form__cta { display: inline-block; margin-top: var(--space-6); padding: 14px 30px; background: var(--color-cream-btn); color: var(--color-ink); font-family: var(--font-display); font-size: 14px; line-height: 1; text-transform: uppercase; letter-spacing: 0.14em; border: 1px solid var(--color-rule); border-radius: var(--radius-card); cursor: pointer; transition: background 0.15s ease; }
.tprofile-form__cta:hover, .ginstr-form__cta:hover { background: var(--color-cream-btn-hover); }
/* Underline-style fields (labels visually hidden, value/placeholder reads as the field). */
.tprofile-form .ginstr-form__label, .ginstr-form .ginstr-form__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.tprofile-form .picker-field__select, .ginstr-form .picker-field__select { border: 0; border-bottom: 1px solid var(--color-rule); border-radius: 0; background: transparent; padding: var(--space-4) 24px var(--space-4) 0; font-family: var(--font-body); font-size: 17px; color: var(--color-ink); }
.tprofile-form .picker-field__select:focus, .ginstr-form .picker-field__select:focus { border-bottom-color: var(--color-orange-bold); outline: none; }
.tprofile-form .picker-field { margin-bottom: 0; }
.tprofile-form__note { font-size: 12px; line-height: 1.5; color: var(--color-ink-muted); margin: var(--space-3) 0 0; }
/* Orange promo cards under the sign-up form (Group classes, Combos, Gift). */
.tprofile-promos { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.promo-card { position: relative; display: flex; align-items: flex-end; aspect-ratio: 3 / 4; padding: var(--space-4); background: var(--color-orange-bold); border-radius: var(--radius-card); color: #fff; text-decoration: none; box-shadow: 0 10px 22px rgba(42, 38, 34, 0.16); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.promo-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(42, 38, 34, 0.22); color: #fff; }
.promo-card__label { font-family: var(--font-sans); font-weight: 800; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.1; text-transform: uppercase; color: #fff; }

/* Orange primary button (for light backgrounds) */
.btn-orange { display: inline-block; padding: 13px 26px; background: var(--color-orange-bold); color: var(--color-ink-on-dark); font-family: var(--font-display); font-size: 15px; line-height: 1; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; transition: background 0.15s ease; }
.btn-orange:hover { background: #c46a22; color: var(--color-ink-on-dark); }

/* The drums element in the bottom right of the courses FAQ, the same treatment
   as the dark block on the front page: clipped to the section, behind nothing
   it needs to stay clear of, and out of the way on phones. */
#courses-faq { position: relative; overflow: hidden; }
#courses-faq .container { position: relative; z-index: 1; }
.courses-faq__drums {
    position: absolute;
    right: clamp(8px, 4vw, 72px);
    bottom: 0;
    width: clamp(150px, 18vw, 260px);
    height: auto;
    z-index: 2;
    pointer-events: none;
    user-select: none;
}
@media (max-width: 900px) {
    .courses-faq__drums { display: none; }
}

/* ============================================================
   Course link lists (page-courses.php); the six-card grid (template-parts/hub.php)
   ============================================================ */
.courses-all { background: var(--color-canvas); padding: var(--space-20) 0; }
.courses-all__head { max-width: 640px; margin-bottom: var(--space-10); }
.courses-all__head .eyebrow { color: var(--color-orange-bold); margin-bottom: var(--space-2); }
.courses-all__sub { color: var(--color-ink-muted); margin: var(--space-3) 0 0; }
.cf-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-10); }
.cf-links--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cf-links__title {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--color-orange-bold);
    margin: 0 0 var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-rule);
}
.cf-links__title a { color: inherit; text-decoration: none; }
.cf-links__title a:hover { text-decoration: underline; }
.cf-links__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.cf-links__list a {
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.3;
    color: var(--color-ink);
    text-decoration: none;
}
.cf-links__list a:hover { color: var(--color-orange-bold); }
/* The studies grid holds six cards, so three across rather than the four the
   front page uses. */
.explore__grid--studies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .cf-links, .cf-links--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .explore__grid--studies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .cf-links, .cf-links--three { grid-template-columns: 1fr; }
    .explore__grid--studies { grid-template-columns: 1fr; }
}

/* ============================================================
   Photo band (front-page.php) — a strip of photos that slides on its own
   ============================================================ */
/* The track holds the photo list twice and travels exactly half its width, so
   the second copy lands where the first began and the loop has no seam. Speed
   is set in seconds per photo, so adding photos keeps the same pace. */
.photoband {
    --photoband-count: 8;
    --photoband-seconds-per-photo: 5s;
    overflow: hidden;
    padding: var(--space-10) 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-rule);
    border-bottom: 1px solid var(--color-rule);
}
.photoband__track {
    display: flex;
    gap: var(--space-4);
    width: max-content;
    animation: photoband-slide calc(var(--photoband-count) * var(--photoband-seconds-per-photo)) linear infinite;
}
.photoband:hover .photoband__track,
.photoband:focus-within .photoband__track { animation-play-state: paused; }
.photoband__item { flex: 0 0 auto; margin: 0; }
.photoband__item img {
    display: block;
    width: 300px;
    height: 200px;
    object-fit: cover;
    border-radius: var(--radius-card);
}
@keyframes photoband-slide {
    from { transform: translateX(0); }
    /* half the track is one full list, plus the gap that follows it */
    to   { transform: translateX(calc(-50% - var(--space-4) / 2)); }
}
@media (max-width: 700px) {
    .photoband__item img { width: 220px; height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
    .photoband__track { animation: none; }
    .photoband { overflow-x: auto; }
}

/* ============================================================
   Courses & Prices page (page-courses.php)
   ============================================================ */
.courses { background: var(--color-canvas); }
/* The Courses and About landings open with the same hero as the teachers and
   instruments pages. Those sit on white, and the parakeet clips multiply into
   white, so the hero is lifted to white here too; the rest of each page stays
   on the canvas. */
.courses .tarch-hero,
.about .tarch-hero { background: var(--color-surface); }

/* Ready to start + prices: the band's heading sits over the price cards in one
   dark block, both held to the grid's width so their edges line up. */
.courses-start__inner { max-width: 1040px; }
.courses-start__head { margin-bottom: var(--space-8); }
.courses-start .ginstr-pricing__grid { margin: 0; }
/* The text keeps a readable measure; the buttons drop under it when the row is
   too tight for both (the course pages' longer sign-up copy). */
.courses-start__head { flex-wrap: wrap; row-gap: var(--space-6); }
.courses-start__head .tarch-cta__text { flex: 1 1 480px; min-width: 0; max-width: 640px; }
.courses-start__actions { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; flex-wrap: wrap; }

/* Who we are (About): the history as an article, photos of the school beside it. */
.about-history__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-16); align-items: start; }
.about-history__article { max-width: 640px; }
.about-history__article p { margin: 0 0 var(--space-5); line-height: var(--leading-body); }
/* A classic salon hang: white mats with a thin rule, two staggered columns. */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); padding-top: var(--space-10); }
.gallery__col { display: flex; flex-direction: column; gap: var(--space-5); }
.gallery__col:last-child { padding-top: var(--space-10); }
.gallery__frame { margin: 0; padding: 10px; background: var(--color-surface); border: 1px solid var(--color-rule); box-shadow: 0 10px 24px rgba(42, 38, 34, 0.08); }
.gallery__frame--portrait .gallery__img, .gallery__frame--portrait .gallery__empty { aspect-ratio: 4 / 5; }
.gallery__frame--square .gallery__img, .gallery__frame--square .gallery__empty { aspect-ratio: 1 / 1; }
.gallery__img { display: block; width: 100%; height: auto; object-fit: cover; }
.gallery__empty { width: 100%; background: var(--color-surface-soft); box-shadow: inset 0 0 0 1px rgba(42, 38, 34, 0.08); }
@media (max-width: 900px) {
    .about-history__grid { grid-template-columns: 1fr; gap: var(--space-10); }
    .gallery { padding-top: 0; max-width: 520px; }
}
/* Without a photo the band is a plain beige block; keep the cards' shadow off. */
.pband--plain .pband__card { box-shadow: none; }
/* On a dark photo the band keeps the same fade from the canvas at the top, so it
   merges with the section above; the photo then runs at strength under the
   cards, which get a deeper shadow to lift off it. */
.pband--dark .pband__img { object-position: center; }
.pband--dark { padding-top: var(--space-24); }
.pband--dark .pband__bg::after { background: linear-gradient(to bottom, var(--color-canvas) 0%, rgba(249, 243, 234, 0.9) 12%, rgba(249, 243, 234, 0.55) 30%, rgba(249, 243, 234, 0.15) 52%, rgba(249, 243, 234, 0) 72%); }
.pband--dark .pband__card { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); border-color: transparent; }

/* The promise (About): the hero's point cards on the dark field, three across. */
.about-steps { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
@media (max-width: 900px) { .about-steps { grid-template-columns: 1fr; } }

/* Ways to learn: six of the hero's point cards, three across, then who we teach. */
.courses-ways { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.courses-ways .tarch-point { display: flex; flex-direction: column; }
.tarch-point__link { margin-top: auto; padding-top: var(--space-3); font-size: 14px; }
.has-pband { padding-bottom: 0; }   /* a section that ends in a photo band */
.pband__title { margin: 0 0 var(--space-6); }
/* Photo band: full-bleed photo at the foot of a section, cards on top (Courses: every age; About: where we are).
   The photo fades up into the canvas so the heading reads; the cards lift off
   it with the theme's soft shadow. */
.pband { position: relative; overflow: hidden; margin-top: var(--space-16); padding: var(--space-20) 0 var(--space-24); }
.pband__bg { position: absolute; inset: 0; z-index: 0; }
.pband__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.pband__bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, var(--color-canvas) 0%, rgba(249, 243, 234, 0.55) 16%, rgba(249, 243, 234, 0.08) 45%, rgba(249, 243, 234, 0.08) 100%);
}
/* Cards held to the price grid's width, so the photo shows either side of them. */
.pband > .container { position: relative; z-index: 1; max-width: 1040px; }
.pband__eyebrow { color: var(--color-orange-bold); margin-bottom: var(--space-2); }
@media (max-width: 900px) { .courses-ways { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .courses-ways { grid-template-columns: 1fr; } }
.pband__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.pband__card { padding: var(--space-8); background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-card); box-shadow: 0 10px 24px rgba(42, 38, 34, 0.08); }
.pband__card h3 { margin: var(--space-1) 0 var(--space-3); }
.pband__card p { color: var(--color-ink-muted); margin: 0 0 var(--space-4); }
.pband__card .link-arrow { display: inline-block; margin: 0 var(--space-5) var(--space-2) 0; }
@media (max-width: 760px) {
    .pband__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   About page (page-about.php)
   ============================================================ */
.about { background: var(--color-canvas); }

/* ============================================================
   Contact page (page-contact.php)
   ============================================================ */
.contact { background: var(--color-canvas); }
.contact-hero { padding: var(--space-16) 0 var(--space-8); }
.contact-hero__title { margin: var(--space-2) 0 var(--space-4); }
.contact-hero__lead { max-width: 58ch; color: var(--color-ink-muted); }
.contact-body { padding: 0 0 var(--space-20); }
.contact-body__head { margin-bottom: var(--space-8); }
.contact-body__head .h2 { margin: var(--space-2) 0 var(--space-2); }
.contact-body__sub { color: var(--color-ink-muted); margin: 0; max-width: 60ch; }
.contact-body__head .eyebrow { color: var(--color-orange-bold); margin-bottom: 0; }
.contact-body__title { margin: var(--space-2) 0 var(--space-3); }
/* Estudio Shine and the maps on charcoal; hours, phones and sign-up on beige below (Kathleen, 2026-10-03). */
.contact-body.section--dark { padding: var(--space-16) 0; }
.contact-body.section--dark .contact-body__sub { color: rgba(249, 243, 234, 0.75); }
/* Heading on the left, the studio cards (cream, compact) on the right. */
.contact-body__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-12); align-items: stretch; }
/* Both columns run the full height, so the sign-up card's bottom edge lines up
   with the bottom of the map cards (Kathleen, 2026-10-03). */
.contact-body__layout .contact-body__head { margin-bottom: 0; display: flex; flex-direction: column; }
.contact-body__layout .contact-body__sub { margin-bottom: var(--space-6); }
.contact-body__cards { display: flex; flex-direction: column; }
.contact-body__cards .contact-studios { flex: 1; }
.contact-body.section--dark .contact-main,
.contact-body.section--dark .contact-studio { background: var(--color-surface); border: 0; color: var(--color-ink); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25); }
.contact-body.section--dark .contact-main .link-arrow,
.contact-body.section--dark .contact-studio .link-arrow { color: var(--color-orange-bold); }
.contact-body.section--dark .contact-main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-6); margin-bottom: var(--space-4); }
.contact-body.section--dark .contact-main { padding: var(--space-3); }
.contact-body.section--dark .contact-main__map { min-height: 280px; border-radius: var(--radius-card); }
.contact-body.section--dark .contact-main__info { padding: var(--space-3) var(--space-3) var(--space-2) 0; }
.contact-body.section--dark .contact-main__info .contact-block__lines { font-size: 16px; }
.contact-body.section--dark .contact-studio { padding: var(--space-3) var(--space-3) var(--space-4); }
.contact-body.section--dark .contact-studio__map { height: 150px; width: 100%; margin: 0 0 var(--space-3); border-radius: var(--radius-card); }
.contact-body.section--dark .contact-studio > :not(iframe) { margin-left: var(--space-1); margin-right: var(--space-1); }
.contact-body.section--dark .contact-studio__name { font-size: 17px; }
.contact-body.section--dark .contact-studio__lines { font-size: 15px; }
@media (max-width: 900px) {
    .contact-body__layout { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 600px) {
    .contact-body.section--dark .contact-main { grid-template-columns: 1fr; gap: 0; }
    .contact-body.section--dark .contact-main__info { padding: var(--space-4) var(--space-1) var(--space-1); }
}
.contact-reach { padding: var(--space-16) 0; }
.contact-reach__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); max-width: 820px; }
/* The sign-up card under the Estudio Shine text, cream like the map cards. */
.contact-cta__card--side { margin-top: auto; background: var(--color-surface); border: 0; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25); }
.contact-reach__details .contact-block { margin-bottom: 0; }
@media (max-width: 600px) { .contact-reach__details { grid-template-columns: 1fr; } }
/* Montseny: the map with the reception's details beside it (Kathleen, 2026-10-03). */
.contact-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); align-items: stretch; background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; margin-bottom: var(--space-6); }
.contact-main__map { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }
.contact-main__info { padding: var(--space-8) var(--space-8) var(--space-6) 0; }
.contact-main__name { font-size: var(--type-h3); line-height: 1.2; margin: 0 0 var(--space-2); }
.contact-main__info .contact-block { margin: var(--space-6) 0 0; }
@media (max-width: 900px) {
    .contact-main { grid-template-columns: 1fr; gap: 0; }
    .contact-main__map { min-height: 280px; }
    .contact-main__info { padding: var(--space-6); }
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Find it on the site first (Kathleen, 2026-10-03): search + topic tiles above the contact details. */
.contact-help { padding: 0 0 var(--space-16); }
.help-search { background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-6); box-shadow: 0 10px 30px rgba(42, 38, 34, 0.06); }
.help-search__label { display: block; font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; font-size: 11px; color: var(--color-orange-bold); margin: 0 0 var(--space-3); }
.help-search__row { display: flex; gap: var(--space-3); }
.help-search__input { flex: 1; min-width: 0; font: inherit; font-size: var(--type-lead); padding: 12px 18px; border: 1px solid var(--color-rule); border-radius: 999px; background: var(--color-canvas); color: var(--color-ink); }
.help-search__input:focus { outline: 2px solid var(--color-orange-bold); outline-offset: 1px; }
.help-search__try { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0; font-size: 14px; color: var(--color-ink-muted); }
.help-search__chip { font: inherit; font-size: 13px; color: var(--color-ink); background: var(--color-canvas); border: 1px solid var(--color-rule); border-radius: 999px; padding: 5px 14px; cursor: pointer; }
.help-search__chip:hover { background: var(--color-orange-bold); border-color: var(--color-orange-bold); color: var(--color-ink-on-dark); }
.help-results { margin-top: var(--space-6); }
/* The rules' answer: first, and clearly the answer to what was asked. */
.help-rule { background: var(--color-surface); border-left: 4px solid var(--color-orange-bold); border-radius: var(--radius-card); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-6); box-shadow: 0 10px 24px rgba(42, 38, 34, 0.08); }
.help-rule__label { margin: 0 0 var(--space-2); color: var(--color-orange-bold); }
.help-rule__text { font-size: var(--type-lead); line-height: 1.5; margin: 0 0 var(--space-3); color: var(--color-ink); }
.help-rule__rows { margin: 0 0 var(--space-4); padding-left: 1.2em; }
.help-rule__rows li { margin-bottom: var(--space-1); }
.help-rule__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: var(--space-2) 0 0; }
.help-rule__links .link-arrow { color: var(--color-orange-bold); }
.help-results__label { margin: var(--space-6) 0 var(--space-3); }
.help-results__label:first-child { margin-top: 0; }
.help-results__faqs { display: flex; flex-direction: column; gap: var(--space-3); }
.help-results__from { display: inline-block; margin-top: var(--space-3); font-size: 14px; }
.help-results__pages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); } /* full width, like the answers (Kathleen, 2026-11-05) */
.help-page { display: block; height: 100%; background: var(--color-ink); border: 1px solid var(--color-ink); border-radius: var(--radius-card); padding: var(--space-5) var(--space-6); text-decoration: none; color: var(--color-ink-on-dark); box-shadow: 0 10px 24px rgba(42, 38, 34, 0.08); } /* charcoal, so a page reads apart from an answer */
.help-page:hover { border-color: var(--color-orange-bold); }
.help-page__title::after { content: " \2192"; color: var(--color-orange-bold); }
.help-page__title { display: block; font-family: var(--font-display); font-size: var(--type-lead); margin-bottom: var(--space-1); }
.help-page__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; color: rgba(249, 243, 234, 0.75); }
.help-results__empty, .help-results__still { margin: var(--space-5) 0 0; color: var(--color-ink-muted); }
.help-topics__heading { margin: var(--space-10) 0 var(--space-4); }
.help-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 900px) { .help-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .help-topics, .help-results__pages { grid-template-columns: 1fr; }
    .help-search__row { flex-direction: column; }
}
.contact-body__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-12); align-items: start; }
.contact-block { margin-bottom: var(--space-8); }
.contact-block__lines { font-size: var(--type-lead); line-height: 1.6; margin: var(--space-2) 0; }
.contact-block__lines a { color: var(--color-ink); text-decoration: none; }
.contact-block__lines a:hover { color: var(--color-orange-bold); }
.contact-block__note { color: var(--color-ink-muted); font-size: 14px; margin: 0 0 var(--space-2); }
.contact-block__intro { max-width: 60ch; color: var(--color-ink-muted); margin: var(--space-2) 0 var(--space-5); }
/* The four studios: Montseny (reception) first, in orange, then the classrooms. */
.contact-studios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.contact-studio { background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-5); }
.contact-studio__note { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; font-size: 11px; color: var(--color-orange-bold); margin: 0 0 var(--space-2); }
.contact-studio__name { font-size: var(--type-lead); line-height: 1.3; margin: 0 0 var(--space-2); }
.contact-studio__lines { line-height: 1.6; margin: 0 0 var(--space-3); }
.contact-studio { overflow: hidden; }
.contact-studio__map { display: block; width: calc(100% + 2 * var(--space-5)); height: 180px; border: 0; margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) var(--space-4); }
@media (max-width: 600px) { .contact-studios { grid-template-columns: 1fr; } }
.contact-cta__card { background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-6); box-shadow: 0 10px 30px rgba(42, 38, 34, 0.06); }
.contact-cta__title { margin: var(--space-1) 0 var(--space-3); }
/* The white card's heading in ink at every width: it inherited the dark band's cream and could not be read (11 Nov 2026). */
.contact-cta__card .contact-cta__title { color: var(--color-ink); }
.contact-cta__card p { color: var(--color-ink-muted); font-size: 14px; margin: 0 0 var(--space-5); }
.contact-cta__alt { margin: var(--space-4) 0 0; font-size: 13px; }
.contact-cta__alt a { color: var(--color-orange-bold); text-decoration: none; }

@media (max-width: 760px) {
    .contact-body__grid { grid-template-columns: 1fr; gap: var(--space-8); }
}

@media (max-width: 900px) {
    .tprofile__grid { grid-template-columns: 1fr; gap: var(--space-8); }
    .tprofile__aside { position: static; }
    .tprofile__cards { grid-template-columns: 1fr; }
    .tprofile-head__photo, .tprofile-head__initials { width: 104px; height: 104px; }
}

/* ---------- Course format pages (extensive / intensive / packs / group) ---------- */
/* Info left, prices right, on the light learn section. */
.course-format-page .ginstr-learn__intro p { color: var(--color-ink-muted); margin: 0 0 var(--space-4); line-height: var(--leading-body); }
.cf-two { position: relative; overflow: hidden; }
.cf-two__grid { align-items: start; position: relative; z-index: 1; }
/* One rhythm for the course page: 80px between sections. */
.cf-two { padding: var(--space-20) 0; }
/* Good to know: the remaining sections as cards, stacked under the prices and
   the small print in the right column. */
.cf-more { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--color-rule); }
.cf-more__heading { margin: 0 0 var(--space-5); }
/* Sign-up page: "Good to know" heads the aside, above "Pick an instrument". */
.signup-good-to-know { margin: 0 0 var(--space-6); padding-top: 0; border-top: 0; }
.cf-cards { display: flex; flex-direction: column; gap: var(--space-4); }
.cf-card { background: var(--color-surface); border-radius: 14px; padding: var(--space-6) var(--space-6) var(--space-5); box-shadow: 0 10px 24px rgba(42, 38, 34, 0.08); }
/* Good to know reads as an orange card. */
.cf-more .cf-card { background: var(--color-orange-bold); box-shadow: 0 10px 24px rgba(221, 122, 46, 0.24); }
.cf-more .cf-card .cf-card__title,
.cf-more .cf-card p,
.cf-more .cf-card .cf-list,
.cf-more .cf-card a { color: var(--color-ink-on-dark); }
.cf-more .cf-card .ginstr-styles__item { background: var(--color-surface); border-color: transparent; color: var(--color-ink); }
/* A chip is a white button on the orange card, so its link stays charcoal
   rather than taking the card's cream link colour. */
.cf-more .cf-card .ginstr-styles__item a { color: var(--color-ink); }
.ginstr-styles__item a { color: inherit; text-decoration: none; }
.ginstr-styles__item:has(a):hover { background: var(--color-orange-bold); color: var(--color-ink-on-dark); border-color: var(--color-orange-bold); }
.cf-more .cf-card .ginstr-styles__item:has(a):hover { background: var(--color-ink); color: var(--color-ink-on-dark); }
.cf-card__title { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; font-size: 11px; line-height: 1.3; color: var(--color-orange-bold); margin: 0 0 var(--space-3); }
.cf-card p { font-family: var(--font-display); font-size: 15px; line-height: 1.55; color: var(--color-ink); margin: 0 0 var(--space-3); }
.cf-card p:last-child, .cf-card .cf-list:last-child { margin-bottom: 0; }
.cf-card .cf-list { font-size: 15px; }
.cf-card .cf-chips { margin: 0 0 var(--space-4); }
/* Ready to start: the charcoal sign-up section, the rest of the cards on it. */
.cf-signup__cards { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.cf-signup__cards--2 { grid-template-columns: repeat(2, 1fr); }
.cf-signup__cards--1 { grid-template-columns: 1fr; }
.cf-signup .tarch-point__text + .tarch-point__text { margin-top: var(--space-3); }
.cf-signup .cf-list { padding-left: 1.2em; }

/* Teacher pages on the front page's edge treatment (Kathleen, 2026-09-23).
   .tarch-point is shared, so it is scoped by body class here; the site-wide
   pass will drop the scoping and move every card onto --radius-card. */
.post-type-archive-teachers .tarch-point { border-radius: var(--radius-card); }
/* With the buttons under the cards, the heading column can run full width. */
.cf-signup .courses-start__head .tarch-cta__text { max-width: 720px; }
.cf-signup__actions { margin-top: var(--space-8); }
@media (max-width: 900px) { .cf-signup__cards, .cf-signup__cards--2 { grid-template-columns: 1fr; } }
.cf-chips { margin: 0 0 var(--space-5); }
.cf-list { margin: 0 0 var(--space-5); padding-left: 1.2em; }
.cf-list li { margin: 0 0 var(--space-2); line-height: var(--leading-body); }
.cf-schedule__row { flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.cf-schedule__when { font-size: 14px; color: var(--color-ink-muted); }
.cf-schedule__link { color: var(--color-orange-bold); text-decoration: none; }
.cf-schedule__link:hover { text-decoration: underline; }
/* A notice card: one class, its status, a button. */
.cf-notice__text { font-size: 14px; color: var(--color-ink-muted); margin: 0 0 var(--space-4); }
.cf-notice__btn { display: flex; justify-content: center; width: 100%; margin-top: var(--space-2); }
/* Small cards under the intro (a page that keeps its further information with the text). */
.cf-intro-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-8); }
.cf-card--small { padding: var(--space-5); }
.cf-card--small p { font-size: 14px; }
@media (max-width: 640px) { .cf-intro-cards { grid-template-columns: 1fr; } }
/* The page's longer read, after the two columns. */
.cf-closing { background: var(--color-surface); padding: var(--space-20) 0; }
.cf-closing__inner { max-width: 720px; margin: 0; }
.cf-closing .h2 { margin: 0 0 var(--space-6); }
.cf-closing p { margin: 0 0 var(--space-5); line-height: var(--leading-body); color: var(--color-ink-muted); }
.cf-closing .eyebrow { color: var(--color-orange-bold); margin-bottom: var(--space-3); }
.cf-closing__sub { margin: var(--space-8) 0 var(--space-3); }
.cf-closing .h2 + .cf-closing__sub { margin-top: 0; }
/* The read and the teachers side by side, when the page has both. */
.cf-closing--teachers .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
.cf-closing__teachers-h { margin: 0 0 var(--space-2); }
.cf-closing__teachers .ginstr-teachers__sub { margin: 0 0 var(--space-6); max-width: 520px; }
.cf-closing__teachers .ginstr-teachers__grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-5); }
.cf-closing__teachers .tcard__name { font-size: 17px; }
.cf-closing__teachers .ginstr-teachers__all { margin-top: var(--space-6); }
@media (max-width: 900px) { .cf-closing--teachers .container { grid-template-columns: 1fr; gap: var(--space-10); } }

/* Photos of the school under the info text, held narrower than the column. */
.cf-video { margin-top: var(--space-8); }
.cf-price__sub { color: var(--color-ink-muted); margin: var(--space-2) 0 var(--space-4); }
.cf-gallery { margin-top: var(--space-10); }
.cf-gallery .gallery { padding-top: 0; }
/* The regular version: four portrait frames, two by two, full width. */
.gallery--grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); padding-top: 0; }
.gallery--grid .gallery__frame { margin: 0; }
/* A single photo fills the column rather than sitting in half of a two-up grid. */
.gallery--grid:has(.gallery__frame:only-child) { grid-template-columns: 1fr; }
/* A price card can carry its own button, and a course page can carry one
   decorative element in the bottom right of its intro section. */
.gprice-card__cta { display: flex; justify-content: center; width: 100%; margin-top: var(--space-5); }
.cf-two { position: relative; overflow: hidden; }
.cf-two .container { position: relative; z-index: 1; }
.cf-element {
    position: absolute;
    right: clamp(8px, 4vw, 72px);
    bottom: 0;
    width: clamp(150px, 17vw, 250px);
    height: auto;
    z-index: 0;   /* decorative: the cards and their links sit over it */
    pointer-events: none;
    user-select: none;
}
/* A long instrument lies along the bottom edge rather than standing in the corner. */
/* Wide elements drop past the section edge, so the section below cuts them. */
.cf-element--wide { width: clamp(280px, 40vw, 620px); right: clamp(16px, 4vw, 80px); bottom: clamp(-120px, -6vw, -50px); }
/* In from the corner and dropped past the section edge, so the section below
   cuts it off (the section clips its overflow). */
.cf-element--left { right: auto; left: clamp(32px, 9vw, 150px); bottom: clamp(-120px, -6vw, -50px); }
@media (max-width: 900px) { .cf-element { display: none; } }
.cf-price { min-width: 0; }
.cf-price__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); margin: var(--space-2) 0 var(--space-1); }
.cf-price__sub { color: var(--color-ink-muted); font-size: var(--type-small); margin: 0 0 var(--space-5); }
.cf-price__cards { display: flex; flex-direction: column; gap: var(--space-5); }
/* White cards on the light section (the dark-section cream cards would vanish here). */
/* A page's own short clip, shown portrait beside the text. */
.cf-clip { margin: var(--space-8) 0 0; max-width: 300px; }
.cf-clip video { display: block; width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: 0 10px 24px rgba(42, 38, 34, 0.14); }
/* Gift vouchers page (page-gift-music.php) */
.gift-form { padding: var(--space-20) 0; }
.gift-form__head { max-width: 640px; margin-bottom: var(--space-8); }
.gift-form__head .eyebrow { color: var(--color-orange-bold); margin-bottom: var(--space-2); }
.gift-form__fallback { max-width: 640px; }
.gift-form__fallback p { color: var(--color-ink-muted); margin: 0 0 var(--space-6); }
.cf-aside-extra { margin-top: var(--space-4); }
.cf-below { margin-top: var(--space-8); }
.cf-below .gprice-card, .cf-price .gprice-card { background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-rule); border-radius: 14px; box-shadow: 0 10px 22px rgba(42, 38, 34, 0.06); padding: var(--space-5); }
.cf-intro-cta { margin: var(--space-6) 0 var(--space-8); }
/* Fee / supplement footnotes, muted on the light section. */
/* The starred terms sit at the foot of the page, above the footer. */
.cf-smallprint { background: var(--color-canvas); padding: var(--space-10) 0 var(--space-12); }
.cf-smallprint .cf-notes { max-width: 820px; margin: 0; }
.cf-smallprint--tight { padding: var(--space-6) 0; } /* under the prices on /courses/ */
.cf-notes { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.cf-notes li { color: var(--color-ink-muted); font-size: var(--type-caption); line-height: 1.5; margin: 0 0 var(--space-2); padding-left: var(--space-4); position: relative; }
.cf-notes li::before { content: '*'; position: absolute; left: 0; color: var(--color-orange-bold); }
/* Group per-person matrix table. */
.cf-matrix__scroll { overflow-x: auto; }
.cf-matrix__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cf-matrix__table th, .cf-matrix__table td { padding: var(--space-2) var(--space-3); text-align: right; border-top: 1px solid var(--color-rule); }
.cf-matrix__table thead th { border-top: 0; font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-muted); }
.cf-matrix__table th[scope="row"] { text-align: left; font-family: var(--font-display); font-weight: 400; color: var(--color-ink); }
.cf-matrix__table td { font-family: var(--font-display); font-size: 17px; color: var(--color-ink); }
/* The number-only headings and the unit in the corner are for phones
   (shown below 600px). */
.cf-matrix__corner-unit,
.cf-matrix__num { display: none; }
@media (max-width: 900px) { .cf-two__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ */
/* Plain pages (page.php: legal and older pages) and the blog index    */
/* (index.php), 2026-10-13: the contact page's light banner, then the  */
/* text on a white reading card or the posts as blog cards.            */
/* ------------------------------------------------------------------ */
.plain-page__body,
.blog-index__body { padding: 0 0 var(--space-20); }
.plain-page__card { background: var(--color-surface); border-radius: 14px; padding: var(--space-10) var(--space-10) var(--space-8); box-shadow: 0 10px 24px rgba(42, 38, 34, 0.08); max-width: var(--reading-max); margin: 0; overflow-wrap: anywhere; }
.plain-page__card > :first-child { margin-top: 0; }
.plain-page__card h2 { font-size: var(--type-h3); margin: var(--space-8) 0 var(--space-3); }
.plain-page__card h3, .plain-page__card h4 { font-family: var(--font-display); font-size: 19px; margin: var(--space-6) 0 var(--space-2); }
.plain-page__card a { color: var(--color-orange-bold); }
/* The old theme's ACF buttons (shine_page_block_link()): a real button, not an orange text link. */
.plain-page__cta { margin: var(--space-6) 0; }
.plain-page__card a.btn, .plain-page__card a.btn:hover { color: var(--color-ink); }
.plain-page__card table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
.plain-page__card th, .plain-page__card td { border-top: 1px solid var(--color-rule); padding: var(--space-2); text-align: left; vertical-align: top; }
.plain-page--legal .plain-page__card { font-size: 15px; }
.plain-page__legal { max-width: var(--reading-max); margin-top: var(--space-8); }
.plain-page__legal .eyebrow { color: var(--color-orange-bold); }
.plain-page__legal ul { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.blog-index__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-index .blog-card__title { font-size: var(--type-h3); }
.blog-index__pages { margin-top: var(--space-12); }
.blog-index__pages .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.blog-index__pages .page-numbers { display: inline-block; min-width: 2.5em; padding: var(--space-2) var(--space-3); text-align: center; border-radius: 8px; background: var(--color-surface); color: var(--color-ink); text-decoration: none; }
.blog-index__pages .page-numbers.current { background: var(--color-orange-bold); color: var(--color-ink-on-dark); }
.blog-index__pages .page-numbers.dots { background: none; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
@media (max-width: 900px) {
    .blog-index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plain-page__card { padding: var(--space-6) var(--space-5); }
}
@media (max-width: 600px) {
    .blog-index__grid { grid-template-columns: 1fr; }
}
/* The monthly sum in words under each extensive price (2026-10-13). */
.gprice-row__detail { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--color-ink-muted); }

/* ------------------------------------------------------------------ */
/* Hub pages (template-parts/hub.php), 2026-10-13: a family of         */
/* instruments or an audience, its cards, and its teachers.            */
/* ------------------------------------------------------------------ */
.hub-intro { padding: var(--space-16) 0 var(--space-4); }
.hub-intro__text { max-width: var(--reading-max); }
.hub-intro__grid { align-items: start; }
.hub-intro__text .h2 { margin: 0 0 var(--space-4); }
.hub-intro__text p { color: var(--color-ink); }
.hub-block { padding: var(--space-12) 0; }
.hub-block .explore__heading { margin-bottom: var(--space-2); }
.hub-block__sub { color: var(--color-ink); max-width: 60ch; margin: 0 0 var(--space-8); }
.hub-block .explore__heading + .explore__grid { margin-top: var(--space-6); }
.hub-prices { padding: var(--space-12) 0 var(--space-16); }
.hub-prices__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--space-12); align-items: start; }
.hub-prices__text .h2 { margin: var(--space-2) 0 var(--space-4); }
.hub-prices__text .eyebrow { color: var(--color-orange-bold); }
.hub-page .ginstr-teachers { scroll-margin-top: 90px; }
@media (max-width: 900px) {
    .hub-prices__grid { grid-template-columns: 1fr; gap: var(--space-6); }
}
.cf-links__eyebrow { margin: var(--space-10) 0 var(--space-3); color: var(--color-orange-bold); }
.help-signup { margin-top: var(--space-6); }

/* Buttons on the banners in the forms' bold sans (Inter), not the serif
   (Kathleen, 2026-11-05). Every banner's wrapper has "hero" in its class. */
[class*="hero"] .btn-cream {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: lowercase; /* all lower case: "sign up for guitar courses" (Kathleen) */
    font-size: 17px;
}

/* ------------------------------------------------------------------ */
/* Blog post (single.php), 2026-11-05: the post on a reading card,     */
/* the school's sidebar beside it, previous and next posts underneath. */
/* ------------------------------------------------------------------ */
.blog-post__hero .eyebrow a { color: inherit; text-decoration: none; }
.blog-post__date { color: var(--color-ink-muted); margin: 0; }
.blog-post__body { padding: 0 0 var(--space-20); }
.blog-post__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-10); align-items: start; }
.blog-post__card { max-width: none; }
.blog-post__image { margin: 0 0 var(--space-6); }
.blog-post__image img { width: 100%; height: auto; border-radius: 10px; margin: 0; }
.blog-post__card img { max-width: 100%; height: auto; }
.blog-post__card iframe { max-width: 100%; }
.blog-post__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-8); }
.blog-post__nav-link { display: block; background: var(--color-ink); color: var(--color-ink-on-dark); border-radius: 14px; padding: var(--space-5) var(--space-6); text-decoration: none; }
.blog-post__nav-link:hover { background: #3a342f; }
.blog-post__nav-link--next { text-align: right; grid-column: 2; }
.blog-post__nav-label { display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-orange-bold); margin-bottom: var(--space-2); }
.blog-post__nav-title { display: block; font-family: var(--font-display); font-size: 18px; line-height: 1.3; }
.blog-post__all { margin-top: var(--space-6); }
.blog-side { display: grid; gap: var(--space-5); position: sticky; top: 100px; }
.blog-side__card { background: var(--color-surface); border-radius: 14px; padding: var(--space-6); box-shadow: 0 10px 24px rgba(42, 38, 34, 0.08); font-size: 15px; }
.blog-side__card p { margin: 0 0 var(--space-3); }
.blog-side__card .eyebrow { color: var(--color-orange-bold); }
.blog-side__img { display: block; width: 100%; height: auto; border-radius: 10px; margin-top: var(--space-3); }
.blog-side__card--dark { background: var(--color-ink); color: var(--color-ink-on-dark); }
.blog-side__card--dark a { color: var(--color-ink-on-dark); }
.blog-side__social { display: flex; gap: var(--space-4); margin-bottom: 0; }
.blog-side__social a { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--color-orange-bold); text-decoration: none; }
.blog-side__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.blog-side__links a { display: block; background: var(--color-orange-bold); color: var(--color-ink-on-dark); border-radius: 10px; padding: var(--space-3) var(--space-5); font-family: var(--font-sans); font-weight: 700; font-size: 14px; text-decoration: none; }
.blog-side__links a:hover { background: #c46a22; }
@media (max-width: 900px) {
    .blog-post__grid { grid-template-columns: 1fr; }
    .blog-side { position: static; }
}
@media (max-width: 600px) {
    .blog-post__nav { grid-template-columns: 1fr; }
    .blog-post__nav-link--next { grid-column: auto; }
}

/* ------------------------------------------------------------------ */
/* Teal, here and there (Kathleen, 2026-11-05: "not too much of it, a  */
/* nice accent"). Kept to these few places on purpose.                 */
/* ------------------------------------------------------------------ */
.gprice-row__detail { color: var(--color-teal-soft); }
.help-signup { border-left-color: var(--color-teal); }
.help-signup .help-rule__label { color: var(--color-teal-soft); }
.blog-post__nav-link { background: var(--color-teal); }
.blog-post__nav-link:hover { background: var(--color-teal-soft); }
.blog-post__nav-label { color: var(--color-ink-on-dark); opacity: 0.85; }
.blog-side__links a { background: var(--color-teal); }   /* as on the live site's sidebar */
.blog-side__links a:hover { background: var(--color-teal-soft); }
#kids-good-to-know .explore__card .eyebrow { color: var(--color-teal-soft); }
.link-arrow:hover, .content-shell__body a:hover, .faq-item__a a:hover { color: var(--color-teal-soft); }
/* A large gallery between a hub page's card sections (kids page, 2026-11-05). */
.hub-gallery { padding: var(--space-4) 0 var(--space-12); }
.hub-gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.hub-gallery__frame .gallery__img { aspect-ratio: 4 / 5; }
@media (max-width: 900px) { .hub-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } }
.hub-intro__prices { margin-top: var(--space-8); }
.hub-intro__prices-h { margin: 0 0 var(--space-2); }
.hub-intro__prices .gprice-card { margin: var(--space-4) 0; max-width: 460px; }
.hub-intro__chips { margin-top: var(--space-6); scroll-margin-top: 100px; }
.hub-intro__chips .eyebrow { color: var(--color-orange-bold); margin-bottom: var(--space-2); }

/* =========================================================
   Phones (and a few tablet fixes): the page content
   Mobile audit, 11 Nov 2026 (owner: "make it all fit nice"). Everything here
   sits inside a max-width query below 1200px, so the desktop is unchanged.
   The header, the footer, the floating buttons and the home page have their
   own rules elsewhere; nothing here reaches them.
   ========================================================= */

/* The page content keeps a 20px side gutter on phones, not the theme's 24px:
   every line gets 8px more room. Scoped to <main> on the inner pages, so the
   header, the footer and the home page keep their own. */
@media (max-width: 719px) {
    body:not(.home) #main { --container-pad-x: var(--space-5); }
}

/* Tablets and phones. The FAQ disc sits 20px in from the right and is 26px
   wide, so 48px of padding left a long question 2px from it. */
@media (max-width: 1199px) {
    .faq-item__q { padding-right: 60px; }
    /* Contact: the sign-up card is white inside the charcoal section, and the
       section's cream heading colour made its title invisible. The alt line
       had lost its gap to the button to the card's own paragraph rule. */
    .contact-cta__card .contact-cta__title { color: var(--color-ink); }
    .contact-cta__card .contact-cta__alt { margin: var(--space-4) 0 0; }
}

@media (max-width: 720px) {
    /* Instrument and course heroes. The text runs the full width of a phone,
       across the photo, and the desktop fade turns transparent by 88%: a
       near-solid orange keeps every line readable, the photo still shows
       through as texture. A phone hero is as tall as its text. */
    .ginstr-hero { min-height: 0; padding: var(--space-12) 0; }
    .ginstr-hero__bg::after {
        background: linear-gradient(to right, rgba(221, 122, 46, 0.97) 0%, rgba(221, 122, 46, 0.93) 55%, rgba(221, 122, 46, 0.86) 100%);
    }
    /* The underlined text links keep their look; an invisible band above and
       below makes them a 44px target. */
    .ginstr-hero__link { position: relative; }
    .ginstr-hero__link::after { content: ""; position: absolute; inset: -9px 0 -9px; }

    /* Reading text in the cards at 16px on a phone (it was 14 and 15px). The
       home page's own cards are left to its rules. */
    .ginstr-hero__chip,
    .gtile__text,
    .mini-review__quote,
    .tprofile .review-card__quote,
    .tarch-point__text,
    .cf-card p,
    .cf-card .cf-list,
    .contact-body.section--dark .contact-studio__lines,
    .contact-cta__card p,
    .blog-side__card,
    .cf-notice__text,
    .hub-page .explore__card-body { font-size: 16px; }

    /* Small uppercase labels: 12px at least (they were 10 and 11px). */
    .gprice-row__rec,
    .tarch-point__title,
    .cf-card__title,
    .cf-links__title,
    .tinline__cta,
    .help-search__label,
    .contact-studio__note,
    .tcard-instr__eyebrow,
    .tcard-orange__eyebrow,
    .cf-matrix__table thead th { font-size: 12px; }

    /* Tap targets of 44px. The instrument chips drew a 30px pill around a 16px
       link; the link now fills the pill. */
    .ginstr-styles { gap: var(--space-2); }
    .ginstr-styles__item:has(a) { padding: 0; }
    .ginstr-styles__item a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; }
    .tteach__btn { display: flex; align-items: center; min-height: 44px; }
    body:not(.home) #main .btn-cream { min-height: 44px; }
    body:not(.home) #main .btn-orange { padding-top: 15px; padding-bottom: 15px; }
    body:not(.home) #main .link-arrow { min-height: 44px; }
    .tarch-point__link { padding-top: var(--space-1); }
    /* The heritage reading links and "See all teachers": a full 44px row each. */
    .ginstr-heritage__links { gap: 0; }
    .ginstr-heritage__links a,
    .ginstr-teachers__all a { display: inline-block; padding: 12px 0; }
    /* The course lists: one link a line, each a full 44px row. */
    .cf-links__list { gap: 0; }
    .cf-links__list a { display: block; padding: 11px 0; }
    /* A class name in a timetable row links to its page. */
    .cf-schedule__row { padding: var(--space-3) 0; }
    .cf-schedule__link { position: relative; }
    .cf-schedule__link::after { content: ""; position: absolute; inset: -13px 0; }
    /* Blog pages. */
    .blog-index__pages .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
    .blog-side__card--dark a { display: inline-block; padding: 11px 0; }
    .blog-post__hero .eyebrow a { position: relative; }
    .blog-post__hero .eyebrow a::after { content: ""; position: absolute; inset: -14px -6px; }
    .blog-side__social a { display: inline-flex; align-items: center; min-height: 44px; }

    /* Contact. */
    .help-search__chip { min-height: 44px; padding: 10px 16px; }
    .contact-block__lines a { display: inline-block; padding: 10px 0; }
    .contact-body.section--dark .contact-main__map { min-height: 200px; }
    /* Teacher profile: the instrument tags are links; a band above and below
       makes them 44px, and the wider row gap keeps the bands apart. */
    .tprofile-head__tags { gap: var(--space-4) var(--space-2); }
    a.tspec-card { position: relative; }
    a.tspec-card::after { content: ""; position: absolute; inset: -8px 0; }

    /* Gift and sign-up pages: the form opened 80px under the header. */
    .gift-form { padding: var(--space-10) 0 var(--space-12); }
}

/* "Ready to start?" and the other charcoal bands (course, hub and about
   pages). The text block's 480px flex-basis is a width on a row, but once the
   row turns into a column below 700px it became a 480px HEIGHT, leaving ~370px
   of empty charcoal between the text and the buttons. */
@media (max-width: 700px) {
    .courses-start__head .tarch-cta__text { flex: 0 1 auto; }
}

@media (max-width: 600px) {
    /* Teacher cards (instrument, course and hub pages, /teachers/ and its
       categories) and the instrument tiles on /classes/: two compact cards a
       row instead of one full-width portrait (a third of the guitar page was
       teacher photos). Photo, name and one line; the whole card is the link,
       so "View profile" goes. A deeper scrim keeps the name readable on any
       photo. */
    .ginstr-teachers__grid,
    .ginstr-teachers .ginstr-teachers__grid,
    .cf-closing__teachers .ginstr-teachers__grid,
    .tteach__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .tcard__body {
        padding: var(--space-3);
        background: linear-gradient(to top, rgba(42, 38, 34, 0.94) 0%, rgba(42, 38, 34, 0.84) 30%, rgba(42, 38, 34, 0.4) 58%, rgba(42, 38, 34, 0) 82%);
    }
    .tcard__name,
    .ginstr-teachers .tcard__name,
    .tteach__grid .tcard__name,
    .cf-closing__teachers .tcard__name { font-size: 16px; line-height: 1.2; }
    .tcard__spec {
        font-size: 13px;
        margin: 2px 0 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .tcard__cta { display: none; }

    /* The reviews beside the FAQ: one readable card a row, not two 160px
       columns of 13 characters a line. */
    .faq-reviews { grid-template-columns: 1fr; }
    .mini-review { aspect-ratio: auto; }

    /* Group price tables: numbers only in the column headings, the unit once
       in the corner (template-parts/course-format.php), tighter cells, so
       the '4 students' column fits at 360px in every language. The unit stays
       in the heading for screen readers. */
    /* Only the tables with number-only headings (they carry the corner cell):
       the rental and intensive tables keep their wrapping row labels (review,
       11 Nov 2026: 'LARGO PLAZO' was cut at 360px in Spanish). */
    .cf-matrix__table:has(.cf-matrix__corner) th,
    .cf-matrix__table:has(.cf-matrix__corner) td { padding: var(--space-2) var(--space-1); }
    .cf-matrix__table:has(.cf-matrix__corner) th[scope="row"] { white-space: nowrap; font-size: 15px; }
    .cf-matrix__table td { font-size: 16px; }
    .cf-matrix__table thead th { letter-spacing: 0; }
    .cf-matrix__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .cf-matrix__num,
    .cf-matrix__corner-unit { display: inline; }
    .cf-matrix__table .cf-matrix__corner { text-align: left; }

    /* Teacher profile: the sign-up card loses its desktop padding (the selects
       were 246px at 360), and the four promo tiles become short bars instead
       of 220px blocks of flat orange. */
    .tprofile-form-card { padding: var(--space-8) var(--space-5); }
    .promo-card { aspect-ratio: auto; min-height: 88px; }

    /* Contact, "Or go straight to": six tiles a whole screen tall each pair;
       on a phone a tile is its title and its link. */
    .help-topics .gtile__text { display: none; }

    /* Blog post: the next-post card reads from the left once the two stack,
       and the reading card takes the gutter back (302px of text at 390). */
    .blog-post__nav-link--next { text-align: left; }
    .blog-post__card.plain-page__card {
        margin-left: calc(-1 * var(--container-pad-x) + var(--space-2));
        margin-right: calc(-1 * var(--container-pad-x) + var(--space-2));
        padding: var(--space-6) var(--space-4);
    }
}
/* Touch screens show the teacher card's text over the photo (no hover); the
   phone scrim above, at the specificity of that rule. */
@media (max-width: 600px) and (hover: none) {
    :is(.arch-dark, .ginstr-teachers) .tcard__body {
        background: linear-gradient(to top, rgba(42, 38, 34, 0.94) 0%, rgba(42, 38, 34, 0.84) 30%, rgba(42, 38, 34, 0.4) 58%, rgba(42, 38, 34, 0) 82%);
    }
}

/* The teachers list: twelve instruments wrapped onto six rows (310px) before
   the first teacher. On a phone or tablet they are one row that swipes, edge
   to edge, every chip a 44px pill. The instruments page keeps its five
   families wrapping. */
@media (max-width: 860px) {
    .tteach { grid-template-columns: minmax(0, 1fr); }
    .tteach__filter { min-width: 0; }
    .tarch:not(.instr-arch) .tteach__filter-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 0 calc(-1 * var(--container-pad-x));
        padding: 0 var(--container-pad-x) var(--space-1);
        scroll-padding-inline: var(--container-pad-x);
        scroll-snap-type: x proximity;
    }
    /* The scrollbar hides only on touch screens: a mouse user at 720-860px
       (a zoomed laptop, a split window) keeps one to drag (review, 11 Nov). */
    @media (hover: none) {
        .tarch:not(.instr-arch) .tteach__filter-list { scrollbar-width: none; }
        .tarch:not(.instr-arch) .tteach__filter-list::-webkit-scrollbar { display: none; }
    }
    .tarch:not(.instr-arch) .tteach__filter-list li { flex: 0 0 auto; scroll-snap-align: start; }
    .tteach__btn { white-space: nowrap; min-height: 44px; padding: 10px 16px; border-radius: 999px; }
    .arch-dark .tteach__btn { border: 1px solid rgba(255, 255, 255, 0.18); }
    .arch-dark .tteach__btn.is-active { border-color: var(--color-orange-bold); }
}

/* Teacher profile, stacked (tablets and phones): the photo was a 4:3 crop of
   a portrait (the top of the head cut off) sitting flush on the section edge. */
@media (max-width: 900px) {
    .tprofile-hero2 { padding-bottom: var(--space-8); }
    .tprofile-hero2__slides { aspect-ratio: 4 / 5; max-height: 70vh; }
    .tprofile-hero2__slides .tprofile-hero2__img:not([style]) { object-position: center 20%; }
}

/* Sign-up page, while the form loads (owner, 12 Nov 2026, note n10): the
   registration form is drawn by its script once the course catalogue has
   come back, about a second, and until then its box was empty: the
   questions below showed first, then jumped down by the form's height
   (layout shift 0.62 to 0.76 on staging). Now the empty box keeps a
   screen's height, so nothing below it is in view before the form comes,
   and shows a quiet outline of the form meanwhile. The form is taller than
   a screen at every width (2,659px at 1440, 3,773px at 320), so its
   arrival moves nothing in view. page-sign-up-with-shine.php drops this
   without JavaScript (the form never comes) and back from a card payment
   (the form then shows a short thank-you: html.signup-paid). */
#shine-registration-form-container:empty {
    min-height: 100vh;
    border-radius: 14px;
    background:
        linear-gradient(var(--color-rule), var(--color-rule)) 50% 40px / min(56%, 400px) 26px no-repeat,
        linear-gradient(var(--color-rule), var(--color-rule)) 50% 86px / min(76%, 560px) 12px no-repeat,
        linear-gradient(var(--color-rule), var(--color-rule)) 50% 108px / min(60%, 440px) 12px no-repeat,
        linear-gradient(rgba(42, 38, 34, 0.04), rgba(42, 38, 34, 0.04)) 50% 152px / min(100%, 896px) 340px no-repeat;
    animation: shine-form-wait 1.2s ease-in-out infinite alternate;
}
.signup-paid #shine-registration-form-container:empty { min-height: 0; background: none; animation: none; }
@keyframes shine-form-wait { to { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) {
    #shine-registration-form-container:empty { animation: none; }
}

/* Sign-up page: the form was a card in a grey panel in the page gutter, so
   the fields started 53px from each edge (254px wide at 360). On a phone the
   panel goes and the form's own section cards use the width. These override
   the shine-native-forms plugin's own phone rules, from the theme. */
@media (max-width: 640px) {
    .signup-page .sf-reg-form { padding: 0; background: transparent; border-radius: 0; }
    .signup-page .sf-reg-form .sf-section { padding: var(--space-5) var(--space-4); }
    .signup-page .sf-reg-captcha { overflow: hidden; }
}

/* =========================================================
   Click-to-load placeholders for YouTube and Google Maps
   (inc/click-to-load.php): the iframe arrives only on a click,
   so nothing reaches Google with the page. The placeholder keeps
   the iframe's class, so it fills the same box.
   ========================================================= */
a.shine-ctl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-sizing: border-box;
    padding: var(--space-5);
    background: var(--color-ink);
    color: var(--color-ink-on-dark);
    font-family: var(--font-body);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.why__video > a.shine-ctl,
.ginstr-video > a.shine-ctl,
.tprofile__media-item > a.shine-ctl { position: absolute; inset: 0; width: 100%; height: 100%; }
a.shine-ctl--map { background: var(--color-hero-bg); color: var(--color-ink); }
.shine-ctl__icon { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--color-accent); transition: transform var(--t-fast); }
.shine-ctl__icon::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--color-ink); }
a.shine-ctl--map .shine-ctl__icon::after { width: 14px; height: 14px; transform: translate(-50%, -50%); border: 4px solid var(--color-ink); border-radius: 50%; }
.shine-ctl__label { font-weight: 700; font-size: var(--type-body); }
.shine-ctl__note { font-size: var(--type-caption); opacity: 0.85; }
a.shine-ctl:hover .shine-ctl__icon,
a.shine-ctl:focus-visible .shine-ctl__icon { transform: scale(1.06); }
a.shine-ctl:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.contact-studio__map.shine-ctl { gap: var(--space-1); }
.contact-studio__map.shine-ctl .shine-ctl__icon { width: 44px; height: 44px; }
/* A Google map typed into a post (12 Nov 2026): the placeholder, then the
   iframe, as wide as the text allows up to the iframe's own width, in its
   proportions (both inline, from the typed iframe). The placeholder
   stays a flex box (a.shine-ctl). */
.post-map { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0; }