/* ===== Lapisan 1 ===== */
/* Custom Animations & Styles */ @keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}
@keyframes pulse-slow {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.animate-float {
    animation: float 6s ease-in-out infinite;
}
.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}
.animate-spin-slow {
    animation: spin-slow 12s linear infinite;
}
/* Javanese Pattern Overlay */ .bg-kawung {
    background-color: #0f172a;
    background-image: radial-gradient(rgba(56, 189, 248, 0.12) 2px, transparent 2px), radial-gradient(rgba(186, 230, 253, 0.08) 2px, #0f172a 2px);
    background-size: 32px 32px;
    background-position: 0 0, 16px 16px;
}
.glass-ice {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(56, 189, 248, 0.25);
}
.glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(186, 230, 253, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.text-glow {
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.6);
}
/* Hide Scrollbar for clean mobile experience */ .no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ===== Lapisan 2 ===== */
:root {
    --paper:#f5f1e8;
    --ink:#253d50;
    --line:#c7cdcb
}
body {
    background:var(--paper)!important;
    color:var(--ink)!important;
    font-family:'DM Sans',sans-serif!important
}
body>div {
    background:#e5e8e3!important
}
body>div>div.hidden {
    display:none!important
}
main {
    max-width:760px!important;
    background:var(--paper)!important;
    border:0!important;
    box-shadow:none!important
}
.font-serif,.font-script,h1,h2,h3 {
    font-family:'Cormorant Garamond',Georgia,serif!important;
    font-weight:400!important;
    letter-spacing:-.025em!important
}
.font-script {
    font-style:italic
}
h2.font-serif {
    font-size:36px!important;
    line-height:1.2!important
}
h3.font-serif {
    font-size:30px!important
}
[class*="text-ice-"],[class*="text-slate-"] {
    color:var(--ink)!important
}
[class*="text-slate-4"],[class*="text-slate-5"] {
    color:#68767b!important
}
[class*="bg-slate-"],.bg-kawung {
    background:var(--paper)!important;
    background-image:none!important
}
section {
    padding:80px 52px!important;
    border-color:var(--line)!important;
    scroll-margin-top:20px
}
section:nth-child(even) {
    background:#eceee8!important
}
p.text-xs {
    font-size:14px!important;
    line-height:1.9!important
}
.text-glow {
    text-shadow:none!important
}
.glass-card,.glass-ice {
    background:transparent!important;
    backdrop-filter:none!important;
    box-shadow:none!important;
    border:0!important;
    border-top:1px solid var(--line)!important;
    border-radius:0!important
}
.glass-card {
    padding:28px 0!important
}
[class*="shadow"] {
    box-shadow:none!important;
    filter:none!important
}
.animate-float,.animate-pulse-slow,.animate-bounce,.animate-spin-slow {
    animation:none!important
}
[class*="bg-gradient-"] {
    background:#dbe3e2!important
}
button {
    border-radius:2px!important;
    box-shadow:none!important
}
button:hover {
    transform:none!important
}
button[type="submit"],#btn-open-invitation {
    background:var(--ink)!important;
    color:var(--paper)!important;
    font-weight:500!important;
    letter-spacing:.08em!important
}
input,select,textarea {
    background:transparent!important;
    color:var(--ink)!important;
    border:1px solid #aab5b8!important;
    border-radius:2px!important;
    font-size:14px!important
}
#bottom-nav {
    max-width:760px!important;
    background:#f5f1e8f5!important;
    border-color:var(--line)!important;
    padding:16px 10px!important
}
#bottom-nav i {
    display:none
}
#bottom-nav a {
    font-size:11px
}
#audio-control {
    background:var(--paper)!important;
    border:1px solid var(--line)!important;
    width:36px;
    height:36px
}
#audio-control i {
    font-size:16px
}
#cover-overlay {
    max-width:760px!important;
    background:var(--paper)!important;
    padding:36px!important;
    overflow-y:auto;
    border:12px solid var(--paper);
    outline:1px solid #aab5b8;
    outline-offset:-24px
}
.cover-top {
    font-size:10px;
    letter-spacing:.2em;
    text-transform:uppercase;
    display:flex;
    justify-content:space-between;
    padding:8px 12px;
    color:#68767b
}
.cover-center {
    margin:auto;
    padding:30px 0
}
.cover-mark {
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:19px;
    font-style:italic;
    letter-spacing:-3px;
    border:1px solid #9ba9ae;
    border-radius:50%;
    width:47px;
    height:58px;
    display:grid;
    place-items:center;
    margin:0 auto 26px;
    padding-right:3px
}
.cover-kicker {
    font-size:10px;
    letter-spacing:.22em;
    text-transform:uppercase;
    margin-bottom:26px;
    color:#68767b
}
#cover-overlay h1 {
    font-size:clamp(72px,13vw,108px);
    line-height:.82;
    margin:0
}
.cover-amp {
    font-size:44px;
    line-height:1.2;
    font-style:italic;
    color:#82979f;
    display:block;
    margin:8px 0
}
.cover-date {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    margin:30px auto;
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase
}
.cover-date strong {
    font-family:'Cormorant Garamond',serif;
    font-size:40px;
    font-weight:400;
    border-left:1px solid var(--line);
    border-right:1px solid var(--line);
    padding:0 18px;
    line-height:1
}
.cover-guest {
    margin:24px auto 0;
    font-size:11px;
    color:#68767b;
    line-height:1.8
}
.cover-guest h3 {
    font-family:'DM Sans',sans-serif!important;
    font-size:15px;
    font-weight:500!important;
    margin-top:5px;
    letter-spacing:0!important;
    color:var(--ink)
}
.cover-bottom {
    padding:0 0 18px
}
#btn-open-invitation {
    padding:15px 28px;
    font-size:11px;
    border:0
}
.cover-bottom p {
    font-size:9px;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin-top:22px;
    color:#68767b
}
#home {
    min-height:90svh
}
#home>div:first-child svg {
    display:none
}
#home>div:first-child {
    justify-content:center
}
#home .rounded-full {
    border-radius:0!important;
    border:0!important;
    background:transparent!important;
    width:auto!important;
    height:auto!important;
    padding:0!important
}
#home .rounded-full>.absolute {
    display:none
}
#home .font-script.text-5xl {
    font-size:80px;
    line-height:1.3
}
#home .glass-card {
    border:0!important
}
#home>div:last-child i {
    display:none
}
#mempelai .rounded-full {
    background:transparent!important;
    border:1px solid var(--line)
}
#mempelai .rounded-full .rounded-full {
    border:0
}
footer {
    background:var(--ink)!important;
    padding:70px 36px 110px!important
}
footer [class*="text-"],footer .font-script {
    color:var(--paper)!important
}
#toast>div {
    background:var(--ink)!important;
    color:var(--paper)!important
}
@media(min-width:1000px) {
    body>div {
        padding:36px 0
    }
    #cover-overlay {
        top:36px!important;
        bottom:36px!important
    }
    main {
        border:1px solid var(--line)!important
    }
}
@media(max-width:540px) {
    section {
        padding:64px 27px!important
    }
    #cover-overlay {
        padding:28px 20px!important
    }
    .cover-top {
        font-size:8px
    }
    .cover-center {
        padding:25px 0
    }
    .cover-date {
        gap:12px;
        margin:26px auto
    }
    .cover-date strong {
        padding:0 12px
    }
}
@media(prefers-reduced-motion:reduce) {
    * {
        animation:none!important;
        scroll-behavior:auto!important;
        transition:none!important
    }
}

