:root {
    --bg: #0f0d0c;
    --bg-soft: #171311;
    --cream: #f2ece3;
    --cream-soft: rgba(242, 236, 227, 0.72);
    --muted: rgba(242, 236, 227, 0.56);
    --ink: #161311;
    --line: rgba(242, 236, 227, 0.18);
    --line-strong: rgba(242, 236, 227, 0.34);
    --panel: rgba(247, 241, 233, 0.88);
    --panel-line: rgba(22, 19, 17, 0.12);
    --shadow: 0 36px 100px rgba(0, 0, 0, 0.25);
    --radius-soft: 2rem;
    --max-width: 1220px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(242, 236, 227, 0.46) rgba(15, 13, 12, 0.72);
}

::-webkit-scrollbar {
    width: 11px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 13, 12, 0.72);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(242, 236, 227, 0.58), rgba(197, 188, 175, 0.64));
    border-radius: 999px;
    border: 2px solid rgba(15, 13, 12, 0.72);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(242, 236, 227, 0.74), rgba(221, 212, 201, 0.82));
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Manrope', sans-serif;
    background: var(--bg);
}

img {
    display: block;
    width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

.page-backdrop,
.page-grain,
.orb {
    position: fixed;
    inset: 0;
    pointer-events: none;
}

.page-backdrop {
    background-position: center;
    background-size: cover;
    filter: grayscale(0.15) saturate(0.42) brightness(0.72) blur(3.4px);
    transform: scale(1.08);
}

.page-grain {
    opacity: 0.12;
    background-image: radial-gradient(rgba(255, 255, 255, 0.3) 0.6px, transparent 0.6px);
    background-size: 16px 16px;
    mix-blend-mode: soft-light;
}

.orb {
    inset: auto;
    width: 28rem;
    height: 28rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0));
    filter: blur(18px);
    opacity: 0.85;
    animation: floatDrift 12s ease-in-out infinite alternate;
}

.orb-a {
    top: 6%;
    right: -8%;
}

.orb-b {
    top: 42%;
    left: -10%;
    width: 22rem;
    height: 22rem;
    animation-duration: 16s;
}

.orb-c {
    bottom: 8%;
    right: 8%;
    width: 18rem;
    height: 18rem;
    animation-duration: 14s;
}

.site-shell {
    position: relative;
    z-index: 1;
    width: min(calc(100% - 2rem), var(--max-width));
    margin: 0 auto;
}

.public-body {
    color: var(--cream);
}

.public-body .site-shell {
    padding: 0.45rem 0 3rem;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.topbar-minimal {
    position: sticky;
    top: 1rem;
    z-index: 10;
    padding: 0.9rem clamp(0.95rem, 3vw, 1.6rem);
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(15, 13, 12, 0.42);
    backdrop-filter: blur(14px);
}

.brand {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.45rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.topnav {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.topnav a {
    position: relative;
    color: var(--cream-soft);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.topnav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.3rem;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.topnav a:hover::after,
.topnav a:focus-visible::after {
    transform: scaleX(1);
}

.single-page {
    display: grid;
    gap: clamp(4rem, 8vw, 7rem);
    padding: 1.7rem 0 2rem;
}

.hero-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    min-height: calc(100svh - 6rem);
}

.hero-copy,
.stream-copy,
.band-intro,
.detail-block,
.rail-header,
.rsvp-copy {
    max-width: 52rem;
}

.eyebrow,
.card-kicker {
    display: inline-block;
    margin: 0 0 1rem;
    font-size: 0.82rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cream-soft);
}

.split-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.display-title,
.section-title {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    line-height: 0.9;
}

.display-title {
    max-width: 9ch;
    font-size: clamp(4.6rem, 14vw, 9rem);
    text-wrap: balance;
}

.section-title {
    font-size: clamp(2.6rem, 5.2vw, 5.5rem);
    text-wrap: balance;
}

.type-scroll {
    position: relative;
    min-height: 0.95em;
}

.type-scroll.is-typing::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 0.88em;
    margin-left: 0.12em;
    background: currentColor;
    vertical-align: -0.08em;
    animation: caretBlink 0.9s steps(1) infinite;
}

.hero-subline,
.micro-copy,
.body-copy,
.rail-item p,
.footer p,
.field-hint,
.admin-status {
    color: var(--muted);
}

.hero-subline {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0 1rem;
    font-size: 0.88rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.hero-subline span {
    width: 3.5rem;
    height: 1px;
    background: var(--line-strong);
}

.hero-lead,
.body-copy {
    margin: 0;
    line-height: 1.9;
    font-size: 1rem;
}

.hero-lead {
    max-width: 32rem;
    margin-bottom: 1.8rem;
}

.body-copy-large {
    font-size: 1.08rem;
    margin-bottom: 1.5rem;
}

.hero-actions,
.form-actions {
    display: flex;
    align-items: center;
    gap: 1rem 1.4rem;
    flex-wrap: wrap;
}

.inline-link {
    position: relative;
    padding-bottom: 0.35rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.inline-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
}

.inline-link-muted {
    color: var(--cream-soft);
}

.location-map-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.location-map-action:hover,
.location-map-action:focus-visible {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--cream);
}

.hero-media,
.stream-image,
.ribbon-image,
.gallery-flow-item {
    --parallax-offset: 0px;
}

.hero-media {
    position: relative;
    justify-self: end;
    width: min(100%, 28rem);
    transform: translate3d(0, var(--parallax-offset), 0);
}

.public-body:not(.ar-body) .hero-media {
    width: min(100%, 30rem);
}

.hero-media img {
    height: min(78vh, 52rem);
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16rem 16rem 2rem 2rem;
    box-shadow: var(--shadow);
    animation: slowZoom 14s ease-in-out infinite alternate;
}

.hero-caption {
    position: absolute;
    left: -3.2rem;
    bottom: 1.5rem;
    display: grid;
    gap: 0.75rem;
    font-size: 0.76rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    color: rgba(242, 236, 227, 0.72);
}

.scroll-note {
    position: absolute;
    left: 0;
    bottom: -2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cream-soft);
}

.scroll-line {
    width: 3rem;
    height: 1px;
    background: var(--line-strong);
    animation: scrollPulse 1.9s ease-in-out infinite;
}

.flow-section,
.program-rail,
.gallery-ribbon {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) minmax(18rem, 0.82fr);
    gap: 2rem;
    align-items: start;
}

.section-stamp {
    position: sticky;
    top: 6rem;
    align-self: start;
}

