/*
 * blocks.css — Carnival of the Commons (prototype)
 * Section blocks for Home + Common Crowd, rebuilt from Figma wireframes (14 Jun 2026).
 * Day-to-night arc: warm cream (top) → fluoro jolts → Night Ink (bottom).
 * All values from tokens.css. Block styles migrate to assets/css/components/ once locked.
 */

/* ── Page base — the day starts warm ─────────────────────────────────────── */

body.page-home,
body.page-crowd {
    background-color: var(--color-night-ink-dk);
    color: var(--color-text-primary);
}

/* ── Hero scroll-reveal wiring ───────────────────────────────────────────── */
/* Home opens on the logo only: curtain closed (--hero-p 0), nav hidden (--nav-reveal 0).
   prototype.js scrubs both on scroll. */
.page-home { --hero-p: 0; --nav-reveal: 0; }
@media (prefers-reduced-motion: reduce) {
    .page-home { --hero-p: 1; --nav-reveal: 1; }
}
.page-home .site-header {
    position: fixed;                 /* don't reserve flow space — hero fills the viewport */
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(calc((var(--nav-reveal, 1) - 1) * 100%));
    opacity: var(--nav-reveal, 1);
    will-change: transform, opacity;
}
/* Carousel is the natural next section, on the same pink as the hero it follows.
   z-index:2 lifts it above the hero (z-index:1) and the negative margin pulls it up
   into the hero's tail, so the rotating panels run OUT of the section and OVER the
   sunburst instead of being hidden behind the hero (which read as a top clip). */
.page-home .block-carousel {
    position: relative;
    z-index: 2;
    margin-top: -16vh;
    padding-top: 0;                 /* keep the top open so panels break over the hero */
    padding-bottom: var(--space-20);/* more space before the marquee/statement below */
    background-color: var(--color-pink-velvet-dk);
}
/* The 3D carousel is a desktop showpiece — dropped entirely on mobile (the rotating
   panels also overflowed the viewport sides). The static hero flows straight into
   the marquee/statement below, both on the same pink. */
@media (max-width: 768px) {
    .page-home .block-carousel { display: none; }
}
/* Home ticker on the deep pink-velvet: override the shared .theme-pink (bright pink
   + dark ink) so the band matches the hero/carousel. White text for contrast on the
   darker ground; scoped to the home page so other .theme-pink sections are untouched. */
.page-home .marquee {
    background-color: var(--color-pink-velvet-dk);
    color: #fff;
}

/* Headings + display type inherit their section's ink colour, overriding the
   dark-theme defaults in base.css so light sections read correctly. */
[class*="theme-"] :is(h1, h2, h3, h4, h5, h6),
[class*="theme-"] .editorial,
[class*="theme-"] .display,
[class*="theme-"] .display--h1,
[class*="theme-"] .display--h2,
[class*="theme-"] .display--h3 {
    color: inherit;
}

/* ── Editorial heading — big, warm, bookish Besley (not Circus Heavy) ─────── */

.editorial {
    font-family: var(--font-display-alt);   /* Citrus Gothic — section headlines */
    font-weight: 400;
    font-size: var(--text-editorial);
    line-height: 1.0;
    letter-spacing: 0.005em;
}

/* Citrus Gothic callout — condensed, ink-textured display voice for callouts */
.display-alt {
    font-family: var(--font-display-alt);
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* ── Day-to-night theme surfaces ─────────────────────────────────────────── */

/*
 * Moody / nocturnal palette (15 Jun redirection): ink tones are the backdrop
 * throughout; off-white is copy; Fluoro Green is the accent (14:1 on ink).
 * Fluoro and Pink are NOT section washes — they are bright bills pasted on the
 * ink wall (see .bill). Orange retired to a rare warm spark.
 */
.theme-day          { background-color: var(--color-night-ink-dk); color: var(--color-text-primary); }
.theme-day-rich     { background-color: #1A2C37;                   color: var(--color-text-primary); }
.theme-day-cool     { background-color: #1C303C;                   color: var(--color-text-primary); }
.theme-orange       { background-color: var(--color-night-ink);    color: var(--color-fluoro-green); }
.theme-fluoro       { background-color: var(--color-fluoro-green); color: var(--color-night-ink-dk); }
.theme-pink         { background-color: var(--color-pink-velvet-br); color: var(--color-night-ink-dk); }
.theme-dusk         { background-color: var(--color-night-ink-dk); color: var(--color-fluoro-green); }
.theme-twilight     { background-color: var(--color-night-ink);    color: var(--color-text-primary); }
.theme-twilight-deep{ background-color: #1C303C;                   color: var(--color-text-primary); }
.theme-night        { background-color: var(--color-night-ink-dk); color: var(--color-text-primary); }

/* ── Grain / overprint texture — fluoro stock, not a UI block ─────────────── */

.is-grain { position: relative; isolation: isolate; }
.is-grain::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}
/* Lift only the content wrappers above the texture — never the absolutely
   positioned decorative children (sunburst, media, scroll, floats). */
.is-grain > .container,
.is-grain > .block-beat__text { position: relative; z-index: 1; }

/* ── Button extensions (provisional, sharp print radii) ──────────────────── */

.btn--ink {
    background-color: var(--color-night-ink-dk);
    border-color: var(--color-night-ink-dk);
    color: var(--color-day-cream);
}
.btn--ink:hover,
.btn--ink:focus-visible {
    background-color: var(--color-night-ink);
    border-color: var(--color-night-ink);
    opacity: 1;
}

.btn--fluoro {
    background-color: var(--color-fluoro-green);
    border-color: var(--color-fluoro-green);
    color: var(--color-night-ink-dk);
}
.btn--fluoro:hover,
.btn--fluoro:focus-visible {
    background-color: var(--color-night-ink-dk);
    border-color: var(--color-fluoro-green);
    color: var(--color-fluoro-green);
    opacity: 1;
}

.btn--small {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
}

/* ── Split navigation — left links · centre logo · right actions ─────────── */

.site-header--split .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-3);
}
.site-header--split .site-nav--left { justify-self: start; }
.site-header--split .site-header__logo {
    justify-self: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 2px;
}
.site-header__logo-sub {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
.site-header__actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

@media (max-width: 768px) {
    .site-header--split .site-header__logo { font-size: var(--text-display-h6); }
    /* CTA lives in the slide-in menu on mobile (see .site-nav__cta). The button is
       .btn-shaped, not .btn — the old .btn-only selector never matched, so the wide
       CTA stayed in the bar and pushed the header ~7px past the viewport. */
    .site-header__actions .btn,
    .site-header__actions .btn-shaped { display: none; }

    /* The desktop curtain-reveal transforms the whole header (--nav-reveal). A
       transform / will-change:transform makes the header a containing block for
       fixed descendants, which traps the mobile slide-in nav panel inside the
       60px header. On mobile the reveal choreography is dropped: the header is
       simply present, so the fixed nav panel stays viewport-relative. */
    .page-home .site-header {
        transform: none;
        opacity: 1;
        will-change: auto;
    }

    /* The desktop split layout pins the nav left (justify-self:start, 0-2-0). As a
       fixed grid item on mobile that shrink-wraps the slide-in panel to its content
       instead of filling. Match the specificity to let nav.css's panel fill.
       (When the split-header CSS migrates to a shared component for the WP theme,
       author that justify-self:start as desktop-only so this override isn't needed.) */
    .site-header--split .site-nav--left { justify-self: stretch; }

    /* Mobile header layout: centre the logo, pin the hamburger to the right. The nav
       is a fixed panel and the actions are absolute, so the logo is the only in-flow
       child — flex-centre is deterministic (the desktop 1fr/auto/1fr grid mis-places
       once the nav leaves flow). */
    .site-header--split .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .site-header__actions {
        position: absolute;
        right: var(--site-padding);
        top: 50%;
        transform: translateY(-50%);
    }

    /* Hero: drop the scroll-driven curtain reveal on mobile — it loads straight on
       "Come to play. Not to perform." (cleaner, and avoids a 200vh sticky pin on a
       phone). Mirrors the .is-static / reduced-motion path purely in CSS.
       NB .page-home scoping is load-bearing: the base hero rules live LATER in the
       file, so a bare .block-hero override would lose on source order. */
    .page-home { --hero-p: 1; --nav-reveal: 1; }
    .page-home .block-hero { height: auto; }
    .page-home .block-hero__pin {
        /* relative, not static: the pin must stay a positioned element so its
           overflow:hidden keeps clipping the 150vmax sunburst (static would let it
           escape and overflow the page ~438px). Just no sticky/100vh pinning. */
        position: relative;
        height: auto;
        min-height: clamp(540px, 78vh, 760px);
        /* Top-anchor the content (base pin is justify-content:center). With centring,
           a padding-top increase is half-absorbed by the redistributed slack, so the
           gap barely moved; flex-start makes padding-top the literal, full top gap. */
        justify-content: flex-start;
        /* the sticky header is transparent and overlays the hero — reserve its height
           plus a generous gap at the top so the heading starts well clear of it (the
           hero grows taller, nudging the marquee/ticker down — intended). */
        padding-top: calc(var(--site-header-h) + var(--space-10));
        /* breathing room below the body so it doesn't jam into the marquee/ticker band */
        padding-bottom: var(--space-10);
    }
    .page-home .hero-curtain { display: none; }
    .page-home .block-hero__scroll { display: none; }

    /* Mobile hero type hierarchy: a bigger heading (stacks to a punchy 4-line block)
       over a tighter body. Sizes track viewport WIDTH (vw-led, not a fixed cap) so the
       line-wrapping stays consistent from a phone up through a narrow browser window —
       "Come to play." keeps wrapping and "strangers" stays on the 2nd body line instead
       of the type going small relative to a wider container. .page-home beats the base
       hero rules, which sit later in the file. */
    .page-home .block-hero__heading { font-size: clamp(3.125rem, 15.5vw, 5rem); }
    .page-home .block-hero__body { font-size: clamp(1.4375rem, 0.5rem + 3.2vw, 1.75rem); }   /* 23px floor — balances the hero; still AA (white on #B40249 ≈ 6:1, clears 4.5:1 normal-text) */

    /* Beat statements: bigger and free to wrap naturally (the desktop 24ch cap kept
       them small + boxed into two lines). The second selector out-specifies the
       later base rule that pins data-beat=3 to 30ch. */
    .page-home .block-beat__text,
    .page-home .block-beat[data-beat="3"] .block-beat__text {
        font-size: clamp(2.75rem, 1.6rem + 6vw, 3.5rem);
        max-width: none;
    }

    /* Permission ticket breaks up over the statement (slip margin-top:-96px). On
       mobile that left only ~82px under "…builds community."; more bottom padding
       on the statement opens the gap to a comfortable ~114px. (.page-home beats the
       base .block-statement, which is later in the file.) */
    .page-home .block-statement { padding-bottom: calc(var(--space-20) + var(--space-12)); }
}

/* ════════════════════════════════════════════════════════════════════════
   1. HERO
   ════════════════════════════════════════════════════════════════════════ */

/* Hero is a tall scroll-driver; the pin stays put while the curtain parts. */
.block-hero {
    position: relative;
    z-index: 1;
    height: 200vh;                 /* reveal (≈first 70% pinned) + dwell, then it scrolls away */
    text-align: center;
}
.block-hero__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* Reduced motion / no-pin fallback — a normal static hero */
.block-hero.is-static { height: auto; }
.block-hero.is-static .block-hero__pin { position: static; height: auto; min-height: clamp(560px, 86vh, 880px); }

/* Warm sunburst rays behind the headline — morning light */
.block-hero__sunburst {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 150vmax;
    height: 150vmax;
    transform: translate(-50%, -55%);
    background: repeating-conic-gradient(
        from 0deg at 50% 50%,
        rgba(234, 255, 30, 0.05) 0deg 5deg,
        rgba(234, 255, 30, 0) 5deg 11deg
    );
    opacity: 0.8;
    pointer-events: none;
    animation: hero-spin 140s linear infinite;
}
@keyframes hero-spin { to { transform: translate(-50%, -55%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .block-hero__sunburst { animation: none; }
}

/* ── Hero — Pink Velvet variant ──────────────────────────────────────────── */
.block-hero--pink {
    background-color: var(--color-pink-velvet-dk);
    color: #fff;
}
.block-hero--pink .block-hero__sunburst {
    background: repeating-conic-gradient(
        from 0deg at 50% 50%,
        rgba(255, 255, 255, 0.09) 0deg 6deg,
        rgba(255, 255, 255, 0)    6deg 12deg);
    opacity: 1;
}
.block-hero--pink .block-hero__heading { color: #fff; }
.block-hero--pink .block-hero__body    { color: #fff; }   /* solid white maximises contrast on the pink */
.block-hero--pink .block-hero__scroll  { color: #fff; }

/* ── Curtain reveal — logo halves part like stage curtains ───────────────── */
.hero-curtain {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    overflow: hidden;
    pointer-events: none;
}
.hero-curtain__logo {
    position: relative;
    top: -5%;                          /* nudge up ~5% of the pin height to visually centre on load */
    width: min(74%, 800px);
    aspect-ratio: 584.17 / 315.51;     /* full lockup proportions */
}
.hero-curtain__half {
    position: absolute;
    background-color: #fff;
    -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
    -webkit-mask-size: contain;      mask-size: contain;
    -webkit-mask-position: center;   mask-position: center;
    will-change: transform;
}
/* Two real logo parts positioned to reassemble the lockup, then part on scroll (--hero-p) */
.hero-curtain__half--top {
    top: 0; left: 0; width: 100%;
    aspect-ratio: 584.17 / 263.32;
    -webkit-mask-image: url('../../images/brand/Carnival-logo-standalone-black.svg');
            mask-image: url('../../images/brand/Carnival-logo-standalone-black.svg');
    transform: translateY(calc(var(--hero-p, 0) * -190%));
}
.hero-curtain__half--bottom {
    top: 54.05%; left: 50%; width: 66.76%;
    aspect-ratio: 389.99 / 144.98;
    -webkit-mask-image: url('../../images/brand/OfTheCommons-standalone.svg');
            mask-image: url('../../images/brand/OfTheCommons-standalone.svg');
    transform: translateX(-50%) translateY(calc(var(--hero-p, 0) * 190%));
}
.is-static .hero-curtain { display: none; }   /* reduced motion — straight to hero */

.block-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    /* revealed as the curtain parts */
    opacity: clamp(0, calc((var(--hero-p, 0) - 0.4) * 2.6), 1);
}
.is-static .block-hero__inner { opacity: 1; }

.block-hero__heading {
    font-size: clamp(2.75rem, 1.4rem + 6vw, 5.5rem);
    line-height: 0.98;
}

.block-hero__body {
    max-width: 46ch;
    font-size: 1.5625rem;   /* 25px — ≥24px so medium (non-bold) weight still counts as "large text" → 3:1 AA on the pink */
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    color: var(--color-text-primary);
}

.block-hero__scroll {
    position: absolute;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;                  /* above the curtain — it's the "scroll to begin" hint */
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    /* visible at the closed logo, fades out as the curtain parts */
    opacity: clamp(0, calc(0.7 - var(--hero-p, 0) * 1.6), 0.7);
}
.block-hero__scroll span { position: relative; }
.block-hero__scroll span::after {
    content: "";
    display: block;
    width: 1px;
    height: 28px;
    margin: var(--space-1) auto 0;
    background: currentColor;
    animation: scroll-pulse 2.2s ease-in-out infinite;
    transform-origin: top;
}
@keyframes scroll-pulse {
    0%, 100% { transform: scaleY(0.4); opacity: 0.3; }
    50%      { transform: scaleY(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .block-hero__scroll span::after { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   2. CAROUSEL
   ════════════════════════════════════════════════════════════════════════ */

.block-carousel {
    padding-block: var(--space-12);
    overflow: visible;   /* let the rotating panels break the top/bottom bounds */
}

/* 3D rotating gallery (ported from the carnival Vite project) */
.carousel3d {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
}
.carousel3d__stage {
    --panel-w: 280px;
    --panel-h: 280px;
    --r: 390px;                 /* ≥ panel-w × 1.307 so faces don't intersect */
    perspective: 1500px;
    perspective-origin: 50% 50%;
    width: calc(var(--panel-w) + var(--r) * 2);
    max-width: 100%;
    height: var(--panel-h);
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel3d__spinner {
    width: var(--panel-w);
    height: var(--panel-h);
    position: relative;
    transform-style: preserve-3d;   /* rotateY driven by prototype.js */
}
.carousel3d__panel {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}
.carousel3d__panel::before {           /* front face — image (set inline via --panel-img) */
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(208, 210, 216, 0.9);
    background-image: var(--panel-img);
    background-size: cover;
    background-position: center;
    clip-path: url(#frame-shape);
    backface-visibility: hidden;
}
.carousel3d__panel::after {            /* back face — ink */
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-night-ink-dk);
    clip-path: url(#frame-shape);
    backface-visibility: hidden;
    transform: rotateY(180deg);
}
.carousel3d__panel.p1 { transform: rotateY(  0deg) translateZ(var(--r)); }
.carousel3d__panel.p2 { transform: rotateY( 45deg) translateZ(var(--r)); }
.carousel3d__panel.p3 { transform: rotateY( 90deg) translateZ(var(--r)); }
.carousel3d__panel.p4 { transform: rotateY(135deg) translateZ(var(--r)); }
.carousel3d__panel.p5 { transform: rotateY(180deg) translateZ(var(--r)); }
.carousel3d__panel.p6 { transform: rotateY(225deg) translateZ(var(--r)); }
.carousel3d__panel.p7 { transform: rotateY(270deg) translateZ(var(--r)); }
.carousel3d__panel.p8 { transform: rotateY(315deg) translateZ(var(--r)); }
/* Panel images are now set inline per-panel via --panel-img (page-home.php),
   sourced from the ACF "Carousel images" field with the originals as fallback. */

@media (max-width: 900px) {
    .carousel3d__stage { --panel-w: 200px; --panel-h: 200px; --r: 280px; }
    .carousel3d { gap: var(--space-3); }
}
@media (max-width: 480px) {
    .carousel3d__stage { --panel-w: 150px; --panel-h: 150px; --r: 210px; }
}

/* ════════════════════════════════════════════════════════════════════════
   3. STATEMENT
   ════════════════════════════════════════════════════════════════════════ */

.block-statement {
    padding-block: var(--space-12) calc(var(--space-20) + var(--space-8));
    text-align: center;
}
.block-statement__text {
    margin: 0 auto;
    max-width: 22ch;   /* wider line length — lands the phrase on 3 balanced lines */
    font-size: clamp(3.25rem, 2rem + 6vw, 5.5rem);   /* larger than default editorial — 52 → 88px */
    text-wrap: balance;
}

/* ════════════════════════════════════════════════════════════════════════
   4. WHAT — permission slip
   ════════════════════════════════════════════════════════════════════════ */

.block-what {
    padding-block: 0 var(--space-16);   /* no top pad — the ticket sits at the edge */
    text-align: center;
}

/* Single centred column of copy on the dark ground (Figma 1104:3382/3383) */
.block-what__copy {
    max-width: 46ch;
    margin-inline: auto;
}
.block-what__col + .block-what__col { margin-top: var(--space-8); }
.block-what__col p { margin-inline: auto; }
.block-what__col p:last-child { margin-bottom: 0; }

/* Teardrop-line ornament dividing the two copy blocks (fluoro on the dark grit). */
.block-what__divider {
    width: min(300px, 64%);
    aspect-ratio: 619.88 / 50.03;   /* teardrop-line.svg proportions */
    margin: var(--space-8) auto;
    background-color: var(--color-highlight);
    -webkit-mask: url('../../images/ornaments/teardrop-line.svg') center / contain no-repeat;
            mask: url('../../images/ornaments/teardrop-line.svg') center / contain no-repeat;
}

/* Permission ticket — a fluoro bill pasted at the top, tilted, lifting up over
   the previous section's edge (Figma: it breaks the boundary). */
.permission-slip {
    position: relative;
    z-index: 3;
    width: min(620px, 88%);
    margin: -96px auto var(--space-12);   /* lift up over the edge above */
}
.permission-slip__ticket {
    position: relative;
    aspect-ratio: 391.67 / 199.36;     /* Frame-Ticket.svg */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15% 10% 5%;   /* top-heavy padding nudges the text down to the ticket's visual centre */
    color: var(--color-night-ink);   /* lighter ink (#233D4D) — "Permission" + caption inherit it */
    background-color: var(--color-fluoro-green);
    -webkit-mask: url('../../frames/Frame-Ticket.svg') center / contain no-repeat;
            mask: url('../../frames/Frame-Ticket.svg') center / contain no-repeat;
    transform: rotate(-4deg);
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.5));
    transition: transform var(--transition-slow);
}
.permission-slip:hover .permission-slip__ticket { transform: rotate(-2deg) translateY(-5px); }
.permission-slip__body { text-align: center; transform: translateY(-24px); }   /* nudge the whole copy block up */
.permission-slip__lead {
    margin-bottom: 0;   /* a touch more breathing room under "Permission" */
    line-height: 0.9;
    font-size: clamp(3.25rem, 1.5rem + 9vw, 6rem);   /* slightly larger — fills the ticket */
}
.permission-slip__sub { margin: 0; font-size: var(--text-md); line-height: 1.2; max-width: 30ch; margin-inline: auto; }

.block-what__cta { text-align: center; margin-block-start: var(--space-12); }

/* ════════════════════════════════════════════════════════════════════════
   BEATS — full-width manifesto bands
   ════════════════════════════════════════════════════════════════════════ */

.block-beat {
    padding-block: var(--space-16);
    padding-inline: var(--site-padding);
    text-align: center;
}
/* Beat 1 — deep pink-velvet ground with bright pink-velvet text + paper crinkle. */
.block-beat--pink {
    background-color: var(--color-pink-velvet-dk);   /* #B40249 */
    color: var(--color-pink-velvet-br);              /* #FF3385 */
}
/* Torn before + after: the .bill clip-path gives the beat torn top + bottom; pull
   it up so its torn TOP bites into the section above, and pull the next section up
   under its torn BOTTOM — neighbours show through the notches, no dead band. */
.block-beat--pink.bill {
    position: relative;
    z-index: 2;                          /* teeth paint over both neighbours */
    margin-top: -30px;                   /* torn top bites up into block-what */
}
.block-beat--pink.bill + .block-why {
    position: relative;
    z-index: 1;                          /* sits under the beat's torn bottom teeth */
    margin-top: -30px;                   /* close the band below the beat */
    padding-top: var(--space-12);        /* the single intended gap */
}
.block-beat__text {
    max-width: 24ch;
    margin: 0 auto;
    line-height: 1.0;
    text-wrap: balance;
}
.block-beat[data-beat="3"] .block-beat__text { max-width: 30ch; }

/* ════════════════════════════════════════════════════════════════════════
   5. WHY — consume or create
   ════════════════════════════════════════════════════════════════════════ */

.block-why {
    padding-block: var(--space-16);
    text-align: center;
}
.block-why__heading {
    margin-bottom: var(--space-10);
    line-height: 1.0;
}
/* Fluoro headline — scoped under .theme-day-cool to beat the theme heading reset
   ([class*="theme-"] :is(h1…h6){color:inherit}). */
.theme-day-cool .block-why__heading { color: var(--color-fluoro-green); }
.block-why__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    max-width: var(--content-width-narrow);
    margin-inline: auto;
    text-align: center;
}
.block-why__col p { margin-inline: auto; }
.block-why__kicker {
    margin: var(--space-10) auto 0;
    max-width: 34ch;
    font-weight: 600;
    font-size: var(--text-md);
}
.block-why__cta {
    margin-block-start: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}
/* Frame-Square CTAs — scalloped-square cartouche, same behaviour as .btn-shaped:
   1px keyline + label by default, solid fluoro fill + ink label on hover. No motion.
   Circus Heavy label. (Uses the #frame-square symbol via an absolute SVG bg.) */
.btn-frame {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(170px, 22vw, 210px);
    aspect-ratio: 243.75 / 245.24;       /* Frame-Square viewBox */
    color: #fff;                         /* keyline + label default */
    text-decoration: none;
}
.btn-frame__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    transition: fill var(--transition-fast), stroke var(--transition-fast);
}
.btn-frame__label {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);    /* Circus Heavy */
    font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1;
    text-transform: uppercase;
}
.btn-frame:hover,
.btn-frame:focus-visible {
    color: var(--color-night-ink-dk);    /* ink label on hover */
    opacity: 1;                          /* override global a:hover dim */
}
.btn-frame:hover .btn-frame__bg,
.btn-frame:focus-visible .btn-frame__bg {
    fill: var(--color-fluoro-green);     /* solid fill, no keyline */
    stroke: none;
}

/* ════════════════════════════════════════════════════════════════════════
   6. MUSICIANS — fluoro burst
   ════════════════════════════════════════════════════════════════════════ */

.block-musicians {
    padding-block: var(--space-16);
}
.block-musicians__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: center;
}
.block-musicians__media {
    position: relative;
    aspect-ratio: 4 / 3;
}
.block-musicians__photo {
    position: absolute;
    inset: 0;
}
.block-musicians__photo--back {
    background: #FFFDF7;
    transform: translate(-5%, -7%) rotate(-2deg);
    box-shadow: var(--shadow-sm);
}
.block-musicians__photo--front {
    transform: translate(6%, 6%) rotate(1.5deg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.block-musicians__photo--front img { width: 100%; height: 100%; object-fit: cover; }

/* Instrument comp — transparent cutout on the fluoro ground (no fill behind it).
   Sizes to its own height, so override the media's 4/3 box to centre it cleanly. */
.block-musicians__comp {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin-inline: auto;
}
.block-musicians__media:has(.block-musicians__comp) { aspect-ratio: auto; }

.block-musicians .block-musicians__heading {
    font-size: clamp(3rem, 1.6rem + 6vw, 5.5rem);
    line-height: 0.92;
    margin-bottom: var(--space-3);
    margin-left: -10px;          /* nudge "You Play?" left */
    color: var(--color-night-ink);   /* lighter ink (#233D4D) — also the type-ink-tex base */
}
.block-musicians__content p { font-size: var(--text-md); max-width: 40ch; }
.block-musicians__content .btn { margin-block-start: var(--space-2); }

/* ════════════════════════════════════════════════════════════════════════
   7. THE COMMON CROWD — twilight, rotating type, testimonials
   ════════════════════════════════════════════════════════════════════════ */

.block-crowd {
    padding-block: var(--space-16);
}
/* Two-column: rotating name | heading + CTA */
.block-crowd__split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-10);
    align-items: center;
    margin-bottom: var(--space-16);
}
.block-crowd__stage {
    position: relative;
    min-height: 480px;
}
/* Zoetrope (3D rotating COMMONCROWD drum) fills its column */
.block-crowd__zoetrope {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
    transform: translateY(-28px);   /* nudge the rotating name up */
}
.block-crowd__heading {
    line-height: 1.0;
    text-wrap: balance;
}
.block-crowd__cta {
    margin-top: var(--space-6);
}

@media (max-width: 900px) {
    .block-crowd__split { grid-template-columns: 1fr; gap: var(--space-6); text-align: center; }
    .block-crowd__stage { min-height: 420px; order: -1; }
}

.block-crowd__testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.testimonial {
    background: var(--color-night-ink-dk);
    border: 1px solid var(--color-border);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 220px;
    transition: transform var(--transition-default), border-color var(--transition-default);
}
.testimonial:hover {
    transform: translateY(-6px);
    border-color: var(--color-highlight);
}
.testimonial__quote {
    margin: 0;
    font-size: var(--text-md);
    font-style: normal;
    line-height: 1.4;
    color: var(--color-text-primary);
}
.testimonial__by {
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-highlight);
}

/* ════════════════════════════════════════════════════════════════════════
   8. FOUNDERS — twilight collage
   ════════════════════════════════════════════════════════════════════════ */

.block-founders {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-16);
}
.block-founders__clouds {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(40% 30% at 18% 30%, rgba(245,240,224,0.06), transparent 70%),
        radial-gradient(38% 34% at 82% 64%, rgba(245,240,224,0.05), transparent 70%);
}
.block-founders > .container { position: relative; z-index: 1; }
.block-founders__heading {
    margin-bottom: var(--space-12);
    line-height: 1.0;
}
.block-founders__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10) var(--space-8);
}
.block-founders__person {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-6);
    align-items: start;
}
/* Katnip rides slightly HIGHER than Benedict — the old playbill stagger that
   denotes equal billing (neither name takes top spot). */
.block-founders__person--katnip  { margin-block-start: calc(var(--space-6) * -1); }
.block-founders__portrait {
    width: 180px;
    overflow: hidden;
    /* Transparent-PNG cutouts — no background fill, no feather mask (per build rule). */
    filter: grayscale(1) contrast(1.05);
}
.block-founders__portrait img { width: 100%; height: auto; }
.block-founders__name {
    font-size: var(--text-h3);
    margin-bottom: var(--space-2);
}
.block-founders__bio p { font-size: var(--text-sm); }
.block-founders__cta { margin-block-start: var(--space-10); text-align: center; }

/* ════════════════════════════════════════════════════════════════════════
   9. EVENTS — night
   ════════════════════════════════════════════════════════════════════════ */

.block-events {
    padding-block: var(--space-16);
}
.block-events__header { text-align: center; margin-bottom: var(--space-10); }
.block-events__heading { margin-bottom: var(--space-3); text-wrap: balance; }
.block-events__intro { margin: 0 auto; color: var(--color-text-secondary); max-width: 44ch; }

.block-events__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}
.event-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-default);
}
.event-card:hover { transform: translateY(-6px); }
.event-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.event-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.event-card:hover .event-card__media img { transform: scale(1.05); }
.event-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.event-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
.event-card__type { color: var(--color-highlight); font-weight: 600; }
.event-card__title {
    margin: 0;
    font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2rem);   /* larger — Citrus Gothic is condensed, so it can take the size */
    font-family: var(--font-display-alt);   /* Citrus Gothic — ink-textured callout voice */
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.0;
}
.event-card__title a { text-decoration: none; }
.event-card__venue { margin: 0; margin-top: calc(var(--space-1) * -1 - 6px); font-size: var(--text-sm); color: var(--color-text-secondary); }
.event-card__more {
    margin-block-start: auto;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}