/* ===== javanese-theatre ===== */
:root {
    --paper:#f4eddf;
    --ink:#493822;
    --line:#c7b18b
}
body {
    background:#262c24!important
}
body>div {
    background:#262c24!important;
    padding:0!important
}
main {
    max-width:540px!important;
    border:0!important
}
body.invitation-closed {
    overflow:hidden
}
#cover-overlay {
    max-width:540px!important;
    top:0!important;
    bottom:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    overflow:hidden;
    background:#efe2c9!important;
    display:block;
    transition:opacity .8s ease,visibility .8s ease
}
#cover-overlay[hidden] {
    display:none!important
}
.theatre-scene {
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
    background:#efe2c9
}
.scene-back {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center bottom;
    transform:scale(1.025) translate3d(0,var(--scene-shift,0px),0);
    transform-origin:50% 80%;
    will-change:transform;
    transition:transform .2s linear
}
.scene-veil {
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 8%,#f5ebd64d 22%,#f5ebd60d 60%,transparent 80%)
}
.foreground {
    position:absolute;
    inset:-2%;
    will-change:transform;
    transform:translate3d(0,var(--front-shift,0px),0) scale(1.03);
    transition:transform .2s linear
}
.foreground img {
    width:100%;
    height:100%;
    object-fit:fill
}
.foreground-left {
    clip-path:inset(0 50% 0 0)
}
.foreground-right {
    clip-path:inset(0 0 0 50%)
}
.invitation-copy {
    position:absolute;
    top:16%;
    left:15%;
    right:15%;
    z-index:2;
    transition:opacity .7s ease,transform 1.2s ease;
    color:#493822
}
.eyebrow {
    font-size:9px;
    letter-spacing:.24em;
    line-height:1.8
}
.small-flourish {
    font-size:28px;
    color:#937a4b;
    margin:12px 0
}
#cover-overlay h1 {
    font-size:clamp(44px,11vw,68px);
    line-height:1.05;
    margin:0;
    letter-spacing:-.035em!important
}
#cover-overlay h1 span {
    font-style:italic;
    font-size:.7em;
    color:#8b7148
}
.invitation-date {
    font-size:9px;
    letter-spacing:.14em;
    margin-top:18px;
    line-height:1.9
}
.recipient {
    margin-top:26px
}
.recipient p {
    font-size:10px
}
.recipient h3 {
    font-family:'DM Sans',sans-serif!important;
    letter-spacing:0!important;
    font-size:14px!important;
    font-weight:500!important;
    margin-top:5px
}
#btn-open-invitation {
    margin-top:20px;
    background:#55462e!important;
    color:#fff4df!important;
    font-size:9px;
    letter-spacing:.13em!important;
    padding:12px 18px;
    border:1px solid #88714c!important;
    border-radius:30px!important
}
#btn-open-invitation span {
    margin-left:12px
}
#skip-intro {
    position:absolute;
    right:20px;
    bottom:24px;
    z-index:8;
    color:#fff6e8;
    background:#493822ba;
    border:1px solid #b09a70;
    padding:10px 14px;
    font-size:10px;
    border-radius:24px!important
}
#skip-intro[hidden] {
    display:none
}
.opening .invitation-copy {
    opacity:0;
    transform:translateY(-20px) scale(1.05);
    pointer-events:none
}
.opening .scene-back {
    transform:scale(1.75);
    transition:transform 3.4s cubic-bezier(.25,.1,.2,1)
}
.opening .foreground-left {
    transform:translateX(-50%) scale(1.32);
    transition:transform 2.8s cubic-bezier(.25,.1,.2,1)
}
.opening .foreground-right {
    transform:translateX(50%) scale(1.32);
    transition:transform 2.8s cubic-bezier(.25,.1,.2,1)
}
.intro-finished {
    opacity:0;
    visibility:hidden;
    pointer-events:none
}
.theatre-home {
    position:relative;
    isolation:isolate;
    height:100svh;
    min-height:720px!important;
    padding:0!important;
    background:#efe2c9!important;
    overflow:hidden
}
.hero-copy {
    position:absolute!important;
    top:21%;
    left:13%;
    right:13%;
    z-index:2!important
}
.hero-copy h2 {
    font-size:clamp(52px,12vw,76px)!important;
    line-height:1!important;
    margin:22px 0 14px
}
.hero-copy h2 em {
    font-size:.65em;
    color:#8e7951
}
.hero-fullnames {
    font-size:11px;
    line-height:1.8;
    max-width:230px;
    margin:auto
}
.scroll-cue {
    display:block;
    font-size:10px;
    margin-top:24px;
    letter-spacing:.04em
}
.scroll-cue span {
    display:block;
    margin-top:8px;
    font-size:20px;
    color:#88714c
}
.petal {
    position:absolute;
    color:#c5a56a;
    font-size:12px;
    opacity:.5;
    animation:petal-drift 12s linear infinite
}
.petal-one {
    left:22%;
    top:8%
}
.petal-two {
    right:24%;
    top:35%;
    animation-delay:-6s
}
@keyframes petal-drift {
    0% {
        transform:translate(0,-30px) rotate(0);
        opacity:0
    }
    20%,75% {
        opacity:.55
    }
    100% {
        transform:translate(32px,190px) rotate(160deg);
        opacity:0
    }
}
#bottom-nav {
    max-width:540px!important;
    background:#f4eddfed!important
}
.portrait-slot {
    width:min(100%,270px);
    aspect-ratio:3/4;
    margin:0 auto 30px!important;
    border:1px solid #bcaa87;
    background:#e8e0d1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    border-radius:140px 140px 2px 2px
}
.portrait-slot:before {
    content:'';
    position:absolute;
    inset:8px;
    border:1px solid #faf3e5;
    border-radius:inherit;
    pointer-events:none
}
.portrait-initial {
    font-family:'Cormorant Garamond',serif;
    font-style:italic;
    font-size:64px;
    color:#a19071
}
.portrait-slot figcaption {
    font-size:9px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#817354;
    margin-top:12px
}
.portrait-slot img {
    height:100%;
    width:100%;
    object-fit:cover
}
.portrait-slot:has(img) span,.portrait-slot:has(img) figcaption {
    display:none
}
#wedding-content>section:not(#home) {
    background-color:var(--paper)!important;
    background-image:radial-gradient(ellipse at top,#c1ac7b12,transparent 70%)!important
}
#wedding-content>section:nth-child(even) {
    background-color:#e8e5d8!important
}
.reveal-item {
    opacity:0;
    transform:translateY(26px);
    transition:opacity 1s ease,transform 1s cubic-bezier(.2,.65,.3,1)
}
.reveal-item.in-view {
    opacity:1;
    transform:none
}
.music-error {
    font-size:11px
}
#audio-control {
    background:#f4eddf!important;
    border:1px solid #b9a57e!important
}
@media(min-width:1000px) {
    body:before {
        content:'ARDHI & ARDA';
        position:fixed;
        left:5vw;
        top:48%;
        font-family:'Cormorant Garamond',Georgia,serif;
        font-size:25px;
        letter-spacing:.1em;
        color:#d0c2a5;
        max-width:200px
    }
    body:after {
        content:'19 · 12 · 2026';
        position:fixed;
        right:6vw;
        top:50%;
        color:#c8b997;
        font-size:11px;
        letter-spacing:.25em
    }
}
@media(max-height:730px) {
    .invitation-copy {
        top:12%
    }
    .recipient {
        margin-top:16px
    }
    .small-flourish {
        margin:6px 0
    }
    .invitation-date {
        margin-top:12px
    }
    .theatre-home {
        min-height:100svh!important
    }
}
@media(prefers-reduced-motion:reduce) {
    .scene-back,.foreground {
        transform:none!important;
        transition:none!important
    }
    .petal {
        display:none
    }
    .reveal-item {
        opacity:1;
        transform:none
    }
    .opening .invitation-copy {
        transform:none!important
    }
}