.section-number {
    display: block;
    margin-bottom: 0.7rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3rem, 6vw, 4.8rem);
    line-height: 0.9;
    color: rgba(242, 236, 227, 0.2);
}

.stream-copy {
    padding-top: 0.8rem;
}

.stream-image {
    margin-top: 2rem;
    transform: translate3d(0, var(--parallax-offset), 0);
}

.stream-image img {
    height: min(34rem, 56vw);
    object-fit: cover;
    border-radius: 22rem 22rem 1.5rem 1.5rem;
    box-shadow: var(--shadow);
}

.countdown-band {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 2.5rem;
    padding: 2.2rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.countdown-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-self: end;
}

.countdown-segment {
    padding-left: 1rem;
    border-left: 1px solid var(--line-strong);
}

.countdown-segment span {
    display: block;
    margin-bottom: 0.25rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 5vw, 3.7rem);
    color: var(--cream);
}

.countdown-segment small {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
}

.detail-river {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}

.detail-block {
    padding-bottom: 2.1rem;
    margin-bottom: 2.1rem;
    border-bottom: 1px solid var(--line);
}

.detail-block:last-child {
    margin-bottom: 0;
}

.swatches {
    display: flex;
    gap: 0.9rem;
    margin: 1.3rem 0 1.2rem;
}

.swatches span {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.image-ribbon {
    position: relative;
    min-height: 44rem;
}

.ribbon-image {
    position: absolute;
    overflow: hidden;
    box-shadow: var(--shadow);
    transform: translate3d(0, var(--parallax-offset), 0);
}

.ribbon-image img {
    height: 100%;
    object-fit: cover;
}

.ribbon-image-main {
    top: 0;
    right: 0;
    width: min(72%, 32rem);
    height: 31rem;
    border-radius: 20rem 20rem 2rem 2rem;
}

.ribbon-image-offset {
    left: 0;
    bottom: 0;
    width: min(54%, 22rem);
    height: 18rem;
    border-radius: 1.5rem 8rem 1.5rem 1.5rem;
}

.rail-content-wrap {
    grid-column: 2 / -1;
}

.rail-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.timeline-rail {
    position: relative;
    padding-left: 3.5rem;
}

.timeline-rail::before {
    content: '';
    position: absolute;
    left: 0.4rem;
    top: 0.6rem;
    bottom: 0.6rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(242, 236, 227, 0), rgba(242, 236, 227, 0.26), rgba(242, 236, 227, 0));
}

.rail-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
    gap: 1.4rem;
    padding: 0 0 2.3rem;
}

.rail-marker {
    position: absolute;
    left: -3.5rem;
    top: 0.35rem;
    width: 0.9rem;
    height: 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--cream);
    box-shadow: 0 0 0 0.55rem rgba(242, 236, 227, 0.06);
}

.rail-time {
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cream-soft);
}

.rail-item h3 {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
    color: var(--cream);
}

.rail-item p {
    margin: 0;
    line-height: 1.8;
}

.gallery-ribbon-track {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}

.gallery-flow-item {
    grid-column: span 4;
    overflow: hidden;
    transform: translate3d(0, var(--parallax-offset), 0);
}

.gallery-flow-item img {
    height: 100%;
    min-height: 21rem;
    object-fit: cover;
    border-radius: 1.8rem;
    box-shadow: var(--shadow);
}

.gallery-span-wide {
    grid-column: span 7;
}

.gallery-span-tall {
    grid-column: span 5;
}

.gallery-span-tall img {
    min-height: 31rem;
}

.gallery-shift-down {
    margin-top: 3rem;
}

/* ─── Section Divider (between RSVP & Wishes) ──────────────────────────────── */

.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    padding: 1rem 0;
}

.section-divider-line {
    flex: 1;
    max-width: 8rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242, 236, 227, 0.22), transparent);
}

.section-divider-ornament {
    font-size: 1rem;
    color: rgba(242, 236, 227, 0.32);
    letter-spacing: 0.4em;
    animation: floatDrift 8s ease-in-out infinite alternate;
}

/* ─── RSVP & Wishes Sections ───────────────────────────────────────────────── */

.rsvp-flow {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 1.5rem;
    margin-top: 1.35rem;
    padding: clamp(1.8rem, 3.5vw, 2.8rem) clamp(1.4rem, 3.2vw, 2.8rem);
    border: 1px solid rgba(242, 236, 227, 0.15);
    border-radius: 2.2rem;
    background: linear-gradient(165deg, rgba(28, 24, 21, 0.78), rgba(14, 12, 10, 0.68));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 20px 50px rgba(0, 0, 0, 0.28),
        0 4px 14px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(14px);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.rsvp-flow::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 8% 8%, rgba(242, 236, 227, 0.09), transparent 38%),
        radial-gradient(circle at 92% 88%, rgba(242, 236, 227, 0.04), transparent 32%);
    pointer-events: none;
}

.rsvp-flow::after {
    content: '✦';
    position: absolute;
    top: 1.2rem;
    right: 1.4rem;
    font-size: 1.4rem;
    color: rgba(242, 236, 227, 0.08);
    pointer-events: none;
    animation: floatDrift 10s ease-in-out infinite alternate;
}

.rsvp-flow .section-stamp {
    position: absolute;
    top: 1.2rem;
    left: 1.6rem;
}

.rsvp-flow .section-stamp .section-number {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    color: rgba(242, 236, 227, 0.07);
    margin: 0;
}

.rsvp-flow .section-stamp .eyebrow {
    margin: 0;
    font-size: 0.68rem;
    color: rgba(242, 236, 227, 0.35);
}

.rsvp-flow .rsvp-copy {
    align-self: start;
    display: grid;
    align-content: start;
    gap: 0.6rem;
    padding: clamp(1.35rem, 2.4vw, 2rem);
    border-radius: 1.4rem;
    border: 1px solid rgba(242, 236, 227, 0.12);
    background: rgba(18, 16, 14, 0.36);
    position: relative;
}

.rsvp-flow .rsvp-copy::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242, 236, 227, 0.18), transparent);
}

.rsvp-flow .rsvp-copy .section-title {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 0.95;
}

.rsvp-flow .rsvp-copy .eyebrow {
    margin: 0;
}

.rsvp-flow .rsvp-copy .body-copy {
    margin: 0.3rem 0 0;
    line-height: 1.85;
}

.rsvp-flow .rsvp-copy .micro-copy {
    margin: 0.5rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(242, 236, 227, 0.1);
    font-size: 0.78rem;
}

