/* Public page: fullscreen slideshow ------------------------------------- */

:root {
    --slide-fade: 1500ms;
    --ink: #ffffff;
    --ground: #0b0b0b;
}

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

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--ground);
    color: var(--ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.site {
    overflow: hidden;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Slides ---------------------------------------------------------------- */

.stage {
    position: fixed;
    inset: 0;
    background: var(--ground);
}

.slide {
    position: absolute;
    inset: 0;
    background-color: var(--ground);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    transition: opacity var(--slide-fade) ease-in-out;
    will-change: opacity;
}

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

.slide--empty {
    background: radial-gradient(circle at 50% 40%, #2a2a2a 0%, #0b0b0b 70%);
}

/* Subtle vignette so the logo stays readable over any photo */
.veil {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .55) 100%);
}

/* Foreground ------------------------------------------------------------ */

.frame {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    align-items: center;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    height: 100dvh;
    padding: clamp(24px, 5vh, 56px) 20px;
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.6vh, 20px);
    text-align: center;
}

.logo {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signature {
    display: block;
    /* Slightly narrower than the logo above it, so the mark stays dominant. */
    width: clamp(275px, 42vw, 560px);
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .6));
    animation: logo-in 1.2s ease-out .25s both;
}

/* Fallback when SIGNATURE_PATH is empty */
.byline {
    margin: 0;
    font-size: clamp(19px, 2.6vw, 32px);
    font-weight: 700;
    /* Tighter tracking than a light weight would take: bold letterforms at this
       size already read as wide, and .3em would pull the name apart. */
    letter-spacing: .18em;
    text-indent: .18em; /* balance the trailing letter-space */
    text-transform: uppercase;
    color: var(--ink);
    text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
    animation: logo-in 1.2s ease-out .25s both;
}

.logo img {
    display: block;
    width: clamp(315px, 48vw, 640px);
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .55));
    animation: logo-in 1.2s ease-out both;
}

@keyframes logo-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Bottom block: social buttons + the location line under them */
.meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.6vh, 18px);
}

.social {
    display: flex;
    gap: 22px;
    align-items: center;
}

.social__link {
    display: inline-flex;
    padding: 8px;
    border-radius: 50%;
    opacity: .85;
    transition: opacity .25s ease, transform .25s ease;
}

.social__link:hover,
.social__link:focus-visible {
    opacity: 1;
    transform: translateY(-2px);
}

.social__link img {
    display: block;
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .6));
}

.place {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 16px;
    font-size: clamp(10px, 1.15vw, 12px);
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
    animation: logo-in 1.2s ease-out .5s both;
}

/* Flex items are blockified, so text-indent applies and cancels the
   trailing letter-space that would otherwise push each half off-centre. */
.place__item {
    text-indent: .26em;
}

/* Hairline instead of a typed "|": it stays optically lighter than the text. */
.place__sep {
    width: 1px;
    height: 1em;
    background: currentColor;
    opacity: .4;
}

:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .8);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .social__link img {
        width: 24px;
        height: 24px;
    }
}

/* Too narrow for one line at this tracking: stack the two halves and drop the
   rule, which only reads as a separator when the text sits beside it. */
@media (max-width: 560px) {
    .place {
        flex-direction: column;
        gap: 7px;
        letter-spacing: .22em;
    }

    .place__sep {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .slide {
        transition-duration: 1ms;
    }

    .logo img,
    .place {
        animation: none;
    }
}