/* ===== floral-first-page ===== */
#cover-overlay.floral-cover {
    background:#f4ebdb!important;
    isolation:isolate
}
.cover-floral-image {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:fill;
    z-index:0;
    transition:transform 1.5s ease,filter 1.5s ease;
    transform:scale(1.005)
}
.floral-cover-copy {
    position:absolute;
    top:24%;
    left:16%;
    right:16%;
    z-index:2;
    color:#512831;
    display:flex;
    align-items:center;
    flex-direction:column;
    transition:opacity .7s ease,transform 1s ease
}
.couple-oval {
    height:clamp(150px,24svh,240px);
    aspect-ratio:.72;
    flex-shrink:0;
    border-radius:50%;
    border:1px solid #6c3540;
    outline:1px solid #a88e60;
    outline-offset:3px;
    background:linear-gradient(145deg,#ede2cb,#f9f1e3 48%,#dfcfb5);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative;
    margin:0 0 18px
}
.couple-oval:before {
    content:'';
    position:absolute;
    inset:7px;
    border:1px solid #c4ad87;
    border-radius:50%;
    pointer-events:none
}
.couple-monogram {
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:42px;
    color:#8d6e56;
    letter-spacing:-.1em;
    line-height:1
}
.couple-monogram span {
    font-style:italic;
    font-size:.65em;
    margin:0 5px
}
.couple-oval figcaption {
    font-size:8px;
    font-family:'Cormorant Garamond',Georgia,serif;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#917b5c;
    margin-top:10px
}
.couple-oval img {
    width:100%;
    height:100%;
    object-fit:cover
}
.couple-oval:has(img) .couple-monogram,.couple-oval:has(img) figcaption {
    display:none
}
.floral-overline {
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:10px;
    letter-spacing:.2em;
    color:#473b32
}
#cover-overlay.floral-cover h1 {
    font-size:clamp(30px,7.5vw,42px)!important;
    line-height:1.15;
    margin:6px 0 10px;
    color:#602f38;
    letter-spacing:.02em!important
}
.guest-greeting {
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:12px;
    line-height:1.5;
    letter-spacing:.03em;
    color:#433b33
}
#cover-overlay.floral-cover h3 {
    font-family:'Cormorant Garamond',Georgia,serif!important;
    font-size:22px!important;
    font-weight:500!important;
    letter-spacing:0!important;
    line-height:1.3;
    color:#33291f;
    margin-top:1px
}
#cover-overlay.floral-cover #btn-open-invitation {
    margin-top:8px;
    padding:10px 25px;
    background:linear-gradient(90deg,#602733,#aa8583)!important;
    border:1px solid #592632!important;
    outline:1px solid #bba17b;
    outline-offset:2px;
    color:#fff9ed!important;
    font-family:'Cormorant Garamond',Georgia,serif!important;
    font-size:11px;
    letter-spacing:.04em!important;
    line-height:1.2;
    border-radius:30px!important;
    min-width:165px
}
.name-apology {
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:10px;
    line-height:1.4;
    color:#706253;
    margin-top:12px;
    max-width:320px
}
.floral-cover.opening .floral-cover-copy {
    opacity:0;
    transform:translateY(-12px)
}
.floral-cover.opening .cover-floral-image {
    transform:scale(1.1);
    filter:brightness(1.06)
}
.scene-arrival .scene-back {
    animation:joglo-arrival 3.5s cubic-bezier(.2,.6,.2,1) both
}
.scene-arrival .foreground-left {
    animation:frame-arrival-left 3s ease both
}
.scene-arrival .foreground-right {
    animation:frame-arrival-right 3s ease both
}
.scene-arrival .hero-copy {
    animation:hero-arrival 2.3s ease both
}
@keyframes joglo-arrival {
    from {
        transform:scale(1.3)
    }
    to {
        transform:scale(1.025)
    }
}
@keyframes frame-arrival-left {
    from {
        transform:translateX(-7%) scale(1.1)
    }
    to {
        transform:translateX(0) scale(1.03)
    }
}
@keyframes frame-arrival-right {
    from {
        transform:translateX(7%) scale(1.1)
    }
    to {
        transform:translateX(0) scale(1.03)
    }
}
@keyframes hero-arrival {
    0%,30% {
        opacity:0;
        transform:translateY(20px)
    }
    100% {
        opacity:1;
        transform:translateY(0)
    }
}
@media(max-height:700px) {
    .floral-cover-copy {
        top:19%
    }
    .couple-oval {
        height:23svh;
        min-height:112px;
        margin-bottom:12px
    }
    #cover-overlay.floral-cover h1 {
        font-size:30px!important;
        margin:4px 0 7px
    }
    .name-apology {
        font-size:9px;
        margin-top:9px
    }
}
@media(prefers-reduced-motion:reduce) {
    .scene-arrival .scene-back,.scene-arrival .foreground,.scene-arrival .hero-copy {
        animation:none!important
    }
    .floral-cover.opening .cover-floral-image {
        transform:none
    }
    .floral-cover-copy {
        transition:none
    }
}

