/* ============================================================
   Actors Garden — style.css
   Design System v1.0 — Garden / Spotlight / Play palettes
   ============================================================ */

@layer reset, tokens, semantic, layout, components, utilities;

/* ── Reset ────────────────────────────────────────────────── */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

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

  body {
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

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

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

  button {
    cursor: pointer;
    border: none;
    background: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul,
  ol {
    list-style: none;
  }

  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    line-height: 1.2;
  }

  p {
    overflow-wrap: break-word;
  }
}

/* ── Tokens (Primitives) ──────────────────────────────────── */
@layer tokens {
  :root {
    /* Garden Scale (Hue ~155, green growth) */
    --garden-soil:   #1b2920;
    --garden-root:   #253e32;
    --garden-stem:   #2e5a45;
    --garden-leaf:   #3c7a5c;
    --garden-bloom:  #5aaa7e;
    --garden-dew:    #b8d8c8;

    /* Spotlight Scale (Hue ~75, theatre warmth) */
    --spotlight-dark:  #3a2e18;
    --spotlight-amber: #9a7a3a;
    --spotlight-gold:  #d4a843;
    --spotlight-glow:  #e8d0a0;
    --spotlight-wash:  #f5eed8;

    /* Play Scale (Hue ~30, energy) */
    --play-deep:   #5a2a20;
    --play-warm:   #c4704b;
    --play-bright: #e08858;
    --play-soft:   #e8c0aa;
    --play-tint:   #f5e8e0;

    /* Anchors */
    --color-ink:       #2c2825;
    --color-ink-soft:  #5c5550;
    --color-ink-muted: #8a8580;
    --color-cream:     #f7f5f2;
    --color-paper:     #faf9f7;
    --color-linen:     #f0ede8;

    /* Signals */
    --signal-success:  #5c8c4b;
    --signal-warning:  #c4944b;
    --signal-critical: #c44b4b;

    /* Typography */
    --font-display:   'Fraunces', Georgia, serif;
    --font-body:      'Source Serif 4', Georgia, serif;
    --font-body-sans: 'Source Sans 3', system-ui, sans-serif;
    --font-mono:      'Source Code Pro', monospace;

    /* Type Scale (fluid) */
    --step--1: clamp(0.8125rem, 0.77rem + 0.21vw, 0.9375rem);
    --step-0:  clamp(1rem, 0.94rem + 0.28vw, 1.125rem);
    --step-1:  clamp(1.25rem, 1.15rem + 0.47vw, 1.5rem);
    --step-2:  clamp(1.5625rem, 1.40rem + 0.78vw, 2rem);
    --step-3:  clamp(1.9375rem, 1.70rem + 1.18vw, 2.625rem);
    --step-4:  clamp(2.4375rem, 2.07rem + 1.83vw, 3.5rem);

    /* Spacing Scale (fluid) */
    --space-xs:  clamp(0.25rem, 0.22rem + 0.14vw, 0.375rem);
    --space-sm:  clamp(0.5rem, 0.45rem + 0.28vw, 0.75rem);
    --space-md:  clamp(1rem, 0.90rem + 0.47vw, 1.375rem);
    --space-lg:  clamp(1.5rem, 1.34rem + 0.78vw, 2rem);
    --space-xl:  clamp(2rem, 1.76rem + 1.18vw, 3rem);
    --space-2xl: clamp(3rem, 2.62rem + 1.88vw, 4.5rem);
  }
}

/* ── Semantic Layer ───────────────────────────────────────── */
@layer semantic {
  :root {
    --color-ground:         var(--color-cream);
    --color-surface:        var(--color-paper);
    --color-surface-raised: #ffffff;
    --color-surface-inset:  var(--color-linen);

    --color-primary:       var(--garden-stem);
    --color-primary-deep:  var(--garden-root);
    --color-primary-light: var(--garden-dew);

    --color-accent:       var(--spotlight-gold);
    --color-accent-deep:  var(--spotlight-amber);
    --color-accent-light: var(--spotlight-wash);

    --color-energy:        var(--play-warm);
    --color-energy-bright: var(--play-bright);
    --color-energy-light:  var(--play-tint);

    --color-text:       var(--color-ink);
    --color-text-soft:  var(--color-ink-soft);
    --color-text-muted: var(--color-ink-muted);

    --shadow-color: hsla(150, 20%, 30%, 0.08);
    --shadow-sm:    0 1px 3px var(--shadow-color), 0 1px 2px var(--shadow-color);
    --shadow-md:    0 4px 6px var(--shadow-color), 0 2px 4px var(--shadow-color);
    --shadow-lg:    0 10px 20px var(--shadow-color), 0 3px 6px var(--shadow-color);

    --radius-sm:      8px;
    --radius-default: 12px;
    --radius-lg:      16px;

    --max-width:   1200px;
    --header-h:    72px;
    --mobile-bar-h: 56px;
  }
}

