is itself a flex container (see the base
rule above) — this is the reliable, standard way to fill
remaining space, unlike the percentage min-height tried first,
which DevTools confirmed doesn't resolve here (main having a
definite height as body's OWN flex item doesn't make main act as
a "fill me" containing block for its own children — only an
actual flex/grid container on main itself does that). This is
what makes the dark background reach the footer instead of
leaving body's white background exposed in the gap on short
pages, since main's flex-grow no longer has anywhere else to go.
display:flex + justify-content:center then vertically centers
the whole title+photo+controls block as one group — matching the
event lightbox's centered presentation instead of sitting pinned
to the top, which was never a deliberate choice to begin with. */
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.slideshow-hero__inner {
max-width: 1200px;
/* Was margin-right:auto only — that doesn't center a block, it
left-aligns it and pushes all the leftover space to the right.
A real, pre-existing bug (not something introduced this session),
found while chasing the centering issue — this affects any
viewport wider than 1200px specifically. margin:0 auto is the
actual centering rule. */
margin: 0 auto;
}
.slideshow-hero__header {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-2);
}
.slideshow-hero__header h1 {
font-family: var(--font-heading);
font-weight: var(--weight-regular);
font-size: var(--text-h2);
color: rgba(255,255,255,0.75); /* matches the tagline's muted
white below it, rather than the brighter var(--color-page) this
used before — was too visually loud against the dark background */
line-height: var(--leading-heading);
margin: 0;
}
.slideshow-hero__header p {
font-family: var(--font-body);
font-size: var(--text-body);
color: rgba(255,255,255,0.75);
margin: 0;
max-width: 60ch;
}
.slideshow-hero .event-gallery__hint {
/* Hidden everywhere, desktop and mobile alike — with the pause
button always visible now, this instruction is redundant (nobody
needs to be told what a pause button does). CSS-only hide rather
than removing the from all 12 slideshow pages' markup — keeps
this a single-file change for shipping; pulling the dead markup
out entirely is a fine cleanup item for the later slideshow/
lightbox rebuild, not urgent now. */
display: none;
}
.slideshow {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
user-select: none;
}
.slideshow__track {
grid-column: 2;
position: relative;
/* The image was never explicitly centered here — it just renders
at its own natural size and sits flush-left in whatever width
this column happens to be. Invisible on a narrow phone (the
column's barely wider than the image anyway), but obvious on a
wide-but-short viewport (e.g. Galaxy A51 landscape) where this
column can end up much wider than the image — the image was
sitting at the far left with a huge empty gap on the right.
display:flex + justify-content/align-items:center fixes this
everywhere, not just on mobile — a universal correctness fix
with no downside on viewports where it was already invisible. */
display: flex;
justify-content: center;
align-items: center;
}
.slideshow__track img {
display: block;
width: auto;
height: auto;
max-width: 100%;
/* Nudged down from the original 85dvh (then 80dvh) — the goal
isn't max photo size, it's guaranteeing the footer/pause button
never clips even with heavy browser chrome onscreen (address bar
+ tabs + bookmarks bar all eating into dvh's real available
height). The pause button must stay visible always (WCAG 2.2.2 —
auto-advancing content needs a persistent pause control), so this
value is sized for the WORST-CASE (most chrome, least real
viewport) scenario. That means fullscreen/no-chrome views will
show a bit more gray margin below the photo than the minimum —
expected and fine, not a bug. Eyeballed, not derived — adjust a
few dvh at a time if the footer still clips in a heavy-chrome
browser, or if the margin ever feels excessive everywhere. */
max-height: 78dvh;
aspect-ratio: 3 / 2;
object-fit: cover;
opacity: 0;
transition: opacity 400ms ease;
}
.slideshow__track img.is-active { opacity: 1; }
.slideshow__caption {
font-family: var(--font-body);
font-size: var(--text-caption);
font-style: italic;
line-height: var(--leading-caption);
color: var(--color-text-secondary);
padding: var(--space-1) var(--space-2);
background: var(--color-surface);
margin: 0;
}
/* Prev / next arrow buttons — plain grid children of .slideshow,
living in the left/right gutter columns (see .slideshow above).
Vertical centering comes free from the grid's align-items:center;
horizontal placement is just "pushed toward the photo, then a
fixed padding" — no absolute positioning, no measurement, no
negative offsets. This is what actually keeps it reliable across
both mobile (narrow gutters) and desktop (wide gutters). */
.slideshow__btn {
background: none;
border: none;
box-shadow: none;
color: rgba(255,255,255,0.6);
text-shadow: 0 1px 5px rgba(0,0,0,0.7);
font-family: var(--font-body);
font-size: 32px;
font-weight: var(--weight-medium);
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: color var(--transition-fast);
}
.slideshow__btn--prev {
grid-column: 1;
justify-self: end;
padding-right: 30px;
}
.slideshow__btn--next {
grid-column: 3;
justify-self: start;
padding-left: 30px;
}
.slideshow__btn:hover {
color: var(--color-page);
}
.slideshow__btn:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
.slideshow__btn:disabled {
opacity: 0.3;
cursor: default;
}
/* Mobile-only override — desktop rules above are untouched.
On mobile there's no "fill the viewport height" goal (that's a
desktop-chrome concern); instead the photo should fill all
available WIDTH between two arrow-sized gutters. Reverses which
columns get 1fr, and lets the photo's width (not JS-computed
height) drive its size.
The !important on max-height is a deliberate, narrow exception to
the project's no-!important rule — it's the only way to override
the inline max-height that JS sets on the image (for the desktop
viewport-fit behavior) without touching the JS itself. */
@media (max-width: 859px), (max-height: 500px) {
.slideshow {
grid-template-columns: auto 1fr auto;
}
.slideshow__btn--prev { padding-right: 0; }
.slideshow__btn--next { padding-left: 0; }
/* Hidden on mobile (both orientations) rather than shrunk — with
only the h1 left in .slideshow-hero__header, there's nothing left
to wrap onto a second line, so the awkward wrap-gap issue is gone
everywhere it could occur, not just tightened around the edges.
The tagline stays on desktop, where there's room for it. */
.slideshow-hero__header p {
display: none;
}
/* 28px reads as large/distracting on a small screen with nothing
beside it (the tagline's gone here — see above). Sized down to
the existing --text-h3 token (22px) rather than a new value.
Top padding: trimmed 8px off the base --space-3 value (24px),
to free more room for the photo below. An initial 4px trim
turned out barely noticeable once compared side-by-side, hence
doubling it. Kept equal to the title's margin-bottom below, so
the title stays centered in this space rather than drifting
toward the header or the photo as either value changes. */
.slideshow-hero {
padding-top: calc(var(--space-3) - 8px);
}
/* Centered to match the photo/arrows below it, which are already
centered as a unit — left-flush title against centered content
read as a mismatch once the tagline (which used to sit beside it)
was removed. Margin-bottom kept equal to the top padding above —
see the comment there. */
.slideshow-hero__header {
justify-content: center;
text-align: center;
margin-bottom: calc(var(--space-3) - 8px);
}
.slideshow-hero__header h1 {
font-size: var(--text-h3);
}
}
/* Portrait-only: size the photo by WIDTH, ignoring the JS-computed
inline max-height (which exists for desktop's viewport-fit
behavior) — on a narrow, tall viewport there's no "fit the height"
goal, just "fill the available width." */
@media (max-width: 859px) and (orientation: portrait) {
.slideshow__track img {
width: 100%;
max-width: 100%;
height: auto;
max-height: none !important;
}
}
/* Overrides the rule directly above, specifically for this page: with
the title block and footer both gone here, sizing by width alone
and ignoring height meant the image rendered at a modest size and
then sat centered in a much taller box — big, symmetric, wasted
gaps above AND below, not a bug in the centering, just nothing
asking the image to actually grow into the space available. Reapply
a real height cap (matching the landscape/short-viewport value) so
portrait gets the same "grow to fill both constraints" sizing
instead of width-only. The !important matches the one it's
overriding — same narrow-exception pattern as elsewhere in this
file, not a new precedent. */
@media (max-width: 859px) and (orientation: portrait) {
.slideshow-page .slideshow__track img {
/* The previous attempt only added max-height on top of the rule
above — but that rule's width:100% is a HARD width, not a max.
Since the image is aspect-ratio-locked, a fixed width forces a
fixed height as a direct consequence, regardless of any
max-height sitting on top of it — max-height can only ever
shrink an already-oversized result, never grow an undersized
one. That's why nothing visibly changed. Replacing width/height
entirely with the same width:auto + height:auto + max-width +
max-height combination landscape already uses successfully —
this lets the browser pick whichever of the two constraints
actually binds, instead of width always winning by default. */
width: auto;
height: auto;
max-width: 100% !important;
max-height: var(--slideshow-photo-max-height) !important;
}
}
/* Narrow AND landscape (e.g. a phone rotated sideways) is the opposite
situation from portrait: plenty of width, very little height. This
deliberately does NOT touch the image's max-height at all — it
falls through to the same JS-measured, precise height-fit logic
already used on desktop (updateStageMaxHeight() sets an inline
max-height in px based on the real remaining viewport space), which
is exactly right here too and needs no separate guess. The only
thing landscape genuinely needs on top of that: the grid's middle
column is still 1fr (stretchy) at this width, unlike desktop where
that column is auto-sized to fit the image — so the now-narrower,
height-driven image needs to be re-centered within it. */
@media (max-width: 859px) and (orientation: landscape) {
.slideshow__track {
display: flex;
justify-content: center;
}
}
/* Catches ANY short viewport — phones in landscape, and also wider
devices (tablets, some Android phones in landscape) that clear the
859px WIDTH breakpoint above but are still short on real HEIGHT
(e.g. Samsung Galaxy A51/71 landscape: 914×412 — wider than 859px,
so the width-based query above never fires for it, yet its 412px
of height clips a photo sized for desktop just as badly as a phone
does). This was the actual bug: the earlier fix keyed off WIDTH,
which is the wrong discriminator for a problem that's fundamentally
about HEIGHT. One rule, keyed on the real constraint, replaces two
separate width-based guesses that didn't agree with each other.
55dvh — leaves room for header + title + the now-always-visible
footer within a ~375-412px real viewport. Test across the actual
short-viewport devices/orientations and report if the bottom still
clips anywhere, or if there's slack to size up; adjust this one
number a few dvh at a time rather than adding more breakpoints. */
@media (max-height: 500px) {
.slideshow-hero__header h1 {
font-size: var(--text-h3);
}
.slideshow__track img {
/* Bumped from 55dvh — that guess predated the hint text being
removed, so it left more slack than actually needed once that
line's height came out of the total. Desktop's 78dvh (a
separate rule, unaffected by this) stays exactly as-is —
already confirmed correct for the worst-case chrome-heavy
scenario. Test on the real short-viewport devices (iPhone SE
landscape, Galaxy A51 landscape) and report if there's still
slack to take up or if this starts clipping; adjust a few dvh
at a time, same as before. */
max-height: 60dvh;
}
}
.slideshow__footer {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
}
.slideshow__playpause {
background: none;
border: none;
box-shadow: none;
color: rgba(255,255,255,0.6);
font-size: 16px;
line-height: 1;
padding: 4px 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: color var(--transition-fast);
flex-shrink: 0;
}
.slideshow__playpause:hover {
color: var(--color-page);
}
.slideshow__playpause:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
/* ============================================================
19. LIGHTBOX
Fixed-column thumbnail grid (4-up desktop, 2-up mobile).
Last row is centered via flexbox. Clicking a thumbnail opens
a full-screen overlay with prev/next navigation.
Usage:
...
The overlay is injected by JavaScript — no markup needed.
============================================================ */
.lightbox-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2);
padding: 0;
}
.lightbox-thumb {
/* 2-up mobile */
flex: 0 0 calc(50% - var(--space-1));
padding: 0;
border: none;
background: none;
cursor: zoom-in;
overflow: hidden;
display: block;
}
@media (min-width: 600px) {
.lightbox-thumb {
/* 3-up at mid — graceful step on the way to 5-up */
flex: 0 0 calc(33.333% - (var(--space-2) * 2 / 3));
}
}
@media (min-width: 860px) {
.lightbox-thumb {
/* 5-up desktop: subtract 4 gaps from 20% */
flex: 0 0 calc(20% - (var(--space-2) * 4 / 5));
}
}
.lightbox-thumb img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
transition: opacity var(--transition-fast), transform var(--transition-base);
}
.lightbox-thumb:hover img { opacity: 0.85; transform: scale(1.03); }
.lightbox-thumb:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
/* Overlay — injected by JS. Hidden by default, faded/scaled in
on .is-open. */
.lightbox-overlay {
display: flex;
visibility: hidden;
opacity: 0;
position: fixed;
inset: 0;
z-index: 500;
background-color: rgba(0,0,0,0.92);
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-5) var(--space-4) var(--space-3);
transition: opacity var(--transition-base), visibility var(--transition-base);
}
.lightbox-overlay.is-open {
visibility: visible;
opacity: 1;
}
.lightbox-overlay__img {
max-width: 100%;
max-height: 75vh;
object-fit: contain;
display: block;
transform: scale(0.96);
transition: opacity var(--transition-fast), transform var(--transition-base);
}
.lightbox-overlay.is-open .lightbox-overlay__img {
transform: scale(1);
}
/* Added while swapping the image source during prev/next
navigation — fades the current image out before the new
src is set, then fades back in. Toggled by JS. */
.lightbox-overlay__img.is-changing { opacity: 0; }
.lightbox-overlay__caption {
font-family: var(--font-body);
font-size: var(--text-caption);
font-style: italic;
color: rgba(255,255,255,0.65);
margin-top: var(--space-2);
text-align: center;
max-width: 56ch;
}
.lightbox-overlay__counter {
font-family: var(--font-body);
font-size: 11px;
font-weight: var(--weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin-top: var(--space-1);
}
.lightbox-overlay__close {
position: absolute;
top: var(--space-2);
right: var(--space-2);
background: none;
border: none;
color: rgba(255,255,255,0.7);
font-size: 28px;
line-height: 1;
cursor: pointer;
padding: var(--space-1);
border-radius: var(--radius-sm);
transition: color var(--transition-fast);
}
.lightbox-overlay__close:hover { color: #fff; }
.lightbox-overlay__close:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 3px;
}
.lightbox-overlay__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color var(--transition-fast);
}
.lightbox-overlay__btn:hover { background-color: rgba(255,255,255,0.22); }
.lightbox-overlay__btn:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 3px;
}
.lightbox-overlay__btn--prev { left: var(--space-2); }
.lightbox-overlay__btn--next { right: var(--space-2); }
/* ============================================================
20. COOKIE NOTICE
Fixed bottom bar. Dismisses on button click; stores
preference in localStorage. Appears only until dismissed.
Usage:
We use cookies to...
Accept
Decline
============================================================ */
.cookie-notice {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 400;
background-color: var(--color-heading);
color: #fff;
padding: var(--space-2) var(--page-margin);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-2);
box-shadow: 0 -2px 12px rgba(0,0,0,0.18);
transform: translateY(0);
transition: transform var(--transition-base);
}
.cookie-notice.is-hidden {
transform: translateY(110%);
pointer-events: none;
}
@media (min-width: 860px) {
.cookie-notice {
padding-left: var(--page-margin-tablet);
padding-right: var(--page-margin-tablet);
gap: var(--space-3);
}
}
.cookie-notice__text {
font-family: var(--font-body);
font-size: var(--text-caption);
line-height: 1.5;
color: rgba(255,255,255,0.9);
margin: 0;
max-width: 64ch;
}
.cookie-notice__text a {
color: rgba(255,255,255,0.9);
text-decoration: underline;
text-underline-offset: 2px;
}
.cookie-notice__text a:hover { color: #fff; }
.cookie-notice__actions {
display: flex;
gap: var(--space-1);
flex-shrink: 0;
}
.cookie-notice__btn {
font-family: var(--font-body);
font-size: var(--text-caption);
font-weight: var(--weight-medium);
padding: 6px 16px;
border-radius: var(--radius-sm);
cursor: pointer;
border: 1px solid transparent;
transition:
background-color var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast);
}
.cookie-notice__btn--accept {
background-color: #fff;
color: var(--color-heading);
border-color: #fff;
}
.cookie-notice__btn--accept:hover {
background-color: rgba(255,255,255,0.88);
}
.cookie-notice__btn--decline {
background-color: transparent;
color: rgba(255,255,255,0.8);
border-color: rgba(255,255,255,0.35);
}
.cookie-notice__btn--decline:hover {
color: #fff;
border-color: rgba(255,255,255,0.7);
}
.cookie-notice__btn:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 3px;
}
/* ============================================================
21. FAQ ACCORDION
Single-open: opening one item closes others (handled in JS).
Works inside or outside .content. No icon font needed —
the toggle indicator is a CSS-drawn chevron.
Usage:
============================================================ */
.faq {
border-top: 1px solid var(--color-border-strong);
max-width: var(--column-width);
margin-left: auto;
margin-right: auto;
}
.faq__item {
border-bottom: 1px solid var(--color-border-strong);
}
.faq__question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: var(--weight-medium);
color: var(--color-heading);
line-height: 1.4;
transition: color var(--transition-fast);
}
@media (min-width: 860px) {
.faq__question { font-size: var(--text-lead); }
}
.faq__question:hover { color: var(--accent); }
.faq__question:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* Chevron — pure CSS, rotates on open */
.faq__question::after {
content: '';
display: block;
flex-shrink: 0;
width: 10px;
height: 10px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform var(--transition-base);
}
.faq__question[aria-expanded="true"]::after {
transform: rotate(225deg) translateY(-2px);
}
.faq__answer {
overflow: hidden;
}
.faq__answer[hidden] { display: none; }
.faq__answer-inner {
padding-bottom: var(--space-3);
}
/* Prose inside FAQ answers cascades from .content when
.faq lives inside a .content block. When outside, these
rules provide a reasonable baseline. */
.faq__answer-inner p {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-body);
color: var(--color-text-secondary);
margin-bottom: var(--space-2);
max-width: 68ch;
}
.faq__answer-inner p:last-child { margin-bottom: 0; }
@media (min-width: 860px) {
.faq__answer-inner p { font-size: var(--text-lead); }
}
/* ============================================================
22. FULL-BLEED IMAGE
True edge-to-edge. No container, no margins. Natural height.
Use landscape images only — portrait images will be very tall.
Usage:
============================================================ */
.img-bleed {
display: block;
width: 100%;
height: auto;
}
/* ============================================================
23. CTA BLOCK
Centered headline, subhead, and button group. Text cascades
from .cta — no classes on h2 or p.
Typically sits on .section--surface background.
Usage:
============================================================ */
.cta {
text-align: center;
max-width: var(--column-width);
margin-left: auto;
margin-right: auto;
padding: var(--space-5) 0;
}
.cta h2 {
font-family: var(--font-heading);
font-weight: var(--weight-regular);
font-size: clamp(28px, 4vw, 40px);
line-height: 1.15;
color: var(--color-heading);
letter-spacing: -0.01em;
margin-bottom: var(--space-2);
}
.cta p {
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: 1.5;
color: var(--color-text-secondary);
max-width: 52ch;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
/* ============================================================
24. TESTIMONIALS
3-up grid of quote + attribution. All type cascades from
.testimonial-item — no classes on blockquote or p.
Lora throughout. Attribution italicized.
Usage:
Quote text.
— Name, Title
============================================================ */
.testimonials {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-4);
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
}
@media (min-width: 860px) {
.testimonials {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
}
.testimonial-item {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.testimonial-item blockquote {
font-family: var(--font-heading);
font-weight: var(--weight-regular);
font-style: normal;
font-size: var(--text-lead);
line-height: 1.55;
color: var(--color-text);
margin: 0;
padding: 0;
border: none;
}
.testimonial-item p {
font-family: var(--font-heading);
font-weight: var(--weight-regular);
font-style: italic;
font-size: var(--text-caption);
line-height: 1.4;
color: var(--color-text-muted);
margin: 0;
}
/* ============================================================
25. CONTACT FORM SECTION
Column-constrained (720px). Heading and intro text cascade
from .contact-form — no classes on h2 or p.
Form elements use existing §7 chrome form rules.
Usage:
============================================================ */
.contact-form {
max-width: var(--column-width);
margin-left: auto;
margin-right: auto;
}
.contact-form h2 {
font-family: var(--font-heading);
font-weight: var(--weight-regular);
font-size: var(--text-h2);
line-height: var(--leading-heading);
color: var(--color-heading);
letter-spacing: -0.01em;
margin-bottom: var(--space-2);
}
.contact-form > p {
font-family: var(--font-body);
font-size: var(--text-lead);
line-height: var(--leading-body);
color: var(--color-text-secondary);
margin-bottom: var(--space-4);
max-width: 56ch;
}
/* ============================================================
26. CARDS: 1-UP
Same .card shell as the grids. Column-constrained (720px).
Wrap in .container > .cards__grid--one.
Usage:
============================================================ */
.cards__grid--one {
max-width: var(--column-width);
margin-left: auto;
margin-right: auto;
}
/* ============================================================
27. TOC OVERRIDES
These rules live at the end to beat the .content cascade.
============================================================ */
.toc,
.content .toc {
font-size: 15px;
font-family: var(--font-body);
padding: 0;
margin: 0;
}
/* Force 14px on all TOC children — beats .content desktop scaling */
.toc__nav,
.toc__item,
.content .toc__nav,
.content .toc__item,
.content a.toc__link,
.content a.toc__top {
font-size: 15px;
}
.content .toc__nav,
.toc__nav {
list-style: none;
padding: 0;
margin: 0;
/* display intentionally not set here — show/hide handled above */
}
.content .toc__item,
.toc__item {
list-style: none;
margin: 0;
padding: 0;
}
.content a.toc__link,
.toc__link {
display: block;
padding: 6px 0;
color: var(--accent);
text-decoration: none;
border-bottom: none;
line-height: 1.3;
transition: color var(--transition-fast);
}
.content a.toc__link:hover,
.toc__link:hover {
color: var(--accent-hover);
background-color: rgba(26, 111, 173, 0.07);
border-bottom: none;
border-radius: var(--radius-sm);
max-width: calc(100% - var(--space-4));
}
/* .toc__link.is-active — removed; hover state only */
.content a.toc__top,
.toc__top {
display: block;
margin-top: var(--space-1);
font-size: 11px;
color: var(--color-text-muted);
text-decoration: none;
border-bottom: none;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.content a.toc__top:hover,
.toc__top:hover {
color: var(--accent);
background-color: transparent;
}
/* ============================================================
28. EVENT GALLERY
Full-width photo grid + lightbox for event archive pages.
============================================================ */
/* ── Page header ──────────────────────────────────────────── */
.event-header {
padding: var(--space-5) var(--page-margin-tablet) var(--space-4);
text-align: center;
}
.event-header h1 {
font-family: var(--font-heading);
/* Scoped override, not the shared --text-h2 token (also used by
.slideshow-hero__header h1 and .contact-form h2 — changing the
token itself would have bumped those too). Verified numerically
against the longest real event title (58 chars, "Edenton Music &
Water Festival and Heritage Farm Fest") using the actual Lora font
metrics: stays on one line at every viewport width from 860px up
to full desktop; wraps only below 860px, same as the original
fixed 28px did. A fixed-px jump (this project's usual preference
over fluid clamp()) can't satisfy that constraint here — the
43 event titles vary too much in length for one fixed breakpoint
jump to fit the longest ones without wrapping while still looking
bigger than 28px on the rest. */
font-size: clamp(28px, calc(3.4vw - 2px), 44px);
font-weight: var(--weight-regular);
color: var(--color-heading);
line-height: var(--leading-heading);
margin-bottom: var(--space-1);
}
.event-header p {
font-family: var(--font-body);
font-size: var(--text-lead);
color: var(--color-text-secondary);
max-width: 680px;
line-height: var(--leading-body);
margin: 0 auto;
}
/* ── Hint text ────────────────────────────────────────────── */
.event-gallery__hint {
text-align: center;
font-size: var(--text-caption);
color: var(--color-text-secondary); /* was --color-text-muted (3.45:1 — fails AA at this size); secondary is 8.9:1 */
margin-bottom: var(--space-3);
font-style: italic;
line-height: var(--leading-caption); /* tighter than the inherited body
default — a safety net in case this text ever wraps to two lines */
}
/* ── Thumbnail grid ───────────────────────────────────────── */
.event-gallery {
padding: 0 24px var(--space-7);
}
.event-gallery__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
max-width: var(--container-wide);
margin-left: auto;
margin-right: auto;
}
.event-gallery__item {
cursor: pointer;
overflow: hidden;
background: var(--color-surface-mid);
aspect-ratio: 3 / 2;
border: none;
padding: 0;
display: block;
width: calc((100% - 48px) / 4);
}
.event-gallery__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 3-column step — without this, tablet-landscape widths (iPad mini/
Air/Pro, roughly 1024-1194px) jumped straight from 2 to 4 columns,
cramming 4 photos into a width only comfortable for 3. Reserves true
4-up for genuinely wide desktop windows (>=1200px) instead. */
@media (max-width: 1199px) {
.event-gallery__item { width: calc((100% - 32px) / 3); }
}
@media (max-width: 860px) {
.event-gallery__item { width: calc((100% - 16px) / 2); }
}
@media (max-width: 480px) {
.event-gallery {
padding-left: var(--page-margin);
padding-right: var(--page-margin);
}
.event-gallery__item { width: 100%; }
}
/* ── Lightbox overlay ─────────────────────────────────────── */
.event-lb {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 1000;
align-items: center;
justify-content: center;
}
.event-lb.is-open { display: flex; }
/* The frame is the capped, centered unit holding prev/stage/next as
true grid children — this is what locks the arrows to the photo's
own edge (via padding) rather than pinning them to the viewport
edge, at every width, with no breakpoint jump. .event-lb itself
stays the full-viewport dark scrim; .event-lb__frame is the
separate, narrower, capped box centered inside it. */
.event-lb__frame {
display: grid;
/* auto columns size exactly to each arrow's own natural width,
always — they never get squeezed by leftover space. minmax(0, 1fr)
lets the middle column shrink continuously as the frame narrows,
with no minimum floor fighting it. */
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
width: 100%;
max-width: 1500px;
}
.event-lb__stage {
position: relative;
/* height, not max-height — the photo's own max-height:100% rule
below needs a definite parent height to resolve against a
percentage. max-height alone doesn't count as "definite" per the
CSS spec, so without this the photo was only ever being
width-constrained, and could render taller than the viewport
(worse the less vertical space is available, e.g. heavy browser
chrome). Harmless for smaller photos — the stage has no visible
background, so reserving the full 90vh just centers the photo
within a taller invisible box, same as before. */
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
/* Lets this grid child shrink below its content's natural width
instead of forcing the grid wider — the classic grid/flex
"won't shrink below content" trap noted elsewhere in this
project, and easy to hit here since minmax(0, 1fr) alone isn't
enough if the child itself resists shrinking. */
min-width: 0;
}
.event-lb__stage img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
opacity: 0;
transition: opacity 150ms ease;
user-select: none;
display: block;
}
.event-lb__stage img.is-active { opacity: 1; }
.event-lb__close {
position: fixed;
top: 16px;
right: 16px;
background: none;
border: none;
color: #fff;
font-size: 32px;
cursor: pointer;
line-height: 1;
opacity: 0.7;
transition: opacity 150ms ease;
z-index: 1010;
}
.event-lb__close:hover { opacity: 1; }
/* Prev/next are now plain grid children of .event-lb__frame — no
position:fixed, no viewport-relative math, no separate mobile
strategy. One rule, every width: arrows always locked to the
photo's edge by a fixed 10px gap. No text-shadow needed — unlike
the slideshow's arrows, these never sit over a photo, only over
the flat dark scrim, so a plain flat color is enough contrast on
its own. */
.event-lb__prev,
.event-lb__next {
position: static;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.6);
font-size: 32px;
width: 48px;
height: 80px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: color 150ms ease;
}
.event-lb__prev:hover,
.event-lb__next:hover { color: #fff; }
.event-lb__prev { grid-column: 1; padding-right: 10px; }
.event-lb__next { grid-column: 3; padding-left: 10px; }
.event-lb__prev:disabled,
.event-lb__next:disabled {
color: rgba(255, 255, 255, 0.15);
cursor: default;
pointer-events: none;
}
/* ── Surprise Me nav pill ─────────────────────────────────── */
.nav-surprise {
display: inline-block;
border: 1px solid var(--color-heading);
color: var(--color-heading);
border-radius: 20px;
padding: 4px 14px 5px;
font-size: 14px;
text-decoration: none;
transition: background 150ms ease, color 150ms ease;
margin-left: var(--space-1);
line-height: 1.2;
}
.nav-surprise:hover {
background: var(--color-heading);
color: #fff;
}
/* ── Mobile lightbox ──────────────────────────────────────── */
/* Only the close button gets a small phone-specific tweak now — the
arrow/photo/gap relationship above is intentionally the same rule
at every width, so there's nothing left here for prev/next,
.event-lb__controls, or .event-lb__stage to override. */
@media (max-width: 480px) {
.event-lb__close {
font-size: 22px;
opacity: 0.5;
}
}
@media (prefers-reduced-motion: reduce) {
.event-lb__stage img { transition: none; }
}
/* ============================================================
28. HOMEPAGE HERO
Full-viewport single photo, no header, no slideshow — fully
custom, shares nothing with the long-form/slideshow pattern
used by every other page. Text overlay only, static per day
(see index.html's own