/* =========================================================
   Utkarsh & Shristi — the invitation (index.html) and the
   venues and RSVP pages.
   Written for phones first; wider screens only get more air.
   Palette from the monogram (petrol teal + aqua) with a gold
   accent that echoes the ring.
   ========================================================= */

:root {
    --teal-900: #04222e;
    --teal-800: #063040;
    --teal-700: #0b5d75;
    --teal-300: #8fbec6;
    --aqua-100: #cbf3f5;
    --aqua-50: #eef8f9;
    --paper: #fbfdfd;
    --white: #ffffff;
    --gold: #c9a46a;
    --gold-ink: #8a6a35;
    --danger: #a3283a;

    --ink: #06303d;
    --ink-soft: rgba(6, 48, 61, 0.72);
    --hair: rgba(11, 93, 117, 0.16);
    --hair-strong: rgba(11, 93, 117, 0.34);

    --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
    --sans: "Josefin Sans", "Avenir Next", system-ui, sans-serif;

    --gutter: 16px;
    --radius: 14px;
    --topbar-h: 60px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* keep focused fields and scrolled-to elements clear of the top bar */
    scroll-padding-top: calc(var(--topbar-h) + 16px);
}
/* The landing page is the invitation alone: no top bar, and with JS no scroll
   either. The book fills the screen and its pages turn sideways (js/flipbook.js). */
html.book {
    scroll-padding: 0;
}
html.book.js,
html.book.js body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    /* Cormorant's default old-style figures make "11:00" read as "II:oo" */
    font-variant-numeric: lining-nums;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}
a {
    color: inherit;
}
button,
input,
textarea {
    font: inherit;
    color: inherit;
}
address {
    font-style: normal;
}
ol,
ul {
    padding: 0;
    list-style: none;
}
[hidden] {
    display: none !important;
}

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

.skip-link {
    position: absolute;
    left: var(--gutter);
    top: -100px;
    z-index: 50;
    background: var(--white);
    padding: 10px 14px;
    border-radius: 8px;
}
.skip-link:focus {
    top: 12px;
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 48px;
    padding: 0.8em 1.5em 0.65em; /* Josefin sits low; nudge it up */
    border: 1.5px solid var(--teal-700);
    border-radius: 999px;
    background: var(--teal-700);
    color: var(--white);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 160ms var(--ease),
        transform 120ms var(--ease);
}
.btn:active {
    transform: scale(0.97);
}
.btn:disabled {
    opacity: 0.6;
    cursor: progress;
}
.btn--ghost {
    background: transparent;
    color: var(--teal-700);
}
.btn--small {
    min-height: 44px;
    padding: 0.7em 1.1em 0.55em;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
}
.btn--block {
    width: 100%;
}

/* ---------- top bar: monogram, tab bar and music switch, in one row ----------
   Sticks to the top: the monogram (back to the invitation) at the left,
   the tabs centred, the record at the right. */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(4, 34, 46, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(201, 164, 106, 0.28);
    color: var(--white);
}

.topbar__home {
    display: grid;
    place-items: center;
    justify-self: start;
    padding: 0 var(--gutter);
}
.topbar__mark {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(203, 243, 245, 0.12);
}

/* the music switch: a record with the monogram as its label, spinning
   while the music plays. Stopped (off, or waiting for a tap), it stands
   still and its spindle becomes a play triangle. js/music.js toggles
   .is-off and aria-pressed. */