.event-card__more:hover { color: var(--color-highlight); opacity: 1; }

/* Email capture — rhymes with the WHAT "Count me in" moment */
.block-events__email {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-10);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}
.block-events__email-copy h3 { margin-bottom: var(--space-2); }
.block-events__email-copy p { margin: 0; color: var(--color-text-secondary); }
.block-events__form { display: flex; gap: var(--space-2); }
.block-events__input,
.site-footer__form input {
    flex: 1;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background: var(--color-night-ink-dk);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.block-events__input::placeholder,
.site-footer__form input::placeholder { color: var(--color-text-secondary); }
.block-events__input:focus-visible,
.site-footer__form input:focus-visible { border-color: var(--color-highlight); }
.block-events__honeypot { display: none; }
.block-events__footer { text-align: center; margin-block-start: var(--space-8); }

/* ── Fluent Forms reskin — home "Count me in" newsletter (form id 2) ──────────
   When home_newsletter_form_id is set, page-home.php swaps the static
   .block-events__form for the MailerLite-connected Fluent shortcode, which ships
   its own .ff-* markup + an in-body inline blue-button <style>. These rules
   restore the bespoke look (ink input + shaped cartouche submit). Scoped to
   .block-events__email so no other Fluent form on the site is affected.
   Prod markup: form#fluentform_2 > fieldset > .ff-column-container
   [ col-1 input.ff-el-form-control | col-2 button.ff-btn-submit ].
   Doubled .ff-btn-submit + !important beat Fluent's inline .wpf_has_custom_css. */
.block-events__email .frm-fluent-form { margin: 0; }
.block-events__email .frm-fluent-form fieldset { min-inline-size: 0; }

/* input | button on one row — grid neutralises Fluent's inline flex-basis:50% */
/* ⚠️ Fluent's own CSS (fluent-forms-public.css / -default.css) is enqueued AFTER
   this file, and its base rules are specificity (0,2,0) — e.g.
   `.frm-fluent-form .ff-t-container{display:flex}` and
   `.ff-default .ff-el-form-control{border:1px…}`. A plain `.block-events__email .ff-*`
   override ties on specificity and LOSES on source order (row layout + box border
   creep back). So every structural override below carries the extra `.frm-fluent-form`
   class → (0,3,0), which out-specifies Fluent regardless of load order. */
.block-events__email .frm-fluent-form .ff-column-container {
    display: grid;
    grid-template-columns: 1fr;          /* stack: full-width field, button centred beneath */
    gap: var(--space-4);
    align-items: stretch;
}
/* strip Fluent's wrapper chrome — the box border/fill lives on these, not the input */
.block-events__email .frm-fluent-form .ff-t-cell,
.block-events__email .frm-fluent-form .ff-el-group,
.block-events__email .frm-fluent-form .ff-el-input--content {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.block-events__email .frm-fluent-form .ff_submit_btn_wrapper {   /* centre the shaped button beneath the field */
    display: flex;
    justify-content: center;
    text-align: center;
}

/* email field → simple bottom-keyline (no box), Besley throughout */
.block-events__email .frm-fluent-form .ff-el-form-control {
    width: 100%;
    min-width: 0;
    padding: var(--space-2) 2px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.3;
    color: var(--color-text-primary);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    box-shadow: none;
}
.block-events__email .frm-fluent-form .ff-el-form-control::placeholder {
    font-family: var(--font-body);
    font-style: normal;
    color: var(--color-text-secondary);
}
.block-events__email .frm-fluent-form .ff-el-form-control:focus,
.block-events__email .frm-fluent-form .ff-el-form-control:focus-visible {
    border-color: var(--color-highlight);
    outline: none;
    box-shadow: none;
}

/* submit → shaped cartouche (#btn-shape reproduced as a background SVG; keyline
   default, fluoro fill on hover — matches .btn-shaped on the ink surface) */
.block-events__email .ff-btn-submit.ff-btn-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 256 / 86;
    min-width: 190px !important;
    width: auto;
    margin: 0;
    padding-inline: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-h4);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    color: #fff !important;
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 86' preserveAspectRatio='none'><path fill='none' stroke='%23ffffff' stroke-width='1' vector-effect='non-scaling-stroke' d='M129.611 85.5421L139.265 79.4201C149.299 73.0515 161.658 69.9373 174.134 70.6431L220.203 73.2364C240.664 74.3902 256 60.505 256 42.9734C256 25.4698 240.723 11.6014 220.295 12.7048L173.859 15.2141C161.553 15.8806 149.364 12.8336 139.416 6.60515L129.559 0.432689C128.635 -0.14423 127.371 -0.14423 126.448 0.432689L116.591 6.60515C106.642 12.8336 94.4537 15.8806 82.1473 15.2141L35.7117 12.7048C15.2774 11.6014 0 25.4698 0 42.9734C0 60.5106 15.3364 74.3902 35.7969 73.2364L81.8657 70.6431C94.3358 69.9429 106.695 73.0515 116.735 79.4201L126.389 85.5421C127.345 86.1526 128.662 86.1526 129.618 85.5421H129.611Z'/></svg>");
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: color var(--transition-fast);
}
.block-events__email .ff-btn-submit.ff-btn-submit:hover,
.block-events__email .ff-btn-submit.ff-btn-submit:focus-visible {
    color: var(--color-night-ink-dk) !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 86' preserveAspectRatio='none'><path fill='%23EAFF1E' stroke='%23EAFF1E' stroke-width='1' vector-effect='non-scaling-stroke' d='M129.611 85.5421L139.265 79.4201C149.299 73.0515 161.658 69.9373 174.134 70.6431L220.203 73.2364C240.664 74.3902 256 60.505 256 42.9734C256 25.4698 240.723 11.6014 220.295 12.7048L173.859 15.2141C161.553 15.8806 149.364 12.8336 139.416 6.60515L129.559 0.432689C128.635 -0.14423 127.371 -0.14423 126.448 0.432689L116.591 6.60515C106.642 12.8336 94.4537 15.8806 82.1473 15.2141L35.7117 12.7048C15.2774 11.6014 0 25.4698 0 42.9734C0 60.5106 15.3364 74.3902 35.7969 73.2364L81.8657 70.6431C94.3358 69.9429 106.695 73.0515 116.735 79.4201L126.389 85.5421C127.345 86.1526 128.662 86.1526 129.618 85.5421H129.611Z'/></svg>");
    opacity: 1;
}
/* Fluent's success/error stack — keep it out of the input row's grid flow */
.block-events__email .ff-message-success,
.block-events__email .ff-errors-in-stack { grid-column: 1 / -1; margin-block-start: var(--space-2); }

