/* =====================================================================
   Active Chil Art — main.css  (the ONLY stylesheet)

   Phase 1: tokens, reset, base and the few components the foundation
   pages use. Phase 2 extends this same file with the full design system.

   Cascade layers: later layers win regardless of selector strength,
   so utilities always beat components, components beat base, etc.
   ===================================================================== */

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

/* ---------------------------------------------------------------------
   TOKENS — the palette agreed with the client
   --------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Brand teals (from the logo) */
    --clr-ink:        #0b2f3a;  /* body text, footer          14.2:1 on white */
    --clr-teal-800:   #00566b;  /* links, hover                8.3:1 */
    --clr-teal-700:   #006a80;  /* buttons, white text         6.2:1 */
    --clr-brand:      #0188a5;  /* large text, icons           4.2:1 */
    --clr-logo:       #0394ba;  /* hero, logo tile             3.5:1 — large text only */
    --clr-lagoon:     #00b7ca;  /* accents ON DARK only */
    --clr-mist:       #6ccaca;  /* decorative, tints */

    /* Warm accent */
    --clr-marigold:   #e8a33d;  /* highlights, focus ring on dark — never white text */
    --clr-terracotta: #c2410c;  /* "Book a performance" CTA   5.2:1 with white */

    /* Neutrals */
    --clr-cream:      #fdfbf7;  /* page background */
    --clr-sand:       #f6f1e9;  /* alternate sections */
    --clr-white:      #ffffff;

    /* Roles (components use these, not the raw colours) */
    --bg:             var(--clr-cream);
    --bg-alt:         var(--clr-sand);
    --text:           var(--clr-ink);
    --text-muted:     color-mix(in srgb, var(--clr-ink) 75%, var(--clr-cream));
    --link:           var(--clr-teal-800);
    --link-hover:     var(--clr-teal-700);
    --focus:          var(--clr-teal-800);
    --border:         color-mix(in srgb, var(--clr-ink) 14%, transparent);

    /* Type */
    --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

    --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem);
    --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --step-1:  clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
    --step-2:  clamp(1.45rem, 1.25rem + 0.9vw, 1.95rem);
    --step-3:  clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
    --step-4:  clamp(2.1rem, 1.5rem + 2.8vw, 3.9rem);

    /* Space */
    --space-2xs: 0.25rem;
    --space-xs:  0.5rem;
    --space-s:   1rem;
    --space-m:   1.5rem;
    --space-l:   clamp(2rem, 1.5rem + 2vw, 3rem);
    --space-xl:  clamp(3rem, 2rem + 4vw, 5.5rem);

    --radius:    0.5rem;
    --radius-l:  1rem;
    --container: 72rem;
    --measure:   65ch;
  }
}

/* ---------------------------------------------------------------------
   RESET — small, modern
   --------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-block-size: 100dvh; }
  img, picture, video, svg, canvas { display: block; max-inline-size: 100%; block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
  h1, h2, h3, h4 { text-wrap: balance; }
  p { text-wrap: pretty; }
}

/* ---------------------------------------------------------------------
   BASE
   --------------------------------------------------------------------- */
@layer base {
  html {
    color-scheme: light;
    scroll-behavior: smooth;
  }

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

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    display: flex;
    flex-direction: column;
  }

  main { flex: 1; }
  main:focus { outline: none; } /* target of the skip link */

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    color: var(--clr-ink);
  }
  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-2); }

  a {
    color: var(--link);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
  }
  a:hover { color: var(--link-hover); text-decoration-thickness: 0.14em; }

  /* One visible, high-contrast focus style everywhere (WCAG 2.4.7 / 2.4.13) */
  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
  }

  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--bg-alt);
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
  }
}

/* ---------------------------------------------------------------------
   LAYOUT
   --------------------------------------------------------------------- */
