/*
 * Published `site` project pages (AI Website Builder).
 * Standalone, mobile-first, opinionated. Theme tokens (--site-*) are injected
 * server-side by siteRenderer.js.
 *
 * Design philosophy ("Apple model"): the system guarantees rhythm, hierarchy
 * and polish. Content is presented in a clean editorial column with generous,
 * consistent spacing — NOT a wall of identical boxes. Cards are used sparingly
 * (links, galleries, media, chat), while hero and prose breathe openly. Every
 * image is aspect-locked and object-fit covered, headings clamp to a tasteful
 * scale, and link buttons are uniform — so bad input still renders beautifully.
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html, body { margin: 0; padding: 0; min-height: 100%; }

/* House rule: never the default OS scrollbar. macOS overlay look: a 6px rounded thumb
   tinted from the page's text colour, transparent track, no arrows, and hidden until the
   page scrolls (siteHost.js adds html.site-scrolling while scrolling, then fades it out).
   Chrome and Safari use the -webkit rules: the standard props would win there and force
   the wider always-on "thin" bar, so they are applied to Firefox only. */
@supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: transparent transparent; }
    html.site-scrolling, html.site-scrolling * {
        scrollbar-color: color-mix(in srgb, var(--site-text, #14161c) 40%, transparent) transparent;
    }
}
*::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 6px; }
html.site-scrolling ::-webkit-scrollbar-thumb, html.site-scrolling::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--site-text, #14161c) 40%, transparent);
}
*::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--site-text, #14161c) 60%, transparent); }

body {
    background: var(--site-bg, #fff);
    color: var(--site-text, #14161c);
    font-family: var(--site-body-font, 'Inter', system-ui, sans-serif);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--site-heading-font, 'Poppins', system-ui, sans-serif);
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 0.4em 0;
    font-weight: 700;
    overflow-wrap: break-word;
}

p { margin: 0 0 1em 0; overflow-wrap: break-word; }

a { color: var(--site-brand, #4D61FE); text-underline-offset: 2px; }

img, video, iframe { max-width: 100%; }

/* ── background media + legibility scrim ─────────────────────────── */
.site-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    z-index: -2;
}

.site-bg-overlay { position: fixed; inset: 0; z-index: -1; }

/* ── shell ───────────────────────────────────────────────────────── */
.site-header {
    text-align: center;
    font-family: var(--site-heading-font, 'Poppins', system-ui, sans-serif);
    font-size: clamp(1.15rem, 3.5vw, 1.45rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: clamp(1.5rem, 5vw, 2.75rem) 1.25rem 0 1.25rem;
}

.site-header:empty { padding: 0; }

/* ── header navigation menu (mobile-friendly anchor nav) ─────────── */
.site-header-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    text-align: left;
    padding: 0;
    background: color-mix(in srgb, var(--site-surface, #fff) 86%, transparent);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--site-border);
}

.site-header-nav .site-header-inner {
    position: relative;
    max-width: calc(var(--site-content, 1024px) + 2.5rem);
    margin: 0 auto;
    padding: 0.6rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--site-text);
    font-weight: 700;
    margin-right: auto;
    min-width: 0;
}

.site-brand-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
}

/* the menu logo is CSS-constrained so it can never be oversized in height */
.site-menu-logo {
    height: clamp(28px, 7vw, 42px);
    width: auto;
    max-width: 60vw;
    object-fit: contain;
    display: block;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.site-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    text-decoration: none;
    color: var(--site-muted);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.45em 0.75em;
    border-radius: 999px;
    transition: color 0.15s ease, background 0.15s ease;
}

.site-nav-link:hover,
.site-nav-link.is-active {
    color: var(--site-text);
    background: color-mix(in srgb, var(--site-brand) 12%, transparent);
}

.site-nav-link > i { font-size: 1.05em; color: var(--site-brand-ink, var(--site-brand)); }

.site-nav-toggle {
    display: none;
    width: 2.6em;
    height: 2.6em;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--site-border);
    border-radius: 12px;
    background: var(--site-surface, #fff);
    color: var(--site-text);
    font-size: 1.2rem;
    cursor: pointer;
}

/* anchored blocks clear the sticky header when scrolled to */
.site-header-nav ~ .site-main [id^="sec-"] { scroll-margin-top: 4.75rem; }

@media (max-width: 640px) {
    .site-nav-toggle { display: inline-flex; }
    .site-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--site-surface, #fff);
        border-bottom: 1px solid var(--site-border);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
        padding: 0.4rem;
        display: none;
    }
    .site-header-nav.site-nav-open .site-nav { display: flex; }
    .site-header-nav.site-nav-open .site-nav-toggle {
        background: color-mix(in srgb, var(--site-brand) 14%, transparent);
        border-color: var(--site-brand);
    }
    .site-nav-link { font-size: 1rem; padding: 0.75em 0.9em; border-radius: 10px; }
}

.site-main {
    width: 100%;
    max-width: calc(var(--site-content, 1024px) + 2.5rem);
    margin: 0 auto;
    padding: clamp(1.75rem, 5vw, 3rem) 1.25rem clamp(2rem, 6vw, 3.5rem);
    display: flex;
    flex-direction: column;
    gap: var(--site-gap, 3rem);
}

/* ── motion system (scroll-triggered reveals) ────────────────────── */
/* Fail-open: hidden states only exist under .site-anim, which siteHost.js
   adds at runtime — without JS every block is fully visible. One signature
   curve everywhere; users don't pick animations, the system guarantees them. */
@media (prefers-reduced-motion: no-preference) {

    /* focus-pull reveal: blur → sharp + rise, not a lazy-load fade */
    .site-anim .sr-block {
        opacity: 0;
        transform: translateY(26px);
        filter: blur(10px);
        transition:
            opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--srb-delay, 0s);
    }

    .sr-setup .sr-block, .sr-setup .sr-child { transition: none !important; }

    .site-anim .sr-block.sr-in {
        opacity: 1;
        transform: none;
        filter: none;
    }

    /* child choreography: pieces arrive as a sequence inside their block */
    .site-anim .sr-child {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(6px);
        transition:
            opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.65s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: calc(var(--srb-delay, 0s) + var(--sr-delay, 0s) + 0.1s);
    }

    .site-anim .sr-in .sr-child {
        opacity: 1;
        transform: none;
        filter: none;
    }

    /* imagery settles from a gentle zoom (Ken Burns landing) */
    .site-anim .site-gallery-cell.sr-child { transform: translateY(12px) scale(1.04); }
    .site-anim .sr-in .site-gallery-cell.sr-child { transform: none; }

    .site-anim .site-hero-media.sr-child {
        transform: translateY(10px) scale(1.06);
        transition-duration: 1.1s;
    }
    .site-anim .sr-in .site-hero-media.sr-child { transform: none; }

    /* the hero block itself stays subtle — its children carry the show */
    .site-anim .site-hero.sr-block { transform: translateY(18px); }
    .site-anim .site-hero.sr-block.sr-in { transform: none; }
}

/* base block: NO default card — most blocks are open and editorial */
.site-block { width: 100%; }

/* a soft surface treatment, applied only where it belongs */
.site-surface {
    background: var(--site-surface);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-surface-lg, 22px);
}

/* ── hero ────────────────────────────────────────────────────────── */
.site-hero { text-align: center; }

.site-hero-media {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: var(--site-radius-surface-lg, 22px);
    box-shadow: var(--site-shadow);
    margin-bottom: clamp(1.25rem, 4vw, 2rem);
}

/* Fit to image size: whole image at its own proportions, never upscaled past
   its natural width, centered. No forced banner ratio. */
.site-hero-media-natural {
    width: auto;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: initial;
    margin-inline: auto;
}

/* Stretch to fill: keep the wide banner box but distort to fill it. */
.site-hero-media-fill {
    object-fit: fill;
}

.site-hero-text { padding: 0; }

.site-hero h1,
.site-hero .site-hero-title {
    font-size: clamp(2rem, 7vw, 3.25rem);
    margin-bottom: 0.35em;
}

.site-hero-sub {
    color: var(--site-muted);
    font-size: clamp(1.05rem, 3vw, 1.3rem);
    line-height: 1.5;
    max-width: 36ch;
    margin: 0 auto 1.4em auto;
}

/* ── buttons ─────────────────────────────────────────────────────── */
.site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    padding: 0.85em 1.9em;
    border-radius: var(--site-radius, 18px);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.02rem;
    min-height: 52px;
    line-height: 1.2;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    cursor: pointer;
}

.site-btn:hover { transform: translateY(-2px); }
.site-btn:active { transform: translateY(0); }

