/* Rooftop is a room inside Coup de Foudre, expressed through the same red, gold and near-black world. */
.rooftop-page {
    --roof-night: #0d0c0b;
    --roof-night-soft: #17110f;
    --roof-wine: #741b18;
    --roof-gold: #d2ae62;
    --roof-paper: #f0ede7;
    --roof-muted: rgba(240, 237, 231, 0.64);
    --roof-line: rgba(210, 174, 98, 0.24);
    --roof-space: 4px;
    background: var(--roof-night);
    color: var(--roof-paper);
}

.rooftop-page .editorial-nav {
    position: fixed;
    inset: 0 0 auto;
    color: var(--roof-paper);
}

.rooftop-page .editorial-nav.scrolled {
    background: rgba(13, 12, 11, 0.86);
    border-bottom-color: var(--roof-line);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.rooftop-page .editorial-nav .brand-logo,
.rooftop-footer-logo {
    filter: brightness(0) saturate(100%) invert(75%) sepia(43%) saturate(650%) hue-rotate(358deg) brightness(91%) contrast(87%);
}

.rooftop-page .mobile-menu-btn {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
}

.rooftop-page .mobile-menu-btn span { background: var(--roof-paper); }

.roof-hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: var(--roof-night);
}

.roof-hero-room,
.roof-hero-room::after,
.roof-hero-room img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.roof-hero-room img {
    object-fit: cover;
    object-position: center 48%;
    transform: scale(1.025);
}

.roof-hero-room::after {
    content: "";
    background:
        linear-gradient(90deg, rgba(13, 12, 11, 0.9) 0%, rgba(13, 12, 11, 0.5) 43%, rgba(13, 12, 11, 0.08) 73%),
        linear-gradient(180deg, rgba(13, 12, 11, 0.42) 0%, transparent 34%, rgba(13, 12, 11, 0.82) 100%);
}

.roof-hero-copy {
    position: absolute;
    z-index: 2;
    inset: auto auto clamp(52px, 9vh, 104px) clamp(20px, 6vw, 104px);
    width: min(900px, calc(100% - 40px));
}

.roof-kicker {
    margin-bottom: calc(var(--roof-space) * 6);
    color: var(--roof-gold);
    font: 650 0.68rem/1.2 var(--font-sans);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.roof-hero h1,
.roof-statement h2,
.roof-finale h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 0.72;
    letter-spacing: -0.055em;
}

.roof-hero h1 { font-size: clamp(6.4rem, 14vw, 13rem); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .roof-hero h1 em,
    .roof-statement h2 em,
    .roof-finale h2 em {
        background:
            linear-gradient(rgba(210, 174, 98, 0.22), rgba(210, 174, 98, 0.22)),
            url("../brand/gold-texture.webp") center / cover;
        background-color: var(--roof-gold);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

.roof-hero-lede {
    max-width: 460px;
    margin-top: calc(var(--roof-space) * 7);
    color: rgba(240, 237, 231, 0.84);
    font: 400 clamp(0.92rem, 1.2vw, 1.08rem)/1.55 var(--font-sans);
}

.roof-primary {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(var(--roof-space) * 8);
    padding: 15px 28px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background-color: var(--roof-wine);
    background-image:
        linear-gradient(rgba(74, 0, 8, 0.1), rgba(74, 0, 8, 0.26)),
        url("../brand/red-texture.webp");
    background-position: center;
    background-size: cover;
    color: #fff;
    font: 650 0.7rem/1 var(--font-sans);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: transform 180ms var(--ease-smooth), filter 180ms ease;
}

.roof-primary:hover { transform: translateY(-2px); filter: brightness(1.12); }
.roof-primary:active { transform: translateY(0) scale(0.985); }
.roof-primary:focus-visible { outline: 2px solid var(--roof-gold); outline-offset: 4px; }

.roof-scroll-cue {
    position: absolute;
    z-index: 2;
    inset: auto clamp(20px, 3vw, 48px) clamp(32px, 5vh, 58px) auto;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--roof-muted);
    font: 600 0.56rem/1 var(--font-sans);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.roof-scroll-cue span {
    width: 48px;
    height: 1px;
    display: block;
    background: var(--roof-gold);
    transform-origin: left;
    animation: roof-cue 2.2s var(--ease-smooth) infinite;
}

@keyframes roof-cue {
    0%, 100% { transform: scaleX(0.22); opacity: 0.45; }
    50% { transform: scaleX(1); opacity: 1; }
}

.roof-statement {
    min-height: 76svh;
    display: grid;
    place-items: center;
    padding: 15vh clamp(20px, 6vw, 104px);
    background: var(--roof-night);
    text-align: center;
}

.roof-statement h2 { font-size: clamp(5.2rem, 12vw, 12rem); }

.roof-story {
    position: relative;
    background: var(--roof-night);
}

.roof-story-stage {
    position: sticky;
    z-index: 1;
    top: 0;
    height: 100svh;
    overflow: hidden;
    background: var(--roof-night);
}

.roof-story-scene {
    --scene-y: 0px;
    --scene-scale: 1.055;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.roof-story-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(13, 12, 11, 0.76), transparent 24%, transparent 76%, rgba(13, 12, 11, 0.76)),
        linear-gradient(180deg, rgba(13, 12, 11, 0.2), transparent 50%, rgba(13, 12, 11, 0.62));
}

.roof-story-scene.is-active {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
}

.roof-story-scene picture {
    width: min(58vw, 960px);
    height: 100%;
    display: block;
}

.roof-story-scene img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translate3d(0, var(--scene-y), 0) scale(var(--scene-scale));
    will-change: transform;
}