/* ===== individual-compositions ===== */
#wedding-content>section[data-decor] {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border:0!important;
    padding:76px 38px 80px!important
}
#wedding-content section[data-decor] h2 {
    font-size:35px!important;
    line-height:1.15!important;
    color:#52372f!important
}
#wedding-content section[data-decor] [class*="border-ice-"],#wedding-content section[data-decor] [class*="border-slate-"] {
    border-color:#b5a07c66!important
}
#wedding-content section[data-decor] .w-12.h-0\.5 {
    height:1px!important;
    background:#ad9168!important
}
#wedding-content section[data-decor] [class*="bg-ice-"] {
    background-color:#b19b7220!important
}
/* Salam: quiet manuscript page with independent corner strokes. */ #wedding-content>section[data-decor="salam"] {
    padding:90px 48px!important;
    background:#ede7d8!important
}
section[data-decor="salam"]:before,section[data-decor="salam"]:after {
    content:'';
    position:absolute;
    width:75px;
    height:75px;
    border:1px solid #a68d5e66;
    pointer-events:none
}
section[data-decor="salam"]:before {
    top:28px;
    left:24px;
    border-right:0;
    border-bottom:0
}
section[data-decor="salam"]:after {
    bottom:28px;
    right:24px;
    border-left:0;
    border-top:0
}
section[data-decor="salam"] .glass-card {
    border:0!important;
    padding:24px 0 0!important;
    text-align:center
}
section[data-decor="salam"] .fa-quote-right {
    display:none
}
/* Portraits: flowers belong to each portrait, never to section height. */ #wedding-content>#mempelai {
    background:#f7f0e4!important;
    padding:75px 46px 80px!important
}
#mempelai:before {
    content:'A & A';
    position:absolute;
    left:-42px;
    top:46%;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:210px;
    line-height:1;
    color:#a38c6420;
    transform:rotate(-90deg);
    pointer-events:none
}
#mempelai>.glass-card {
    background:transparent!important;
    border:0!important;
    padding:12px 0 38px!important;
    overflow:visible
}
#mempelai>.glass-card:last-of-type {
    padding-bottom:0!important
}
.portrait-arrangement {
    position:relative;
    width:min(100%,280px);
    margin:0 auto 35px;
    isolation:isolate
}
.portrait-slot {
    width:100%!important;
    aspect-ratio:3/4;
    margin:0!important;
    border-radius:150px 150px 3px 3px;
    background:#e8e1d2;
    border:1px solid #b8a37f
}
.portrait-bouquet {
    position:absolute;
    width:160px;
    height:auto;
    right:-48px;
    bottom:-24px;
    transform:rotate(-13deg);
    pointer-events:none;
    z-index:2
}
#mempelai>.glass-card:last-of-type .portrait-bouquet {
    right:auto;
    left:-48px;
    transform:scaleX(-1) rotate(-13deg)
}
#mempelai .glass-card>.border-t {
    margin-top:20px;
    padding-top:16px
}
#mempelai .glass-card h3 {
    font-size:35px!important
}
#mempelai>.text-center:has(.font-script) {
    margin:8px 0 38px
}
#mempelai>.text-center .font-script {
    font-size:52px;
    color:#a68c61!important
}
/* Story: a bird frontispiece and numbered manuscript chapters. */ #wedding-content>#story {
    background:#e7e8dc!important;
    padding:55px 36px 80px!important
}
.story-frontispiece {
    display:flex;
    align-items:center;
    gap:16px;
    justify-content:center;
    margin:0 0 24px!important
}
.story-frontispiece img {
    width:105px;
    height:105px;
    object-fit:contain
}
.story-rule {
    height:1px;
    width:58px;
    background:#a38b5b66
}
#story>.relative {
    border-left:0!important;
    margin:34px 0 0!important;
    padding:0!important;
    counter-reset:chapter
}
#story>.relative>.group {
    position:relative;
    margin:0 0 28px!important;
    padding-left:34px;
    counter-increment:chapter
}
#story>.relative>.group:nth-child(even) {
    padding-left:0;
    padding-right:34px
}
#story>.relative>.group:before {
    content:'0' counter(chapter);
    position:absolute;
    top:14px;
    left:0;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:38px;
    color:#9a8458
}
#story>.relative>.group:nth-child(even):before {
    left:auto;
    right:0
}
#story>.relative>.group>.absolute {
    display:none
}
#story .glass-card {
    background:#faf6e9bd!important;
    border:1px solid #ad9b7544!important;
    border-radius:2px!important;
    padding:24px 22px!important;
    box-shadow:3px 4px 0 #a7997614!important
}
#story .glass-card>span {
    background:transparent!important;
    padding:0;
    font-size:10px;
    letter-spacing:.16em;
    color:#937949!important
}
#story h4 {
    font-size:28px;
    line-height:1.1;
    margin:12px 0!important
}
#story p {
    font-size:13px!important;
    line-height:1.9!important
}
/* Events: a landscape plate followed by compact architectural cards. */ #wedding-content>#acara {
    background:#f4ebdd!important;
    padding:75px 34px 75px!important
}
.event-pendopo {
    margin:20px -34px 22px!important;
    position:relative
}
.event-pendopo img {
    width:100%;
    height:auto;
    display:block;
    mix-blend-mode:multiply;
    mask-image:linear-gradient(transparent,#000 12%,#000 90%,transparent)
}
#acara>.glass-card {
    border:1px solid #b7a07b88!important;
    background:#fff9efb8!important;
    padding:24px!important;
    border-radius:3px!important
}
#acara>.glass-card:not(:has(#days)) {
    border-top:3px double #a78b59!important
}
#acara .grid>div {
    background:transparent!important;
    border:0!important;
    border-right:1px solid #b8a17b66!important;
    border-radius:0
}
#acara .grid>div:last-child {
    border:0!important
}
#acara .grid .font-serif {
    font-size:34px
}
#acara .glass-card h3 {
    font-size:30px!important
}
#acara .glass-card .w-10 {
    background:#cbb68a25!important;
    border-radius:50%
}
#acara>.text-center:last-child a {
    background:#5e4b31!important;
    color:#fff4df!important;
    border-color:#5e4b31!important
}
/* Gifts: letter paper, diagonal folds and a wax-like monogram seal. */ #wedding-content>#amplop {
    background:#e9dfcf!important;
    padding:65px 36px 75px!important
}
.letter-emblem {
    height:94px;
    position:relative;
    display:grid;
    place-items:center;
    margin:0 auto 24px!important;
    width:110px
}
.envelope-outline {
    position:absolute;
    top:10px;
    left:5px;
    width:100px;
    height:65px;
    border:1px solid #a38960;
    background:linear-gradient(32deg,transparent 49%,#a3896066 50%,transparent 51%),linear-gradient(-32deg,transparent 49%,#a3896066 50%,transparent 51%);
    border-radius:2px
}
.letter-emblem>span {
    position:relative;
    top:7px;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    background:#763d46;
    color:#f4e4c7;
    border:3px double #ad7e75;
    border-radius:50%;
    font-family:'Cormorant Garamond',serif;
    font-size:24px;
    font-style:italic
}
#amplop>.glass-card {
    background:#fcf5e8!important;
    border:1px solid #b7a17b66!important;
    padding:30px 24px 25px!important;
    border-radius:1px!important;
    position:relative
}
#amplop>.glass-card:before {
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:42px;
    height:42px;
    background:linear-gradient(225deg,#e9dfcf 49%,#bfaa8255 50%,#f8efde 53%);
    pointer-events:none
}
#amplop>.glass-card .text-2xl {
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:29px;
    letter-spacing:.06em
}
#amplop button {
    border-radius:0!important;
    border-bottom:1px solid #a78c61!important;
    background:transparent!important;
    padding-left:0;
    padding-right:0
}
#amplop>.glass-card>div:first-child {
    font-size:11px;
    letter-spacing:.15em
}
/* Guest book: its own kawung band, with a clean writing surface. */ #wedding-content>#rsvp {
    background:#f5ede1!important;
    padding:70px 36px 80px!important
}
#rsvp:before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:220px;
    background-color:#713c43;
    background-image:radial-gradient(ellipse 11px 20px at 50% 0,transparent 80%,#e4d1a647 83%,transparent 90%),radial-gradient(ellipse 11px 20px at 50% 100%,transparent 80%,#e4d1a647 83%,transparent 90%);
    background-size:35px 45px;
    z-index:-1
}
#rsvp>.text-center {
    min-height:130px
}
#rsvp>.text-center span,#rsvp>.text-center h2 {
    color:#f5e9d5!important
}
#rsvp>.text-center .h-0\.5 {
    background:#cbb381!important
}
.rsvp-heading-ornament {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin:0 auto 12px!important;
    color:#d8bd8b
}
.rsvp-heading-ornament span {
    width:42px;
    height:1px;
    background:#d8bd8b66
}
.rsvp-heading-ornament b {
    font-weight:400;
    font-size:30px
}
#rsvp #rsvp-form {
    margin-top:-8px!important;
    background:#fff9ef!important;
    border:1px solid #bda78377!important;
    padding:28px 23px!important;
    border-radius:2px!important;
    box-shadow:0 8px 20px #49392208!important
}
#rsvp input,#rsvp textarea,#rsvp select {
    background:#f7f0e6!important;
    border-color:#bda98866!important;
    padding:13px!important
}
#rsvp label {
    font-size:11px
}
#rsvp button[type="submit"] {
    background:#713c43!important;
    color:#fff4e3!important;
    letter-spacing:.08em
}
#ucapan-feed>.glass-card {
    background:#fcf7ed!important;
    border:0!important;
    border-left:2px solid #ac9167!important;
    padding:18px!important;
    margin-bottom:14px
}
#ucapan-feed [class*="bg-emerald-"] {
    color:#687754!important;
    background:#74856418!important
}
#wedding-content footer {
    background:#3d4438!important;
    position:relative;
    padding:65px 48px 110px!important;
    overflow:hidden;
    isolation:isolate
}
#wedding-content footer:before {
    content:'';
    position:absolute;
    bottom:-35px;
    right:-35px;
    width:170px;
    height:170px;
    background:url('assets/story-bird.png') center/contain no-repeat;
    opacity:.2;
    z-index:-1
}
#wedding-content footer .font-script {
    font-size:43px
}
#wedding-content footer p {
    font-size:13px!important;
    line-height:1.9!important;
    color:#f4ead8!important
}
#bottom-nav a {
    color:#70533f!important
}
#bottom-nav {
    border-color:#b39a72!important
}
@media(max-width:390px) {
    #wedding-content>section[data-decor] {
        padding-left:27px!important;
        padding-right:27px!important
    }
    #wedding-content>#mempelai {
        padding-left:38px!important;
        padding-right:38px!important
    }
    .portrait-bouquet {
        width:135px;
        right:-35px
    }
    #mempelai>.glass-card:last-of-type .portrait-bouquet {
        left:-35px
    }
    .event-pendopo {
        margin-left:-27px!important;
        margin-right:-27px!important
    }
    #story .glass-card {
        padding:21px 18px!important
    }
    #story>.relative>.group {
        padding-left:24px
    }
    #story>.relative>.group:nth-child(even) {
        padding-right:24px
    }
    #story>.relative>.group:before {
        font-size:29px
    }
    #wedding-content section[data-decor] h2 {
        font-size:32px!important
    }
    #rsvp #rsvp-form {
        padding:24px 18px!important
    }
}
@media(prefers-reduced-motion:no-preference) {
    .story-frontispiece img {
        animation:story-bird-sway 9s ease-in-out infinite
    }
    @keyframes story-bird-sway {
        0%,100% {
            transform:translateY(0) rotate(-3deg)
        }
        50% {
            transform:translateY(-6px) rotate(2deg)
        }
    }
}

