* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #0b0710;
    --bg-soft: #130b17;
    --text: #f7eef5;
    --muted: #c8b8c5;
    --accent: #e9a7c8;
    --accent-soft: #f5cce0;
    --line: rgba(255, 255, 255, 0.14);
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Inter", Arial, sans-serif;
}

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    overflow-x: hidden;
}

body.intro-locked {
    overflow: hidden;
}

button {
    font: inherit;
}

.loader {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    background: var(--bg);
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader__heart {
    font-family: var(--serif);
    font-size: 4rem;
    animation: pulse 1.2s ease-in-out infinite;
}

.loader__text {
    position: absolute;
    margin-top: 6.5rem;
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

.intro-screen {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(178, 79, 132, 0.18), transparent 34%),
        linear-gradient(145deg, #09060d, #160a18 55%, #0b0710);
    transition: opacity 1s ease, visibility 1s ease, transform 1s cubic-bezier(0.7, 0, 0.2, 1);
}

.intro-screen.closed {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-100%);
}

.intro-screen__glow {
    position: absolute;
    width: 45vw;
    height: 45vw;
    min-width: 320px;
    min-height: 320px;
    border-radius: 50%;
    background: rgba(238, 150, 197, 0.08);
    filter: blur(60px);
    animation: floatGlow 7s ease-in-out infinite;
}

@keyframes floatGlow {
    0%, 100% {
        transform: translate(-5%, -3%) scale(1);
    }

    50% {
        transform: translate(5%, 4%) scale(1.08);
    }
}

.intro-screen__content {
    position: relative;
    z-index: 1;
    width: min(680px, 88vw);
    text-align: center;
}

.intro-screen h1 {
    margin-top: 0.7rem;
    font-family: var(--serif);
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 500;
    line-height: 0.8;
    letter-spacing: -0.04em;
}

.intro-screen h1 em {
    color: var(--accent-soft);
    font-weight: 400;
}

.intro-screen__copy {
    max-width: 510px;
    margin: 2.2rem auto 2.4rem;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.9;
}

.eyebrow {
    color: var(--accent);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.button {
    border: 0;
    cursor: pointer;
}

.button--primary {
    padding: 1rem 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.button--primary:hover,
.button--primary:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-3px);
}

.button--primary span {
    margin-left: 0.55rem;
    color: var(--accent-soft);
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.2rem 2rem;
    pointer-events: none;
    mix-blend-mode: screen;
}

.topbar > * {
    pointer-events: auto;
}

.topbar__mark,
.topbar__date,
.music-control {
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.topbar__mark {
    font-family: var(--serif);
    font-size: 1.05rem;
    letter-spacing: 0.12em;
}

.music-control {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

.music-control__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(233, 167, 200, 0.7);
}

.music-control.is-playing .music-control__dot {
    animation: musicPulse 0.8s ease-in-out infinite alternate;
}

.music-control.is-disabled {
    opacity: 0.45;
}

@keyframes musicPulse {
    from {
        transform: scale(0.8);
    }

    to {
        transform: scale(1.5);
    }
}

.progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 120;
    width: 100%;
    height: 2px;
    background: transparent;
}

.progress__bar {
    width: 0;
    height: 100%;
    background: var(--accent-soft);
    box-shadow: 0 0 12px rgba(245, 204, 224, 0.6);
}

.section {
    position: relative;
    min-height: 100vh;
}

.hero {
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    overflow: hidden;
}

.hero__photo {
    position: absolute;
    inset: -3%;
    z-index: -2;
    background:
        linear-gradient(135deg, rgba(50, 24, 45, 0.9), rgba(9, 7, 16, 0.35)),
        url("images/image.jpg") center / cover no-repeat;
    transform: scale(1.04);
    transition: transform 0.2s linear;
    will-change: transform;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(8, 5, 12, 0.96), rgba(8, 5, 12, 0.1) 65%),
        linear-gradient(to right, rgba(8, 5, 12, 0.4), transparent);
}

.hero__content {
    width: min(900px, 90vw);
    margin: 0 auto;
    padding: 0 0 9vh;
}

.hero__title {
    max-width: 820px;
    margin: 1rem 0;
    font-family: var(--serif);
    font-size: clamp(4rem, 9vw, 8.5rem);
    font-weight: 500;
    line-height: 0.82;
    letter-spacing: -0.045em;
}

