/* ============================================================================
   ios-hoafst — main stylesheet
   Ports landing-c.jsx + schedule.jsx into a WordPress classic theme.
   ============================================================================ */

/* ── Design tokens ─────────────────────────────────────────────────────── */
:root {
    /* Palette */
    --coral:    #ee5e3a;
    --coral-d:  #d34225;
    --coral-dd: #b53319;
    --navy:     #1a1f3a;
    --cream:    #fdf0d6;
    --sky:      #c5e0eb;
    --sky-d:    #a8c8d4;
    --red:      #d63a26;
    --ink:      #1a1410;

    /* Schedule category colors */
    --cat-h: #e8995a;
    --cat-f: #6b8f5e;
    --cat-t: #c4382a;
    --cat-k: #9a73c8;
    --cat-m: #d4a050;
    --cat-n: #3a4060;

    /* Fonts — swap any of these at the top of main.css to retheme */
    --font-wordmark: "Bodoni Moda", "Times New Roman", serif;        /* big Hoafstfest title only */
    --font-display:  "Fraunces", "Times New Roman", serif;           /* section headings, quote */
    --font-body:     "Inter", system-ui, sans-serif;
    --font-mono:     "JetBrains Mono", ui-monospace, monospace;
    --font-label:    "Antonio", "Inter", sans-serif;

    /* Utility */
    --rule:        rgba(26, 20, 16, 0.12);
    --rule-strong: rgba(26, 20, 16, 0.28);
    --muted:       rgba(26, 20, 16, 0.55);
    --chip:        rgba(26, 20, 16, 0.04);
    --paper:       #ffffff;
    --bg:          var(--cream);
    --accent:      var(--coral);
}

/* ── Reset & base ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* The navy here is what iOS Safari shows in its rubber-band overscroll area
   (top and bottom). Matches the announcement strip up top and the footer
   below so the bounce reads as a continuation, not a flash of a different
   color. The page-body bg can stay coral underneath the actual sections. */
html {
    -webkit-text-size-adjust: 100%;
    background: var(--navy);
}
body {
    margin: 0;
    /* navy (not coral) so iOS Safari's bottom rubber-band overscroll — which
       picks up the body colour — blends with the footer instead of flashing
       orange. Every section paints its own background, so this backdrop is
       never visible during normal scrolling. */
    background: var(--navy);
    color: var(--cream);
    font-family: var(--font-body);
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: no-preference) {
    body {
        animation: lc-page-in 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    body.is-leaving {
        animation: lc-page-out 240ms ease-in both;
    }
}
@keyframes lc-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes lc-page-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
img, video, picture { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 800px) { .container { padding: 0 40px; } }
.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); font-weight: 400; }
.muted { color: var(--muted); }
.eyebrow {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--coral-dd);
}

/* ── Announcement marquee ──────────────────────────────────────────────── */
.lc-ann {
    background: var(--navy);
    color: var(--cream);
    padding: 14px 0;
    overflow: hidden;
}
.lc-ann-row {
    display: inline-flex;
    white-space: nowrap;
    animation: lc-mq 42s linear infinite;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
}
@keyframes lc-mq { to { transform: translateX(-33.33%); } }
.lc-ann-line { padding-right: 48px; }
.lc-ann em {
    color: var(--cream);
    opacity: 0.5;
    font-style: normal;
    padding: 0 14px;
    letter-spacing: 0;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.lc-hero {
    position: relative;
    min-height: 100vh;
    /* Pull the hero up so its photo extends under the transparent sticky
       navbar (otherwise the body's coral bg shows through between the
       marquee and the hero photo). Top padding already accounts for the
       overlap so wordmark/stickers/CTA stay clear of the navbar. */
    margin-top: -80px;
    padding: clamp(100px, 12vh, 150px) 40px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;     /* centers the whole group (stickers, wordmark, partners, CTA) */
    background:
        radial-gradient(80% 60% at 50% 40%, color-mix(in oklab, var(--coral) 80%, white 20%), var(--coral) 70%),
        radial-gradient(60% 50% at 50% 90%, var(--coral-d), var(--coral) 70%),
        var(--coral);
    overflow: hidden;
}
@media (min-width: 800px) {
    .lc-hero {
        margin-top: -92px;
        padding: clamp(110px, 12vh, 160px) 64px;
    }
}

.lc-hero > .lc-cta-main {
    align-self: center;
    margin: clamp(28px, 5vh, 56px) auto 0;
    z-index: 4;
}
@media (max-width: 700px) {
    .lc-hero > .lc-cta-main {
        align-self: stretch;
        margin-left: 24px;
        margin-right: 24px;
    }
}

.lc-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.lc-hero-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
/* Dark gradient overlay — darker at the bottom, fades up to transparent —
   so the wordmark and CTA stay readable over busy photos */
.lc-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0.12) 85%,
        transparent 100%
    );
    pointer-events: none;
}