@layer layout {
  .container {
    inline-size: min(100% - 2 * var(--space-m), var(--container));
    margin-inline: auto;
  }

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

  .prose > * + * { margin-block-start: var(--space-s); }
  .prose { max-inline-size: var(--measure); }
  /* "container prose" together: full container width, readable line length */
  .container.prose { max-inline-size: none; }
  .container.prose > * { max-inline-size: var(--measure); }

  .section--alt { background: var(--bg-alt); }

  /* Repeating layouts */
  .stack > * + * { margin-block-start: var(--space-s); }
  .grid {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }

  /* Header — turquoise, the logo's own colour. The logo tile shares the
     background, so only the white dancer shows. Text is ink (5.8:1). */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: var(--clr-lagoon);
    color: var(--clr-ink);
    box-shadow: 0 1px 0 rgb(11 47 58 / 0.15);
  }
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    min-block-size: 4.5rem;
  }
  .site-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--clr-ink);
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    text-decoration: none;
    &:hover { color: var(--clr-ink); text-decoration: underline; }
  }
  .site-header :focus-visible,
  .site-nav :focus-visible { outline-color: var(--clr-ink); }

  /* Nav — mobile: popover panel; wide screens: inline row */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: 2.75rem;
    padding-inline: var(--space-s);
    background: transparent;
    color: var(--clr-ink);
    border: 2px solid var(--clr-ink);
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
  }
  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block;
    inline-size: 1.1rem;
    block-size: 2px;
    background: currentColor;
    border-radius: 2px;
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after { content: ""; position: absolute; }
  .nav-toggle__bars::before { inset-block-start: -6px; }
  .nav-toggle__bars::after  { inset-block-start: 6px; }

  .site-nav {
    /* Popover (mobile): full-width panel under the header */
    inset: 4.5rem 0 auto;
    inline-size: 100%;
    max-inline-size: none;
    margin: 0;
    padding: var(--space-m);
    border: 0;
    background: var(--clr-lagoon);
    color: var(--clr-ink);
    & ul { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
    & a:not(.button) {
      display: block;
      padding: var(--space-xs) 0;
      color: var(--clr-ink);
      font-weight: 500;
      text-decoration: none;
      font-size: var(--step-1);
    }
    & a:not(.button):hover { text-decoration: underline; }
    & a[aria-current="page"] {
      font-weight: 700;
      text-decoration: underline;
      text-decoration-thickness: 3px;
      text-underline-offset: 0.4em;
    }
  }
  .site-nav::backdrop { background: rgb(11 47 58 / 0.5); }

  @media (width >= 48rem) {
    .nav-toggle { display: none; }
    .site-nav {
      /* Author styles beat the browser's popover "display:none" */
      display: block;
      position: static;
      inline-size: auto;
      padding: 0;
      background: none;
      & ul { grid-auto-flow: column; align-items: center; gap: var(--space-m); }
      & a:not(.button) { font-size: var(--step-0); }
    }
  }

  /* Old browsers without popover (pre-2024): hide the button, show the links */
  @supports not selector(:popover-open) {
    .nav-toggle { display: none; }
    .site-header__inner { flex-wrap: wrap; }
    .site-nav { position: static; inline-size: 100%; padding: 0 0 var(--space-s); background: none; }
    .site-nav ul { grid-auto-flow: column; justify-content: start; gap: var(--space-m); }
  }

  /* Footer */
  .site-footer {
    background: var(--clr-ink);
    color: var(--clr-cream);
    padding-block: var(--space-xl) var(--space-m);
    & a { color: var(--clr-mist); }
    & a:hover { color: var(--clr-white); }
    & :focus-visible { outline-color: var(--clr-marigold); }
  }
  .site-footer__grid {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }
  .site-footer__title { font-size: var(--step-1); color: var(--clr-white); }
  .site-footer__tag { font-family: var(--font-display); font-size: var(--step-1); }
  .site-footer__base {
    margin-block-start: var(--space-l);
    padding-block-start: var(--space-s);
    border-block-start: 1px solid color-mix(in srgb, var(--clr-cream) 20%, transparent);
  }
}

/* ---------------------------------------------------------------------
   COMPONENTS
   --------------------------------------------------------------------- */