/* ===== Lapisan 6 ===== */
#wedding-content>#rsvp>.text-center h2,#wedding-content>#rsvp>.text-center span {
    color:#fff0d7!important
}
#wedding-content>#rsvp:before {
    height:260px
}
#wedding-content>#rsvp>.text-center {
    min-height:142px
}

/* ===== stable-opening-layout ===== */
/* Keep the content centre unchanged when scrolling is unlocked. */ html {
    overflow-y:scroll;
    scrollbar-gutter:stable both-edges
}
#cover-overlay {
    left:50%!important;
    right:auto!important;
    margin-left:0!important;
    margin-right:0!important;
    width:min(540px,100%)!important;
    transform:translateX(-50%)
}
/* Animation endpoints match the live parallax transform exactly. */ @keyframes joglo-arrival {
    from {
        transform:scale(1.3) translate3d(0,var(--scene-shift,0px),0)
    }
    to {
        transform:scale(1.025) translate3d(0,var(--scene-shift,0px),0)
    }
}
@keyframes frame-arrival-left {
    from {
        transform:translate3d(-7%,var(--front-shift,0px),0) scale(1.1)
    }
    to {
        transform:translate3d(0,var(--front-shift,0px),0) scale(1.03)
    }
}
@keyframes frame-arrival-right {
    from {
        transform:translate3d(7%,var(--front-shift,0px),0) scale(1.1)
    }
    to {
        transform:translate3d(0,var(--front-shift,0px),0) scale(1.03)
    }
}