.lc-sun {
    position: absolute;
    left: 50%; top: 38%;
    transform: translate(-50%, -50%);
    width: 1200px; height: 1200px;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--coral) 70%, #fff 30%), transparent 70%);
    opacity: 0.7;
    pointer-events: none;
    filter: blur(20px);
}

.lc-art {
    position: absolute;
    opacity: 0.95;
    mix-blend-mode: multiply;
    pointer-events: none;
}
/* Middle group (stickers, wordmark, partners) flows naturally inside the hero;
   justify-content: center on .lc-hero handles the vertical centering since
   .lc-top and .lc-cta-main are absolutely positioned above. */

.lc-art-l { left: -80px; top: 80px; width: 380px; transform: rotate(-8deg); }
.lc-art-r { right: -40px; top: 60px; width: 340px; transform: rotate(12deg); }
@media (max-width: 900px) {
    .lc-art-l { width: 200px; left: -60px; top: 280px; }
    .lc-art-r { width: 200px; right: -50px; top: 320px; }
}

/* ── Top bar ───────────────────────────────────────────────────────────── */
.lc-top {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    transition: background 200ms ease, backdrop-filter 200ms ease;
}
@media (min-width: 800px) { .lc-top { padding: 18px 40px; } }
/* Solid state — applied via .is-scrolled by the JS once the hero has scrolled
   out of view, or always on pages without a hero (Programa, Nosotros). */
.lc-top.is-scrolled,
.lc-top--solid {
    background: var(--cream);
    color: var(--navy);
    box-shadow: 0 1px 0 rgba(26, 20, 16, 0.06);
}

.lc-brand {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 32px;
    color: var(--navy);
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.lc-brand-text {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(20px, 2.2vw, 32px);
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 240ms ease, transform 240ms ease;
}
/* Hidden while the hero is in view (front page only — inner pages always
   have .is-scrolled, so the text is visible there immediately). */
.lc-top:not(.is-scrolled) .lc-brand-text {
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
}
@media (max-width: 700px) {
    .lc-brand-text { display: none; }
}
.lc-brand-i { line-height: 1; }
.lc-brand-dot {
    display: inline-block;
    width: 10px; height: 10px;
    background: var(--cream);
    border-radius: 50%;
    margin: 0 2px;
}
.lc-top.is-scrolled .lc-brand-dot,
.lc-top--solid .lc-brand-dot { background: var(--coral); }
.lc-brand-dot.dark { background: var(--navy); }
.lc-brand-img {
    display: block;
    height: 48px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}
@media (min-width: 800px) {
    .lc-brand-img { height: 56px; max-width: 280px; }
}

.lc-pills {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lc-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 26px;
    background: var(--navy);
    color: var(--cream);
    border-radius: 999px;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}
.lc-pill:hover { background: var(--coral); }
@media (max-width: 600px) {
    .lc-pill { height: 40px; padding: 0 18px; font-size: 12px; }
}

/* ── Language switcher ─────────────────────────────────────────────────── */
.ls {
    position: relative;
    display: inline-block;
}
.ls__toggle {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1.5px solid var(--navy);
    background: transparent;
    color: var(--navy);
    font-family: var(--font-label);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    transition: background 200ms ease, color 200ms ease;
}
.ls__toggle:hover { background: color-mix(in oklab, var(--navy) 8%, transparent); }
@media (max-width: 600px) {
    .ls__toggle { height: 40px; padding: 0 16px; font-size: 12px; }
}
.ls__toggle:hover,
.ls[data-open="true"] .ls__toggle {
    background: #fff;
    color: var(--coral-dd);
}
.lc-top--solid .ls__toggle {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--cream);
}
.lc-top--solid .ls__toggle:hover,
.lc-top--solid .ls[data-open="true"] .ls__toggle {
    background: var(--coral);
    border-color: var(--coral);
    color: var(--cream);
}
.ls__icon {
    width: 16px; height: 16px;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
}
.ls__caret {
    width: 10px; height: 6px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    transition: transform 160ms ease;
}
.ls[data-open="true"] .ls__caret { transform: rotate(180deg); }