/* Congrats/Wishes variant */
.congrats-flow {
    margin-top: 0;
    background: linear-gradient(165deg, rgba(26, 22, 19, 0.80), rgba(12, 10, 9, 0.72));
    border-color: rgba(242, 236, 227, 0.12);
}

.congrats-flow::before {
    background:
        radial-gradient(circle at 85% 15%, rgba(242, 236, 227, 0.08), transparent 36%),
        radial-gradient(circle at 15% 85%, rgba(242, 236, 227, 0.05), transparent 30%);
}

.congrats-flow::after {
    content: '♡';
    top: auto;
    bottom: 1.2rem;
    right: 1.4rem;
    font-size: 1.3rem;
    color: rgba(242, 236, 227, 0.06);
}

.congrats-flow .rsvp-copy {
    border-color: rgba(242, 236, 227, 0.16);
    background: rgba(22, 19, 16, 0.38);
}

/* Language toggle link (AR/EN pill in the topnav) */
.public-body .topnav a.lang-ar-link::after {
    display: none;
}

.public-body .topnav a.ar-lang-toggle::after {
    display: none;
}

.lang-ar-link {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    padding: 0.22rem 0.58rem;
    border: 1px solid currentColor;
    border-radius: 2rem;
    opacity: 0.55;
    transition: opacity 0.2s;
    text-decoration: none;
}

.lang-ar-link:hover {
    opacity: 1;
}

.intro-lang-switch,
.mobile-lang-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    min-width: 2.3rem;
    min-height: 2.3rem;
    padding: 0.36rem 0.74rem;
    border: 1px solid rgba(242, 236, 227, 0.55);
    border-radius: 2rem;
    color: var(--cream-soft);
    background: rgba(13, 11, 10, 0.42);
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    transition: opacity 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}

.intro-lang-switch:hover,
.intro-lang-switch:focus-visible,
.mobile-lang-switch:hover,
.mobile-lang-switch:focus-visible {
    opacity: 1;
    color: var(--cream);
    background: rgba(13, 11, 10, 0.72);
    border-color: rgba(242, 236, 227, 0.86);
    outline: none;
}

.intro-lang-switch {
    position: absolute;
    top: 0.95rem;
    right: 1rem;
    z-index: 4;
    opacity: 0.88;
}

.mobile-lang-switch {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 950;
    opacity: 0.9;
    display: none;
}

.ar-body .intro-lang-switch {
    right: auto;
    left: 1rem;
}

/* ─── Intro Letter Overlay ─────────────────────────────────────────────────── */

.public-body {
    overflow-x: hidden;
}

.site-shell {
    transition: filter 0.85s ease, transform 0.85s ease, opacity 0.85s ease;
}

.public-body.intro-active {
    overflow: hidden;
}

.public-body.intro-active .site-shell {
    filter: blur(4px) saturate(0.72);
    transform: scale(0.988);
    opacity: 0.24;
    pointer-events: none;
}

.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 18% 14%, rgba(244, 233, 216, 0.12), transparent 46%),
        radial-gradient(circle at 82% 70%, rgba(212, 195, 169, 0.1), transparent 44%),
        linear-gradient(180deg, rgba(8, 7, 6, 0.92), rgba(8, 7, 6, 0.98));
    backdrop-filter: blur(11px);
    transition: opacity 0.7s ease, visibility 0.7s ease;
}

.intro-overlay.is-fading {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.intro-aura {
    position: absolute;
    border-radius: 999px;
    border: 1px dashed rgba(240, 227, 210, 0.18);
    pointer-events: none;
}

.intro-aura-a {
    width: min(68vw, 44rem);
    height: min(68vw, 44rem);
    animation: introSpinA 30s linear infinite;
}

.intro-aura-b {
    width: min(50vw, 31rem);
    height: min(50vw, 31rem);
    animation: introSpinB 22s linear infinite;
}

.intro-stage {
    position: relative;
    width: min(92vw, 42rem);
    padding: clamp(1.15rem, 2.2vw, 1.5rem) clamp(1rem, 2.6vw, 1.8rem) clamp(1.2rem, 2.4vw, 1.7rem);
    border: 1px solid rgba(240, 229, 214, 0.2);
    border-radius: 1.8rem;
    background: linear-gradient(180deg, rgba(33, 28, 24, 0.84), rgba(16, 14, 12, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 30px 70px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.intro-kicker {
    margin: 0 0 0.2rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.64rem;
    color: rgba(242, 236, 227, 0.66);
}

.intro-title {
    margin: 0;
    font-size: clamp(1.35rem, 4vw, 2.6rem);
    line-height: 1.08;
}

.intro-copy {
    margin: 0.55rem auto 0.9rem;
    max-width: 30rem;
    color: rgba(242, 236, 227, 0.74);
    font-size: 0.88rem;
}

.envlope-wrapper {
    --env-main: #c8bfb1;
    --env-main-2: #bdb3a5;
    --env-flap: #afa395;
    --env-bg: #f4ede3;
    --heart-color: #2f2720;
    --env-width: min(82vw, 20rem);
    --env-height: calc(var(--env-width) * 0.64);
    --heart-width: 0.95rem;
    height: calc(var(--env-height) + 3.8rem);
    display: grid;
    place-items: center;
    margin: 0.55rem auto 0.45rem;
}

#envelope {
    position: relative;
    width: var(--env-width);
    height: var(--env-height);
    margin-left: auto;
    margin-right: auto;
    border-bottom-left-radius: 0.45rem;
    border-bottom-right-radius: 0.45rem;
    background-color: var(--env-flap);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    cursor: pointer;
}

#envelope::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45), transparent 72%);
    filter: blur(4px);
    pointer-events: none;
}

.front {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 3;
}

.flap {
    border-left: calc(var(--env-width) / 2) solid transparent;
    border-right: calc(var(--env-width) / 2) solid transparent;
    border-bottom: calc(var(--env-height) / 2 - 6px) solid transparent;
    border-top: calc(var(--env-height) / 2 + 6px) solid var(--env-flap);
    transform-origin: top;
    pointer-events: none;
}

.pocket {
    border-left: calc(var(--env-width) / 2) solid var(--env-main);
    border-right: calc(var(--env-width) / 2) solid var(--env-main);
    border-bottom: calc(var(--env-height) / 2) solid var(--env-main-2);
    border-top: calc(var(--env-height) / 2) solid transparent;
    border-bottom-left-radius: 0.45rem;
    border-bottom-right-radius: 0.45rem;
}

.letter {
    position: relative;
    width: 90%;
    height: 90%;
    margin-left: auto;
    margin-right: auto;
    top: 5%;
    border-radius: 0.45rem;
    background-color: var(--env-bg);
    box-shadow: 0 2px 26px rgba(0, 0, 0, 0.12);
}

.letter::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 24%,
        rgba(226, 214, 197, 0.6) 56%,
        rgba(215, 201, 182, 0.95) 100%
    );
    border-radius: inherit;
}

