/* Generated Public Site Theme Variables */
:root {
    --color-foreground: #000000;
    --color-background: snow;
    --color-accent: #FF8FAB;
    --color-text: #000000;
    --color-text-secondary: #6d5a60;
    --color-links: #FF8FAB;
    --navbar-background: rgba(255, 255, 255, 0.5);
    --navbar-text: #000000;
    --navbar-active: rgba(0, 0, 0, 0.75);
    --navbar-hamburger-icon: #000000;
    --navbar-mobile-background: snow;
    --navbar-mobile-text: #000000;
    --navbar-mobile-active: #FF8FAB;
    --color-cta: #FF8FAB;
    --color-cta-text: #000000;
    --color-primary: #FFB3C6;
    --color-primary-text: #000000;
    --color-action: #bd9fa8;
    --color-action-text: #ffb3c6;
    --color-site-footer: #FF8FAB;
    --color-site-footer-text: #000000;
    --color-footer-cta: #9C365A;
    --color-footer-cta-text: #FFFFFF;
    --color-secondary: #6acfff;
    --color-secondary-text: #ffffff;
    --color-secondary-border: rgba(255, 255, 255, 0.5);
    --color-secondary-hover-bg: #68c9f6;
    --color-secondary-hover-text: #ffffff;
    --color-secondary-hover-border: rgba(255, 255, 255, 0.5);
    --color-accordion-bg: snow;
    --color-accordion-text: #000000;
    --color-accordion-hover: #FF8FAB;
    --color-login-bg: snow;
    --color-login-card-bg: snow;
    --color-login-text: #000000;
    --color-login-input-bg: snow;
    --color-login-input-text: #000000;
    --color-login-btn-bg: #FF8FAB;
    --color-login-btn-text: #000000;
    --color-login-secondary-btn-bg: #6acfff;
    --color-login-secondary-btn-text: #ffffff;
    --color-login-secondary-btn-border: rgba(255, 255, 255, 0.5);
    --color-login-secondary-hover-bg: #68c9f6;
    --color-login-secondary-hover-text: #000000;
    --color-login-secondary-hover-border: rgba(255, 255, 255, 0.5);
    --color-table-header-bg: color-mix(in srgb, #FF8FAB 12%, transparent);
    --color-table-header-text: #000000;
    --color-table-row-alt: color-mix(in srgb, #FF8FAB 4%, transparent);
    --color-table-border: color-mix(in srgb, #000000 12%, transparent);
    --color-booking-slot-bg: whitesmoke;
    --color-booking-slot-text: #000000;
    --color-booking-slot-border: rgba(0, 0, 0, 0.1);
    --color-booking-selected-bg: #FF8FAB;
    --color-booking-selected-text: #000000;
    --color-booking-hover-border: #FF8FAB;
    --color-input-bg: whitesmoke;
    --color-input-text: #000000;
    --color-input-placeholder: color-mix(in srgb, #000000 65%, transparent);
    --color-input-border: transparent;
    --color-navbar-bg: rgba(255, 255, 255, 0.5);
    --color-navbar-text: #000000;
    --color-navbar-active: rgba(0, 0, 0, 0.75);
    --color-hamburger-icon: #000000;
    --color-mobile-menu-bg: snow;
    --color-mobile-menu-text: #000000;
    --color-mobile-menu-active: #FF8FAB;
    --color-secondary-bg: #6acfff;
    --font-normal: Panamera, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-bold: "Panamera Bold", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --navbar-height: 48px;
    --navbar-padding: 5px;
    --container-max-width: 800px;
    --border-radius: 5px;
    --border-radius-card: 14px;
    --border-radius-image: 12px;
    --border-radius-pill: 999px;
    --border-radius-sm: 4px;
    --corner-rounding: 14px;
    --font-size-base: 16px;
    --easing: cubic-bezier(0.25, 1, 0.5, 1);
}

@font-face {
    font-family: "Panamera Bold";
    src:
        local("Panamera Bold"),
        url("/assets/fonts/Panamera-Bold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Panamera";
    src:
        local("Panamera Medium"),
        url("/assets/fonts/Panamera-Medium.woff2") format("woff2");
    font-display: swap;
}

/* Uploaded Custom Fonts */

@font-face {
    font-family: "Barlow";
    src: url("/assets/fonts/custom/Barlow-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Barlow";
    src: url("/assets/fonts/custom/Barlow.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("/assets/fonts/custom/Cormorant-Garamond-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Fraunces";
    src: url("/assets/fonts/custom/Fraunces-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/custom/Inter-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/assets/fonts/custom/Inter.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Lora";
    src: url("/assets/fonts/custom/Lora.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("/assets/fonts/custom/Manrope-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("/assets/fonts/custom/Manrope.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("/assets/fonts/custom/Nunito-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: url("/assets/fonts/custom/Nunito.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Oswald";
    src: url("/assets/fonts/custom/Oswald-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Oswald";
    src: url("/assets/fonts/custom/Oswald-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("/assets/fonts/custom/Playfair-Display-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("/assets/fonts/custom/Playfair-Display.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Zilla Slab";
    src: url("/assets/fonts/custom/Zilla-Slab-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
    font-size: var(--font-size-base, 16px);
}

body {
    font-family: var(--font-normal);
    color: var(--color-text);
    background-color: var(--color-background);
    height: 100%;
    width: 100%;
    margin: 0px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100dvh;
}

a {
    color: var(--color-links, var(--color-primary));
}

/* The contact band's background is Primary, so the link colour (often a shade of Primary) can
   all but disappear on it. Links in the band's text take the band's text colour and stay
   underlined instead. Buttons keep their own colours. */
.contact-band a:not(.button):not(.cta) {
    color: inherit;
    text-decoration: underline;
}

h1 {
    font-family: var(--font-bold);
    font-weight: bolder;
    padding: 0px;
    margin: 0px;
}

.notification-popover {
    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 10;
    transform: translateX(-50%);
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 12px 20px;
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-pill, 999px);
    background-color: var(--color-background);
    box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
    text-align: center;
    animation: notification-fade 5s ease forwards;
    pointer-events: none;
}

.notification-popover p {
    margin: 0;
}

@keyframes notification-fade {
    0%,
    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Page block widths (the block's `width` setting, `data-block-width` on its root in page_render.html).
   Standard is the theme's container width, so blocks line up with each other unless one is set otherwise;
   the hero banner and photo galleries keep their own widths. Each block's content box reads --block-width. */
[data-block-width] {
    --block-width: var(--container-max-width, 800px);
}

[data-block-width="narrow"] {
    --block-width: min(var(--container-max-width, 800px), 600px);
}

[data-block-width="wide"] {
    --block-width: max(var(--container-max-width, 800px), 1200px);
}

[data-block-width="full"] {
    --block-width: 100%;
}

/* Age-flagged blocks shown unlocked (verified search crawlers, clients) are wrapped in .age-gated for the
   paywall structured data only; the wrapper must not affect layout. The locked group has its own layout. */
.age-gated:not(.age-locked-group) {
    display: contents;
}

.constrained {
    width: 100%;
    max-width: var(--block-width, var(--container-max-width, 800px));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    /* Break long unbroken strings (URLs, pasted text) instead of overflowing */
    overflow-wrap: break-word;
}

.item {
    padding: 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
}

/* A block that's last only inside an unlocked .age-gated wrapper (display: contents) isn't the page's last
   section, nor is the last one inside a group or a booking widget's wrapper; :where keeps the specificity so
   block styles (e.g. .item.testimonials) still win. */
.item:last-of-type:where(:not(.age-gated:not(.age-locked-group):not(:last-of-type) > .item)):where(:not(:is(.block-group, .booking-block) .item)) {
    margin-top: auto;
    background-color: var(--color-primary);
}

/* A page editor page ends with .page-blocks-end (page_render.html), so the block that ends it isn't :last-of-type.
   A Contact form block (any style) that ends the page sits right on the site footer, whose Privacy link stands in
   for the form's own "How we use your information". */
:is(.contact-block, .contact-band):has(+ .page-blocks-end) .privacy-note {
    display: none;
}

/* A block painted edge to edge in one of the theme's colours (or the contact section) that ends the page runs into
   the footer: the footer takes the block's colours (a custom colour lives on the block, out of the footer's reach),
   and on a short page the space left over goes above the block rather than between it and the footer. A Contact
   form block also keeps little space under its form and above the footer's link, so the link sits where the form's
   own would have (the footer's side is under .site-footer below). */
:is([data-block-band][data-block-bg]:not([data-block-bg="custom"]), .item.contact-band):has(+ .page-blocks-end) {
    margin-top: auto;
}

:is(.contact-block[data-block-band][data-block-bg]:not([data-block-bg="custom"]), .item.contact-band):has(+ .page-blocks-end) {
    padding-bottom: 12px;
}

#app-content-root:has(> :is([data-block-band][data-block-bg]:not([data-block-bg="custom"]), .item.contact-band) + .page-blocks-end) {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

/* The contact section and Contact form blocks are where the form comes back to after sending (#contact-<id>):
   they start below the sticky navbar (about 62px on phones, navigation.css) rather than under it. */
.contact-band,
.contact-block {
    scroll-margin-top: calc(max(var(--navbar-height, 48px), 62px) + 16px);
}

.flex-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The photo's blur (--hero-blur, or --hero-blur-m on phones, block-styles.css) and how far the photo reaches past
   its box so the blur never leaves soft, see-through edges (--hero-bleed). */
.background-video {
    --hero-photo-blur: var(--hero-blur, 10px);
    --hero-bleed: max(12px, calc(var(--hero-photo-blur) * 2));
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient( rgba(32, 38, 26, 0.5), rgba(0, 0, 0, 0.5) );
    background-position:center top;
    color: white;
}

.background-video::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient( rgba(32, 38, 26, 0.5), rgba(0, 0, 0, 0.5) );
    content: '';
}

.background-video__media {
    position: absolute;
    inset: calc(-1 * var(--hero-bleed, 12px));
    z-index: -1;
    width: calc(100% + 2 * var(--hero-bleed, 12px));
    height: calc(100% + 2 * var(--hero-bleed, 12px));
    object-fit: cover;
    filter: blur(var(--hero-photo-blur, 10px));
    animation: fadeIn 1s ease-out forwards;
}

.hero-slideshow {
    position: absolute;
    inset: calc(-1 * var(--hero-bleed, 12px));
    z-index: -1;
    width: calc(100% + 2 * var(--hero-bleed, 12px));
    height: calc(100% + 2 * var(--hero-bleed, 12px));
    overflow: hidden;
    pointer-events: none;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(var(--hero-photo-blur, 10px));
    opacity: 0;
    transition: opacity var(--hero-fade-time, 1000ms) ease-in-out;
    pointer-events: none;
}

.hero-slide.is-active {
    opacity: 1;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.background-video > .flex-center {
    position: relative;
    z-index: 1;
}

.lead-height {
    max-height: calc(90%);
    height: 85vh;
    min-height: 500px;
}

/* A hero that's the page's only block (page_render.html) fills the window between the navbar and the site
   footer: the content root grows in body's flex column and the hero grows in it, whatever the footer's height. */
#app-content-root:has(.lead-fill) {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.lead-height.lead-fill {
    flex: 1 0 auto;
    height: auto;
    max-height: none;
}

.lead {
    width: 100%;
    display: grid;
    align-items: center;
    justify-items: center;
}

.footer-flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    font-size: 14px;
}

/* The contact section's words: an ordinary block (not a flex column) so left and right pictures from its text
   float with the words beside them, and min-width: 0 so a wide picture or video shrinks to the column instead of
   stretching it and squashing the form. */
.footer-flex > .flex-center {
    display: flow-root;
    flex: 1 1 50%;
    min-width: 0;
    align-self: flex-start;
}

.footer-flex > .flex-center > .button {
    display: inline-block;
}

.footer-flex form {
    flex: 1 1 50%;
    min-width: 0;
}

@media (max-width:700px) {
    .footer-flex {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
}

/* Site-wide footer (components/site_footer.html): a strip under the page's last block in the Footer colour
   (Accent until set) and Footer text colour (picked to read on it until set), with its links centred between
   even padding above and below. */
.site-footer {
    margin-top: auto;
    padding: 20px 20px 24px;
    background-color: var(--color-site-footer, var(--color-accent));
    color: var(--color-site-footer-text, #ffffff);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
}

.site-footer-links a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.85;
}

.site-footer-links a:hover {
    opacity: 1;
}

/* Under a painted block that ends the page (see .page-blocks-end above): the block's colours, and under a Contact
   form block little space above the link. */
body:has(.item.contact-band + .page-blocks-end) .site-footer {
    padding-top: 12px;
    background-color: var(--color-primary);
    color: var(--color-text);
}

body:has(.contact-block[data-block-band][data-block-bg]:not([data-block-bg="custom"]) + .page-blocks-end) .site-footer {
    padding-top: 12px;
}

body:has(:is([data-block-band], .item.contact-band)[data-block-bg="tint"] + .page-blocks-end) .site-footer { background-color: var(--block-tint); color: var(--color-text); }
body:has(:is([data-block-band], .item.contact-band)[data-block-bg="card"] + .page-blocks-end) .site-footer { background-color: var(--block-card-bg); color: var(--block-card-text); }
body:has(:is([data-block-band], .item.contact-band)[data-block-bg="accent"] + .page-blocks-end) .site-footer { background-color: var(--block-accent); color: var(--block-accent-text); }
body:has(:is([data-block-band], .item.contact-band)[data-block-bg="primary"] + .page-blocks-end) .site-footer { background-color: var(--block-primary); color: var(--block-primary-text); }
body:has(:is([data-block-band], .item.contact-band)[data-block-bg="rose"] + .page-blocks-end) .site-footer { background-color: var(--block-rose); color: var(--block-rose-text); }
body:has(:is([data-block-band], .item.contact-band)[data-block-bg="ink"] + .page-blocks-end) .site-footer { background-color: var(--block-ink); color: var(--block-ink-text); }

.button {
    text-transform: uppercase;
    font-size: smaller;
    font-family: var(--font-bold);
    text-decoration: none;
    border: rgba(255, 255, 255, 0.0) solid 1px;
    transition: all;
    transition-duration: 0.1s;
    transition-timing-function: var(--easing);
    padding: 12px;
    border-radius: var(--border-radius, 5px);
}

.cta {
    color: var(--color-cta-text, white);
    background-color: var(--color-cta);
}

.primary {
    color: var(--color-primary-text, white);
    background-color: var(--color-primary, var(--color-cta));
}

.cta:hover {
    background-color: var(--color-action, var(--color-cta));
    color: var(--color-action-text, var(--color-cta-text, white));
}

.primary:hover {
    background-color: var(--color-action, var(--color-primary));
    color: var(--color-action-text, var(--color-primary-text, white));
}

.secondary,
.button.secondary {
    color: var(--color-secondary-text, var(--color-text, #0f172a));
    background-color: var(--color-secondary, var(--color-secondary-bg, transparent));
    border: 1px solid var(--color-secondary-border, rgba(15, 23, 42, 0.4));
}

.secondary:hover,
.button.secondary:hover {
    color: var(--color-secondary-hover-text, var(--color-secondary-text, var(--color-text, #0f172a)));
    background-color: var(--color-secondary-hover-bg, rgba(15, 23, 42, 0.08));
    border: 1px solid var(--color-secondary-hover-border, var(--color-text, #0f172a));
}

.footer-cta {
    color: var(--color-footer-cta-text, var(--color-text, #0f172a));
    background-color: var(--color-footer-cta);
    border: unset;
}

.button:hover {
    border: white solid 1px;
    cursor: pointer;
}

.footer-cta:hover {
    border: unset;
    scale: 1.02;
    color: var(--color-footer-cta-text, var(--color-text, #0f172a));
}

/* Button Group Horizontal Layout */
.button-group,
.button-group-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
}

.button-group-section {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

form {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: stretch;
    width: 100%;
    font-size: 14px;
}

textarea {
    resize: vertical;
}

input,
textarea {
    background-color: var(--color-input-bg, whitesmoke);
    color: var(--color-input-text, inherit);
    border-radius: var(--border-radius, 5px);
    padding: 9px 7px; /* 10px 8px less the 1px border */
    border: 1px solid var(--color-input-border, transparent);
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-normal);
}

input::placeholder,
textarea::placeholder {
    color: var(--color-input-placeholder, GrayText);
    opacity: 1;
}

.row {
    display: flex;
    gap: 5px;
    width: 100%;
}

.row-desktop {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.form-button {
    background-color: var(--color-cta);
    color: var(--color-cta-text, white);
    width: 100%;
    margin-top: 15px;
    text-align: center;
    box-sizing: border-box;
}

.form-button:hover {
    background-color: var(--color-action, var(--color-cta));
    color: var(--color-action-text, var(--color-cta-text, white));
}

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

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

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

.preference-options input {
    margin: 0;
}

.contact-form {
    text-align: left;
    gap: 12px;
    font-size: 16px;
}

.contact-form input,
.contact-form textarea {
    font-size: 14px;
}

.contact-form .booking-field-error {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-bold);
    font-size: 14px;
}

.contact-form .booking-field-error[hidden] {
    display: none;
}

.contact-form .preference-section {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition: grid-template-rows 0.3s var(--easing), opacity 0.3s var(--easing);
}

.contact-form .preference-section.is-collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
}

.contact-form .preference-collapse {
    overflow: hidden;
    min-height: 0;
}

.contact-form .preference-section.is-collapsed .preference-collapse {
    visibility: hidden;
    transition: visibility 0s linear 0.3s; /* hide after the collapse finishes */
}

.contact-form .booking-subheading {
    margin: 24px 0 8px;
    font-family: var(--font-bold);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-align: left;
    text-transform: uppercase;
    opacity: 0.8;
}

.contact-form .contact-preference {
    margin: 0;
}

.contact-form .preference-options {
    gap: 32px;
    flex-wrap: wrap;
}

.contact-form .preference-options label {
    flex-shrink: 0;
    gap: 8px;
    font-size: 16px;
}

.contact-form .preference-options input {
    width: auto;
    flex-shrink: 0;
}

.contact-form .location-options {
    gap: 8px;
    justify-content: flex-start;
}

.contact-form .location-options label {
    min-width: 110px;
    margin: 0;
    padding: 12px;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius, 5px);
    background-color: whitesmoke;
    color: var(--color-text);
    font-family: var(--font-normal);
    font-size: 1rem;
    transition: border-color 0.25s var(--easing), background-color 0.25s var(--easing),
        color 0.25s var(--easing);
}

.contact-form .location-options label:hover {
    border-color: var(--color-cta);
}

.contact-form .location-options label.is-selected {
    border-color: white;
    background-color: var(--color-cta);
    color: white;
    font-family: var(--font-bold);
}

.contact-form .location-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.contact-form .form-button {
    background-color: var(--color-cta);
    color: white;
    width: 100%;
}

/* The contact section is a band painted in Primary, so its buttons use the Footer CTA colours
   (not CTA, which usually follows the same Accent colour as Primary and would vanish into it). */
.contact-band .form-button,
.contact-band .contact-form .form-button {
    background-color: var(--color-footer-cta);
    color: var(--color-footer-cta-text);
}

.contact-band .form-button:hover,
.contact-band .contact-form .form-button:hover {
    background-color: color-mix(in srgb, var(--color-footer-cta) 88%, var(--color-footer-cta-text));
    color: var(--color-footer-cta-text);
}

/* "How we use your information" link by form submit buttons (components/privacy_note.html). */
.privacy-note {
    margin: 8px 0 0;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.4;
}

.privacy-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: 0.8;
}

.privacy-note a:hover {
    opacity: 1;
}

.navbar {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--navbar-padding);
}

.navbar-outer {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    /* Above anything a block lifts on hover (an Instant gallery print, 2), below popups and the lightbox (10+). */
    z-index: 3;
    background-color: var(--navbar-background, rgba(255, 255, 255, 0.5));
    /* A see-through navbar background must blur the page enough that text scrolled under it can't be read
       through the links (5px left body copy legible, e.g. the privacy notice's section list). Safari needs
       the prefixed property. */
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

#menu-btn {
    position: absolute;
    top: -100%;
    left: -100%;
}

.navbar > .button,
.navbar .nav-dropdown > .button,
.navbar .nav-dropdown-trigger,
.navbar .nav-dropdown-item {
    border: none;
}

.navbar > .button:hover,
.navbar .nav-dropdown > .button:hover,
.navbar .nav-dropdown-trigger:hover,
.navbar .nav-dropdown-item:hover,
.navbar .nav-dropdown-item:focus {
    border: none;
    text-decoration: underline;
}

.menu-icon {
    display: none;
}

.navicon,
.navicon:before,
.navicon:after {
    background-color: var(--navbar-hamburger-icon, var(--color-hamburger-icon, var(--navbar-text, var(--color-foreground, #000000))));
    display: block;
    position: relative;
    width: 18px;
    height: 2px;
}

.navicon:before,
.navicon:after {
    content: "";
    position: absolute;
    left: 0;
    transition: all 1s var(--easing), bottom 0.2s ease-out;
}

.navicon:before {
    top: 5px;
}

.navicon:after {
    bottom: 5px;
}

.menu-btn:checked ~ .menu-icon .navicon:before {
    top: 0;
}

.menu-btn:checked ~ .menu-icon .navicon:after {
    bottom: 0;
}

.navbar a,
.navbar .nav-dropdown-trigger {
    margin: 0px;
    color: var(--navbar-text, rgba(0, 0, 0, 0.55));
}

/* Highlighted navbar button (Settings > Age & login > Navbar button), a sibling of .navbar so it
   stays in the bar when the mobile menu is collapsed. */
.nav-cta {
    white-space: nowrap;
}

@media (min-width: 701px) {
    .navbar-outer:has(> .nav-cta) {
        display: flex;
        align-items: center;
    }

    .navbar-outer > .navbar {
        flex: 1;
        min-width: 0;
    }

    .navbar-outer > .nav-cta {
        flex-shrink: 0;
        margin-right: max(16px, env(safe-area-inset-right));
    }

    /* The invisible copy on the left balances the button on the right, so the links are centred on the bar. */
    .navbar-outer > .nav-cta-mirror {
        visibility: hidden;
        pointer-events: none;
        margin-right: 0;
        margin-left: max(16px, env(safe-area-inset-right));
    }

    /* The links don't fit on one line each between the button and its copy (fitNavCta in base.html): the copy goes, so the links
       use the whole bar and the button sits at its far right. */
    .navbar-outer.nav-cta-tight > .nav-cta-mirror {
        display: none;
    }

    /* Measuring: every link on one line, at its full width. */
    .navbar-outer.nav-cta-measure > .navbar > * {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Still too many links for the space left of the button: a second row of links rather than links under it. */
    .navbar-outer.nav-cta-wrap > .navbar {
        flex-wrap: wrap;
        justify-content: center;
    }

    .navbar-outer.nav-cta-wrap > .navbar > .navbar-spacer {
        display: none;
    }
}

@media (max-width: 700px) {
    .navbar-outer > .nav-cta-mirror {
        display: none;
    }
}

.navbar a.active,
.navbar .nav-dropdown.active > .nav-dropdown-trigger,
.navbar .nav-dropdown-trigger.active,
.navbar .nav-dropdown-item.active {
    color: var(--navbar-active, rgba(0, 0, 0, 0.75));
    font-weight: 600;
}

.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background: transparent;
    user-select: none;
}

.nav-dropdown-trigger-static {
    cursor: default;
}

.nav-dropdown-caret {
    display: inline-block;
    transition: transform 0.2s var(--easing);
    opacity: 0.7;
    flex-shrink: 0;
}

.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown:focus-within .nav-dropdown-caret {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    transform: translateY(4px);
    min-width: 170px;
    background-color: var(--navbar-mobile-background, var(--color-mobile-menu-bg, var(--navbar-background, var(--color-background, #ffffff))));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
    border-radius: var(--border-radius, 6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.nav-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 16px 8px calc(12px - 1px);
    border: none;
    border-radius: 0;
    text-align: left;
    white-space: nowrap;
    box-sizing: border-box;
    color: var(--navbar-text, rgba(0, 0, 0, 0.55));
    font-size: smaller;
    text-transform: uppercase;
    font-family: var(--font-bold);
    text-decoration: none;
    background-color: transparent;
    transition: color 0.15s ease;
}

.nav-dropdown-item:hover,
.nav-dropdown-item:focus {
    background-color: transparent;
    color: var(--navbar-text, rgba(0, 0, 0, 0.55));
    border: none;
    text-decoration: underline;
}

.nav-dropdown-item.active {
    color: var(--navbar-active, rgba(0, 0, 0, 0.75));
    font-weight: 600;
}

.nav-dropdown-item.active:hover,
.nav-dropdown-item.active:focus {
    color: var(--navbar-active, rgba(0, 0, 0, 0.75));
    border: none;
    text-decoration: underline;
}

.navbar-spacer {
    flex-grow: 1;
}

@media (max-width:700px) {
    /* In the top bar, just left of the menu icon (which is 18px wide with 20px padding on the right). */
    .navbar-outer > .nav-cta {
        position: absolute;
        top: 31px;
        right: 54px;
        transform: translateY(-50%);
        padding: 8px 14px;
        z-index: 1;
    }

    .menu-icon {
        grid-area: hamburger;
        cursor: pointer;
        display: flex;
        justify-content: flex-end;
        align-items: baseline;
        padding: 30px 20px 30px 0;
        position: relative;
        user-select: none;
        visibility: visible;
    }

    .navbar {
        display: grid;
        max-height: 0px;
        padding: 0px;
        overflow: hidden;
        transition: max-height 0.25s var(--easing);
        background-color: var(--navbar-mobile-background, var(--color-mobile-menu-bg, var(--navbar-background, var(--color-background, #ffffff))));
    }

    .menu-btn:checked ~ .navbar {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        background-color: var(--navbar-mobile-background, var(--color-mobile-menu-bg, var(--navbar-background, var(--color-background, #ffffff))));
    }

    .nav-dropdown {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        position: static;
    }

    .nav-dropdown-trigger {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        box-sizing: border-box;
        border: none;
        color: var(--navbar-mobile-text, var(--color-mobile-menu-text, var(--navbar-text, rgba(0, 0, 0, 0.55))));
    }

    .nav-dropdown-trigger.active,
    .nav-dropdown.active > .nav-dropdown-trigger {
        color: var(--navbar-mobile-active, var(--color-mobile-menu-active, var(--navbar-active, rgba(0, 0, 0, 0.75))));
    }

    .nav-dropdown-caret {
        display: none;
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--color-border, rgba(0, 0, 0, 0.12));
        margin: 0 20px 8px 30px;
        padding: 2px 0 2px 10px;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .nav-dropdown-menu::before {
        display: none;
    }

    .nav-dropdown-item {
        padding: 8px 12px;
        color: var(--navbar-mobile-text, var(--color-mobile-menu-text, var(--navbar-text, rgba(0, 0, 0, 0.55))));
        font-size: smaller;
    }

    .nav-dropdown-item.active,
    .nav-dropdown-item:hover,
    .nav-dropdown-item:focus {
        color: var(--navbar-mobile-active, var(--color-mobile-menu-active, var(--navbar-active, rgba(0, 0, 0, 0.75))));
        background: transparent;
    }

    .navbar a {
        color: var(--navbar-mobile-text, var(--color-mobile-menu-text, var(--navbar-text, rgba(0, 0, 0, 0.55))));
    }

    .navbar a.active,
    .navbar a:hover,
    .navbar a:focus {
        color: var(--navbar-mobile-active, var(--color-mobile-menu-active, var(--navbar-active, rgba(0, 0, 0, 0.75))));
    }
}

/* A gallery block's preview strip (the Preview strip style, page_render.html): the newest photos as one link to
   the gallery. Its look is data-strip-style (strip_style): veil, row, film, fan, mosaic, drift. Every look shares
   the markup: .gallery-link > .gallery-carousel (the photos) + .gallery-overlay (the link text).

   Spacing: one --strip-pad above and below the strip and at its sides, so it sits evenly between the blocks
   around it. data-strip-width on the block (strip_width) caps its width: standard, wide, or full (edge to edge,
   no side padding). Phones (700px and narrower) show --n-m photos, computers --n-d; the photos past a screen's
   count carry .strip-m-hide / .strip-d-hide. */
.gallery-block[data-strip-width] {
    --strip-pad: clamp(20px, 4vw, 40px);
    --strip-max: 800px;
}

.gallery-block[data-strip-width="wide"] { --strip-max: 1200px; }
.gallery-block[data-strip-width="full"] { --strip-max: 100vw; }

/* A heading above the strip lines up with the strip's edges. */
.gallery-block[data-strip-width] .gallery-block-head {
    max-width: calc(var(--strip-max) + 2 * var(--strip-pad));
    margin-top: var(--strip-pad);
    padding: 0 var(--strip-pad);
}

.gallery-block[data-strip-width] .gallery-block-head + .gallery-preview {
    margin-top: 0;
    padding-top: clamp(16px, 2vw, 24px);
}

.gallery-preview {
    --strip-gap: 12px;
    --strip-height: 280px;
    --n: var(--n-d, 4);
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--strip-max, 800px) + 2 * var(--strip-pad, 30px));
    margin: 0 auto;
    padding: var(--strip-pad, 30px);
    background-color: var(--color-background);
    overflow: hidden;
    position: relative;
}

.gallery-block[data-strip-width="full"] .gallery-preview {
    max-width: none;
    padding-inline: 0;
}

/* A plain block next to the strip (.item, no background of its own) already has 20px of padding on that side
   (layout.css), so the strip takes it off its own: the space you see above the strip matches the space below
   it, whether its neighbours are plain blocks, coloured bands or the hero. On a background of its own the strip
   keeps its padding all round, since the band's edge is what you see. */
.item:not([data-block-bg], .contact-band) + .gallery-block[data-strip-width]:not([data-block-bg]) .gallery-preview:first-child {
    padding-top: max(0px, calc(var(--strip-pad) - 20px));
}

.item:not([data-block-bg], .contact-band) + .gallery-block[data-strip-width]:not([data-block-bg]) .gallery-block-head {
    margin-top: max(0px, calc(var(--strip-pad) - 20px));
}

.gallery-block[data-strip-width]:not([data-block-bg]):has(+ .item:not([data-block-bg], .contact-band)) .gallery-preview {
    padding-bottom: max(0px, calc(var(--strip-pad) - 20px));
}

.gallery-link {
    display: flow-root;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.gallery-link:focus-visible {
    outline: 3px solid var(--color-cta);
    outline-offset: 4px;
}

.gallery-carousel {
    display: flex;
    gap: var(--strip-gap);
    overflow: hidden;
}

.gallery-carousel img {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    height: var(--strip-height);
    object-fit: cover;
    transition: filter 0.4s ease, transform 0.4s ease, opacity 0.4s ease;
}

/* Past four photos on computers (two on phones) Veiled, Clean row and Film strip scroll sideways, four to a
   view (two and a bit on phones). */
@media (min-width: 701px) {
    .gallery-carousel .strip-d-hide { display: none; }
    .gallery-preview[data-scroll-d] .gallery-carousel {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .gallery-preview[data-scroll-d] .gallery-carousel img {
        /* A sliver of the fifth photo shows, so the row reads as one that scrolls. */
        flex: 0 0 calc((100% - 4 * var(--strip-gap)) / 4.3);
        scroll-snap-align: start;
    }
}

@media (max-width: 700px) {
    .gallery-preview {
        --n: var(--n-m, 4);
        --strip-gap: 10px;
        --strip-height: 240px;
    }
    .gallery-carousel .strip-m-hide { display: none; }
    .gallery-preview[data-scroll-m] .gallery-carousel {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .gallery-preview[data-scroll-m] .gallery-carousel img {
        flex: 0 0 42%;
        scroll-snap-align: start;
    }
}

.gallery-carousel::-webkit-scrollbar {
    display: none;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.gallery-overlay > span {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

.strip-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.gallery-link:is(:hover, :focus-visible) .strip-arrow {
    transform: translateX(4px);
}

/* Veiled: blurred photos under a dark veil, the words in an outlined box; hovering clears them. */
/* The photos sit edge to edge on a dark backing, so their blurred edges run into each other rather than into
   the page, and the strip is one rounded veiled band (square edge to edge). */
.gallery-preview[data-strip-style="veil"] {
    --strip-gap: 0px;
}

.gallery-preview[data-strip-style="veil"] .gallery-link {
    overflow: hidden;
    border-radius: var(--border-radius-image, 8px);
    background: #111;
}

.gallery-block[data-strip-width="full"] [data-strip-style="veil"] .gallery-link {
    border-radius: 0;
}

.gallery-preview[data-strip-style="veil"] .gallery-carousel img {
    filter: blur(var(--preview-blur, 4px));
    transform: scale(1.05);
}

.gallery-preview[data-strip-style="veil"] .gallery-link:is(:hover, :focus-visible) .gallery-carousel img {
    filter: blur(0px);
    transform: scale(1.08);
}

.gallery-preview[data-strip-style="veil"] .gallery-overlay {
    background: rgba(0, 0, 0, 0.2);
}

.gallery-preview[data-strip-style="veil"] .gallery-overlay > span {
    padding: 14px 28px;
    border: 1px solid white;
    color: white;
    background: rgba(0, 0, 0, 0.45);
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* Clean row: the photos sharp and rounded, lifting a little under a mouse, with a text link under them. */
.gallery-preview[data-strip-style="row"] {
    --strip-height: 260px;
}

.gallery-preview[data-strip-style="row"] .gallery-carousel img {
    border-radius: var(--border-radius-image, 10px);
}

@media (hover: hover) {
    .gallery-preview[data-strip-style="row"] .gallery-carousel {
        /* Room for a lifted photo inside the scrolling row, taken back so the row doesn't move. */
        padding-top: 6px;
        margin-top: -6px;
    }
    .gallery-preview[data-strip-style="row"] .gallery-carousel img:hover {
        transform: translateY(-4px);
    }
}

.gallery-preview[data-strip-style="row"] .gallery-overlay {
    position: static;
    justify-content: flex-end;
    padding-top: 16px;
}

/* Edge to edge, and on phones, the row scrolls out to the screen's edges while its first photo and the link
   keep to the page's gutter. */
.gallery-block[data-strip-width="full"] [data-strip-style="row"] .gallery-overlay {
    padding-inline: var(--strip-pad);
}

.gallery-block[data-strip-width="full"] [data-strip-style="row"] .gallery-carousel {
    padding-inline: var(--strip-pad);
    scroll-padding-inline: var(--strip-pad);
}

@media (max-width: 700px) {
    .gallery-block:not([data-strip-width="full"]) .gallery-preview[data-strip-style="row"][data-scroll-m] .gallery-carousel {
        margin-inline: calc(-1 * var(--strip-pad));
        padding-inline: var(--strip-pad);
        scroll-padding-inline: var(--strip-pad);
    }
}

.gallery-preview[data-strip-style="row"] .gallery-overlay > span {
    color: var(--color-links, var(--color-cta));
    font-weight: 600;
    font-size: 1.05rem;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

@media (max-width: 700px) {
    .gallery-preview[data-strip-style="row"] {
        --strip-height: 220px;
    }
}

/* Film strip: frames on a strip of dark film, sprocket holes along both edges, the words printed on its edge
   in amber. The photos are a touch faded until hovered. */
.gallery-preview[data-strip-style="film"] {
    --strip-gap: 6px;
    --strip-height: 230px;
}

.gallery-preview[data-strip-style="film"] .gallery-link {
    background: #141414;
    padding: 30px 6px 42px;
    border-radius: 4px;
}

.gallery-block[data-strip-width="full"] [data-strip-style="film"] .gallery-link {
    border-radius: 0;
}

.gallery-preview[data-strip-style="film"] .gallery-link::before,
.gallery-preview[data-strip-style="film"] .gallery-link::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    height: 10px;
    background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(245, 240, 228, 0.88) 8px 20px, transparent 20px 28px);
    border-radius: 2px;
    pointer-events: none;
}

.gallery-preview[data-strip-style="film"] .gallery-link::before { top: 10px; }
.gallery-preview[data-strip-style="film"] .gallery-link::after { bottom: 26px; }

.gallery-preview[data-strip-style="film"] .gallery-carousel img {
    filter: sepia(0.25) saturate(0.85) contrast(1.05);
}

.gallery-preview[data-strip-style="film"] .gallery-link:is(:hover, :focus-visible) .gallery-carousel img {
    filter: none;
}

.gallery-preview[data-strip-style="film"] .gallery-overlay {
    inset: auto 14px 6px auto;
}

.gallery-preview[data-strip-style="film"] .gallery-overlay > span {
    color: #f2b84b;
    font: 600 0.78rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

@media (max-width: 700px) {
    .gallery-preview[data-strip-style="film"] {
        --strip-height: 200px;
    }
}

/* Fanned: prints in a hand of cards, turned round a point below the strip and overlapping, the middle ones
   highest; hovering a print lifts it out of the hand. A button under the hand. Each print's --o-d / --o-m is
   its place from the middle of the hand on each screen, --d-d / --d-m how far that is. */
.gallery-preview[data-strip-style="fan"] {
    /* Each print shows 40% of itself past the one before, so the hand is W + (n - 1) * 0.4W wide. */
    --fan-w: min(170px, calc(78% / (1 + (var(--n, 4) - 1) * 0.4)));
    --fan-step: min(5deg, calc(24deg / var(--n, 4)));
    --fan-overlap: -0.6;
}

.gallery-preview[data-strip-style="fan"] .gallery-carousel {
    justify-content: center;
    align-items: flex-end;
    gap: 0;
    padding: 4px 0 8px;
    overflow: visible;
}

.gallery-preview[data-strip-style="fan"] .gallery-carousel img {
    --o: var(--o-d, 0);
    --d: var(--d-d, 0);
    flex: 0 0 var(--fan-w);
    height: auto;
    aspect-ratio: 3 / 4;
    margin-left: calc(var(--fan-w) * var(--fan-overlap));
    border: 5px solid #fff;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    transform-origin: 50% 100%;
    transform: translateY(calc(var(--d) * var(--d) * 2px)) rotate(calc(var(--o) * var(--fan-step)));
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1.2);
}

.gallery-preview[data-strip-style="fan"] .gallery-carousel img:first-child {
    margin-left: 0;
}

@media (hover: hover) {
    .gallery-preview[data-strip-style="fan"] .gallery-link:is(:hover, :focus-visible) .gallery-carousel img {
        transform: translateY(calc(var(--d) * var(--d) * 2.5px)) rotate(calc(var(--o) * var(--fan-step) * 1.3));
    }
    .gallery-preview[data-strip-style="fan"] .gallery-carousel img:hover {
        position: relative;
        z-index: 1;
        transform: translateY(-18px) rotate(calc(var(--o) * var(--fan-step) * 0.5)) scale(1.05) !important;
    }
}

/* Phones overlap the prints more (a quarter of each shows past the one before), so they stay a good size. */
@media (max-width: 700px) {
    .gallery-preview[data-strip-style="fan"] {
        --fan-w: min(150px, calc(72% / (1 + (var(--n, 4) - 1) * 0.25)));
        --fan-overlap: -0.75;
    }
    .gallery-preview[data-strip-style="fan"] .gallery-carousel img {
        --o: var(--o-m, 0);
        --d: var(--d-m, 0);
        border-width: 4px;
    }
}

.gallery-preview[data-strip-style="fan"] .gallery-overlay {
    position: static;
    padding-top: 20px;
}

.gallery-preview[data-strip-style="fan"] .gallery-overlay > span {
    padding: 12px 26px;
    border-radius: var(--border-radius-pill, 999px);
    background: var(--color-cta);
    color: var(--color-cta-text);
    font-weight: 600;
}

/* Mosaic: the newest photo large, the rest in a grid round it, ending on a tile in the accent colour that says
   where the link goes and spans the cells left in its row (--tile-d / --tile-m), so the grid ends square. */
.gallery-preview[data-strip-style="mosaic"] .gallery-carousel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 140px;
    grid-auto-flow: dense;
    gap: 8px;
}

.gallery-preview[data-strip-style="mosaic"] .gallery-carousel > * {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-image, 8px);
}

.gallery-preview[data-strip-style="mosaic"] .gallery-carousel img:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-preview[data-strip-style="mosaic"] .strip-tile {
    grid-column: span var(--tile-d, 1);
}

@media (hover: hover) {
    .gallery-preview[data-strip-style="mosaic"] .gallery-link:is(:hover, :focus-visible) .gallery-carousel img {
        opacity: 0.85;
    }
    .gallery-preview[data-strip-style="mosaic"] .gallery-link .gallery-carousel img:hover {
        opacity: 1;
    }
}

.strip-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 12px;
    box-sizing: border-box;
    background: var(--color-cta);
    color: var(--color-cta-text);
    font-weight: 600;
    text-align: center;
}

/* Phones: two columns, the newest photo across both. */
@media (max-width: 700px) {
    .gallery-preview[data-strip-style="mosaic"] .gallery-carousel {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 120px;
    }
    .gallery-preview[data-strip-style="mosaic"] .strip-tile {
        grid-column: span var(--tile-m, 1);
    }
}

/* Edge to edge, the mosaic runs to the screen's edges as square tiles with hairline gaps. */
.gallery-block[data-strip-width="full"] [data-strip-style="mosaic"] .gallery-carousel {
    gap: 4px;
}

.gallery-block[data-strip-width="full"] [data-strip-style="mosaic"] .gallery-carousel > * {
    border-radius: 0;
}

/* Drift: a ribbon of photos drifting slowly sideways and round again (the photos run twice), easing to a stop
   under the pointer (assets/js/preview-strip.js), with the words on a pill in the page's colours. Still for
   reduced motion. */
.gallery-preview[data-strip-style="drift"] {
    --strip-height: 250px;
    --drift-w: 190px;
}

.gallery-preview[data-strip-style="drift"] .gallery-link {
    overflow: hidden;
}

.gallery-preview[data-strip-style="drift"] .gallery-carousel {
    width: max-content;
    overflow: visible;
    animation: strip-drift calc(var(--n, 4) * 10s) linear infinite;
}

.gallery-preview[data-strip-style="drift"] .gallery-carousel img {
    flex: 0 0 var(--drift-w);
    border-radius: var(--border-radius-image, 8px);
}

.gallery-preview[data-strip-style="drift"] .gallery-overlay > span {
    padding: 12px 24px;
    border-radius: var(--border-radius-pill, 999px);
    background: var(--color-background);
    color: var(--color-text, #1a1a1a);
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

@media (max-width: 700px) {
    .gallery-preview[data-strip-style="drift"] {
        --strip-height: 210px;
        --drift-w: 160px;
    }
}

/* Half the track is one run of the photos plus its gap, so it loops without a jump. */
@keyframes strip-drift {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - var(--strip-gap) / 2)); }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-preview[data-strip-style="drift"] .gallery-carousel {
        animation: none;
    }
    .gallery-preview[data-strip-style="drift"] .gallery-carousel [aria-hidden="true"] {
        display: none;
    }
    .gallery-preview .gallery-carousel img,
    .strip-arrow {
        transition: none;
    }
}

.typewriter-active::after {
    content: "|";
    margin-left: 2px;
    animation: typewriter-blink 0.6s step-end infinite;
    color: inherit;
}

.typewriter-placeholder {
    color: rgba(0,0,0,0.0);
}

@keyframes typewriter-blink {
    50% { opacity: 0; }
}