.ls__menu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 160px;
    background: var(--cream);
    color: var(--navy);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(26, 20, 16, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
    z-index: 100;
}
.ls[data-open="true"] .ls__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.ls__menu li { margin: 0; }
.ls__menu a {
    display: block;
    padding: 10px 18px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--navy);
    transition: background 140ms ease;
}
.ls__menu a:hover { background: rgba(26, 31, 58, 0.08); }
.ls__menu a[aria-current="true"] {
    background: var(--navy);
    color: var(--cream);
}
.ls__menu a[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}
@media (max-width: 640px) {
    .ls__menu {
        right: -8px;
        min-width: 200px;
    }
}

/* ── Date stickers ─────────────────────────────────────────────────────── */
.lc-stickers {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 48px 0 0;
    gap: 0;
}
.lc-sticker {
    display: inline-block;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: clamp(14px, 2.8vw, 36px);
    letter-spacing: 0.03em;
    color: var(--red);
    background: var(--sky);
    padding: clamp(6px, 1.5vw, 10px) clamp(14px, 3vw, 28px);
    border-radius: 2px;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(26, 20, 16, 0.12);
}

/* ── Wordmark ──────────────────────────────────────────────────────────── */
.lc-wm {
    position: relative;
    z-index: 3;
    margin: 14px 0 0;
    text-align: center;
    line-height: 0.92;
    padding: 0 16px;
}
.lc-wm-text {
    display: inline-block;
    font-family: var(--font-wordmark);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(72px, 15vw, 200px);
    letter-spacing: -0.03em;
    color: var(--cream);
    word-break: keep-all;
    hyphens: none;
}
.lc-wm-text::first-letter { font-weight: 800; }

/* ── Partners row ──────────────────────────────────────────────────────── */
.lc-partners {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    margin: 48px 0 0;
    flex-wrap: wrap;
}
.lc-partner-block { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lc-partner-eye {
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--cream);
    opacity: 0.75;
}
.lc-partner-name {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    color: var(--cream);
    letter-spacing: -0.01em;
}
.lc-partner-name i { font-style: italic; font-weight: 500; }
.lc-partner-sep {
    width: 1px;
    height: 36px;
    background: var(--cream);
    opacity: 0.4;
}

/* ── Hero CTA — orange filled, white text, big and prominent ───────────── */
.lc-cta-main {
    all: unset; cursor: pointer;
    display: inline-block;
    align-self: center;
    margin: 56px auto 0;
    padding: clamp(24px, 3vh, 36px) clamp(48px, 8vw, 110px);
    border: 2.5px solid var(--coral-dd);
    border-radius: 999px;
    text-align: center;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: clamp(22px, 3.2vw, 38px);
    letter-spacing: 0.04em;
    color: #ffffff;
    background: var(--coral-dd);
    box-shadow: 0 12px 36px rgba(26, 20, 16, 0.22);
    transition: background 240ms ease, border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
    position: relative;
    z-index: 3;
}
.lc-cta-main:hover {
    background: var(--coral);
    border-color: var(--coral);
    transform: translateY(-2px);
    box-shadow: 0 16px 48px rgba(26, 20, 16, 0.28);
}
@media (max-width: 700px) {
    .lc-cta-main {
        display: block;
        font-size: 18px;
        padding: 20px 24px;
    }
}

/* ── Shared section heads ──────────────────────────────────────────────── */
.lc-eye {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.22em;
    color: var(--cream);
    display: inline-block;
    margin-bottom: 18px;
}
.lc-eye.dark { color: var(--cream); opacity: 0.85; }
.lc-h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(52px, 6.5vw, 104px);
    letter-spacing: -0.02em;
    line-height: 0.98;
    margin: 0 0 22px;
    color: var(--cream);
}
.lc-h2.dark { color: var(--cream); }
.lc-h2 i { font-style: italic; }
.lc-lede {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.55;
    color: var(--cream);
    opacity: 0.92;
    max-width: 56ch;
    margin: 0;
}

/* ── Cómo llegar (location) ────────────────────────────────────────────── */
.lc-location {
    background: var(--navy);
    color: var(--cream);
    padding: 96px 40px;
    min-height: 90vh;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    align-content: center;
}
@media (min-width: 900px) {
    .lc-location {
        padding: 120px 64px;
        grid-template-columns: 1fr 1.2fr;
        gap: 64px;
    }
}
.lc-location .lc-eye { color: var(--coral); }
.lc-location-head { max-width: 56ch; }
.lc-location-addr {
    margin: 22px 0 0;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.18em;
    color: var(--coral);
    text-transform: uppercase;
}
.lc-location-link {
    display: inline-flex;
    align-items: center;
    margin-top: 18px;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: var(--coral);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.lc-location-link:hover { color: var(--cream); }
.lc-location-map {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: 4px;
    background: #1a1f3a;
}
.lc-location-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.lc-location-map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    font-family: var(--font-label);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: rgba(253, 240, 214, 0.6);
    background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(253, 240, 214, 0.04) 12px 24px);
}