.hero__title em {
    color: var(--accent-soft);
    font-weight: 400;
}

.hero__caption {
    max-width: 480px;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.8;
}

.scroll-hint {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 3rem;
    color: var(--muted);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.scroll-hint span {
    display: block;
    width: 42px;
    height: 1px;
    background: var(--accent);
}

.chapter--intro {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 70% 45%, rgba(190, 87, 143, 0.11), transparent 30%),
        var(--bg);
}

.chapter__number {
    position: absolute;
    top: 12vh;
    right: 7vw;
    color: rgba(255, 255, 255, 0.06);
    font-family: var(--serif);
    font-size: clamp(8rem, 24vw, 22rem);
    line-height: 0.7;
}

.chapter__content {
    width: min(800px, 86vw);
}

.display {
    margin-top: 0.9rem;
    font-family: var(--serif);
    font-size: clamp(3.4rem, 8vw, 7rem);
    font-weight: 500;
    line-height: 0.88;
    letter-spacing: -0.04em;
}

.body-copy {
    max-width: 600px;
    margin-top: 2rem;
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 2;
}

.date-line {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    color: var(--accent-soft);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
}

.date-line i {
    width: 70px;
    height: 1px;
    background: var(--line);
}

.split-section {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    min-height: 100vh;
    background: var(--bg-soft);
}

.split-section__image {
    min-height: 75vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.split-section__image--01 {
    background-image:
        linear-gradient(to right, transparent, rgba(19, 11, 23, 0.1)),
        url("images/image1.jpg");
}

.split-section__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8vw;
}

.quote {
    max-width: 460px;
    margin-top: 3rem;
    padding-left: 1.4rem;
    border-left: 1px solid var(--accent);
    color: var(--accent-soft);
    font-family: var(--serif);
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.4;
}

.kiss-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110vh;
    overflow: hidden;
    isolation: isolate;
    background: #08060c;
}

.kiss-section__backdrop {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at center, rgba(218, 110, 161, 0.14), transparent 36%),
        #08060c;
}

.kiss-section__content {
    position: relative;
    z-index: 2;
    width: min(700px, 86vw);
    text-align: center;
    pointer-events: none;
}

.display--light {
    color: var(--text);
}

.kiss-section__caption {
    margin-top: 1.2rem;
    color: var(--muted);
    font-size: 0.84rem;
}

.kiss-media {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 1;
    opacity: 0.58;
    pointer-events: none;
}

.kiss-media img {
    width: min(900px, 88vw);
    max-height: 78vh;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 35px 100px rgba(0, 0, 0, 0.5);
}

.letter-section {
    display: grid;
    place-items: center;
    padding: 12vh 0;
    background:
        radial-gradient(circle at 25% 35%, rgba(220, 131, 177, 0.08), transparent 25%),
        var(--bg);
}

.letter {
    width: min(720px, 86vw);
}

.letter__text {
    max-width: 620px;
    margin-top: 2.4rem;
    color: var(--muted);
    font-family: var(--serif);
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    line-height: 1.7;
}

.letter__text p + p {
    margin-top: 1.5rem;
}

.letter__signoff {
    color: var(--text);
    text-align: right;
}

.letter__signoff em {
    color: var(--accent-soft);
    font-size: 1.5em;
}

.timeline-section {
    padding: 12vh 7vw;
    background: var(--bg-soft);
}

.timeline-section__heading {
    width: min(900px, 100%);
    margin: 0 auto 7rem;
}

.timeline {
    position: relative;
    width: min(900px, 100%);
    margin: 0 auto;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 115px;
    width: 1px;
    background: var(--line);
}

.timeline__item {
    display: grid;
    grid-template-columns: 90px 50px 1fr;
    align-items: start;
    min-height: 170px;
}

.timeline__date {
    padding-top: 0.2rem;
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
}

.timeline__dot {
    position: relative;
    width: 10px;
    height: 10px;
    margin: 0.25rem auto 0;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--bg-soft);
    box-shadow: 0 0 0 6px var(--bg-soft);
}

.timeline__card h3 {
    font-family: var(--serif);
    font-size: 1.8rem;
    font-weight: 500;
}

.timeline__card p {
    margin-top: 0.5rem;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.7;
}

.gallery-section {
    padding: 12vh 7vw;
    background: var(--bg);
}

.gallery-section__heading {
    width: min(900px, 100%);
    margin: 0 auto 4rem;
}

