/* Authoritative local visual system: roles first, then component/state rules. */
:root {
 --color-ink:#000000;
 --color-paper:#fff8e7;
 --color-canvas:#ffd000;
 --color-teal:#1fa896;
 --color-teal-text:#155b52;
 --color-teal-soft:#e2eee6;
 --color-yellow:#ffd000;
 --color-coral:#ff6b6b;
 --color-muted:#625f54;
 --color-divider:#d4cbb8;
 --stroke-component:2px;
 --stroke-frame:3px;
 --stroke-divider:1px;
 --shadow-control:3px 3px 0 var(--color-ink);
 --shadow-frame:6px 6px 0 var(--color-ink);
 --radius-card:10px;
 --radius-frame:14px;
 --bg:var(--color-canvas); --paper:var(--color-paper); --cream:var(--color-paper);
 --ink:var(--color-ink); --accent-1:var(--color-teal); --accent-teal:var(--color-teal);
 --accent-2:var(--color-coral); --accent-3:var(--color-yellow);
 --event-indicator:var(--color-teal); --readable-teal:var(--color-teal-text);
 --border-thin:var(--stroke-component) solid var(--color-ink);
 --border-medium:var(--stroke-component) solid var(--color-ink);
 --border-thick:var(--stroke-frame) solid var(--color-ink);
}
body { background:var(--color-canvas); color:var(--color-ink); }
.grid-bg { opacity:.45; }
body::before { display:block; }
/* The poster is the colourful focal point. Depth uses ink, never a coloured box. */
.browser-layer { display:none; }
body[data-hero-design="3"] .browser-main { background:var(--color-teal); border:var(--stroke-frame) solid var(--color-ink); border-radius:var(--radius-frame); box-shadow:var(--shadow-frame); }
body[data-hero-design="3"] .browser-chrome { background:var(--color-paper); border-bottom:var(--stroke-frame) solid var(--color-ink); }
body[data-hero-design="3"] .hero-copy { background:var(--color-paper); border:var(--stroke-component) solid var(--color-ink); border-radius:var(--radius-card); box-shadow:none; }
body[data-hero-design="3"] .hero-badge,body[data-hero-design="3"] .hero-badge + .hero-badge { background:var(--color-yellow); border:var(--stroke-component) solid var(--color-ink); color:var(--color-ink); }
body[data-hero-design="3"] .hero-token { border:var(--stroke-component) solid var(--color-ink); box-shadow:var(--shadow-control); }
body[data-hero-design="3"] .token-one { background:var(--color-yellow); }
body[data-hero-design="3"] .token-two { background:var(--color-coral); }
.browser-dot { border-width:var(--stroke-component); }
/* Content cards stay paper-coloured and flat. A heavy frame denotes a section. */
.section-card,.section-card:hover,.play-card:hover { background:var(--color-paper); border:var(--stroke-frame) solid var(--color-ink); border-radius:var(--radius-frame); box-shadow:none; transform:none; }
.section-card::before,.section-card::after { content:none; }
.step,.card-content,.faq-item,.rule-card,.rule-card-highlight,.photo-card,.location-map-container { background:var(--color-paper); border:var(--stroke-component) solid var(--color-ink); border-radius:var(--radius-card); box-shadow:none; }
.step:hover,.rule-card:hover,.photo-card:hover,.layered-card:hover .card-content { box-shadow:none; transform:none; }
.rule-card::before { content:none; }
.rule-card-highlight,.rule-card-highlight .rule-title,.rule-card-highlight .rule-text { color:var(--color-ink); }
.step-number { background:var(--color-yellow); color:var(--color-ink); border:var(--stroke-component) solid var(--color-ink); box-shadow:none; }
.layered-cta { background:var(--color-teal-soft); color:var(--color-ink); border:var(--stroke-component) solid var(--color-ink); border-radius:var(--radius-card); box-shadow:none; }
.layered-cta strong { color:var(--color-ink); }
.photo-overlay { background:var(--color-ink); color:var(--color-paper); }
/* The chosen invitation stays centred. Yellow consistently marks time. */
body[data-event-design="4"] #nextEventCard { background:var(--color-paper); color:var(--color-ink); border:var(--stroke-component) solid var(--color-ink); border-radius:var(--radius-card); box-shadow:none; }
body[data-event-design="4"] #nextEventCard .next-event-countdown { background:var(--color-yellow); color:var(--color-ink); }
/* Teal means action. Secondary controls remain neutral until interaction. */
.hero-cta-primary,.action-button,.map-link,body[data-event-design="4"] #nextEventCard .action-button {
 background:var(--color-teal); color:var(--color-ink); border:var(--stroke-component) solid var(--color-ink); box-shadow:var(--shadow-control); border-radius:999px;
}
.hero-cta-primary:hover,.action-button:hover,.map-link:hover,.map-link:focus,body[data-event-design="4"] #nextEventCard .action-button:hover {
 background:var(--color-teal-text); color:var(--color-paper); box-shadow:var(--shadow-control); transform:none; animation:none;
}
.hero-cta-primary:active,.action-button:active,.map-link:active { box-shadow:none; transform:translate(2px,2px); }
.hero-cta-secondary,.hero-cta-secondary:hover { background:transparent; color:var(--color-ink); border:0; box-shadow:none; }
.month-btn,.close-btn,.scroll-to-top { background:var(--color-paper); color:var(--color-ink); border:var(--stroke-component) solid var(--color-ink); box-shadow:none; }
.month-btn:hover,.close-btn:hover,.scroll-to-top:hover,.scroll-to-top:focus { background:var(--color-teal); color:var(--color-ink); box-shadow:none; }
.scroll-to-top:hover,.scroll-to-top:focus { transform:none; }
main a:not([class]),.upcoming-event-title,.event-detail strong { color:var(--color-teal-text); }
main a:not([class]) { text-underline-offset:3px; }
/* Calendar: one teal for events, one yellow for today, neutral ordinary dates. */
.calendar-day-header { background:var(--color-teal-soft); color:var(--color-ink); }
.calendar-day { background:var(--color-paper); color:var(--color-ink); border-width:var(--stroke-component); }
.calendar-day.other-month { background:transparent; color:var(--color-muted); }
.calendar-day.has-event,.calendar-day.has-event.today { background:var(--color-teal); color:var(--color-ink); border-color:var(--color-ink); }
.calendar-day.today { background:var(--color-yellow); border-color:var(--color-ink); box-shadow:none; }
.calendar-day.has-event.today { outline:2px solid var(--color-yellow); outline-offset:-5px; }
.calendar-day.has-event:hover { background:var(--color-teal-text); color:var(--color-paper); }
.day-event-count { background:var(--color-paper); color:var(--color-ink); }
.upcoming-events { border-color:var(--color-divider); }
.upcoming-event-card { border-bottom-color:var(--color-divider); }
.upcoming-event-card:hover,.faq-item summary:hover { background:var(--color-teal-soft); color:var(--color-ink); }
.faq-item[open] summary { background:var(--color-teal-soft); border-bottom:var(--stroke-divider) solid var(--color-divider); }
/* Overlay and footer use the same material rules. */
.event-dialog { background:var(--color-paper); color:var(--color-ink); border:var(--stroke-frame) solid var(--color-ink); border-radius:var(--radius-frame); box-shadow:var(--shadow-frame); }
.event-detail { border-color:var(--color-divider); }
.event-share-input,.day-event-option { border:var(--stroke-component) solid var(--color-ink); background:var(--color-paper); color:var(--color-ink); box-shadow:none; }
.day-event-option:hover { background:var(--color-teal-soft); }
.secondary-action { background:var(--color-paper); color:var(--color-ink); }
.footer,.mobile-nav { background:var(--color-ink); color:var(--color-paper); box-shadow:none; }
.footer a,.mobile-nav-link { color:var(--color-paper); }
.social-link { border:var(--stroke-component) solid var(--color-paper); }
.social-link:hover,.social-link:focus { background:var(--color-paper); color:var(--color-ink); }
.mobile-nav-link:hover,.mobile-nav-link:focus { background:var(--color-teal); color:var(--color-ink); transform:none; }
/* Focus is a state, not decorative depth. Light outline on dark surfaces. */
:focus-visible,.calendar-cell:focus,.map-link:focus-visible { outline:3px solid var(--color-ink); outline-offset:3px; }
.footer :focus-visible,.mobile-nav :focus-visible { outline-color:var(--color-yellow); }
.mobile-nav-link { padding-inline:2px; white-space:nowrap; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }
/* Match the gallery frame to the photographs and remove inline-image baseline space. */
.photo-card { aspect-ratio:3 / 2; }
.photo-card img { display:block; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; }
/* One rounded line-icon family for direction and disclosure. */
.ui-icon { display:inline-block; width:20px; height:20px; flex:0 0 20px; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ui-icon path { fill:none; }
.month-btn .ui-icon,.scroll-to-top .ui-icon { width:22px; height:22px; flex-basis:22px; }
.faq-item summary { gap:16px; }
.faq-item summary::after { content:none; }
.faq-chevron { transition:transform .18s ease; }
.faq-item[open] .faq-chevron { transform:rotate(180deg); }
@media (prefers-reduced-motion:reduce) { .faq-chevron { transition:none; } }