/* ── Pull quote ────────────────────────────────────────────────────────── */
.lc-quote {
    background: var(--cream);
    color: var(--navy);
    padding: 120px 40px;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
@media (min-width: 800px) { .lc-quote { padding: 160px 80px; } }
.lc-quote-mark {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 200px;
    color: var(--coral);
    line-height: 0.4;
    margin-bottom: 24px;
}
.lc-quote blockquote {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(40px, 5.5vw, 80px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    max-width: 22ch;
    margin: 0;
}
.lc-quote blockquote i { font-style: italic; color: var(--coral-dd); }
.lc-quote footer {
    margin-top: 36px;
    display: flex; flex-direction: column; gap: 4px;
    align-items: center;
}
.lc-quote-name {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
}
.lc-quote-role {
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: rgba(26, 31, 58, 0.6);
}

/* ── Family ────────────────────────────────────────────────────────────── */
.lc-family {
    background: var(--coral-d);
    color: var(--cream);
    padding: 96px 40px;
    min-height: 90vh;
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: center;
    align-content: center;
}
@media (min-width: 900px) {
    .lc-family { padding: 120px 64px; grid-template-columns: 1.1fr 1fr; gap: 64px; }
}
.lc-family .lc-h2 { max-width: 14ch; }
.lc-family .lc-h2 i { color: var(--navy); }
.lc-family-list {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 1fr;
}
.lc-family-list li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.3;
    padding: 14px 0;
    border-top: 0.5px solid rgba(253, 240, 214, 0.2);
}
.lc-family-list li span {
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: rgba(253, 240, 214, 0.6);
}
.lc-family-photo {
    position: relative;
    overflow: hidden;
    align-self: center;
    width: 100%;
}
.lc-family-photo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
}