/* ── Fluent Forms reskin — multi-field embeds (Get Involved volunteers + Musicians) ──
   Both sit on dark ink sections, so both adopt the bespoke .mus-field look: uppercase
   micro-cap labels, ink fields, shaped cartouche submit. Scoped to the two embed
   wrappers via :is(); the .frm-fluent-form prefix out-specifies Fluent's own CSS
   (which enqueues AFTER this file — see the home-form note above). Musicians renders
   the same .ff-* markup once its form ID is set, so it inherits this automatically. */
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form { max-width: 640px; margin-inline: auto; text-align: left; }
/* each field group stacks full-width */
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form .ff-el-group {
    display: block;
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form .ff-el-input--content { margin: 0; }
/* first/last name sit side by side (matches .mus-form__row), collapsing on mobile */
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form .ff-name-field-wrapper { margin: 0 0 var(--space-4); }
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form .ff-name-field-wrapper .ff-t-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
}
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form .ff-name-field-wrapper .ff-t-cell .ff-el-group { margin-bottom: 0; }
/* recolour Fluent's red required asterisk to the fluoro accent (matches .mus-field__req) */
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form .ff-el-input--label.ff-el-is-required.asterisk-right label:after,
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form .ff-el-input--label.ff-el-is-required.asterisk-left label:before { color: var(--color-fluoro-green); }
/* labels → uppercase micro-caps (matches .mus-field label) */
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form .ff-el-input--label label {
    display: block;
    margin-bottom: var(--space-1);
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
/* fields → ink box (matches .mus-field input/textarea) */
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form :is(.ff-el-form-control, textarea, select) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: auto;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.4;
    color: var(--color-text-primary);
    background: var(--color-night-ink-dk);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
}
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form textarea.ff-el-form-control { min-height: 8rem; line-height: 1.5; resize: vertical; }
/* strip number-field spinners so "Mobile" reads like the other fields */
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form input[type="number"]::-webkit-outer-spin-button,
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form .ff-el-form-control::placeholder {
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    opacity: 0.65;
}
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form .ff-el-form-control:focus,
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form .ff-el-form-control:focus-visible {
    border-color: var(--color-highlight);
    outline: none;
    box-shadow: none;
}
/* submit → shaped cartouche, centred (matches .mus-form__submit / home button) */
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form .ff_submit_btn_wrapper {
    display: flex;
    justify-content: center;
    margin-top: var(--space-6);
}
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form .ff-btn-submit.ff-btn-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 256 / 86;
    min-width: 220px !important;
    width: auto;
    margin: 0;
    padding-inline: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-h4);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    color: #fff !important;
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 86' preserveAspectRatio='none'><path fill='none' stroke='%23ffffff' stroke-width='1' vector-effect='non-scaling-stroke' d='M129.611 85.5421L139.265 79.4201C149.299 73.0515 161.658 69.9373 174.134 70.6431L220.203 73.2364C240.664 74.3902 256 60.505 256 42.9734C256 25.4698 240.723 11.6014 220.295 12.7048L173.859 15.2141C161.553 15.8806 149.364 12.8336 139.416 6.60515L129.559 0.432689C128.635 -0.14423 127.371 -0.14423 126.448 0.432689L116.591 6.60515C106.642 12.8336 94.4537 15.8806 82.1473 15.2141L35.7117 12.7048C15.2774 11.6014 0 25.4698 0 42.9734C0 60.5106 15.3364 74.3902 35.7969 73.2364L81.8657 70.6431C94.3358 69.9429 106.695 73.0515 116.735 79.4201L126.389 85.5421C127.345 86.1526 128.662 86.1526 129.618 85.5421H129.611Z'/></svg>");
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: color var(--transition-fast);
}
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form .ff-btn-submit.ff-btn-submit:hover,
:is(.get-involved__form, .mus-form--embed, .events-waitlist__content) .frm-fluent-form .ff-btn-submit.ff-btn-submit:focus-visible {
    color: var(--color-night-ink-dk) !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 86' preserveAspectRatio='none'><path fill='%23EAFF1E' stroke='%23EAFF1E' stroke-width='1' vector-effect='non-scaling-stroke' d='M129.611 85.5421L139.265 79.4201C149.299 73.0515 161.658 69.9373 174.134 70.6431L220.203 73.2364C240.664 74.3902 256 60.505 256 42.9734C256 25.4698 240.723 11.6014 220.295 12.7048L173.859 15.2141C161.553 15.8806 149.364 12.8336 139.416 6.60515L129.559 0.432689C128.635 -0.14423 127.371 -0.14423 126.448 0.432689L116.591 6.60515C106.642 12.8336 94.4537 15.8806 82.1473 15.2141L35.7117 12.7048C15.2774 11.6014 0 25.4698 0 42.9734C0 60.5106 15.3364 74.3902 35.7969 73.2364L81.8657 70.6431C94.3358 69.9429 106.695 73.0515 116.735 79.4201L126.389 85.5421C127.345 86.1526 128.662 86.1526 129.618 85.5421H129.611Z'/></svg>");
    opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════════
   9b. EVENTS ARCHIVE PAGE  (prototype/events.html)
   Day → twilight → pink arc. Reuses .event-card from the home events block.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────────── */
/* Compact: the upcoming cards must be visible on load, so the hero stays short. */
.events-hero { padding-block: var(--space-6) var(--space-8); text-align: center; }
.events-hero__inner { display: grid; gap: var(--space-4); justify-items: center; }
.events-hero__eyebrow {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-highlight);
}
.events-hero__title { margin: 0; line-height: 1.0; text-wrap: balance; }
.events-hero__intro {
    margin: 0;
    max-width: 46ch;
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
}

/* ── Listing grid (4-up, shares the home .event-card) ──────────────────── */
/* Bottom padding looks smaller than its value: the volunteers section below
   pulls up var(--space-8) (64px) via its torn-edge overlap, eating into it. */
.events-listing { padding-block: 0 calc(var(--space-12) + var(--space-2)); }
.events-listing__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Column count adapts to the number of events (set as --cols inline by the
       template via cotc_events_columns) so rows fill cleanly — 3 events → 3 cols,
       5 → 3, etc. Falls back to 4 if --cols is absent (e.g. the static prototype).
       minmax(0,1fr), not bare 1fr: a bare 1fr keeps a min-content floor, so a
       card with a wider title gets a wider column — which (via the 4:3 media)
       makes its image taller than its neighbours. minmax(0,…) forces equal
       columns, so every card's image is a uniform height. */
    grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
    gap: var(--space-6);
    justify-content: center;
}
/* A lone event shouldn't stretch full-bleed — cap its width and centre it. */
.events-listing__grid[data-count="1"] {
    grid-template-columns: minmax(0, 420px);
}
.events-listing__grid > li { display: flex; }
.events-listing__grid > li > .event-card { flex: 1; }
.events-listing__grid .event-card__meta time { white-space: nowrap; }

/* Sold-out flag on the media corner. */
.event-card__media { position: relative; }
/* Sold-out badge sits inside a wavy plaque (Frame-Wide.svg as a mask). */
.event-card__flag {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    aspect-ratio: 407.76 / 247.52;     /* Frame-Wide.svg */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14% 9%;
    font-family: var(--font-display-alt);
    font-size: var(--text-lg);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;   /* SOLD OUT stays on one line — the plaque is chosen for its width */
    color: var(--color-night-ink-dk);
    background-color: var(--color-highlight);
    -webkit-mask: url('../../frames/Frame-Wide.svg') center / contain no-repeat;
            mask: url('../../frames/Frame-Wide.svg') center / contain no-repeat;
    transform: translate(-50%, -50%) rotate(-3deg);
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}
.event-card--sold-out .event-card__media img { filter: grayscale(1) brightness(0.8); }
.event-card--sold-out .event-card__title a { color: var(--color-text-secondary); }

/* ── Volunteers callout (image left, copy right) ───────────────────────── */
/* Torn-edge transition rule: pull UP into the previous section (negative
   margin-top ≈ its padding-bottom) so the two block-paddings don't STACK into a
   dead band, and the torn top bites into the section behind. */
.events-volunteers {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--space-8));
    /* Deeper bottom padding than the waitlist's -space-8 overlap, so the content
       gets a deliberate breath of twilight before the torn pink edge bites in. */
    padding-block: var(--space-10) var(--space-16);
}
.events-volunteers__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: center;
}
.events-volunteers__media { overflow: hidden; }
.events-volunteers__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.events-volunteers__body { display: grid; gap: var(--space-4); justify-items: start; }
.events-volunteers__eyebrow {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-highlight);
}
.events-volunteers__heading { margin: 0; line-height: 1.0; }
.events-volunteers__copy { margin: 0; max-width: 42ch; color: var(--color-text-secondary); }
.events-volunteers__cta { margin-block-start: var(--space-2); }

/* ── Waitlist / email-capture banner with Carnival wordmark watermark ──── */
/* Same torn-edge pull as Volunteers, so the pink doesn't sit below a dead band. */
.events-waitlist {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--space-8));
    padding-block: var(--space-10) var(--space-12);
    overflow: hidden;
}
.events-waitlist__inner {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
}
.events-waitlist__watermark {
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    width: min(820px, 110%);
    height: auto;
    opacity: 0.12;                 /* dark wordmark reads as a faint stamp on pink */
    pointer-events: none;
    z-index: 0;
}
.events-waitlist__content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    max-width: 40ch;
}
.events-waitlist__heading { margin: 0; line-height: 1.0; }
.events-waitlist__intro { margin: 0; color: var(--color-night-ink-dk); }
.events-waitlist__form { margin-block-start: var(--space-2); width: min(420px, 100%); }
/* No fill on the waitlist field — an ink keyline on the pink instead of the dark box.
   Text/placeholder go ink so they read on the bright pink ground. */
.events-waitlist__form .block-events__input {
    background: transparent;
    border-color: var(--color-night-ink-dk);
    color: var(--color-night-ink-dk);
}
.events-waitlist__form .block-events__input::placeholder { color: var(--color-night-ink-dk); opacity: 0.55; }
.events-waitlist__form .block-events__input:focus-visible { border-color: var(--color-night-ink-dk); }

@media (max-width: 900px) {
    .events-listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .events-volunteers__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    .events-volunteers__media { order: 2; max-width: 480px; }
}
@media (max-width: 560px) {
    .events-listing__grid { grid-template-columns: minmax(0, 1fr); }
    .events-waitlist__form { flex-direction: column; }
    /* In the stacked column the shaped button inherits .block-events__form's full-width
       rule; at the waitlist form's 420px width its 256:86 ratio makes it very tall.
       Cap + centre it so it reads as a button, not a banner. */
    .events-waitlist__form .btn-shaped { align-self: center; width: 100%; max-width: 260px; min-width: 0; margin-block-start: var(--space-3); }
}

.site-footer__form { display: flex; gap: var(--space-2); margin-block-start: var(--space-1); }

/* ════════════════════════════════════════════════════════════════════════
   13. GET INVOLVED / VOLUNTEER PAGE
   Simple centred sign-up page (day theme). Holds the Fluent Forms volunteer form.
   ════════════════════════════════════════════════════════════════════════ */
.get-involved { padding-block: var(--space-10) var(--space-16); }
.get-involved__inner {
    max-width: 760px;
    margin-inline: auto;
    display: grid;
    gap: var(--space-4);
    text-align: center;                  /* centred header block */
}
.get-involved__eyebrow {
    margin: 0 0 var(--space-3);          /* extra air below the eyebrow so it isn't crunched into the title */
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-highlight);
}
.get-involved__title { margin: 0; line-height: 1.0; text-wrap: balance; }
.get-involved__intro {
    margin: 0 auto;
    max-width: 58ch;                     /* wider measure for the intro copy */
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
}
.get-involved__form { margin-block-start: var(--space-4); }
.get-involved__pending { margin: 0; color: var(--color-text-secondary); }
.get-involved__mailto { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.get-involved__mailto a { color: var(--color-accent); }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .block-crowd__testimonials { grid-template-columns: 1fr; }
    .block-events__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .block-what__columns,
    .block-why__columns,
    .block-musicians__layout,
    .block-founders__grid,
    .block-events__email {
        /* minmax(0,1fr), not 1fr: a bare 1fr keeps an implicit min-content floor,
           so a wide flex child (e.g. the newsletter input+CTA) blows the column
           past the viewport. minmax(0,…) lets it shrink so min-width:0 children win. */
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-8);
    }
    .block-founders__person--katnip { margin-block-start: 0; }
    .block-events__grid { grid-template-columns: 1fr; }
    .block-musicians__media { max-width: 420px; margin-inline: auto; order: 2; }
    .block-events__form { flex-direction: column; }
    .block-events__email .frm-fluent-form .ff-column-container { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .block-founders__person { grid-template-columns: 1fr; }
    .block-founders__portrait { width: 140px; }

    /* The newsletter box's space-10 (80px) padding plus the CTA's 190px min-width
       can't fit a phone-width column (overflows from ~375px down). Trim the box
       padding and let the CTA fill the single column — at this width its computed
       size matches the scalloped SVG's native ~2.98 ratio, so it doesn't distort. */
    .block-events__email { padding: var(--space-6); }
    .block-events__form .btn-shaped { width: 100%; min-width: 0; }
    .block-events__email .ff-btn-submit.ff-btn-submit { width: 100% !important; min-width: 0 !important; }

    /* Permission caption: 22px overflows the narrow ticket so each <br> segment
       wrapped (5 lines). Smaller so the three lines hold as three. */
    .permission-slip__sub { font-size: clamp(0.9375rem, 0.78rem + 1vw, 1.25rem); }
}

/* ════════════════════════════════════════════════════════════════════════
   FLAIR LAYER — motion, depth & print craft
   (follow.art kinetic type · griflan stagger · browserhistory collage ·
    renaissance transitions). Prototype-local; migrate once locked.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Choreographed reveals ───────────────────────────────────────────────── */
/* Upgrade the base fade to an expressive expo-eased rise. */
[data-animate] {
    transform: translateY(34px);
    transition:
        opacity var(--reveal-dur) var(--ease-out-expo),
        transform var(--reveal-dur) var(--ease-out-expo);
}

/* Headline "wipe" reveal — VISIBLE by default; .is-in plays the wipe in.
   (Never hides on its own, so a missed reveal can't blank a heading.) */
.reveal-head { clip-path: inset(-0.15em 0 -0.3em 0); }
@media (prefers-reduced-motion: no-preference) {
    .reveal-head.is-in { animation: head-wipe 1.05s var(--ease-out-expo) both; }
}
@keyframes head-wipe {
    from { clip-path: inset(-0.1em 0 110% 0); }
    to   { clip-path: inset(-0.15em 0 -0.3em 0); }
}

/* ── Marquee — rave-flyer repeating text ─────────────────────────────────── */
.marquee {
    overflow: hidden;
    white-space: nowrap;
    padding-block: var(--space-3);
}
.marquee__track {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    padding-inline-start: var(--space-6);
    animation: marquee 34s linear infinite;
    will-change: transform;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track > span {
    font-family: var(--font-display-alt);   /* Citrus Gothic — ink-textured callout */
    font-size: var(--text-display-h3);
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
}
/* 6-leaf flower separator between ticker phrases — masked so it takes the fluoro
   highlight (matching the ✲ dots it replaced) rather than the SVG's baked-in fill. */
.marquee__ornament {
    flex: none;
    align-self: center;
    width: 2rem;          /* 6-leaf is 112.28×126.29 — slightly taller than wide */
    height: 2.25rem;
    background-color: var(--color-highlight);
    -webkit-mask: url('../../images/ornaments/6-leaf.svg') center / contain no-repeat;
            mask: url('../../images/ornaments/6-leaf.svg') center / contain no-repeat;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; padding-inline-start: 0; }
}

/* ── Collage floats — layered cut-outs with parallax ─────────────────────── */
.float {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    opacity: 0.92;
}
.float svg { display: block; width: 100%; height: 100%; }

/* ── Rotating stamp — ties to the poster campaign ("TAKE ONE") ───────────── */
.stamp {
    position: absolute;
    width: 132px;
    height: 132px;
    z-index: 3;
    animation: ring-spin 18s linear infinite;
}
.stamp svg { width: 100%; height: 100%; overflow: visible; }
.stamp__text {
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.08em;
    fill: var(--color-pink-velvet);
    text-transform: uppercase;
}
.stamp__hub {
    font-family: var(--font-display);
    font-size: 13px;
    fill: var(--color-night-ink-dk);
}
@media (prefers-reduced-motion: reduce) { .stamp { animation: none; } }

/* ── Torn-paper section edge — print materiality ─────────────────────────── */
/* Founders → Events: two near-identical darks left the torn-top edge invisible
   inside a tall dead band. Trim the founders' bottom padding and pull the events
   section UP so its torn top bites into the founders' slightly-lighter twilight,
   which now shows through the notches and makes the edge read. */
.block-founders { padding-bottom: var(--space-10); }
.block-founders + .block-events {
    position: relative;
    z-index: 1;
    margin-top: -22px;
    padding-top: var(--space-10);
}

.edge-torn-top {
    /* Irregular spacing + varied depths + short runs read as a real torn edge,
       not a mechanical sawtooth. */
    clip-path: polygon(
        0% 15px, 2% 7px, 5% 12px, 7% 3px, 11% 9px, 13% 5px, 18% 18px, 21% 8px,
        24% 14px, 29% 2px, 33% 11px, 36% 6px, 39% 13px, 44% 4px, 49% 19px,
        52% 9px, 55% 3px, 60% 12px, 64% 7px, 68% 16px, 72% 2px, 76% 10px,
        79% 6px, 83% 17px, 87% 4px, 91% 11px, 95% 7px, 98% 13px, 100% 5px,
        100% 100%, 0% 100%);
}

/* ── Bill — a bright stock poster pasted on the ink wall (torn top + bottom) ─ */
.bill {
    /* Organic torn top + bottom — irregular, and the two edges differ from each
       other the way a real torn poster's do. */
    clip-path: polygon(
        0% 17px, 3% 6px, 6% 13px, 9% 3px, 13% 10px, 16% 5px, 21% 16px, 25% 7px,
        29% 12px, 34% 2px, 38% 9px, 43% 14px, 47% 4px, 52% 11px, 57% 17px, 61% 6px,
        66% 12px, 70% 3px, 75% 15px, 79% 7px, 84% 10px, 88% 4px, 93% 14px, 97% 6px, 100% 11px,
        100% calc(100% - 13px), 96% calc(100% - 4px), 92% calc(100% - 12px),
        87% calc(100% - 6px), 83% calc(100% - 16px), 78% calc(100% - 3px),
        73% calc(100% - 11px), 68% calc(100% - 7px), 63% calc(100% - 14px),
        58% calc(100% - 4px), 53% calc(100% - 10px), 48% calc(100% - 17px),
        43% calc(100% - 6px), 38% calc(100% - 12px), 33% calc(100% - 3px),
        28% calc(100% - 15px), 23% calc(100% - 7px), 18% calc(100% - 11px),
        13% calc(100% - 4px), 9% calc(100% - 13px), 5% calc(100% - 6px),
        2% calc(100% - 10px), 0% calc(100% - 5px));
    /* drop-shadow follows the torn shape (box-shadow can't) — paper lifts off the wall */
    filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.4));
    position: relative;
}

/* Adjacent bright bills: paste the pink beat UP over the fluoro so there's no
   dark negative space at the seam — the pink's torn top reveals fluoro behind it. */
.block-musicians.bill { z-index: 1; }
.block-beat[data-beat="3"].bill {
    z-index: 2;
    margin-top: -54px;
    padding-top: calc(var(--space-16) + 54px);
}

/* Pink beat-3 bill → Common Crowd (a dark section, not another bright bill):
   pull the crowd UP under the bill's torn bottom so its twilight wall — not the
   darker body bg — shows through the torn notches, and close the dead dark band
   above the crowd content. Crowd stays below the bill's z-index:2, so the pink
   teeth keep painting on top. */
.block-beat[data-beat="3"].bill + .block-crowd {
    position: relative;
    z-index: 0;
    margin-top: -26px;
    padding-top: var(--space-8);
}

/* ── Halftone — dot screen, the bill-poster overprint texture ────────────── */
.is-halftone { position: relative; isolation: isolate; }
.is-halftone::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.16;
    background-image: radial-gradient(var(--color-night-ink-dk) 1.6px, transparent 1.7px);
    background-size: 7px 7px;
}
.is-halftone > .container,
.is-halftone > .block-beat__text { position: relative; z-index: 1; }
/* On dark ink surfaces, screen light dots instead so the grit shows */
[class*="theme-day"].is-halftone::after,
.theme-twilight.is-halftone::after,
.theme-twilight-deep.is-halftone::after,
.theme-night.is-halftone::after,
.theme-dusk.is-halftone::after,
.theme-orange.is-halftone::after {
    mix-blend-mode: screen;
    opacity: 0.06;
    background-image: radial-gradient(var(--color-text-primary) 1.6px, transparent 1.7px);
}

