/*
  Exely, The Art of Hospitality: styles for both city pages (tbilisi/, batumi/).

  The page reads as one watercolour sheet from day to evening: warm cotton
  paper at the top, a plum dusk brushed across the middle, evening paper with
  copper light below. Mobile first; from 769px the invitation hangs as a
  single sheet on a gallery wall. Colours come from the client's certificate
  art (Exely purple #4E1076, copper foil, lavender and peach washes).
*/

:root {
    --vh: 1vh;                       /* JS off = plain vh; the head script pins it */

    --paper: #fcf4ec;                /* sampled from the hero painting's paper */
    --ink: #3b2a44;                  /* body text on paper, purple-tinted */
    --ink-soft: #6e5a78;
    --purple: #4e1076;               /* Exely brand purple */
    --copper: #b9824f;               /* foil lines, borders */
    --copper-text: #8f5c2e;          /* copper dark enough for small text on paper */

    --dusk: #2a1230;                 /* evening paper */
    --ivory: #f7ece2;
    --ivory-soft: #dccbd3;
    --gold: #e4b98c;                 /* copper as light, on the evening paper */

    --wall: #e9e2ec;                 /* desktop gallery wall, day */
    --wall-night: #150918;           /* desktop gallery wall, evening */

    --serif: 'Cormorant', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;  /* the face in the client's own design file */
    --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html, body {
    margin: 0;
    overscroll-behavior-y: none;
}

html {
    -webkit-text-size-adjust: 100%;
    /* Scrollbar starts invisible and fades in once the invitation opens. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
html.is-open { scrollbar-color: var(--copper) var(--paper); }
html.is-open.is-evening { scrollbar-color: var(--gold) var(--dusk); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background-color: var(--paper); }
::-webkit-scrollbar-thumb { background-color: transparent; transition: background-color 1s ease; }
html.is-open ::-webkit-scrollbar-thumb { background-color: var(--copper); }
html.is-evening ::-webkit-scrollbar-track { background-color: var(--dusk); }
html.is-evening ::-webkit-scrollbar-thumb { background-color: var(--gold); }

body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Cormorant defaults to old-style figures, where "1" reads as "I". */
    font-variant-numeric: lining-nums;
    transition: background-color 1.6s ease;
}

/* Intro scroll-lock: never position:fixed / overflow:hidden on the document
   (Chrome iOS from a chat app then freezes a short viewport). script.js traps
   touchmove and scroll while this class is on <html>. */
html.is-locked, html.is-locked body { overscroll-behavior: none; touch-action: none; }

img { display: block; max-width: 100%; }
p { margin: 0; }

/* ---------- loader ---------- */
.loader {
    position: fixed;
    inset: 0;
    z-index: 10050;                  /* above everything, the hero stage included */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    background-color: var(--paper);
    transition: opacity 0.7s ease;
}
.loader.is-hidden { opacity: 0; pointer-events: none; }
.loader.is-removed { display: none; }
.loader__ring {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid rgba(185, 130, 79, 0.25);
    border-top-color: var(--purple);
    animation: spin 1.1s linear infinite;
}
.loader__track {
    width: 120px;
    height: 1px;
    background-color: rgba(185, 130, 79, 0.22);
    overflow: hidden;
}
.loader__bar {
    display: block;
    height: 100%;
    background-color: var(--copper);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s linear;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- the sheet ---------- */
.sheet {
    position: relative;
    background-color: var(--paper);
}
html.assets-ready main {
    background-image: url('/img/paper.jpg');
    background-size: 320px 320px;
}
html.assets-ready .dusk {
    background-image: linear-gradient(to bottom, rgba(252, 244, 236, 0) 0%, #f3e6e8 14%, #dcc6dc 32%, #a983a6 52%, #6b3a6c 70%, #3a1840 86%, var(--dusk) 100%), url('/img/paper.jpg');
    background-size: 100% 100%, 320px 320px;
}

/* ---------- hero ---------- */
.hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background-color: var(--paper);
}
.vh-lock .hero { height: calc(var(--vh) * 100); }

/* The stage keeps the clip's 9:16 frame and covers the hero; script.js sizes it
   so overlays placed in % stay glued to the same spot of the picture. */
.stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
}
.stage__loop,
.stage__intro,
.stage__still {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.stage__loop { z-index: 1; }
.stage__intro { z-index: 2; transition: opacity 0.9s ease; }
.stage__still { z-index: 3; }
.hero.is-playing .stage__still { visibility: hidden; }
.hero.is-open .stage__intro { opacity: 0; }

/* The sealed card's words, sitting on the blank card in the still. */
.card {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 26%;
    width: 70%;
    transform: translateX(-50%);
    text-align: center;
    transition: opacity 0.6s ease, transform 0.9s var(--ease);
}
.card__logo { width: 112px; height: auto; margin: 0 auto 20px; }
.card__line {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.14em;
    color: var(--copper-text);
}
.card__city {
    margin-top: 6px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 30px;
    letter-spacing: 0.06em;
    color: var(--purple);
}
.hero.is-opening .card { opacity: 0; transform: translate(-50%, -10px); }

.seal {
    position: absolute;
    z-index: 5;
    left: 48.75%;                    /* measured from entry.jpg */
    top: 74.3%;
    width: 23.4%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    transform: translate(-50%, -50%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.seal::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(240, 200, 150, 0.95);
    box-shadow: 0 0 18px rgba(228, 170, 110, 0.45);
    opacity: 0;
    animation: seal-breathe 2.8s ease-in-out infinite;
}
.seal:focus-visible { outline: 1px solid var(--purple); outline-offset: 8px; }
html.is-loading .seal::before { animation: none; }
.hero.is-opening .seal { pointer-events: none; visibility: hidden; }
@keyframes seal-breathe {
    0%   { opacity: 0; transform: scale(0.94); }
    45%  { opacity: 0.9; }
    100% { opacity: 0; transform: scale(1.22); }
}

.hint {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    top: 92.6%;                      /* on the table, just below the card's edge */
    text-align: center;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.24em;
    color: var(--ink-soft);
    opacity: 0;
    transition: opacity 0.5s ease;
}
html:not(.is-loading) .hint { animation: fade-in 1s ease 0.7s both; }
.hero.is-opening .hint { animation: none; opacity: 0; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* The hero's own words, written onto the clean paper of the painting. */
.hero__content {
    position: absolute;
    z-index: 6;
    left: 0;
    right: 0;
    top: 17%;
    text-align: center;
    pointer-events: none;
    visibility: hidden;
}
.hero.is-open .hero__content { visibility: visible; }
.hero__logo { width: 104px; height: auto; margin: 0 auto 26px; }
.hero__kicker {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--copper-text);
}
.hero__title {
    margin: 14px 0 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: 0.07em;
    color: var(--purple);
}
.hero__word { display: block; }
.hero__rule { display: block; width: 210px; height: 28px; margin: 14px auto 10px; }
.hero__meta {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 19px;
    letter-spacing: 0.04em;
    color: var(--ink);
}

/* Write-in: fade and rise for the small lines; for the display title a faked
   blur (transparent glyph + own-colour text-shadow). No CSS filter on text:
   WebKit clips filtered text to its box. */
.hero.is-open .hero__logo,
.hero.is-open .hero__kicker,
.hero.is-open .hero__meta { animation: rise-in 1.2s var(--ease) both; }
.hero.is-open .hero__logo { animation-delay: 0.15s; }
.hero.is-open .hero__kicker { animation-delay: 0.45s; }
.hero.is-open .hero__meta { animation-delay: 1.9s; }
.hero.is-open .hero__word { animation: ink-in 1.6s var(--ease) backwards; }
.hero.is-open .hero__word:nth-child(1) { animation-delay: 0.7s; }
.hero.is-open .hero__word:nth-child(2) { animation-delay: 1.05s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ink-in {
    from { color: rgba(78, 16, 118, 0); text-shadow: 0 0 14px rgba(78, 16, 118, 0.85); }
    to   { color: rgba(78, 16, 118, 1); text-shadow: 0 0 0 rgba(78, 16, 118, 0); }
}

/* Soft hand-off from the painting into the paper below. */
.hero::after {
    content: '';
    position: absolute;
    z-index: 7;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    background-image: linear-gradient(to bottom, rgba(252, 244, 236, 0), var(--paper));
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}
.hero.is-open::after { opacity: 1; }

/* Scroll hint: appears once the title has written itself, leaves on the first scroll. */
.scroll-hint {
    position: absolute;
    z-index: 8;                      /* above the hero's paper fade */
    left: 50%;
    bottom: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 18px 7px;
    /* a small paper chip: the hero's lower edge is purple paint on some phones */
    background-color: rgba(252, 244, 236, 0.86);
    border: 1px solid rgba(185, 130, 79, 0.35);
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}
.hero.is-open .scroll-hint { opacity: 1; transition-delay: 2.6s; }
.hero.is-open .scroll-hint.is-gone { opacity: 0; transition-delay: 0s; }
.scroll-hint__label {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.26em;
    white-space: nowrap;
    color: var(--purple);
}
.scroll-hint__line {
    position: relative;
    width: 1px;
    height: 14px;
    overflow: hidden;
    background-color: rgba(185, 130, 79, 0.3);
}
.scroll-hint__line::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 7px;
    background-color: var(--copper);
    animation: scroll-drop 2.2s var(--ease) infinite;
}
@keyframes scroll-drop {
    0%   { transform: translateY(-7px); }
    70%  { transform: translateY(14px); }
    100% { transform: translateY(14px); }
}

/* ---------- music toggle ---------- */
.music {
    position: fixed;
    z-index: 50;
    top: 16px;
    top: calc(env(safe-area-inset-top, 0px) + 16px);
    right: 16px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(185, 130, 79, 0.6);
    border-radius: 0;
    background-color: rgba(252, 244, 236, 0.82);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.8s ease, visibility 0.8s, background-color 1.6s ease, border-color 1.6s ease;
}
html.is-open .music { opacity: 1; visibility: visible; transition-delay: 1.2s, 1.2s, 0s, 0s; }
html.is-evening .music { background-color: rgba(42, 18, 48, 0.72); border-color: rgba(228, 185, 140, 0.6); }
.music:focus-visible { outline: 1px solid var(--purple); outline-offset: 3px; }
.music__bars { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.music__bars span {
    display: block;
    width: 2px;
    height: 3px;
    background-color: var(--purple);
    transition: height 0.4s ease, background-color 1.6s ease;
}
html.is-evening .music__bars span { background-color: var(--gold); }
.music.is-playing .music__bars span { animation: eq 1.2s ease-in-out infinite; }
.music.is-playing .music__bars span:nth-child(2) { animation-delay: -0.4s; }
.music.is-playing .music__bars span:nth-child(3) { animation-delay: -0.8s; }
.music.is-playing .music__bars span:nth-child(4) { animation-delay: -0.2s; }
@keyframes eq {
    0%, 100% { height: 4px; }
    50%      { height: 14px; }
}

/* ---------- scroll reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- overture ---------- */
.overture {
    padding: 76px 28px 60px;
    text-align: center;
}
.overture__lead {
    max-width: 340px;
    margin: 0 auto;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 30px;
    line-height: 1.22;
    color: var(--purple);
}
.overture__stroke { display: block; width: 260px; height: 66px; margin: 18px auto 22px; }
.overture__body {
    max-width: 330px;
    margin: 0 auto;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--ink);
}

/* ---------- details ---------- */
.details { padding: 8px 28px 84px; }
.label {
    margin-bottom: 10px;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.26em;
    color: var(--ink-soft);
}
.details__when {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    align-items: stretch;
}
.label-block { display: flex; flex-direction: column; justify-content: space-between; }
.details__day { display: flex; align-items: flex-end; gap: 12px; }
.details__num {
    font-family: var(--serif);
    font-weight: 300;
    font-size: 86px;
    line-height: 0.8;
    color: var(--purple);
}
.details__month {
    display: flex;
    flex-direction: column;
    padding-bottom: 2px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.2;
    color: var(--ink);
}
.details__weekday {
    margin-top: 4px;
    font-family: var(--sans);
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}
.label-block--time { text-align: right; align-items: flex-end; }
.details__time {
    font-family: var(--serif);
    font-weight: 300;
    font-size: 46px;
    line-height: 0.9;
    color: var(--purple);
}
.details__time span {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--ink-soft);
}
.details__rule { display: block; width: 100%; height: 30px; margin: 38px 0; }

.details__place {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 31px;
    line-height: 1.1;
    color: var(--purple);
}
.details__address { margin: 8px 0 24px; font-size: 15px; color: var(--ink); }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 24px;
    border: 1px solid var(--copper);
    border-radius: 0;
    background-color: transparent;
    color: var(--purple);
    font-family: var(--sans);
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.15s ease;
}
.button:hover { background-color: var(--purple); border-color: var(--purple); color: var(--ivory); }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 1px solid var(--purple); outline-offset: 4px; }