.player {
    display: grid;
    place-items: center;
    justify-self: end;
    padding: 0 var(--gutter);
    border: 0;
    background: none;
    cursor: pointer;
}
/* music needs JS; without it there's nothing to switch */
html:not(.js) .player {
    visibility: hidden;
}
.player__disc {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* grooves, and a sheen that shows the turn */
    background:
        conic-gradient(
            from 30deg,
            transparent 0 12%,
            rgba(255, 255, 255, 0.16) 18%,
            transparent 26% 62%,
            rgba(255, 255, 255, 0.1) 68%,
            transparent 76%
        ),
        repeating-radial-gradient(circle, #111 0 1.2px, #1d1d1d 1.2px 2.4px);
    box-shadow:
        0 0 0 1.5px rgba(201, 164, 106, 0.55),
        0 2px 8px rgba(0, 0, 0, 0.35);
    animation: spin 3.2s linear infinite;
}
.player__disc img {
    width: 44%;
    height: 44%;
    border-radius: 50%;
}
/* spindle hole */
.player__disc::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--teal-900);
}
.player.is-off .player__disc {
    animation-play-state: paused;
}
.player.is-off .player__disc::after {
    width: 9px;
    height: 10px;
    margin-left: 2px;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}
@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}

/* ---------- tab bar ---------- */
/* small icon over its label on phones, text only from 720px */
.tabbar {
    display: grid;
    grid-template-columns: repeat(3, auto);
}
.tabbar__link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.62);
}
.tabbar__link svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tabbar__link[aria-current="page"] {
    color: var(--gold);
}
.tabbar__link[aria-current="page"] svg {
    stroke-width: 2.1;
}

/* ---------- sections ---------- */
.section {
    padding: 48px var(--gutter) 56px;
    scroll-margin-top: 0;
}
.section > * {
    max-width: 640px;
    margin-inline: auto;
}
.section--tint {
    background: var(--aqua-50);
}
[tabindex="-1"]:focus {
    outline: none;
} /* jump targets focused by js/site.js */

/* "next section" link at the foot of a section */
.next {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 48px;
    margin-top: 32px;
    border-top: 1px solid var(--hair);
    padding-top: 18px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--teal-700);
}
.next span {
    font-size: 1.2em;
    transition: transform 200ms var(--ease);
}
.next:hover span,
.next:active span {
    transform: translateX(3px);
}

.section__head {
    margin-bottom: 28px;
}
.section__title {
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(2.2rem, 9vw, 3rem);
    line-height: 1.05;
    color: var(--teal-900);
}
.section__lede {
    margin-top: 10px;
    color: var(--ink-soft);
}
.section__lede strong {
    font-weight: 600;
    color: var(--ink);
}

/* ---------- program: flip-book invitation ----------
   The whole landing page: the book, one screen tall, and nothing to
   scroll. js/flipbook.js turns its pages with swipes, taps, the arrows
   and the arrow keys. The stops only hold each page's still for screen
   readers. Without JS the pin is hidden and the stops show each page's
   last frame, one under another (the one case where the page scrolls). */
.program {
    position: relative;
    isolation: isolate;
    overflow-x: clip; /* leaves swing outside the book */
}

.flip {
    --pin-h: 100svh;
    position: relative;
}
@supports not (height: 100svh) {
    .flip {
        --pin-h: 100vh;
    }
}

.flip__pin {
    position: sticky;
    top: 0;
    z-index: 1;
    height: var(--pin-h);
    margin-bottom: calc(-1 * var(--pin-h));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: 12px;
}
html:not(.js) .flip__pin {
    display: none;
}