/* ── Newsletter + Big CTA — share visual rhythm, no extra min-height ────── */
.lc-news {
    background: var(--cream);
    padding: 96px 40px 56px;
}
@media (min-width: 800px) { .lc-news { padding: 120px 64px; } }
.lc-news-card {
    background: var(--sky);
    color: var(--navy);
    border-radius: 24px;
    padding: 56px 44px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 680px;
    margin: 0 auto;
}
.lc-news-eye {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.22em;
    color: var(--coral-dd);
}
.lc-news-h {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(36px, 5vw, 64px);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
    max-width: 16ch;
}
.lc-news-h i { font-style: italic; color: var(--coral-dd); }
.lc-news-body {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(26, 31, 58, 0.78);
    margin: 0;
    max-width: 48ch;
}
/* Newsletter signup form — posts to the Mailrelay REST route (inc/mailrelay.php). */
.lc-news-form {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.lc-news-form input {
    box-sizing: border-box;
    background: var(--cream);
    border: 0;
    height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--navy);
    outline: none;
}
.lc-news-form input:focus-visible { outline: 2px solid var(--coral); outline-offset: 1px; }
.lc-news-form input::placeholder { color: rgba(26, 31, 58, 0.4); }
.lc-news-form button {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    height: 48px;
    text-align: center;
    background: var(--coral);
    color: var(--cream);
    border-radius: 999px;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.12em;
}
.lc-news-form button:hover { background: var(--coral-d); }
.lc-news-form button[disabled] { opacity: 0.6; cursor: default; }
/* Honeypot — off-screen, invisible to people, present for bots. */
.lc-news-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.lc-news-msg {
    margin: 2px 0 0;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.02em;
}
.lc-news-msg:empty { display: none; }
.lc-news-msg--ok { color: #1f7a4d; }
.lc-news-msg--error { color: var(--coral-dd); }
.lc-news-note {
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(26, 31, 58, 0.55);
    letter-spacing: 0.04em;
}
.lc-news-consent {
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.5;
    color: rgba(26, 31, 58, 0.5);
    letter-spacing: 0.03em;
}

/* ── Big closing CTA ───────────────────────────────────────────────────── */
.lc-big {
    background: var(--cream);
    padding: 56px 40px 120px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}
@media (min-width: 800px) { .lc-big { padding: 160px 64px; } }
.lc-big-eye {
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.22em;
    color: var(--coral);
}
.lc-big-h {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(80px, 14vw, 220px);
    letter-spacing: -0.025em;
    line-height: 0.92;
    margin: 0;
    color: var(--navy);
    display: flex; flex-direction: column;
}
.lc-big-h .i { font-style: italic; color: var(--coral); }
.lc-big-meta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--navy);
    opacity: 0.7;
    margin: 8px 0 14px;
    flex-wrap: wrap;
    justify-content: center;
}
.lc-big-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--navy); opacity: 0.4; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.lc-foot {
    background: var(--navy);
    color: var(--cream);
    padding: 56px 40px 40px;
}
@media (min-width: 800px) { .lc-foot { padding: 64px 64px 40px; } }
.lc-foot-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.lc-foot-brand {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 36px;
    color: var(--cream);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lc-foot-brand .lc-brand-dot { background: var(--coral); }
.lc-foot-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.1em;
}
.lc-foot-nav a { color: var(--cream); opacity: 0.85; cursor: pointer; }
.lc-foot-nav a:hover { color: var(--coral); opacity: 1; }
.lc-foot-rule {
    height: 1px;
    background: rgba(253, 240, 214, 0.15);
    margin: 36px 0 24px;
}
.lc-foot-bot {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(253, 240, 214, 0.6);
    letter-spacing: 0.04em;
}
.lc-foot-legal { display: flex; gap: 18px; }
.lc-foot-legal a { cursor: pointer; }
.lc-foot-legal a:hover { color: var(--cream); }
.lc-foot-poweredby {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(253, 240, 214, 0.55);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.lc-foot-poweredby-link { display: inline-flex; align-items: center; }
.lc-foot-poweredby-logo {
    height: 18px;
    width: auto;
    display: block;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.lc-foot-poweredby-link:hover .lc-foot-poweredby-logo { opacity: 1; }

/* ── Cinematic transition section ──────────────────────────────────────── */
.cs {
    position: relative;
    width: 100%;
    height: var(--cs-height, 100vh);
    min-height: 480px;
    overflow: hidden;
    color: var(--cream);
    background: var(--navy);
}
.cs__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.cs__media video,
.cs__media img,
.cs__media picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cs__media--placeholder {
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 1.5px, transparent 1.5px 18px),
        linear-gradient(135deg, var(--coral-d), var(--navy));
    display: flex;
    align-items: center;
    justify-content: center;
}
.cs__media--placeholder span {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: rgba(253, 240, 214, 0.6);
    text-transform: uppercase;
}
.cs__dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--cs-dim, 0.35));
    pointer-events: none;
}
.cs__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
    gap: 16px;
}
.cs__kicker {
    margin: 0;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.22em;
    color: var(--cream);
    opacity: 0.9;
}
.cs__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(40px, 6vw, 88px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--cream);
    max-width: 16ch;
}
.cs__cta {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    padding: 18px 28px;
    border: 2px solid var(--cream);
    border-radius: 999px;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.08em;
    color: var(--cream);
    transition: background 240ms ease, color 240ms ease;
}
.cs__cta:hover { background: var(--cream); color: var(--navy); }

/* ── Schedule page ─────────────────────────────────────────────────────── */
.lc-page {
    background: var(--cream);
    color: var(--ink);
    min-height: 100vh;
}
.lc-page main { padding-bottom: 80px; }
.sch-title { color: var(--coral); }

.sch-hd { padding: 36px 0 24px; }
@media (min-width: 800px) { .sch-hd { padding: 56px 0 32px; } }
.sch-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(44px, 7vw, 96px);
    margin: 12px 0 14px;
    max-width: 14ch;
    letter-spacing: -0.02em;
    line-height: 0.98;
}
.sch-sub {
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.5;
    color: var(--ink);
    opacity: 0.75;
    max-width: 56ch;
    margin: 0;
}

.sch-tabs {
    position: sticky;
    top: 0;
    z-index: 30;
    background: color-mix(in oklab, var(--cream) 92%, transparent);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    border-bottom: 0.5px solid var(--rule);
    padding: 18px 0 16px;
}
.day-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.day-tab {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 22px;
    background: transparent;
    border: 1.5px solid var(--navy);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: clamp(18px, 1.8vw, 22px);
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--navy);
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.day-tab:hover {
    background: color-mix(in oklab, var(--navy) 10%, transparent);
}
.day-tab[aria-selected="true"] {
    background: var(--navy);
    color: var(--cream);
    border-color: var(--navy);
}
.day-tab .day-short {
    display: none;
    font-size: 14px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.005em;
}
.day-tab .day-long {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}
.day-tab .day-date {
    font-size: 11px;
    opacity: .65;
    letter-spacing: 0.06em;
    font-family: var(--font-mono);
}
@media (max-width: 480px) {
    .day-tab { padding: 8px 16px; }
    .day-tab .day-long { display: none; }
    .day-tab .day-short { display: inline; }
}