.gallery {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    gap: 1.2rem;
    width: min(1100px, 100%);
    margin: 0 auto;
}

.gallery__item {
    position: relative;
    overflow: hidden;
}

.gallery__item--large {
    grid-row: span 2;
}

.gallery__item--small {
    min-height: 300px;
}

.gallery__image {
    min-height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0, 1);
}

.gallery__item:hover .gallery__image {
    transform: scale(1.045);
}

.gallery__image--03 {
    background-image: url("images/image3.jpg");
}

.gallery__image--04 {
    background-image: url("images/image4.jpg");
}

.gallery__image--05 {
    background-image: url("images/image5.jpg");
}

.gallery figcaption {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    color: var(--text);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.month-section {
    display: grid;
    place-items: center;
    text-align: center;
    background:
        radial-gradient(circle at center, rgba(227, 132, 181, 0.13), transparent 30%),
        var(--bg-soft);
}

.month-section__content {
    width: min(700px, 88vw);
}

.month-number {
    margin: 1.2rem 0 0;
    color: var(--accent-soft);
    font-family: var(--serif);
    font-size: clamp(9rem, 24vw, 20rem);
    font-weight: 400;
    line-height: 0.75;
}

.month-section .body-copy {
    margin: 1.8rem auto 0;
}

.surprise-section {
    display: grid;
    place-items: center;
    min-height: 80vh;
    padding: 8vh 0;
    background: var(--bg);
}

.surprise-card {
    position: relative;
    width: min(620px, 86vw);
    padding: 5rem 3rem;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.025);
    text-align: center;
}

.surprise-card h2 {
    margin-top: 0.7rem;
    font-family: var(--serif);
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 500;
}

.surprise-card p:not(.eyebrow) {
    margin: 1.2rem auto 0;
    max-width: 450px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.9;
}

.surprise-card__sparkle {
    position: absolute;
    top: 1.2rem;
    right: 1.4rem;
    color: var(--accent);
}

.surprise-card__heart {
    margin-top: 2rem;
    color: var(--accent-soft);
    font-family: var(--serif);
    font-size: 3rem;
}

.final-section {
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    overflow: hidden;
}

.final-section__photo {
    position: absolute;
    inset: -4%;
    z-index: -2;
    background:
        linear-gradient(135deg, rgba(41, 18, 38, 0.75), rgba(7, 5, 10, 0.3)),
        url("images/image6.jpg") center / cover no-repeat;
    transform: scale(1.04);
    will-change: transform;
}

.final-section__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(7, 5, 10, 0.96), rgba(7, 5, 10, 0.08) 75%),
        linear-gradient(to right, rgba(7, 5, 10, 0.45), transparent);
}

.final-section__content {
    width: min(900px, 88vw);
    margin: 0 auto;
    padding: 0 0 9vh;
}

.final-section__caption {
    max-width: 500px;
    margin-top: 1.3rem;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.8;
}