.js .flip__pin {
    margin-bottom: 0;
}
.js .flip__stops {
    /* moved into the book; the stills stay for screen readers */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.js .flip__still {
    /* kept for screen readers; the book shows the page */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
html:not(.js) .flip {
    padding: 24px var(--gutter) 4px;
}
html:not(.js) .flip__stop {
    position: relative;
    max-width: 360px;
    margin: 0 auto 20px;
}
html:not(.js) .flip__still {
    border-radius: 4px;
    box-shadow: 0 18px 40px -18px rgba(4, 34, 46, 0.6);
}

/* the book: one portrait page, as tall as the screen allows. It's a size
   container: --u is one pixel of a 390px-wide book, so the controls on it
   keep their proportions from a landscape phone (~200px) up to a desktop. */
.flip__book {
    --u: clamp(0.8px, 100cqw / 390, 1.15px);
    position: relative;
    flex: none;
    width: min(100%, calc((var(--pin-h) - 24px) * 9 / 16));
    aspect-ratio: 9 / 16;
    container-type: inline-size;
    perspective: 2400px;
    font-family: var(--display);
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pinch-zoom; /* horizontal swipes turn the page; zoom still works */
}
.flip__book.is-dragging {
    cursor: grabbing;
}
.flip__book img {
    -webkit-user-drag: none;
}
.flip__book::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 3px;
    box-shadow:
        0 18px 50px rgba(4, 34, 46, 0.45),
        0 2px 8px rgba(4, 34, 46, 0.3);
    pointer-events: none;
}

.leaf {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform-style: preserve-3d;
    will-change: transform;
}
.leaf__face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 3px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.leaf__front video,
.leaf__end {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}
.leaf__front video {
    background: #e9dcbf;
}
.leaf__back {
    transform: rotateY(180deg);
    background: linear-gradient(90deg, #d9c8a4, #efe3c8 40%, #e9dcbf);
}
/* shadow on the page being uncovered, and a sheen on the turning one */
.leaf__shade,
.leaf__gloss {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}
.leaf__shade {
    background: linear-gradient(90deg, rgba(8, 14, 10, 0.55), rgba(8, 14, 10, 0) 70%);
}
.leaf__gloss {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0.22) 90%,
        rgba(255, 255, 255, 0)
    );
}

/* tappable areas, placed in the page's 1080×1920 pixel space */
.hot {
    position: absolute;
    z-index: 1;
    left: calc(var(--x) / 1080 * 100%);
    top: calc(var(--y) / 1920 * 100%);
    width: calc(var(--w) / 1080 * 100%);
    height: calc(var(--h) / 1920 * 100%);
    border-radius: 14px;
}
.hot.is-pulsing {
    animation: ring 1.6s ease-out 2 0.3s;
}
@keyframes ring {
    0% {
        box-shadow: 0 0 0 0 rgba(201, 164, 106, 0.75);
    }
    100% {
        box-shadow: 0 0 0 18px rgba(201, 164, 106, 0);
    }
}

/* an HTML page in the book (the last one): text set on the empty arch of
   the invitation's art, in its greens and golds. Sizes are in cqw, so they
   scale with the book. Inside the book its lines rise in one after another
   (.is-playing), or show at once (.is-done) when you come back to it. */
.flip__page {
    --leaf-green: #173f2b;
    --leaf-gold: #a8843f;
    position: relative;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    container-type: inline-size;
    background: #f3e3c8;
    color: #2c2a20;
    font-family: var(--display);
    text-align: center;
}
.leaf .flip__page {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}
html:not(.js) .flip__page {
    border-radius: 4px;
    box-shadow: 0 18px 40px -18px rgba(4, 34, 46, 0.6);
}
.page__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page__body {
    position: absolute;
    inset: 14% 14% 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.4cqw;
}
.page__sprig {
    width: 13cqw;
    fill: none;
    stroke: var(--leaf-green);
    stroke-width: 1.6;
    stroke-linejoin: round;
}
/* gold rule with a dot in the middle */
.page__rule {
    display: flex;
    align-items: center;
    gap: 5cqw;
    width: 62cqw;
    height: 3cqw;
    color: var(--leaf-gold);
    background: radial-gradient(circle, currentColor 0.8cqw, transparent 0.9cqw) center / 3cqw 3cqw no-repeat;
}
.page__rule::before,
.page__rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
}
.page__rule--short {
    width: 34cqw;
}
.page__title {
    font-size: 10cqw;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--leaf-green);
}
.page__line {
    font-size: 4.6cqw;
    font-weight: 500;
    line-height: 1.3;
}
.page__contact {
    display: block;
    font-size: 4.9cqw;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    color: var(--leaf-green);
}
.page__contact span {
    display: block;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #2c2a20;
    text-decoration: underline dotted var(--leaf-gold);
    text-underline-offset: 0.5cqw;
}
.page__links {
    display: flex;
    gap: 3cqw;
    margin-top: 1cqw;
}
.page__btn {
    min-width: 30cqw;
    padding: 2.6cqw 4cqw 2.2cqw;
    border: 0.5cqw solid var(--leaf-gold);
    border-radius: 999px;
    background: var(--leaf-green);
    color: #f6ead2;
    font-size: 4.4cqw;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1;
    text-decoration: none;
}