.cat-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}
.cat-label { margin-right: 6px; }
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: transparent;
    border: 0.5px solid var(--rule-strong);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: var(--ink);
    transition: background 160ms ease, border-color 160ms ease;
}
.cat-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.cat-chip[data-color="h"] .dot { background: var(--cat-h); }
.cat-chip[data-color="f"] .dot { background: var(--cat-f); }
.cat-chip[data-color="t"] .dot { background: var(--cat-t); }
.cat-chip[data-color="k"] .dot { background: var(--cat-k); }
.cat-chip[data-color="m"] .dot { background: var(--cat-m); }
.cat-chip[data-color="n"] .dot { background: var(--cat-n); }
.cat-chip:hover { background: var(--chip); }
.cat-chip[aria-pressed="true"] {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
}
.cat-chip[aria-pressed="true"] .dot { background: currentColor; }
.cat-chip[aria-pressed="true"] .muted { color: currentColor; opacity: 0.6; }

.sch-body { padding: 28px 0 80px; }

/* day visibility — JS toggles the [hidden] attribute on each .sch-day */
.sch-day { display: block; }
.sch-day[hidden] { display: none; }

.sch-tl {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.sch-tl-row {
    display: grid;
    grid-template-columns: 70px 28px 1fr;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 0.5px solid var(--rule);
}
@media (min-width: 800px) {
    .sch-tl-row { grid-template-columns: 110px 32px 1fr; gap: 20px; padding: 28px 0; }
}
.sch-tl-row { transition: color 180ms ease; }
.sch-tl-row .sch-tl-dur,
.sch-tl-row .sch-tl-loc,
.sch-tl-row .sch-tl-by,
.sch-tl-row .sch-tl-title { transition: color 180ms ease; }
.sch-tl-row .sch-tl-dot,
.sch-tl-row .sch-tl-line { transition: background 180ms ease; }
.sch-tl-row:hover { color: var(--accent); }
.sch-tl-row:hover .sch-tl-title,
.sch-tl-row:hover .sch-tl-dur,
.sch-tl-row:hover .sch-tl-loc,
.sch-tl-row:hover .sch-tl-by { color: var(--accent); }
.sch-tl-row:hover .sch-tl-dot,
.sch-tl-row:hover .sch-tl-line { background: var(--accent); }
.sch-tl-time { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.sch-tl-time .time-value {
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-family: var(--font-display);
}
.sch-tl-dur {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.04em;
    font-family: var(--font-mono);
    font-weight: 500;
}

.sch-tl-marker { position: relative; display: flex; justify-content: center; padding-top: 12px; }
.sch-tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); margin-top: 2px; }
.sch-tl-row[data-cat="hands"]  .sch-tl-dot { background: var(--cat-h); }
.sch-tl-row[data-cat="forest"] .sch-tl-dot { background: var(--cat-f); }
.sch-tl-row[data-cat="table"]  .sch-tl-dot { background: var(--cat-t); }
.sch-tl-row[data-cat="kids"]   .sch-tl-dot { background: var(--cat-k); }
.sch-tl-row[data-cat="music"]  .sch-tl-dot { background: var(--cat-m); }
.sch-tl-row[data-cat="night"]  .sch-tl-dot { background: var(--cat-n); }
.sch-tl-line {
    position: absolute;
    top: 24px;
    bottom: -28px;
    width: 0.5px;
    background: var(--rule);
}
.sch-tl-row:last-child .sch-tl-line { display: none; }

.sch-tl-card { display: flex; flex-direction: column; gap: 6px; }
.sch-tl-row1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sch-tl-loc {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}
.sch-tl-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.5vw, 32px);
    margin: 2px 0 0;
    transition: color 180ms ease;
    color: var(--ink);
    text-decoration: none;
    font-weight: 400;
}
.sch-tl-by { font-size: 13px; color: var(--muted); }

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 0.5px solid var(--rule-strong);
    font-size: 11px;
    font-weight: 500;
    color: var(--ink);
    font-family: var(--font-body);
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.tag[data-color="h"] .dot { background: var(--cat-h); }
.tag[data-color="f"] .dot { background: var(--cat-f); }
.tag[data-color="t"] .dot { background: var(--cat-t); }
.tag[data-color="k"] .dot { background: var(--cat-k); }
.tag[data-color="m"] .dot { background: var(--cat-m); }
.tag[data-color="n"] .dot { background: var(--cat-n); }