.intro-letter-tag,
.intro-letter-name {
    position: absolute;
    left: 10%;
    width: 80%;
    text-align: center;
    color: rgba(39, 31, 24, 0.76);
    z-index: 1;
}

.intro-letter-tag {
    top: 13%;
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.intro-letter-name {
    top: 26%;
    font-size: 1.05rem;
    font-weight: 600;
}

.words {
    position: absolute;
    left: 10%;
    width: 80%;
    height: 7%;
    border-radius: 999px;
    background-color: #cfc3b3;
    z-index: 1;
}

.words.line1 {
    top: 43%;
    width: 20%;
    height: 4%;
}

.words.line2 {
    top: 56%;
}

.words.line3 {
    top: 70%;
}

.words.line4 {
    top: 83%;
    width: 64%;
}

#envelope.close .flap {
    transform: rotateX(0deg);
    transition: transform 0.4s 0.6s ease, z-index 1s;
    z-index: 5;
}

#envelope.open .flap {
    transform: rotateX(180deg);
    transition: transform 0.4s ease, z-index 0.6s;
    z-index: 1;
}

#envelope.close .letter {
    transform: translateY(0px);
    transition: transform 0.4s ease, z-index 1s;
    z-index: 1;
}

#envelope.open .letter {
    transform: translateY(calc(var(--env-height) * -0.34));
    transition: transform 0.4s 0.6s ease, z-index 0.6s;
    z-index: 2;
}

.hearts {
    position: absolute;
    top: calc(var(--env-height) / 2);
    left: 0;
    right: 0;
    z-index: 2;
}

.heart {
    position: absolute;
    bottom: 0;
    right: 14%;
    pointer-events: none;
}

.heart::before,
.heart::after {
    content: '';
    position: absolute;
    left: var(--heart-width);
    top: 0;
    width: var(--heart-width);
    height: calc(var(--heart-width) * 1.6);
    background: var(--heart-color);
    border-radius: var(--heart-width) var(--heart-width) 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
    pointer-events: none;
}

.heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

#envelope.close .heart {
    opacity: 0;
    animation: none;
}

.a1 {
    left: 18%;
    transform: scale(0.6);
    opacity: 1;
    animation: slideUp 4s linear 1, sideSway 2s ease-in-out 4 alternate;
    animation-fill-mode: forwards;
    animation-delay: 0.7s;
}

.a2 {
    left: 52%;
    transform: scale(1);
    opacity: 1;
    animation: slideUp 5s linear 1, sideSway 4s ease-in-out 2 alternate;
    animation-fill-mode: forwards;
    animation-delay: 0.7s;
}

.a3 {
    left: 8%;
    transform: scale(0.8);
    opacity: 1;
    animation: slideUp 7s linear 1, sideSway 2s ease-in-out 6 alternate;
    animation-fill-mode: forwards;
    animation-delay: 0.7s;
}

.intro-open-btn {
    position: absolute;
    left: 50%;
    bottom: 18%;
    width: 3rem;
    height: 3rem;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 2px solid rgba(233, 221, 208, 0.32);
    background: radial-gradient(circle at 35% 32%, #372e25, #1d1712 72%);
    color: #efe4d4;
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    padding: 0;
    z-index: 6;
}

.intro-open-btn:hover,
.intro-open-btn:focus-visible {
    transform: translateX(-50%) scale(1.05);
    background: radial-gradient(circle at 35% 32%, #44382c, #211912 72%);
    color: #fff3e2;
    border-color: rgba(247, 233, 216, 0.48);
}

.intro-open-btn:active {
    transform: translateX(-50%) scale(0.98);
}

.seal-star {
    font-size: 1.6rem;
    line-height: 1;
    transform: translateY(-1px);
}

@keyframes slideUp {
    0% {
        top: 0;
    }
    100% {
        top: -22rem;
    }
}

@keyframes sideSway {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: 2rem;
    }
}

@keyframes introSpinA {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes introSpinB {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@media (max-width: 640px) {
    .intro-stage {
        border-radius: 1.2rem;
    }

    .intro-lang-switch {
        top: 0.62rem;
        right: 0.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0.45rem 0.86rem;
        font-size: 0.76rem;
    }

    .ar-body .intro-lang-switch {
        right: auto;
        left: 0.75rem;
    }

    .envlope-wrapper {
        --env-width: min(90vw, 18rem);
        margin-top: 0.35rem;
    }

    .intro-copy {
        font-size: 0.86rem;
    }

    .intro-letter-header strong {
        font-size: 0.9rem;
    }
}

/* ─── Background music toggle ───────────────────────────────────────────────── */

.music-toggle {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 900;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(13, 11, 10, 0.55);
    backdrop-filter: blur(10px);
    color: var(--cream-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    padding: 0;
}

.music-toggle:hover,
.music-toggle:focus-visible {
    background: rgba(13, 11, 10, 0.78);
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--cream);
    outline: none;
}

.music-icon {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
}

/* show "sound on" icon by default; swap when muted */
.music-icon-off {
    display: none;
}

.music-toggle.is-muted .music-icon-on {
    display: none;
}

.music-toggle.is-muted .music-icon-off {
    display: block;
}

@media (max-width: 600px) {
    .music-toggle {
        bottom: 1rem;
        right: 1rem;
    }
}
.admin-grid {
    display: grid;
    gap: 1.25rem 1.8rem;
}

.flow-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.2rem;
    align-content: start;
    padding: clamp(1.35rem, 2.6vw, 1.85rem);
    border-radius: 1.4rem;
    border: 1px solid rgba(242, 236, 227, 0.14);
    background: linear-gradient(180deg, rgba(21, 18, 16, 0.68), rgba(13, 11, 10, 0.58));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
}

.rsvp-form label {
    display: grid;
    gap: 0.55rem;
}

.admin-grid label {
    display: grid;
    gap: 0.65rem;
}

.rsvp-form span,
.rsvp-form .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(242, 236, 227, 0.84);
    font-weight: 600;
    line-height: 1.15;
}

.rsvp-form .label-icon {
    width: 0.9rem;
    height: 0.9rem;
    opacity: 0.5;
    flex-shrink: 0;
}

.admin-grid span {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.flow-form input,
.flow-form select,
.flow-form textarea {
    width: 100%;
    padding: 0.82rem 1rem;
    border: 1px solid rgba(242, 236, 227, 0.2);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    color: var(--cream);
    font-size: 0.92rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.2s ease;
}

.flow-form input:hover,
.flow-form select:hover,
.flow-form textarea:hover {
    border-color: rgba(242, 236, 227, 0.38);
    background: rgba(255, 255, 255, 0.06);
}

.flow-form input:focus,
.flow-form select:focus,
.flow-form textarea:focus {
    border-color: rgba(242, 236, 227, 0.68);
    box-shadow: 0 0 0 3px rgba(242, 236, 227, 0.09), 0 2px 8px rgba(0, 0, 0, 0.12);
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-1px);
}

.flow-form input::placeholder,
.flow-form textarea::placeholder {
    color: rgba(242, 236, 227, 0.36);
    font-style: italic;
}

.flow-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='rgba(242,236,227,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

.flow-form textarea {
    resize: vertical;
    min-height: 7rem;
    line-height: 1.7;
}

.rsvp-flow .form-actions {
    justify-content: space-between;
    align-items: center;
    margin-top: 0.6rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(242, 236, 227, 0.08);
}

.rsvp-flow .form-actions button {
    position: relative;
    padding: 0.92rem 1.8rem;
    border-radius: 999px;
    border: 1px solid rgba(242, 236, 227, 0.65);
    background: linear-gradient(180deg, rgba(247, 238, 227, 0.14), rgba(220, 206, 189, 0.06));
    color: var(--cream);
    letter-spacing: 0.1em;
    font-weight: 600;
    font-size: 0.88rem;
    min-width: 11rem;
    overflow: hidden;
    transition: all 0.35s ease;
}

.rsvp-flow .form-actions button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.12) 50%, transparent 62%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.rsvp-flow .form-actions button:hover::before,
.rsvp-flow .form-actions button:focus-visible::before {
    transform: translateX(100%);
}