.site-btn-primary {
    background: var(--site-brand, #4D61FE);
    color: var(--site-on-brand, #fff);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--site-brand) 32%, transparent);
}

.site-btn-primary:hover {
    box-shadow: 0 14px 32px color-mix(in srgb, var(--site-brand) 42%, transparent);
}

/* ── link buttons (group: stacked column or inline row) ──────────── */
.site-link-buttons { display: flex; gap: clamp(0.6rem, 2vw, 0.9rem); }

.site-link-buttons.site-lb-column { flex-direction: column; }

.site-link-buttons.site-lb-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.site-lb-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1em;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.2;
    padding: 1em 1.5em;
    min-height: 56px;
    border-radius: var(--site-radius, 18px);
    border: 1px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

.site-lb-btn:hover { transform: translateY(-2px); }
.site-lb-btn:active { transform: translateY(0) scale(0.985); }

/* stacked = full width; row = auto width with icon inline */
.site-lb-column .site-lb-btn { width: 100%; }
.site-lb-row .site-lb-btn { flex: 0 1 auto; flex-direction: row; gap: 0.5em; }

.site-lb-btn > i { font-size: 1.2em; }

.site-lb-label { font-size: 1.05rem; }
.site-lb-sub { font-weight: 400; font-size: 0.85rem; }

/* soft (surface) variant. --site-button-* exist only when the owner picked button
   colours (theme.buttonColor / buttonTextColor); otherwise the surface tokens apply. */
.site-lb-soft {
    background: var(--site-button-bg, var(--site-surface-strong, #fff));
    border-color: var(--site-border);
    box-shadow: var(--site-shadow);
    color: var(--site-button-text, var(--site-text));
}
.site-lb-soft:hover {
    border-color: color-mix(in srgb, var(--site-brand) 55%, var(--site-border));
    box-shadow: 0 18px 38px rgba(0,0,0,0.12);
}
.site-lb-soft > i { color: var(--site-button-icon, var(--site-brand)); }
.site-lb-soft .site-lb-sub { color: var(--site-button-sub, var(--site-muted)); }

/* solid (brand) variant — for the one CTA you want to pop */
.site-lb-solid {
    background: var(--site-brand, #4D61FE);
    color: var(--site-on-brand, #fff);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--site-brand) 32%, transparent);
}
.site-lb-solid:hover {
    box-shadow: 0 14px 32px color-mix(in srgb, var(--site-brand) 42%, transparent);
    filter: brightness(1.04);
}
.site-lb-solid .site-lb-sub { color: rgba(255,255,255,0.85); }

/* stacked with a trailing chevron: label left, arrow right (link-in-bio style) */
.site-lb-trailing .site-lb-btn {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 0.85em;
}

.site-lb-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1em;
}

.site-lb-btn > .site-lb-trail {
    flex: 0 0 auto;
    font-size: 0.95em;
    color: inherit;
    opacity: 0.7;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.site-lb-btn:hover > .site-lb-trail { transform: translateX(3px); opacity: 1; }

/* featured: the one loud call to action in a group */
.site-lb-featured { min-height: 60px; font-weight: 700; }
.site-lb-featured .site-lb-label { font-size: 1.08rem; }
.site-cta-upper .site-lb-featured .site-lb-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--site-heading-font, 'Poppins', system-ui, sans-serif);
}

/* keyboard focus on every tappable surface of a bio page */
.site-lb-btn:focus-visible,
.site-pill:focus-visible,
.site-social:focus-visible,
.site-location-card:focus-visible {
    outline: 2px solid var(--site-text);
    outline-offset: 3px;
}

/* ── rich text: styled like an article, not a blob ───────────────── */
.site-rich-text {
    max-width: var(--site-content, 1024px);
    margin: 0 auto;
}

.site-rich-text > :first-child { margin-top: 0; }
.site-rich-text > :last-child { margin-bottom: 0; }
.site-rich-text h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); margin: 1.2em 0 0.4em; }
.site-rich-text h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); margin: 1.2em 0 0.4em; }
.site-rich-text h3 { font-size: 1.25rem; margin: 1.1em 0 0.35em; }
.site-rich-text ul, .site-rich-text ol { padding-left: 1.3em; margin: 0 0 1em; }
.site-rich-text li { margin-bottom: 0.35em; }
.site-rich-text blockquote {
    margin: 1.2em 0;
    padding: 0.4em 0 0.4em 1.1em;
    border-left: 3px solid var(--site-brand);
    color: var(--site-muted);
    font-style: italic;
}
.site-rich-text img {
    height: auto;
    border-radius: var(--site-radius-surface, 16px);
    box-shadow: var(--site-shadow);
    margin: 0.5em 0;
}
.site-rich-text hr { border: none; border-top: 1px solid var(--site-border); margin: 1.6em 0; }
.site-rich-text a {
    color: var(--site-brand-ink, var(--site-brand));
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.25s ease;
}
.site-rich-text a:hover { background-size: 100% 1.5px; }

/* ── gallery ─────────────────────────────────────────────────────── */
.site-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: clamp(0.6rem, 2vw, 1rem);
}

.site-gallery-cell { margin: 0; }

.site-gallery-cell img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--site-radius-surface, 16px);
    display: block;
    box-shadow: var(--site-shadow);
    transition: transform 0.25s ease;
    cursor: zoom-in;
}

.site-gallery-cell img:hover { transform: scale(1.02); }

.site-caption {
    color: var(--site-muted);
    font-size: 0.85em;
    margin-top: 0.4em;
    text-align: center;
}

/* ── gallery: carousel variant ───────────────────────────────────── */
/* Fail-open: a horizontal scroll-snap strip even before siteHost.js runs,
   so every image is reachable without JS. */
.site-carousel {
    display: block;
    position: relative;
}

/* the viewport is the flex scroller; the track collapses with
   display:contents so the cells are the viewport's own flex children —
   the canonical single-element scroll-snap carousel (a width-constrained
   inner track never grows to scroll). Native scroll keeps touch-swipe. */
.site-carousel-viewport {
    display: flex;
    gap: clamp(0.6rem, 2vw, 1rem);
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--site-radius-surface, 16px);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.site-carousel-viewport::-webkit-scrollbar { display: none; }

.site-carousel-track { display: contents; }

.site-carousel .site-gallery-cell {
    flex: 0 0 100%;
    scroll-snap-align: start;
    min-width: 0;
}

.site-carousel .site-gallery-cell img {
    aspect-ratio: 16 / 10;
    cursor: default;
}

.site-carousel .site-gallery-cell img:hover { transform: none; }

.site-carousel-nav {
    position: absolute;
    top: calc(50% - 1.4em);
    transform: translateY(-50%);
    width: 2.8em;
    height: 2.8em;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #14161c;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease;
    z-index: 2;
}

.site-carousel-nav:hover { transform: translateY(-50%) scale(1.08); }
.site-carousel-prev { left: 0.6em; }
.site-carousel-next { right: 0.6em; }

/* only meaningful once JS can move slides — hidden in the fail-open state */
.site-carousel:not(.is-ready) .site-carousel-nav { display: none; }
.site-carousel-nav[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }

.site-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.45em;
    margin-top: 0.8em;
}

.site-carousel:not(.is-ready) .site-carousel-dots { display: none; }

.site-carousel-dot {
    width: 0.5em;
    height: 0.5em;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--site-muted);
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.site-carousel-dot.is-active {
    opacity: 1;
    background: var(--site-brand, #4D61FE);
    transform: scale(1.25);
}

/* ── video ───────────────────────────────────────────────────────── */
.site-video { margin: 0; }

.site-video-frame, .site-video-file {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: var(--site-radius-surface-lg, 22px);
    display: block;
    background: #000;
    box-shadow: var(--site-shadow);
}

.site-video .site-caption { margin-top: 0.6em; }

/* ── faq ─────────────────────────────────────────────────────────── */
.site-faq {
    max-width: var(--site-content, 1024px);
    margin: 0 auto;
    width: 100%;
}

.site-faq-title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    text-align: center;
    margin-bottom: 0.8em;
}

.site-faq-item {
    border-bottom: 1px solid var(--site-border);
    padding: 0.3em 0;
}

.site-faq-item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    min-height: 56px;
    padding: 0.2em 0;
}

.site-faq-item summary::-webkit-details-marker { display: none; }

.site-faq-item summary::after {
    content: '+';
    font-size: 1.5em;
    font-weight: 300;
    color: var(--site-brand);
    transition: transform 0.25s ease;
    flex: 0 0 auto;
}

.site-faq-item[open] summary::after { transform: rotate(45deg); }

.site-faq-answer { color: var(--site-muted); padding: 0 0 0.9em 0; }