.roof-story-scene:nth-child(1) img { object-position: center 52%; }
.roof-story-scene:nth-child(2) img { object-position: center 42%; }
.roof-story-scene:nth-child(3) img { object-position: center 43%; }
.roof-story-scene:nth-child(4) img { object-position: center 52%; }

.roof-story-scene figcaption {
    position: absolute;
    z-index: 3;
    inset: auto auto clamp(58px, 8vh, 100px) clamp(20px, 6vw, 104px);
    font: 400 clamp(4.6rem, 9vw, 9rem)/0.8 var(--font-serif);
    letter-spacing: -0.05em;
}

.roof-story-count {
    position: absolute;
    z-index: 4;
    inset: auto clamp(20px, 4vw, 64px) clamp(36px, 5vh, 60px) auto;
    display: grid;
    grid-template-columns: auto 52px auto;
    align-items: center;
    gap: 12px;
    color: var(--roof-gold);
    font: 600 0.56rem/1 var(--font-sans);
    letter-spacing: 0.12em;
}

.roof-story-count i { height: 1px; background: var(--roof-line); }

.roof-story-steps {
    position: relative;
    z-index: 3;
    margin-top: -100svh;
    pointer-events: none;
}

.roof-story-step { min-height: 100svh; }

.roof-mosaic {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 9vw 8px;
    padding: 18vh 8px 24vh;
    overflow: hidden;
    background: var(--roof-night);
}

.roof-mosaic-shot {
    position: relative;
    grid-column: span 5;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--roof-night-soft);
    opacity: 0;
    transform: translate3d(0, 64px, 0) scale(0.97);
    transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