@layer components {
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-s);
    inset-block-start: -10rem;
    z-index: 100;
    background: var(--clr-marigold);
    color: var(--clr-ink);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius);
    font-weight: 600;
  }
  .skip-link:focus { inset-block-start: var(--space-s); }

  .eyebrow {
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-teal-800);
  }

  .lead { font-size: var(--step-1); color: var(--text-muted); }

  .button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: 2.75rem;               /* 44px touch target */
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    background: var(--clr-teal-700);
    color: var(--clr-white);
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
  }
  .button:hover { background: var(--clr-teal-800); color: var(--clr-white); }
  .button--cta { background: var(--clr-terracotta); }
  .button--cta:hover { background: #9a3412; }
  .button--ghost {
    background: transparent;
    color: inherit;
    box-shadow: inset 0 0 0 2px currentColor;
  }
  .button--ghost:hover { background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; }

  .contact-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-xs);
  }

  /* Local /_status page */
  .status-table {
    inline-size: 100%;
    margin-block-start: var(--space-m);
    border-collapse: collapse;
    font-size: var(--step--1);
  }
  .status-table th,
  .status-table td {
    text-align: start;
    padding: var(--space-xs) var(--space-s);
    border-block-end: 1px solid var(--border);
    vertical-align: top;
  }
  .status-table thead th { background: var(--bg-alt); }
  .status-table tr.is-ok td:nth-child(2)   { color: #166534; font-weight: 600; }
  .status-table tr.is-fail td:nth-child(2) { color: #b91c1c; font-weight: 600; }
}

/* Desktop email helper (see main.js) */
@layer components {
  .mail-help {
    position: fixed;
    z-index: 200;
    inset: auto var(--space-m) var(--space-m) auto;
    max-inline-size: min(26rem, calc(100% - 2 * var(--space-m)));
    padding: var(--space-m) var(--space-l) var(--space-m) var(--space-m);
    background: var(--clr-ink);
    color: var(--clr-white);
    border-radius: var(--radius-l);
    box-shadow: 0 12px 40px rgb(11 47 58 / 0.35);
    & > * + * { margin-block-start: var(--space-xs); }
    & .button { min-block-size: 2.5rem; padding-block: 0.3rem; color: var(--clr-white); }
    & :focus-visible { outline-color: var(--clr-marigold); }
  }
  .mail-help__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
  .mail-help__close {
    position: absolute;
    inset: var(--space-2xs) var(--space-2xs) auto auto;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    background: none;
    border: 0;
    color: var(--clr-white);
    font-size: 1.5rem;
    cursor: pointer;
  }
}

/* ---------------------------------------------------------------------
   PAGES — home
   --------------------------------------------------------------------- */
@layer components {
  .cluster { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; }

  /* Hero
     Phones:       photo (portrait) on top, text on a dark block below.
     Wide screens: photo fills the hero, text sits on the dark left side.
     The media is absolutely positioned, so it can never spill outside. */
  .hero {
    background: var(--clr-ink);
    color: var(--clr-white);
  }
  .hero__frame {
    position: relative;
    aspect-ratio: 1080 / 1349;
    overflow: hidden;
  }
  .hero__media,
  .hero__media img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: cover;
    object-position: center 30%;
  }
  .hero__video { opacity: 0; transition: opacity 0.8s ease; }
  .hero__video.is-playing { opacity: 1; }

  .hero__pause,
  .hero__credit {
    position: absolute;
    z-index: 2;
    inset-block-end: var(--space-s);
    margin: 0;
    font-size: var(--step--1);
  }
  .hero__pause {
    inset-inline-start: var(--space-s);
    padding: var(--space-2xs) var(--space-s);
    background: rgb(11 47 58 / 0.75);
    color: var(--clr-white);
    border: 1px solid var(--clr-mist);
    border-radius: 999px;
    cursor: pointer;
  }
  .hero__credit {
    inset-inline-end: var(--space-s);
    padding: 0.1rem 0.5rem;
    background: rgb(11 47 58 / 0.6);
    border-radius: 0.25rem;
  }

  .hero__content {
    position: relative;
    z-index: 1;
    padding-block: var(--space-l) var(--space-xl);
    & .container > * + * { margin-block-start: var(--space-s); }
    & h1 { color: var(--clr-white); max-inline-size: 14ch; }
    & .eyebrow { color: var(--clr-marigold); }
    & .lead { color: var(--clr-cream); max-inline-size: 40ch; }
    & .cluster { margin-block-start: var(--space-m); }
    & :focus-visible { outline-color: var(--clr-marigold); }
  }

  @media (width >= 48rem) {
    .hero {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      /* 51.67vw = the banner's own 1240/2400 proportion, capped by the window */
      block-size: clamp(30rem, 51.67vw, 85svh);
    }
    .hero__frame {
      position: absolute;
      inset: 0;
      aspect-ratio: auto;
    }
    .hero__media,
    .hero__media img { object-position: center 70%; }
    .hero__frame::after {                 /* scrim: text side stays readable */
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(to right, rgb(11 47 58 / 0.92) 0%, rgb(11 47 58 / 0.7) 35%, transparent 65%);
      pointer-events: none;
    }
    .hero__content { inline-size: 100%; padding-block: var(--space-l); }
  }

  .pillar {
    padding: var(--space-m);
    border-block-start: 4px solid var(--clr-logo);
    background: var(--clr-white);
    border-radius: 0 0 var(--radius) var(--radius);
    & > * + * { margin-block-start: var(--space-xs); }
    &:nth-child(2) { border-color: var(--clr-mist); }
    &:nth-child(3) { border-color: var(--clr-marigold); }
  }

  /* Founder: photo + text */
  .founder {
    display: grid;
    gap: var(--space-l);
    align-items: center;
  }
  @media (width >= 48rem) {
    .founder { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-xl); }
  }
  .founder__photo {
    margin: 0;
    & img {
      inline-size: 100%;
      border-radius: var(--radius-l);
      box-shadow: 14px 14px 0 var(--clr-marigold);   /* echoes her costume */
    }
    & figcaption {
      margin-block-start: var(--space-m);
      font-size: var(--step--1);
      font-style: italic;
      color: var(--text-muted);
    }
  }
  .founder__text > * + * { margin-block-start: var(--space-l); }

  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: var(--space-s);
    & div { padding: var(--space-m); background: var(--clr-white); border-radius: var(--radius); }
    & dt { font-size: var(--step--1); color: var(--text-muted); }
    & dd { order: -1; margin: 0; font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; color: var(--clr-teal-800); }
    & div { display: flex; flex-direction: column; }
  }

  .venues {
    list-style: none;
    padding: 0;
    margin-block-start: var(--space-s);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
    font-family: var(--font-display);
    font-size: var(--step-1);
    & li:not(:last-child)::after { content: "·"; margin-inline-start: var(--space-m); color: var(--clr-marigold); }
  }

  .band {
    background: var(--clr-teal-700);
    color: var(--clr-white);
    & h2 { color: var(--clr-white); }
    & .lead { color: var(--clr-cream); }
    & :focus-visible { outline-color: var(--clr-marigold); }
  }
}