/* ── Overprint — misregistered riso/screenprint shadow on display type ───── */
.overprint {
    text-shadow:
        3px 3px 0 var(--color-fluoro-green),
        -2px -2px 0 var(--color-pink-velvet);
}
@media (max-width: 480px) {
    .overprint { text-shadow: 2px 2px 0 var(--color-fluoro-green); }
}
@media (prefers-reduced-motion: reduce) {
    /* keep — static effect, no motion concern */
}

/* ── Carousel peek — show a sliver of neighbouring slides (follow.art) ───── */
@media (min-width: 769px) {
    .block-carousel__slide { padding-inline: var(--space-8); }
    .block-carousel__viewport { overflow: visible; }
}

/* Hover micro-interaction upgrades — springy, not just opacity */
.testimonial,
.event-card { transition: transform var(--transition-default) var(--ease-back), border-color var(--transition-default); }
.block-carousel__btn { transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast) var(--ease-back); }
.block-carousel__btn:hover { transform: scale(1.08); }

/* ════════════════════════════════════════════════════════════════════════
   REAL PRINT TEXTURES (assets/texture/)
   Applied with mix-blend-mode so the scans take on the brand colour beneath:
   · multiply  → light wheatpaste creases sink INTO a bright bill (fluoro/pink)
   · screen    → dark grunge/photocopy scratches LIFT out of the ink
   ════════════════════════════════════════════════════════════════════════ */

.tex-crease, .tex-grit, .tex-paper-dark, .tex-photocopy, .tex-canvas, .tex-folds { position: relative; isolation: isolate; }
.tex-crease  > .container, .tex-grit > .container, .tex-paper-dark > .container, .tex-photocopy > .container, .tex-canvas > .container, .tex-folds > .container,
.tex-crease  > .block-beat__text, .tex-grit > .block-beat__text,
.tex-paper-dark > .block-beat__text { position: relative; z-index: 1; }

/* Canvas weave — soft-light: subtle fabric grain for depth on the AM dark grounds.
   Uses ::after so it can sit alongside a ::before texture (e.g. tex-crease on the CTA). */
.tex-canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: -webkit-image-set(url('../../texture/AdobeStock_285542155-canvas.webp') type('image/webp'), url('../../texture/AdobeStock_285542155-canvas.jpeg') type('image/jpeg'));
    background-image: image-set(url('../../texture/AdobeStock_285542155-canvas.webp') type('image/webp'), url('../../texture/AdobeStock_285542155-canvas.jpeg') type('image/jpeg'));
    mix-blend-mode: soft-light;
    opacity: 0.45;
}

/* Creased wheatpaste — multiply: creases darken into the bill's brand colour */
.tex-crease::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: -webkit-image-set(url('../../texture/AdobeStock_302380656.webp') type('image/webp'), url('../../texture/AdobeStock_302380656.jpeg') type('image/jpeg'));
    background-image: image-set(url('../../texture/AdobeStock_302380656.webp') type('image/webp'), url('../../texture/AdobeStock_302380656.jpeg') type('image/jpeg'));
    mix-blend-mode: multiply;
    opacity: 0.55;
}

/* Grey wheatpaste — subtle paper crease on dark twilight surfaces */
.tex-paper-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: -webkit-image-set(url('../../texture/AdobeStock_570342115.webp') type('image/webp'), url('../../texture/AdobeStock_570342115.jpeg') type('image/jpeg'));
    background-image: image-set(url('../../texture/AdobeStock_570342115.webp') type('image/webp'), url('../../texture/AdobeStock_570342115.jpeg') type('image/jpeg'));
    mix-blend-mode: soft-light;
    opacity: 0.5;
}

/* Scratched ink grit — screen: scratches lift out, tinted by the ink below */
.tex-grit::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: -webkit-image-set(url('../../texture/AdobeStock_310688134.webp') type('image/webp'), url('../../texture/AdobeStock_310688134.jpeg') type('image/jpeg'));
    background-image: image-set(url('../../texture/AdobeStock_310688134.webp') type('image/webp'), url('../../texture/AdobeStock_310688134.jpeg') type('image/jpeg'));
    mix-blend-mode: screen;
    opacity: 0.10;
}

/* Folded broadsheet — screen: pale fold-creases + grain lift out of the dark
   ground, a pasted-playbill feel (used on the About Ringmaster, distinct from the
   plain grit on the Trustees board below it). */
.tex-folds::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: -webkit-image-set(url('../../texture/AdobeStock_504393149.webp') type('image/webp'), url('../../texture/AdobeStock_504393149.jpeg') type('image/jpeg'));
    background-image: image-set(url('../../texture/AdobeStock_504393149.webp') type('image/webp'), url('../../texture/AdobeStock_504393149.jpeg') type('image/jpeg'));
    mix-blend-mode: screen;
    opacity: 0.16;
}

/* Photocopy light-leak — screen: blotchy toner/light-leak grain lifts out of the
   ink. A distinct, more dramatic texture than the plain grit (used on the Tiers). */
.tex-photocopy::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: -webkit-image-set(url('../../texture/AdobeStock_320239349.webp') type('image/webp'), url('../../texture/AdobeStock_320239349.jpeg') type('image/jpeg'));
    background-image: image-set(url('../../texture/AdobeStock_320239349.webp') type('image/webp'), url('../../texture/AdobeStock_320239349.jpeg') type('image/jpeg'));
    mix-blend-mode: screen;
    opacity: 0.08;
}

/* ── Logo — recoloured to brand via mask-image (single-ink SVG) ───────────── */
.site-header__logo--mark {
    width: 132px;
    height: 52px;
    background-color: var(--color-text-primary);
    -webkit-mask: url('../../images/brand/Carnival-logo-full-basic.svg') center / contain no-repeat;
    mask: url('../../images/brand/Carnival-logo-full-basic.svg') center / contain no-repeat;
    transition: background-color var(--transition-fast);
}
.site-header__logo--mark:hover { background-color: var(--color-highlight); }
@media (max-width: 768px) {
    /* Centred in the bar on mobile — sized up for presence with margin in the taller bar. */
    .site-header__logo--mark { width: 128px; height: 50px; }
}

/* ════════════════════════════════════════════════════════════════════════
   SHAPED BUTTON (Figma: Web basics → "Button – shaped")
   Scalloped carnival cartouche. The shape is an inline <use> of #btn-shape so it
   recolours via currentColor and stretches to any width (preserveAspectRatio none).
   ════════════════════════════════════════════════════════════════════════ */

.btn-shaped {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 256 / 86;             /* lock to the shape so it never stretches */
    min-width: 190px;
    padding-inline: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-h4);          /* 18px, matches Figma */
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    background: none;
    border: 0;
    cursor: pointer;
}
.btn-shaped__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: visible;
    transition: fill var(--transition-fast), stroke var(--transition-fast), transform var(--transition-fast) var(--ease-back);
}
.btn-shaped__label { position: relative; z-index: 1; }
.btn-shaped:hover .btn-shaped__bg { transform: scale(1.03); }

/* One consistent treatment: 1px white keyline + white label by default; on hover
   the cartouche fills with a bright colour matched to the section. Fluoro is the
   default fill (reads on the ink sections that dominate the page); add --pink on
   bright/fluoro sections where fluoro-on-fluoro wouldn't show. */
.btn-shaped { color: #fff; }
.btn-shaped .btn-shaped__bg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;            /* consistent 1px keyline across all shaped buttons */
    vector-effect: non-scaling-stroke;
}
.btn-shaped:hover,
.btn-shaped:focus-visible {
    color: var(--color-night-ink-dk);
    opacity: 1;   /* override the global a:hover dim — it would make the fill translucent
                     over the section colour (e.g. ink fill → olive green on fluoro) */
}
.btn-shaped:hover .btn-shaped__bg,
.btn-shaped:focus-visible .btn-shaped__bg {
    fill: var(--color-fluoro-green);
    stroke: var(--color-fluoro-green);
}

/* Ink variant — for bright sections (e.g. fluoro Musicians): light-ink keyline +
   ink label by default; fills with light ink (no keyline) + fluoro label on hover. */
.btn-shaped--ink { color: var(--color-night-ink); }
.btn-shaped--ink:hover,
.btn-shaped--ink:focus-visible { color: var(--color-fluoro-green); }
.btn-shaped--ink:hover .btn-shaped__bg,
.btn-shaped--ink:focus-visible .btn-shaped__bg {
    fill: var(--color-night-ink);
    stroke: none;
}

/* Navbar variant — compact, white 1px keyline, fluoro on hover */
.site-header__actions .btn-shaped--nav {
    /* Lock the cartouche to its natural ~14px footprint so the label (1px smaller,
       below) sits roomier INSIDE it — rather than shrinking the whole button.
       min-width sets width only; height stays proportional via the 256:86
       aspect-ratio (never fix height — the preserveAspectRatio="none" scallop squashes). */
    min-width: 13.3rem;
    font-size: 0.875rem;         /* 14px — cartouche footprint baseline */
    padding-inline: 0.5rem;
    color: #fff;
}
/* Label optically sits a touch high in the cartouche — nudge it down. */
.site-header__actions .btn-shaped--nav .btn-shaped__label { transform: translateY(1px); font-size: 0.8125rem; }   /* 13px — 1px under the cartouche baseline, per Olly */
.btn-shaped--nav .btn-shaped__bg { stroke-width: 1; }
/* Caps to read as a destination, matching the other nav items (it's the route
   to the Common Crowd — the main thing). Applies to header + mobile-menu CTA. */
.btn-shaped--nav .btn-shaped__label { text-transform: uppercase; letter-spacing: 0.06em; }
/* Light ink (not the darkest) label on the fluoro hover fill */
.site-header__actions .btn-shaped--nav:hover,
.site-header__actions .btn-shaped--nav:focus-visible { color: var(--color-night-ink); }

/* ── Musicians ink-stamp slot — inky blue, recoloured via mask ───────────── */
/* Stand-in is the inkstamp logo; swap the section markup for an <img> when the
   final ink-stamp graphic exists (deliver it already inky blue, or keep masking). */
.block-musicians__stamp {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 581.5 / 315.51;
    margin-inline: auto;
    background-color: var(--color-night-ink);   /* inky blue #233D4D */
    -webkit-mask: url('../../images/brand/Carnival-logo-inkstamp.svg') center / contain no-repeat;
            mask: url('../../images/brand/Carnival-logo-inkstamp.svg') center / contain no-repeat;
}

/* ── Textured ink-blue display type — distressed stamped ink ─────────────── */
.type-ink-tex { color: var(--color-night-ink); }   /* fallback */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .type-ink-tex {
        background-color: var(--color-night-ink);            /* inky blue base */
        background-image: -webkit-image-set(url('../../texture/AdobeStock_504393149.webp') type('image/webp'), url('../../texture/AdobeStock_504393149.jpeg') type('image/jpeg'));
        background-image: image-set(url('../../texture/AdobeStock_504393149.webp') type('image/webp'), url('../../texture/AdobeStock_504393149.jpeg') type('image/jpeg'));
        background-size: 340px auto;
        background-position: center;
        background-blend-mode: screen;                        /* light cracks lift through the ink */
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   PAGE SCAFFOLD — temporary placeholder for not-yet-designed pages.
   Replace each page's <main> with real content as it's built.
   ════════════════════════════════════════════════════════════════════════ */
.page-stub {
    min-height: 62vh;
    display: grid;
    place-content: center;
    gap: var(--space-5);
    text-align: center;
    padding: calc(72px + var(--space-16)) var(--site-padding) var(--space-20);
}
.page-stub__eyebrow {
    font-family: var(--font-body);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: var(--text-xs);
    color: var(--color-highlight);
    margin: 0;
}
.page-stub__title { margin: 0; }
.page-stub__lead {
    max-width: 46ch;
    margin: 0 auto;
    font-size: var(--text-md);
    color: var(--color-text-secondary);
}
.page-stub__note {
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    color: var(--color-text-secondary);
    opacity: 0.7;
    margin: var(--space-2) 0 0;
}

/* ════════════════════════════════════════════════════════════════════════
   COMMON CROWD PAGE (body.page-crowd) — Figma wireframe 10:251
   Standalone membership page. Reuses the zoetrope, shaped buttons, themes.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Hero — inkstamp logo on a creased bill poster ──────────────────── */
.cc-hero {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    text-align: center;
    overflow: hidden;
    /* Start 80px higher — slide up behind the sticky nav so the header's feathered
       bottom edge dissolves into the pink rather than meeting a hard dark band.
       Extra top padding keeps the centred content clear of the nav. */
    margin-top: -80px;
    padding-block: calc(6px + var(--space-8)) var(--space-12);   /* ~80px clipped off the top so the hero sits higher */
}
/* Stamp + headline are stacked in one grid cell so the headline sits over the
   middle of the logo (the hollow centre of the COMMON CROWD ring). */
.cc-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
}
.cc-hero__inner > * { grid-area: 1 / 1; }
/* Inkstamp Common Crowd mark — sent to the back, recoloured to 20% white so it
   reads as a faint watermark behind the headline (filter whitens the black SVG). */
.cc-hero__stamp {
    width: min(660px, 104vw);
    height: auto;
    display: block;
    z-index: 0;
    opacity: 0.2;
    filter: brightness(0) invert(1);   /* black SVG → white silhouette (alpha/distress preserved) */
    pointer-events: none;
}
.cc-hero__heading {
    position: relative;
    z-index: 1;
    margin: 0;
    line-height: 1.04;
    text-wrap: balance;
    max-width: 18ch;
}
/* Night Ink headline — beats [class*="theme-"] .editorial { color: inherit } (0,2,0) */
.cc-hero .cc-hero__heading { color: var(--color-night-ink); }

@media (max-width: 768px) {
    .cc-hero { min-height: 100vh; padding-block: calc(64px + var(--space-6)) var(--space-12); }
    .cc-hero__stamp { width: min(520px, 124vw); }
}

/* Shared fluoro emphasis word */
.cc-hl { color: var(--color-highlight); }

/* ── 2. Pitch — centred manifesto, lines reveal in sequence ────────────────
   Each "Not…" line is its own <p> so it never mid-wraps and can rise in turn,
   building the anaphora; the fluoro coda lands last. */
.cc-pitch {
    padding-block: var(--space-20);
    text-align: center;
}
.cc-pitch__inner {
    display: grid;
    gap: var(--space-4);
    justify-items: center;
    max-width: 1100px;
}
.cc-pitch__line {
    margin: 0;
    max-width: none;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);   /* 28 → 44px */
    line-height: 1.25;
    text-wrap: balance;
}
.cc-pitch__coda {
    margin: var(--space-6) 0 0;
    font-size: clamp(2rem, 1.4rem + 2.8vw, 3.25rem);      /* 32 → 52px */
    line-height: 1.04;
    color: var(--color-highlight);
}

/* ── 3 & 4. Alternating image / text blocks ────────────────────────────── */
.cc-block { padding-block: var(--space-16); }
.cc-block__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: start;
}
/* Nudge the copy down so its cap-height sits off the image's top edge */
.cc-block__text { padding-top: var(--space-4); }
.cc-block--flip .cc-block__media { order: 2; }            /* image on the right */
/* Frame-Rect rotated 90° (portrait) as the image container — a torn-rectangle
   scallop masks both main images. (Pre-rotated asset so it stays distortion-free
   and responsive; rotating the grid cell itself would break the layout.) */
.cc-block__media img {
    width: 100%;
    height: auto;
    display: block;
    -webkit-mask: url('../../frames/Frame-Rect-portrait.svg') center / 100% 100% no-repeat;
            mask: url('../../frames/Frame-Rect-portrait.svg') center / 100% 100% no-repeat;
}
.cc-block__kicker {
    margin: 0 0 var(--space-2);
    font-family: var(--font-body);
    font-style: italic;
    font-size: var(--text-md);
    color: var(--color-highlight);
}
.cc-block__heading {
    margin: 0 0 var(--space-4);
    line-height: 1.0;
    text-wrap: balance;
}
.cc-block__text p {
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
    line-height: 1.6;
}
.cc-block__text p:last-child { margin-bottom: 0; }
.cc-block__lead {
    margin: 0 0 var(--space-4);
    max-width: none;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(1.375rem, 1rem + 1.4vw, 1.875rem);   /* 22 → 30px */
    line-height: 1.4;
}

@media (max-width: 768px) {
    .cc-block { padding-block: var(--space-12); }
    .cc-block__grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .cc-block__media,
    .cc-block--flip .cc-block__media { order: -1; }        /* image on top when stacked */
}

/* ── 5. Tiers — cards over the rotating COMMONCROWD drum ────────────────── */
.cc-tiers { position: relative; overflow: hidden; padding-block: var(--space-16); }
.cc-tiers__inner { position: relative; z-index: 1; }
.cc-tiers__eyebrow {
    margin: 0 0 var(--space-2);
    text-align: center;
    font-family: var(--font-body);
    font-style: italic;
    font-size: var(--text-md);
    color: var(--color-highlight);
}
.cc-tiers__heading { margin: 0 0 var(--space-10); text-align: center; }
.cc-tiers__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: stretch;
    max-width: 980px;
    margin-inline: auto;
}
.cc-tier {
    --cc-scoop: 26px;            /* concave corner radius */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-8);
    background: transparent;     /* surface + keyline are drawn by the scalloped frames */
    transition: transform var(--transition-default);
}
/* Scalloped (coupon) corners. ::before = keyline frame, ::after = inset ink fill;
   the radial-gradient mask carves a concave quarter-circle out of each corner, and
   the 1.5px reveal of ::before around ::after reads as a keyline that follows the
   scallop (a plain border would be clipped flat across the scoop). */