/* ── Layout ───────────────────────────────────────────────── */
@layer layout {
  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    color: var(--color-text);
    background: var(--color-ground);
  }

  .container {
    width: min(var(--max-width), 100% - var(--space-lg) * 2);
    margin-inline: auto;
  }

  .section {
    padding-block: var(--space-2xl);
  }

  .section-heading {
    font-family: var(--font-display);
    font-size: var(--step-3);
    color: var(--color-text);
    margin-block-end: var(--space-lg);
  }

  .section-subheading {
    font-family: var(--font-body);
    font-size: var(--step-1);
    color: var(--color-text-soft);
    margin-block-end: var(--space-xl);
    max-width: 60ch;
  }

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

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

  @media (min-width: 768px) {
    .grid-2 {
      grid-template-columns: repeat(2, 1fr);
    }
    .grid-3 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

/* ── Components ───────────────────────────────────────────── */
@layer components {

  /* ── Skip Link ──────────────────────────────────────────── */
  .skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
    z-index: 1000;
    transition: top 0.2s ease;
  }

  .skip-link:focus {
    top: var(--space-sm);
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
  }

  /* ── Site Header ────────────────────────────────────────── */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--garden-soil);
    height: var(--header-h);
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-sm);
  }

  .site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .site-logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--garden-dew);
    font-family: var(--font-display);
    font-size: var(--step-1);
    text-decoration: none;
  }

  .site-logo svg {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .site-logo span {
    white-space: nowrap;
  }

  /* ── Desktop Nav ────────────────────────────────────────── */
  .site-nav {
    display: none;
  }

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

  .site-nav a {
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
    color: var(--garden-dew);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: background 0.2s ease, color 0.2s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .site-nav a:hover,
  .site-nav a.active {
    background: var(--garden-root);
    color: #fff;
  }

  .site-nav a:focus-visible {
    outline: 3px solid var(--garden-bloom);
    outline-offset: 2px;
  }

  @media (min-width: 768px) {
    .site-nav {
      display: block;
    }
    .nav-toggle {
      display: none;
    }
  }

  /* ── Hamburger Toggle ───────────────────────────────────── */
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--garden-dew);
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
  }

  .nav-toggle:hover {
    background: var(--garden-root);
  }

  .nav-toggle:focus-visible {
    outline: 3px solid var(--garden-bloom);
    outline-offset: 2px;
  }

  .nav-toggle svg {
    width: 24px;
    height: 24px;
  }

  .nav-toggle[aria-expanded="true"] .icon-menu {
    display: none;
  }

  .nav-toggle[aria-expanded="false"] .icon-close,
  .nav-toggle:not([aria-expanded]) .icon-close {
    display: none;
  }

  /* ── Mobile Nav Panel ───────────────────────────────────── */
  .mobile-nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    width: min(320px, 85vw);
    background: var(--garden-soil);
    z-index: 99;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: var(--space-lg);
  }

  .mobile-nav[aria-hidden="false"] {
    transform: translateX(0);
  }

  .mobile-nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .mobile-nav a {
    display: flex;
    align-items: center;
    font-family: var(--font-body-sans);
    font-size: var(--step-1);
    color: var(--garden-dew);
    padding: var(--space-sm) var(--space-md);
    min-height: 44px;
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
  }

  .mobile-nav a:hover,
  .mobile-nav a.active {
    background: var(--garden-root);
    color: #fff;
  }

  .mobile-nav a:focus-visible {
    outline: 3px solid var(--garden-bloom);
    outline-offset: 2px;
  }

  .nav-overlay {
    position: fixed;
    inset: 0;
    top: var(--header-h);
    background: hsla(150, 20%, 10%, 0.5);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .nav-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Hero ────────────────────────────────────────────────── */
  .hero {
    background: linear-gradient(
      135deg,
      var(--garden-soil) 0%,
      var(--garden-root) 50%,
      var(--garden-stem) 100%
    );
    color: #fff;
    padding-block: var(--space-2xl);
    text-align: center;
  }

  .hero-title {
    font-family: var(--font-display);
    font-size: var(--step-4);
    margin-block-end: var(--space-md);
    max-width: 18ch;
    margin-inline: auto;
  }

  .hero-subtitle {
    font-family: var(--font-body);
    font-size: var(--step-1);
    color: var(--garden-dew);
    max-width: 48ch;
    margin-inline: auto;
    margin-block-end: var(--space-xl);
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
  }

  /* ── Quick Access Panel ──────────────────────────────────── */
  .quick-access {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-surface);
    border-radius: var(--radius-default);
    box-shadow: var(--shadow-sm);
  }

  .quick-access a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 44px;
    padding: var(--space-sm);
    background: var(--color-surface-raised);
    border-radius: var(--radius-sm);
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
    color: var(--color-primary);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  .quick-access a:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }

  .quick-access a:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
  }

  .quick-access svg {
    width: 24px;
    height: 24px;
  }

  @media (min-width: 1024px) {
    .quick-access {
      display: none;
    }
  }

  /* ── Season Banner ──────────────────────────────────────── */
  .season-banner {
    background: var(--color-accent-light);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-default);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .season-banner-title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--spotlight-dark);
  }

  .season-banner-meta {
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
    color: var(--color-text-soft);
  }

  /* ── Program Card ───────────────────────────────────────── */
  .program-card {
    background: var(--color-surface-raised);
    border-radius: var(--radius-default);
    box-shadow: var(--shadow-md);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  .program-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
  }

  .program-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }

  .program-card-title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--color-text);
  }

  .program-card-description {
    font-size: var(--step-0);
    color: var(--color-text-soft);
    line-height: 1.6;
  }

  .program-card-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
    color: var(--color-text-muted);
    padding-block-start: var(--space-xs);
    border-top: 1px solid var(--color-surface-inset);
  }

  .program-card-meta span {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .program-card-price {
    font-family: var(--font-body-sans);
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--color-primary);
  }

  .program-card-footer {
    margin-block-start: auto;
    padding-block-start: var(--space-sm);
  }

  /* ── Age Badge ──────────────────────────────────────────── */
  .age-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 600;
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }

  /* ── Testimonial ────────────────────────────────────────── */
  .testimonial {
    background: var(--color-accent-light);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 var(--radius-default) var(--radius-default) 0;
    padding: var(--space-lg);
  }

  .testimonial-quote {
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-style: italic;
    color: var(--color-text);
    line-height: 1.7;
    margin-block-end: var(--space-md);
  }

  .testimonial-quote::before {
    content: '\201C';
    font-family: var(--font-display);
    font-size: var(--step-2);
    color: var(--color-accent);
    line-height: 0;
    vertical-align: -0.3em;
    margin-inline-end: 0.1em;
  }

  .testimonial-attribution {
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
    color: var(--color-text-muted);
  }

  .testimonial-attribution strong {
    color: var(--color-text-soft);
    font-weight: 600;
  }

  /* ── Staff Card ─────────────────────────────────────────── */
  .staff-card {
    background: var(--color-surface-raised);
    border-radius: var(--radius-default);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .staff-card-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--color-surface-inset);
  }

  .staff-card-photo-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--color-surface-inset);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
  }

  .staff-card-body {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .staff-card-name {
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--color-text);
  }

  .staff-card-role {
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
    color: var(--color-primary);
    font-weight: 600;
  }

  .staff-card-bio {
    font-size: var(--step-0);
    color: var(--color-text-soft);
    line-height: 1.6;
    margin-block-start: var(--space-xs);
  }

  .staff-card-philosophy {
    font-size: var(--step--1);
    font-style: italic;
    color: var(--color-text-muted);
    border-top: 1px solid var(--color-surface-inset);
    padding-block-start: var(--space-sm);
    margin-block-start: var(--space-sm);
  }

  /* ── Archive Grid ───────────────────────────────────────── */
  .archive-card {
    background: var(--color-surface-raised);
    border-radius: var(--radius-default);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
  }

  .archive-card:hover {
    box-shadow: var(--shadow-md);
  }

  .archive-card-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--color-surface-inset);
  }

  .archive-card-photo-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-surface-inset);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
  }

  .archive-card-body {
    padding: var(--space-md);
  }

  .archive-card-title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--color-text);
    margin-block-end: var(--space-xs);
  }

  .archive-card-year {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--color-text-muted);
    margin-block-end: var(--space-xs);
  }

  .archive-card-description {
    font-size: var(--step--1);
    color: var(--color-text-soft);
    line-height: 1.5;
  }

  /* ── Buttons ────────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 44px;
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-body-sans);
    font-size: var(--step-0);
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    text-decoration: none;
    white-space: nowrap;
  }

  .btn:active {
    transform: scale(0.98);
  }

  .btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
  }

  .btn-primary {
    background: var(--color-primary);
    color: #fff;
  }

  .btn-primary:hover {
    background: var(--color-primary-deep);
  }

  .btn-accent {
    background: var(--color-accent);
    color: var(--spotlight-dark);
  }

  .btn-accent:hover {
    background: var(--color-accent-deep);
    color: #fff;
  }

  .btn-energy {
    background: var(--color-energy);
    color: #fff;
  }

  .btn-energy:hover {
    background: var(--play-deep);
  }

  .btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
  }

  .btn-outline:hover {
    background: var(--color-primary);
    color: #fff;
  }

  .btn-outline-light {
    background: transparent;
    color: #fff;
    border: 2px solid var(--garden-bloom);
  }

  .btn-outline-light:hover {
    background: var(--garden-bloom);
    color: var(--garden-soil);
  }

  /* ── Form Elements ──────────────────────────────────────── */
  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-block-end: var(--space-md);
  }

  .form-label {
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--color-text);
  }

  .form-input,
  .form-textarea,
  .form-select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    min-height: 44px;
    font-family: var(--font-body);
    font-size: var(--step-0);
    color: var(--color-text);
    background: var(--color-surface-raised);
    border: 2px solid var(--color-surface-inset);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .form-input:focus,
  .form-textarea:focus,
  .form-select:focus {
    outline: none;
    border-color: var(--garden-leaf);
    box-shadow: 0 0 0 3px hsla(155, 40%, 40%, 0.15);
  }

  .form-textarea {
    min-height: 120px;
    resize: vertical;
  }

  .form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c5550' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    padding-inline-end: calc(var(--space-md) + 24px);
  }

  /* ── Site Footer ────────────────────────────────────────── */
  .site-footer {
    background: var(--garden-soil);
    color: var(--garden-bloom);
    padding-block: var(--space-2xl) var(--space-xl);
  }

  .site-footer a {
    color: var(--garden-dew);
    transition: color 0.2s ease;
  }

  .site-footer a:hover {
    color: #fff;
  }

  .site-footer a:focus-visible {
    outline: 3px solid var(--garden-bloom);
    outline-offset: 2px;
  }

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

  @media (min-width: 768px) {
    .footer-grid {
      grid-template-columns: 2fr 1fr 1fr;
    }
  }

  .footer-section-title {
    font-family: var(--font-display);
    font-size: var(--step-0);
    color: var(--garden-dew);
    margin-block-end: var(--space-sm);
  }

  .footer-section ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .footer-section li {
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
  }

  .footer-section li a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .footer-bottom {
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-md);
    border-top: 1px solid var(--garden-root);
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
    color: var(--garden-bloom);
    text-align: center;
  }

  /* ── Mobile Sticky Bar ──────────────────────────────────── */
  .mobile-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: var(--garden-root);
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: var(--mobile-bar-h);
    box-shadow: 0 -2px 8px var(--shadow-color);
  }

  .mobile-sticky a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--garden-dew);
    font-family: var(--font-body-sans);
    font-size: 0.75rem;
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
    text-decoration: none;
  }

  .mobile-sticky a:hover {
    background: var(--garden-stem);
  }

  .mobile-sticky a:focus-visible {
    outline: 3px solid var(--garden-bloom);
    outline-offset: 2px;
  }

  .mobile-sticky svg {
    width: 20px;
    height: 20px;
  }

  @media (min-width: 768px) {
    .mobile-sticky {
      display: none;
    }
  }

  /* Add bottom padding on mobile to avoid content hidden by sticky bar */
  @media (max-width: 767px) {
    body {
      padding-block-end: var(--mobile-bar-h);
    }
  }

  /* ── Header Inner (shared template) ──────────────────────── */
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(var(--max-width), 100% - var(--space-lg) * 2);
    margin-inline: auto;
    height: 100%;
  }

  /* ── Main Nav (shared template) ──────────────────────────── */
  .main-nav {
    display: none;
  }

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

  .nav-link {
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
    color: var(--garden-dew);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    transition: background 0.2s ease, color 0.2s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .nav-link:hover,
  .nav-link.active {
    background: var(--garden-root);
    color: #fff;
  }

  .nav-link:focus-visible {
    outline: 3px solid var(--garden-bloom);
    outline-offset: 2px;
  }

  @media (min-width: 768px) {
    .main-nav {
      display: block;
    }
  }

  /* ── Nav Toggle Bars ─────────────────────────────────────── */
  .nav-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nav-toggle-bar + .nav-toggle-bar {
    margin-top: 5px;
  }

  /* ── Footer Inner (shared template) ─────────────────────── */
  .footer-inner {
    width: min(var(--max-width), 100% - var(--space-lg) * 2);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
  }

  .footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--step-0);
    color: var(--garden-dew);
  }

  .footer-brand svg {
    flex-shrink: 0;
  }

  .footer-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
  }

  .footer-link {
    color: var(--garden-dew);
    transition: color 0.2s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .footer-link:hover {
    color: #fff;
  }

  .footer-separator {
    color: var(--garden-bloom);
    opacity: 0.4;
  }

  .footer-legacy {
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
    color: var(--garden-bloom);
    opacity: 0.7;
  }

  /* ── Sticky Button (shared template) ────────────────────── */
  .sticky-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--garden-dew);
    font-family: var(--font-body-sans);
    font-size: 0.75rem;
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    transition: background 0.2s ease;
    text-decoration: none;
  }

  .sticky-btn:hover {
    background: var(--garden-stem);
  }

  .sticky-btn:focus-visible {
    outline: 3px solid var(--garden-bloom);
    outline-offset: 2px;
  }

  .sticky-btn svg {
    width: 20px;
    height: 20px;
  }

  /* ── Age Band Nav (programs page) ───────────────────────── */
  .age-band-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-end: var(--space-2xl);
    padding-block-end: var(--space-lg);
    border-bottom: 1px solid var(--color-surface-inset);
  }

  .age-band-link {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    min-height: 44px;
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
    transition: background 0.2s ease, color 0.2s ease;
  }

  .age-band-link:hover {
    background: var(--color-primary);
    color: #fff;
  }

  .age-band-link:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* ── Age Band Section (programs page) ───────────────────── */
  .age-band-section {
    margin-block-end: var(--space-2xl);
    scroll-margin-top: calc(var(--header-h) + var(--space-md));
  }

  .age-band-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-block-end: var(--space-md);
  }

  .age-band-header h2 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    color: var(--color-text);
  }

  .age-band-intro {
    font-size: var(--step-0);
    color: var(--color-text-soft);
    max-width: 65ch;
    line-height: 1.7;
    margin-block-end: var(--space-lg);
  }

  /* ── Program Cards Grid ─────────────────────────────────── */
  .program-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  @media (min-width: 768px) {
    .program-cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* ── Status Badge (season page) ─────────────────────────── */
  .status-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-body-sans);
    font-size: var(--step--1);
    font-weight: 600;
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }

  .status-open {
    background: hsla(110, 35%, 50%, 0.15);
    color: var(--signal-success);
  }

  .status-waitlist {
    background: hsla(35, 55%, 55%, 0.15);
    color: var(--signal-warning);
  }

  .status-closed {
    background: hsla(0, 40%, 50%, 0.15);
    color: var(--signal-critical);
  }

  .status-upcoming {
    background: var(--color-accent-light);
    color: var(--color-accent-deep);
  }

  /* ── Season Banner Hero (season page) ───────────────────── */
  .season-banner-hero {
    background: linear-gradient(
      135deg,
      var(--garden-soil) 0%,
      var(--garden-root) 50%,
      var(--garden-stem) 100%
    );
    color: #fff;
    padding-block: var(--space-2xl);
    text-align: center;
  }

  /* ── Dates List (season page) ───────────────────────────── */
  .dates-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .dates-list li {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    padding-block-end: var(--space-md);
    border-bottom: 1px solid var(--color-surface-inset);
    font-size: var(--step-0);
    color: var(--color-text-soft);
  }

  .dates-list li:last-child {
    border-bottom: none;
  }

  .dates-list time {
    font-family: var(--font-body-sans);
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
    min-width: 7ch;
  }
}

/* ── Utilities ────────────────────────────────────────────── */
@layer 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;
  }

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

  .text-balance {
    text-wrap: balance;
  }

  .font-display {
    font-family: var(--font-display);
  }

  .font-sans {
    font-family: var(--font-body-sans);
  }

  .mt-sm { margin-block-start: var(--space-sm); }
  .mt-md { margin-block-start: var(--space-md); }
  .mt-lg { margin-block-start: var(--space-lg); }
  .mt-xl { margin-block-start: var(--space-xl); }

  .mb-sm { margin-block-end: var(--space-sm); }
  .mb-md { margin-block-end: var(--space-md); }
  .mb-lg { margin-block-end: var(--space-lg); }
  .mb-xl { margin-block-end: var(--space-xl); }

  /* Global focus indicator */
  :focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
  }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .site-header,
  .site-footer,
  .mobile-sticky,
  .mobile-nav,
  .nav-overlay,
  .nav-toggle,
  .quick-access,
  .skip-link {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
    padding: 0;
  }

  .hero {
    background: none !important;
    color: #000;
    padding-block: 1rem;
  }

  .hero-subtitle {
    color: #333;
  }

  .program-card,
  .testimonial,
  .staff-card,
  .archive-card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}