/* Dress code: a painted swatch, wiped in with a soft brush edge. */
.dress {
    position: relative;
    display: grid;
    place-items: center;
    height: 210px;
    margin: 76px -28px 0;
    overflow: hidden;
}
.dress__stroke {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: 196px;
    max-width: none;
    transform: translate(-50%, -50%) rotate(-3deg);
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    transition: -webkit-mask-position 1.8s var(--ease), mask-position 1.8s var(--ease);
}
.dress.is-in .dress__stroke { -webkit-mask-position: 0 0; mask-position: 0 0; }
.dress__text { position: relative; text-align: center; color: var(--purple); transition: color 1s ease 0.6s; }
.dress.has-stroke .dress__text { color: var(--ivory); }
.dress__label {
    /* sits on the paper above the swatch, so it reads before the paint arrives */
    position: absolute;
    left: 0;
    right: 0;
    top: -46px;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.26em;
    color: var(--ink-soft);
}
.dress__value {
    margin-top: 4px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 33px;
    letter-spacing: 0.03em;
}
.details__note {
    margin-top: 44px;
    text-align: center;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 17px;
    color: var(--ink-soft);
}

/* ---------- dusk ----------
   The light changing: paper to lavender to plum to evening paper, with two
   of the client's painted strokes wiped across it and copper foil drawn on
   top by brush.js. The bottom stop is exactly --dusk, so it meets .evening
   with no seam. */