.cc-tier::before,
.cc-tier::after {
    content: "";
    position: absolute;
    pointer-events: none;
    -webkit-mask:
        radial-gradient(var(--cc-scoop) at 0 0,       #0000 98%, #000) 0 0       / 51% 51% no-repeat,
        radial-gradient(var(--cc-scoop) at 100% 0,    #0000 98%, #000) 100% 0    / 51% 51% no-repeat,
        radial-gradient(var(--cc-scoop) at 0 100%,    #0000 98%, #000) 0 100%    / 51% 51% no-repeat,
        radial-gradient(var(--cc-scoop) at 100% 100%, #0000 98%, #000) 100% 100% / 51% 51% no-repeat;
            mask:
        radial-gradient(var(--cc-scoop) at 0 0,       #0000 98%, #000) 0 0       / 51% 51% no-repeat,
        radial-gradient(var(--cc-scoop) at 100% 0,    #0000 98%, #000) 100% 0    / 51% 51% no-repeat,
        radial-gradient(var(--cc-scoop) at 0 100%,    #0000 98%, #000) 0 100%    / 51% 51% no-repeat,
        radial-gradient(var(--cc-scoop) at 100% 100%, #0000 98%, #000) 100% 100% / 51% 51% no-repeat;
}
.cc-tier::before { inset: 0;     z-index: -2; background: var(--color-border); }
.cc-tier::after  { inset: 1.5px; z-index: -1; background: var(--color-surface); }
.cc-tier:hover { transform: translateY(-6px); }
.cc-tier:hover::before { background: var(--color-highlight); }
/* Founding = the recommended choice: pokes forward (negative margin — keeps clear
   of the data-animate transform reset), fluoro keyline, deeper shadow that follows
   the scallop (drop-shadow, not box-shadow, so it tracks the masked shape). */
.cc-tier--founding {
    margin-block: -12px;
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.35));
}
.cc-tier--founding::before { background: var(--color-highlight); }
.cc-tier--founding::after  { inset: 2px; }
.cc-tier--founding:hover { transform: translateY(-6px); }
/* Recommendation flag — small fluoro tab pinned to the top edge */
.cc-tier__recommend {
    position: absolute;
    top: 0;
    left: var(--space-8);
    transform: translateY(-50%);
    margin: 0;
    padding: 4px 12px;
    background: var(--color-highlight);
    color: var(--color-night-ink-dk);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}
.cc-tier__name {
    margin: 0;
    font-size: var(--text-display-h4);                    /* ~24px Citrus Gothic */
    line-height: 1.0;
    color: var(--color-text-primary);
}
/* Price + rotated rubber stamp share a row */
.cc-tier__pricerow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.cc-tier__price {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-display-h2);                    /* 46px Circus Heavy */
    line-height: 1;
    color: var(--color-highlight);
}
.cc-tier__cur { font-family: var(--font-body); font-weight: 700; font-size: 0.6em; vertical-align: 0.14em; }
.cc-tier__per {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}
/* Rotated rubber-stamp postmark — double keyline, distressed angle */
.cc-tier__stamp {
    flex-shrink: 0;
    transform: rotate(7deg);
    padding: 6px 12px;
    border: 1.5px solid currentColor;
    outline: 1.5px solid currentColor;
    outline-offset: 3px;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--text-xs);
    line-height: 1.05;
    text-align: center;
    opacity: 0.75;
}
.cc-tier__stamp--founding { color: var(--color-highlight); opacity: 1; }
/* Ornament divider (teardrop-line) under the price */
.cc-tier__divider {
    width: 150px;
    aspect-ratio: 619.88 / 50.03;                         /* teardrop-line.svg proportions */
    margin: var(--space-1) 0;
    background-color: var(--color-highlight);
    opacity: 0.85;
    -webkit-mask: url('../../images/ornaments/teardrop-line.svg') left center / contain no-repeat;
            mask: url('../../images/ornaments/teardrop-line.svg') left center / contain no-repeat;
}
.cc-tier__body {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--color-text-primary);
}
.cc-tier__cta { margin-top: auto; align-self: flex-start; }

@media (max-width: 768px) {
    .cc-tiers { padding-block: var(--space-12); }
    .cc-tiers__grid { grid-template-columns: 1fr; }
}

/* ── 6. Image strip — snapshots wheat-pasted on the ink wall ──────────────
   Tilted, overlapping, off-white paper borders + drop-shadow so the crowd
   photos read as pinned/pasted prints, not a stock gallery grid. */
.cc-strip { padding-block: var(--space-16); overflow: hidden; }
.cc-strip__row {
    list-style: none;
    margin: 0 auto;
    padding: var(--space-6) 0;
    max-width: 1100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cc-strip__row li {
    position: relative;                        /* enable z-index stacking + sit above tex-grit */
    margin: 0;
    flex: 0 1 33%;
    background: var(--color-text-primary);   /* off-white paper border */
    padding: 10px 10px 28px;                  /* deeper bottom = instant-photo lip */
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    transition: transform var(--transition-default) var(--ease-back), opacity 0.5s ease;
}
.cc-strip__row li:nth-child(1) { transform: rotate(-3.5deg); margin-right: -2.5%; z-index: 1; }
.cc-strip__row li:nth-child(2) { transform: rotate(1.5deg) translateY(-10px); z-index: 3; }
.cc-strip__row li:nth-child(3) { transform: rotate(2.8deg); margin-left: -2.5%; z-index: 2; }
.cc-strip__row li:hover { transform: rotate(0) translateY(-6px) scale(1.03); z-index: 4; }
/* data-animate reveal sets transform:none, then JS removes it — re-assert tilt
   on the revealed state so the staggered entrance settles into the pinned angle */
.cc-strip__row li.is-visible:nth-child(1) { transform: rotate(-3.5deg); }
.cc-strip__row li.is-visible:nth-child(2) { transform: rotate(1.5deg) translateY(-10px); }
.cc-strip__row li.is-visible:nth-child(3) { transform: rotate(2.8deg); }
.cc-strip__row img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
@media (max-width: 768px) {
    .cc-strip__row { flex-direction: column; gap: var(--space-6); max-width: 360px; }
    .cc-strip__row li,
    .cc-strip__row li.is-visible:nth-child(1),
    .cc-strip__row li.is-visible:nth-child(2),
    .cc-strip__row li.is-visible:nth-child(3) { margin: 0; }
    .cc-strip__row li:nth-child(odd),
    .cc-strip__row li.is-visible:nth-child(odd)  { transform: rotate(-2.5deg); }
    .cc-strip__row li:nth-child(even),
    .cc-strip__row li.is-visible:nth-child(even) { transform: rotate(2deg); }
}

/* ── 7. Closing CTA — creased pink bill torn into the footer ──────────────── */
.cc-closing { position: relative; z-index: 2; padding-block: var(--space-16); text-align: center; }
.cc-closing__inner { display: grid; gap: var(--space-8); justify-items: center; }
.cc-closing__heading {
    margin: 0;
    font-size: clamp(2.75rem, 1.8rem + 4.5vw, 4.5rem);    /* up to 72px */
    line-height: 0.98;
    text-wrap: balance;
}
/* Lighter ink on the pink — beats [class*="theme-"] .editorial { color: inherit } (0,2,0) */
.cc-closing .cc-closing__heading { color: var(--color-night-ink); }

/* Closing overlay — Circus Heavy, white, tilted, lapping up over "rehearsal".
   Smaller than the heading because Circus Heavy is far wider; pulled up past
   the grid gap so it overlaps the line above. */
.cc-closing__join {
    margin: 0;
    margin-top: calc(var(--space-8) * -1 - 0.15em);   /* slight upward overlap onto "…rehearsal." */
    font-family: var(--font-display);                       /* Circus Heavy */
    font-size: clamp(1.75rem, 1rem + 3.4vw, 3.75rem);      /* up to 60px */
    line-height: 0.95;                                      /* tight two-line block */
    color: #fff;
    transform: rotate(-3deg);
    position: relative;
    z-index: 1;
}

/* Seams (both edges of the bill): the torn notches were revealing the darker body
   bg (#15252E) instead of the adjacent section colour, leaving a mismatched fringe.
   TOP — pull the closing UP so the strip's surface shows through its torn top.
   BOTTOM — pull the footer UP so its surface shows through the torn bottom.
   The closing sits at z-index:2 so its teeth paint over both neighbours. */
.cc-strip + .cc-closing { margin-top: -18px; }
.page-crowd .site-footer {
    position: relative;
    z-index: 1;
    margin-top: -18px;
    padding-top: calc(var(--space-12) + 18px);
}

/* Closing button hover — white fill, pink label (overrides the default fluoro fill) */
.cc-closing__cta:hover,
.cc-closing__cta:focus-visible { color: var(--color-pink-velvet-br); }
.cc-closing__cta:hover .btn-shaped__bg,
.cc-closing__cta:focus-visible .btn-shaped__bg {
    fill: var(--color-text-primary);     /* off-white */
    stroke: var(--color-text-primary);
}

/* ════════════════════════════════════════════════════════════════════════
   10. AMOR MUSICAE — invitation  (prototype/amor-musicae.html)
   Classical cream ground + deep-aubergine darks, Besley serif, fluoro as the
   Clockwork-Orange rebel accent. Carnival header/footer bookend it.
   ════════════════════════════════════════════════════════════════════════ */

.page-amor {
    --am-ink:     #241a30;                  /* deep aubergine — AM's classical dark */
    --am-cream:   var(--color-day-cream);   /* #F7F0E3 */
    --am-surface: var(--color-day-surface); /* #EFE7D4 */
    --am-text:    var(--color-day-text);    /* #15252E */
    --am-muted:   #5b5448;                  /* warm grey on cream */
    --am-border:  var(--color-day-border);  /* #D9CEBC */
    background-color: var(--am-cream);
}

/* The trustee NAME sits on the cream card front, so it stays ink (base.css would
   otherwise leave it off-white). Tiers + trustees section headings are now on
   DARK grounds, so they keep base.css's off-white (set explicitly below). */
.am-trustee__name { color: var(--am-text); }

/* Amor trustee cards: dark-velvet front + white text (was cream/oatmeal — too traditional).
   Scoped to the section so it doesn't touch About's board. White name on #B40249 ≈ 6.9:1 (AA). */
.am-trustees {
    --am-surface: var(--color-pink-velvet-dk);   /* #B40249 deep velvet front */
    --am-text:    var(--color-text-primary);     /* white name */
    --am-muted:   rgba(245, 240, 224, 0.82);     /* light role */
    --am-border:  transparent;                   /* no keyline on the velvet cards */
}
/* Trustee photo → Frame-Square cartouche, offset up to overlap the card's top edge
   (echoes the tier-cutout motif). Front face overflow visible so it can break the edge. */
.am-trustees .am-trustee__front { overflow: visible; }
.am-trustees .am-trustee__photo {
    --photo-w: 86%;
    flex: 0 0 auto;
    width: var(--photo-w);
    aspect-ratio: 1 / 1;
    /* negative top = −35% of the (square) image height, so the card edge crosses ~35% down the image */
    margin: calc(var(--photo-w) * -0.35) auto var(--space-2);
    object-fit: cover;
    -webkit-mask: url('../../frames/Frame-Square.svg') center / contain no-repeat;
            mask: url('../../frames/Frame-Square.svg') center / contain no-repeat;
}
/* Scalloped top edge on the velvet card — reads as scalloped corners flanking the photo.
   Velvet moves to a masked ::before so the overlapping photo (a sibling layer) isn't clipped. */
.am-trustees .am-trustee__front { background-color: transparent; }
.am-trustees .am-trustee__front::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--am-surface);
    --corner: 22px;
    /* inverted (concave) rounded TOP corners — a quarter-circle scooped from each top corner */
    -webkit-mask:
        radial-gradient(var(--corner) at 0 0, #0000 98%, #000),
        radial-gradient(var(--corner) at 100% 0, #0000 98%, #000);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(var(--corner) at 0 0, #0000 98%, #000),
        radial-gradient(var(--corner) at 100% 0, #0000 98%, #000);
    mask-composite: intersect;
}
.am-trustees .am-trustee__photo,
.am-trustees .am-trustee__id,
.am-trustees .am-trustee__toggle { position: relative; z-index: 1; }

/* ── Hero — AM monogram + classical statement ──────────────────────────── */
.am-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--am-ink);
    color: var(--color-text-primary);
    /* Renaissance background image (Honthorst, "The Concert") — kept highly visible
       (light scrim up top), only fading to near-opaque aubergine at the bottom so it
       blends into the dark manifesto. Text legibility comes from the text-shadow.
       Using the low-res (_lr) export. */
    background-image:
        linear-gradient(to bottom, rgba(36, 26, 48, 0.12) 0%, rgba(36, 26, 48, 0.20) 45%, rgba(36, 26, 48, 0.55) 75%, rgba(36, 26, 48, 0.90) calc(100% - 30px), rgb(36, 26, 48) 100%),
        url("../../images/renaissance/concert-edited.png");
    background-size: cover;
    background-position: center 32%;
    background-repeat: no-repeat;
    /* Slide up under the sticky feathered nav so the hero runs to the very top of
       the page and the header's feathered edge dissolves into the aubergine. */
    margin-top: -86px;
    /* Always opens proportional to the window: dvh tracks the actual visible
       viewport (handles mobile address-bar resize); vh is the fallback. */
    min-height: 90vh;
    min-height: 90dvh;
    display: grid;
    place-items: center;
    padding-block: calc(86px + var(--space-12)) var(--space-12);
    text-align: center;
}
.am-hero__monogram {
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;              /* centred vertically in the hero */
    width: min(840px, 96%);
    height: auto;
    opacity: 0.30;
    filter: brightness(0) invert(1);   /* dark SVG → white, then blended back */
    /* Pare the monogram back so it sits IN the painting, not on top of it.
       soft-light = gentle embossed sheen. Alternatives: overlay (punchier),
       screen (luminous glow), luminosity (tints to the art beneath). */
    mix-blend-mode: soft-light;
    z-index: -1;
    pointer-events: none;
}
/* Foreground figure cut-outs over the painted plate (lady = central lutenist,
   man = red-robed figure, right). Each drifts on its own subtle parallax for a
   shallow 2.5D depth. Positions are tunable vars so registration can be nudged. */
.am-hero__figures { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.am-hero__fig { position: absolute; bottom: 0; height: auto; will-change: transform; }
/* Pinned hard to the viewport edges, sat at the bottom. Sized off their exported
   widths; the man carries a small extra bump (--man-k) so he reads a touch larger
   than the lady. Tune --man-k / --lady-k to resize either independently. */
.am-hero__fig--man  {
    left: 0;
    width: calc(788px * var(--man-k, 1.08));
    /* Soften the cutout's straight bottom crop into the hero. */
    -webkit-mask: linear-gradient(to bottom, #000 86%, transparent);
            mask: linear-gradient(to bottom, #000 86%, transparent);
}
.am-hero__fig--lady { right: 0; width: calc(497px * var(--lady-k, 1)); }
/* Drop the edge figures on mobile — at phone widths they crowd the statement;
   the plate alone carries the hero. */
@media (max-width: 768px) {
    .am-hero__figures { display: none; }
}

.am-hero__inner { position: relative; z-index: 2; display: grid; gap: var(--space-4); justify-items: center; }
.am-hero__eyebrow {
    margin: 0;
    font-family: var(--font-body);
    font-style: italic;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: var(--text-sm);
    color: var(--color-highlight);
}
.am-hero__statement {
    margin: 0;
    max-width: 22ch;
    font-family: var(--font-body);
    font-weight: 500;
    /* Slightly smaller + airier than the other heroes — Amor Musicae reads more refined. */
    font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.5rem);
    line-height: 1.28;
    letter-spacing: 0.005em;
    text-wrap: balance;
    /* Lifts the cream off the visible painting without needing a heavy scrim. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 22px rgba(0, 0, 0, 0.55);
}
.am-hero__emph { font-style: italic; }
/* Image credit, bottom-left — deliberately SUBTLE (Night Ink Light, low contrast,
   not fully AA): present for the eye that looks, invisible to the one that doesn't. */
.am-hero__credit {
    position: absolute;
    left: var(--space-4);
    bottom: var(--space-4);
    z-index: 2;
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
    color: var(--color-night-ink);   /* Night Ink Light #233D4D */
}
.am-hero__credit cite { font-style: italic; }

/* ── Manifesto — alternating editorial rows (dark, in keeping with the hero) ── */
.am-manifesto {
    background-color: var(--am-ink);
    color: var(--color-text-primary);
    padding-block: var(--space-20) calc(var(--space-20) + var(--space-6));
    /* Feather the hero→manifesto seam: overlap the hero's bottom 30px and fade this
       section (INCLUDING its canvas texture) in, so the texture doesn't begin as a
       hard edge against the hero's flat aubergine. Both grounds are already #241a30,
       so it's the texture — not the colour — that was stepping. */
    margin-top: -30px;
    -webkit-mask: linear-gradient(to bottom, transparent 0, #000 30px);
            mask: linear-gradient(to bottom, transparent 0, #000 30px);
}
.am-manifesto__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.am-manifesto__row + .am-manifesto__row { margin-top: var(--space-20); }
.am-manifesto__row--flip .am-manifesto__media { order: 2; }
/* Piano cutout row — wider media so the cartouche reads bigger, but keep the copy
   column roomy for a longer line length. Desktop only — below 768px the row stacks
   (image above, both full-width) via the responsive rules. */
@media (min-width: 769px) {
    .am-manifesto__row:has(.am-manifesto__media--cutout) { grid-template-columns: 1fr 1.3fr; }
}
/* The whole framed image shifts on the page (parallax via data-parallax on the
   .am-manifesto__media element) — the image fills its frame normally. */
.am-manifesto__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 5 / 6;
    border: 1px solid color-mix(in srgb, var(--color-text-primary) 22%, transparent);
    will-change: transform;
}
.am-manifesto__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Pre-masked cutout (transparent surround, baked cartouche) — no frame/border/crop;
   sits on the aubergine ground at its own ratio, lifted with a soft shadow. */
.am-manifesto__media--cutout {
    aspect-ratio: auto;
    overflow: visible;
    border: 0;
}
.am-manifesto__media--cutout img {
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5));
}
.am-manifesto__heading {
    margin: 0 0 var(--space-4);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    line-height: 1.15;
    text-wrap: balance;
    color: var(--color-text-primary);
}
.am-manifesto__copy p { margin: 0 0 var(--space-3); max-width: 46ch; color: var(--color-text-secondary); }

/* ── "Introducing Amor Musicae" — centred logo + lede INSIDE the manifesto so the
   aubergine canvas ground stays continuous (no section seam). ──────────────── */
.am-manifesto__intro {
    margin-top: var(--space-20);
    max-width: 640px;
    margin-inline: auto;
    display: grid;
    justify-items: center;
    gap: var(--space-10);   /* more air between the (larger) logo and the intro copy */
    text-align: center;
}
.am-intro__logo {
    width: min(420px, 78%);
    height: auto;
    filter: brightness(0) invert(1);   /* dark SVG → white on the aubergine */
}
.am-intro__lede {
    margin: 0;
    max-width: 46ch;
    line-height: 1.5;
    color: var(--color-text-secondary);   /* base body size, matching the manifesto copy */
}

/* ── "Amor Musicae presents" — the Carnival jolt, a bright billposter ───── */
.am-presents {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--space-8));   /* torn top bites up into the aubergine manifesto */
    /* Extra height so the parallax drift never crowds the "Step inside" button
       against the section's bottom edge. */
    padding-block: var(--space-16) var(--space-20);
    text-align: center;
}
.am-presents__inner { display: grid; gap: var(--space-4); justify-items: center; }
/* Carnival logo = ink; everything else in the section = fluoro green (Olly).
   Logos are recoloured via mask (background colour shows through the logo shape). */
.am-presents__amlogo {
    width: min(220px, 58%);
    aspect-ratio: 956.58 / 388.51;
    margin-top: calc(-1 * var(--space-3));   /* nudge the logo up */
    margin-bottom: var(--space-1);           /* a little more space before "Presents" */
    background-color: var(--color-fluoro-green);
    -webkit-mask: url("../../images/brand/AM-logo-stack.svg") center / contain no-repeat;
            mask: url("../../images/brand/AM-logo-stack.svg") center / contain no-repeat;
}
.am-presents__eyebrow {
    margin: 0;
    font-family: var(--font-body);
    font-style: italic;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: var(--text-sm);
    color: var(--color-fluoro-green);
}
.am-presents__wordmark {
    width: min(560px, 84%);
    aspect-ratio: 581.5 / 315.51;
    background-color: #fff;   /* white ink-stamp print on the pink bill */
    -webkit-mask: url("../../images/brand/Carnival-logo-inkstamp.svg") center / contain no-repeat;
            mask: url("../../images/brand/Carnival-logo-inkstamp.svg") center / contain no-repeat;
}
.am-presents__lead { margin: var(--space-3) 0 0; max-width: 46ch; font-size: var(--text-lg); color: var(--color-fluoro-green); }
.am-presents__cta { margin-top: var(--space-3); color: var(--color-fluoro-green); }

/* ── Three tiers of patronage (dark; ornate portrait cards) ────────────── */
.am-tiers {
    position: relative;
    z-index: 3;   /* above .am-trustees (z-index 2) so parallax-shifted card bottoms aren't clipped by the next section's pulled-up overlap */
    /* Single (not doubled) but GENEROUS gap: pull up to cancel the section above's
       bottom padding, then this padding-top IS the gap (~128px). */
    margin-top: calc(-1 * var(--space-12));
    padding-block: var(--space-16) var(--space-12);
    background-color: var(--am-ink);
    color: var(--color-text-primary);
}
/* Fluoro small-caps kicker above the heading — the site's eyebrow convention. */
.am-tiers__kicker {
    margin: 0 auto var(--space-2);           /* margin-inline auto centres the <p> box (base.css p{max-width:68ch} left-pins it otherwise) */
    text-align: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-sm);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-fluoro-green);
}
.am-tiers__heading {
    margin: 0 0 var(--space-20);             /* more room before the cards (cutouts overlap the card tops) */
    text-align: center;
    font-family: var(--font-body);
    font-style: normal;                      /* Besley roman (was italic) */
    font-weight: 400;
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    color: var(--color-text-primary);
}
.am-tiers__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.am-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Generous top padding leaves room for the image to OVERLAP the card edge and
       pushes the name/text down; smaller bottom padding sits the monogram lower. */
    /* Top padding clears the larger artwork cutouts (which straddle the card's top
       edge and reach ~half their height into the card); heading side has ample room. */
    padding: var(--space-20) var(--space-6) var(--space-4);   /* more top room: clears the cutout + the over-image title, with breathing space before the body copy */
    background-color: color-mix(in srgb, var(--color-night-ink) 88%, transparent);   /* night-ink, mostly opaque */
    border: 1px solid rgba(245, 240, 224, 0.38);   /* keyline 1 (single) */
    text-align: center;
}