/* JS-driven expand/collapse — inline height/opacity set by siteHost.js */
.site-faq-answer.site-faq-animating {
    overflow: hidden;
    transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.26s ease,
                padding-bottom 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── embed ───────────────────────────────────────────────────────── */
.site-embed iframe {
    width: 100%;
    border: none;
    display: block;
    border-radius: var(--site-radius-surface-lg, 22px);
    box-shadow: var(--site-shadow);
    background: var(--site-surface);
}

/* ── contact form ────────────────────────────────────────────────── */
.site-contact {
    max-width: var(--site-content, 1024px);
    margin: 0 auto;
    width: 100%;
}

.site-contact-title {
    font-size: clamp(1.5rem, 4vw, 2rem);
    text-align: center;
    margin-bottom: 0.3em;
}

.site-contact-desc {
    text-align: center;
    color: var(--site-muted);
    margin-bottom: 1.4em;
}

.site-contact-form {
    display: flex;
    flex-direction: column;
    gap: 0.85em;
    background: var(--site-surface-strong, #fff);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-surface-lg, 22px);
    box-shadow: var(--site-shadow);
    padding: clamp(1.1rem, 4vw, 1.8rem);
}

.site-contact-field {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--site-text);
}

.site-contact-field input,
.site-contact-field textarea {
    font: inherit;
    font-weight: 400;
    color: var(--site-text);
    background: var(--site-surface, #fff);
    border: 1px solid var(--site-border);
    border-radius: var(--site-radius-surface, 14px);
    padding: 0.7em 0.85em;
    width: 100%;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.site-contact-field textarea { resize: vertical; min-height: 6em; }

.site-contact-field input:focus,
.site-contact-field textarea:focus {
    outline: none;
    border-color: var(--site-brand, #4D61FE);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-brand) 22%, transparent);
}

/* honeypot — visually gone, still in the DOM for bots to trip over */
.site-contact-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.site-contact-submit { margin-top: 0.3em; width: 100%; }
.site-contact-submit.is-loading { opacity: 0.7; cursor: progress; }

.site-contact-status {
    margin: 0;
    font-size: 0.9rem;
    text-align: center;
    color: var(--site-muted);
}
.site-contact-status.is-error { color: #e0567a; }

.site-contact-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4em;
    padding: 1.4em 1em;
    color: var(--site-text);
}

/* author display rules override the UA [hidden] rule — restore it explicitly */
.site-contact-success[hidden],
.site-contact-status[hidden] { display: none; }

.site-contact-success i {
    font-size: 2.6rem;
    color: var(--site-brand, #4D61FE);
}

.site-contact-success p { margin: 0; font-size: 1.05rem; }

/* legibility over a background image/gradient */
.site-has-bg.site-text-light .site-contact-title { text-shadow: 0 1px 16px rgba(0,0,0,0.35); }

/* ── chatbot ─────────────────────────────────────────────────────── */
.site-chatbot {
    border-radius: var(--site-radius-surface-lg, 22px);
    overflow: hidden;
    box-shadow: var(--site-shadow);
    border: 1px solid var(--site-border);
    background: var(--site-surface-strong);
}

.site-chatbot #siteChatContainer {
    height: clamp(440px, 64vh, 680px);
    width: 100%;
}

/* ── link in bio: profile ────────────────────────────────────────── */
/* The profile is a container, so the giant display type and photo sizes scale with
   the COLUMN (480px on a bio page), not the viewport. */
.site-profile {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.site-profile-portrait {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* giant type size: a character-count estimate, refined to the pixel by siteHost.js */
    --giant-size: clamp(2.6rem, calc(160cqi / var(--giant-chars, 8)), 7.5rem);
}

.site-profile-photo {
    display: block;
    object-fit: cover;
    background: var(--site-surface);
    position: relative;
}

.site-profile-photo-circle { border-radius: 50%; }
.site-profile-photo-rounded { border-radius: var(--site-radius-surface-lg, 22px); }
.site-profile-photo-square { border-radius: 4px; }

.site-profile-text { position: relative; width: 100%; }

.site-profile-name {
    font-size: clamp(1.65rem, 7.5cqi, 2.15rem);
    line-height: 1.1;
    margin: 0 0 0.2em;
}

.site-profile-verified {
    font-size: 0.55em;
    color: var(--site-brand-ink, var(--site-brand));
    vertical-align: 0.4em;
    margin-left: 0.1em;
}

.site-profile-role {
    color: var(--site-muted);
    font-size: 1rem;
    line-height: 1.45;
    margin: 0;
}

.site-profile-bio {
    font-size: 0.98rem;
    line-height: 1.5;
    max-width: 34ch;
    margin: 0.55em auto 0;
}

.site-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* classic: round photo, name below (marquee keeps the same photo under its band) */
.site-profile-classic .site-profile-photo,
.site-profile-marquee .site-profile-photo {
    width: clamp(104px, 30cqi, 132px);
    aspect-ratio: 1;
    box-shadow: var(--site-shadow);
    margin-bottom: 1rem;
}

/* cover: decorative banner across the top, the photo overlapping its bottom edge */
.site-profile-banner {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--site-radius-surface-lg, 22px);
    overflow: hidden;
    background: var(--site-surface);
}

.site-profile-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

.site-profile-banner + .site-profile-portrait .site-profile-photo {
    width: clamp(112px, 34cqi, 140px);
    aspect-ratio: 1;
    margin-top: calc(clamp(112px, 34cqi, 140px) * -0.5);
    margin-bottom: 1rem;
    box-shadow: 0 0 0 5px var(--site-canvas, var(--site-bg)), var(--site-shadow);
}

/* cover layout without a banner image: behaves like classic */
.site-profile-cover:not(.site-profile-has-cover) .site-profile-photo {
    width: clamp(104px, 30cqi, 132px);
    aspect-ratio: 1;
    box-shadow: var(--site-shadow);
    margin-bottom: 1rem;
}

/* spotlight (fade): a tall photo dissolving into the page, the name set over the fade */
.site-profile-fade .site-profile-photo {
    width: 100%;
    aspect-ratio: 1 / 1.08;
    border-radius: var(--site-radius-surface-lg, 22px);
    object-position: center 22%;
    background: transparent;
    -webkit-mask-image: linear-gradient(to bottom, #000 44%, transparent 84%);
    mask-image: linear-gradient(to bottom, #000 44%, transparent 84%);
}

.site-profile-fade:not(.site-profile-no-photo) .site-profile-text { margin-top: -3.2rem; }

.site-profile-fade .site-profile-name {
    font-size: clamp(2.2rem, 11cqi, 3.1rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
}

/* poster and wordmark: giant display type */
.site-profile-giant {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    font-family: var(--site-heading-font, 'Poppins', system-ui, sans-serif);
    font-size: var(--giant-size);
    font-weight: 700;
    line-height: 0.88;
    letter-spacing: -0.03em;
    white-space: nowrap;
    color: var(--site-text);
    pointer-events: none;
    user-select: none;
}

.site-profile-giant > span { display: block; }

/* poster: the name's last line overlaps the top of a portrait photo */
.site-profile-poster .site-profile-photo {
    z-index: 1;
    width: min(76%, 320px);
    aspect-ratio: 4 / 5;
    margin-top: calc(var(--giant-size) * -0.36);
    margin-bottom: 1rem;
    box-shadow: var(--site-shadow);
}

.site-profile-poster.site-profile-no-photo .site-profile-giant { margin-bottom: 0.5rem; }
/* a 4:5 portrait is never an ellipse: the circle shape belongs to square photos */
.site-profile-poster .site-profile-photo-circle { border-radius: var(--site-radius-surface-lg, 22px); }
/* wordmark: the photo tucks under the baseline instead of hiding the name */
.site-layout-bio .site-profile-wordmark .site-profile-photo { margin-top: calc(var(--giant-size) * 0.7); }

/* before the script runs, a bio page's own entrance has nothing to hold back, so the profile
   and the blocks under it would paint and then vanish for their reveal. Hold them for the
   script (it takes over with .site-pi / .sr-block), and fail open if it never comes. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .site-layout-bio .site-main > :not(.sr-block):not(.site-pi) {
        opacity: 0;
        animation: site-pi-failsafe 0.01s linear 1.8s forwards;
    }
    @keyframes site-pi-failsafe { to { opacity: 1; } }
}

/* wordmark: a giant first name behind a round photo that overlaps it */
.site-profile-wordmark .site-profile-portrait {
    display: grid;
    justify-items: center;
    --giant-size: clamp(3.2rem, calc(172cqi / var(--giant-chars, 5)), 9rem);
}

.site-profile-wordmark .site-profile-portrait > * { grid-area: 1 / 1; }

.site-profile-wordmark .site-profile-giant { align-self: start; line-height: 0.8; }

.site-profile-wordmark .site-profile-photo {
    z-index: 3;
    width: clamp(148px, 46cqi, 196px);
    aspect-ratio: 1;
    margin-top: calc(var(--giant-size) * 0.46);
    margin-bottom: 1rem;
    box-shadow: 0 0 0 5px var(--site-canvas, var(--site-bg)), var(--site-shadow);
}

.site-profile-wordmark.site-profile-no-photo .site-profile-giant { margin-bottom: 0.6rem; }

/* typography: the name IS the design. A small tracked role line on top, the name set huge
   and left-aligned one word per line, and a small round photo signing the last line. */
.site-profile-typo { align-items: flex-start; text-align: left; }
.site-profile-typo .site-profile-text { order: -1; width: 100%; margin-bottom: 0.9rem; }
.site-profile-typo .site-profile-role {
    font-family: var(--site-body-font);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--site-text);
}
.site-profile-typo .site-profile-portrait {
    align-items: flex-start;
    --giant-size: clamp(3rem, calc(152cqi / var(--giant-chars, 8)), 8.5rem);
}
.site-profile-typo .site-profile-giant { align-items: flex-start; line-height: 0.9; letter-spacing: -0.045em; text-align: left; }
.site-profile-typo .site-profile-photo {
    display: inline-block;
    width: 0.74em;
    aspect-ratio: 1;
    margin-left: 0.14em;
    vertical-align: -0.04em;
    border-radius: 50%;
    box-shadow: var(--site-shadow);
}
.site-profile-typo .site-profile-bio { margin-left: 0; }
.site-profile-typo .site-profile-actions { justify-content: flex-start; }

/* marquee: the name runs across a tilted brand band (kinetic type), the photo and name
   below it as in classic. The band is decoration; the heading below carries the name. */
.site-profile-marquee-band {
    width: calc(100% + 4rem);
    margin: 0.25rem -2rem 1.75rem;
    padding: 0.85rem 0;
    overflow: hidden;
    background: var(--site-brand);
    color: var(--site-on-brand, #fff);
    transform: rotate(-3deg);
    pointer-events: none;
    user-select: none;
}
.site-mq-track { display: flex; width: max-content; }
.site-mq-run {
    display: flex;
    align-items: center;
    gap: 0.45em;
    padding-right: 0.45em;
    font-family: var(--site-heading-font, 'Poppins', system-ui, sans-serif);
    font-size: clamp(2rem, 12cqi, 3.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.site-mq-run i { font-style: normal; font-size: 0.5em; }

/* sideways: the name runs up the left edge like a magazine spine, a tall photo beside it,
   the role under the photo; pills and socials span the full width below */
.site-profile-side {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.9rem;
    align-items: start;
    text-align: left;
}
.site-profile-side .site-profile-spine {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--site-heading-font, 'Poppins', system-ui, sans-serif);
    font-size: clamp(1.8rem, calc(118cqi / var(--spine-chars, 12)), 4.2rem);
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.03em;
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--site-text);
    pointer-events: none;
    user-select: none;
}
.site-profile-side .site-profile-portrait { grid-column: 2; grid-row: 1; width: 100%; }
.site-profile-side .site-profile-photo { width: 100%; aspect-ratio: 4 / 5; margin: 0; box-shadow: var(--site-shadow); }
.site-profile-side .site-profile-text { grid-column: 2; grid-row: 2; margin-top: 0.8rem; text-align: left; }
.site-profile-side.site-profile-no-photo .site-profile-text { grid-row: 1; align-self: end; }
.site-profile-side .site-profile-role {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--site-text);
}
.site-profile-side .site-profile-actions,
.site-profile-side .site-socials { grid-column: 1 / -1; justify-content: flex-start; }

/* sticker: the photo as a tilted white-bordered print, the name on a label strip across
   its corner and a small round badge; the links below sit a touch askew. Tilts use the
   rotate property so entrance and hover transforms never fight them. */
.site-profile-sticker .site-profile-portrait {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0.6rem 0 1.9rem;
}
.site-sticker-print {
    display: block;
    width: min(62%, 240px);
    padding: 10px 10px 36px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.1);
    rotate: -4deg;
}
.site-sticker-print .site-profile-photo { display: block; width: 100%; aspect-ratio: 1; margin: 0; border-radius: 0; box-shadow: none; }
.site-sticker-label {
    position: absolute;
    left: 50%;
    bottom: 0.5rem;
    translate: -60% 0;
    rotate: 3deg;
    max-width: 92%;
    padding: 0.22em 0.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 6px;
    background: var(--site-brand);
    color: var(--site-on-brand, #fff);
    font-family: var(--site-heading-font, 'Poppins', system-ui, sans-serif);
    font-size: clamp(1.4rem, 8cqi, 2.1rem);
    font-weight: 800;
    line-height: 1.05;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}
.site-profile-sticker.site-profile-no-photo .site-profile-portrait { padding: 0.5rem 0; }
.site-profile-sticker.site-profile-no-photo .site-sticker-label { position: static; translate: none; }
.site-sticker-badge {
    position: absolute;
    top: 0;
    left: calc(50% + min(31%, 120px) - 26px);
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffd84d;
    color: #1a1400;
    font-size: 1.15rem;
    rotate: 12deg;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}
.site-main:has(> .site-profile-sticker) .site-link-buttons > :nth-child(odd) { rotate: -0.7deg; }
.site-main:has(> .site-profile-sticker) .site-link-buttons > :nth-child(even) { rotate: 0.7deg; }

/* bento: photo, name and role are tiles; the first two links sit side by side as tiles */
.site-profile-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.5fr 1fr;
    align-items: stretch;
    gap: 8px;
    text-align: left;
}
.site-profile-bento .site-profile-portrait { grid-column: 1; grid-row: 1 / span 2; width: 100%; aspect-ratio: 4 / 5; }
.site-profile-bento .site-profile-photo { width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: min(var(--site-radius-surface-lg, 22px), 22px); box-shadow: none; }
.site-profile-bento .site-profile-text { display: contents; }
.site-profile-bento .site-profile-name {
    grid-column: 2;
    grid-row: 1;
    display: block;   /* the entrance splits the name into word spans: flex would eat the spaces */
    margin: 0;
    padding: 0.8rem;
    border-radius: min(var(--site-radius-surface-lg, 22px), 22px);
    background: var(--site-brand);
    color: var(--site-on-brand, #fff);
    font-size: clamp(1.25rem, 7cqi, 2.1rem);
    line-height: 1;
    overflow-wrap: anywhere;
}
.site-profile-bento .site-profile-name::after { display: none; }
.site-profile-bento .site-profile-role {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: flex-end;
    margin: 0;
    padding: 0.8rem;
    border-radius: min(var(--site-radius-surface-lg, 22px), 22px);
    background: var(--site-button-bg, var(--site-surface));
    color: var(--site-button-text, var(--site-text));
    font-size: 0.9rem;
}
.site-profile-bento .site-profile-name:last-child { grid-row: 1 / span 2; }
.site-profile-bento.site-profile-no-photo { grid-template-columns: 1fr; grid-template-rows: auto; }
.site-profile-bento.site-profile-no-photo .site-profile-name,
.site-profile-bento.site-profile-no-photo .site-profile-role { grid-column: 1; grid-row: auto; min-height: 6rem; }
.site-profile-bento .site-profile-actions,
.site-profile-bento .site-socials { grid-column: 1 / -1; justify-content: flex-start; }
.site-main:has(> .site-profile-bento) .site-link-buttons.site-lb-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.site-main:has(> .site-profile-bento) .site-link-buttons.site-lb-column > :nth-child(-n+2) { min-height: 5.25rem; align-items: flex-end; }
.site-main:has(> .site-profile-bento) .site-link-buttons.site-lb-column > :nth-child(n+3),
.site-main:has(> .site-profile-bento) .site-link-buttons.site-lb-column > :only-child { grid-column: 1 / -1; min-height: 0; align-items: center; }

/* quick-action pills */
.site-profile-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
}

.site-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    min-height: 44px;
    padding: 0.5em 1.05em;
    border: 1.5px solid transparent;
    border-radius: var(--site-radius, 18px);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.18s ease, filter 0.18s ease, background-color 0.18s ease;
}

.site-pill:hover { transform: translateY(-1px); }
.site-pill:active { transform: scale(0.97); }
.site-pill > i { font-size: 1.05em; }

.site-pill-soft {
    background: var(--site-button-bg, color-mix(in srgb, var(--site-brand) 11%, var(--site-surface-strong, #fff)));
    color: var(--site-button-text, var(--site-text));
}

.site-pill-soft > i { color: var(--site-button-icon, var(--site-brand)); }

.site-pill-solid {
    background: var(--site-brand, #4D61FE);
    color: var(--site-on-brand, #fff);
}

.site-pill-solid:hover { filter: brightness(1.06); }

.site-pill-outline {
    background: transparent;
    color: var(--site-text);
    border-color: color-mix(in srgb, var(--site-text) 38%, transparent);
}

.site-pill-outline:hover { border-color: var(--site-text); }

/* social icons */
.site-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.4rem;
    margin-top: 0.9rem;
}

.site-social {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--site-text);
    font-size: 1.3rem;
    text-decoration: none;
    transition: transform 0.18s ease, background-color 0.18s ease;
}

.site-social:hover {
    background: color-mix(in srgb, var(--site-text) 9%, transparent);
    transform: translateY(-2px);
}

.site-socials-block .site-socials { margin-top: 0.4rem; }

/* ── link in bio: location (map tile + address card) ─────────────── */
.site-location {
    overflow: hidden;
    border-radius: var(--site-radius-surface-lg, 22px);
    background: var(--site-button-bg, var(--site-surface-strong, #fff));
    color: var(--site-button-text, var(--site-text));
    border: 1px solid var(--site-border);
    box-shadow: var(--site-shadow);
}

.site-location-map {
    position: relative;
    aspect-ratio: 16 / 8;
    background: var(--site-surface);
}

.site-location-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    pointer-events: none;
}

.site-location-map-dark iframe { filter: invert(0.92) hue-rotate(180deg) saturate(0.75) contrast(0.95); }

.site-location-map-link { position: absolute; inset: 0; z-index: 1; }

.site-location-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.95rem 1.1rem;
    color: inherit;
    text-decoration: none;
    text-align: left;
}

.site-location-pin {
    flex: 0 0 auto;
    font-size: 1.2rem;
    color: var(--site-button-icon, var(--site-brand));
}

.site-location-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 0.92rem;
    line-height: 1.35;
}

.site-location-text strong { font-weight: 600; font-size: 0.98rem; }
.site-location-text strong + span { color: var(--site-button-sub, var(--site-muted)); }

.site-location-go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.8;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

a.site-location-card:hover .site-location-go { opacity: 1; transform: translateX(2px); }

/* ── link in bio: page layout ────────────────────────────────────── */
.site-layout-bio .site-main {
    /* clears the floating share button (1rem + 42px) so it never sits on the name */
    --site-main-pt: 4.25rem;
    padding: var(--site-main-pt) 1.25rem 1.5rem;
}

/* a quieter share button on a bio page */
.site-layout-bio .site-share-btn { width: 42px; height: 42px; font-size: 1.05rem; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .site-layout-bio .site-share-btn { animation: site-pi-fade-up 0.4s var(--pi-expo, cubic-bezier(0.16, 1, 0.3, 1)) 0.7s both; }
}

/* the profile breathes; everything below it sits in one tight stack */
.site-layout-bio .site-profile { margin-bottom: 0.9rem; }
.site-layout-bio .site-link-buttons { gap: 0.7rem; }
.site-layout-bio .site-lb-btn { min-height: 56px; padding: 0.9em 1.25em; }
.site-layout-bio .site-lb-trailing .site-lb-btn { padding: 0.9em 1.1em 0.9em 1.35em; }
.site-layout-bio .site-lb-solid .site-lb-sub { color: color-mix(in srgb, var(--site-on-brand) 82%, transparent); }
.site-layout-bio .site-footer { padding: 1.75rem 1.25rem 2.25rem; }
/* the floating chatbot bubble sits bottom right; leave it room so it never covers the footer */
.site-layout-bio .site-footer { padding-bottom: calc(2.25rem + 76px); }

/* flat buttons on a bio page: colour does the work, not a drop shadow */
.site-layout-bio .site-lb-soft {
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.site-layout-bio .site-lb-soft:hover {
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.site-layout-bio .site-location { border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }

/* a cover or spotlight photo opening the page runs edge to edge */
.site-layout-bio .site-main > .site-profile-has-cover:first-child .site-profile-banner,
.site-layout-bio .site-main > .site-profile-fade:first-child:not(.site-profile-no-photo) .site-profile-photo {
    width: calc(100% + 2.5rem);
    max-width: none;
    margin: calc(-1 * var(--site-main-pt)) -1.25rem 0;
    border-radius: 0;
}
.site-layout-bio .site-main > .site-profile-has-cover:first-child .site-profile-banner { --site-banner-r: 0px; }

/* over a photo or gradient backdrop, open text gets the legibility shadow */
.site-bio-over-media.site-text-light .site-profile-text,
.site-bio-over-media.site-text-light .site-profile-giant {
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}

/* desktop: the page sits as a phone-shaped card on a darker (or lighter) backdrop */
@media (min-width: 720px) {
    body.site-frame-card { background: var(--site-backdrop, var(--site-bg)); }
    .site-frame-card .site-bg { filter: brightness(0.9); }
    .site-frame-card .site-main {
        margin-top: clamp(2rem, 6vh, 3.5rem);
        background: color-mix(in srgb, var(--site-canvas, var(--site-bg)) 92%, transparent);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        border-radius: 30px;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22), 0 0 0 1px var(--site-border);
        overflow: clip;
        padding-bottom: 2rem;
    }
    .site-frame-card .site-footer { padding-top: 1.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
    /* bio pages feel instant: a quick rise, no focus-pull blur */
    .site-layout-bio.site-anim .sr-block,
    .site-layout-bio.site-anim .sr-child { filter: none; transition-duration: 0.55s; }
}

/* ── footer ──────────────────────────────────────────────────────── */
.site-footer { text-align: center; padding: clamp(2rem, 6vw, 3.5rem) 1.25rem 2.5rem; }

.site-footer a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--site-muted);
    font-size: 0.8rem;
    text-decoration: none;
    padding: 0.4em 0.9em;
    border: 1px solid var(--site-border);
    border-radius: 999px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.site-footer a:hover { color: var(--site-text); border-color: var(--site-brand); }

/* ── over-background legibility ──────────────────────────────────── */
/* open text blocks (no surface of their own) get a soft shadow only when
   light text sits over a custom background — guarantees readability. */
.site-has-bg.site-text-light .site-header,
.site-has-bg.site-text-light .site-hero h1,
.site-has-bg.site-text-light .site-hero-sub,
.site-has-bg.site-text-light .site-rich-text,
.site-has-bg.site-text-light .site-faq-title {
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}

/* ── share QR (top-right glass button + sheet) ───────────────────── */
.site-share-btn {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 60;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--site-border);
    background: color-mix(in srgb, var(--site-bg) 55%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--site-text);
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--site-shadow);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.site-share-btn:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--site-brand) 55%, var(--site-border));
}

/* when a header menu exists, the share button lives in the bar (not floating)
   so it never overlaps the nav/hamburger */
.site-header-nav .site-share-btn {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    width: 2.6em;
    height: 2.6em;
    font-size: 1.1rem;
    box-shadow: none;
    flex: 0 0 auto;
}
.site-header-nav .site-share-btn:hover { transform: translateY(-1px); }

.site-share-sheet {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(8, 10, 16, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

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

.site-share-card {
    background: #ffffff;
    color: #14161c;
    border-radius: 22px;
    padding: 1.75rem 1.75rem 1.4rem;
    width: min(92vw, 340px);
    text-align: center;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: no-preference) {
    .site-share-card {
        animation: site-share-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes site-share-pop {
        from { opacity: 0; transform: translateY(14px) scale(0.96); }
        to   { opacity: 1; transform: none; }
    }
}

/* the QR itself always sits dark-on-white so it scans on any theme */
.site-share-qr {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    min-height: 200px;
}

.site-share-qr img, .site-share-qr canvas {
    border-radius: 12px;
}

.site-share-title {
    font-family: var(--site-heading-font, 'Poppins', system-ui, sans-serif);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.15rem;
}

.site-share-url {
    color: #646b78;
    font-size: 0.8rem;
    margin-bottom: 1.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-share-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}

.site-share-actions button {
    border: none;
    border-radius: 999px;
    padding: 0.6em 1.3em;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.site-share-actions button:hover { transform: translateY(-1px); filter: brightness(1.05); }

.site-share-copy {
    background: var(--site-brand, #4D61FE);
    color: #fff;
}

.site-share-done, .site-share-contact {
    background: rgba(20, 22, 28, 0.07);
    color: #14161c;
}
.site-share-contact i { margin-right: 0.25em; }

/* ── lightbox (siteHost.js) ──────────────────────────────────────── */
.site-lightbox { backdrop-filter: blur(4px); }

@media (prefers-reduced-motion: reduce) {
    html, .site-carousel-viewport { scroll-behavior: auto !important; }
    .site-main > *, .site-gallery-cell img, .site-btn, .site-btn-link, .site-lb-btn,
    .site-faq-answer, .site-rich-text a, .site-pill, .site-social, .site-location-go,
    .site-lb-trail {
        animation: none !important;
        transition: none !important;
    }
}

/* ── link in bio: profile motion ─────────────────────────────────────────
   1. ENTRANCE: every look has its own. siteHost.js adds .site-pi (hidden), splits the
      name / giant type into pieces, waits for the photo and fonts, then adds .site-pi-run:not(.site-pi-done)
      (the timeline) and later .site-pi-done (timeline released, ambient may start).
   2. AMBIENT (opt-in, .site-profile-ambient): a slow loop on the photo, giant type and
      link buttons. Quiet on purpose: it should feel alive, never busy.
   3. QR SWAP (opt-in, data-site-qr-swap): the photo turns into the page's QR code.
   Nothing here applies without JS or under reduced motion, except the QR crossfade. */

@property --site-pi-mask {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 44%;
}

@media (prefers-reduced-motion: no-preference) {

    .site-profile {
        --pi-expo: cubic-bezier(0.16, 1, 0.3, 1);
        --pi-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --pi-name-at: 140ms;
        --pi-seq-at: 320ms;
        --pi-base-shadow: var(--site-shadow);
    }
    .site-profile-wordmark,
    .site-profile-has-cover { --pi-base-shadow: 0 0 0 5px var(--site-canvas, var(--site-bg)), var(--site-shadow); }

    /* hold everything until the photo and fonts are in, so the timeline never plays to
       a half-loaded page (siteHost.js caps the wait at 0.7s) */
    .site-pi:not(.site-pi-run) { opacity: 0; }

    /* shared pieces: words of the name rise out of a mask, letters of the giant type
       rise one after another, the rest arrives in sequence */
    .site-pi .site-pi-w,
    .site-pi .site-pi-ch {
        display: inline-block;
        vertical-align: top;
        padding-bottom: 0.06em;
        margin-bottom: -0.06em;
    }
    .site-pi .site-pi-w > span,
    .site-pi .site-pi-ch > span { display: inline-block; }

    .site-pi-run:not(.site-pi-done) .site-pi-w > span {
        animation: site-pi-rise 0.7s var(--pi-expo) both;
        animation-delay: calc(var(--pi-name-at) + var(--i, 0) * 70ms);
    }
    .site-pi-run:not(.site-pi-done) .site-pi-seq {
        animation: site-pi-fade-up 0.6s var(--pi-expo) both;
        animation-delay: calc(var(--pi-seq-at) + var(--s, 0) * 65ms);
    }
    .site-pi-run:not(.site-pi-done) .site-profile-actions .site-pi-seq,
    .site-pi-run:not(.site-pi-done) .site-socials .site-pi-seq { animation-name: site-pi-pop-in; animation-timing-function: var(--pi-expo); }

    /* the check mark lands just after the last word of the name */
    .site-pi-run:not(.site-pi-done) .site-profile-verified {
        display: inline-block;
        animation: site-pi-pop-in 0.6s var(--pi-spring) both;
        animation-delay: calc(var(--pi-name-at) + 300ms);
    }
    .site-pi-run:not(.site-pi-done).site-profile-wordmark .site-profile-verified { animation-delay: calc(var(--pi-chars, 5) * 55ms + 860ms); }

    /* classic: the photo springs in and sends one ring out into the page */
    .site-pi-run:not(.site-pi-done).site-profile-classic .site-profile-photo,
    .site-pi-run:not(.site-pi-done).site-profile-cover:not(.site-profile-has-cover) .site-profile-photo {
        animation:
            site-pi-spring-in 0.8s var(--pi-expo) both,
            site-pi-ring 1.4s ease-out 0.25s both;
    }
    .site-pi-run:not(.site-pi-done).site-profile-marquee .site-profile-photo {
        animation:
            site-pi-spring-in 0.8s var(--pi-expo) 0.25s both,
            site-pi-ring 1.4s ease-out 0.5s both;
    }

    /* cover: the banner opens downward like a blind and settles from a zoom, then the
       photo drops onto its edge */
    .site-profile-cover { --pi-name-at: 420ms; --pi-seq-at: 600ms; }
    .site-pi-run:not(.site-pi-done) .site-profile-banner { animation: site-pi-blind 1s var(--pi-expo) both; }
    .site-pi-run:not(.site-pi-done) .site-profile-banner img { animation: site-pi-settle 1.8s var(--pi-expo) both; }
    .site-pi-run:not(.site-pi-done).site-profile-has-cover .site-profile-photo {
        animation:
            site-pi-drop 0.8s var(--pi-expo) 0.4s both,
            site-pi-ring 1.4s ease-out 0.8s both;
    }

    /* spotlight: the photo comes into focus like a lens pull and pours down the page,
       then the name surfaces out of the fade */
    .site-profile-fade { --pi-name-at: 360ms; --pi-seq-at: 560ms; }
    .site-pi-run:not(.site-pi-done).site-profile-fade .site-profile-photo {
        -webkit-mask-image: linear-gradient(to bottom, #000 var(--site-pi-mask), transparent calc(var(--site-pi-mask) + 40%));
        mask-image: linear-gradient(to bottom, #000 var(--site-pi-mask), transparent calc(var(--site-pi-mask) + 40%));
        animation:
            site-pi-focus 1.1s var(--pi-expo) both,
            site-pi-pour 1.2s var(--pi-expo) both;
    }
    .site-pi-run:not(.site-pi-done).site-profile-fade .site-pi-w > span { animation-name: site-pi-surface; animation-duration: 1.1s; }

    /* poster: the giant name types itself in, line by line, letter by letter, then the
       photo rises up behind it from the bottom edge */
    .site-profile-poster { --pi-name-at: 0ms; --pi-seq-at: calc(var(--pi-chars, 10) * 32ms + 420ms); }
    .site-pi-run:not(.site-pi-done).site-profile-poster .site-pi-ch > span {
        animation: site-pi-letter 0.85s var(--pi-expo) both;
        animation-delay: calc(80ms + var(--i, 0) * 32ms);
    }
    .site-pi-run:not(.site-pi-done).site-profile-poster .site-profile-photo {
        animation: site-pi-rise-photo 0.8s var(--pi-expo) both;
        animation-delay: calc(var(--pi-chars, 10) * 32ms + 60ms);
    }

    /* marquee: the band wipes in from the left, then the photo, name and role as classic.
       Opacity and clip only: the band keeps its tilt the whole time. */
    .site-profile-marquee { --pi-name-at: 380ms; --pi-seq-at: 520ms; }
    .site-pi-run:not(.site-pi-done) .site-profile-marquee-band { animation: site-pi-wipe 0.9s var(--pi-expo) both; }
    @keyframes site-pi-wipe { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

    /* sideways: the spine draws up from the bottom, the photo rises beside it */
    .site-profile-side { --pi-name-at: 0ms; --pi-seq-at: 520ms; }
    .site-pi-run:not(.site-pi-done) .site-profile-spine { animation: site-pi-spine 0.9s var(--pi-expo) both; }
    .site-pi-run:not(.site-pi-done).site-profile-side .site-profile-photo { animation: site-pi-fade-up 0.7s var(--pi-expo) 0.18s both; }
    @keyframes site-pi-spine { from { opacity: 0; clip-path: inset(0 0 0 100%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

    /* sticker: the print drops onto the page, the label slaps on, the badge pops last */
    .site-profile-sticker { --pi-name-at: 0ms; --pi-seq-at: 640ms; }
    .site-pi-run:not(.site-pi-done) .site-sticker-print { animation: site-pi-drop 0.75s var(--pi-expo) both; }
    .site-pi-run:not(.site-pi-done) .site-sticker-label { animation: site-pi-pop-in 0.55s var(--pi-expo) 0.3s both; }
    .site-pi-run:not(.site-pi-done) .site-sticker-badge { animation: site-pi-pop-in 0.5s var(--pi-expo) 0.48s both; }

    /* bento: the tiles arrive one after another */
    .site-profile-bento { --pi-name-at: 120ms; --pi-seq-at: 520ms; }
    .site-pi-run:not(.site-pi-done).site-profile-bento .site-profile-portrait { animation: site-pi-pop-in 0.6s var(--pi-expo) both; }
    .site-pi-run:not(.site-pi-done).site-profile-bento .site-profile-name { animation: site-pi-pop-in 0.6s var(--pi-expo) 0.1s both; }
    .site-pi-run:not(.site-pi-done).site-profile-bento .site-profile-role { animation: site-pi-pop-in 0.6s var(--pi-expo) 0.2s both; }

    /* typography: the role line first, then the name letter by letter, the photo last */
    .site-profile-typo { --pi-name-at: 0ms; --pi-seq-at: 0ms; }
    .site-pi-run:not(.site-pi-done).site-profile-typo .site-pi-ch > span {
        animation: site-pi-letter 0.7s var(--pi-expo) both;
        animation-delay: calc(220ms + var(--i, 0) * 26ms);
    }
    .site-pi-run:not(.site-pi-done).site-profile-typo .site-profile-photo {
        animation: site-pi-fade-up 0.6s var(--pi-expo) both;
        animation-delay: calc(var(--pi-chars, 10) * 26ms + 300ms);
    }

    /* wordmark: the big word assembles letter by letter, then the round photo pops in
       over it and rings once */
    .site-profile-wordmark { --pi-seq-at: calc(var(--pi-chars, 5) * 55ms + 820ms); }
    .site-pi-run:not(.site-pi-done).site-profile-wordmark .site-pi-ch > span {
        animation: site-pi-assemble 1s var(--pi-expo) both;
        animation-delay: calc(60ms + var(--i, 0) * 55ms);
    }
    .site-pi-run:not(.site-pi-done).site-profile-wordmark .site-profile-photo {
        animation:
            site-pi-spring-in 1s var(--pi-spring) both,
            site-pi-ring 1.4s ease-out both;
        animation-delay: calc(var(--pi-chars, 5) * 55ms + 260ms), calc(var(--pi-chars, 5) * 55ms + 560ms);
    }
    .site-pi-run:not(.site-pi-done).site-profile-wordmark .site-profile-name .site-pi-w > span { animation-delay: calc(var(--pi-chars, 5) * 55ms + 560ms + var(--i, 0) * 70ms); }

    /* timeline released: hover, ambient and the QR flip own these properties again */
    .site-pi-done .site-profile-photo,
    .site-pi-done .site-profile-banner,
    .site-pi-done .site-profile-marquee-band,
    .site-pi-done .site-profile-spine,
    .site-pi-done .site-sticker-print,
    .site-pi-done .site-sticker-label,
    .site-pi-done .site-sticker-badge,
    .site-pi-done.site-profile-bento .site-profile-portrait,
    .site-pi-done.site-profile-bento .site-profile-name,
    .site-pi-done.site-profile-bento .site-profile-role,
    .site-pi-done .site-profile-banner img,
    .site-pi-done .site-pi-w > span,
    .site-pi-done .site-pi-ch > span,
    .site-pi-done .site-pi-seq { animation: none; }
    .site-pi-done.site-profile-fade .site-profile-photo {
        -webkit-mask-image: linear-gradient(to bottom, #000 44%, transparent 84%);
        mask-image: linear-gradient(to bottom, #000 44%, transparent 84%);
    }

    /* ── gentle motion (opt-in) ──────────────────────────────────────
       Photo: floats and breathes a brand-coloured ring. Name: a slow light sweep across
       the letters. Links: a soft lift ripples down the stack, the arrow nudges. Calm, but
       visible on any palette (no white-on-light sheens). */
    .site-profile-ambient.site-pi-done .site-profile-photo {
        animation: site-amb-float 6s ease-in-out infinite, site-amb-halo 4s ease-in-out infinite;
    }
    .site-profile-ambient.site-pi-done.site-profile-fade .site-profile-photo { animation: site-amb-drift 14s ease-in-out infinite alternate; }
    .site-profile-ambient.site-pi-done.site-profile-poster .site-profile-photo { animation: site-amb-sway 9s ease-in-out infinite; }
    /* the newer layouts frame their photo themselves: no ring. Sideways floats, the sticker
       print sways on its pin (transform composes with its rotate tilt), bento tiles hold still */
    .site-profile-ambient.site-pi-done.site-profile-side .site-profile-photo { animation: site-amb-float 6s ease-in-out infinite; }
    .site-profile-ambient.site-pi-done.site-profile-sticker .site-profile-photo,
    .site-profile-ambient.site-pi-done.site-profile-bento .site-profile-photo { animation: none; }
    .site-profile-ambient.site-pi-done .site-sticker-print { animation: site-amb-sway 9s ease-in-out infinite; }
    .site-profile-ambient.site-pi-done.site-profile-cover .site-profile-banner img { animation: site-amb-drift 18s ease-in-out infinite alternate; }

    .site-profile-ambient.site-pi-done .site-pi-ch {
        animation: site-amb-wave 3.6s ease-in-out infinite;
        animation-delay: calc(var(--i, 0) * 110ms);
    }
    .site-profile-ambient.site-pi-done .site-profile-verified { display: inline-block; animation: site-amb-twinkle 6s ease-in-out infinite 2s; }

    .site-ambient.site-anim .site-lb-btn {
        animation: site-amb-lift 7s ease-in-out infinite;
        animation-delay: calc(2.4s + var(--amb-i, 0) * 0.22s);
    }
    .site-ambient.site-anim .site-lb-btn:hover,
    .site-ambient.site-anim .site-lb-btn:focus-visible { animation: none; }
    .site-ambient.site-anim .site-lb-btn > .site-lb-trail {
        animation: site-amb-nudge 7s ease-in-out infinite;
        animation-delay: calc(2.4s + var(--amb-i, 0) * 0.22s);
    }

    /* ── keyframes (all site- prefixed; this CSS ships on owners' domains) ── */
    @keyframes site-pi-rise { from { opacity: 0; transform: translateY(0.28em); } to { opacity: 1; transform: none; } }
    @keyframes site-pi-surface { from { transform: translateY(0.3em); opacity: 0; } to { transform: none; opacity: 1; } }
    @keyframes site-pi-fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
    @keyframes site-pi-pop-in { from { opacity: 0; transform: translateY(8px) scale(0.94); } to { opacity: 1; transform: none; } }
    @keyframes site-pi-spring-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
    @keyframes site-pi-ring {
        0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--site-brand) 38%, transparent), var(--pi-base-shadow); }
        70% { box-shadow: 0 0 0 26px color-mix(in srgb, var(--site-brand) 0%, transparent), var(--pi-base-shadow); }
        100% { box-shadow: 0 0 0 0 transparent, var(--pi-base-shadow); }
    }
    /* the reveal clips with the banner's own corners: rounded in a card, square when full bleed */
    @keyframes site-pi-blind { from { clip-path: inset(0 0 100% 0 round var(--site-banner-r, var(--site-radius-surface-lg, 22px))); } to { clip-path: inset(0 0 0 0 round var(--site-banner-r, var(--site-radius-surface-lg, 22px))); } }
    @keyframes site-pi-settle { from { transform: scale(1.22); } to { transform: none; } }
    @keyframes site-pi-drop { from { opacity: 0; transform: translateY(-20px) scale(0.92); } to { opacity: 1; transform: none; } }
    @keyframes site-pi-focus { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
    @keyframes site-pi-pour { from { --site-pi-mask: -30%; } to { --site-pi-mask: 44%; } }
    @keyframes site-pi-letter { from { opacity: 0; transform: translateY(0.22em); } to { opacity: 1; transform: none; } }
    @keyframes site-pi-rise-photo {
        from { opacity: 0; transform: translateY(24px); }
        to { opacity: 1; transform: none; }
    }
    @keyframes site-pi-assemble { from { opacity: 0; transform: translateY(0.22em); } to { opacity: 1; transform: none; } }

    @keyframes site-amb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    @keyframes site-amb-halo {
        0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--site-brand) 0%, transparent), var(--pi-base-shadow); }
        50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--site-brand) 22%, transparent), var(--pi-base-shadow); }
    }
    @keyframes site-amb-drift { from { transform: scale(1) translateY(0); } to { transform: scale(1.06) translateY(-2%); } }
    /* starts and ends at rest, so the hand-off from the entrance never jumps */
    @keyframes site-amb-sway { 0%, 100% { transform: none; } 25% { transform: rotate(-1.2deg) translateY(-3px); } 50% { transform: translateY(-6px); } 75% { transform: rotate(1.2deg) translateY(-3px); } }
    @keyframes site-amb-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.05em); } }
    @keyframes site-amb-twinkle { 0%, 82%, 100% { transform: none; } 88% { transform: scale(1.3) rotate(14deg); } 94% { transform: scale(0.95); } }
    @keyframes site-amb-lift {
        0%, 12%, 100% { transform: none; }
        6% { transform: translateY(-3px) scale(1.012); }
    }
    @keyframes site-amb-nudge { 0%, 12%, 100% { transform: none; } 6% { transform: translateX(4px); } }
}

/* the spotlight zoom and drift run on an edge-to-edge photo: never let them scroll the page sideways */
.site-layout-bio .site-main,
.site-anim .site-main { overflow-x: clip; }

/* ── QR swap: the photo is a coin, the QR code its other side ───────────────
   siteHost.js moves the photo's classes onto .site-coin, so the coin IS the photo for
   every layout rule; these rules only fill it and draw the back. */
.site-coin { overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.site-coin > .site-coin-front {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: inherit;
    border-radius: inherit;
}
.site-coin > .site-coin-back {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(20, 22, 28, 0.1);
    visibility: hidden;
}
/* spotlight's coin is tall and fades out at the bottom: keep the code in the solid top */
.site-profile-fade .site-coin > .site-coin-back { align-items: flex-start; padding-top: 12%; }
.site-coin-qr { display: block; line-height: 0; }
.site-coin-qr img, .site-coin-qr canvas { width: var(--qr-side, 96px); height: var(--qr-side, 96px); object-fit: contain; }
.site-coin-flipped > .site-coin-back { visibility: visible; }
.site-coin-flipped > .site-coin-front { visibility: hidden; }
.site-qr-held .site-coin { box-shadow: 0 0 0 3px var(--site-brand), var(--site-shadow); }

/* ── landing page motion ───────────────────────────────────────────────────
   1. HERO ENTRANCE (always on): siteHost.js adds .site-hi, splits the headline into
      words, waits for the media and fonts, then .site-hi-run plays the timeline and
      .site-hi-done releases it. Image: an aperture opening into focus. Headline: words
      rise out of a mask. Then the line under it, then the button springs in and catches
      the light once.
   2. BLOCK PERSONALITIES on the scroll reveal (.sr-p-*).
   3. GENTLE MOTION (opt-in, body.site-ambient from theme.motion): hero image drift,
      headline light sweep, a breathing primary button, the link lift ripple (above),
      and scroll depth on the hero image where the browser supports it.
   Hero transforms use the individual `scale` / `translate` properties for the loops so
   they compose with the entrance's `transform` instead of fighting it. */

@media (prefers-reduced-motion: no-preference) {

    .site-hero {
        --hi-expo: cubic-bezier(0.16, 1, 0.3, 1);
        --hi-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
        --hi-title-at: 200ms;
        --hi-sub-at: calc(var(--hi-title-at) + var(--hi-words, 4) * 75ms + 260ms);
        --hi-cta-at: calc(var(--hi-sub-at) + 220ms);
    }
    .site-hi-textonly { --hi-title-at: 60ms; }

    /* hold until the photo and fonts are in: text and photo wait, the frame does not */
    .site-hi:not(.site-hi-run) .site-hero-text,
    .site-hi:not(.site-hi-run) .site-hero-frame-inner,
    .site-hi-natural:not(.site-hi-run) { opacity: 0; }

    /* the frame arrives at once, a soft brand-tinted card with a light passing over it */
    .site-hi .site-hero-frame {
        background: color-mix(in srgb, var(--site-brand) 9%, var(--site-bg, #fff));
        animation: site-hi-frame-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .site-hi .site-hero-frame::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--site-bg, #fff) 55%, transparent) 50%, transparent 70%);
        transform: translateX(-100%);
        animation: site-hi-shimmer 1.4s ease-in-out infinite;
    }
    .site-hi-run .site-hero-frame::before { animation: none; opacity: 0; transition: opacity 0.4s ease; }
    .site-hero-frame > .site-hero-frame-inner { position: relative; z-index: 1; }
    /* the photo develops inside the frame: out of focus and close, then sharp */
    .site-hi-run:not(.site-hi-done) .site-hero-frame-inner {
        animation: site-hi-develop 1.5s cubic-bezier(0.16, 1, 0.3, 1) both;
        will-change: transform, filter, opacity;
    }

    /* headline words: the same masked rise as the bio name */
    .site-hi .site-pi-w {
        display: inline-block;
        overflow: clip;
        overflow-clip-margin: 0.14em;
        vertical-align: top;
        padding-bottom: 0.08em;
        margin-bottom: -0.08em;
    }
    .site-hi .site-pi-w > span { display: inline-block; }
    .site-hi-run:not(.site-hi-done) .site-pi-w > span {
        animation: site-pi-rise 1s var(--hi-expo) both;
        animation-delay: calc(var(--hi-title-at) + var(--i, 0) * 75ms);
    }

    .site-hi-run:not(.site-hi-done) .site-hero-media:not(.site-hero-frame) {
        animation: site-hi-aperture 1.6s var(--hi-expo) both;
        will-change: transform, filter, clip-path;   /* only while the entrance plays */
    }
    /* a big blur is costly on small GPUs: half the focus pull on phones, same feel */
    @media (max-width: 640px) {
        .site-hi-run:not(.site-hi-done) .site-hero-media:not(.site-hero-frame) { animation-name: site-hi-aperture-sm; }
        .site-hi-run:not(.site-hi-done) .site-hero-frame-inner { animation-name: site-hi-develop-sm; }
        @keyframes site-hi-develop-sm { from { opacity: 0; transform: scale(1.1); filter: blur(7px) brightness(0.85); } to { opacity: 1; transform: none; filter: none; } }
        @keyframes site-hi-aperture-sm {
            from { opacity: 0; clip-path: inset(6% 8% round var(--site-radius-surface-lg, 22px)); transform: scale(1.1); filter: blur(8px) brightness(0.8); }
            to { opacity: 1; clip-path: inset(0 0 round var(--site-radius-surface-lg, 22px)); transform: none; filter: none; }
        }
    }
    .site-hi-run:not(.site-hi-done) .site-hero-sub {
        animation: site-pi-fade-up 0.8s var(--hi-expo) both;
        animation-delay: var(--hi-sub-at);
    }
    .site-hi-run:not(.site-hi-done) .site-hero-text > .site-btn {
        animation: site-pi-pop-in 0.75s var(--hi-spring) both;
        animation-delay: var(--hi-cta-at);
    }
    /* the button catches the light once, as it lands */
    .site-hero-text > .site-btn { position: relative; overflow: hidden; isolation: isolate; }
    .site-hi-run .site-hero-text > .site-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
        transform: translateX(-120%);
        animation: site-hi-glint 1.1s ease-in-out both;
        animation-delay: calc(var(--hi-cta-at) + 450ms);
    }

    /* ── block personalities on the scroll reveal ──────────────────────── */
    .site-anim .sr-p-wave .site-gallery-cell.sr-child { transform: translateY(28px) scale(0.9) rotate(-1.5deg); }
    .site-anim .sr-p-wave.sr-in .site-gallery-cell.sr-child { transform: none; transition-duration: 0.9s; }

    .site-anim .sr-p-slide .site-faq-item.sr-child { transform: translateX(-28px); }
    .site-anim .sr-p-slide.sr-in .site-faq-item.sr-child { transform: none; }

    .site-anim .sr-p-form .site-contact-submit.sr-child { transform: translateY(14px) scale(0.92); transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
    .site-anim .sr-p-form.sr-in .site-contact-submit.sr-child { transform: none; }

    .site-anim .sr-p-blind.sr-block { clip-path: inset(0 0 100% 0 round var(--site-radius-surface-lg, 22px)); filter: none; transition: opacity 0.5s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1), clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--srb-delay, 0s); }
    .site-anim .sr-p-blind.sr-block.sr-in { clip-path: inset(0 0 0 0 round var(--site-radius-surface-lg, 22px)); }

    /* ── gentle motion, landing page ───────────────────────────────────── */
    .site-ambient .site-hero-frame-inner { animation: site-hi-drift 18s ease-in-out infinite alternate; }
    /* one focal point: only the hero's button breathes */
    .site-ambient .site-hi-done .site-hero-text > .site-btn-primary,
    .site-ambient .site-hero:not(.site-hi) .site-hero-text > .site-btn-primary { animation: site-hi-breathe 3.6s ease-in-out infinite 1.5s; }
    .site-ambient .site-hero .site-hero-text > .site-btn-primary:hover { animation: none; }

    @keyframes site-hi-aperture {
        from {
            opacity: 0;
            clip-path: inset(9% 12% round var(--site-radius-surface-lg, 22px));
            transform: scale(1.14);
            filter: blur(16px) brightness(0.75) saturate(0.6);
        }
        to {
            opacity: 1;
            clip-path: inset(0 0 round var(--site-radius-surface-lg, 22px));
            transform: none;
            filter: none;
        }
    }
    /* the header bar settles down from above as the page opens */
    .site-anim .site-header { animation: site-hi-header 0.9s cubic-bezier(0.16, 1, 0.3, 1) both 80ms; }
    @keyframes site-hi-header { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
    @keyframes site-hi-frame-in { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
    @keyframes site-hi-shimmer { to { transform: translateX(100%); } }
    @keyframes site-hi-develop { from { opacity: 0; transform: scale(1.16); filter: blur(14px) brightness(0.8) saturate(0.7); } to { opacity: 1; transform: none; filter: none; } }
    @keyframes site-hi-glint { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
    @keyframes site-hi-drift { from { scale: 1.08; } to { scale: 1.14; } }
    @keyframes site-hi-breathe {
        0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--site-brand) 0%, transparent), var(--site-shadow); }
        50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--site-brand) 20%, transparent), var(--site-shadow); }
    }
}

/* the hero frame (gentle motion only, siteHost.js): clips its image so drift and depth
   stay inside the box */
.site-hero-frame { position: relative; overflow: hidden; }
.site-hero-frame > .site-hero-frame-inner {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* headroom for the depth travel, so no edge ever shows */
.site-ambient .site-hero-frame > .site-hero-frame-inner { scale: 1.08; }
.site-hero-frame > .site-hero-frame-inner.is-fill { object-fit: fill; }

/* scroll depth: the image moves a little slower than the page, inside its frame. Only
   where scroll-driven animations exist; elsewhere the page just scrolls. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .site-ambient .site-hero-frame-inner {
            animation: site-hi-drift 18s ease-in-out infinite alternate, site-hi-depth linear both;
            animation-timeline: auto, view();
            animation-range: normal, cover 0% cover 100%;
        }
        @keyframes site-hi-depth { from { translate: 0 -3.5%; } to { translate: 0 3.5%; } }
    }
}

/* ── accent colour ─────────────────────────────────────────────────────────
   The theme's second colour (theme.accent). It never colours text, so a light accent
   cannot make anything unreadable: it is the far end of solid button gradients (mixed
   into the brand so white labels keep their contrast), link underlines, the FAQ icon,
   hover and focus rings, and the glows of the motion system. */
.site-btn-primary,
.site-lb-solid,
.site-pill-solid {
    background-image: linear-gradient(135deg, var(--site-brand), color-mix(in srgb, var(--site-accent, var(--site-brand)) 55%, var(--site-brand)));
}
.site-rich-text a { background-image: linear-gradient(90deg, var(--site-brand), var(--site-accent, var(--site-brand))); }
/* a bio page is flat: one colour per button, no brand-to-accent wash */
.site-layout-bio .site-btn-primary,
.site-layout-bio .site-lb-solid,
.site-layout-bio .site-pill-solid { background-image: none; }
.site-faq-item summary::after { color: var(--site-accent, var(--site-brand)); }
.site-lb-soft:hover { border-color: color-mix(in srgb, var(--site-accent, var(--site-brand)) 60%, var(--site-border)); }
.site-main a:focus-visible,
.site-main button:focus-visible,
.site-main summary:focus-visible {
    outline: 2px solid var(--site-accent, var(--site-brand));
    outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes site-amb-halo {
        0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--site-accent, var(--site-brand)) 0%, transparent), var(--pi-base-shadow); }
        50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--site-accent, var(--site-brand)) 30%, transparent), var(--pi-base-shadow); }
    }
    @keyframes site-hi-breathe {
        0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--site-accent, var(--site-brand)) 0%, transparent), var(--site-shadow); }
        50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--site-accent, var(--site-brand)) 26%, transparent), var(--site-shadow); }
    }
}