.dusk {
    position: relative;
    height: 360px;
    overflow: hidden;
    background-color: var(--paper);
    background-image: linear-gradient(to bottom, var(--paper) 0%, #f3e6e8 14%, #dcc6dc 32%, #a983a6 52%, #6b3a6c 70%, #3a1840 86%, var(--dusk) 100%);
}
.dusk.reveal { opacity: 1; transform: none; }          /* the band is always there; only its strokes animate */
.dusk__paint { position: absolute; inset: 0; width: 100%; height: 100%; }
.dusk__stroke {
    position: absolute;
    left: 50%;
    max-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    -webkit-mask-size: 300% 100%;
    mask-size: 300% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    transition: -webkit-mask-position 2s var(--ease), mask-position 2s var(--ease);
}
.dusk__stroke--a { top: 44%; width: 150%; transform: translate(-50%, -50%) rotate(-9deg); opacity: 0.92; }
.dusk__stroke--b { top: 73%; width: 118%; transform: translate(-42%, -50%) rotate(8deg); opacity: 0.88; transition-delay: 0.45s; }
.dusk.is-in .dusk__stroke { -webkit-mask-position: 0 0; mask-position: 0 0; }

/* ---------- evening ---------- */
.evening {
    position: relative;
    background-color: var(--dusk);
    color: var(--ivory);
}
/* The painted evening loop stays pinned behind the programme and guest book. */
.evening__backdrop {
    position: sticky;
    top: 0;
    z-index: 0;
    height: 100vh;
    margin-bottom: -100vh;
    overflow: hidden;
}
.vh-lock .evening__backdrop {
    height: calc(var(--vh) * 100);
    margin-bottom: calc(var(--vh) * -100);
}
.evening__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.4s ease;
}
.evening__video.is-ready { opacity: 1; }
/* The evening painting glows peach in the middle; the veil keeps ivory text
   above 4.5:1 while the copper light still shows through. */