.rsvp-flow .form-actions button:hover,
.rsvp-flow .form-actions button:focus-visible {
    color: #1a1613;
    background: linear-gradient(180deg, rgba(247, 238, 227, 0.96), rgba(231, 220, 206, 0.92));
    border-color: rgba(247, 238, 227, 1);
    box-shadow: 0 4px 18px rgba(242, 236, 227, 0.18);
    transform: translateY(-1px);
}

.rsvp-flow .form-actions button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(242, 236, 227, 0.1);
}

/* ─── Form Status Messages ──────────────────────────────────────────────────── */

.form-status {
    margin: 0;
    padding: 0.55rem 0.9rem;
    border-radius: 0.65rem;
    font-size: 0.78rem;
    color: rgba(242, 236, 227, 0.72);
    line-height: 1.5;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    background: transparent;
}

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

.form-status.is-success {
    color: #a0d9b4;
    background: rgba(160, 217, 180, 0.08);
    border: 1px solid rgba(160, 217, 180, 0.18);
}

.form-status.is-error {
    color: #e8a0a0;
    background: rgba(232, 160, 160, 0.08);
    border: 1px solid rgba(232, 160, 160, 0.18);
}

.form-status.is-sending {
    color: rgba(242, 236, 227, 0.6);
    background: rgba(242, 236, 227, 0.04);
    border: 1px solid rgba(242, 236, 227, 0.1);
}

.hidden-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

.full-width {
    grid-column: 1 / -1;
}

button {
    padding: 0.95rem 1.5rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--cream);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

button:hover,
button:focus-visible {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--cream);
}

.footer {
    padding: 1rem 0 0.4rem;
    text-align: center;
}

.footer p {
    margin: 0;
    font-size: 0.88rem;
}

.reveal-block,
.reveal-card {
    opacity: 0;
    transform: translate3d(0, calc(28px + var(--parallax-offset, 0px)), 0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-block.is-visible,
.reveal-card.is-visible {
    opacity: 1;
    transform: translate3d(0, var(--parallax-offset, 0px), 0);
}

.admin-body {
    color: var(--ink);
    background: #c9c1b7;
}

.admin-body .page-backdrop {
    filter: saturate(0.35) brightness(0.8) blur(2.6px);
}

.admin-body .page-grain,
.admin-body .orb {
    display: none;
}

.admin-body .site-shell {
    padding: 1rem 0 2rem;
}

.admin-body .topbar {
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(20, 18, 16, 0.28);
    color: var(--cream);
    backdrop-filter: blur(16px);
}

.admin-body .topnav a,
.admin-body .brand {
    color: var(--cream);
}

.admin-layout {
    display: block;
}

.admin-login-layout {
    max-width: 38rem;
    margin: 3rem auto 0;
}

.admin-login-card {
    border-radius: 1.8rem;
}

.admin-login-form {
    display: grid;
    gap: 1.2rem;
    margin-top: 1.4rem;
}

.admin-login-form label {
    display: grid;
    gap: 0.6rem;
}

.admin-login-form span {
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(22, 19, 17, 0.56);
}

.admin-login-form input {
    width: 100%;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(22, 19, 17, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.55);
    color: var(--ink);
}

.paper-card {
    padding: 1.8rem;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 2rem;
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.94), rgba(245, 239, 231, 0.92));
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.paper-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--panel-line);
    border-radius: inherit;
    pointer-events: none;
}

.paper-card,
.admin-status {
    position: relative;
    overflow: hidden;
}

.paper-card .section-title,
.admin-body .micro-copy,
.admin-body .body-copy,
.admin-body .field-hint,
.admin-status {
    color: rgba(22, 19, 17, 0.7);
}

.admin-body .eyebrow,
.admin-body .admin-grid span {
    color: rgba(22, 19, 17, 0.56);
}

.admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.5rem;
}

.admin-grid input,
.admin-grid textarea {
    width: 100%;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(22, 19, 17, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.55);
    color: var(--ink);
}

.admin-grid textarea {
    resize: vertical;
}

.admin-grid input[type='file'] {
    padding: 0.7rem 0.8rem;
}

.admin-editor-block {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid rgba(22, 19, 17, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.5);
}

.upload-field {
    gap: 0.5rem;
}

.admin-image-preview {
    width: 100%;
    max-height: 14rem;
    object-fit: cover;
    border-radius: 0.9rem;
    border: 1px solid rgba(22, 19, 17, 0.12);
}

.palette-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
}