/* ── About page ────────────────────────────────────────────────────────── */
.ab-page { background: var(--cream); color: var(--ink); }
/* WordPress wraps every wp:group block's content in a <div class="wp-block-group__inner-container">.
   For our grid layouts (.ab-org, .ab-values-grid) that wrapper becomes the only
   direct child and squashes everything into column 1. display:contents flattens
   it out so the grandchildren act as direct grid items. */
.ab-page .wp-block-group__inner-container {
    display: contents;
}
/* Belt-and-braces: kill any max-width WP's layout system tries to impose on the
   layout-driven elements. */
.ab-page :is(.ab-orgs, .ab-org, .ab-org-meta, .ab-values-grid, .ab-value, .ab-contact-cta-wrap) {
    max-width: none;
}
.ab-title { color: var(--coral); }
.ab-hd { padding: 64px 0 32px; }
@media (min-width: 800px) { .ab-hd { padding: 96px 0 48px; } }
.ab-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(48px, 7vw, 96px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    margin: 14px 0 24px;
    max-width: 16ch;
}
.ab-intro {
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.5;
    max-width: 60ch;
    color: var(--ink);
    opacity: 0.78;
    margin: 0;
}

.ab-orgs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 32px 0 64px;
}
/* Card: a header (logo + name + role) with the description below it. */
.ab-org {
    padding: 32px 0;
    border-top: 0.5px solid var(--rule);
}
@media (min-width: 800px) { .ab-org { padding: 44px 0; } }
/* Header — logo on the left, name + role stacked to its right. The logo
   column is auto-width so it collapses cleanly when no logo is uploaded. */
.ab-org-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "logo name"
        "logo role";
    column-gap: 24px;
    align-items: center;
    margin-bottom: 16px;
}
.ab-org-name { grid-area: name; }
.ab-org-role { grid-area: role; }
/* Logo — any image block in the header is sized + centered, with or without
   the .ab-org-logo class, so editors can just drop in an image block. */
.ab-org-meta .wp-block-image,
.ab-org-logo { grid-area: logo; margin: 0; text-align: center; }
.ab-org-meta img {
    display: block;
    width: auto;
    height: auto;
    max-width: 110px;
    max-height: 88px;
    margin: 0 auto;
    object-fit: contain;
}
.ab-org-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
}
.ab-org-role {
    font-family: var(--font-label);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--muted);
    text-transform: uppercase;
    margin: 0;
}
.ab-org-body { font-size: 15px; line-height: 1.6; color: var(--ink); opacity: 0.8; margin: 0; max-width: 60ch; }

.ab-values {
    background: var(--navy);
    color: var(--cream);
    padding: 96px 0 96px;
}
.ab-values-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(40px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 40px;
    max-width: 18ch;
}
.ab-values-intro {
    font-size: clamp(16px, 1.5vw, 20px);
    line-height: 1.6;
    color: rgba(253, 240, 214, 0.78);
    max-width: 60ch;
    margin: 0 0 48px;
}
.ab-values-intro strong { color: var(--cream); }
.ab-values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}
@media (min-width: 800px) {
    .ab-values-grid { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}
.ab-value-num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 32px;
    color: var(--coral);
    margin: 0 0 12px;
}
.ab-contact-cta-wrap { margin: 0; }
.ab-value-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 24px;
    margin: 0 0 12px;
    color: var(--cream);
    letter-spacing: -0.01em;
}
.ab-value-body { font-size: 15px; line-height: 1.55; color: rgba(253, 240, 214, 0.78); margin: 0; }

.ab-contact {
    background: var(--sky);
    color: var(--navy);
    text-align: center;
    /* Bottom padding clears the diagonal slant that the footer's ::before
       overlays into this section (clamp(56px, 7vw, 130px) tall). */
    padding: 96px 24px clamp(160px, 16vw, 220px);
}
.ab-contact-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(40px, 5vw, 64px);
    margin: 0 0 16px;
}
.ab-contact-body {
    font-size: 17px;
    line-height: 1.5;
    max-width: 48ch;
    margin: 0 auto 32px;
    opacity: 0.82;
}
.ab-contact-cta {
    display: inline-flex;
    align-items: center;
    padding: 22px 36px;
    background: var(--coral);
    border: 2px solid var(--coral);
    border-radius: 999px;
    font-family: var(--font-label);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.06em;
    color: var(--cream);
    transition: background 240ms ease, color 240ms ease, border-color 240ms ease;
}
.ab-contact-cta:hover {
    background: var(--coral-d);
    border-color: var(--coral-d);
    color: var(--cream);
}