.evening__veil {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(ellipse at 50% 42%, rgba(30, 11, 35, 0.66), rgba(30, 11, 35, 0.42) 75%);
}
/* Melts the top of the pinned painting into the dusk band above it. */
.evening::before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    height: 220px;
    background-image: linear-gradient(to bottom, var(--dusk), rgba(42, 18, 48, 0));
    pointer-events: none;
}

.programme {
    position: relative;
    z-index: 2;
    padding: 30px 28px 56px;
}
.programme__title {
    margin: 0 0 40px;
    text-align: center;
    font-family: var(--serif);
    font-weight: 300;
    font-size: 38px;
    letter-spacing: 0.02em;
    color: var(--ivory);
}
.programme__list {
    max-width: 360px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.moment {
    display: grid;
    grid-template-columns: 70px 1fr;
    column-gap: 18px;
    align-items: baseline;
    padding: 14px 0;
}
.moment:nth-child(2) { transition-delay: 0.05s; }
.moment:nth-child(3) { transition-delay: 0.1s; }
.moment__time {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--gold);
    font-variant-numeric: lining-nums;
}
.moment__name {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.25;
    color: var(--ivory);
}
.moment--award .moment__name { color: var(--gold); font-weight: 500; }
.moment__rule { grid-column: 2; display: block; width: 150px; height: 18px; margin-top: 6px; }
.moment--grand .moment__name { font-size: 28px; line-height: 1.1; }
.moment__sub {
    display: block;
    margin-bottom: 6px;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: rgba(228, 185, 140, 0.85);
}