.palette-grid label {
    display: grid;
    gap: 0.45rem;
}

.palette-grid input[type='color'] {
    width: 100%;
    min-height: 2.7rem;
    padding: 0.2rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(22, 19, 17, 0.12);
}

.palette-grid small {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(22, 19, 17, 0.6);
}

.schedule-list,
.gallery-new-list,
.gallery-existing-list {
    display: grid;
    gap: 0.7rem;
}

.schedule-row,
.gallery-new-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
    gap: 0.6rem;
    align-items: center;
}

.gallery-new-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
}

.gallery-existing-item {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.7rem;
    border: 1px solid rgba(22, 19, 17, 0.12);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.52);
}

.gallery-existing-item img {
    width: 100%;
    height: 4.2rem;
    object-fit: cover;
    border-radius: 0.6rem;
}

.gallery-remove-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.gallery-remove-toggle span {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(22, 19, 17, 0.65);
}

.admin-mini-button {
    padding: 0.65rem 0.95rem;
    border-radius: 0.8rem;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-mini-button.danger {
    border-color: rgba(165, 66, 49, 0.5);
    color: #a54231;
    background: rgba(165, 66, 49, 0.08);
}

.admin-mini-button.danger:hover,
.admin-mini-button.danger:focus-visible {
    background: rgba(165, 66, 49, 0.16);
    color: #7d2619;
}

.gallery-upload-heading {
    margin-top: 0.5rem;
}

.admin-status {
    margin-top: 1rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(22, 19, 17, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.45);
}

.admin-actions {
    margin-top: 1.5rem;
    justify-content: flex-start;
}

.admin-security {
    margin-top: 2.2rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(22, 19, 17, 0.14);
}

.admin-panel-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.admin-tab-link {
    border-radius: 999px;
    padding: 0.6rem 0.95rem;
    border: 1px solid rgba(22, 19, 17, 0.16);
    background: rgba(255, 255, 255, 0.5);
    color: rgba(22, 19, 17, 0.78);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-tab-link:hover,
.admin-tab-link:focus-visible {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(22, 19, 17, 0.3);
    color: rgba(22, 19, 17, 0.95);
}

.admin-tab-link.is-active {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
}

.admin-top-tab {
    text-decoration: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--cream-soft);
    border-color: rgba(255, 255, 255, 0.25);
}

.admin-body .topnav a.admin-top-tab::after {
    display: none;
}

.admin-body .topnav a.admin-top-tab:hover,
.admin-body .topnav a.admin-top-tab:focus-visible {
    color: var(--cream);
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.16);
}

.admin-body .topnav a.admin-top-tab.is-active {
    color: var(--ink);
    background: var(--cream);
    border-color: var(--cream);
}

.admin-panel-section {
    display: none;
}

.admin-panel-section.is-active {
    display: block;
}

.admin-security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.8rem;
    margin-top: 1rem;
}

.admin-security-grid label {
    display: grid;
    gap: 0.6rem;
}

.admin-security-grid span {
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(22, 19, 17, 0.56);
}

.admin-security-grid input {
    width: 100%;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(22, 19, 17, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.55);
    color: var(--ink);
}

.admin-security-form {
    margin-top: 0.8rem;
}

.admin-board {
    margin-top: 1.8rem;
}

.admin-table-wrap {
    margin-top: 1rem;
    overflow-x: auto;
    border: 1px solid rgba(22, 19, 17, 0.12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.52);
}

.admin-table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 0.75rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid rgba(22, 19, 17, 0.1);
    vertical-align: top;
    font-size: 0.88rem;
    color: rgba(22, 19, 17, 0.78);
}

.admin-table th {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(22, 19, 17, 0.58);
    white-space: nowrap;
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-table tbody tr {
    transition: background 0.2s ease;
}

.admin-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.62);
}

.admin-message-link {
    border: 0;
    background: transparent;
    color: rgba(22, 19, 17, 0.82);
    text-align: left;
    padding: 0;
    border-bottom: 1px dashed rgba(22, 19, 17, 0.45);
    border-radius: 0;
    font-size: 0.86rem;
    line-height: 1.5;
}

.admin-message-link:hover,
.admin-message-link:focus-visible {
    color: rgba(22, 19, 17, 1);
    border-bottom-color: rgba(22, 19, 17, 0.8);
    background: transparent;
}

.admin-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 200;
}

.admin-modal.is-open {
    display: flex;
}

.admin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 6, 6, 0.62);
    backdrop-filter: blur(3px);
}

.admin-modal-card {
    position: relative;
    width: min(42rem, 100%);
    max-height: min(80vh, 40rem);
    overflow: auto;
    padding: 1.2rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: linear-gradient(180deg, rgba(255, 251, 246, 0.98), rgba(245, 239, 231, 0.96));
    box-shadow: var(--shadow);
}

.admin-modal-header {
    margin-bottom: 0.7rem;
}

.admin-modal-close {
    border-radius: 0.8rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-modal-body {
    margin: 0;
    color: rgba(22, 19, 17, 0.82);
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
}

.modal-open {
    overflow: hidden;
}

.field-hint {
    font-size: 0.82rem;
}

.admin-body button {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
}

.admin-body button:hover,
.admin-body button:focus-visible {
    background: transparent;
    color: var(--ink);
}

@keyframes floatDrift {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(0, -24px, 0);
    }
}

@keyframes slowZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.06);
    }
}

@keyframes caretBlink {
    0%,
    50% {
        opacity: 1;
    }
    50.01%,
    100% {
        opacity: 0;
    }
}