/* ── Curved section transitions (domes + wave, both directions) ────────── */
/* z-index: 2 ensures the pseudo paints over the following section's background
   (otherwise the next section's bg covers the curve and you only see the
   flat boundary — that was the "border" you spotted). */
.lc-location,
.lc-quote,
.lc-family,
.lc-foot {
    position: relative;
    z-index: 2;
}

/* Location → next: DOWN dome, navy */
.lc-location::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 1px);
    height: clamp(56px, 7vw, 130px);
    pointer-events: none;
    background: var(--navy);
    clip-path: ellipse(55% 100% at 50% 0%);
    z-index: 1;
}

/* Quote → family: WAVE down, cream (mask is a real SVG file — inline data
   URIs are unreliable in some browsers due to URL encoding) */
.lc-quote::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 1px);
    height: clamp(70px, 9vw, 160px);
    pointer-events: none;
    background: var(--cream);
    -webkit-mask: url("../svg/wave-down.svg") center / 100% 100% no-repeat;
            mask: url("../svg/wave-down.svg") center / 100% 100% no-repeat;
    z-index: 1;
}

/* Family → next: WAVE down, coral-d (mirrored from the quote wave so the
   two adjacent waves don't read as the same shape) */
.lc-family::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 1px);
    height: clamp(70px, 9vw, 160px);
    pointer-events: none;
    background: var(--coral-d);
    -webkit-mask: url("../svg/wave-down.svg") center / 100% 100% no-repeat;
            mask: url("../svg/wave-down.svg") center / 100% 100% no-repeat;
    transform: scaleX(-1);
    z-index: 1;
}

/* Footer → big-cta: diagonal slant (up), navy */
.lc-foot::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 1px);
    height: clamp(56px, 7vw, 130px);
    pointer-events: none;
    background: var(--navy);
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 60%);
    z-index: 1;
}

/* ── Scroll reveal (parallax-lite) ─────────────────────────────────────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1100ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
[data-parallax-slow] {
    will-change: transform;
}

/* ── Color scheme variants ─────────────────────────────────────────────── */
body.lc-scheme-green {
    --navy:   #3a5a3f;
    --sky:    #c4d6b8;
    --sky-d:  #a4b896;
    --cat-n:  #2f4a34;
    --cat-f:  #5a8060;
}
body.lc-scheme-earth {
    --navy:   #4a2c1c;
    --sky:    #e8c9a0;
    --sky-d:  #c4a878;
    --cream:  #f3e3c9;
    --coral-dd: #8a3a1a;
    --cat-n:  #3a2010;
    --cat-t:  #8a3a1a;
    --cat-h:  #b88058;
}

/* ── Motion preferences ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lc-ann-row { animation: none; }
    .cs[data-parallax="true"] .cs__media { transform: none !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    [data-parallax-slow] { transform: none !important; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* mobile: no parallax (broken on iOS Safari with background-attachment fixed) */
@media (hover: none) {
    .cs[data-parallax="true"] .cs__media { transform: none !important; }
}

/* ── Tickets "not on sale" dialog ───────────────────────────────────────── */
.lc-tickets-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 680px;
    width: calc(100% - 32px);
    margin: auto;
    overflow: visible;
}
.lc-tickets-dialog::backdrop {
    background: rgba(26, 31, 58, 0.62);
    backdrop-filter: blur(2px);
}
.lc-tickets-dialog[open] { animation: lc-tix-in 200ms ease; }
@keyframes lc-tix-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lc-tickets-dialog-card {
    position: relative;
    max-width: none;
    margin: 0;
}
.lc-tickets-dialog-close {
    all: unset;
    position: absolute;
    top: 14px;
    right: 18px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 24px;
    line-height: 1;
    color: var(--navy);
    background: rgba(26, 31, 58, 0.08);
}
.lc-tickets-dialog-close:hover { background: rgba(26, 31, 58, 0.16); }
.lc-tickets-dialog-close:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .lc-tickets-dialog[open] { animation: none; }
}
@media (max-width: 560px) {
    .lc-tickets-dialog-card { padding: 48px 24px 32px; }
}