/* ---------------------------------------------------------------------
   PAGES — the Ensemble
   --------------------------------------------------------------------- */
@layer components {
  .page-head {
    padding-block: var(--space-xl) var(--space-l);
    background: var(--bg-alt);
    & .prose > * + * { margin-block-start: var(--space-s); }
  }

  .founder--page { align-items: start; }

  /* Grid of people: as many 15rem+ columns as fit; add people freely */
  .members {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-l) var(--space-m);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  }

  .member {
    display: flex;
    flex-direction: column;
    background: var(--clr-white);
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: 0 1px 0 var(--border), 0 0 0 1px var(--border);
  }
  .member__photo {
    aspect-ratio: 4 / 5;                     /* every photo, same shape */
    background: var(--clr-mist);
    & img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  }
  .member__initials {                         /* placeholder when no photo */
    display: grid;
    place-items: center;
    block-size: 100%;
    background:
      radial-gradient(circle at 30% 25%, rgb(255 255 255 / 0.35), transparent 60%),
      var(--clr-logo);
    color: var(--clr-white);
    font-family: var(--font-display);
    font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
    letter-spacing: 0.05em;
  }
  .member:nth-child(3n+2) .member__initials { background-color: var(--clr-teal-700); }
  .member:nth-child(3n+3) .member__initials { background-color: var(--clr-brand); }

  .member__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-m);
    gap: var(--space-2xs);
  }
  .member__name { font-size: var(--step-1); }
  .member__role {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--clr-teal-800);
  }
  .member__preview {
    margin-block-start: var(--space-xs);
    font-size: var(--step--1);
    color: var(--text-muted);
    display: -webkit-box;                    /* clamp to 4 lines: cards stay even */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }
  .is-quote { font-style: italic; }
  .member__preview.is-quote::before { content: "“"; }

  .member__more {
    margin-block-start: auto;                /* always sits at the bottom */
    padding-block-start: var(--space-s);
    align-self: start;
    background: none;
    border: 0;
    padding-inline: 0;
    color: var(--link);
    font-weight: 600;
    text-align: start;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
    &:hover { color: var(--link-hover); }
  }

  /* Full bio panel (popover): centred, scrolls if long */
  .bio-panel {
    margin: auto;                            /* centre (the reset removed the browser's) */
    inline-size: min(42rem, 100% - 2rem);
    max-block-size: min(85dvh, 48rem);
    padding: 0;
    border: 0;
    border-radius: var(--radius-l);
    background: var(--clr-cream);
    color: var(--text);
    box-shadow: 0 20px 60px rgb(11 47 58 / 0.35);
    overflow: auto;
    overscroll-behavior: contain;
  }
  .bio-panel::backdrop { background: rgb(11 47 58 / 0.6); }

  /* Small phones: photo beside the text, so the list stays short */
  @media (width < 34rem) {
    .member { flex-direction: row; }
    .member__photo { flex: 0 0 38%; min-inline-size: 0; align-self: start; }
    .member__photo picture { display: block; block-size: 100%; }
    .member__initials { font-size: 2.25rem; }
    .member__body { padding: var(--space-s); }
    .member__preview { -webkit-line-clamp: 3; line-clamp: 3; }
  }
  .bio-panel__head {
    position: sticky;
    inset-block-start: 0;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: var(--space-s);
    padding: var(--space-l) var(--space-l) var(--space-m);
    background: var(--clr-cream);
    border-block-end: 3px solid var(--clr-marigold);
    & h3 { font-size: var(--step-2); }
  }
  .bio-panel__close {
    flex-shrink: 0;
    min-block-size: 2.75rem;
    padding-inline: var(--space-s);
    background: var(--clr-ink);
    color: var(--clr-white);
    border: 0;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
  }
  .bio-panel__text {
    padding: var(--space-l) var(--space-l) var(--space-xl);
    line-height: 1.8;
    & > * + * { margin-block-start: var(--space-m); }
  }
  .bio-panel__head .member__role { margin-block-start: var(--space-2xs); }
}