/* ── gentle motion: the hairline ───────────────────────────────────────────
   Replaces the light sweep. A short accent rule draws out from the centre under the
   name (or the landing headline), holds, and fades, every few seconds. It never touches
   the letters, so the type stays crisp. Decorative: an ::after, no layout shift. */
@media (prefers-reduced-motion: no-preference) {
    .site-profile-ambient .site-profile-name,
    .site-profile-ambient.site-profile-poster .site-profile-giant,
    .site-ambient .site-hero-text > h1,
    .site-ambient .site-hero-text > h2 { position: relative; }

    .site-profile-ambient.site-pi-done .site-profile-name::after,
    .site-profile-ambient.site-pi-done.site-profile-poster .site-profile-giant::after,
    .site-profile-ambient.site-pi-done.site-profile-typo .site-profile-giant::after,
    .site-ambient .site-hi-done .site-hero-text > h1::after,
    .site-ambient .site-hi-done .site-hero-text > h2::after,
    .site-ambient .site-hero:not(.site-hi) .site-hero-text > h1::after,
    .site-ambient .site-hero:not(.site-hi) .site-hero-text > h2::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -0.16em;
        width: min(2.6em, 60%);
        height: 1.5px;
        border-radius: 1px;
        background: var(--site-accent, var(--site-brand));
        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
        pointer-events: none;
        animation: site-amb-hairline 7s linear infinite 1.2s;
    }
    /* the giant type is huge: keep its rule a quiet fixed size */
    .site-profile-ambient.site-pi-done.site-profile-poster .site-profile-giant::after { width: 72px; bottom: -0.05em; }

    /* marquee: with gentle motion on, the band runs; off, it holds still */
    .site-profile-ambient .site-mq-track { animation: site-amb-marquee 24s linear infinite; }
    @keyframes site-amb-marquee { to { transform: translateX(-50%); } }
    .site-profile-ambient.site-pi-done.site-profile-typo .site-profile-giant::after { left: 0; transform-origin: left; transform: scaleX(0); width: 72px; bottom: -0.08em; }

    @keyframes site-amb-hairline {
        /* a small dash flares in, stretches into the full line, and is gone the
           instant it reaches full width; the rest of the cycle is quiet */
        0% { transform: translateX(-50%) scaleX(0.05); opacity: 0; animation-timing-function: ease-out; }
        3% { transform: translateX(-50%) scaleX(0.08); opacity: 1; animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
        19% { transform: translateX(-50%) scaleX(0.86); opacity: 0.95; animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); }
        26% { transform: translateX(-50%) scaleX(1); opacity: 0; }
        100% { transform: translateX(-50%) scaleX(1); opacity: 0; }
    }
}