/* Staggered card entrance: Confratello → Padrone → Mecenate rise + fade in as the
   section scrolls into view (breaks the rigid-block feel). Scoped to .js-anim (added
   by JS) + no-reduced-motion, so cards are NEVER hidden without working JS or for
   reduced-motion users. */
/* Per-column parallax LAG: a transform transition smooths the parallax updates, with a
   longer duration L→R so the columns TRAIL each other during scroll (Confratello leads,
   Mecenate lags). --lag inherits to the card's image + title so they stay synced to it. */
.am-tier:nth-child(1) { --lag: 0.10s; }
.am-tier:nth-child(2) { --lag: 0.24s; }
.am-tier:nth-child(3) { --lag: 0.38s; }

@media (prefers-reduced-motion: no-preference) {
    .js-anim .am-tier {
        opacity: 0;
        translate: 0 34px;                                       /* `translate` property (NOT transform) so the per-card parallax can own `transform` */
        transition: opacity 0.7s ease, translate 0.85s cubic-bezier(0.2, 0.7, 0.2, 1), transform var(--lag, 0s) ease-out;
    }
    .js-anim .am-tier:nth-child(2) { transition-delay: 0.14s, 0.14s, 0s; }   /* stagger the ENTRANCE (opacity+translate), NOT the parallax lag */
    .js-anim .am-tier:nth-child(3) { transition-delay: 0.28s, 0.28s, 0s; }
    .js-anim .am-tiers.is-in .am-tier { opacity: 1; translate: 0 0; }
    /* image + title lag with their column so they stay anchored to the lagging card */
    .js-anim .am-tier__portrait,
    .js-anim .am-tier__name { transition: transform var(--lag, 0s) ease-out; }
}
.am-tier__portrait {
    position: absolute;
    top: 0;
    left: 50%;
    width: 82%;
    aspect-ratio: 1 / 1;
    object-fit: contain;                     /* cutout, not a photo box */
    z-index: 1;                              /* sits BELOW the fluoro title overlay */
    translate: -50% -50%;                    /* centre + straddle the card top edge. Uses the `translate` property (NOT transform) so the [data-parallax] script can drive `transform` without clobbering this centering. */
    filter: brightness(0) invert(1);         /* dark cutout → luminous on the dark card */
    opacity: 0.9;
}
/* Real artwork cutout (e.g. Confratello lute vanitas) — keep its painted colour,
   not the sunburst-placeholder recolour. Add this modifier as each real cutout lands;
   once all three are real, fold filter:none into .am-tier__portrait and drop this. */
.am-tier__portrait--art {
    filter: none;
    opacity: 1;
}
.am-tier__name {
    position: absolute;
    top: var(--space-6);
    left: 50%;
    translate: -50% 0;                       /* centred over the cutout (translate property keeps transform free) */
    z-index: 2;                              /* punk: fluoro title sits ABOVE the classical cutout */
    margin: 0;
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;                        /* lightest real Besley italic (was a faux-bold 600) — de-stuffs */
    font-size: var(--text-2xl);
    letter-spacing: 0.02em;
    color: var(--color-fluoro-green);        /* the Clockwork-Orange jolt against the Renaissance art */
    text-shadow: 0 1px 9px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.5);   /* keeps the fluoro legible over any cutout */
    text-align: center;
    white-space: nowrap;
}
/* A clear (but not excessive) gap before the rule/monogram, even on the longest card. */
.am-tier__desc { margin: 0 0 var(--space-6); color: var(--color-text-secondary); font-size: var(--text-sm); line-height: 1.5; }
.am-tier__mono {
    width: 48px;
    aspect-ratio: 699.86 / 626.12;
    margin-top: auto;   /* pushes the monogram to the card foot, bottom-aligned across cards */
    background-color: rgba(245, 240, 224, 0.65);
    -webkit-mask: url("../../images/brand/AM-logo-symbol.svg") center / contain no-repeat;
            mask: url("../../images/brand/AM-logo-symbol.svg") center / contain no-repeat;
}
/* Prestige nod — keyline count rises with the tier: 1 / 2 / 3 concentric lines
   (box-shadows alternate an am-ink gap then a hairline, outside the 1px border). */
.am-tier--double { box-shadow: 0 0 0 3px var(--am-ink), 0 0 0 4px rgba(245, 240, 224, 0.38); }
.am-tier--triple { box-shadow: 0 0 0 3px var(--am-ink), 0 0 0 4px rgba(245, 240, 224, 0.38),
                               0 0 0 6px var(--am-ink), 0 0 0 7px rgba(245, 240, 224, 0.38); }

/* ── Our Trustees — flip / reveal cards (dark section) ─────────────────── */
.am-trustees {
    position: relative;
    z-index: 2;
    /* Same dark aubergine as the tiers above — pull up to cancel the tiers'
       bottom padding, then this padding-top is the single generous gap.
       Larger top padding = more space before "Our Trustees". */
    margin-top: calc(-1 * var(--space-12));
    padding-block: calc(var(--space-20) + var(--space-8)) var(--space-12);
    background-color: var(--am-ink);
    color: var(--color-text-primary);
}
.am-trustees__heading {
    margin: 0 0 var(--space-20);   /* extra room: the photos overhang the card tops ~35%, so a bigger gap keeps them clear of the heading */
    text-align: center;
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;                        /* lighter, more refined */
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    color: var(--color-text-primary);
}
.am-trustees__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.am-trustee { perspective: 1400px; }
.am-trustee__inner {
    position: relative;
    aspect-ratio: 333 / 459;
    transform-style: preserve-3d;
    transition: transform 0.6s var(--ease-in-out-quint);
}
.am-trustee:hover .am-trustee__inner,
.am-trustee.is-flipped .am-trustee__inner { transform: rotateY(180deg); }
.am-trustee__face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--am-border);
}
.am-trustee__front { background-color: var(--am-surface); }
.am-trustee__photo { width: 100%; flex: 1; min-height: 0; object-fit: cover; display: block; filter: grayscale(0.3); }
.am-trustee__id { padding: var(--space-2) var(--space-3) 0; }
.am-trustee__name { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); }
.am-trustee__role { margin: 0; font-size: var(--text-sm); font-style: italic; color: var(--am-muted); }
.am-trustee__front { cursor: pointer; }   /* whole front flips — see initTrusteeCards() */
.am-trustee__toggle {
    position: relative;                    /* anchors the ≥44px hit overlay */
    margin: var(--space-1) var(--space-3) var(--space-2);
    padding: 0;
    align-self: flex-start;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-highlight);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--am-text);
    cursor: pointer;
}
/* Expand the tap target to ≥44×44 without moving the visible glyph/underline. */
.am-trustee__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
}
.am-trustee__back {
    transform: rotateY(180deg);
    background-color: var(--am-ink);
    color: var(--color-text-primary);
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);   /* 24px — was space-6 (48px), too generous; tighter fits longer bios */
    text-align: left;
}
.am-trustee__snippet { margin: 0; font-size: var(--text-sm); line-height: 1.5; }
.am-trustee__bio-link { color: var(--color-highlight); font-weight: 600; text-decoration: none; }
.am-trustee__bio-link:hover { text-decoration: underline; }
.am-trustee__toggle--back { margin: 0; color: var(--color-text-primary); }

@media (prefers-reduced-motion: reduce) {
    .am-trustee__inner { transition: none; }
}

/* ── CTA — Benedict's outreach ─────────────────────────────────────────── */
.am-cta {
    position: relative;
    z-index: 3;
    /* Same dark ground as the trustees above — pull up to cancel their bottom
       padding, then this padding-top is the single generous gap. */
    margin-top: calc(-1 * var(--space-12));
    padding-block: var(--space-16) var(--space-16);
    background-color: var(--am-ink);
    color: var(--color-text-primary);
    text-align: center;
}
.am-cta__inner { display: grid; gap: var(--space-6); justify-items: center; }
.am-cta__heading { margin: 0; max-width: 30ch; font-family: var(--font-body); font-weight: 500; font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2rem); line-height: 1.25; }
/* Email as a simple centred underline, with the CTA button stacked below it. */
.am-cta__form { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); width: min(560px, 100%); }
.am-cta__input {
    width: 100%;
    max-width: 440px;
    padding: var(--space-2) var(--space-1);
    background: transparent;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-primary) 45%, transparent);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-lg);
    text-align: center;
}
.am-cta__input::placeholder { color: var(--color-text-secondary); }
.am-cta__input:focus-visible { outline: none; border-bottom-color: var(--color-highlight); }
/* CIO line — now sits quietly at the foot of the email-capture section. */
/* Generous gap above the CIO line so removing the sign-off didn't pull it up to
   the button — it stays low in the section. */
/* Fluoro AM monogram, centred between the CTA button and the CIO legal line.
   Equal top margins on the symbol + the legal line → the symbol sits halfway. */
.am-cta__mono {
    width: 44px;
    aspect-ratio: 699.86 / 626.12;
    margin-block-start: calc(var(--space-10) - 12px);   /* +10% size, nudged 12px toward the button */
    background-color: var(--color-fluoro-green);
    -webkit-mask: url("../../images/brand/AM-logo-symbol.svg") center / contain no-repeat;
            mask: url("../../images/brand/AM-logo-symbol.svg") center / contain no-repeat;
}
.am-cta__legal { margin: var(--space-10) auto 0; max-width: 78ch; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-secondary); opacity: 0.8; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .am-trustees__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .am-manifesto__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .am-manifesto__row--flip .am-manifesto__media { order: 0; }
    .am-tiers__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .am-trustees__grid { grid-template-columns: minmax(0, 1fr); max-width: 340px; margin-inline: auto; }
    .am-cta__form { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════════════
   11. MUSICIANS PAGE  (prototype/musicians.html)  —  "Count me in."
   The page reads like a piece of music: a count-in hero, a rhythm strip,
   movements, and a close where the player joins the ensemble. Nocturnal
   bill-poster system; fluoro is the page's signature (Musicians = the home
   fluoro section), with ONE pink movement (the Commons Clause) as the pivot.
   Awwwards register: kinetic type + rotating seal (follow.art), marquee,
   parallax (browserhistory), torn bills + riso overprint, springy reveals
   (griflan). Body copy is the live wireframe copy (Figma 1098:2277).
   ════════════════════════════════════════════════════════════════════════ */

.page-musicians .mus { overflow-x: clip; }

/* ── Navbar: hand-drawn ring (ring.svg) around the current page — Musicians ─
   Replaces the shared brush underline on this page only. Add aria-current on
   the Musicians <a> to trigger it. */
.page-musicians .site-nav__list a[aria-current="page"] { position: relative; }
.page-musicians .site-nav__list a[aria-current="page"]::after { display: none; }
.page-musicians .site-nav__list a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 172%;
    height: 250%;
    transform: translate(-50%, -52%) rotate(-2deg);
    /* ring.svg patched to a white inline fill (the class-based fill rendered blank
       as a CSS mask — see svg-mask rules); recoloured to fluoro via the mask. */
    background-color: var(--color-highlight);
    -webkit-mask: url('../../images/scribbles/ring.svg') center / 100% 100% no-repeat;
            mask: url('../../images/scribbles/ring.svg') center / 100% 100% no-repeat;
    pointer-events: none;
}

/* ── Navbar: on the Common Crowd page, the CTA is "you are here" — swap the
   clean scalloped cartouche keyline for the hand-drawn crowd-focus scribble
   (fluoro, matching the Musicians ring). crowd-focus.svg patched to a white
   inline fill so it works as a mask (see svg-mask rules). Covers the header +
   mobile-menu CTA (both carry aria-current="page" on this page). */
.page-crowd .btn-shaped--nav[aria-current="page"] .btn-shaped__bg { display: none; }
.page-crowd .btn-shaped--nav[aria-current="page"]::before {
    content: "";
    position: absolute;
    inset: -16% -7%;
    background-color: var(--color-highlight);
    -webkit-mask: url('../../images/scribbles/crowd-focus.svg') center / 100% 100% no-repeat;
            mask: url('../../images/scribbles/crowd-focus.svg') center / 100% 100% no-repeat;
    pointer-events: none;
}
/* Current-page CTA: keep the label white (don't run the hover→dark-ink fill,
   which would vanish now there's no filled cartouche behind it). */
.page-crowd .btn-shaped--nav[aria-current="page"],
.page-crowd .btn-shaped--nav[aria-current="page"]:hover,
.page-crowd .btn-shaped--nav[aria-current="page"]:focus-visible { color: #fff; }

/* ── Navbar: on the About page (about.html), "ABOUT" gets a hand-drawn wavy
   underline (wavyline.svg) instead of the shared brush underline. Overrides only
   the mask-image of the shared ::after; bg-fluoro + size:100% 100% are inherited.
   wavyline.svg patched to white inline fill so it masks (see svg-mask rules). */
.page-about .site-nav__list a[aria-current="page"]::after {
    height: 0.5em;
    bottom: -0.42em;
    -webkit-mask-image: url('../../images/scribbles/wavyline.svg');
            mask-image: url('../../images/scribbles/wavyline.svg');
}

/* Mobile: drop the current-page nav scribbles. In the drawer the links are large,
   so the Musicians ring (172%×250%) and the Common Crowd crowd-focus scribble
   scale up and overlap adjacent items. The shared ::after underline is hidden in
   nav.css; here we cover the ::before ornaments and restore the Common Crowd CTA's
   normal cartouche keyline (which the scribble had replaced). */
@media (max-width: 768px) {
    /* shared brush/wavyline underline (::after, all pages incl. About) … */
    .site-nav__list .current-menu-item > a::after,
    .site-nav__list .current-page-ancestor > a::after,
    .site-nav__list .current-menu-ancestor > a::after,
    .site-nav__list a[aria-current="page"]::after,
    /* … Musicians ring + Common Crowd scribble (::before) */
    .page-musicians .site-nav__list a[aria-current="page"]::before,
    .page-crowd .btn-shaped--nav[aria-current="page"]::before { display: none; }
    .page-crowd .btn-shaped--nav[aria-current="page"] .btn-shaped__bg { display: block; }
}

/* ── 1. Hero ──────────────────────────────────────────────────────────────*/
.mus-hero {
    position: relative;
    isolation: isolate;
    min-height: min(92vh, 900px);
    display: grid;
    place-items: center;
    text-align: center;
    padding: calc(var(--space-16) + 32px) var(--site-padding) var(--space-16);
    overflow: hidden;
}
/* Faint fluoro ray-burst behind the headline — a quiet sunburst, masked to fade */
.mus-hero__rays {
    position: absolute;
    inset: -30% -10%;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-conic-gradient(from 0deg at 50% 44%,
            transparent 0deg 7deg,
            rgba(234, 255, 30, 0.05) 7deg 7.7deg),
        radial-gradient(circle at 50% 40%, rgba(234, 255, 30, 0.08), transparent 46%);
    -webkit-mask: radial-gradient(circle at 50% 42%, #000 0, transparent 68%);
            mask: radial-gradient(circle at 50% 42%, #000 0, transparent 68%);
}
/* Hero photo — sits BELOW the sunburst rays + tex-grit (above the night ground);
   rays and texture overlay it, headline sits on top. A night-ink scrim above the
   photo restores the dark mood + light-text contrast and lets the subtle fluoro
   rays / grit read again (they're tuned for a dark ground). */
.mus-hero__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.mus-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--color-night-ink) 62%, transparent) 0%,
        color-mix(in srgb, var(--color-night-ink) 46%, transparent) 38%,
        color-mix(in srgb, var(--color-night-ink-dk) 72%, transparent) 70%,
        var(--color-night-ink-dk) 96%);   /* feather the photo's bottom edge to solid #15252E, seaming into the dark sections below */
}
.mus-hero__inner { position: relative; z-index: 2; max-width: 980px; transform: translateY(-2.5rem); }

.mus-hero__heading {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.04em;
    line-height: 0.9;
}
.mus-hero__l1 {
    font-size: clamp(2.4rem, 1.5rem + 4.6vw, 4.6rem);
    color: var(--color-text-primary);
    font-weight: 400;
}
.mus-hero__dots { color: var(--color-text-primary); }   /* same as the "Musicians" text */
/* The dots stay in place; every 5s an upward WAVE travels through them — each
   lifts and settles, and the tight stagger overlaps adjacent dots so the crest
   passes dot→dot like one performed gesture (no fade, no drop). */
.mus-hero__dot {
    display: inline-block;
    animation: mus-dots-wave 5s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.16s);
}
@keyframes mus-dots-wave {
    0%,
    100% { transform: translateY(0); }
    4%   { transform: translateY(-0.24em); }   /* the wave crest */
    11%  { transform: translateY(0); }          /* settle, then rest */
}

.mus-hero .mus-hero__l2 {
    font-size: clamp(3.4rem, 2rem + 9vw, 8rem);
    color: var(--color-fluoro-green);
    letter-spacing: var(--text-display-ls);
    transform: rotate(-2deg);   /* 2° tilt — same convention as the Circus Heavy shout words */
}
.mus-hero__l2 .mus-char {
    display: inline-block;
    animation: mus-assemble 0.74s var(--ease-back) both;
    animation-delay: calc(0.15s + var(--i) * 0.06s);
}
@keyframes mus-assemble {
    from { opacity: 0; transform: translateY(48px) rotate(-11deg) scale(0.78); }
    to   { opacity: 1; transform: none; }
}