@keyframes scrollPulse {
    0%,
    100% {
        transform: scaleX(0.55);
        opacity: 0.45;
    }
    50% {
        transform: scaleX(1);
        opacity: 1;
    }
}

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

    .orb,
    .scroll-line,
    .hero-media img,
    .section-divider-ornament,
    .intro-aura-a,
    .intro-aura-b,
    .a1,
    .a2,
    .a3 {
        animation: none !important;
    }

    .reveal-block,
    .reveal-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 1080px) {
    .hero-panel,
    .detail-river,
    .rsvp-flow,
    .countdown-band,
    .flow-section,
    .program-rail,
    .gallery-ribbon {
        grid-template-columns: 1fr;
    }

    .rsvp-flow .section-stamp {
        position: static;
        margin-bottom: -0.5rem;
    }

    .section-stamp,
    .rail-content-wrap,
    .gallery-ribbon-track {
        grid-column: auto;
    }

    .section-stamp {
        position: static;
    }

    .hero-panel {
        min-height: auto;
        padding-top: 1rem;
    }

    .hero-media {
        justify-self: start;
        width: min(100%, 31rem);
    }

    .public-body:not(.ar-body) .hero-media {
        width: min(100%, 33rem);
    }

    .stream-image {
        margin-top: 0;
        max-width: 28rem;
    }

    .image-ribbon {
        min-height: 0;
        display: grid;
        gap: 1rem;
        justify-items: center;
        width: 100%;
    }

    .public-body .ribbon-image {
        position: static;
        width: min(100%, 34rem);
        height: auto;
        margin-inline: auto;
        transform: none;
    }

    .public-body .ribbon-image-main,
    .public-body .ribbon-image-offset {
        width: min(100%, 34rem);
        height: auto;
    }

    .public-body .ribbon-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-position: center;
    }

    .countdown-strip,
    .flow-form,
    .admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-ribbon-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-flow-item,
    .gallery-span-wide,
    .gallery-span-tall {
        grid-column: span 1;
    }

    .gallery-span-tall img,
    .gallery-flow-item img {
        min-height: 22rem;
    }

    .gallery-shift-down {
        margin-top: 0;
    }
}

@media (max-width: 720px) {
    .site-shell {
        width: min(calc(100% - 1rem), var(--max-width));
    }

    .mobile-lang-switch {
        display: inline-flex;
        min-width: 3rem;
        min-height: 3rem;
        padding: 0.5rem 0.92rem;
        font-size: 0.8rem;
        letter-spacing: 0.1em;
        border-radius: 999px;
    }

    .public-body .topbar-minimal {
        display: none;
    }

    .public-body .site-shell {
        padding-top: 0.8rem;
    }

    .public-body .single-page {
        gap: clamp(2.2rem, 8vw, 3.6rem);
        padding-top: 0.6rem;
    }

    .public-body .orb,
    .public-body .scroll-note {
        display: none;
    }

    .public-body .hero-media img,
    .public-body .section-divider-ornament {
        animation: none;
    }

    .public-body .display-title {
        font-size: clamp(2.6rem, 13vw, 4.3rem);
        line-height: 0.95;
    }

    .public-body .section-title {
        font-size: clamp(2rem, 9vw, 3rem);
        line-height: 1.02;
    }

    .public-body .eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.2em;
    }

    .public-body .hero-subline {
        font-size: 0.76rem;
        letter-spacing: 0.12em;
    }

    .public-body .hero-lead,
    .public-body .body-copy {
        font-size: 0.98rem;
        line-height: 1.75;
    }

    .public-body .micro-copy,
    .public-body .footer p {
        font-size: 0.84rem;
        line-height: 1.6;
    }

    .public-body .hero-copy,
    .public-body .stream-copy,
    .public-body .band-intro,
    .public-body .detail-block,
    .public-body .rail-header,
    .public-body .rsvp-copy,
    .public-body .footer {
        text-align: center;
        margin-inline: auto;
    }

    .public-body .hero-panel .hero-copy {
        display: grid;
        justify-items: center;
        text-align: center;
        width: 100%;
    }

    .public-body .hero-panel .display-title,
    .public-body .hero-panel .hero-subline,
    .public-body .hero-panel .hero-lead {
        margin-inline: auto;
    }

    .public-body .hero-panel .hero-copy > * {
        margin-inline: auto;
    }

    .public-body .hero-panel .hero-subline {
        width: fit-content;
    }

    .public-body .flow-section,
    .public-body .program-rail,
    .public-body .gallery-ribbon,
    .public-body .detail-river,
    .public-body .countdown-band,
    .public-body .rsvp-flow {
        justify-items: center;
    }

    .public-body .section-stamp {
        justify-self: center;
        text-align: center;
    }

    .public-body .hero-media,
    .public-body .stream-image,
    .public-body .flow-form {
        justify-self: center;
        margin-inline: auto;
    }

    .public-body .flow-form {
        width: 100%;
        max-width: 34rem;
    }

    .public-body .gallery-ribbon-track {
        width: 100%;
        justify-items: center;
    }

    .public-body .hero-media,
    .public-body .stream-image,
    .public-body .gallery-flow-item {
        width: 100%;
        max-width: 32rem;
    }

    .public-body:not(.ar-body) .hero-media {
        max-width: 35rem;
    }

    .public-body:not(.ar-body) .hero-panel .hero-media {
        width: 100vw;
        max-width: none;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .public-body:not(.ar-body) .hero-panel .hero-media img {
        width: 100%;
        height: min(74vh, 42rem);
        border-radius: 14rem 14rem 1.4rem 1.4rem;
    }

    .public-body .hero-actions,
    .public-body .form-actions,
    .public-body .rail-header,
    .public-body .split-heading,
    .public-body .hero-subline,
    .public-body .swatches {
        justify-content: center;
        align-items: center;
    }

    .public-body .countdown-band,
    .public-body .countdown-segment,
    .public-body .hero-caption {
        text-align: center;
    }

    .public-body .rail-time,
    .public-body .rail-item h3,
    .public-body .rail-item p,
    .public-body .countdown-segment small,
    .public-body .rsvp-form .form-label,
    .public-body .rsvp-form span {
        text-align: center;
        justify-content: center;
    }

    /* Admin topbar — collapse to stacked */
    .topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.6rem;
    }

    .admin-body .topbar {
        border-radius: 1.2rem;
        padding: 0.9rem 1rem;
    }

    .topnav {
        justify-content: flex-start;
        gap: 0.6rem;
        flex-wrap: wrap;
    }

    .admin-body .topnav a.admin-top-tab {
        font-size: 0.68rem;
        padding: 0.5rem 0.7rem;
    }

    .hero-actions,
    .form-actions,
    .rail-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .flow-form input,
    .flow-form select,
    .flow-form textarea {
        font-size: 16px;
    }

    /* Hero */
    .hero-subline {
        gap: 0.6rem;
        flex-wrap: wrap;
    }

    .hero-media img {
        height: min(68vh, 38rem);
    }

    .hero-caption {
        position: static;
        margin-top: 1rem;
        writing-mode: horizontal-tb;
        gap: 0.35rem;
    }

    .scroll-note {
        position: static;
        margin-top: 0.4rem;
    }

    /* Intro overlay / envelope */
    .intro-stage {
        width: min(96vw, 36rem);
        padding: clamp(1rem, 2vw, 1.3rem);
        border-radius: 1.4rem;
    }

    .intro-kicker {
        font-size: 0.58rem;
    }

    .intro-title {
        font-size: clamp(1.15rem, 5vw, 1.8rem);
    }

    .intro-copy {
        font-size: 0.82rem;
        margin: 0.4rem auto 0.6rem;
    }

    .envlope-wrapper {
        --env-width: min(80vw, 17rem);
    }

    .intro-letter-tag {
        font-size: 0.48rem;
    }

    .intro-letter-name {
        font-size: 0.85rem;
    }

    /* Grids go single column */
    .flow-form,
    .admin-grid,
    .admin-security-grid,
    .gallery-ribbon-track,
    .rail-item {
        grid-template-columns: 1fr;
    }

    .countdown-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }

    /* RSVP sections */
    .rsvp-flow {
        gap: 0.8rem;
        padding: 1.4rem 1.1rem 1.5rem;
    }

    .rsvp-flow .section-stamp {
        position: static;
        margin-bottom: -0.3rem;
    }

    .congrats-flow {
        margin-top: 0;
    }

    .rsvp-flow .rsvp-copy,
    .flow-form {
        padding: 1.1rem 0.95rem;
    }

    .rsvp-flow .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .rsvp-flow .form-actions button {
        width: 100%;
    }

    /* Admin components */
    .palette-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .schedule-row,
    .gallery-new-row,
    .gallery-existing-item {
        grid-template-columns: 1fr;
    }

    .admin-mini-button {
        width: 100%;
    }

    .countdown-segment {
        padding: 0.8rem 0.65rem;
        border-left: 0;
        border: 1px solid var(--line);
        border-radius: 0.9rem;
    }

    .countdown-segment span {
        font-size: clamp(1.8rem, 10vw, 2.8rem);
    }

    .timeline-rail {
        padding-left: 0;
    }

    .timeline-rail::before,
    .rail-marker {
        display: none;
    }

    .public-body .rail-item {
        text-align: center;
        justify-items: center;
    }

    .public-body .rsvp-flow .form-actions {
        align-items: center;
    }

    .public-body .rsvp-flow .form-actions button {
        width: min(100%, 20rem);
    }

    /* Images */
    .image-ribbon {
        min-height: 0;
        display: grid;
        gap: 0.85rem;
    }

    .ribbon-image {
        position: static;
        width: min(100%, 34rem);
        height: auto;
        margin-inline: auto;
    }

    .ribbon-image-main {
        width: min(100%, 34rem);
        height: auto;
    }

    .ribbon-image-offset {
        width: min(100%, 34rem);
        height: auto;
    }

    .ribbon-image img {
        height: auto;
        aspect-ratio: 4 / 5;
        border-radius: 1.2rem;
    }

    .public-body .hero-media img,
    .public-body .stream-image img,
    .public-body .gallery-flow-item img,
    .public-body .ribbon-image img {
        object-position: center;
        margin-inline: auto;
    }

    .swatches span {
        width: 2.35rem;
        height: 2.35rem;
    }

    /* Admin card */
    .paper-card {
        padding: 1.25rem;
        border-radius: 1.4rem;
    }

    .admin-panel-tabs {
        flex-direction: column;
    }

    .admin-tab-link {
        width: 100%;
    }

    .admin-table {
        min-width: 38rem;
    }

    /* Admin modal on mobile */
    .admin-modal {
        padding: 0.5rem;
    }

    .admin-modal-card {
        padding: 1rem;
        border-radius: 1rem;
        max-height: 85vh;
    }

    .admin-modal-close {
        padding: 0.4rem 0.6rem;
        font-size: 0.65rem;
    }

    /* Split heading—stack on mobile */
    .split-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .public-body .split-heading {
        align-items: center;
    }

    /* Section divider */
    .section-divider {
        padding: 0.7rem 0;
    }

    .section-divider-ornament {
        font-size: 0.8rem;
    }

    /* Form status */
    .form-status {
        font-size: 0.72rem;
        padding: 0.5rem 0.7rem;
    }

    /* Admin login */
    .admin-login-layout {
        margin: 1.5rem auto 0;
    }

    .admin-login-card {
        border-radius: 1.4rem;
    }
}