/* ---------- guest book ---------- */
.guestbook {
    position: relative;
    z-index: 2;
    padding: 30px 16px 40px;
}
.frame {
    position: relative;
    max-width: 384px;
    margin: 0 auto;
    padding: 34px 22px 30px;
    border: 24px solid transparent;
    background-color: rgba(24, 9, 29, 0.8);
    background-clip: padding-box;
    box-shadow: 0 30px 70px rgba(10, 3, 14, 0.5);
}
/* The gilded frame image waits for the loader, like every below-the-fold asset. */
html.assets-ready .frame { border-image: url('/img/frame.webp') 56 / 24px stretch; }
.frame__title {
    margin: 0 0 18px;
    text-align: center;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.25;
    letter-spacing: 0.08em;
    color: var(--gold);
}
.rsvp__intro {
    margin-bottom: 28px;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--ivory-soft);
}
.field { display: grid; gap: 8px; margin-bottom: 22px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.field-row .field { min-width: 0; }
.field__label {
    padding: 0;
    font-family: var(--sans);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.24em;
    color: rgba(247, 236, 226, 0.82);
}
.field__input {
    width: 100%;
    padding: 6px 0 8px;
    border: 0;
    border-bottom: 1px solid rgba(228, 185, 140, 0.55);
    border-radius: 0;
    background-color: transparent;
    color: var(--ivory);
    font-family: var(--serif);
    font-weight: 400;
    font-size: 20px;               /* 16px+ keeps iOS from zooming on focus */
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.field__input:focus { border-bottom-color: var(--gold); box-shadow: 0 1px 0 var(--gold); }
.field__input[aria-invalid='true'] { border-bottom-color: #f0a79e; }
.field__error { font-size: 12.5px; font-weight: 400; color: #f3aca3; }
.field__error:empty { display: none; }

.choice { display: grid; gap: 10px; margin: 6px 0 26px; padding: 0; border: 0; }
.choice legend { margin-bottom: 10px; }
.choice__option { position: relative; display: block; cursor: pointer; }
.choice__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice__option span {
    display: block;
    padding: 14px 16px;
    border: 1px solid rgba(228, 185, 140, 0.5);
    color: var(--ivory);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-align: center;
    transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.choice__option input:checked + span { background-color: var(--gold); border-color: var(--gold); color: var(--dusk); }
.choice__option input:focus-visible + span { outline: 1px solid var(--gold); outline-offset: 3px; }

.button--solid {
    width: 100%;
    padding: 15px 24px;
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--dusk);
    font-weight: 500;
}
.button--solid:hover { background-color: var(--ivory); border-color: var(--ivory); color: var(--dusk); }
.button--solid:focus-visible { outline-color: var(--gold); }
.button--solid[disabled] { opacity: 0.6; cursor: default; }
.rsvp__status {
    min-height: 20px;
    margin-top: 14px;
    text-align: center;
    font-size: 13.5px;
    color: var(--ivory-soft);
}

/* After a reply the frame holds the guest's own "exhibit". */
.exhibit { padding: 4px 0 2px; text-align: center; }
.exhibit[hidden], .rsvp[hidden], .rsvp__closed[hidden] { display: none; }
.exhibit__paint { display: block; width: 100%; height: 96px; margin: 0 auto -70px; }
.exhibit__name {
    position: relative;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.1;
    color: var(--ivory);
    overflow-wrap: anywhere;
}
.exhibit__hotel {
    margin: 14px 0 22px;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.16em;
    color: var(--gold);
}
.exhibit__caption {
    margin-bottom: 22px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.45;
    color: var(--ivory-soft);
}
.exhibit__again {
    padding: 8px;
    border: 0;
    background-color: transparent;
    color: var(--gold);
    font-family: var(--sans);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}
.exhibit > * { animation: rise-in 1.1s var(--ease) both; }
.exhibit > .exhibit__name { animation-delay: 0.5s; }
.exhibit > .exhibit__hotel { animation-delay: 0.8s; }
.exhibit > .exhibit__caption { animation-delay: 1.1s; }
.exhibit > .exhibit__again { animation-delay: 1.4s; }
.rsvp__closed {
    text-align: center;
    font-family: var(--serif);
    font-size: 20px;
    color: var(--ivory);
}

/* ---------- closing ---------- */
.closing {
    position: relative;
    z-index: 2;
    padding: 56px 28px 40px;
    text-align: center;
}
.closing__line {
    font-family: var(--serif);
    font-weight: 300;
    font-size: 28px;
    line-height: 1.25;
    color: var(--ivory);
}
.closing__sign {
    margin: 14px 0 30px;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.28em;
    color: var(--gold);
}
.closing__logo { width: 96px; height: auto; margin: 0 auto 72px; opacity: 0.92; }
.credit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ivory);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-decoration: none;
    opacity: 0.3;
    transition: opacity 0.4s ease;
}
.credit:hover { opacity: 0.7; }
.music-credit {
    max-width: 300px;
    margin: 18px auto 0;
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--ivory-soft);
    opacity: 0.45;
}
.music-credit a { color: inherit; text-underline-offset: 2px; }
.credit__logo {
    width: 18px;
    height: 18px;
    background-color: var(--gold);
    -webkit-mask: url('/img/weddsite.svg') center / contain no-repeat;
    mask: url('/img/weddsite.svg') center / contain no-repeat;
}

/* ---------- city chooser (root page only) ---------- */
.chooser {
    min-height: 100vh;
    display: grid;
    place-content: center;
    gap: 18px;
    padding: 40px 28px;
    text-align: center;
}
.chooser__logo { width: 120px; margin: 0 auto 10px; }
.chooser__title {
    margin: 0 0 18px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 30px;
    letter-spacing: 0.07em;
    color: var(--purple);
}

/* ---------- larger screens ---------- */
@media (min-width: 481px) {
    .overture__lead { max-width: 380px; font-size: 32px; }
    .hero__title { font-size: 40px; }
}

@media (min-width: 769px) {
    /* The invitation hangs as one sheet on a gallery wall that dims at dusk. */
    body { background-color: var(--wall); }
    html.is-evening body { background-color: var(--wall-night); }
    .sheet {
        width: 440px;
        margin: 0 auto;
        box-shadow: 0 0 0 1px rgba(78, 16, 118, 0.05), 0 40px 120px rgba(60, 20, 70, 0.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .seal::before { animation: none; opacity: 0.8; }
    .hero.is-open .hero__logo,
    .hero.is-open .hero__kicker,
    .hero.is-open .hero__meta,
    .hero.is-open .hero__word,
    .exhibit > * { animation: none; }
    .dress__stroke, .dusk__stroke { -webkit-mask-image: none; mask-image: none; }
    .scroll-hint__line::after, .music.is-playing .music__bars span { animation: none; }
    .music.is-playing .music__bars span { height: 10px; }
}