/* ---------------------------------------------------------------------
   PAGES — Events
   --------------------------------------------------------------------- */
@layer components {
  .badge {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--clr-sand);
    color: var(--clr-teal-800);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  /* Frame: whole photo, any shape; blurred copy fills the gaps */
  .frame {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--clr-ink);
  }
  .frame__bg {
    position: absolute;
    inset: -10%;
    inline-size: 120%;
    block-size: 120%;
    max-inline-size: none;
    object-fit: cover;
    filter: blur(24px) brightness(0.65) saturate(1.2);
  }
  .frame__fg,
  .frame__fg img {
    position: relative;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }
  .frame--empty {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-xs);
    background: linear-gradient(135deg, var(--clr-lagoon), var(--clr-teal-700));
    color: var(--clr-white);
    font-family: var(--font-display);
    font-size: var(--step-1);
    & img { border-radius: var(--radius); }
  }

  /* Event cards */
  .event-grid {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  }
  .event-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--clr-white);
    border-radius: var(--radius-l);
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--border);
    transition: box-shadow 0.2s ease;
    &:hover { box-shadow: 0 0 0 2px var(--clr-brand); }
    &:focus-within { box-shadow: 0 0 0 3px var(--focus); }
  }
  .event-card__body {
    padding: var(--space-s) var(--space-m) var(--space-m);
    & > * + * { margin-block-start: var(--space-2xs); }
  }
  .event-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--clr-teal-800);
  }
  .event-card__title {
    font-size: var(--step-1);
    & a { color: var(--clr-ink); text-decoration: none; }
    & a::after { content: ""; position: absolute; inset: 0; }   /* whole card clickable */
    & a:focus-visible { outline: none; }
  }
  .event-card__place { font-size: var(--step--1); }
  .event-card__type { font-size: var(--step--1); color: var(--text-muted); }

  /* Filters (plain form: works without JavaScript) */
  .filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-s) var(--space-m);
    padding: var(--space-m);
    background: var(--clr-white);
    border-radius: var(--radius-l);
    & label { display: grid; gap: var(--space-2xs); font-size: var(--step--1); font-weight: 600; }
    & select {
      min-block-size: 2.75rem;
      min-inline-size: 11rem;
      padding-inline: var(--space-s);
      border: 1px solid color-mix(in srgb, var(--clr-ink) 35%, transparent);
      border-radius: var(--radius);
      background: var(--clr-cream);
    }
  }

  .pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s);
    & a { font-weight: 600; }
  }
  .pager--events a {
    display: grid;
    max-inline-size: 45%;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: var(--step-1);
    &[rel="next"] { margin-inline-start: auto; text-align: end; }
    & .small { font-family: var(--font-body); color: var(--text-muted); }
  }

  /* Event page */
  .back-link::before { content: "← "; }
  .event-head { padding-block-end: calc(var(--space-l) * 2); }   /* room for the cover's overlap */
  .event-head__meta { font-weight: 600; color: var(--clr-teal-800); }
  .event-cover {
    margin-block-start: calc(var(--space-l) * -1);
    & a { display: block; border-radius: var(--radius-l); overflow: hidden; }
    & .frame { aspect-ratio: 16 / 10; max-block-size: 70svh; inline-size: 100%; }
  }

  /* Justified gallery: rows fill the width, every photo whole,
     each row the same height. --ar (width/height) is set per photo. */
  .gallery {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    --row: 7rem;
    &::after { content: ""; flex-grow: 999; }          /* stops the last row stretching */
  }
  @media (width >= 48rem) { .gallery { --row: 15rem; } }
  .gallery__item {
    flex-grow: var(--ar);
    flex-basis: calc(var(--ar) * var(--row));
    aspect-ratio: var(--ar);
    /* never wider than 100%, never taller than two rows — still uncropped */
    max-inline-size: min(100%, calc(var(--ar) * var(--row) * 2));
    & a, & picture, & img { display: block; inline-size: 100%; block-size: 100%; }
    & img { object-fit: cover; border-radius: var(--radius); transition: opacity 0.2s ease; }
    & a:hover img { opacity: 0.85; }
  }

  /* Lightbox */
  .lightbox {
    inline-size: 100vw;
    block-size: 100dvh;
    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #05141a;
    color: var(--clr-white);
    & img {
      position: absolute;
      inset: 3.5rem 0.5rem;
      margin: auto;
      max-inline-size: calc(100% - 1rem);
      max-block-size: calc(100% - 7rem);
      object-fit: contain;
    }
  }
  .lightbox::backdrop { background: transparent; }
  .lightbox__count { position: absolute; inset: 1rem auto auto 1rem; font-size: var(--step--1); }
  .lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.15);
    color: var(--clr-white);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    &:hover { background: rgb(255 255 255 / 0.3); }
    &:focus-visible { outline-color: var(--clr-marigold); }
  }
  .lightbox__close { inset: 0.5rem 0.5rem auto auto; }
  .lightbox__prev  { inset: auto auto 1rem 1rem; }
  .lightbox__next  { inset: auto 1rem 1rem auto; }
  @media (width >= 48rem) {
    .lightbox__prev { inset: 50% auto auto 1rem; translate: 0 -50%; }
    .lightbox__next { inset: 50% 1rem auto auto; translate: 0 -50%; }
  }
}