/* ─── Ultra-small phones (< 480px) ─────────────────────────────────── */

@media (max-width: 480px) {
    .site-shell {
        width: calc(100% - 0.5rem);
    }

    .mobile-lang-switch {
        top: 0.7rem;
        left: 0.7rem;
        min-width: 2.8rem;
        min-height: 2.8rem;
        padding: 0.44rem 0.78rem;
        font-size: 0.74rem;
    }

    .admin-body .topbar {
        padding: 0.7rem 0.8rem;
    }

    .admin-body .topnav a {
        font-size: 0.68rem;
    }

    .admin-body .topnav a.admin-top-tab {
        font-size: 0.6rem;
        padding: 0.4rem 0.55rem;
        letter-spacing: 0.08em;
    }

    .intro-stage {
        width: calc(100vw - 1rem);
        padding: 0.85rem 0.75rem 0.9rem;
        border-radius: 1.1rem;
    }

    .intro-title {
        font-size: clamp(1rem, 5vw, 1.5rem);
    }

    .intro-copy {
        font-size: 0.76rem;
    }

    .envlope-wrapper {
        --env-width: min(80vw, 14rem);
    }

    .envlope-wrapper {
        height: calc(var(--env-height) + 2.8rem);
    }

    .hero-panel {
        gap: 0.8rem;
    }

    .display-title {
        font-size: clamp(2.3rem, 11.5vw, 3.4rem);
    }

    .section-title {
        font-size: clamp(1.9rem, 8vw, 2.6rem);
    }

    .rsvp-flow {
        padding: 1.1rem 0.8rem 1.2rem;
        border-radius: 1.4rem;
    }

    .flow-form {
        border-radius: 1rem;
    }

    .paper-card {
        padding: 1rem 0.85rem;
        border-radius: 1.1rem;
    }

    .admin-grid {
        gap: 0.8rem;
    }

    .admin-editor-block {
        padding: 0.7rem;
        border-radius: 0.75rem;
    }

    .admin-image-preview {
        max-height: 10rem;
    }

    .palette-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .admin-table {
        min-width: 32rem;
    }

    .admin-modal-card {
        border-radius: 0.8rem;
        padding: 0.8rem;
    }

    .countdown-segment {
        padding-left: 0.5rem;
    }

    .ribbon-image-main {
        width: 100%;
        height: auto;
    }

    .ribbon-image-offset {
        width: 100%;
        height: auto;
    }

    .image-ribbon {
        min-height: 0;
    }
}