.roof-mosaic-shot.is-seen { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.roof-mosaic-shot:nth-of-type(odd) { grid-column: 1 / 6; }
.roof-mosaic-shot:nth-of-type(even) { grid-column: 7 / 13; }
.roof-mosaic-shot--lift { margin-top: -12vh; }
.roof-mosaic-shot--wide { grid-column-end: span 6; }

.roof-mosaic-shot picture,
.roof-mosaic-shot img {
    width: 100%;
    height: 100%;
    display: block;
}

.roof-mosaic-shot img {
    object-fit: cover;
    object-position: center;
    transform: scale(1.035);
}

.roof-mosaic-shot--night img { object-position: center 48%; }

@supports (animation-timeline: view()) {
    .roof-mosaic-shot.is-seen img {
        animation: roof-image-drift linear both;
        animation-timeline: view();
        animation-range: entry 0% exit 100%;
    }

    @keyframes roof-image-drift {
        from { transform: translate3d(0, 2.5%, 0) scale(1.09); }
        to { transform: translate3d(0, -2.5%, 0) scale(1.09); }
    }
}

.roof-finale {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: var(--roof-night);
}

.roof-finale-media,
.roof-finale-media::after,
.roof-finale-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.roof-finale-media img { object-fit: cover; object-position: center 38%; }

.roof-finale-media::after {
    content: "";
    background:
        linear-gradient(90deg, rgba(13, 12, 11, 0.88), rgba(13, 12, 11, 0.2) 66%),
        linear-gradient(180deg, transparent 48%, rgba(13, 12, 11, 0.76));
}

.roof-finale-copy {
    position: absolute;
    z-index: 2;
    inset: auto auto clamp(52px, 8vh, 96px) clamp(20px, 6vw, 104px);
    opacity: 0;
    transform: translate3d(0, 48px, 0);
    transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

.roof-finale-copy.is-seen { opacity: 1; transform: translate3d(0, 0, 0); }

.roof-finale h2 { font-size: clamp(6rem, 13vw, 12rem); }

.rooftop-footer {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
    gap: 42px;
    padding: 72px clamp(20px, 6vw, 104px) 32px;
    background: var(--roof-night);
}

.rooftop-footer-logo { width: min(260px, 70%); }
.rooftop-footer-links { display: grid; align-content: start; gap: 12px; color: var(--roof-muted); font-size: 0.78rem; }
.rooftop-footer-links a { min-height: 28px; }
.rooftop-footer-links a:hover { color: var(--roof-gold); }
.preferred-source { align-self: start; }
.preferred-source > p { margin-bottom: 14px; color: var(--roof-muted); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; }
.rooftop-footer-note { grid-column: 1 / -1; padding-top: 26px; border-top: 1px solid var(--roof-line); color: var(--roof-muted); font-size: 0.64rem; }

@media (max-width: 900px) {
    .roof-story-scene picture { width: min(76vw, 760px); }
    .rooftop-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rooftop-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .rooftop-page { padding-bottom: 0; }

    .roof-hero-room::after {
        background: linear-gradient(180deg, rgba(13, 12, 11, 0.42) 0%, rgba(13, 12, 11, 0.06) 34%, rgba(13, 12, 11, 0.94) 82%);
    }

    .roof-hero-room img { object-position: 57% 46%; transform: scale(1.01); }

    .roof-hero-copy {
        inset: auto 20px calc(38px + env(safe-area-inset-bottom));
        width: auto;
    }

    .roof-kicker { margin-bottom: 18px; font-size: 0.6rem; }
    .roof-hero h1 { font-size: clamp(5.1rem, 26vw, 7.4rem); }
    .roof-hero-lede { max-width: 82%; margin-top: 18px; font-size: 0.86rem; }
    .roof-primary { width: 100%; margin-top: 24px; }
    .roof-scroll-cue { display: none; }

    .roof-statement { min-height: 72svh; padding-inline: 20px; }
    .roof-statement h2 { font-size: clamp(4.6rem, 22vw, 6.8rem); }

    .roof-story-scene picture { width: 100%; }
    .roof-story-scene::after { background: linear-gradient(180deg, rgba(13, 12, 11, 0.18), transparent 48%, rgba(13, 12, 11, 0.8)); }
    .roof-story-scene figcaption {
        inset: auto 20px calc(54px + env(safe-area-inset-bottom));
        font-size: clamp(4rem, 18vw, 6rem);
    }
    .roof-story-count { inset: 88px 20px auto auto; }

    .roof-mosaic {
        display: block;
        padding: 14vh 12px 18vh;
    }

    .roof-mosaic-shot,
    .roof-mosaic-shot--wide {
        width: 84%;
        margin: 0 0 16vh;
        aspect-ratio: 2 / 3;
    }

    .roof-mosaic-shot:nth-of-type(even) { margin-inline-start: auto; }
    .roof-mosaic-shot:last-of-type { margin-bottom: 0; }

    .roof-finale-media img { object-position: center 42%; }
    .roof-finale-media::after { background: linear-gradient(180deg, rgba(13, 12, 11, 0.16), transparent 38%, rgba(13, 12, 11, 0.92)); }
    .roof-finale-copy { inset: auto 20px calc(38px + env(safe-area-inset-bottom)); }
    .roof-finale h2 { font-size: clamp(5.6rem, 26vw, 8rem); }

    .rooftop-footer { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .rooftop-footer-brand { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .roof-scroll-cue span { animation: none; }
    .roof-primary,
    .roof-mosaic-shot,
    .roof-story-scene,
    .roof-finale-copy { transition: none; }

    .roof-story-stage {
        position: relative;
        height: auto;
        overflow: visible;
    }

    .roof-story-scene {
        position: relative;
        min-height: 100svh;
        opacity: 1;
    }

    .roof-story-scene picture { position: absolute; inset: 0; width: 100%; }
    .roof-story-scene img { transform: none; will-change: auto; }
    .roof-story-steps,
    .roof-story-count { display: none; }
    .roof-mosaic-shot { opacity: 1; transform: none; }
    .roof-finale-copy { opacity: 1; transform: none; }
    .roof-mosaic-shot img { animation: none !important; transform: none; }
}

@media (prefers-contrast: more) {
    .roof-hero-room::after,
    .roof-finale-media::after { background-color: rgba(13, 12, 11, 0.26); }
    .roof-primary { border-color: #fff; }
}