.js .leaf .page__body > * {
    opacity: 0;
}
.js .leaf .is-done .page__body > * {
    opacity: 1;
}
.js .leaf .is-playing .page__body > * {
    animation: page-rise 700ms var(--ease) calc(250ms + var(--i, 0) * 160ms) both;
}
/* the buttons ring once the page has finished, like the tappable parts of the video pages */
.js .leaf .is-playing .page__btn {
    animation: ring 1.6s ease-out calc(450ms + var(--i, 0) * 160ms) 2;
}
@keyframes page-rise {
    from {
        opacity: 0;
        transform: translateY(3cqw);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* shown when the browser won't autoplay (e.g. iOS Low Power Mode) */
.flip__tap {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1000;
    transform: translate(-50%, -50%);
    display: flex;
    gap: calc(10 * var(--u));
    align-items: center;
    padding: calc(14 * var(--u)) calc(26 * var(--u));
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: rgba(4, 34, 46, 0.85);
    color: var(--white);
    font: 500 calc(21.6 * var(--u))/1 var(--display);
    white-space: nowrap;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.flip__hint {
    position: absolute;
    left: 50%;
    bottom: calc(60 * var(--u));
    z-index: 900; /* above the dock */
    transform: translateX(-50%);
    padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u));
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: rgba(4, 34, 46, 0.85);
    color: var(--white);
    font-size: calc(16.8 * var(--u));
    font-style: italic;
    letter-spacing: 0.04em;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 600ms var(--ease);
}
.flip__hint.is-gone {
    opacity: 0;
}

/* controls on the book: arrows at the middle of each edge, and the page
   dots with the music switch in a pill at the bottom. They sit above the
   leaves, so they stay put while pages turn. Dark glass reads on both the
   light and the night-time pages. Sizes are in --u, so they scale with the
   book; where the screen has room beside the book the arrows move out
   there, off the art (see the end of this block). */
.flip__arrow,
.flip__dock {
    position: absolute;
    z-index: 950;
    background: rgba(4, 34, 46, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #f6ead2;
}
.flip__arrow {
    top: 50%;
    --size: calc(40 * var(--u));
    display: grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    padding: 0;
    margin-top: calc(var(--size) / -2);
    border: 1px solid rgba(201, 164, 106, 0.6);
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 250ms var(--ease);
}
.flip__arrow--prev {
    left: calc(8 * var(--u));
}
.flip__arrow--next {
    right: calc(8 * var(--u));
}
.flip__arrow:disabled {
    opacity: 0;
    pointer-events: none;
}
.flip__arrow svg {
    width: 50%;
    height: 50%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.flip__dock {
    left: 50%;
    bottom: calc(12 * var(--u));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: calc(10 * var(--u));
    padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) calc(14 * var(--u));
    border-radius: 999px;
    cursor: default;
}
.flip__music {
    display: grid;
    place-items: center;
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(246, 234, 210, 0.14);
    color: inherit;
    cursor: pointer;
}
/* the music switch's note on the book; struck through while it's off
   or still waiting for a tap (js/music.js) */
.flip__music svg {
    width: 50%;
    height: 50%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.flip__music svg circle {
    fill: currentColor;
    stroke: none;
}
.music__slash {
    display: none;
}
.flip__music.is-off {
    opacity: 0.7;
}
.flip__music.is-off .music__slash {
    display: block;
}
/* page dots: each is a button as tall as the pill, so it's easy to hit;
   the dot itself is drawn by ::before */
.flip__dots {
    display: flex;
    margin-left: calc(-6 * var(--u));
}
.flip__dots button {
    display: grid;
    place-items: center;
    height: calc(32 * var(--u));
    padding: 0 calc(5 * var(--u));
    border: 0;
    background: none;
    cursor: pointer;
}
.flip__dots button::before {
    content: "";
    display: block;
    width: calc(6 * var(--u));
    height: calc(6 * var(--u));
    border-radius: calc(3 * var(--u));
    background: var(--gold);
    opacity: 0.5;
    transition:
        width 250ms var(--ease),
        opacity 250ms var(--ease);
}
.flip__dots button:hover::before {
    opacity: 0.85;
}
.flip__dots button.is-on::before {
    width: calc(16 * var(--u));
    opacity: 1;
}
.flip__dots button:focus-visible {
    outline-offset: -2px;
    border-radius: calc(8 * var(--u));
}

/* Room beside the book (it's about 9/16 of the screen's height wide), so the
   arrows sit outside it at full size. The min-heights keep short, narrow
   windows, where the sums don't work out, on the arrows over the page. */
@media (min-aspect-ratio: 3/4) and (min-height: 600px),
    (min-aspect-ratio: 4/5) and (min-height: 500px),
    (min-aspect-ratio: 1/1) {
    .flip__arrow {
        --size: 44px;
    }
    .flip__arrow--prev {
        left: calc(-1 * (var(--size) + 16px));
    }
    .flip__arrow--next {
        right: calc(-1 * (var(--size) + 16px));
    }
}

/* call sheet: a bottom sheet on phones, centred from 720px */
.sheet {
    width: min(440px, 100%);
    max-width: 100%;
    margin: auto auto 0;
    padding: 22px 24px calc(24px + var(--safe-b));
    border: 0;
    border-radius: 18px 18px 0 0;
    background: var(--paper);
    color: var(--ink);
    text-align: center;
}
.sheet[open] {
    display: grid;
    gap: 14px;
}
.sheet::backdrop {
    background: rgba(4, 34, 46, 0.5);
}
.sheet__title {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.7rem;
    line-height: 1.15;
    color: var(--teal-900);
}
.sheet__num {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.9rem;
    letter-spacing: 0.06em;
}
.sheet__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.sheet__close {
    justify-self: center;
    padding: 8px 12px;
    border: 0;
    background: none;
    font-family: var(--display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--ink-soft);
    cursor: pointer;
}

/* ---------- program backgrounds ----------
   Each layer is position:fixed, so it stays put behind the book while
   you scroll, and the clip-path on .program__bg keeps it inside the
   program (this also works on iOS, unlike background-attachment:fixed).
   Layers crossfade on opacity because background-image can't animate. */
.program__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    clip-path: inset(0);
    pointer-events: none;
}
.bg {
    position: fixed;
    inset: 0;
    opacity: 0;
    transition: opacity 800ms var(--ease);
}
.program[data-theme="cover"] .bg--cover,
.program[data-theme="blessings"] .bg--blessings,
.program[data-theme="invitation"] .bg--invitation,
.program[data-theme="social"] .bg--social,
.program[data-theme="rsvp"] .bg--rsvp,
.program[data-theme="haldi"] .bg--haldi,
.program[data-theme="mehendi"] .bg--mehendi,
.program[data-theme="sangeet"] .bg--sangeet,
.program[data-theme="baraat"] .bg--baraat,
.program[data-theme="wedding"] .bg--wedding,
.program[data-theme="reception"] .bg--reception {
    opacity: 1;
}

/* Cover — rose petals and jasmine on a sunset blush */
.bg--cover {
    background:
        radial-gradient(circle, rgba(242, 201, 76, 0.7) 1.3px, rgba(255, 255, 255, 0.95) 1.8px 3.6px, transparent 4.2px)
            17px 17px / 34px 34px,
        radial-gradient(ellipse 4.5px 2.6px, rgba(214, 104, 124, 0.32) 95%, transparent) 0 0 / 34px 34px,
        radial-gradient(ellipse 2.6px 4.5px, rgba(214, 104, 124, 0.22) 95%, transparent) 8px 25px / 34px 34px,
        #fbe9dc;
}

/* Blessings — a gold lattice with a bead at every crossing, on parchment */
.bg--blessings {
    background:
        radial-gradient(circle, rgba(168, 132, 63, 0.38) 1.8px, transparent 2.3px) 0 0 / 31.1px 31.1px,
        repeating-linear-gradient(45deg, rgba(168, 132, 63, 0.13) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(-45deg, rgba(168, 132, 63, 0.13) 0 1px, transparent 1px 22px),
        #f6ecd8;
}

/* Invitation — a green jaal of overlapping rings, jasmine at the centres */
.bg--invitation {
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.95) 2.2px, transparent 2.8px) 0 0 / 30px 30px,
        radial-gradient(circle, transparent 14px, rgba(36, 84, 58, 0.15) 15px 16px, transparent 17px) 0 0 / 30px 30px,
        radial-gradient(circle, transparent 14px, rgba(201, 164, 106, 0.22) 15px 16px, transparent 17px) 15px 15px /
            30px 30px,
        #edf2e3;
}

/* Let's get social — confetti */
.bg--social {
    background:
        radial-gradient(circle, rgba(214, 104, 124, 0.45) 2.4px, transparent 3px) 6px 9px / 44px 44px,
        radial-gradient(circle, rgba(201, 164, 106, 0.55) 1.8px, transparent 2.3px) 27px 16px / 44px 44px,
        radial-gradient(circle, rgba(36, 84, 58, 0.38) 2px, transparent 2.6px) 15px 33px / 44px 44px,
        radial-gradient(circle, rgba(11, 93, 117, 0.3) 1.5px, transparent 2px) 36px 38px / 44px 44px,
        #f6f1e4;
}

/* Are you coming? — green pinstripes with gold buds, like good stationery */
.bg--rsvp {
    background:
        radial-gradient(ellipse 2.4px 3.6px, rgba(201, 164, 106, 0.6) 95%, transparent) 14px 10px / 28px 40px,
        radial-gradient(ellipse 2.4px 3.6px, rgba(201, 164, 106, 0.6) 95%, transparent) 0 30px / 28px 40px,
        linear-gradient(90deg, rgba(23, 63, 43, 0.08) 1px, transparent 1px) 0 0 / 28px 100%,
        #f5efe0;
}

/* Haldi — marigold dots on turmeric cream */
.bg--haldi {
    background:
        radial-gradient(circle, rgba(232, 163, 61, 0.42) 3px, transparent 3.5px) 0 0 / 26px 26px,
        radial-gradient(circle, rgba(242, 193, 78, 0.5) 1.6px, transparent 2px) 13px 13px / 26px 26px,
        #fdf2d2;
}

/* Mehendi — leafy scallops in henna greens */
.bg--mehendi {
    background:
        radial-gradient(circle at 50% 0, transparent 10px, rgba(15, 76, 58, 0.14) 11px, transparent 12.5px) 0 0 / 24px
            14px,
        radial-gradient(circle at 50% 0, transparent 10px, rgba(122, 139, 111, 0.14) 11px, transparent 12.5px) 12px
            7px / 24px 14px,
        #e7f0e1;
}

/* Sangeet — jewel-tone zigzag, like a beat */
.bg--sangeet {
    background:
        linear-gradient(135deg, rgba(74, 14, 30, 0.09) 25%, transparent 25%) -12px 0 / 24px 24px,
        linear-gradient(225deg, rgba(74, 14, 30, 0.09) 25%, transparent 25%) -12px 0 / 24px 24px,
        linear-gradient(315deg, rgba(11, 93, 117, 0.08) 25%, transparent 25%) 0 0 / 24px 24px,
        linear-gradient(45deg, rgba(11, 93, 117, 0.08) 25%, transparent 25%) 0 0 / 24px 24px,
        #f3e6ee;
}

/* Baraat — saffron diamonds, festive and loud */
.bg--baraat {
    background:
        conic-gradient(
                from 45deg,
                rgba(232, 120, 61, 0.13) 25%,
                transparent 0 50%,
                rgba(232, 120, 61, 0.13) 0 75%,
                transparent 0
            )
            0 0 / 30px 30px,
        #fdebdc;
}

/* Wedding — interlocking rings in sindoor red and gold */
.bg--wedding {
    background:
        radial-gradient(
                circle,
                transparent 9px,
                rgba(155, 27, 48, 0.14) 10px,
                rgba(155, 27, 48, 0.14) 11px,
                transparent 12px
            )
            0 0 / 28px 28px,
        radial-gradient(
                circle,
                transparent 9px,
                rgba(201, 164, 106, 0.3) 10px,
                rgba(201, 164, 106, 0.3) 11px,
                transparent 12px
            )
            14px 14px / 28px 28px,
        #f9e5e2;
}

/* Reception — fine teal grid, formal and quiet */
.bg--reception {
    background:
        linear-gradient(rgba(4, 34, 46, 0.07) 1px, transparent 1px) 0 0 / 20px 20px,
        linear-gradient(90deg, rgba(4, 34, 46, 0.07) 1px, transparent 1px) 0 0 / 20px 20px,
        #e3eef0;
}

/* ---------- hotels ---------- */
.hotels {
    display: grid;
    gap: 14px;
}
.hotel {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 14px;
    padding: 14px;
    background: var(--white);
    border: 1px solid var(--hair);
    border-radius: var(--radius);
}
.hotel__img {
    width: 96px;
    height: 96px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--aqua-100);
}
.hotel__name {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.45rem;
    line-height: 1.1;
    color: var(--teal-900);
}
.hotel__subtitle {
    font-family: var(--display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--teal-700);
}
.hotel__addr {
    margin-top: 4px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ink-soft);
}
.hotel__actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ---------- form ---------- */
.form {
    display: grid;
    gap: 22px;
}
.field {
    display: grid;
    gap: 8px;
    border: 0;
    padding: 0;
    min-width: 0;
}
.field__label {
    padding: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--teal-900);
}
.field__opt {
    font-weight: 400;
    color: var(--ink-soft);
    font-size: 0.85em;
}
.field__input {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px 11px;
    border: 1.5px solid var(--hair-strong);
    border-radius: 12px;
    background: var(--white);
    font-size: 17px; /* ≥16px stops iOS zooming in on focus */
    transition:
        border-color 160ms var(--ease),
        box-shadow 160ms var(--ease);
}
.field__input::placeholder {
    color: rgba(6, 48, 61, 0.42);
}
.field__input:focus {
    outline: none;
    border-color: var(--teal-700);
    box-shadow: 0 0 0 3px rgba(11, 93, 117, 0.15);
}
.field__input[aria-invalid="true"] {
    border-color: var(--danger);
}
textarea.field__input {
    resize: vertical;
    min-height: 96px;
}
.field__error {
    min-height: 0;
    font-size: 0.88rem;
    color: var(--danger);
}
.field__error:empty {
    display: none;
}

.choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.choice__opt {
    position: relative;
    cursor: pointer;
}
.choice__opt input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}
.choice__face {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    padding: 12px 8px 10px;
    border: 1.5px solid var(--hair-strong);
    border-radius: 12px;
    background: var(--white);
    text-align: center;
    transition:
        background-color 160ms var(--ease),
        border-color 160ms var(--ease),
        color 160ms var(--ease);
}
.choice__head {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1;
}
.choice__sub {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--ink-soft);
}
.choice__opt input:checked + .choice__face {
    background: var(--teal-700);
    border-color: var(--teal-700);
    color: var(--white);
}
.choice__opt input:checked + .choice__face .choice__sub {
    color: var(--aqua-100);
}
.choice__opt input:focus-visible + .choice__face {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.stepper {
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    gap: 8px;
    max-width: 240px;
}
.stepper__btn {
    min-height: 52px;
    border: 1.5px solid var(--hair-strong);
    border-radius: 12px;
    background: var(--white);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--teal-700);
    cursor: pointer;
}
.stepper__btn:active {
    background: var(--aqua-50);
}
.stepper__val {
    text-align: center;
    font-weight: 600;
    -moz-appearance: textfield;
    appearance: textfield;
}
.stepper__val::-webkit-outer-spin-button,
.stepper__val::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form__status {
    font-size: 0.92rem;
    color: var(--danger);
}
.form__status:empty {
    display: none;
}

