:root {
        --maroon: #510c16;
        --maroon-dark: #50151e;
        --black: #171313;
        --ivory: #f5efe5;
        --sand: #e8ddcd;
        --gold: #b89455;
        --gold-light: #d4bd91;
        --ink: #292020;
        --muted: #746865;
        --serif: "Cormorant Garamond", Georgia, serif;
        --script: "Ephesis", cursive;
        --ui: "Inter", system-ui, sans-serif;
        --pad: clamp(18px, 4vw, 56px);
        --section: clamp(82px, 10vw, 132px);
      }
      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
        background: var(--black);
      }
      body {
        margin: 0;
        background: var(--ivory);
        color: var(--ink);
        font-family: var(--ui);
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }
      body.is-locked {
        overflow: hidden;
      }
      img {
        display: block;
        width: 100%;
      }
      button,
      input,
      textarea,
      select {
        font: inherit;
      }
      button {
        cursor: pointer;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      .wrap {
        width: min(1120px, calc(100% - 2 * var(--pad)));
        margin-inline: auto;
      }
      .center {
        max-width: 840px;
        margin-inline: auto;
        text-align: center;
      }
      .section {
        position: relative;
        padding: var(--section) 0;
        overflow: hidden;
      }
      .ivory {
        background: var(--ivory);
        color: var(--ink);
      }
      .maroon {
        background: var(--maroon);
        color: var(--ivory);
      }
      .black {
        background: var(--black);
        color: var(--ivory);
      }
      .sand {
        background: var(--sand);
        color: var(--ink);
      }
      .eyebrow {
        font-size: 11px;
        line-height: 1.3;
        letter-spacing: 0.26em;
        text-transform: uppercase;
        font-weight: 600;
      }
      .eyebrow.gold {
        color: var(--gold-light);
      }
      .eyebrow.muted {
        color: var(--muted);
      }
      .title {
        font-family: var(--serif);
        font-weight: 500;
        font-size: clamp(46px, 6.5vw, 84px);
        line-height: 0.95;
        margin: 14px 0 20px;
      }
      .copy {
        font-family: var(--serif);
        font-size: clamp(21px, 2.4vw, 30px);
        line-height: 1.5;
        margin: 0;
      }
      .copy.small {
        font-size: clamp(18px, 2vw, 24px);
      }
      .meta {
        font-size: 12px;
        line-height: 1.75;
        letter-spacing: 0.06em;
        color: inherit;
      }
      .thin-rule {
        width: min(280px, 56vw);
        height: 1px;
        margin: 22px auto;
        background: currentColor;
        opacity: 0.18;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        padding: 12px 22px;
        border-radius: 999px;
        font-size: 10px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        transition:
          transform 0.25s ease,
          background 0.25s ease,
          color 0.25s ease;
      }
      .btn:hover {
        transform: translateY(-1px);
      }
      .btn-light {
        color: var(--ivory);
        border: 1px solid rgba(245, 239, 229, 0.68);
        background: rgba(23, 19, 19, 0.16);
        backdrop-filter: blur(8px);
      }
      .btn-maroon {
        color: var(--ivory);
        background: var(--maroon);
        border: 1px solid var(--maroon);
      }
      .btn-outline {
        color: var(--maroon);
        border: 1px solid var(--maroon);
        background: transparent;
      }
      .btn-gold {
        color: #fff;
        background: var(--gold);
        border: 1px solid var(--gold);
      }

      /* opening cover — one group photo only, layout mengikuti referensi */
      #opening {
        position: fixed;
        inset: 0;
        z-index: 100;
        background: #111;
        color: white;
        overflow: hidden;
        transition:
          transform 1.1s cubic-bezier(0.78, 0, 0.18, 1),
          opacity 0.65s ease;
      }
      #opening.is-open {
        transform: translateY(-100%);
        opacity: 0.98;
        pointer-events: none;
      }
      .cover-photo {
        position: absolute;
        inset: 0;
      }
      .cover-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform-origin: center;
        animation: coverPhotoZoom 5s cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      @keyframes coverPhotoZoom {
        from {
          transform: scale(1);
        }
        to {
          transform: scale(1.06);
        }
      }
      .cover-shade {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          radial-gradient(
            ellipse at center,
            rgba(13, 8, 8, 0) 50%,
            rgba(13, 8, 8, 0.18) 65%,
            rgba(13, 8, 8, 0.58) 100%
          ),
          linear-gradient(
            to bottom,
            rgba(13, 8, 8, 0.2) 0%,
            rgba(13, 8, 8, 0.12) 45%,
            rgba(13, 8, 8, 0.38) 100%
          );
      }
      .cover-content {
        position: relative;
        z-index: 5;
        height: 100%;
        min-height: 100svh;
        text-align: center;
        padding: calc(env(safe-area-inset-top) + 24px) 20px
          calc(env(safe-area-inset-bottom) + 24px);
      }
      .cover-head {
        position: absolute;
        left: 50%;
        top: 31%;
        transform: translate(-50%, -50%);
        width: min(920px, 92vw);
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .cover-kicker {
        font-family: var(--serif);
        font-size: clamp(15px, 1.6vw, 20px);
        letter-spacing: 0.02em;
        text-transform: none;
        font-weight: 500;
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.42);
      }
      .cover-names {
        font-family: var(--script);
        font-size: clamp(44px, 6.4vw, 78px);
        font-weight: 400;
        line-height: 1.12;
        margin: 12px 0 16px;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.42);
      }

      .cover-names span {
        display: block;
      }

      .cover-names span:not(:last-child)::after {
        content: none;
      }
      .cover-date {
        font-family: var(--serif);
        font-size: clamp(14px, 1.6vw, 20px);
        letter-spacing: 0.04em;
        text-transform: none;
        margin: 0;
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.42);
      }
      .cover-lower {
        position: absolute;
        left: 50%;
        top: 69%;
        transform: translate(-50%, -50%);
        width: min(560px, 90vw);
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .cover-guest {
        font-family: var(--serif);
        font-size: clamp(24px, 2.8vw, 34px);
        line-height: 1.22;
        margin: 0 0 18px;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
      }
      .cover-guest small {
        display: block;
        font-family: var(--ui);
        font-size: clamp(11px, 1vw, 13px);
        letter-spacing: 0.02em;
        text-transform: none;
        margin-bottom: 12px;
        font-weight: 400;
      }
      .cover-open-btn {
        min-height: 44px;
        padding: 10px 22px;
        border-radius: 999px;
        border: 1px solid rgba(245, 239, 229, 0.56);
        background: rgba(184, 148, 85, 0.68);
        color: var(--ivory);
        font-size: 10px;
        letter-spacing: 0.04em;
        text-transform: none;
        backdrop-filter: blur(8px);
        transform-origin: center;
        animation: coverButtonPulse 3s ease-in-out infinite;
        transition:
          background 0.25s ease,
          border-color 0.25s ease;
      }

      .cover-open-btn:hover {
        background: rgba(184, 148, 85, 0.82);
        border-color: rgba(245, 239, 229, 0.72);
      }

      .cover-open-btn:focus-visible {
        outline: 2px solid var(--ivory);
        outline-offset: 5px;
      }

      #opening.is-open .cover-open-btn {
        animation-play-state: paused;
      }

      @keyframes coverButtonPulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.06);
        }
      }
      .cover-note {
        font-family: var(--serif);
        font-style: italic;
        font-size: 12px;
        line-height: 1.5;
        margin-top: 12px;
        letter-spacing: 0;
        opacity: 0.92;
      }

      /* hero slideshow after opening — full viewport; ornament revealed only after scroll */
      .hero-photo-section {
        position: relative;
        background: var(--black);
        height: 100svh;
        min-height: 640px;
        z-index: 4;
        overflow: hidden;
      }
      .hero-slides {
        position: absolute;
        inset: 0;
        overflow: hidden;
        background: #998c82;
      }
      .hero-layer {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.7s ease;
      }
      .hero-layer.is-active {
        opacity: 1;
        z-index: 2;
      }
      .hero-layer img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: var(--photo-x, 50%) var(--photo-y, 50%);
      }

      /* Foto pertama */
      .hero-layer:nth-child(1) {
        --photo-x: 60%;
        --photo-y: 40%;
      }

      /* Foto kedua */
      .hero-layer:nth-child(2) {
        --photo-x: 40%;
        --photo-y: 60%;
      }

      /* Foto ketiga */
      .hero-layer:nth-child(3) {
        --photo-x: 60%;
        --photo-y: 40%;
      }
      .hero-layer.is-active img {
        animation: slowHeroZoom 2.8s ease-out both;
      }
      @keyframes slowHeroZoom {
        from {
          transform: scale(1);
        }
        to {
          transform: scale(1.035);
        }
      }
      .hero-shade {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        background:
          radial-gradient(
            ellipse at center,
            rgba(15, 10, 10, 0) 25%,
            rgba(15, 10, 10, 0.16) 65%,
            rgba(15, 10, 10, 0.55) 100%
          ),
          linear-gradient(
            to bottom,
            rgba(15, 10, 10, 0.28) 0%,
            rgba(15, 10, 10, 0.06) 45%,
            rgba(15, 10, 10, 0.3) 100%
          );
      }
      .hero-content {
        position: absolute;
        z-index: 5;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        text-align: center;
        color: #fff;
        padding: clamp(38px, 7vh, 76px) 20px 28px;
        pointer-events: none;
      }
      .hero-kicker {
        font-family: var(--serif);
        font-size: clamp(16px, 1.7vw, 22px);
        letter-spacing: 0.06em;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
      }
      .hero-names {
        font-family: var(--script);
        font-size: clamp(42px, 5.4vw, 70px);
        line-height: 0.82;
        margin: 7px auto 8px;
        max-width: 760px;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.32);
      }
      .hero-names span {
        display: block;
      }
      .hero-year {
        font-family: var(--serif);
        font-size: clamp(17px, 1.8vw, 23px);
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
      }
      .hero-next {
        pointer-events: auto;
        margin-top: 14px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.72);
        background: rgba(0, 0, 0, 0.06);
        color: #fff;
        font-size: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition:
          transform 0.25s ease,
          background 0.25s ease;
      }
      .hero-next:hover {
        transform: translateY(3px);
        background: rgba(0, 0, 0, 0.16);
      }

      /* ornament sits behind hero photo and is revealed as the hero scrolls away */
      .hero-ornament-reveal {
        position: relative;
        height: 250px;
        background: var(--ivory);
        z-index: 1;
        overflow: hidden;
      }

      .hero-mandala {
        display: block;
        width: 100%;
        height: auto;
        transform-origin: center;
      }
      .hero-mandala {
        width: 80%;
        opacity: 0.58;
        animation: mandalaSlowRotate 60s linear infinite;
        transform-origin: 50% 50%;
      }
      @keyframes mandalaSlowRotate {
        to {
          transform: rotate(360deg);
        }
      }
      .hero-mandala-fallback {
        display: none;
        color: #dbcaa9;
        opacity: 0.58;
        animation: mandalaSlowRotate 60s linear infinite;
        transform-origin: 50% 50%;
      }
      .hero-mandala-fallback svg {
        width: 100%;
        height: auto;
      }

      /* ornamental wave */
      .wave-top,
      .wave-bottom {
        position: absolute;
        left: 0;
        width: 100%;
        height: 96px;
        pointer-events: none;
        z-index: 2;
      }
      .wave-top {
        top: -1px;
        transform: translateY(-99%);
      }
      .wave-bottom {
        bottom: -1px;
        transform: translateY(99%) rotate(180deg);
      }
      .wave-top svg,
      .wave-bottom svg {
        width: 100%;
        height: 100%;
        display: block;
      }

      .om-img {
        width: min(250px, 56vw);
        margin: 0 auto 24px;
        opacity: 0.95;
      }
      .om-fallback {
        font-family: var(--serif);
        font-size: 46px;
        color: #d8b15b;
        margin-bottom: 18px;
        display: none;
      }

      /* profiles — alternating layout retained */
      .profiles {
        padding-top: calc(var(--section) + 18px);
      }
      .profile {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(28px, 6vw, 84px);
        align-items: center;
        margin: 0 auto clamp(104px, 13vw, 160px);
      }
      .profile:last-child {
        margin-bottom: 0;
      }
      .profile:nth-child(even) .profile-photo-wrap {
        order: 2;
      }
      .profile:nth-child(even) .profile-copy {
        order: 1;
        text-align: right;
      }
      .profile-photo-wrap {
        position: relative;
        max-width: 480px;
        margin-inline: auto;
      }
      .profile-photo {
        aspect-ratio: 4/5;
        overflow: hidden;
        background: #c9bdb2;
        border-radius: 50% 50% 44% 44%/44% 44% 56% 56%;
        position: relative;
        z-index: 2;
      }
      .profile-photo img {
        height: 100%;
        object-fit: cover;
      }
      .profile-ring {
        position: absolute;
        inset: -8% -12%;
        z-index: 3;
        pointer-events: none;
        opacity: 0.84;
      }
      .profile-ring img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .profile-copy .num {
        font-family: var(--serif);
        font-size: 15px;
        letter-spacing: 0.22em;
        color: var(--gold);
        margin-bottom: 16px;
      }
      .profile-name {
        font-family: var(--script);
        font-size: clamp(58px, 7.3vw, 92px);
        line-height: 0.82;
        color: var(--maroon);
        margin-bottom: 20px;
      }
      .profile-full {
        font-family: var(--serif);
        font-size: clamp(22px, 2.6vw, 32px);
        line-height: 1.35;
        margin-bottom: 20px;
      }
      .profile-detail {
        font-family: var(--serif);
        font-size: clamp(16px, 1.6vw, 20px);
        line-height: 1.75;
        color: var(--muted);
      }
      .profile-detail .child-order {
        display: block;
        font-size: 17px;
        color: #7b5d49;
        margin-bottom: 8px;
      }
      .profile-detail .parent {
        display: block;
        font-size: 19px;
        color: #6a4f3d;
      }
      .profile-detail .amp {
        display: block;
        color: var(--gold);
        font-size: 24px;
        line-height: 1.4;
      }
      .profile-detail .address {
        display: block;
        margin-top: 8px;
        font-size: 14px;
      }

      /* ornament divider */
      .ornament-divider {
        height: 210px;
        position: relative;
        background: var(--ivory);
      }
      .ornament-divider img {
        position: absolute;
        left: 50%;
        top: 12px;
        transform: translateX(-50%);
        width: min(410px, 72vw);
        opacity: 0.35;
      }

      /* countdown maroon, like reference */
      .countdown-section {
        position: relative;
        background: var(--maroon);
        color: var(--ivory);
        padding: 92px 0;
      }

      
      .count-title {
        font-family: var(--script);
        font-size: clamp(48px, 6vw, 70px);
        margin: 0 0 28px;
      }
      .countdown-wrap {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        max-width: 660px;
        margin: 0 auto;
      }
      .count-item {
        background: #fff;
        border-radius: 14px;
        text-align: center;
        padding: 18px 8px;
        color: var(--gold);
      }
      .count-item strong {
        display: block;
        font-family: var(--serif);
        font-size: clamp(42px, 6vw, 68px);
        font-weight: 500;
        line-height: 0.92;
      }
      .count-item span {
        display: block;
        margin-top: 8px;
        font-size: 11px;
        color: #a67e50;
      }

      /* event */
      .event-intro {
        font-family: var(--serif);
        font-size: 18px;
        color: #936e50;
        text-align: center;
        margin: 0 auto 28px;
        max-width: 900px;
      }
      .event-card {
        max-width: 990px;
        margin: 0 auto;
        border: 1px solid #c99d4e;
        border-radius: 18px;
        padding: 34px 26px;
        text-align: center;
      }
      .event-title {
        font-family: var(--script);
        font-size: clamp(46px, 6vw, 66px);
        color: #a7784b;
        margin: 0 0 18px;
      }
      .event-list {
        display: grid;
        gap: 8px;
        font-family: var(--serif);
        font-size: clamp(18px, 2vw, 24px);
        line-height: 1.5;
        color: #8a654b;
      }

      /* prayer */
      .prayer-mark {
        width: 76px;
        height: 76px;
        border: 1px solid rgba(184, 148, 85, 0.5);
        border-radius: 50%;
        margin: 0 auto 24px;
        display: grid;
        place-items: center;
        color: var(--gold);
        font-family: var(--serif);
        font-size: 28px;
      }
      .prayer-wave {
        position: relative;
        background: var(--maroon);
        color: var(--ivory);
        padding: 84px 0 92px;
      }
      .prayer-wave .copy {
        color: #fff7ef;
      }

      /* family */
      .family-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
        max-width: 840px;
        margin: 34px auto 0;
      }
      .family-block {
        text-align: center;
        font-family: var(--serif);
        color: #997356;
      }
      .family-block span {
        font-size: 16px;
      }
      .family-block b {
        display: block;
        font-size: 26px;
        font-weight: 500;
        margin-top: 10px;
        color: #7e5d46;
      }

      /* gallery – reference-like collage */
      .gallery {
        padding-top: calc(var(--section) + 12px);
      }
      .gallery-title-script {
        font-family: var(--script);
        font-size: clamp(52px, 6vw, 70px);
        color: #b28b68;
        text-align: center;
        margin-bottom: 34px;
      }
      .gallery-stage {
        width: min(1040px, calc(100% - 2 * var(--pad)));
        margin: auto;
        display: grid;
        gap: 3px;
        background: #fff;
      }
      .gallery-top {
        display: grid;
        grid-template-columns: 1fr 2.25fr;
        gap: 3px;
      }
      .gallery-bottom {
        display: grid;
        grid-template-columns: 1.65fr 1fr;
        gap: 3px;
      }
      .gallery-shot {
        position: relative;
        overflow: hidden;
        background: #c5b8ad;
        border: 0;
        padding: 0;
      }
      .gallery-shot.portrait {
        aspect-ratio: 4/6;
      }
      .gallery-shot.landscape {
        aspect-ratio: 16/10;
      }
      .gallery-shot img {
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
      }
      .gallery-shot:hover img {
        transform: scale(1.025);
      }
      .gallery-shot::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px solid rgba(255, 255, 255, 0.12);
        pointer-events: none;
      }
      .gallery-mandala {
        width: min(430px, 70vw);
        margin: 50px auto -32px;
        opacity: 0.28;
      }

      /* RSVP closer to reference */
      .rsvp-shell {
        max-width: 1000px;
        margin: 0 auto;
        border: 1px solid #ddd3c4;
        border-radius: 12px;
        background: #f7f3eb;
        overflow: hidden;
      }
      .rsvp-head {
        padding: 18px;
        text-align: center;
        border-bottom: 1px solid #ddd3c4;
      }
      .rsvp-stats {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 12px;
      }
      .stat {
        background: #b9b9b9;
        color: #fff;
        min-width: 126px;
        padding: 10px 14px;
        border-radius: 4px;
      }
      .stat b {
        display: block;
        font-size: 18px;
      }
      .stat span {
        font-size: 11px;
      }
      .rsvp-form {
        padding: 18px;
        display: grid;
        gap: 12px;
      }
      .field {
        width: 100%;
        min-height: 44px;
        border: 1px solid #d8d0c4;
        border-radius: 8px;
        padding: 10px 12px;
        background: #fff;
        color: var(--ink);
        outline: none;
      }
      .field:focus {
        border-color: var(--maroon);
      }
      .rsvp-actions {
        display: flex;
        justify-content: flex-end;
      }
      .comments {
        border-top: 1px solid #ddd3c4;
      }
      .comment {
        padding: 16px 22px;
        border-bottom: 1px solid #e3dbcf;
        font-size: 14px;
        line-height: 1.55;
      }
      .comment:last-child {
        border-bottom: 0;
      }
      .comment b {
        display: block;
        color: #6a543e;
      }
      .comment small {
        color: #8e8274;
      }

      /* gift online */
      .gift-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        max-width: 900px;
        margin: 32px auto 0;
      }
      .gift-card {
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 16px;
        padding: 28px;
        background: rgba(255, 255, 255, 0.035);
      }
      .gift-card h3 {
        font-family: var(--serif);
        font-size: 34px;
        font-weight: 500;
        margin: 10px 0 12px;
      }
      .gift-card .number {
        font-family: var(--serif);
        font-size: 28px;
        letter-spacing: 0.08em;
      }

      /* large mandala before closing */
      .closing-transition {
        height: 320px;
        background: var(--ivory);
        position: relative;
      }
      .closing-transition img {
        position: absolute;
        left: 50%;
        bottom: -72px;
        transform: translateX(-50%);
        width: min(560px, 82vw);
        opacity: 0.42;
      }

      /* closing slideshow */
      .closing-show {
        height: min(78svh, 820px);
        min-height: 580px;
        position: relative;
        overflow: hidden;
        background: #111;
      }
      .closing-layer {
        position: absolute;
        inset: 0;
        opacity: 0;
        transform: translateX(2%);
        transition:
          opacity 0.7s ease,
          transform 0.7s ease;
      }
      .closing-layer.is-active {
        opacity: 1;
        transform: translateX(0);
        z-index: 2;
      }
      .closing-layer img {
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: brightness(0.82);
      }
      .closing-layer.is-active img {
        animation: closingZoom 3.2s ease-out both;
      }
      @keyframes closingZoom {
        from {
          transform: scale(1);
        }
        to {
          transform: scale(1.045);
        }
      }
      .closing-content {
        position: absolute;
        inset: 0;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        text-align: center;
        color: white;
        padding: 0 20px 58px;
        background: linear-gradient(
          to top,
          rgba(23, 19, 19, 0.48),
          transparent 50%
        );
      }
      .closing-thanks {
        font-family: var(--serif);
        font-size: 18px;
        margin-bottom: 8px;
      }
      .closing-name {
        font-family: var(--script);
        font-size: clamp(56px, 7.8vw, 88px);
        line-height: 0.84;
        margin: 0;
        max-width: 1040px;
      }

      /* lightbox */
      #lightbox {
        position: fixed;
        inset: 0;
        z-index: 120;
        background: rgba(10, 8, 8, 0.92);
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        backdrop-filter: blur(8px);
      }
      #lightbox.show {
        display: flex;
      }
      #lightbox img {
        max-width: min(1100px, 94vw);
        max-height: 86vh;
        object-fit: contain;
        width: auto;
      }
      #lightbox button {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.35);
        background: transparent;
        color: white;
        font-size: 24px;
      }

      /* baseline motion */
      .reveal {
        opacity: 0;
        transform: translateY(26px);
        transition:
          opacity 0.8s ease,
          transform 0.8s ease;
      }
      .reveal.in {
        opacity: 1;
        transform: none;
      }
      .photo-reveal {
        clip-path: inset(8% 0 8% 0);
        transform: scale(1.025);
        transition:
          clip-path 1s cubic-bezier(0.22, 1, 0.36, 1),
          transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .photo-reveal.in {
        clip-path: inset(0);
        transform: scale(1);
      }

      @media (max-width: 860px) {
        .profile {
          grid-template-columns: 1fr;
          text-align: center;
          gap: 28px;
          margin-bottom: 108px;
        }
        .profile:nth-child(even) .profile-photo-wrap,
        .profile:nth-child(even) .profile-copy {
          order: initial;
        }
        .profile:nth-child(even) .profile-copy {
          text-align: center;
        }
        .profile-copy {
          max-width: 600px;
          margin-inline: auto;
        }
        .profile-photo-wrap {
          width: min(82vw, 440px);
        }
        .family-grid,
        .gift-grid {
          grid-template-columns: 1fr;
          gap: 26px;
        }
      }
      @media (max-width: 640px) {
        .cover-head {
          top: 29%;
          width: 94vw;
        }
        .cover-names {
          font-size: 46px;
          line-height: 1.12;
        }
        .cover-lower {
          top: 70%;
          width: 92vw;
        }
        .cover-guest {
          font-size: 25px;
        }
        .hero-photo-section {
          height: 90svh;
          min-height: 0;
        }
        .hero-mandala {
          width: min(520px, 88vw);
        }
        .hero-content {
          padding-top: 42px;
        }
        .hero-names {
          font-size: 46px;
          max-width: 360px;
        }
        .hero-ornament-reveal {
          height: 215px;
        }
        .countdown-wrap {
          gap: 8px;
        }
        .gallery-top {
          grid-template-columns: 1fr 1.7fr;
        }
        .gallery-bottom {
          grid-template-columns: 1fr 1fr;
        }
        .gallery-shot.portrait {
          aspect-ratio: 4/7;
        }
        .gallery-shot.landscape {
          aspect-ratio: 4/5;
        }
        .rsvp-stats {
          gap: 8px;
        }
        .stat {
          min-width: 112px;
        }
        .closing-transition {
          height: 250px;
        }
        .closing-show {
          height: 72svh;
          min-height: 540px;
        }
      }
      @media (max-width: 360px) {
        :root {
          --pad: 18px;
          --section: 74px;
        }
        .cover-names {
          font-size: 46px;
        }
        .cover-head {
          top: 28%;
        }
        .cover-lower {
          top: 71%;
        }
        .hero-names {
          font-size: 42px;
        }
        .profile-name {
          font-size: 54px;
        }
        .count-item strong {
          font-size: 38px;
        }
        .gallery-title-script {
          font-size: 50px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation: none !important;
          transition: none !important;
          scroll-behavior: auto !important;
        }
      }
      /* MUSIC CONTROL */
      .music-toggle {
        position: fixed;
        right: 20px;
        bottom: calc(20px + env(safe-area-inset-bottom));
        z-index: 90;
        width: 48px;
        height: 48px;
        border: 1px solid var(--gold-light);
        border-radius: 50%;
        background: var(--maroon);
        color: var(--ivory);
        box-shadow: 0 4px 20px #0003;
        display: grid;
        place-items: center;
        font-size: 22px;
      }
      .music-toggle[hidden] {
        display: none;
      }
      .music-toggle:focus-visible {
        outline: 3px solid var(--gold);
        outline-offset: 4px;
      }
      .music-status {
        position: fixed;
        right: 20px;
        bottom: calc(78px + env(safe-area-inset-bottom));
        z-index: 90;
        max-width: 260px;
        padding: 10px 14px;
        border-radius: 12px;
        background: var(--ivory);
        color: var(--maroon);
        font-size: 12px;
        box-shadow: 0 4px 20px #0002;
      }
      @media (max-width: 640px) {
        .hero-layer:nth-child(3) {
          --photo-x: 25%;
        }
      }
      .hero-slides {
        touch-action: pan-y pinch-zoom;
        user-select: none;
        -webkit-user-select: none;
      }

      .hero-layer img {
        -webkit-user-drag: none;
      }
      /* Pembungkus selebar section, posisi gambar tepat di tengah */
      .hero-mandala-wrap {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        display: flex;
        justify-content: center;
        transform: translateY(-50%);
        z-index: 1;
        pointer-events: none;
      }

      /* Rotasi hanya diterapkan pada gambar */
      .hero-mandala {
        display: block;
        flex: 0 0 auto;
        width: min(450px, 60vw);
        max-width: none;
        height: auto;
        margin: 0;
        opacity: 0.58;
        transform-origin: 50% 50%;
        animation: mandalaSlowRotate 60s linear infinite;
      }

      @keyframes mandalaSlowRotate {
        to {
          transform: rotate(360deg);
        }
      }
      /* SECTION PARAGRAF PEMBUKA */
      #intro {
        position: relative;
        isolation: isolate;
        background: transparent;
        clip-path: none;
        padding: 100px 0 108px;
        overflow: hidden;
      }

      #intro::before {
        content: "";
        position: absolute;

        width: 420px;
        height: 420px;

        background-image: url("assets/ornamen-bulet.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;

        top: 50%;
        right: -70px;

        transform: translateY(-50%);
        opacity: 0.10;

        z-index: 1;
        pointer-events: none;

        animation: rotateOrnament 25s linear infinite;
        }

        @keyframes rotateOrnament {
        from {
            transform: translateY(-50%) rotate(0deg);
        }

        to {
            transform: translateY(-50%) rotate(360deg);
        }
        }

      #intro .wrap {
        position: relative;
        z-index: 2;
    }
      /* Seluruh bidang maroon berbentuk asimetris */
      /* #intro::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--maroon);

        clip-path: polygon(
          0 30px,
          32% 0,
          100% 38px,
          100% calc(100% - 34px),
          68% 100%,
          0 calc(100% - 28px)
        );
      } */

      /* Sembunyikan bentuk gelombang lama */
      #intro > .wave-top,
      #intro > .wave-bottom {
        display: none;
      }

      @media (max-width: 640px) {
        #intro {
          padding: 76px 0 84px;
        }

        #intro::before {
          clip-path: polygon(
            0 18px,
            32% 0,
            100% 24px,
            100% calc(100% - 22px),
            68% 100%,
            0 calc(100% - 16px)
          );
        }
      }
      @media (min-width: 641px) {
        .hero-ornament-reveal {
          height: calc(min(300px, 36vw) + 10px);
        }
      }
      /* === REVISED SECTIONS 04–11 ONLY === */
      .lower-container{width:min(1120px,calc(100% - 48px));margin-inline:auto;text-align:center}
      .lower-kicker{font:500 10px/1.6 var(--ui);letter-spacing:.24em;text-transform:uppercase;margin:0 0 16px}
      .lower-script{font:400 clamp(44px,5vw,68px)/1.1 var(--script);margin:0 0 30px}
      .lower-button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:46px;padding:13px 24px;border:1px solid var(--maroon);border-radius:4px;background:var(--maroon);color:var(--ivory);font:500 11px/1.5 var(--ui);text-decoration:none;transition:background .2s,transform .2s}
      .lower-button:hover{background:var(--maroon-dark);transform:translateY(-2px)}
      .lower-button:disabled{cursor:default;opacity:.5;transform:none}
      .lower-button:focus-visible,.lower-gallery-item:focus-visible,.lower-more:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
      .lower-count{position:relative;isolation:isolate;margin-top:64px;padding:72px 0 76px;color:var(--ivory); background:var(--maroon); overflow:hidden;}
      /* .lower-count:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--maroon);clip-path:polygon(0 24px,30% 0,100% 28px,100% calc(100% - 30px),73% 100%,0 calc(100% - 22px))} */
      .lower-count::before {
        content: "";
        position: absolute;
        background:var(--maroon);
        width: 420px;
        height: 420px;

        background-image: url("assets/ornamen.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;

        top: 50%;
        left: 20%;

        transform: translateY(-50%);
        opacity: 0.10;

        z-index: 1;
        pointer-events: none;

        animation: rotateOrnament 25s linear infinite;
        }

        @keyframes rotateOrnament {
        from {
            transform: translateY(-50%) rotate(0deg);
        }

        to {
            transform: translateY(-50%) rotate(360deg);
        }
        }
      .lower-count .lower-kicker{color:var(--gold-light)}
      .lower-clock{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(620px,100%);margin:0 auto}
      .lower-clock>div{background:var(--ivory);color:var(--maroon);padding:18px 8px 16px;border-radius:10px}
      .lower-clock strong{display:block;font:500 clamp(36px,4vw,54px)/1 var(--serif);font-variant-numeric:tabular-nums}
      .lower-clock span{display:block;margin-top:6px;color:var(--muted);font:11px/1.5 var(--ui)}
      .lower-count-date{font:16px/1.5 var(--serif);letter-spacing:.06em;margin:24px 0 0;color:var(--gold-light)}
      .lower-event{padding:30px 0 90px;background:var(--ivory)}
      .lower-invitation{max-width:820px;margin:0 auto 32px;font:22px/1.55 var(--serif);color:var(--muted)}
      .lower-event-card{position:relative;border:1px solid var(--gold);border-radius:16px;padding:48px 24px 44px}
      .lower-diamond{position:absolute;top:-18px;left:calc(50% - 22px);width:44px;background:var(--ivory);color:var(--gold);font-size:28px}
      .lower-event-card .lower-kicker{color:var(--muted);margin-bottom:10px}
      .lower-event-card h2{color:var(--maroon);margin-bottom:22px}
      .lower-event-date{display:flex;justify-content:center;align-items:center;gap:24px;font:20px/1.25 var(--serif)}
      .lower-event-date>span{min-width:90px}
      .lower-event-date strong{font:500 76px/1 var(--serif);color:var(--maroon);padding:0 26px;border-inline:1px solid var(--sand)}
      .lower-event-details{margin:24px auto;font:20px/1.5 var(--serif)}
      .lower-event-details p{margin:8px 0}.lower-event-details span{color:var(--gold);margin-right:6px}
      .lower-prayer{position:relative;isolation:isolate;overflow:hidden;background:var(--black);color:var(--ivory);padding:90px 0;clip-path:polygon(0 0,68% 20px,100% 0,100% calc(100% - 18px),30% 100%,0 calc(100% - 28px))}
      .lower-prayer::before{
        content: "";
        position: absolute;

        width: 420px;
        height: 420px;

        background-image: url("assets/ornamen.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);

        opacity: 0.10;
        z-index: 1;
        pointer-events: none;

        animation: rotateOrnament 35s linear infinite;
        }

        @keyframes rotateOrnament {
        from {
            transform: translate(-50%, -50%) rotate(0deg);
        }

        to {
            transform: translate(-50%, -50%) rotate(360deg);
        }

      }
      .lower-prayer .lower-container{position:relative;z-index:1;max-width:860px}
      .lower-prayer-ornament{position:absolute;width:440px;right:-170px;top:-150px;opacity:.15}
      .lower-quote{display:block;color:var(--gold);font:100px/.75 var(--serif)}
      .lower-prayer p{font:400 clamp(23px,2.6vw,32px)/1.5 var(--serif);margin:12px 0 24px}
      .lower-prayer-line{display:block;width:60px;height:1px;background:var(--gold);margin:28px auto}
      .lower-prayer .lower-kicker{color:var(--gold-light)}
      .lower-family{padding:80px 0 88px;background:var(--ivory)}
      .lower-peace{font:400 clamp(32px,4vw,48px)/1.2 var(--script);color:var(--maroon);margin:0 0 32px}
      .lower-family .lower-kicker{color:var(--muted)}
      .lower-family-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;max-width:860px;margin:28px auto 0}
      .lower-family-grid div>span{font:18px/1.5 var(--serif);color:var(--muted)}
      .lower-family-grid h3{font:500 clamp(26px,3vw,36px)/1.2 var(--serif);margin:8px 0 0}
      .lower-family-and{font:italic 42px var(--serif);color:var(--gold)}
      .lower-gallery{padding:72px 0 38px;background:var(--black);color:var(--ivory)}
      .lower-gallery-head .lower-kicker{color:var(--gold-light)}
      .lower-gallery-head h2{margin-bottom:12px}
      .lower-gallery-head>p{font:19px/1.5 var(--serif);color:var(--sand);margin:0 0 36px}
      .lower-gallery-grid{width:min(1140px,calc(100% - 48px));margin:auto;display:grid;gap:3px}
      .lower-gallery-row{display:grid;grid-template-columns:1fr 1fr;gap:3px}
      .lower-gallery-row.mixed{grid-template-columns:4fr 9fr}.lower-gallery-row.wide{grid-template-columns:1fr}
      .lower-gallery-item{display:block;width:100%;padding:0;border:0;border-radius:0;background:#292020;overflow:hidden;cursor:zoom-in;position:relative}
      .lower-gallery-item img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;transition:transform .7s ease}
      .lower-gallery-row.mixed .lower-gallery-item:first-child img{aspect-ratio:2/3}
      .lower-gallery-row.mixed .lower-gallery-item:last-child img{aspect-ratio:3/2}
      .lower-gallery-row.wide img{aspect-ratio:3/2;object-position:50% 56%}
      .lower-gallery-item:hover img{transform:scale(1.035)}
      .lower-gallery-item:after{content:'↗';position:absolute;right:16px;bottom:12px;font:22px var(--ui);color:white;opacity:0;transition:opacity .2s}
      .lower-gallery-item:hover:after,.lower-gallery-item:focus-visible:after{opacity:1}
      .lower-gallery-hint{text-align:center;font:10px/1.6 var(--ui);letter-spacing:.08em;color:var(--sand);margin:28px 0 0}
      .lower-wishes{padding:76px 0 88px;background:var(--ivory)}
      .lower-wishes h2{color:var(--maroon);margin-bottom:12px}
      .lower-wishes-sub{font:20px/1.5 var(--serif);color:var(--muted);margin:0 0 30px}
      .lower-guestbook{border:1px solid #d8cbb9;border-radius:10px;overflow:hidden;text-align:left;background:#f0e8dc}
      .lower-guestbook-head{text-align:center;padding:22px;border-bottom:1px solid #d8cbb9;font:12px/1.5 var(--ui)}
      .lower-attendance{display:flex;justify-content:center;gap:12px;margin:16px 0 0}
      .lower-attendance>div{width:140px;padding:12px;background:var(--maroon);color:var(--ivory);border-radius:4px;text-align:center}
      .lower-attendance>div:last-child{background:var(--black)}
      .lower-attendance b{display:block;font:500 22px/1 var(--serif)}.lower-attendance span{font-size:10px;display:block;margin-top:6px}
      .lower-form{display:grid;gap:12px;padding:24px;border-bottom:1px solid #d8cbb9}
      .lower-form input,.lower-form textarea,.lower-form select,.lower-reply-form input,.lower-reply-form textarea{display:block;width:100%;min-width:0;padding:13px 14px;background:#fffdf9;color:var(--ink);border:1px solid #d8cbb9;border-radius:5px;font:12px/1.6 var(--ui)}
      .lower-form textarea,.lower-reply-form textarea{resize:vertical}
      .lower-form :is(input,textarea,select):focus,.lower-reply-form :is(input,textarea):focus{outline:2px solid var(--gold);outline-offset:1px}
      .lower-form-foot{display:flex;justify-content:space-between;align-items:center;gap:16px}
      .lower-mode{font:10px/1.6 var(--ui);color:var(--muted);margin:0;max-width:400px}
      .lower-form-status{font:12px/1.6 var(--ui);margin:0;color:var(--maroon)}
      .lower-comments{padding:0 24px;max-height:620px;overflow-y:auto;overscroll-behavior:contain}
      .lower-comment{padding:23px 0;border-bottom:1px solid #d8cbb9;font:12px/1.7 var(--ui);overflow-wrap:anywhere}
      .lower-comment header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.lower-comment header b{font-weight:600;color:var(--maroon)}
      .lower-badge{font-size:9px;border:1px solid #c5b79f;border-radius:20px;padding:2px 8px}
      .lower-comment p{margin:10px 0;white-space:pre-wrap}
      .lower-comment footer{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:10px}
      .lower-reply-button{border:0;background:none;padding:4px;color:var(--maroon);font:500 10px var(--ui)}
      .lower-reply{margin:18px 0 0 20px;padding:10px 0 0 16px;border-left:1px solid var(--gold);font-size:11px}
      .lower-reply small{display:block;color:var(--muted)}
      .lower-reply-form{display:grid;gap:10px;margin-top:16px;padding:16px;background:var(--ivory)}
      .lower-reply-form .lower-button{justify-self:end}
      .lower-empty{padding:26px 12px;text-align:center;color:var(--muted);font:18px/1.5 var(--serif)}
      .lower-more{display:block;margin:20px auto;border:0;background:none;color:var(--maroon);font:12px var(--ui);padding:10px}
      .lower-more[hidden],.lower-gift-grid[hidden],.lower-reply-form[hidden]{display:none}
      .lower-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
      .lower-gifts{position:relative;isolation:isolate;overflow:hidden;background:var(--maroon);color:var(--ivory);padding:76px 0 70px}
      .lower-gifts .lower-kicker{color:var(--gold-light)}
      .lower-gift-ornament{position:absolute;z-index:-1;width:480px;left:-300px;top:0;opacity:.2}
      .lower-gift-copy{max-width:760px;margin:0 auto 28px;font:22px/1.55 var(--serif)}
      .lower-button-light{background:transparent;border-color:var(--gold-light);color:var(--ivory)}
      .lower-button-light:hover{background:var(--maroon-dark)}
      .lower-gift-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:36px auto 0;max-width:880px}
      .lower-gift-card{background:var(--maroon-dark);border:1px solid #b8945566;padding:32px 22px;text-align:left}
      .lower-gift-card h3{font:500 32px var(--serif);margin:10px 0 20px}
      .lower-gift-card>p:not(.lower-kicker){font:12px/1.8 var(--ui);overflow-wrap:anywhere}
      .lower-gift-card .lower-account{letter-spacing:.08em}.lower-gift-card button{margin-top:18px}
      .lower-copy-status{font:12px/1.5 var(--ui);margin:16px 0 0;min-height:18px}
      .lower-closing{height:88svh;min-height:560px;max-height:980px;position:relative;overflow:hidden;background:var(--black);color:var(--ivory)}
      .lower-closing .closing-layer{position:absolute;inset:0;opacity:0;transition:opacity 1.2s}.lower-closing .closing-layer.is-active{opacity:1}
      .lower-closing .closing-layer img{height:100%;width:100%;object-fit:cover;object-position:50% 50%}
      .lower-closing-shade{position:absolute;inset:0;background:linear-gradient(transparent 25%,#171313cc 100%)}
      .lower-closing-copy{position:absolute;bottom:54px;left:24px;right:24px;text-align:center;text-shadow:0 2px 20px #0008; z-index: 10;}
      .lower-closing-copy h2{font:400 clamp(60px,8vw,110px)/1 var(--script);margin:12px 0 22px}
      .lower-closing-copy>p:last-child{font:22px/1.45 var(--serif);margin:0}
      .lower-footer{display:flex;justify-content:space-between;gap:24px;align-items:center;background:var(--black);color:var(--sand);padding:28px max(24px,calc((100% - 1120px)/2));font:9px/1.5 var(--ui);letter-spacing:.16em}
      .lower-lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;padding:50px 70px;background:#0c0909f5;color:var(--ivory);overflow:hidden}
      .lower-lightbox::backdrop{background:#0c0909}
      .lower-lightbox[open]{display:flex;align-items:center;justify-content:center}
      .lower-lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;max-height:100%}
      .lower-lightbox img{width:auto;max-width:100%;height:auto;max-height:calc(100svh - 140px);object-fit:contain;touch-action:pan-y pinch-zoom}
      .lower-lightbox figcaption{font:11px var(--ui);color:var(--sand)}
      .lower-lightbox button{position:absolute;border:1px solid #ffffff44;background:#17131380;color:white;border-radius:50%;width:44px;height:44px;font:32px/1 var(--serif)}
      .lower-lightbox-close{right:20px;top:16px}.lower-lightbox-prev{left:16px;top:calc(50% - 22px)}.lower-lightbox-next{right:16px;top:calc(50% - 22px)}
      @media(max-width:640px){
        .lower-container{width:calc(100% - 36px)}.lower-script{font-size:44px}
        .lower-count{margin-top:36px;padding:60px 0}.lower-count .lower-script{font-size:39px}
        .lower-clock{gap:6px}.lower-clock>div{padding:15px 4px 12px}.lower-clock strong{font-size:36px}
        .lower-invitation{font-size:20px}.lower-event{padding:22px 0 56px}.lower-event-card{padding:40px 16px 34px}
        .lower-event-date{gap:10px;font-size:18px}.lower-event-date strong{font-size:64px;padding:0 14px}.lower-event-date>span{min-width:62px}
        .lower-event-details{font-size:19px}.lower-prayer{padding:68px 0}.lower-prayer p{font-size:23px}
        .lower-family{padding:58px 0}.lower-family-grid{grid-template-columns:1fr;gap:16px}.lower-family-grid h3{font-size:28px}.lower-family-and{font-size:32px}
        .lower-gallery{padding-top:50px}.lower-gallery-grid{width:calc(100% - 20px)}.lower-gallery-head>p{font-size:18px}
        .lower-wishes{padding:54px 0}.lower-wishes-sub{font-size:18px}.lower-form{padding:16px}.lower-comments{padding:0 16px}.lower-form-foot{align-items:flex-start}.lower-form-foot .lower-button{flex-shrink:0;padding-inline:18px}
        .lower-gifts{padding:58px 0 40px}.lower-gift-copy{font-size:20px}.lower-gift-grid{grid-template-columns:1fr}.lower-gift-card{padding:26px 22px}
        .lower-closing{height:78svh;min-height:500px}.lower-closing-copy{bottom:36px}.lower-closing-copy>p:last-child{font-size:20px}
        .lower-footer{flex-wrap:wrap;gap:18px;justify-content:center;text-align:center;padding:25px 24px 90px}.lower-footer a{flex-basis:100%}
        .lower-lightbox{padding:64px 12px}.lower-lightbox-prev,.lower-lightbox-next{top:auto;bottom:18px}.lower-lightbox-prev{left:calc(50% - 56px)}.lower-lightbox-next{right:calc(50% - 56px)}
      }

      /* === MAROON & CLASSIC BLACK / STRAIGHT SECTION EDGES === */
      body,main,.hero-ornament-reveal{background:var(--black)}
      #intro::before,.lower-count::before,.lower-prayer{clip-path:none}
      #intro{background:var(--maroon)}
      .children-section{padding:72px 0 66px;background:var(--black);color:var(--ivory)}
      .children-section>.lower-container>.lower-kicker{color:var(--gold-light)}
      .children-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
      .child-profile{min-width:0;text-align:center}
      .child-frame{position:relative;width:100%;max-width:390px;aspect-ratio:1;margin:0 auto 4px}
      /* Pusat lingkaran mengikuti SVG: x 53.2%, y 49.6%. */
      .child-photo{position:absolute;width:61%;height:61%;left:22.7%;top:19.1%;border-radius:50%;object-fit:cover}
      .child-ornament{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
      .child-profile>.lower-kicker{color:var(--gold-light);font-size:9px;margin:0 0 12px}
      .child-profile h3{font:400 clamp(32px,3.2vw,45px)/1.18 var(--script);margin:0 auto;max-width:300px}
      .lower-count{margin-top:0}
      .lower-clock>div{background:var(--maroon-dark);color:var(--ivory);border:1px solid #d4bd9140}
      .lower-clock span{color:var(--gold-light)}
      .lower-event,.lower-family,.lower-wishes{background:var(--black);color:var(--ivory)}
      .lower-event{padding-top:50px}
      .lower-invitation,.lower-event-card .lower-kicker,.lower-family .lower-kicker,.lower-family-grid div>span,.lower-wishes-sub{color:var(--sand)}
      .lower-event-card{border-color:#b8945580;border-radius:4px}
      .lower-diamond{background:var(--black)}
      .lower-event-card h2,.lower-event-date strong,.lower-peace,.lower-wishes h2{color:var(--gold-light)}
      .lower-event-date strong{border-color:#b894554d}
      .lower-prayer{background:var(--maroon-dark)}
      .lower-family{border-bottom:1px solid #b8945530}
      .lower-guestbook{background:#211b1b;border-color:#b8945545;color:var(--ivory)}
      .lower-guestbook-head,.lower-form,.lower-comment{border-color:#b8945545}
      .lower-attendance>div{border:1px solid #d4bd9140}
      .lower-form input,.lower-form textarea,.lower-form select,.lower-reply-form input,.lower-reply-form textarea{background:var(--black);border-color:#b8945560;color:var(--ivory);color-scheme:dark}
      .lower-form input::placeholder,.lower-form textarea::placeholder,.lower-reply-form input::placeholder,.lower-reply-form textarea::placeholder{color:#b9ada5}
      .lower-mode,.lower-comment footer,.lower-reply small,.lower-empty{color:#c9bdb4}
      .lower-form-status,.lower-comment header b,.lower-reply-button,.lower-more{color:var(--gold-light)}
      .lower-reply-form{background:var(--black)}
      .gallery-more-wrap{text-align:center;margin-top:30px}
      .gallery-more-wrap .lower-button{border-color:#b8945577;min-width:210px}
      #gallery-progress{color:var(--sand);font:10px/1.6 var(--ui);letter-spacing:.08em;margin:15px 0 0}
      #gallery-more[hidden]{display:none}
      .lower-gallery-row.single{grid-template-columns:1fr;max-width:50%;margin:auto;width:100%}
      .lower-gallery-row{animation:galleryRowIn .5s ease both}
      @keyframes galleryRowIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
      /* SUCCESS CARD — sand accent, native focus trap and Escape support. */
      .attendance-dialog{position:fixed;inset:0;width:min(440px,calc(100% - 32px));max-height:calc(100svh - 40px);margin:auto;padding:42px 28px 32px;border:1px solid var(--gold);border-radius:12px;background:var(--ivory);color:var(--ink);text-align:center;overflow-y:auto;box-shadow:0 24px 80px #0005}
      .attendance-dialog::backdrop{background:#171313b8;backdrop-filter:blur(5px)}
      .attendance-dialog[open]{animation:confirmationIn .35s cubic-bezier(.22,1,.36,1) both}
      .confirmation-close{position:absolute;right:12px;top:10px;width:36px;height:36px;border:0;background:transparent;color:var(--maroon);font:30px/1 var(--serif);border-radius:50%}
      .confirmation-close:hover{background:var(--sand)}
      .confirmation-check{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 20px;border:1px solid var(--gold);border-radius:50%;color:var(--maroon);font:26px var(--serif)}
      .attendance-dialog .lower-kicker{font-size:9px;color:var(--muted);margin-bottom:8px}
      .attendance-dialog h2{font:400 54px/1.1 var(--script);color:var(--maroon);margin:0 0 16px}
      .confirmation-name{font:500 26px/1.3 var(--serif);overflow-wrap:anywhere;margin:0 0 14px}
      .confirmation-badge{display:inline-block;background:var(--maroon);color:var(--ivory);padding:7px 18px;border-radius:999px;font:11px var(--ui)}
      #confirmation-message{font:14px/1.7 var(--serif);margin:20px auto 24px;max-width:320px}
      .attendance-dialog .lower-button{width:100%}
      @keyframes confirmationIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
      @media(max-width:640px){
        .children-section{padding:54px 0}.children-grid{grid-template-columns:1fr;gap:42px}
        .child-frame{max-width:350px;margin-bottom:0}.child-profile h3{font-size:42px}
        .lower-count{margin-top:0}.lower-event{padding-top:36px}
        #intro::before{clip-path:none}
      }