/* ===== ice-blue-theme ===== */
:root {
    --paper:#f1f8fc;
    --ink:#29485e;
    --line:#b3c9d6
}
html,body,body>div {
    background:#e1edf4!important
}
main,#wedding-content {
    background:#f1f8fc!important
}
body,[class*="text-ice-"],[class*="text-slate-"] {
    color:#29485e!important
}
[class*="text-slate-4"],[class*="text-slate-5"] {
    color:#647e90!important
}
#cover-overlay.floral-cover {
    background:#f1f8fc!important
}
.cover-floral-image {
    filter:grayscale(1) sepia(.22) hue-rotate(160deg) saturate(1.65) brightness(1.08)
}
.floral-cover.opening .cover-floral-image {
    filter:grayscale(1) sepia(.22) hue-rotate(160deg) saturate(1.65) brightness(1.12)
}
#cover-overlay.floral-cover h1,#cover-overlay.floral-cover h3,.floral-overline,.guest-greeting {
    color:#29485e!important
}
.name-apology {
    color:#668093!important
}
.couple-oval {
    background:linear-gradient(145deg,#d9e9f3,#f7fbff 48%,#c9dfec)!important;
    border-color:#89aabb!important;
    outline-color:#b1c6d4!important
}
.couple-oval:before {
    border-color:#a6bfce!important
}
.couple-monogram,.couple-oval figcaption {
    color:#6c94ad!important
}
#cover-overlay.floral-cover #btn-open-invitation {
    background:linear-gradient(90deg,#416b89,#86aabd)!important;
    border-color:#66899f!important;
    outline-color:#c1d4e0!important;
    color:#fff!important
}
.scene-back,.event-pendopo img {
    filter:saturate(.38) sepia(.1) hue-rotate(155deg) brightness(1.08)
}
.foreground img,.portrait-bouquet,.story-frontispiece img {
    filter:grayscale(1) sepia(.25) hue-rotate(160deg) saturate(1.8) brightness(1.1)
}
.theatre-scene,.theatre-home {
    background:#e4f0f7!important
}
.scene-veil {
    background:linear-gradient(180deg,#e9f6ff10,#eef8ff42 30%,transparent 75%)!important
}
.hero-copy,.hero-copy h2,.hero-fullnames,.eyebrow,.invitation-date,.scroll-cue {
    color:#29485e!important
}
.hero-copy h2 em,.scroll-cue span {
    color:#739bb3!important
}
.petal {
    color:#b2cfdf!important
}
#wedding-content>section[data-decor="salam"] {
    background:#e5f0f7!important
}
section[data-decor="salam"]:before,section[data-decor="salam"]:after {
    border-color:#93b0c488!important
}
#wedding-content>#mempelai {
    background:#f3f9fd!important
}
#mempelai:before {
    color:#90b1c324!important
}
.portrait-slot {
    background:#e1edf4!important;
    border-color:#a6bfce!important
}
.portrait-slot:before {
    border-color:#f8fcff!important
}
.portrait-initial,.portrait-slot figcaption {
    color:#8aa8ba!important
}
#mempelai>.text-center .font-script {
    color:#7e9fb4!important
}
#wedding-content>#story {
    background:#e7f0f6!important
}
.story-rule {
    background:#9fb8c9!important
}
#story .glass-card {
    background:#f7fbffdb!important;
    border-color:#adc3d478!important;
    box-shadow:3px 4px 0 #87a7bc12!important
}
#story>.relative>.group:before,#story .glass-card>span {
    color:#6b91ab!important
}
#story h4 {
    color:#31516a!important
}
#wedding-content>#acara {
    background:#eef6fb!important
}
#acara>.glass-card {
    background:#f9fcffdf!important;
    border-color:#a9c0d2aa!important
}
#acara>.glass-card:not(:has(#days)) {
    border-top-color:#8caabe!important
}
#acara .grid>div {
    border-right-color:#afc6d588!important
}
#acara .glass-card .w-10 {
    background:#b8d5e72e!important
}
#acara>.text-center:last-child a {
    background:#456e8b!important;
    color:#fff!important;
    border-color:#456e8b!important
}
#wedding-content>#amplop {
    background:#dfeef7!important
}
.envelope-outline {
    border-color:#8daabd!important;
    background:linear-gradient(32deg,transparent 49%,#8daabd66 50%,transparent 51%),linear-gradient(-32deg,transparent 49%,#8daabd66 50%,transparent 51%)!important
}
.letter-emblem>span {
    background:#6b95b1!important;
    color:#f6fbff!important;
    border-color:#a9c3d4!important
}
#amplop>.glass-card {
    background:#f8fcff!important;
    border-color:#aac3d3!important
}
#amplop>.glass-card:before {
    background:linear-gradient(225deg,#dfeef7 49%,#95b2c555 50%,#f2f8fd 53%)!important
}
#amplop button {
    border-bottom-color:#8daabd!important
}
#wedding-content>#rsvp {
    background:#edf6fc!important
}
#wedding-content>#rsvp:before {
    background-color:#537c99!important;
    background-image:radial-gradient(ellipse 11px 20px at 50% 0,transparent 80%,#d5e9f347 83%,transparent 90%),radial-gradient(ellipse 11px 20px at 50% 100%,transparent 80%,#d5e9f347 83%,transparent 90%)!important
}
#wedding-content>#rsvp>.text-center h2,#wedding-content>#rsvp>.text-center span {
    color:#f4fbff!important
}
.rsvp-heading-ornament {
    color:#d4e9f6!important
}
.rsvp-heading-ornament span {
    background:#d4e9f666!important
}
#rsvp #rsvp-form {
    background:#f9fcff!important;
    border-color:#b3cbdc!important
}
#rsvp input,#rsvp textarea,#rsvp select {
    background:#f0f7fc!important;
    border-color:#b5ccdb!important;
    color:#29485e!important
}
#rsvp button[type="submit"] {
    background:#4c7898!important;
    color:#fff!important
}
#ucapan-feed>.glass-card {
    background:#f8fcff!important;
    border-left-color:#89aec6!important
}
#wedding-content section[data-decor] h2,#mempelai h3,#acara h3 {
    color:#29485e!important
}
#wedding-content section[data-decor] .w-12.h-0\.5 {
    background:#9dbbcd!important
}
#wedding-content section[data-decor] [class*="border-ice-"],#wedding-content section[data-decor] [class*="border-slate-"] {
    border-color:#a8c3d466!important
}
#wedding-content section[data-decor] [class*="bg-ice-"] {
    background-color:#94bad420!important
}
#wedding-content footer {
    background:#304f65!important
}
#wedding-content footer p,#wedding-content footer .font-script,#wedding-content footer [class*="text-"] {
    color:#eaf6ff!important
}
#wedding-content footer:before {
    filter:grayscale(1) sepia(.2) hue-rotate(160deg) saturate(1.6)
}
#bottom-nav {
    background:#eff8fdf5!important;
    border-color:#adc9db!important
}
#bottom-nav a {
    color:#41657f!important
}
#audio-control {
    background:#eef7fd!important;
    border-color:#a9c5d8!important;
    color:#41657f!important
}
#toast>div {
    background:#4e7895!important;
    color:#fff!important
}

/* ===== natural-blue-botanicals ===== */
.cover-floral-image,.floral-cover.opening .cover-floral-image,.foreground img,.portrait-bouquet,.story-frontispiece img,.scene-back,.event-pendopo img,#wedding-content footer:before {
    filter:none!important
}
.scene-veil {
    background:linear-gradient(180deg,#edf8ff45,#f0f8ff20 40%,transparent 75%)!important
}
.event-pendopo img {
    mix-blend-mode:multiply
}
.cover-floral-image {
    background:#f1f8fc
}
.story-frontispiece img {
    opacity:.92
}