/* ---------------------------------------------------------------------
   ADMIN
   --------------------------------------------------------------------- */
@layer components {
  .admin-nav {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    & a { color: var(--clr-ink); font-weight: 600; }
    & .button--ghost { min-block-size: 2.5rem; padding-block: 0.3rem; }
  }

  .login {
    display: grid;
    gap: var(--space-xs);
    max-inline-size: 24rem;
    margin-inline: auto;
    padding: var(--space-l);
    background: var(--clr-white);
    border-radius: var(--radius-l);
    box-shadow: 0 0 0 1px var(--border);
    & h1 { font-size: var(--step-3); margin-block-end: var(--space-s); }
    & label { font-weight: 600; margin-block-start: var(--space-xs); }
    & .button { margin-block-start: var(--space-m); justify-content: center; }
  }

  /* Shared form fields (admin) */
  .admin input[type="text"],
  .admin input[type="password"],
  .admin input[type="url"],
  .admin input[type="date"],
  .admin input[type="number"],
  .admin select,
  .admin textarea {
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--clr-ink) 40%, transparent);
    border-radius: var(--radius);
    background: var(--clr-cream);
  }

  .notice {
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--clr-lagoon) 18%, white);
    border-inline-start: 4px solid var(--clr-teal-700);
  }
  .notice--error {
    background: #fdecea;
    border-color: #b42318;
    color: #7a1a12;
  }

  .flash { padding-block-start: var(--space-m); }
  .admin-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-s); }
  .admin-nav { flex-wrap: wrap; justify-content: end; }

  .table-wrap { overflow-x: auto; background: var(--clr-white); border-radius: var(--radius-l); }
  .admin-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--step--1);
    & th, & td { padding: var(--space-xs) var(--space-s); text-align: start; border-block-end: 1px solid var(--border); vertical-align: top; }
    & thead th { background: var(--bg-alt); white-space: nowrap; }
    & tbody th { font-weight: 600; }
    & tbody th .small { display: block; font-weight: 400; color: var(--text-muted); }
    & tbody tr:hover { background: var(--clr-cream); }
  }

  .admin-form {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    padding: var(--space-l);
    background: var(--clr-white);
    border-radius: var(--radius-l);
    box-shadow: 0 0 0 1px var(--border);
  }
  .field { display: grid; gap: var(--space-2xs); align-content: start; border: 0; padding: 0; margin: 0; }
  .field--wide { grid-column: 1 / -1; }
  .field > label:not(.check), .field legend { font-weight: 600; }
  .hint { display: block; font-size: var(--step--1); font-weight: 400; color: var(--text-muted); }
  .check { display: flex; align-items: center; gap: var(--space-xs); font-weight: 400; }
  .check input { inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--clr-teal-700); }
  .check--danger { color: #b42318; }
  .field-error { color: #b42318; font-size: var(--step--1); font-weight: 600; }
  [aria-invalid="true"] { border-color: #b42318 !important; border-width: 2px !important; }

  .banner-preview { inline-size: 100%; aspect-ratio: 2400 / 1240; object-fit: cover; border-radius: var(--radius); background: var(--bg-alt); }
  .banner-preview--tall { inline-size: 9rem; aspect-ratio: 4 / 5; }

  .uploader {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-m);
    background: var(--clr-white);
    border: 2px dashed color-mix(in srgb, var(--clr-teal-700) 50%, transparent);
    border-radius: var(--radius-l);
    & > label { font-weight: 600; }
    & .button { justify-self: start; }
  }
  .uploader__progress { list-style: none; padding: 0; font-size: var(--step--1); & .is-error { color: #b42318; font-weight: 600; } }

  .photo-admin {
    list-style: none;
    padding: 0;
    margin-block: var(--space-m);
    display: grid;
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  }
  .photo-admin__item {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-xs);
    background: var(--clr-white);
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px var(--border);
    cursor: grab;
    font-size: var(--step--1);
    & img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--clr-ink); border-radius: calc(var(--radius) - 2px); }
    & label:not(.check) { display: grid; gap: 2px; font-weight: 600; }
    & input[type="number"] { inline-size: 5rem; min-block-size: 2.25rem; }
    & input[type="text"] { min-block-size: 2.25rem; font-size: var(--step--1); }
    &:has(input[name="cover"]:checked) { box-shadow: 0 0 0 3px var(--clr-marigold); }
    &:has(input[name="delete[]"]:checked) { opacity: 0.5; }
    &.is-dragging { opacity: 0.4; }
  }

  .danger-zone {
    display: grid;
    gap: var(--space-s);
    justify-items: start;
    padding: var(--space-m);
    border: 2px solid #f1b8b2;
    border-radius: var(--radius-l);
    & h2 { font-size: var(--step-1); }
  }

  /* Honeypot: off-screen, not display:none (some bots skip hidden fields) */
  .hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; overflow: hidden; }
}

/* ---------------------------------------------------------------------
   UTILITIES
   --------------------------------------------------------------------- */
@layer utilities {
  .small { font-size: var(--step--1); }
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}