.about-section h2 {
    margin: 0;
    font-family: var(--font-bold);
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.accordion {
    margin-bottom: 14px;
    border: 1px solid color-mix(in srgb, var(--color-primary, #FFB3C6) 35%, transparent);
    border-radius: var(--border-radius-card, 14px);
    background: var(--color-accordion-bg, #ffffff);
    color: var(--color-accordion-text, var(--color-text, #0f172a));
    overflow: hidden;
}

/* The gap is between rows: the last row keeps none, so an accordions block ends at its last row like every other
   block ends at its content, and the block after it sits the usual distance away. */
.accordion:last-child {
    margin-bottom: 0;
}

.accordion h2 {
    margin: 0;
}

.accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 18px 20px;
    border: none;
    background: none;
    color: var(--color-accordion-text, var(--color-text));
    font-family: var(--font-bold);
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: color 0.25s var(--easing);
}

.accordion-toggle:hover {
    color: var(--color-accordion-hover, var(--color-action, var(--color-accent)));
}

.accordion-indicator {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-primary-text, #ffffff);
    transition: background-color 0.25s var(--easing), transform 0.3s var(--easing);
}

.accordion-toggle:hover .accordion-indicator {
    background: var(--color-accordion-hover, var(--color-action, var(--color-accent)));
    color: var(--color-action-text, #ffffff);
}

.accordion-indicator::before,
.accordion-indicator::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    background: var(--color-primary-text, #fff);
    transform: translate(-50%, -50%);
    transition: transform 0.3s var(--easing), background-color 0.25s var(--easing);
}

.accordion-toggle:hover .accordion-indicator::before,
.accordion-toggle:hover .accordion-indicator::after {
    background: var(--color-action-text, var(--color-primary-text, #fff));
}

.accordion-indicator::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.accordion.is-open .accordion-indicator::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.4s var(--easing), visibility 0s 0.4s var(--easing);
}

.accordion.is-open .accordion-panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.4s var(--easing), visibility 0s var(--easing);
}

.accordion-panel-inner {
    box-sizing: border-box;
    min-height: 0;
    overflow: hidden;
    /* No bottom padding while closed: a 0fr row can't shrink below the
       inner's padding, which would leave an empty strip under the title. */
    padding: 0 20px;
    color: var(--color-accordion-text, var(--color-text));
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s var(--easing), transform 0.35s var(--easing), padding-bottom 0.4s var(--easing);
}

.accordion.is-open .accordion-panel-inner {
    padding-bottom: 20px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s var(--easing) 0.1s, transform 0.4s var(--easing), padding-bottom 0.4s var(--easing);
}

.accordion-panel-inner p:first-child {
    margin-top: 0;
}

.accordion-panel-inner h3 {
    margin: 16px 0 4px;
    color: var(--color-cta);
    font-family: var(--font-bold);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.accordion-panel-inner h3:first-child {
    margin-top: 0;
}

/* Events scorecard grid */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.event-scorecard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--color-accordion-bg, #ffffff);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: var(--border-radius-card, 14px);
    padding: 24px 20px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: var(--card-shadow, none);
    position: relative;
    overflow: hidden;
}

.event-scorecard:hover,
.event-scorecard:focus-visible {
    transform: translateY(-3px);
    border-color: var(--color-action, var(--color-cta, #FF8FAB));
    outline: none;
}

/* The event's picture, edge to edge across the top of its card */
.event-scorecard-image {
    display: block;
    width: calc(100% + 40px);
    max-width: none;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: -24px -20px 18px;
}

/* Picture underneath the text: after the footer, edge to edge along the bottom */
.events-image-bottom .event-scorecard-image {
    order: 10;
    margin: 18px -20px -24px;
}

/* Picture beside the text: a column down one side of the card, the badge, text and footer beside it */
.events-grid:is(.events-image-side_left, .events-image-side_right) {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
}

.events-grid:is(.events-image-side_left, .events-image-side_right) .event-scorecard.has-image {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 18px;
    align-content: stretch;
}

.events-grid:is(.events-image-side_left, .events-image-side_right) .event-scorecard-badge {
    justify-self: start;
}

.events-grid:is(.events-image-side_left, .events-image-side_right) .event-scorecard.has-image > :not(.event-scorecard-image) {
    grid-column: 2;
}

.events-grid:is(.events-image-side_left, .events-image-side_right) .event-scorecard-image {
    grid-column: 1;
    grid-row: 1 / -1;
    width: calc(100% + 20px);
    height: calc(100% + 48px);
    min-height: 180px;
    aspect-ratio: auto;
    margin: -24px 0 -24px -20px;
}

.events-grid.events-image-side_right .event-scorecard.has-image {
    grid-template-columns: minmax(0, 1fr) 40%;
}

.events-grid.events-image-side_right .event-scorecard.has-image > :not(.event-scorecard-image) {
    grid-column: 1;
}

.events-grid.events-image-side_right .event-scorecard-image {
    grid-column: 2;
    margin: -24px -20px -24px 0;
}

/* On phones a side picture goes back above the text */
@media (max-width: 600px) {
    .events-grid:is(.events-image-side_left, .events-image-side_right) .event-scorecard.has-image {
        display: flex;
    }

    .events-grid:is(.events-image-side_left, .events-image-side_right) .event-scorecard-image {
        width: calc(100% + 40px);
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
        margin: -24px -20px 18px;
    }
}

.event-scorecard-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary, #FFF0F3);
    color: var(--color-text, #1e293b);
    padding: 4px 12px;
    border-radius: var(--border-radius-card, 16px);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 14px;
    align-self: flex-start;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.event-badge-icon {
    font-size: 0.85rem;
}

.event-scorecard-content {
    flex: 1;
}

/* Admin-only marker on draft events in an Events block */
.event-draft-label {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 8px;
    border: 1px dashed currentColor;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary, rgba(0, 0, 0, 0.55));
}

.event-scorecard-title {
    font-family: var(--font-bold);
    font-size: 1.15rem;
    margin: 0 0 8px 0;
    color: var(--color-heading, var(--color-text, #0f172a));
    line-height: 1.3;
}

.event-scorecard-summary {
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.5;
    margin: 0 0 16px 0;
}

.event-scorecard-footer {
    display: flex;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: auto;
}

.event-scorecard-cta {
    font-size: 0.85rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--color-text) 100%, transparent);
    transition: color 0.15s ease;
}

.event-scorecard:hover .event-scorecard-cta {
    color: color-mix(in srgb, var(--color-text) 100%, transparent);
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .accordion-panel,
    .accordion-panel-inner,
    .accordion-indicator::before,
    .accordion-indicator::after {
        transition: none;
    }
}

.contact-preference p {
    font-size: 14px;
    margin-bottom: 1px;
}

.preference-options {
    display: flex;
    gap: 60px;
    align-items: center;
}

.preference-options label {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 1px;
    cursor: pointer;
}

.preference-options input {
    margin: 0;
}

/* Responsive Markdown Tables */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
}

table.markdown-table,
.constrained table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 auto;
    text-align: left;
}

table.markdown-table th,
table.markdown-table td,
.constrained table th,
.constrained table td {
    padding: 10px 16px;
    border: 1px solid var(--color-table-border, var(--color-border, rgba(0, 0, 0, 0.12)));
}

table.markdown-table th,
.constrained table th {
    background-color: var(--color-table-header-bg, color-mix(in srgb, var(--color-primary, #FFB3C6) 12%, transparent));
    font-family: var(--font-bold);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-table-header-text, var(--color-text));
}

table.markdown-table tbody tr:nth-child(even),
.constrained table tbody tr:nth-child(even) {
    background-color: var(--color-table-row-alt, color-mix(in srgb, var(--color-primary, #FFB3C6) 4%, transparent));
}

/* Age-locked page blocks: the real layout is rendered (images already swapped for server-blurred copies)
   and each block's inner content is blurred and faded towards white, so section backgrounds stay crisp and
   the blur only covers the content itself. Neighbouring locked blocks share one message
   (templates/components/age_locked_block.html), stacked over the same grid cell. */
.age-locked-group {
    display: grid;
    overflow: clip;
    /* Its own stacking context, so the lifted overlay's sticky message slides under the navbar (z-index 3)
       at the group's end instead of painting over it or its dropdowns. */
    isolation: isolate;
    /* Where the message sticks: just below the sticky navbar. */
    --age-locked-stick-top: calc(var(--navbar-height, 48px) + 24px);
}

/* The phone navbar is its menu-icon bar (about 62px, navigation.css), whatever --navbar-height says. */
@media (max-width: 700px) {
    .age-locked-group {
        --age-locked-stick-top: calc(max(var(--navbar-height, 48px), 62px) + 16px);
    }
}

.age-locked-content,
.age-locked-overlay {
    grid-area: 1 / 1;
    min-width: 0;
}

/* The blur/opacity below (and positioned bits like gallery spinners) paint on the positioned layer, above
   an unpositioned overlay; keep the content in its own stacking context and lift the overlay over it. */
.age-locked-content {
    isolation: isolate;
    pointer-events: none;
    user-select: none;
}

/* Wrapping makes a locked block the last .item among its new siblings; don't let it pick up the
   last-section background from layout.css (.item:last-of-type). */
.age-locked-content > .item:last-of-type {
    margin-top: 0;
    background-color: transparent;
}

/* The content box inside each block type's full-width wrapper. */
.age-locked-content .item > *,
.age-locked-content .lead > *,
.age-locked-content .gallery-preview > *,
.age-locked-content .private-gallery-content > *,
.age-locked-content .login-block-wrapper > *,
.age-locked-content .wishlist-section > :not(.item) {
    filter: blur(9px);
    opacity: 0.45;
}

.age-locked-overlay {
    position: relative;
    z-index: 1;
    padding: 24px 16px;
}

/* Fills the overlay, capped at the screen below the navbar, and sticks just below the navbar, so the message
   stays on screen while any of the locked group is and leaves with the group's end (sticky never passes its
   containing block, the overlay). Middle (default) centres the message in it: in the middle of a group that
   fits on screen, in the middle of the visible screen while a tall group scrolls past. Top puts it at the top. */
.age-locked-frame {
    position: sticky;
    top: var(--age-locked-stick-top);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-height: calc(100vh - var(--age-locked-stick-top) - 24px);
    max-height: calc(100dvh - var(--age-locked-stick-top) - 24px);
    min-height: min-content;
}

.age-locked-group[data-message-position="top"] .age-locked-frame {
    justify-content: flex-start;
}

/* The message sticks inside the frame too: near the group's end the frame is pushed up by the overlay's
   bottom, and this keeps the message below the navbar (and above the screen's bottom edge when the group
   starts low on screen) until the group itself has gone. */
.age-locked-frame > .age-locked-message {
    position: sticky;
    top: var(--age-locked-stick-top);
    bottom: 24px;
}

.age-locked-message {
    max-width: 420px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, var(--color-primary, #FFB3C6) 35%, transparent);
    border-radius: var(--border-radius-card, 14px);
    background: var(--color-accordion-bg, #ffffff);
    color: var(--color-text, #0f172a);
    text-align: center;
}

.age-locked-message h2 {
    margin: 0 0 8px;
}

.age-locked-message p {
    margin: 0 0 16px;
    white-space: pre-line;
}

.age-locked-paused {
    font-weight: 600;
}

.age-locked-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* An outline button in the message panel's own text colour, whatever the secondary button colours are. */
.age-locked-actions .button.secondary {
    background-color: transparent;
    color: inherit;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}

.age-locked-actions .button.secondary:hover {
    background-color: color-mix(in srgb, currentColor 6%, transparent);
    color: inherit;
    border: 1px solid currentColor;
}

/* Username/password form that logs in without leaving the page (components/inline_login_form.html). */
.inline-login-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    text-align: left;
}

.age-locked-actions [hidden],
.inline-login-form[hidden] {
    display: none;
}

.inline-login-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-bold);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.inline-login-form input {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    border-radius: var(--border-radius, 10px);
    background: var(--color-login-input-bg, #fff);
    color: var(--color-login-input-text, var(--color-text, #0f172a));
    font-size: 16px;
}

.inline-login-form input:focus {
    outline: none;
    border-color: var(--color-cta);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-cta) 20%, transparent);
}

.inline-login-form .inline-login-error {
    margin: 0;
    color: var(--color-error, #b42318);
    font-size: 0.9rem;
}

.inline-login-form .button {
    margin-top: 4px;
    min-height: 44px;
}

/* Log in / sign up / verify-your-age modes of the same form (data-mode, set by components/login_popup.html). */
.inline-login-form .inline-signup-only,
.inline-login-form .inline-signup-verify,
.inline-login-form[data-mode="signup"] .inline-login-only,
.site-popup-panel .inline-signup-only-heading,
.site-popup-panel[data-auth-mode="signup"] .inline-login-only-heading,
.site-popup-panel[data-auth-mode="verify"] .inline-login-only-heading {
    display: none;
}

.inline-login-form[data-mode="signup"] .inline-signup-only,
.site-popup-panel[data-auth-mode="signup"] .inline-signup-only-heading {
    display: inline;
}

.inline-login-form[data-mode="signup"] label.inline-signup-only {
    display: flex;
    animation: inline-signup-in 0.2s ease-out;
}

.inline-login-form[data-mode="signup"] p.inline-signup-only {
    display: block;
}

.inline-signup-age-note {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

@keyframes inline-signup-in {
    from { opacity: 0; transform: translateY(-4px); }
}

.inline-login-switch,
.age-locked-message .inline-login-switch {
    margin: 2px 0 0;
    text-align: center;
    font-size: 0.9rem;
    white-space: normal;
}

.inline-login-link {
    padding: 4px 2px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-family: var(--font-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* After signing up on a page that still needs age verification: only the "verify your age" step shows. */
.inline-login-form[data-mode="verify"] > :not(.inline-signup-verify) {
    display: none;
}

.inline-login-form[data-mode="verify"] .inline-signup-verify {
    display: block;
    text-align: center;
}

.inline-signup-verify h3 {
    margin: 0 0 6px;
}

.inline-signup-verify p {
    white-space: normal;
}

.site-popup-panel .inline-signup-verify h3 {
    font-size: 1.5em;
}

.inline-signup-verify .button {
    width: 100%;
}

/* In the age-locked message: heading, "You're signed up", then the verify button. */
.age-locked-message:has(.inline-login-form[data-mode="verify"]) {
    display: flex;
    flex-direction: column;
}

.age-locked-message:has(.inline-login-form[data-mode="verify"]) > p,
.age-locked-message:has(.inline-login-form[data-mode="verify"]) .age-locked-actions {
    display: none;
}

/* Popups over the page: "Verify my age" or "Log in" before a WhatsApp, message or booking
   (components/ageverif.html) and the login popup (components/login_popup.html). */
.site-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.site-popup[hidden] {
    display: none;
}

.site-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}

.site-popup-panel {
    position: relative;
    width: 100%;
    padding-top: 32px;
}

.site-popup-close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.6rem;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0.6;
}

.site-popup-close:hover,
.site-popup-close:focus-visible {
    opacity: 1;
}

html.site-popup-open {
    overflow: hidden;
}