.thanks {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 32px 20px;
    background: var(--aqua-50);
    border-radius: var(--radius);
    text-align: center;
}
.thanks:focus {
    outline: none;
}
.thanks__mark {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
.thanks__title {
    font-family: var(--display);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--teal-900);
}
.thanks__line {
    color: var(--ink-soft);
}

/* ---------- footer ---------- */
/* venues and RSVP pages: on a short page the footer still sits at the
   bottom of the screen */
html:not(.book) body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}
html:not(.book) main {
    flex: 1;
}
/* who (names) on top; Instagram and the song credit below it on the
   left, back to top on the right of that row */
.footer {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 24px;
    padding: 40px max(var(--gutter), (100% - 900px) / 2) calc(32px + var(--safe-b));
    background: var(--teal-900);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}
.footer__home {
    grid-column: 1 / -1;
    justify-self: start;
    display: grid;
    gap: 8px;
    text-decoration: none;
    color: var(--white);
}
.footer__by {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.66);
}
.footer__by span {
    color: var(--gold);
}
.footer__names {
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1;
}
.footer__names span {
    font-style: italic;
    color: var(--gold);
}
.footer__meta {
    display: grid;
    justify-items: start;
    gap: 12px;
}
.footer__link {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-underline-offset: 4px;
}
.footer__link--icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.4;
}
.footer__link--icon svg {
    flex: none;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.footer__link--icon .footer__dot {
    fill: currentColor;
}
.footer__link cite {
    font-style: normal;
    color: var(--white);
}
.footer__top {
    justify-self: end;
}

/* ---------- toast (copy address) ---------- */
.toast {
    position: fixed;
    left: 50%;
    z-index: 30;
    bottom: calc(var(--safe-b) + 24px);
    transform: translate(-50%, 12px);
    padding: 10px 18px 8px;
    border-radius: 999px;
    background: var(--teal-900);
    color: var(--white);
    font-size: 0.9rem;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 180ms var(--ease),
        transform 180ms var(--ease);
}
.toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ---------- scroll reveals ----------
   js/site.js adds .reveal to cards and headings, then .is-in as each one
   enters the screen. Skipped entirely under reduced motion. */
.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 600ms var(--ease),
        transform 600ms var(--ease);
    transition-delay: var(--delay, 0ms);
}
.js .reveal.is-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .bg,
    .flip__hint,
    .flip__dots button::before,
    .flip__arrow {
        transition: none;
    }
    .hot.is-pulsing,
    .player__disc {
        animation: none;
    }
    .js .leaf .flip__page .page__body > * {
        opacity: 1;
        animation: none;
    }
}

/* ---------- wider screens ---------- */
@media (min-width: 720px) {
    :root {
        --topbar-h: 64px;
    }
    .tabbar {
        gap: 8px;
    }
    .tabbar__link {
        padding: 0 20px;
        font-size: 0.78rem;
        letter-spacing: 0.08em;
    }
    .tabbar__link svg {
        display: none;
    }
    /* current page: gold, with a short rule under it */
    .tabbar__link[aria-current="page"]::after {
        content: "";
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 14px;
        height: 1.5px;
        background: currentColor;
    }
    .section {
        padding-block: 40px 22px;
    }
    .sheet {
        margin: auto;
        padding-bottom: 24px;
        border-radius: 18px;
    }
    .hotels {
        grid-template-columns: 1fr 1fr;
    }
    #hotels > * {
        max-width: 900px;
    }
    .hotel {
        grid-template-columns: 1fr;
    }
    .hotel__img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }
}