.mus-hero__sub {
    margin: var(--space-4) auto 0;
    max-width: 36rem;            /* keeps line 1 ("…play to a room.") whole on desktop, wraps on mobile */
    font-size: var(--text-lg);
    line-height: 1.4;
    color: var(--color-text-primary);
}

/* ── Rhythm strip — sits seamlessly on the hero's ink ground (no band/border) */
.mus-marquee {
    padding-block: var(--space-2);
    position: relative;
    z-index: 3;
}
.mus-marquee .marquee__track > span { font-size: var(--text-xl); }

/* ── 2. The room — statement + fluoro pay bill ────────────────────────────*/
.mus-room { padding-block: clamp(var(--space-16), 11vw, var(--space-20)); }
.mus-room__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
    gap: clamp(var(--space-8), 6vw, var(--space-16));
    align-items: center;
}
.mus-room__lead {
    margin: 0 0 var(--space-6);
    font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.8rem);
    line-height: 1.02;
    color: var(--color-text-primary);
    font-weight: 400;
}
/* Experiment (29 Jun): "with" / "at" in Circus Heavy, fluoro green, tilted 2°.
   +5px over the surrounding caps; negative margins close the gap to neighbours. */
.mus-room__shout {
    display: inline-block;
    font-family: var(--font-display);   /* Circus Heavy */
    color: var(--color-fluoro-green);
    font-size: calc(1em + 5px);
    line-height: 0.9;
    letter-spacing: -0.01em;
    margin-inline: -0.08em;
    transform: rotate(-2deg);
}
.mus-room__copy p { font-size: var(--text-md); max-width: 46ch; }
.mus-room__copy p + p { margin-top: var(--space-3); color: var(--color-text-secondary); }

.mus-paybill {
    background-color: var(--color-fluoro-green);
    color: var(--color-night-ink-dk);
    padding: var(--space-8) var(--space-6) var(--space-10);
    transform: rotate(-2.4deg);
    justify-self: center;
    max-width: 440px;
}
.mus-paybill__inner { position: relative; z-index: 1; text-align: center; }
.mus-paybill__eyebrow {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);   /* Circus Heavy */
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 0.82;
}
/* Each statement on its own line; fitPaybillEyebrow() (musicians.html foot) scales
   each line's font-size so its NATURAL width fills the bill measure — shorter line
   ("No favours.") ends up a touch larger. Normal word/letter spacing, no justify.
   The clamp is the no-JS fallback (sensible left-aligned size). */
.mus-paybill__eyebrow-line {
    display: block;
    white-space: nowrap;
    font-size: clamp(2rem, 1.72rem + 1.47vw, 2.9rem);
}
.mus-paybill__body { margin: 0; font-size: var(--text-base); line-height: 1.45; }
.mus-paybill__body strong { font-weight: 700; }
.mus-paybill__punch {
    margin: var(--space-4) 0 0;
    /* Citrus Gothic (overrides .display--h3's Circus Heavy); 400 = its only loaded
       weight, so set it explicitly to avoid the h3's 700 faux-bolding it. */
    font-family: var(--font-display-alt);
    font-weight: 400;
    color: var(--color-night-ink-dk);
    line-height: 0.95;
}

/* ── 3. What you'll bring — setlist + openness ────────────────────────────*/
.mus-bring { padding-block: clamp(var(--space-12), 9vw, var(--space-20)); }
.mus-bring__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-areas: "setlist intro" "openness openness";
    column-gap: clamp(var(--space-8), 6vw, var(--space-16));
    row-gap: clamp(var(--space-10), 8vw, var(--space-16));
    align-items: start;
}
.mus-bring__intro { grid-area: intro; }
.mus-bring__heading { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-editorial); color: var(--color-text-primary); }
.mus-bring__copy { font-size: var(--text-md); max-width: 42ch; }

/* Setlist card — a paper sheet taped to the wall, you bring two songs */
.mus-setlist {
    grid-area: setlist;
    position: relative;
    justify-self: center;
    width: min(320px, 100%);
    background: var(--color-day-cream);
    color: var(--color-day-text);
    padding: var(--space-6) var(--space-6) var(--space-8);
    transform: rotate(2.2deg);
    box-shadow: var(--shadow-md);
}
.mus-setlist__tape {
    position: absolute;
    top: -13px;
    width: 92px;
    height: 26px;
    background: rgba(234, 255, 30, 0.55);
    mix-blend-mode: multiply;
}
.mus-setlist__tape--l { left: 8%; transform: rotate(-6deg); }
.mus-setlist__tape--r { right: 8%; transform: rotate(5deg); }
.mus-setlist__title {
    margin: 0 0 var(--space-4);
    text-align: center;
    font-size: var(--text-3xl);
    border-bottom: 2px solid currentColor;
    padding-bottom: var(--space-2);
}
.mus-setlist__line { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; }
.mus-setlist__no { font-family: var(--font-display-alt); font-size: var(--text-xl); }
.mus-setlist__rule { flex: 1; height: 0; border-bottom: 1.5px solid rgba(21, 37, 46, 0.4); }
.mus-setlist__sign { margin: var(--space-6) 0 0; text-align: right; font-style: italic; opacity: 0.55; }

.mus-openness { grid-area: openness; }
.mus-openness__lead { font-size: var(--text-lg); margin: 0 0 var(--space-6); color: var(--color-text-primary); }
.mus-openness__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) clamp(var(--space-6), 5vw, var(--space-12));
}
.mus-openness__list li {
    position: relative;
    padding: var(--space-3) 0 var(--space-3) var(--space-6);
    font-size: var(--text-base);
    border-top: 1px solid var(--color-border);
}
.mus-openness__list li::before {
    content: "\266A";
    position: absolute;
    left: 0;
    top: var(--space-3);
    color: var(--color-fluoro-green);
    font-size: var(--text-md);
    line-height: 1;
}

/* ── 4. The Commons Clause — the pink manifesto pivot ─────────────────────*/
.mus-clause {
    position: relative;
    z-index: 2;
    margin-top: -28px;            /* torn top bites into the bring section's ink */
    padding-block: clamp(var(--space-16), 12vw, calc(var(--space-20) + var(--space-6)));
    text-align: center;
}
.mus-clause__inner { display: grid; justify-items: center; gap: var(--space-6); }
.mus-clause__stamp {
    font-size: var(--text-md);
    color: var(--color-night-ink-dk);
    border: 2px solid var(--color-night-ink-dk);
    padding: var(--space-1) var(--space-3);
    transform: rotate(-3deg);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
}
.mus-clause__heading {
    margin: 0;
    padding-block: var(--space-2);
    font-size: clamp(3rem, 2rem + 5vw, 5.5rem);
    line-height: 1.02;
    color: var(--color-night-ink-dk);
}
.mus-clause__body { max-width: 56ch; }
.mus-clause__body p { font-size: var(--text-md); line-height: 1.4; }
.mus-clause__body p + p { margin-top: var(--space-3); }
.mus-clause__body strong { font-weight: 700; }
/* Closing punch — white Citrus Gothic (.display-alt), not the inked overprint.
   Kept ≥24px so the 3.04:1 white-on-pink still clears AA large-text (3:1). */
.mus-clause__punch {
    margin: var(--space-6) 0 0;
    font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem);
    line-height: 0.95;
    color: var(--color-text-primary);
}

/* ── 5. What we commit to you — promise cards + the three arrivals ────────*/
.mus-commit {
    position: relative;
    z-index: 1;
    margin-top: -28px;            /* pull up under the clause's torn bottom */
    padding-top: calc(clamp(var(--space-12), 9vw, var(--space-16)) + 28px);
    padding-bottom: clamp(9rem, 16vw, 12rem);   /* room for the straddling Frame-Wide sticker's upper half */
}
.mus-commit__head { text-align: center; margin-bottom: var(--space-10); }
/* Centre the capped <p> box itself — the global p{max-width:68ch} otherwise
   left-pins it so text-align:center only centres text inside a left box. */
.mus-commit__head .kicker { margin-inline: auto; }
.mus-commit__heading { margin: var(--space-2) 0 0; font-size: var(--text-editorial); color: var(--color-text-primary); }
.mus-commit__cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}
.mus-commit__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 200px;
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-fluoro-green);
    transition: transform var(--transition-default) var(--ease-back), border-color var(--transition-default);
}
.mus-commit__card:hover { transform: translateY(-6px); border-color: var(--color-highlight); }
.mus-commit__no { font-family: var(--font-display-alt); font-size: var(--text-2xl); color: var(--color-fluoro-green); line-height: 1; }
.mus-commit__card p { margin: auto 0 0; font-size: var(--text-lg); }

.mus-commit__return { margin-top: clamp(var(--space-12), 8vw, var(--space-16)); text-align: center; }
.mus-commit__return-lead { font-size: var(--text-lg); color: var(--color-text-secondary); margin: 0 auto; }
.mus-arrive {
    list-style: none;
    margin: var(--space-6) 0;
    padding: 0;
    display: grid;
    gap: var(--space-1);
    justify-items: center;
}
.mus-arrive li {
    font-size: clamp(1.9rem, 1.1rem + 3vw, 3.4rem);
    line-height: 1.06;
    color: var(--color-text-primary);
}
.mus-arrive em { font-style: normal; color: inherit; }
.mus-arrive__link {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--color-fluoro-green);
    text-underline-offset: 4px;
}
.mus-arrive__link:hover { color: var(--color-fluoro-green); opacity: 1; }
.mus-commit__coda { margin: 0 auto; color: var(--color-text-secondary); }

/* ── 6. Play a future part — the stage-door sign-in ───────────────────────*/
.mus-future {
    position: relative;
    z-index: 2;                  /* lift above .mus-commit (z-index:1) so the sticker's upper half isn't hidden */
    padding-block: clamp(var(--space-16), 11vw, var(--space-20));
    padding-top: clamp(9rem, 16vw, 12rem);   /* clear the straddling sticker's lower half */
}
.mus-future__inner { text-align: center; }
/* Brand-sticker cartouche — COTC_Sticker.gif masked into Frame-Wide, centred on the
   seam (half in the commit section above), tilted, lifted off the ink with a shadow. */
.mus-future__sticker {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    width: clamp(315px, 42vw, 483px);        /* +5% */
    aspect-ratio: 407.76 / 247.52;           /* Frame-Wide viewBox */
    transform: translate(-50%, -50%) rotate(-3deg);
    -webkit-mask: url('../../frames/Frame-Wide.svg') center / contain no-repeat;
            mask: url('../../frames/Frame-Wide.svg') center / contain no-repeat;
    /* Two-layer shadow so it reads on the near-black ink ground: a tight contact
       shadow + a soft ambient lift. Black-on-dark needs high opacity to show. */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.85)) drop-shadow(0 16px 26px rgba(0, 0, 0, 0.7));
    pointer-events: none;
}
.mus-future__sticker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mus-future__kicker { color: var(--color-fluoro-green); margin-inline: auto; }
.mus-future__heading { margin: var(--space-2) 0 var(--space-6); font-size: var(--text-editorial); color: var(--color-text-primary); }
.mus-future__copy { font-size: var(--text-md); max-width: 56ch; margin-inline: auto; }
.mus-future__copy + .mus-future__copy { margin-top: var(--space-3); color: var(--color-text-secondary); }

.mus-form {
    margin-top: var(--space-10);
    max-width: 900px;
    margin-inline: auto;
    display: grid;
    gap: var(--space-4);
    text-align: left;
    padding: clamp(var(--space-6), 5vw, var(--space-12));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}
/* Box header — gives the form its own title + intro (hierarchy inside the panel) */
.mus-form__head {
    text-align: center;
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.mus-form__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-editorial-sm);
    line-height: 1.0;
    color: var(--color-text-primary);
}
.mus-form__lead {
    margin: 0 auto;
    max-width: 56ch;
    font-size: var(--text-base);
    line-height: 1.45;
    color: var(--color-text-secondary);
}
.mus-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
.mus-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.mus-field--full { grid-column: 1 / -1; }
.mus-field label {
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
.mus-field__req { color: var(--color-fluoro-green); letter-spacing: 0.08em; }
.mus-field input,
.mus-field textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background: var(--color-night-ink-dk);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}
.mus-field textarea { min-height: 8rem; line-height: 1.5; resize: vertical; }
.mus-field input::placeholder,
.mus-field textarea::placeholder { color: var(--color-text-secondary); opacity: 0.65; }
.mus-field input:focus-visible,
.mus-field textarea:focus-visible { border-color: var(--color-highlight); outline: 2px solid transparent; }
.mus-form__honeypot { display: none; }
/* CTA centred (project convention), consent centred beneath it */
.mus-form__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
}
.mus-form__submit { min-width: 220px; }
.mus-form__consent { margin: 0; max-width: 48ch; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-secondary); }

/* ── Reduced motion — show every final state, kill the kinetics ───────────*/
@media (prefers-reduced-motion: reduce) {
    .mus-hero__dot { animation: none; opacity: 1; }
    .mus-hero__l2 .mus-char { opacity: 1; transform: none; animation: none; }
}

/* ── Responsive ───────────────────────────────────────────────────────────*/
@media (max-width: 900px) {
    .mus-room__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
    .mus-paybill { justify-self: stretch; max-width: 520px; margin-inline: auto; }
    .mus-bring__inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "intro" "setlist" "openness";
        row-gap: var(--space-10);
    }
    .mus-commit__cards { grid-template-columns: minmax(0, 1fr); }
    .mus-commit__card { min-height: 0; }
}
@media (max-width: 768px) {
    .mus-hero { min-height: 86vh; padding-top: calc(var(--space-12) + 32px); }
    .mus-openness__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .mus-form__row { grid-template-columns: minmax(0, 1fr); }
    .mus-form__submit { width: 100%; min-width: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   12. ABOUT PAGE  (prototype/about.html)  —  "Owned by no one. Tended by everyone."
   Day → night arc mapped to content: warm-cream origins → ink problems →
   fluoro "answer" bill → twilight founders → deep-ink trustees → pink-bill
   close. Reuses .block-founders (founders), .am-trustee (board), .cc-closing
   (CTA). Body bg = #15252E = .theme-night, so torn-bill top notches are safe.
   ════════════════════════════════════════════════════════════════════════ */

/* Scope the trustee-card colour vars (.am-trustee reads these) to night-ink,
   not Amor Musicae's aubergine — the board lives on the ink wall here. */
.page-about {
    --am-ink:     var(--color-night-ink-dk);   /* #15252E — card back */
    --am-surface: var(--color-surface);        /* #233D4D — card front */
    --am-border:  var(--color-border);
    --am-muted:   var(--color-text-secondary);
    --am-text:    var(--color-text-primary);
}

/* ── 1. Hero — warm cream day, the thesis line over a showreel backdrop ──── */
/* The video fills the section *behind* the copy (not a separate band). A warm
   cream scrim keeps the "day" identity + headline legibility and fades to solid
   cream at the foot, handing the eye off to .about-story's cream→ink seam — so
   the blend into the next section is preserved. PLACEHOLDER footage for now. */
.about-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    min-height: clamp(34rem, 80vh, 52rem);
    background-color: var(--color-night-ink);
    color: var(--color-text-primary);
    padding-block: var(--space-20) var(--space-16);
    overflow: hidden;
}
/* Hero-overlay (About + Musicians): pull the hero up under the still-sticky header
   so the image originates at the very top of the viewport, with the feathered nav
   floating over it on load. The hero copy stays vertically centred and clears the nav. */
.page-about .about-hero,
.page-musicians .mus-hero {
    margin-top: calc(-1 * var(--site-header-h));
}
.about-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.02) contrast(1.02);
}
/* Night-ink wash: lighter at the top (image breathes under the nav), more present
   behind the centred copy for light-text contrast, and going solid #15252E at the
   foot so it seams straight into the darker theme-night story below (no cream jump). */
.about-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--color-night-ink) 50%, transparent) 0%,
        color-mix(in srgb, var(--color-night-ink) 64%, transparent) 38%,
        color-mix(in srgb, var(--color-night-ink-dk) 80%, transparent) 70%,
        var(--color-night-ink-dk) 96%);
}
.about-hero__inner { position: relative; z-index: 2; display: grid; gap: var(--space-6); justify-items: center; text-align: center; }
.about-hero__title {
    margin: 0;
    color: var(--color-text-primary);
    line-height: 0.86;
    text-wrap: balance;
    font-size: clamp(2.75rem, 1.7rem + 4.8vw, 4.75rem);
}
/* "Together." in the Circus Heavy fluoro convention (cf. .mus-room__shout):
   +8px at hero size, fluoro green, tilted 2°. On its own line, so no neighbour-gap margin. */
.about-hero__shout {
    display: inline-block;
    font-family: var(--font-display);   /* Circus Heavy */
    color: var(--color-fluoro-green);
    font-size: calc(1em + 8px);
    line-height: 0.9;
    letter-spacing: -0.01em;
    transform: rotate(-2deg);
}
.about-hero__lead {
    margin: 0;
    max-width: 40ch;
    font-size: var(--text-lg);
    line-height: 1.45;
    color: color-mix(in srgb, var(--color-text-primary) 82%, transparent);
}

/* ── 2. The story — three costs, alternating editorial rows ───────────── */
/* Day → night seam: pull the dark story UP over the cream hero's bottom
   padding, then feather its top in over 64px so cream blends to ink (dawn →
   dusk) rather than stepping. */
.about-story {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--space-8));
    padding-block: calc(var(--space-16) + var(--space-8)) var(--space-20);
    -webkit-mask: linear-gradient(to bottom, transparent 0, #000 var(--space-8));
            mask: linear-gradient(to bottom, transparent 0, #000 var(--space-8));
}
.about-story__intro { max-width: 60ch; margin: 0 auto var(--space-16); text-align: center; }
.about-story__kicker {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display-alt);
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);   /* match the site's section-headline scale (cf. .about-answer__heading) */
    line-height: 1.0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-highlight);
}
.about-story__intro p { margin-inline: auto; }
.about-story__intro p + p { margin-top: var(--space-3); }

.about-story__rows { display: grid; gap: var(--space-20); }
.about-story__row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-12);
    align-items: center;
}
.about-story__row--flip .about-story__media { order: 2; }
.about-story__media {
    position: relative;
    will-change: transform;
}
/* No fixed crop box / keyline — show the whole image at its own ratio (the
   musician PNG is a rough-cut transparent photo, sits on the ink ground).
   drop-shadow (not box-shadow) hugs the alpha edge so it lifts the cut-out off
   the ink rather than drawing a rectangle behind the transparent areas. */
.about-story__media img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(0.45) contrast(1.05) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.55));
}
/* Row TWO (ok-supplement.png) — the bottle sits in a large transparent canvas, so
   scale it up to match the footprint of the other rows' edge-to-edge cut-outs.
   (Only the transparent margins overflow.) Replace with a tighter-cropped export to drop this. */
.about-story__row--flip .about-story__media img { transform: scale(1.1); }
/* .about-story__copy specificity (0,2,0) — match it so the index stays fluoro. */
.about-story__copy .about-story__index {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    line-height: 1;
    color: var(--color-highlight);
}
.about-story__heading {
    margin: 0 0 var(--space-4);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
    line-height: 1.12;
    text-wrap: balance;
}
.about-story__copy p { margin: 0 0 var(--space-3); max-width: 48ch; color: var(--color-text-secondary); }
.about-story__copy .about-story__punch {
    margin-top: var(--space-4);
    color: var(--color-text-primary);
    font-weight: 600;
    font-size: var(--text-md);
}
/* Inline citation link (e.g. the BMJ study) — reads as body copy with a wavy
   keyline in the text colour; both text and underline go fluoro on hover/focus
   (decoration is currentColor). Native title= carries the source. */