.easter-egg {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 2.2rem;
    padding: 0.72rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--accent-soft);
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
}
.easter-egg:hover, .easter-egg:focus-visible { background: rgba(255,255,255,0.12); transform: translateY(-3px); }
.easter-egg__icon { font-size: 0.9rem; }
.easter-egg__label { color: var(--muted); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; }
.easter-modal { position: fixed; inset: 0; z-index: 280; display: grid; place-items: center; padding: 1.2rem; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .4s ease, visibility .4s ease; }
.easter-modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.easter-modal__backdrop { position:absolute; inset:0; background:rgba(5,3,8,.78); backdrop-filter:blur(12px); }
.easter-modal__window { position:relative; width:min(600px,92vw); max-height:90vh; overflow:auto; padding:clamp(2rem,6vw,4rem); border:1px solid rgba(255,255,255,.14); border-radius:28px; background:radial-gradient(circle at 50% 0%,rgba(221,128,177,.12),transparent 42%),#120b16; text-align:center; box-shadow:0 30px 100px rgba(0,0,0,.55); transform:translateY(18px) scale(.97); transition:transform .45s cubic-bezier(.2,.7,0,1); }
.easter-modal.is-open .easter-modal__window { transform:translateY(0) scale(1); }
.easter-modal__close { position:absolute; top:.9rem; right:1rem; width:36px; height:36px; border:0; background:transparent; color:var(--muted); font-size:1.7rem; cursor:pointer; }
.easter-modal__window h2 { margin-top:.8rem; font-family:var(--serif); font-size:clamp(2.7rem,7vw,4.8rem); font-weight:500; line-height:.9; }
.easter-modal__window h2 em { color:var(--accent-soft); font-weight:400; }
.easter-modal__text { max-width:430px; margin:1.3rem auto 0; color:var(--muted); font-size:.85rem; line-height:1.8; }
.touchwood-box { margin-top:2rem; padding-top:1.7rem; border-top:1px solid var(--line); }
.touchwood-box__text { color:var(--text); font-family:var(--serif); font-size:1.25rem; line-height:1.35; }
.wood { position:relative; display:block; width:min(310px,72vw); height:105px; margin:1.5rem auto .7rem; overflow:hidden; border:0; border-radius:15px; background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 25%),linear-gradient(90deg,#5d321d,#8b512e 38%,#6e3d22 65%,#4d2818); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -12px 20px rgba(0,0,0,.2),0 16px 35px rgba(0,0,0,.35); cursor:pointer; transform:rotate(-1deg); transition:transform .2s ease,opacity .45s ease,filter .45s ease; }
.wood:active { transform:rotate(-1deg) scale(.97); }
.wood.is-tapped { animation:woodTap .25s ease; }
.wood.is-gone { opacity:0; filter:blur(8px); transform:translateY(20px) scale(.92); pointer-events:none; }
@keyframes woodTap { 0%,100%{transform:rotate(-1deg) translateX(0)} 35%{transform:rotate(-1deg) translateX(-5px)} 70%{transform:rotate(-1deg) translateX(5px)} }
.wood__grain { position:absolute; height:2px; border-radius:50%; background:rgba(40,18,9,.28); transform:rotate(-4deg); }
.wood__grain--one { width:80%; top:27%; left:8%; }
.wood__grain--two { width:58%; top:62%; left:24%; transform:rotate(3deg); }
.wood__grain--three { width:35%; top:43%; left:5%; }
.wood__ring { position:absolute; right:16%; top:23%; width:44px; height:58px; border:2px solid rgba(48,22,11,.26); border-radius:50%; transform:rotate(12deg); }
.wood__hint { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,235,213,.82); font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; text-shadow:0 1px 2px rgba(0,0,0,.45); }
.wood-counter { color:var(--accent); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; }

.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 2rem;
    background: #07050a;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.2, 0.7, 0, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 800px) {
    .topbar {
        padding: 1rem;
    }

    .topbar__date {
        display: none;
    }

    .hero__content,
    .final-section__content {
        padding-bottom: 7vh;
    }

    .hero__title {
        font-size: clamp(3.5rem, 17vw, 6rem);
    }

    .split-section {
        grid-template-columns: 1fr;
    }

    .split-section__image {
        min-height: 62vh;
    }

    .split-section__content {
        min-height: 60vh;
        padding: 12vh 9vw;
    }

    .kiss-section {
        min-height: 95vh;
    }

    .kiss-media img {
        width: 94vw;
    }

    .timeline-section,
    .gallery-section {
        padding-right: 8vw;
        padding-left: 8vw;
    }

    .timeline-section__heading {
        margin-bottom: 4rem;
    }

    .timeline::before {
        left: 73px;
    }

    .timeline__item {
        grid-template-columns: 55px 35px 1fr;
        min-height: 155px;
    }

    .timeline__card h3 {
        font-size: 1.55rem;
    }

    .gallery {
        grid-template-columns: 1fr;
    }

    .gallery__item--large {
        min-height: 70vh;
        grid-row: auto;
    }

    .gallery__item--small {
        min-height: 55vh;
    }

    .surprise-card {
        padding: 4rem 1.6rem;
    }

    .footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* V2.2 mobile photo treatment */
@media (max-width: 800px) {
    .hero, .final-section { min-height:100svh; }
    .hero__photo, .final-section__photo { inset:0; background-size:contain; background-position:center; background-repeat:no-repeat; background-color:#0b0710; transform:none !important; }
    .hero__photo::before, .final-section__photo::before { content:""; position:absolute; inset:-8%; z-index:-1; background:inherit; background-size:cover; background-position:center; filter:blur(24px); opacity:.42; transform:scale(1.06); }
    .hero__content, .final-section__content { position:relative; z-index:3; }
    .split-section__image, .gallery__image { background-size:contain; background-position:center; background-repeat:no-repeat; background-color:#130b17; }
    .gallery__item--large { min-height:68svh; }
    .gallery__item--small { min-height:52svh; }
    .kiss-section { min-height:100svh; }
    .kiss-media { padding:5vh 3vw; }
    .kiss-media img { width:96vw; max-height:66svh; object-fit:contain; }
    .easter-modal { padding:.7rem; }
    .easter-modal__window { width:94vw; max-height:88svh; padding:2.6rem 1.2rem 2rem; border-radius:23px; }
    .easter-modal__window h2 { font-size:clamp(2.45rem,12vw,4rem); }
    .wood { width:min(300px,78vw); height:94px; }
}

/*
 * V2.3 responsive photo system
 * Desktop: cinematic cover.
 * Tablet + phone: contain the original photo so subjects are not cut off.
 * A blurred background fills the remaining space without stretching the photo.
 */
@media (min-width: 801px) and (max-width: 1180px) {
    .hero__photo,
    .final-section__photo,
    .split-section__image,
    .gallery__image {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #0b0710;
    }

    .hero__photo,
    .final-section__photo {
        transform: none !important;
    }

    .hero__photo::before,
    .final-section__photo::before {
        content: "";
        position: absolute;
        inset: -8%;
        z-index: -1;
        background: inherit;
        background-size: cover;
        background-position: center;
        filter: blur(26px);
        opacity: 0.38;
        transform: scale(1.06);
    }

    .hero,
    .final-section {
        min-height: 100svh;
    }

    .split-section__image {
        min-height: 70svh;
    }
}

@media (max-width: 800px) {
    .hero__photo,
    .final-section__photo {
        background-size: contain !important;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #0b0710;
        transform: none !important;
    }

    .split-section__image {
        min-height: 58svh;
        background-size: contain !important;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #130b17;
    }

    .gallery__image {
        background-size: contain !important;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #0b0710;
    }

    .hero__content,
    .final-section__content {
        padding-bottom: max(6vh, 2.5rem);
    }

    .letter__text {
        font-size: 1.18rem;
        line-height: 1.65;
    }

    .easter-modal__window {
        padding-top: 3rem;
    }
}

@media (max-width: 430px) {
    .hero__content,
    .final-section__content {
        width: 88vw;
    }

    .hero__title {
        font-size: clamp(3.15rem, 16vw, 4.8rem);
    }

    .display {
        font-size: clamp(3rem, 15vw, 4.2rem);
    }

    .split-section__image {
        min-height: 50svh;
    }

    .gallery__item--large {
        min-height: 58svh;
    }

    .gallery__item--small {
        min-height: 45svh;
    }

    .kiss-media img {
        width: 94vw;
        max-height: 60svh;
    }

    .easter-modal__window h2 {
        font-size: clamp(2.3rem, 11vw, 3.5rem);
    }

    .touchwood-box__text {
        font-size: 1.05rem;
    }
}

/* V2.4 opening photo visibility */
.hero__photo {
    filter: none;
    opacity: 1;
}

@media (max-width: 800px) {
    .hero__photo::before {
        opacity: 0.28;
        filter: blur(22px);
    }

    .hero__overlay {
        background:
            linear-gradient(to top, rgba(8, 5, 12, 0.88), rgba(8, 5, 12, 0.04) 66%),
            linear-gradient(to right, rgba(8, 5, 12, 0.12), transparent);
    }
}

/* V2.5 — stronger opening photo */
.hero__photo {
    background-image:
        linear-gradient(135deg, rgba(50, 24, 45, 0.16), rgba(9, 7, 16, 0.02)),
        url("images/image.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    filter: none;
}

.hero__overlay {
    background:
        linear-gradient(to top, rgba(8, 5, 12, 0.78), rgba(8, 5, 12, 0.02) 64%),
        linear-gradient(to right, rgba(8, 5, 12, 0.10), transparent);
}

@media (max-width: 800px) {
    .hero__photo {
        background-image:
            linear-gradient(135deg, rgba(50, 24, 45, 0.10), rgba(9, 7, 16, 0)),
            url("images/image.jpg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #0b0710;
    }

    .hero__overlay {
        background:
            linear-gradient(to top, rgba(8, 5, 12, 0.78), rgba(8, 5, 12, 0.01) 65%),
            linear-gradient(to right, rgba(8, 5, 12, 0.08), transparent);
    }
}