.about-cite {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}
.about-cite:hover,
.about-cite:focus-visible { color: var(--color-fluoro-green); }

/* ── 3. Another way — bright fluoro bill, the turn ────────────────────── */
.about-answer {
    position: relative;
    z-index: 1;                              /* teeth paint over the founders below */
    margin-top: calc(-1 * var(--space-8));   /* torn top bites into the dark story */
    padding-top: var(--space-12);
    /* extra bottom room so the low-hanging "Application in Progress" stamp clears the
       torn edge (revert to a plain var(--space-12) when the stamp is removed) */
    padding-bottom: calc(var(--space-12) + var(--space-8));
    text-align: center;
}
/* Amor Musicae monogram — bright pink, tilted 5°, bleeding off the LEFT edge of the
   viewport (clipped at x:0 by the .bill clip-path). A rave-poster overprint mark
   behind the copy on the fluoro bill. Alpha-masked SVG so it takes the pink fill. */
.about-answer__monogram {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 0;                              /* behind the copy (.about-answer__inner = z-index 1) */
    width: clamp(260px, 34vw, 460px);
    aspect-ratio: 699.8 / 626.11;
    transform: translate(-32%, -50%) rotate(-5deg);
    background-color: var(--color-pink-velvet-br);
    -webkit-mask: url('../../images/brand/AM-monogram-ink.svg') no-repeat center / contain;
            mask: url('../../images/brand/AM-monogram-ink.svg') no-repeat center / contain;
    pointer-events: none;
}
.about-answer__inner { display: grid; gap: var(--space-4); justify-items: center; }
.about-answer__eyebrow {
    margin: 0;
    font-family: var(--font-body);
    font-style: italic;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: var(--text-sm);
}
.about-answer__heading {
    margin: 0;
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    line-height: 1.0;
    text-transform: uppercase;
}
/* Bright pink, matching the monogram. Scoped under .theme-fluoro to beat the
   theme heading reset ([class*="theme-"] :is(h1…h6){color:inherit}). */
.theme-fluoro .about-answer__heading { color: var(--color-pink-velvet-br); }
.about-answer__lead { margin: 0; max-width: 46ch; font-size: var(--text-lg); }
.about-answer__note { margin: 0; max-width: 62ch; font-size: var(--text-sm); opacity: 0.78; }
/* TEMP — "Application in Progress" stamp on the Amor Musicae bill; CIO registration
   pending. The wrap shrinks to the note so the stamp can anchor to its bottom-right
   corner. Remove .about-answer__stamp (rule + markup) once the charity number lands. */
.about-answer__note-wrap { position: relative; }
.about-answer__stamp {
    position: absolute;
    right: -40px;                        /* nudged further off the text */
    bottom: 0;
    width: clamp(97px, 10.5vw, 132px);   /* 12% smaller than the first pass */
    height: auto;
    transform: translate(38%, 46%) rotate(-7deg);   /* sits slightly lower over the corner */
    pointer-events: none;
}

/* ── 3b. Unplugged. Uninhibited. — the creed; a deep-ink "held breath" between
   the fluoro answer and the twilight founders. Slides up under the bill's torn
   bottom, just as the founders used to. ──────────────────────────────────── */
.about-answer + .about-creed {
    position: relative;
    z-index: 0;                                       /* sits under the bill's teeth */
    margin-top: -18px;                                /* deep ink shows through the bill's torn bottom */
}
.about-creed {
    text-align: center;
    /* Extra bottom padding so the three-line "No audience…" chant isn't crowded
       against the founders seam below. */
    padding-block: calc(var(--space-16) + 18px) var(--space-20);
    isolation: isolate;                      /* tex-grit already sets position:relative */
    overflow: hidden;                        /* clip the cartouches that bleed off the side edges */
}
/* Imagery: organic image cartouches bleeding in from the side margins (Figma
   Unplugged). They live in the wide gutters beside the centred copy and drift on
   scroll (data-parallax). Hidden once the gutters get too narrow to clear the copy. */
.about-creed__cartouche {
    position: absolute;
    z-index: 0;                              /* behind the centred copy (.container is z-index:1) */
    overflow: hidden;
    -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;    mask-size: 100% 100%;
    -webkit-mask-position: center;   mask-position: center;
}
.about-creed__cartouche img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.12) contrast(1.03);
}
/* Frame shapes from assets/frames. Anchored to centre (calc) so they sit in the
   gutters beside the copy and never bleed off the viewport; staggered L/R. */
/* Varied sizes + a looser, asymmetric stagger; all anchored outside the ~480px
   centred copy so none crowds the text. c1 is the hero. */
.about-creed__cartouche--1 { left:  calc(50% - 590px); top: 300px;    width: 340px; height: 340px;
    -webkit-mask-image: url('../../frames/Frame-Square.svg'); mask-image: url('../../frames/Frame-Square.svg'); }
.about-creed__cartouche--2 { right: calc(50% - 470px); top: 470px;    width: 216px; height: 164px;
    -webkit-mask-image: url('../../frames/Frame-Rect.svg');   mask-image: url('../../frames/Frame-Rect.svg'); }
/* c3 = PORTRAIT: Frame-Rect rotated 90° via the inner .about-creed__frame-rot,
   with the photo counter-rotated so it stays upright. */
.about-creed__cartouche--3 { left:  calc(50% - 548px); top: 700px;    width: 224px; height: 300px; overflow: visible; }
.about-creed__cartouche--4 { right: calc(50% - 540px); top: 1240px; width: 290px; height: 290px;
    -webkit-mask-image: url('../../frames/Frame-Square.svg'); mask-image: url('../../frames/Frame-Square.svg'); }
/* c5 = the larger image on the right; c6 = a smaller left filler lower down. */
.about-creed__cartouche--5 { right: calc(50% - 588px); top: 880px;    width: 320px; height: 320px;
    -webkit-mask-image: url('../../frames/Frame-Square.svg'); mask-image: url('../../frames/Frame-Square.svg'); }
.about-creed__cartouche--6 { left:  calc(50% - 520px); top: 1100px;   width: 214px; height: 162px;
    -webkit-mask-image: url('../../frames/Frame-Rect.svg');   mask-image: url('../../frames/Frame-Rect.svg'); }

.about-creed__frame-rot {
    position: absolute; top: 50%; left: 50%;
    width: 300px; height: 224px;                          /* landscape = the cartouche box swapped */
    transform: translate(-50%, -50%) rotate(90deg);       /* → portrait scallop */
    overflow: hidden;
    -webkit-mask: url('../../frames/Frame-Rect.svg') center / 100% 100% no-repeat;
            mask: url('../../frames/Frame-Rect.svg') center / 100% 100% no-repeat;
}
.about-creed__cartouche--3 .about-creed__frame-rot img {
    position: absolute; top: 50%; left: 50%;
    width: 224px; height: 300px;                          /* portrait; counter-rotated upright */
    transform: translate(-50%, -50%) rotate(-90deg);
    object-fit: cover;
}

@media (max-width: 1200px) {
    /* Side gutters too narrow for the larger cartouches — hide them. */
    .about-creed__cartouche { display: none; }
}
.about-creed__inner { display: grid; gap: var(--space-8); justify-items: center; }
.about-creed__heading { margin: 0; line-height: 1.0; }   /* stacked via <br> in markup */
.about-creed__body { max-width: 46ch; }
.about-creed__body p {
    margin: 0 0 var(--space-4);
    font-size: var(--text-md);
    line-height: 1.7;
    color: var(--color-text-secondary);
    text-wrap: pretty;                       /* avoids last-line orphans / runts */
}
.about-creed__body p:last-child { margin-bottom: 0; }
/* The two voiced beats — Besley, larger, in primary ink (in-voice, not shouted). */
.about-creed__body p.about-creed__punch {
    margin-block: var(--space-6);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: clamp(1.4rem, 1.05rem + 1.4vw, 1.95rem);
    line-height: 1.14;
    color: var(--color-text-primary);
    text-wrap: balance;                      /* keeps the short beats evenly split */
}
/* The closing chant, deliberately broken to three lines (<br> in markup) — a
   little extra leading + breathing room top and bottom so it lands like a drumbeat. */
.about-creed__body p.about-creed__punch--stack {
    margin-block: var(--space-8);
    line-height: 1.28;
    text-wrap: nowrap;                       /* honour the hand-set line breaks */
}
/* Inline link to the Common Crowd page — reads as body copy, with a wavy fluoro
   keyline as the link affordance; turns fluoro on hover/focus. */
.about-creed__crowd {
    color: inherit;
    white-space: nowrap;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--color-fluoro-green);
    text-underline-offset: 4px;
    transition: color var(--transition-fast);
}
.about-creed__crowd:hover,
.about-creed__crowd:focus-visible { color: var(--color-fluoro-green); }

/* ── 3c. Pink call — the bill now sits between creed and founders (moved here
   29 Jun). Wire BOTH torn edges so they bite into the neighbours instead of
   leaving a dead body-bg band (torn-edge rule). ──────────────────────────── */
.about-creed + .about-closing {
    position: relative;
    z-index: 2;                                       /* pink teeth paint over the creed ink */
    margin-top: -26px;                                /* bill's torn top bites up into the deep ink */
}

/* ── 4. Founders — reuse .block-founders; pull up under the bill's torn bottom
   so the twilight wall shows through the notches, no dead gap. ────────────── */
.about-closing + .about-founders {
    position: relative;
    z-index: 0;                                       /* slides under the bill's z-index:2 teeth */
    margin-top: -26px;                                /* close the body-bg band below the bill */
    padding-top: var(--space-8);                      /* the single intended gap */
}
.block-founders__role {
    margin: 0 0 var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-highlight);
}
/* Founder names in the Citrus Gothic display voice, larger (About only — Home's
   founders block keeps its own treatment). */
/* ── Ringmaster section: asymmetric editorial layout (Figma 2975:1767).
   Benedict = image LEFT of copy, block sits low. Katnip = image ABOVE copy,
   rides high. Soft organic cartouche blob behind each full-colour cutout; the
   cutouts parallax over the static blobs. ─────────────────────────────────── */
/* Benedict (image-beside-copy) needs a wider column than Katnip (image-above);
   uneven split gives Benedict's bio room so it doesn't wrap into a tall ribbon. */
.about-founders .block-founders__grid { align-items: start; grid-template-columns: 1.6fr 1fr; }

/* Names: Citrus Gothic display, large (Figma ~64px). */
.about-founders .block-founders__name {
    font-family: var(--font-display-alt);
    font-weight: 400;
    font-size: clamp(2.5rem, 1.9rem + 2.4vw, 4rem);
    line-height: 1.0;
    letter-spacing: 0.01em;
}
/* Bio: white + larger, per Figma (not the muted grey). Exclude the role kicker so
   it keeps its fluoro-green colour (the bare-element rule was whitening it). */
.about-founders .block-founders__bio p:not(.block-founders__role) { color: var(--color-text-primary); font-size: var(--text-md); }
/* Cap both bios to the same width so left + right columns share one line length. */
.about-founders .block-founders__bio { max-width: 24rem; }
.about-founders .block-founders__role { color: var(--color-highlight); }   /* Fluoro green (Figma) */

/* Portrait shell — full colour, blob sits behind the cutout. */
.about-founders .block-founders__portrait {
    position: relative;
    isolation: isolate;
    background: none;
    overflow: visible;
    filter: none;
    -webkit-mask: none;
            mask: none;
}
.about-founders .block-founders__portrait img {
    position: relative;           /* parallax translate applies here, over the blob */
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
}
/* Each person anchors its own cartouche + cutout. */
.about-founders .block-founders__person { position: relative; isolation: isolate; }
/* Cartouche = the project's Frame-Wide shape (assets/frames), as a soft lighter-ink
   colour blob sitting WIDE behind the figure + name cluster (Figma). */
.about-founders .block-founders__cartouche {
    position: absolute;
    z-index: -1;
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    -webkit-mask: url('../../frames/Frame-Wide.svg') center / 100% 100% no-repeat;
            mask: url('../../frames/Frame-Wide.svg') center / 100% 100% no-repeat;
}

/* Benedict — image left, copy right; pushed down. */
.about-founders .block-founders__person--benedict {
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: var(--space-6);
    align-items: start;
    margin-block-start: var(--space-12);
}
.about-founders .block-founders__person--benedict .block-founders__portrait { width: 200px; }
.about-founders .block-founders__person--benedict .block-founders__cartouche {
    left: -12%; top: 2%; width: 576px; height: 421px;   /* shared cartouche size */
}

/* Katnip — image above copy; rides high. */
.about-founders .block-founders__person--katnip {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    justify-items: start;
    margin-block-start: -230px;          /* pull her image up ~level with the section heading */
}
.about-founders .block-founders__person--katnip .block-founders__portrait { width: 420px; }   /* 5% larger */
/* Close up the image→copy spacing — copy rides up under the figure (Figma). */
.about-founders .block-founders__person--katnip .block-founders__bio { margin-block-start: -20px; }   /* nudged up ~2% (still clears her feet) */
.about-founders .block-founders__person--katnip .block-founders__cartouche {
    left: -22%; top: 14%; width: 576px; height: 421px;   /* same size as Benedict's; sits behind lower figure + under the title text; rotated 30° via data-rotate */
}

@media (max-width: 768px) {
    /* Collapse the two-up grid to one column (overrides the desktop 1.6fr 1fr,
       which otherwise wins inside the global mobile rule by specificity). */
    .about-founders .block-founders__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
    /* Stack each person simply; drop the offsets/rotation so nothing collides. */
    .about-founders .block-founders__person--benedict,
    .about-founders .block-founders__person--katnip {
        grid-template-columns: 1fr;
        row-gap: var(--space-4);
        margin-block-start: 0;
        justify-items: start;
    }
    .about-founders .block-founders__person--benedict .block-founders__portrait,
    .about-founders .block-founders__person--katnip .block-founders__portrait { width: min(300px, 78vw); }
    .about-founders .block-founders__cartouche { transform: rotate(-8deg); }
}

/* ── 5. Trustees — board + expanding bio drawer ───────────────────────────
   Compact portrait cards in a grid; selecting one unfurls a full-width drawer
   beneath that row carrying the complete bio + a larger portrait. Replaces the
   old flip card, which couldn't hold a long bio. One open at a time; the drawer
   is a full-row grid item (grid-column 1 / -1) relocated + opened by JS. ────── */
.about-trustees {
    position: relative;
    z-index: 1;
    padding-block: var(--space-16);
}
.about-trustees__heading { margin: 0 0 var(--space-3); text-align: center; line-height: 1.0; }
.about-trustees__intro {
    max-width: 60ch;
    margin: 0 auto var(--space-12);
    text-align: center;
    color: var(--color-text-secondary);
}
.trustee-board {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Column count via --cols (set inline per page): About has 4 trustees, Amor 3.
       Falls back to 3. Narrow screens collapse to 2 / 1 via the media queries below. */
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: var(--space-6);
    align-items: stretch;   /* equal-height cards regardless of name/role wrap length */
}
.trustee-board__item { display: flex; }   /* let the card fill the cell height */

/* ── Card (the whole thing is the toggle button) ──────────────────────── */
.trustee-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    background-color: var(--am-surface);
    border: 1px solid var(--am-border);
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.trustee-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32); }
.trustee-card:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 3px; }
.trustee-card__photo { display: block; aspect-ratio: 6 / 7; overflow: hidden; }
.trustee-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.3); transition: filter var(--transition-fast); }
.trustee-card:hover .trustee-card__photo img { filter: grayscale(0); }
.trustee-card__id { padding: var(--space-3); }
.trustee-card__name { display: block; font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); line-height: 1.15; }
.trustee-card__role { display: block; margin-top: var(--space-1); font-size: var(--text-sm); font-style: italic; color: var(--am-muted); }
/* "Read bio" affordance with a +/– indicator that flips when this card is active. */
.trustee-card__cue {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-highlight);
}
.trustee-card__cue::after {
    content: "+";
    font-size: 1.25em;
    line-height: 1;
    font-weight: 400;
    transition: transform var(--transition-fast);
}
.trustee-card[aria-expanded="true"] { border-color: var(--color-fluoro-green); }
.trustee-card[aria-expanded="true"] .trustee-card__photo img { filter: grayscale(0); }
.trustee-card[aria-expanded="true"] .trustee-card__cue::after { content: "\2013"; }   /* en-dash */

/* ── Drawer (full-width row, animated open via grid-template-rows) ─────── */
.trustee-board__drawer {
    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s var(--ease-in-out-quint);
    margin-top: calc(-1 * var(--space-6) + var(--space-2));   /* tuck up close to its row */
}
/* The class rule above would otherwise beat the UA [hidden] (same specificity,
   later source), leaving a closed drawer in flow as a phantom full-width row.
   This higher-specificity rule lets [hidden] win so a closed drawer leaves grid flow. */
.trustee-board__drawer[hidden] { display: none; }
.trustee-board__drawer.is-open { grid-template-rows: 1fr; }
.trustee-drawer__inner {
    min-height: 0;
    overflow: hidden;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: var(--space-10);
    padding: var(--space-10);
    background-color: var(--am-surface);
    border: 1px solid var(--am-border);
    border-top: 2px solid var(--color-fluoro-green);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.trustee-drawer__portrait { aspect-ratio: 6 / 7; overflow: hidden; border: 1px solid var(--am-border); }
.trustee-drawer__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.15); }
.trustee-drawer__body { align-self: center; max-width: 60ch; }
.trustee-drawer__role {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-highlight);
}
.trustee-drawer__name {
    margin: 0 0 var(--space-4);
    font-family: var(--font-display-alt);
    font-weight: 400;
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    line-height: 1.0;
}
.trustee-drawer__name:focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 4px; }
.trustee-drawer__bio p { margin: 0 0 var(--space-3); font-size: var(--text-md); line-height: 1.7; color: var(--color-text-secondary); }
.trustee-drawer__bio p:last-child { margin-bottom: 0; }
.trustee-drawer__close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--am-border);
    border-radius: 50%;
    color: var(--color-text-primary);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.trustee-drawer__close:hover,
.trustee-drawer__close:focus-visible { border-color: var(--color-fluoro-green); color: var(--color-fluoro-green); }

@media (prefers-reduced-motion: reduce) {
    .trustee-board__drawer { transition: none; }
    .trustee-card { transition: none; }
    .trustee-card:hover { transform: none; }
}

/* ── 6. Trustee board → footer (closing bill moved up to §3c, 29 Jun) ───── */
.page-about .site-footer {
    position: relative;
    z-index: 1;
    margin-top: -18px;
    padding-top: calc(var(--space-12) + 18px);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .trustee-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .about-story__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .about-story__row--flip .about-story__media { order: 0; }
    .about-story__media { max-width: 460px; }
    /* Drawer stacks: portrait above the bio, lighter padding. */
    .trustee-drawer__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6); }
    .trustee-drawer__portrait { max-width: 240px; }
}
@media (max-width: 560px) {
    .trustee-board { grid-template-columns: minmax(0, 1fr); max-width: 360px; margin-inline: auto; }
}