:root {
        --ink: #26100e;
        --ink-2: #331512;
        --lacquer: #8e2620;
        --lacquer-2: #b03a2e;
        --gold: #d9a441;
        --gold-hi: #f2d48c;
        --gold-dim: #99732e;
        --sogan: #c89b5e;
        --ivory: #f5ebd8;
        --muted: #b99e86;
        --line: rgba(217, 164, 65, 0.32);

        --tex: url("../images/texture-1.webp");
        --tex3: url("../images/texture-3.webp");

        --foto-terang: 1.02;
        --foto-sepia: 0.14;
        --foto-selubung: 0.06;
        --tex-pos: center center;
        --tex2: url("../images/texture-2.webp");
        --tex-veil: 0.88;
        --serif: "Marcellus", "Times New Roman", serif;
        --display: "Italiana", "Marcellus", serif;
        --brush: "Ma Shan Zheng", cursive;
        --jawa: "Yatra One", "Marcellus", serif;
        --sans: "Jost", system-ui, sans-serif;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        overflow-x: hidden;
        overflow-x: clip;
        overscroll-behavior-x: none;
        width: 100%;
      }
      body {
        background: var(--ink);
        color: var(--ivory);
        font-family: var(--sans);
        font-weight: 300;
        letter-spacing: 0.02em;
        line-height: 1.7;
        overflow-x: hidden;
        overflow-x: clip;
        overscroll-behavior-x: none;
        max-width: 100%;
        width: 100%;
        position: relative;
      }

      .stage,
      .sheet {
        max-width: 100vw;
        overflow-x: clip;
      }

      img,
      svg,
      iframe,
      video {
        max-width: 100%;
      }
      img {
        max-width: 100%;
        display: block;
      }
      [hidden] {
        display: none !important;
      }
      button:disabled {
        cursor: wait;
        opacity: 0.6;
      }
      button {
        font-family: inherit;
        cursor: pointer;
      }

      .batik {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23D9A441' stroke-opacity='.07' stroke-width='1'%3E%3Cellipse cx='28' cy='7' rx='9' ry='14'/%3E%3Cellipse cx='28' cy='49' rx='9' ry='14'/%3E%3Cellipse cx='7' cy='28' rx='14' ry='9'/%3E%3Cellipse cx='49' cy='28' rx='14' ry='9'/%3E%3Ccircle cx='28' cy='28' r='2.5' fill='%23D9A441' fill-opacity='.09' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
      }

      .stage {
        display: flex;
        min-height: 100vh;
      }
      .side {
        display: none;
        position: fixed;
        inset: 0;
        right: 430px;
        overflow: hidden;
      }
      .sheet {
        width: 100%;
        margin-left: auto;
        background: var(--ink);
        position: relative;
        min-height: 100vh;
      }
      @media (min-width: 900px) {
        .side {
          display: block;
        }
        .sheet {
          width: 430px;
          box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6);
        }
      }

      .side-inner {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background:
          radial-gradient(1100px 700px at 30% 18%, #47201a 0%, transparent 55%),
          radial-gradient(900px 600px at 78% 88%, #38150f 0%, transparent 60%),
          var(--ink);
        text-align: center;
        padding: 48px;
      }
      .side-inner .hanzi-bg {
        position: absolute;
        font-family: var(--brush);
        font-size: 26rem;
        color: var(--lacquer);
        opacity: 0.14;
        line-height: 1;
        user-select: none;
      }
      .side-inner .names {
        font-family: var(--display);
        font-size: clamp(2.3rem, 4vw, 3.6rem);
        letter-spacing: 0.05em;
        color: var(--gold-hi);
        line-height: 1.4;
        position: relative;
      }
      .side-inner .date {
        font-size: 0.8rem;
        letter-spacing: 0.5em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 20px;
        position: relative;
      }
      .side-inner .aksara {
        font-family: var(--jawa);
        font-size: 1.35rem;
        letter-spacing: 0.08em;
        color: var(--sogan);
        margin-top: 26px;
        position: relative;
      }
      .side-inner .aksara small {
        display: block;
        font-family: var(--sans);
        font-size: 0.62rem;
        letter-spacing: 0.4em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 6px;
      }

      .lantern {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold-hi);
        opacity: 0;
        box-shadow: 0 0 12px 3px rgba(242, 212, 140, 0.5);
        animation: floatUp 9s ease-in infinite;
      }
      @keyframes floatUp {
        0% {
          opacity: 0;
          transform: translateY(40px) scale(0.6);
        }
        15% {
          opacity: 0.9;
        }
        80% {
          opacity: 0.5;
        }
        100% {
          opacity: 0;
          transform: translateY(-70vh) scale(1);
        }
      }

      #cover {
        position: fixed;
        inset: 0;
        z-index: 60;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: transparent;
        justify-content: space-between;
        text-align: center;
        padding: clamp(44px, 8vh, 86px) 32px clamp(48px, 9vh, 96px);
        transition: visibility 0s 1.9s;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      .cover-top,
      .cover-bottom {
        width: 100%;
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .cover-top {
        padding-bottom: 24px;
      }
      .cover-bottom {
        padding-top: 8px;
      }
      #cover > *:not(.curtain) {
        position: relative;
        z-index: 1;
        transition: opacity 0.35s ease;
      }
      #cover.opened {
        visibility: hidden;
        pointer-events: none;
      }
      #cover.opened > *:not(.curtain) {
        opacity: 0;
      }

      .curtain {
        position: absolute;
        left: 0;
        width: 100%;
        height: 50.15%;
        z-index: 0;
        transition: transform 1.15s cubic-bezier(0.75, 0, 0.25, 1) 0.55s;
        will-change: transform;
      }
      .curtain.top {
        top: 0;
        background:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23D9A441' stroke-opacity='.07' stroke-width='1'%3E%3Cellipse cx='28' cy='7' rx='9' ry='14'/%3E%3Cellipse cx='28' cy='49' rx='9' ry='14'/%3E%3Cellipse cx='7' cy='28' rx='14' ry='9'/%3E%3Cellipse cx='49' cy='28' rx='14' ry='9'/%3E%3Ccircle cx='28' cy='28' r='2.5' fill='%23D9A441' fill-opacity='.09' stroke='none'/%3E%3C/g%3E%3C/svg%3E"),
          radial-gradient(720px 420px at 50% 100%, #47201a 0%, transparent 70%),
          var(--ink);
        box-shadow: 0 6px 26px -6px rgba(217, 164, 65, 0.35);
      }
      .curtain.bottom {
        bottom: 0;
        background:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23D9A441' stroke-opacity='.07' stroke-width='1'%3E%3Cellipse cx='28' cy='7' rx='9' ry='14'/%3E%3Cellipse cx='28' cy='49' rx='9' ry='14'/%3E%3Cellipse cx='7' cy='28' rx='14' ry='9'/%3E%3Cellipse cx='49' cy='28' rx='14' ry='9'/%3E%3Ccircle cx='28' cy='28' r='2.5' fill='%23D9A441' fill-opacity='.09' stroke='none'/%3E%3C/g%3E%3C/svg%3E"),
          radial-gradient(720px 420px at 50% 0%, #3a1913 0%, transparent 70%),
          var(--ink);
        box-shadow: 0 -6px 26px -6px rgba(217, 164, 65, 0.35);
      }

      .curtain.top::after,
      .curtain.bottom::before {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 18px;
        background:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cg fill='none' stroke='%23D9A441' stroke-opacity='.75' stroke-width='1'%3E%3Cpath d='M0 13 Q 7 13 9 7 Q 11 1 14 1 Q 17 1 19 7 Q 21 13 28 13'/%3E%3Ccircle cx='14' cy='8.5' r='1.6' fill='%23D9A441' fill-opacity='.55' stroke='none'/%3E%3C/g%3E%3C/svg%3E")
            repeat-x bottom / 28px 14px,
          linear-gradient(
              90deg,
              transparent,
              var(--gold) 18%,
              var(--gold-hi) 50%,
              var(--gold) 82%,
              transparent
            )
            bottom / 100% 1.5px no-repeat;
      }
      .curtain.top::after {
        bottom: 0;
      }
      .curtain.bottom::before {
        top: 0;
        transform: scaleY(-1);
      }

      #cover.opened .curtain.top::after,
      #cover.opened .curtain.bottom::before {
        animation: seamGlow 0.55s ease-out;
      }
      @keyframes seamGlow {
        0% {
          filter: brightness(1);
        }
        45% {
          filter: brightness(2.4);
        }
        100% {
          filter: brightness(1.15);
        }
      }
      #cover.opened .curtain.top {
        transform: translateY(-102%);
      }
      #cover.opened .curtain.bottom {
        transform: translateY(102%);
      }

      .stamp-flash {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        background: radial-gradient(
          circle at 50% 60%,
          rgba(176, 58, 46, 0.55) 0%,
          transparent 60%
        );
      }
      #cover.opened .stamp-flash {
        animation: inkFlash 0.55s ease-out;
      }
      @keyframes inkFlash {
        0% {
          opacity: 0;
        }
        20% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }

      .seal.stamping {
        animation: stampPress 0.5s cubic-bezier(0.3, 1.5, 0.4, 1) forwards;
      }
      @keyframes stampPress {
        0% {
          transform: rotate(-4deg) scale(1);
        }
        40% {
          transform: rotate(0deg) scale(1.16);
        }
        65% {
          transform: rotate(0deg) scale(0.9);
        }
        100% {
          transform: rotate(0deg) scale(1);
        }
      }
      .cover-eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.55em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .cover-names {
        font-family: var(--display);
        font-size: clamp(2rem, 7.5vw, 3.1rem);
        letter-spacing: 0.06em;
        color: var(--gold-hi);
        margin: 0.35em 0 0.15em;
        line-height: 1.35;
      }
      .cn-amp {
        display: block;
        font-family: var(--serif);
        font-size: 0.4em;
        color: var(--gold-dim);
        letter-spacing: 0.5em;
        margin: 0.2em 0;
      }
      .cover-date {
        font-family: var(--serif);
        font-size: 1rem;
        letter-spacing: 0.32em;
        color: var(--ivory);
        margin-top: 4px;
      }
      .cover-aksara {
        font-family: var(--jawa);
        font-size: 1.05rem;
        letter-spacing: 0.1em;
        color: var(--sogan);
        margin-top: 10px;
      }
      .cover-to {
        margin-top: 0;
        margin-bottom: 3px;
        font-size: 0.6rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #c9b49b;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
        z-index: 3;
      }
      .cover-guest {
        font-family: var(--serif);
        font-size: 1.4rem;
        color: #fff6e4;
        margin-top: 0;
        letter-spacing: 0.03em;
        line-height: 1.35;
        padding: 12px 0;
        position: relative;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
        z-index: 3;
        max-width: 320px;
        margin-inline: auto;
        overflow-wrap: break-word;
        text-wrap: balance;
      }

      .cover-guest::before,
      .cover-guest::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: min(190px, 72%);
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          var(--gold-dim) 22%,
          var(--gold-hi) 50%,
          var(--gold-dim) 78%,
          transparent
        );
        opacity: 0.85;
      }
      .cover-guest::before {
        top: 0;
      }
      .cover-guest::after {
        bottom: 0;
      }

      .cover-guest.panjang {
        font-size: 1.15rem;
        letter-spacing: 0.02em;
      }
      .cover-guest.sangat-panjang {
        font-size: 1rem;
        letter-spacing: 0;
      }

      .seal {
        margin-top: 34px;
        margin-inline: auto;
        width: 122px;
        height: 122px;
        border-radius: 26px;
        background: linear-gradient(
          150deg,
          var(--lacquer-2),
          var(--lacquer) 60%,
          #6e1b16
        );
        border: none;
        position: relative;
        display: grid;
        place-items: center;
        transform: rotate(-4deg);
        transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.4);
        will-change: transform;
        box-shadow:
          0 10px 30px rgba(0, 0, 0, 0.45),
          inset 0 0 0 2px rgba(242, 212, 140, 0.35);
      }
      .seal:hover {
        transform: rotate(0deg) scale(1.06);
      }
      .seal:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 8px;
      }
      .seal::before {
        content: "";
        position: absolute;
        inset: -13px;
        border-radius: 34px;
        background: conic-gradient(
          from 0deg,
          transparent 0 40deg,
          var(--gold) 90deg,
          var(--gold-hi) 120deg,
          transparent 200deg,
          var(--gold-dim) 300deg,
          transparent 360deg
        );
        -webkit-mask: radial-gradient(
          farthest-side,
          transparent calc(100% - 3px),
          #000 calc(100% - 2px)
        );
        mask: radial-gradient(
          farthest-side,
          transparent calc(100% - 3px),
          #000 calc(100% - 2px)
        );
        animation: spin 8s linear infinite;
      }
      .seal::after {
        content: "";
        position: absolute;
        inset: -24px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(217, 164, 65, 0.34) 0%,
          rgba(176, 58, 46, 0.2) 45%,
          transparent 66%
        );
        animation: breatheGold 3.6s ease-in-out infinite;
        z-index: -1;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes breatheGold {
        0%,
        100% {
          opacity: 0.35;
          transform: scale(0.92);
        }
        50% {
          opacity: 0.95;
          transform: scale(1.08);
        }
      }
      .seal-hanzi {
        font-family: var(--brush);
        font-size: 3.4rem;
        color: var(--gold-hi);
        line-height: 1;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
      }
      .seal-hint {
        margin-top: 26px;
        font-size: 0.76rem;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--gold-hi);
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
        animation: hintPulse 2.8s ease-in-out infinite;
      }
      @keyframes hintPulse {
        0%,
        100% {
          opacity: 0.7;
        }
        50% {
          opacity: 1;
        }
      }

      section {
        padding: 88px 30px;
        position: relative;
      }
      .eyebrow {
        font-size: 0.68rem;
        letter-spacing: 0.5em;
        text-transform: uppercase;
        color: var(--gold-dim);
        text-align: center;
      }
      .eyebrow .hz {
        font-family: var(--brush);
        font-size: 1.15rem;
        letter-spacing: 0.2em;
        color: var(--lacquer-2);
        vertical-align: middle;
        margin-right: 10px;
      }
      h2 {
        font-family: var(--serif);
        font-weight: 400;
        font-size: 1.85rem;
        text-align: center;
        color: var(--ivory);
        margin: 0.45em 0 1.4em;
        line-height: 1.3;
        letter-spacing: 0.06em;
      }

      .gunungan {
        display: block;
        margin: 0 auto;
        width: 66px;
        height: 78px;
      }
      .gunungan path {
        fill: none;
        stroke: var(--gold);
        stroke-width: 1.2;
        stroke-linecap: round;
      }
      .gunungan .isi {
        stroke: var(--sogan);
        stroke-width: 0.9;
        opacity: 0.8;
      }

      .fret {
        position: absolute;
        width: 26px;
        height: 26px;
        pointer-events: none;
      }
      .fret::before,
      .fret::after {
        content: "";
        position: absolute;
        background: var(--gold);
      }
      .fret::before {
        width: 100%;
        height: 1.5px;
      }
      .fret::after {
        width: 1.5px;
        height: 100%;
      }
      .fret.tl {
        top: 10px;
        left: 10px;
      }
      .fret.tr {
        top: 10px;
        right: 10px;
        transform: rotate(90deg);
      }
      .fret.br {
        bottom: 10px;
        right: 10px;
        transform: rotate(180deg);
      }
      .fret.bl {
        bottom: 10px;
        left: 10px;
        transform: rotate(270deg);
      }

      .reveal {
        opacity: 0;
        transform: translateY(26px);
        transition:
          opacity 0.9s ease,
          transform 0.9s ease;
      }
      .reveal.left {
        transform: translateX(-36px);
      }
      .reveal.right {
        transform: translateX(36px);
      }
      .reveal.zoom {
        transform: scale(0.88);
      }
      .reveal.in-view {
        opacity: 1;
        transform: none;
      }
      .reveal.d1 {
        transition-delay: 0.15s;
      }
      .reveal.d2 {
        transition-delay: 0.3s;
      }
      .reveal.d3 {
        transition-delay: 0.45s;
      }

      .stagger > * {
        opacity: 0;
        transform: translateY(22px);
        transition:
          opacity 0.7s ease,
          transform 0.7s ease;
      }
      .stagger.in-view > * {
        opacity: 1;
        transform: none;
      }
      .stagger.in-view > *:nth-child(1) {
        transition-delay: 0.05s;
      }
      .stagger.in-view > *:nth-child(2) {
        transition-delay: 0.15s;
      }
      .stagger.in-view > *:nth-child(3) {
        transition-delay: 0.25s;
      }
      .stagger.in-view > *:nth-child(4) {
        transition-delay: 0.35s;
      }
      .stagger.in-view > *:nth-child(5) {
        transition-delay: 0.45s;
      }
      .stagger.in-view > *:nth-child(6) {
        transition-delay: 0.55s;
      }

      .gunungan path {
        stroke-dasharray: 320;
        stroke-dashoffset: 320;
      }
      .gunungan.in-view path {
        animation: drawG 2.2s ease forwards;
      }
      .gunungan.in-view path:nth-child(2) {
        animation-delay: 0.4s;
      }
      .gunungan.in-view path:nth-child(3) {
        animation-delay: 0.8s;
      }
      @keyframes drawG {
        to {
          stroke-dashoffset: 0;
        }
      }

      #hero .hz-top {
        animation: hzPulse 4s ease-in-out infinite;
      }
      @keyframes hzPulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.07);
        }
      }

      #hero {
        padding-top: 104px;
        text-align: center;
      }
      #hero .hz-top {
        font-family: var(--brush);
        font-size: 2.6rem;
        color: var(--lacquer-2);
        line-height: 1;
      }
      #hero .hz-top small {
        display: block;
        font-family: var(--sans);
        font-size: 0.6rem;
        letter-spacing: 0.45em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 8px;
      }
      #hero .names {
        font-family: var(--display);
        font-size: clamp(2.2rem, 8.5vw, 3.1rem);
        letter-spacing: 0.06em;
        color: var(--gold-hi);
        line-height: 1.4;
        margin-top: 26px;
      }
      #hero .amp {
        font-family: var(--serif);
        color: var(--gold-dim);
        font-size: 1.1rem;
        display: block;
        letter-spacing: 0.5em;
        margin: 0.15em 0;
      }
      #hero .when {
        margin-top: 24px;
        font-family: var(--serif);
        letter-spacing: 0.28em;
        font-size: 0.95rem;
      }
      #hero .aksara {
        font-family: var(--jawa);
        font-size: 1.15rem;
        letter-spacing: 0.1em;
        color: var(--sogan);
        margin-top: 12px;
      }
      #hero .aksara small {
        display: block;
        font-family: var(--sans);
        font-size: 0.6rem;
        letter-spacing: 0.4em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 4px;
      }

      #quote {
        background: var(--ink-2);
      }

      #quote .hz-quote {
        font-family: var(--brush);
        font-size: 2.2rem;
        color: var(--gold);
        text-align: center;
        letter-spacing: 0.15em;
      }
      #quote blockquote {
        font-family: var(--serif);
        font-size: 1.12rem;
        font-style: italic;
        text-align: center;
        color: var(--ivory);
        max-width: 340px;
        margin: 18px auto 0;
        line-height: 1.9;
      }
      #quote cite {
        display: block;
        margin-top: 18px;
        font-family: var(--sans);
        font-style: normal;
        font-size: 0.7rem;
        letter-spacing: 0.4em;
        text-transform: uppercase;
        color: var(--gold-dim);
      }

      .person {
        text-align: center;
        margin-bottom: 56px;
        position: relative;
      }
      .person:last-child {
        margin-bottom: 0;
      }
      .portrait {
        width: 172px;
        height: 222px;
        margin: 0 auto 24px;
        position: relative;
        border-radius: 14px;
        overflow: hidden;
        background: linear-gradient(160deg, #4a211b, #2a100c);
        display: grid;
        place-items: center;
        box-shadow: inset 0 0 0 1px var(--line);
      }
      .portrait::after {
        content: "";
        position: absolute;
        inset: 9px;
        border: 1px solid var(--line);
        border-radius: 8px;
      }
      .portrait span {
        font-family: var(--brush);
        font-size: 3.2rem;
        color: var(--gold);
        opacity: 0.85;
      }
      .person h3 {
        font-family: var(--display);
        font-size: 1.8rem;
        letter-spacing: 0.05em;
        color: var(--gold-hi);
        font-weight: 400;
        line-height: 1.3;
      }
      .person .etnis {
        font-size: 0.64rem;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--lacquer-2);
        margin-top: 4px;
      }
      .person .parents {
        font-size: 0.82rem;
        color: var(--muted);
        margin-top: 10px;
        max-width: 300px;
        margin-inline: auto;
      }
      .person .ig {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
        font-size: 0.7rem;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--gold);
        text-decoration: none;
        border: 1px solid var(--line);
        padding: 8px 18px;
        border-radius: 99px;
        transition: transform 0.3s ease;
      }
      .person .ig:hover {
        transform: translateY(-2px);
      }

      #countdown {
        background: var(--ink-2);
      }
      .cd-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        max-width: 360px;
        margin: 0 auto;
      }
      .cd-cell {
        background: linear-gradient(160deg, #3d1b15, #2c110d);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 18px 4px;
        text-align: center;
        overflow: hidden;
      }
      .cd-cell b {
        display: block;
        font-family: var(--serif);
        font-size: 1.9rem;
        color: var(--gold-hi);
        line-height: 1;
      }
      .cd-cell small {
        font-size: 0.62rem;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .cd-cell b.tick {
        animation: inkSpread 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
      }

      .event-card {
        background: var(--ink-2);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 40px 28px;
        text-align: center;
        margin-bottom: 26px;
        position: relative;
        overflow: hidden;
      }
      .event-card h3 {
        font-family: var(--serif);
        font-size: 1.4rem;
        color: var(--gold-hi);
        letter-spacing: 0.16em;
      }
      .event-card .hz-tag {
        font-family: var(--brush);
        font-size: 1.5rem;
        color: var(--lacquer-2);
        display: block;
        margin-bottom: 6px;
      }
      .event-card .t {
        font-family: var(--serif);
        font-size: 1.02rem;
        margin-top: 14px;
      }
      .event-card .place {
        font-size: 0.85rem;
        color: var(--muted);
        margin-top: 10px;
        line-height: 1.8;
      }
      .btn {
        display: inline-block;
        margin-top: 20px;
        padding: 12px 28px;
        border-radius: 99px;
        background: linear-gradient(
          120deg,
          var(--gold-dim),
          var(--gold) 45%,
          var(--gold-hi) 55%,
          var(--gold)
        );
        background-size: 220% 100%;
        color: #2a1508;
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        border: none;
        text-decoration: none;
        transition:
          background-position 0.6s ease,
          transform 0.3s ease;
      }
      .btn:hover {
        background-position: 100% 0;
        transform: translateY(-2px);
      }
      .btn.ghost {
        background: none;
        border: 1px solid var(--line);
        color: var(--gold);
      }
      .btn.red {
        background: linear-gradient(
          120deg,
          #7a1f19,
          var(--lacquer-2) 50%,
          #7a1f19
        );
        color: var(--gold-hi);
      }

      .map-frame {
        margin: 22px auto 4px;
        max-width: 340px;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--line);
        position: relative;
        aspect-ratio: 4/3;
        box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6);
      }
      .map-frame iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
      }

      .map-frame::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background: linear-gradient(
          180deg,
          rgba(38, 16, 14, 0.3),
          rgba(38, 16, 14, 0.16) 45%,
          rgba(38, 16, 14, 0.34)
        );
        mix-blend-mode: multiply;
      }
      .map-frame::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 2;
        box-shadow: inset 0 0 32px rgba(38, 16, 14, 0.55);
      }

      .gal {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      .gal figure {
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        aspect-ratio: 3/4;
        background: linear-gradient(150deg, #47201a, #26100c);
        display: grid;
        place-items: center;
        border: 1px solid rgba(217, 164, 65, 0.16);
      }
      .gal figure:nth-child(3n) {
        grid-column: span 2;
        aspect-ratio: 16/9;
      }
      .gal figure span {
        font-family: var(--brush);
        font-size: 1.8rem;
        color: var(--gold-dim);
      }
      .gal .gal-placeholder {
        display: grid;
        gap: 8px;
        text-align: center;
      }
      .gal-placeholder small {
        font-family: var(--sans);
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        color: var(--muted);
      }
      .gal img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      form {
        max-width: 360px;
        margin: 0 auto;
      }
      .field {
        margin-bottom: 18px;
      }
      .field label {
        display: block;
        font-size: 0.66rem;
        letter-spacing: 0.35em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 8px;
      }
      .field input,
      .field select,
      .field textarea {
        width: 100%;
        background: #33150f;
        border: 1px solid var(--line);
        border-radius: 10px;
        color: var(--ivory);
        font-family: var(--sans);
        font-weight: 300;
        font-size: 0.95rem;
        padding: 13px 16px;
        outline: none;
        transition: border-color 0.3s;
      }
      .field textarea {
        resize: vertical;
        min-height: 96px;
      }
      .field input:focus,
      .field select:focus,
      .field textarea:focus {
        border-color: var(--gold);
      }
      .form-msg {
        text-align: center;
        font-size: 0.85rem;
        color: var(--gold-hi);
        margin-top: 14px;
        min-height: 1.4em;
      }

      .wish {
        background: var(--ink-2);
        border: 1px solid rgba(217, 164, 65, 0.15);
        border-radius: 12px;
        padding: 18px 20px;
        margin-bottom: 14px;
      }
      .wish b {
        font-family: var(--serif);
        font-size: 1rem;
        color: var(--gold-hi);
      }
      .wish time {
        float: right;
        font-size: 0.66rem;
        color: var(--muted);
        letter-spacing: 0.1em;
      }
      .wish p {
        font-size: 0.88rem;
        margin-top: 6px;
        color: var(--ivory);
      }
      #wish-list {
        max-width: 380px;
        margin: 34px auto 0;
        max-height: 340px;
        overflow-y: auto;
        padding-right: 4px;
      }
      #wish-list::-webkit-scrollbar {
        width: 4px;
      }
      #wish-list::-webkit-scrollbar-thumb {
        background: var(--gold-dim);
        border-radius: 4px;
      }

      .form-intro {
        text-align: center;
        font-size: 0.85rem;
        color: var(--muted);
        max-width: 330px;
        margin: -0.8em auto 26px;
        line-height: 1.8;
      }
      .opsional {
        text-transform: none;
        letter-spacing: 0.05em;
        color: var(--gold-dim);
        font-size: 0.9em;
      }
      #jumlah-field {
        transition: opacity 0.3s ease;
      }

      .field input[type="number"] {
        -moz-appearance: textfield;
        appearance: textfield;
      }
      .field input[type="number"]::-webkit-outer-spin-button,
      .field input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      .field input:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      .bank {
        background:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23F2D48C' stroke-opacity='.17' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M2 20 q7 -10 15 -3 q4 -11 14 -4 q9 -5 12 5'/%3E%3Cpath d='M6 26 q7 -8 14 -2'/%3E%3Cpath d='M34 52 q7 -10 15 -3 q4 -11 14 -4'/%3E%3Cpath d='M38 58 q7 -8 14 -2'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F2D48C' stroke-opacity='.13' stroke-width='1'%3E%3Ccircle cx='48' cy='16' r='5'/%3E%3Crect x='45.5' y='13.5' width='5' height='5'/%3E%3Ccircle cx='16' cy='48' r='5'/%3E%3Crect x='13.5' y='45.5' width='5' height='5'/%3E%3C/g%3E%3C/svg%3E"),
          radial-gradient(
            120% 80% at 50% 0%,
            rgba(255, 255, 255, 0.09),
            transparent 60%
          ),
          linear-gradient(150deg, var(--lacquer-2), #7a211b 55%, #5e1712);
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 30px 28px;
        max-width: 340px;
        margin: 0 auto 20px;
        text-align: center;
        position: relative;
        overflow: hidden;
        box-shadow:
          inset 0 1px 0 rgba(255, 240, 200, 0.18),
          inset 0 0 40px rgba(0, 0, 0, 0.28),
          0 10px 26px -12px rgba(0, 0, 0, 0.65);
      }

      .bank::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 34%;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0),
          rgba(0, 0, 0, 0.22)
        );
        border-top: 1px solid rgba(242, 212, 140, 0.22);
        pointer-events: none;
      }
      .bank::after {
        content: "";
        position: absolute;
        top: 0;
        left: -70%;
        width: 45%;
        height: 100%;
        background: linear-gradient(
          105deg,
          transparent,
          rgba(242, 212, 140, 0.18),
          transparent
        );
        transform: skewX(-18deg);
        animation: shine 4.5s ease-in-out infinite;
      }
      @keyframes shine {
        0%,
        55% {
          transform: translateX(0) skewX(-18deg);
        }
        85%,
        100% {
          transform: translateX(420%) skewX(-18deg);
        }
      }
      .bank .hz {
        font-family: var(--brush);
        font-size: 1.7rem;
        color: var(--gold-hi);
        opacity: 0.92;
        position: relative;
        z-index: 1;
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
      }
      .bank .bn {
        font-size: 0.7rem;
        letter-spacing: 0.4em;
        text-transform: uppercase;
        color: var(--gold-hi);
        margin-top: 4px;
        position: relative;
        z-index: 1;
      }
      .bank .no {
        font-family: var(--serif);
        font-size: 1.5rem;
        letter-spacing: 0.12em;
        margin: 10px 0 4px;
        color: #fff7e6;
        -webkit-text-fill-color: #fff7e6;
      }
      .bank .no a,
      .bank a[href^="tel"],
      a[href^="tel"] {
        color: inherit !important;
        -webkit-text-fill-color: inherit !important;
        text-decoration: none !important;
        pointer-events: none;
      }
      .bank .an {
        font-size: 0.82rem;
        color: rgba(245, 235, 216, 0.88);
        position: relative;
        z-index: 1;
      }

      .bank.qris {
        background-blend-mode: soft-light, normal, normal;
      }
      .bank.qris .qris-frame {
        position: relative;
        z-index: 1;
        box-shadow:
          0 6px 18px -6px rgba(0, 0, 0, 0.5),
          0 0 0 1px rgba(242, 212, 140, 0.45);
      }

      footer {
        padding: 70px 30px;
        text-align: center;
        background: var(--ink-2);
      }
      footer .gunungan {
        margin: 0 auto 18px;
      }
      footer .names {
        font-family: var(--display);
        font-size: 1.9rem;
        letter-spacing: 0.06em;
        color: var(--gold-hi);
        line-height: 1.5;
      }
      footer .ft-when {
        font-family: var(--serif);
        font-size: 0.9rem;
        letter-spacing: 0.14em;
        color: var(--ivory);
        margin-top: 12px;
        line-height: 1.9;
      }

      .ft-sep {
        width: 150px;
        height: 1px;
        margin: 26px auto;
        position: relative;
        background: linear-gradient(
          90deg,
          transparent,
          var(--line) 25%,
          var(--gold) 50%,
          var(--line) 75%,
          transparent
        );
      }
      .ft-sep::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 5px;
        height: 5px;
        transform: translate(-50%, -50%) rotate(45deg);
        background: var(--gold);
        opacity: 0.85;
      }

      .ft-fam {
        max-width: 330px;
        margin: 0 auto;
        line-height: 1.85;
      }
      .ft-fam span {
        display: block;
        font-family: var(--serif);
        font-size: 0.92rem;
        color: rgba(245, 235, 216, 0.9);
      }
      .ft-fam .ft-amp {
        font-family: var(--serif);
        font-style: italic;
        font-size: 0.85rem;
        color: var(--gold-dim);
        letter-spacing: 0.4em;
        margin: 2px 0;
      }
      footer p.close {
        font-size: 0.78rem;
        color: var(--muted);
        max-width: 320px;
        margin: 24px auto 0;
        line-height: 1.85;
      }

      .ft-thanks {
        margin-top: 30px;
      }
      footer .aksara {
        font-family: var(--jawa);
        font-size: 1.15rem;
        letter-spacing: 0.1em;
        color: var(--sogan);
      }
      footer .hz {
        font-family: var(--brush);
        font-size: 1.6rem;
        color: var(--lacquer-2);
        margin-top: 10px;
      }
      footer .hz small {
        display: block;
        font-family: var(--sans);
        font-size: 0.6rem;
        letter-spacing: 0.4em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 4px;
      }

      @media (max-height: 740px) {
        footer .gunungan {
          width: 44px;
          height: 52px;
          margin-bottom: 12px;
        }
        footer .names {
          font-size: 1.65rem;
        }
        .ft-sep {
          margin: 18px auto;
        }
        .ft-fam span {
          font-size: 0.86rem;
        }
        footer p.close {
          font-size: 0.74rem;
          margin-top: 18px;
        }
        .ft-thanks {
          margin-top: 20px;
        }
      }

      #music-btn {
        position: fixed;
        bottom: 22px;
        right: 22px;
        z-index: 50;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: var(--lacquer);
        border: 1px solid var(--gold);
        color: var(--gold-hi);
        display: none;
        place-items: center;
        transition: transform 0.3s;
      }
      #music-btn.show {
        display: grid;
      }
      #music-btn:hover {
        transform: scale(1.08);
      }
      #music-btn.playing svg {
        animation: spin 4s linear infinite;
      }

      #hearts {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 5;
        overflow: hidden;
        transition: opacity 1.2s ease;
      }
      @media (min-width: 900px) {
        #hearts {
          left: auto;
          right: 0;
          width: 430px;
        }
      }
      .heart {
        position: absolute;
        top: -6vh;
        color: #e88a87;
        text-shadow:
          0 0 6px rgba(230, 110, 105, 0.55),
          0 0 16px rgba(200, 70, 60, 0.28);
        opacity: 0;
        will-change: transform;
        animation: heartFall linear infinite;
      }
      .heart.gold {
        color: #f2d48c;
        text-shadow:
          0 0 6px rgba(242, 212, 140, 0.55),
          0 0 16px rgba(217, 164, 65, 0.3);
      }
      @keyframes heartFall {
        0% {
          opacity: 0;
          transform: translateY(0) translateX(0) rotate(-8deg);
        }
        8% {
          opacity: var(--o, 0.4);
        }
        50% {
          transform: translateY(55vh) translateX(14px) rotate(6deg);
        }
        92% {
          opacity: var(--o, 0.4);
        }
        100% {
          opacity: 0;
          transform: translateY(112vh) translateX(-10px) rotate(-6deg);
        }
      }

      #petals {
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 4;
        overflow: hidden;
        opacity: 0;
        transition: opacity 1.2s ease;
      }
      @media (min-width: 900px) {
        #petals {
          left: auto;
          right: 0;
          width: 430px;
        }
      }
      .petal {
        position: absolute;
        top: -4vh;
        background: linear-gradient(135deg, #fbf4e4, #e7d9be);
        box-shadow: 0 0 6px rgba(245, 235, 216, 0.25);
        opacity: 0;
        will-change: transform;
        animation: petalFall linear infinite;
      }
      .petal.v1 {
        border-radius: 52% 48% 55% 0;
      }
      .petal.v2 {
        border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
        background: linear-gradient(160deg, #fffbef, #ebdcc0);
      }
      .petal.v3 {
        border-radius: 0 58% 0 58%;
        background: linear-gradient(120deg, #f7edda, #e2d2b2);
      }
      @keyframes petalFall {
        0% {
          opacity: 0;
          transform: translate(0, 0) rotate(0deg);
        }
        8% {
          opacity: var(--o, 0.5);
        }
        45% {
          transform: translate(18px, 50vh) rotate(170deg);
        }
        92% {
          opacity: var(--o, 0.5);
        }
        100% {
          opacity: 0;
          transform: translate(-14px, 112vh) rotate(340deg);
        }
      }

      .qris-frame {
        background: #fff;
        padding: 12px;
        border-radius: 12px;
        max-width: 200px;
        margin: 14px auto 10px;
      }
      .qris-frame img {
        width: 100%;
        display: block;
      }

      .cd-grid .today {
        grid-column: 1/-1;
        font-family: var(--serif);
        font-size: 2rem;
        color: var(--gold-hi);
        text-align: center;
        padding: 26px 10px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: linear-gradient(160deg, #3d1b15, #2c110d);
        animation: hzPulse 3s ease-in-out infinite;
      }
      .cd-grid .today small {
        display: block;
        font-family: var(--sans);
        font-size: 0.68rem;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 8px;
      }

      .hz-quote.ink span {
        display: inline-block;
        opacity: 0;
        transform: translateY(10px) scale(1.22);
        transition:
          opacity 0.75s ease,
          transform 0.75s cubic-bezier(0.2, 0.8, 0.3, 1);
        will-change: opacity, transform;
      }
      .hz-quote.ink.in-view span {
        opacity: 1;
        transform: none;
        will-change: auto;
      }
      .hz-quote.ink.in-view span:nth-child(1) {
        transition-delay: 0.1s;
      }
      .hz-quote.ink.in-view span:nth-child(2) {
        transition-delay: 0.45s;
      }
      .hz-quote.ink.in-view span:nth-child(3) {
        transition-delay: 0.8s;
      }
      .hz-quote.ink.in-view span:nth-child(4) {
        transition-delay: 1.15s;
      }

      .gal figure:nth-child(odd) img {
        transform-origin: 30% 40%;
      }
      .gal figure:nth-child(even) img {
        transform-origin: 70% 60%;
      }
      @keyframes kenburns {
        from {
          transform: scale(1);
        }
        to {
          transform: scale(1.09);
        }
      }

      #scrollbar {
        position: fixed;
        top: 0;
        left: 0;
        height: 2.5px;
        width: 100%;
        z-index: 55;
        pointer-events: none;
        transform-origin: 0 50%;
        transform: scaleX(0);
        will-change: transform;
        background: linear-gradient(90deg, var(--gold-dim), var(--gold-hi));
      }

      .btn {
        position: relative;
        overflow: hidden;
      }
      .ripple {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient(
          circle,
          rgba(242, 212, 140, 0.7),
          transparent 65%
        );
        transform: scale(0);
        animation: rip 0.6s ease-out forwards;
      }
      @keyframes rip {
        to {
          transform: scale(3);
          opacity: 0;
        }
      }

      .gold-live {
        background: linear-gradient(
          105deg,
          var(--gold) 0%,
          var(--gold-hi) 42%,
          #fff8e1 50%,
          var(--gold-hi) 58%,
          var(--gold) 100%
        );
        background-size: 300% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation:
          goldSweep 12s ease-in-out infinite,
          goldBreathe 12s ease-in-out infinite;
      }

      .gold-live .amp,
      .gold-live .cn-amp {
        background: none;
        -webkit-text-fill-color: var(--gold-dim);
      }
      .gold-live small {
        background: none;
        -webkit-text-fill-color: var(--muted);
      }
      .gold-live.sogan {
        background-image: linear-gradient(
          105deg,
          var(--sogan) 0%,
          #e2be86 42%,
          #fff3dc 50%,
          #e2be86 58%,
          var(--sogan) 100%
        );
      }
      @keyframes goldSweep {
        0% {
          background-position: 130% 0;
        }
        30% {
          background-position: -30% 0;
        }
        100% {
          background-position: -30% 0;
        }
      }
      @keyframes goldBreathe {
        0%,
        100% {
          filter: brightness(1);
        }
        18% {
          filter: brightness(1.28);
        }
        60% {
          filter: brightness(1);
        }
      }

      @media (max-width: 560px) {
        section {
          padding-left: 22px;
          padding-right: 22px;
        }
        .cover-eyebrow {
          letter-spacing: 0.3em;
          font-size: 0.64rem;
        }
        .cover-to {
          letter-spacing: 0.16em;
          font-size: 0.68rem;
          margin-top: 28px;
        }
        .cover-guest {
          font-size: 1.35rem;
        }
        .seal {
          margin-top: 42px;
        }
        .cover-date {
          letter-spacing: 0.2em;
          font-size: 0.92rem;
        }
        .seal-hint {
          letter-spacing: 0.22em;
          font-size: 0.7rem;
          margin-top: 32px;
        }
        #hero .when {
          letter-spacing: 0.14em;
          font-size: 0.85rem;
        }
        #hero .hz-top small,
        #hero .aksara small {
          letter-spacing: 0.25em;
        }
        .eyebrow {
          letter-spacing: 0.3em;
          font-size: 0.62rem;
        }
        .cd-cell small {
          letter-spacing: 0.1em;
          font-size: 0.56rem;
        }
        .field label {
          letter-spacing: 0.2em;
        }
        .btn {
          letter-spacing: 0.16em;
          padding: 12px 20px;
          font-size: 0.66rem;
        }
        .person .etnis {
          letter-spacing: 0.16em;
          font-size: 0.6rem;
        }
        .event-card h3 {
          letter-spacing: 0.08em;
        }
        .event-card {
          padding: 32px 20px;
        }
        .bank {
          padding: 26px 20px;
        }
        .bank .bn,
        .bank .no {
          letter-spacing: 0.18em;
        }
        footer .aksara small,
        footer .hz small {
          letter-spacing: 0.25em;
        }
        .wish {
          padding: 16px 16px;
        }
        #quote {
          padding-top: 78px;
          padding-bottom: 78px;
        }
        #quote .hz-quote {
          font-size: 1.6rem;
        }
        #quote blockquote {
          font-size: 0.98rem;
        }
      }

      .gal figure::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23F2D48C' stroke-opacity='.55' stroke-width='1'%3E%3Cellipse cx='20' cy='5' rx='6.5' ry='10'/%3E%3Cellipse cx='20' cy='35' rx='6.5' ry='10'/%3E%3Cellipse cx='5' cy='20' rx='10' ry='6.5'/%3E%3Cellipse cx='35' cy='20' rx='10' ry='6.5'/%3E%3C/g%3E%3C/svg%3E")
            repeat,
          linear-gradient(150deg, #47201a, #26100c);
        background-size:
          40px 40px,
          cover;
        opacity: 0;
      }
      .gal.in-view figure::after {
        animation: kainAngkat 1.5s ease-out both;
      }
      @keyframes kainAngkat {
        0% {
          opacity: 1;
          transform: scale(1);
        }
        100% {
          opacity: 0;
          transform: scale(1.12);
        }
      }
      .gal.in-view figure:nth-child(2)::after {
        animation-delay: 0.12s;
      }
      .gal.in-view figure:nth-child(3)::after {
        animation-delay: 0.24s;
      }
      .gal.in-view figure:nth-child(4)::after {
        animation-delay: 0.36s;
      }
      .gal.in-view figure:nth-child(5)::after {
        animation-delay: 0.48s;
      }

      .gal figure img,
      .portrait img {
        -webkit-mask-image: radial-gradient(
          circle,
          #000 48%,
          rgba(0, 0, 0, 0.45) 72%,
          transparent 100%
        );
        mask-image: radial-gradient(
          circle,
          #000 48%,
          rgba(0, 0, 0, 0.45) 72%,
          transparent 100%
        );
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;

        -webkit-mask-size: 280% 280%;
        mask-size: 280% 280%;
      }
      @keyframes unfurl {
        from {
          -webkit-mask-size: 0% 0%;
          mask-size: 0% 0%;
        }
        to {
          -webkit-mask-size: 280% 280%;
          mask-size: 280% 280%;
        }
      }

      @keyframes duotone {
        0% {
          filter: sepia(0.85) saturate(1.7) hue-rotate(-14deg) brightness(0.82)
            contrast(1.1);
        }
        100% {
          filter: none;
        }
      }
      .gal.in-view figure img {
        animation:
          unfurl 1.5s ease-out forwards,
          duotone 2.2s ease-out 0.35s forwards,
          kenburns 14s ease-in-out 1.8s infinite alternate;
      }
      .person.in-view .portrait img {
        animation:
          unfurl 1.6s ease-out forwards,
          duotone 2.4s ease-out 0.4s forwards;
      }

      .portrait::before {
        content: "";
        position: absolute;
        inset: -60%;
        z-index: 0;
        background: conic-gradient(
          from 0deg,
          transparent 0 35deg,
          var(--gold) 85deg,
          var(--gold-hi) 115deg,
          transparent 195deg,
          var(--gold-dim) 300deg,
          transparent 360deg
        );
        animation: spin 9s linear infinite;
      }
      .portrait img {
        position: absolute !important;
        inset: 3px !important;
        width: calc(100% - 6px) !important;
        height: calc(100% - 6px) !important;
        border-radius: 11px;
        z-index: 1;
      }
      .portrait::after {
        z-index: 2;
      }

      .gal.in-view figure {
        transform: perspective(1100px) rotateY(0deg) translateZ(0);
        transition: transform 0.35s ease-out;
      }

      @keyframes inkSpread {
        0% {
          opacity: 0;
          filter: blur(7px);
          transform: scale(1.22);
        }
        55% {
          opacity: 1;
          filter: blur(0);
          transform: scale(1);
        }
        100% {
          opacity: 1;
          filter: blur(0);
          transform: scale(1);
        }
      }

      @media (max-height: 740px) {
        #cover {
          padding: 26px 24px 30px;
        }
        .cover-top {
          padding-bottom: 8px;
        }
        .cover-bottom {
          padding-top: 8px;
        }
        .cover-names {
          font-size: clamp(1.7rem, 6.5vw, 2.5rem);
          margin: 0.25em 0 0.1em;
        }
        .cover-date {
          font-size: 0.86rem;
        }
        .cover-aksara {
          font-size: 0.95rem;
          margin-top: 8px;
        }
        .cover-to {
          margin-top: 0;
          font-size: 0.58rem;
        }
        .cover-guest {
          font-size: 1.22rem;
        }
        .cover-guest.panjang {
          font-size: 1.05rem;
        }
        .cover-guest.sangat-panjang {
          font-size: 0.92rem;
        }
        .seal {
          margin-top: 24px;
          width: 104px;
          height: 104px;
        }
        .seal-hanzi {
          font-size: 2.9rem;
        }
        .seal-hint {
          margin-top: 20px;
          font-size: 0.66rem;
        }
      }

      html {
        scroll-snap-type: y mandatory;
      }

      .sheet > section,
      .sheet > footer {
        contain: layout paint;
        min-height: 100vh;
        min-height: 100dvh;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 58px;
        padding-bottom: 58px;
      }
      .sheet > footer {
        justify-content: center;
      }

      .sheet > section h2 {
        margin: 0.4em 0 1em;
      }
      #hero {
        padding-top: 58px;
      }
      .person {
        margin-bottom: 34px;
      }
      .portrait {
        width: 150px;
        height: 194px;
        margin-bottom: 18px;
      }
      .gunungan {
        width: 52px;
        height: 62px;
        margin: 6px auto;
      }
      .gal {
        gap: 9px;
      }
      .gallery-page .gal {
        width: 100%;
        margin-inline: auto;
        max-width: calc((100vh - 176px) / 1.8125);
        max-width: calc((100svh - 176px) / 1.8125);
      }
      .gal figure {
        aspect-ratio: 4/5;
      }
      .gal figure:nth-child(3n) {
        aspect-ratio: 16/9;
      }
      .map-frame {
        aspect-ratio: 16/10;
        margin: 16px auto 2px;
      }
      .event-card {
        padding: 30px 24px;
        margin-bottom: 0;
      }
      .bank {
        padding: 22px 24px;
        margin-bottom: 14px;
      }
      .qris-frame {
        max-width: 158px;
        padding: 10px;
        margin: 10px auto 8px;
      }
      .field {
        margin-bottom: 13px;
      }
      .field textarea {
        min-height: 72px;
      }
      .form-intro {
        margin: -0.6em auto 18px;
      }
      #wish-list {
        max-height: 190px;
        margin-top: 22px;
      }
      footer {
        padding: 58px 30px;
      }

      @media (max-height: 740px) {
        .sheet > section,
        .sheet > footer {
          padding-top: 44px;
          padding-bottom: 44px;
        }
        .portrait {
          width: 132px;
          height: 170px;
        }
        .gal figure {
          aspect-ratio: 1/1;
        }
        .gallery-page .gal {
          max-width: calc((100vh - 140px) / 1.5625);
          max-width: calc((100svh - 140px) / 1.5625);
        }
        .map-frame {
          aspect-ratio: 16/11;
        }
        #wish-list {
          max-height: 150px;
        }
        .sheet > section h2 {
          font-size: 1.6rem;
          margin: 0.35em 0 0.8em;
        }
      }

      .cal {
        max-width: 340px;
        margin: 20px auto 0;
        background: linear-gradient(160deg, #3d1b15, #2c110d);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 14px 12px 12px;
        box-shadow:
          inset 0 1px 0 rgba(255, 240, 200, 0.12),
          0 10px 24px -14px rgba(0, 0, 0, 0.7);
      }
      .cal-head {
        font-family: var(--serif);
        font-size: 1rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--gold-hi);
        text-align: center;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--line);
      }
      .cal-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
        margin-top: 8px;
      }
      .cal-grid .dow {
        font-size: 0.56rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--gold-dim);
        text-align: center;
        padding: 5px 0 7px;
      }
      .cal-grid .day {
        font-family: var(--serif);
        font-size: 0.82rem;
        color: rgba(245, 235, 216, 0.82);
        text-align: center;
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        position: relative;
      }
      .cal-grid .day.kosong {
        visibility: hidden;
      }
      .cal-grid .day.minggu {
        color: var(--lacquer-2);
      }
      .cal-grid .day.hariH {
        color: #fff7e6;
        font-weight: 500;
        z-index: 1;
      }
      .cal-grid .day.hariH::before {
        content: "";
        position: absolute;
        inset: 8%;
        z-index: -1;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M16 29C16 29 1 19.5 1 10.2 1 5.1 5 1 9.9 1c3 0 5.2 1.6 6.1 3.4C16.9 2.6 19.1 1 22.1 1 27 1 31 5.1 31 10.2 31 19.5 16 29 16 29z' fill='%23B03A2E' stroke='%23F2D48C' stroke-width='1.2'/%3E%3C/svg%3E")
          center/contain no-repeat;
        animation: hariHDenyut 2.6s ease-in-out infinite;
      }
      @keyframes hariHDenyut {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.13);
        }
      }
      @media (max-height: 740px) {
        .cal {
          margin-top: 14px;
          padding: 11px 10px 9px;
        }
        .cal-head {
          font-size: 0.9rem;
          padding-bottom: 8px;
        }
        .cal-grid .day {
          font-size: 0.74rem;
        }
      }

      .hero-cd {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 6px;
        margin-top: 34px;
        padding-top: 26px;
        position: relative;
      }
      .hero-cd::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: min(200px, 68%);
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          var(--gold-dim) 25%,
          var(--gold-hi) 50%,
          var(--gold-dim) 75%,
          transparent
        );
        opacity: 0.8;
      }
      .hero-cd .u {
        min-width: 52px;
        text-align: center;
      }
      .hero-cd b {
        display: block;
        font-family: var(--serif);
        font-size: 1.55rem;
        line-height: 1;
        color: var(--gold-hi);
        font-weight: 400;
      }
      .hero-cd small {
        display: block;
        margin-top: 5px;
        font-size: 0.55rem;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .hero-cd .sep {
        font-family: var(--serif);
        font-size: 1.3rem;
        line-height: 1;
        color: var(--gold-dim);
        margin-top: 2px;
      }
      .hero-cd b.tick {
        animation: inkSpread 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
      }
      .hero-cd.hariH {
        font-family: var(--serif);
        font-size: 1.15rem;
        letter-spacing: 0.2em;
        color: var(--gold-hi);
      }

      @media (max-height: 740px) {
        .hero-cd {
          margin-top: 24px;
          padding-top: 20px;
        }
        .hero-cd b {
          font-size: 1.35rem;
        }
        .hero-cd .u {
          min-width: 46px;
        }
      }

      :is(#gallery, #gallery-2, #gallery-3),
      #gift,
      #event {
        background-image:
          linear-gradient(
            rgba(38, 16, 14, var(--tex-veil)),
            rgba(38, 16, 14, var(--tex-veil))
          ),
          var(--tex3) !important;
        background-repeat: no-repeat !important;
        background-size: cover, cover !important;
        background-position: var(--tex-pos) !important;
        background-color: var(--ink) !important;
      }

      #couple,
      #wishes {
        background-image:
          linear-gradient(
            rgba(38, 16, 14, var(--tex-veil)),
            rgba(38, 16, 14, var(--tex-veil))
          ),
          var(--tex2) !important;
      }

      #couple {
        background-image:
          radial-gradient(
            120% 62% at 50% 50%,
            rgba(28, 11, 9, 0.72),
            transparent 72%
          ),
          linear-gradient(rgba(38, 16, 14, 0.9), rgba(38, 16, 14, 0.9)),
          var(--tex2) !important;
        background-size: cover, cover, cover !important;
        background-repeat: no-repeat !important;
        background-size: cover, cover !important;
        background-position: var(--tex-pos) !important;
        background-color: var(--ink) !important;
      }

      #quote,
      #countdown,
      #rsvp,
      .sheet > footer {
        background-image:
          linear-gradient(
            rgba(38, 16, 14, var(--tex-veil)),
            rgba(38, 16, 14, var(--tex-veil))
          ),
          var(--tex) !important;
        background-repeat: no-repeat !important;
        background-size: cover, cover !important;
        background-position: var(--tex-pos) !important;
        background-color: var(--ink) !important;
      }

      #couple .person {
        margin-bottom: 10px;
      }
      #couple .portrait {
        margin-bottom: 14px;
      }
      #couple h3 {
        text-shadow:
          0 2px 12px rgba(20, 8, 6, 0.85),
          0 0 26px rgba(20, 8, 6, 0.6);
      }
      #couple .etnis {
        color: #e9a597;
        text-shadow: 0 1px 10px rgba(20, 8, 6, 0.9);
        margin-top: 2px;
      }
      #couple .parents {
        color: rgba(248, 240, 226, 0.95);
        margin-top: 7px;
        text-shadow: 0 1px 10px rgba(20, 8, 6, 0.9);
      }
      #couple .ig {
        margin-top: 11px;
        background: rgba(30, 12, 10, 0.62);
        border-color: rgba(217, 164, 65, 0.5);
        text-shadow: none;
      }

      .cp-sep {
        width: 130px;
        height: 1px;
        margin: 16px auto 20px;
        position: relative;
        background: linear-gradient(
          90deg,
          transparent,
          var(--line) 25%,
          var(--gold) 50%,
          var(--line) 75%,
          transparent
        );
      }
      .cp-sep::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 6px;
        height: 6px;
        transform: translate(-50%, -50%) rotate(45deg);
        background: var(--gold);
        box-shadow: 0 0 10px rgba(217, 164, 65, 0.8);
      }
      @media (max-height: 740px) {
        #couple .person {
          margin-bottom: 6px;
        }
        #couple .portrait {
          margin-bottom: 10px;
        }
        .cp-sep {
          margin: 10px auto 14px;
        }
        #couple .parents {
          font-size: 0.78rem;
          margin-top: 5px;
        }
        #couple .ig {
          margin-top: 8px;
          padding: 6px 15px;
        }
      }

      #quote,
      #countdown,
      #rsvp,
      #couple,
      #event,
      #wishes,
      :is(#gallery, #gallery-2, #gallery-3),
      #gift,
      .sheet > footer {
        background-size: cover !important;
        background-position: center center !important;
        background-origin: border-box !important;
        background-clip: border-box !important;
      }
      #couple {
        background-size: cover, cover, cover !important;
      }
      #quote,
      #countdown,
      #rsvp,
      #couple,
      #event,
      #wishes,
      :is(#gallery, #gallery-2, #gallery-3),
      #gift,
      .sheet > footer {
        background-attachment: scroll !important;
      }

      #event .event-card {
        padding: 26px 22px;
      }
      #event .map-frame {
        aspect-ratio: 16/11;
        margin: 14px auto 2px;
        max-width: 320px;
      }
      #event .event-card .place {
        font-size: 0.8rem;
        line-height: 1.7;
        margin-top: 8px;
      }
      #event .event-card .t {
        font-size: 0.96rem;
        margin-top: 10px;
      }
      #wishes #wish-status {
        text-align: center;
        color: var(--muted);
        font-size: 0.84rem;
        line-height: 1.6;
      }
      #wishes #wish-list {
        max-height: 44vh;
        margin-top: 18px;
      }
      #wishes .wish {
        padding: 14px 16px;
        margin-bottom: 11px;
      }

      @media (max-height: 740px) {
        #event .event-card {
          padding: 20px 18px;
        }
        #event .map-frame {
          aspect-ratio: 16/12;
        }
        #wishes #wish-list {
          max-height: 38vh;
        }
      }

      #countdown .cd-grid {
        max-width: 430px;
        gap: 14px;
      }
      #countdown .cd-cell {
        padding: 30px 6px;
        border-radius: 16px;
      }
      #countdown .cd-cell b {
        font-size: 1.95rem;
      }
      #countdown .cd-cell small {
        font-size: 0.6rem;
        letter-spacing: 0.18em;
        margin-top: 8px;
        display: block;
      }

      #countdown .cal {
        max-width: 430px;
        margin-top: 24px;
        padding: 22px 18px 20px;
        border-radius: 18px;
      }
      #countdown .cal-head {
        font-size: 1.05rem;
        letter-spacing: 0.18em;
        padding-bottom: 14px;
      }
      #countdown .cal-grid {
        gap: 4px;
        margin-top: 12px;
      }
      #countdown .cal-grid .dow {
        font-size: 0.58rem;
        padding: 7px 0 9px;
      }
      #countdown .cal-grid .day {
        font-size: 0.88rem;
      }
      #countdown .cal-grid .day.hariH::before {
        inset: 12%;
      }
      #countdown #calendar-btn {
        margin-top: 26px;
      }

      @media (max-height: 740px) {
        #countdown .cd-grid {
          gap: 10px;
        }
        #countdown .cd-cell {
          padding: 22px 4px;
        }
        #countdown .cd-cell b {
          font-size: 1.7rem;
        }
        #countdown .cal {
          margin-top: 16px;
          padding: 16px 13px 14px;
        }
        #countdown .cal-head {
          font-size: 0.95rem;
          padding-bottom: 10px;
        }
        #countdown .cal-grid .day {
          font-size: 0.8rem;
        }
        #countdown #calendar-btn {
          margin-top: 18px;
        }
      }

      html.mengetik {
        scroll-snap-type: none !important;
      }
      html.mengetik .sheet > section {
        scroll-snap-align: none !important;
      }
      html.mengetik #rsvp {
        min-height: auto !important;
        justify-content: flex-start !important;
        padding-bottom: 55vh !important;
      }
      .field input:focus,
      .field textarea:focus,
      .field select:focus {
        scroll-margin-top: 90px;
        scroll-margin-bottom: 90px;
      }

      #couple h2 {
        font-size: 2.1rem;
      }
      #couple .person h3 {
        font-size: 2.2rem;
        letter-spacing: 0.04em;
      }
      #couple .etnis {
        font-size: 0.76rem;
        letter-spacing: 0.2em;
        margin-top: 6px;
      }
      #couple .parents {
        font-size: 1rem;
        max-width: 330px;
        margin-top: 12px;
        line-height: 1.75;
      }
      #couple .eyebrow {
        font-size: 0.74rem;
      }
      #couple .portrait {
        width: 172px;
        height: 222px;
        margin-bottom: 18px;
      }
      .cp-sep {
        margin: 22px auto 24px;
      }

      #quote .hz-quote {
        font-size: 2.6rem;
      }
      #quote blockquote {
        font-size: 1.24rem;
        max-width: 360px;
        line-height: 1.95;
      }
      #quote cite {
        font-size: 0.76rem;
        letter-spacing: 0.3em;
        margin-top: 20px;
      }

      @media (max-height: 740px) {
        #couple h2 {
          font-size: 1.8rem;
        }
        #couple .person h3 {
          font-size: 1.9rem;
        }
        #couple .etnis {
          font-size: 0.68rem;
        }
        #couple .parents {
          font-size: 0.9rem;
          margin-top: 8px;
        }
        #couple .portrait {
          width: 150px;
          height: 194px;
          margin-bottom: 12px;
        }
        .cp-sep {
          margin: 14px auto 16px;
        }
        #quote .hz-quote {
          font-size: 2.2rem;
        }
        #quote blockquote {
          font-size: 1.1rem;
        }
      }

      #wishes {
        justify-content: flex-start !important;
        padding-top: 52px;
        padding-bottom: 34px;
      }
      #wishes h2 {
        margin: 0.3em 0 0.55em;
      }
      #wishes #wish-list {
        flex: 1 1 auto;
        max-height: none;
        min-height: 0;
        max-width: 400px;
        width: 100%;
        margin: 12px auto 0;
        padding-right: 6px;
      }
      #wishes .wish {
        padding: 12px 15px;
        margin-bottom: 9px;
        border-radius: 11px;
      }
      #wishes .wish b {
        font-size: 0.98rem;
      }
      #wishes .wish time {
        font-size: 0.62rem;
      }
      #wishes .wish p {
        font-size: 0.86rem;
        margin-top: 4px;
        line-height: 1.6;
      }

      #wishes #wish-list::-webkit-scrollbar {
        width: 5px;
      }
      #wishes #wish-list::-webkit-scrollbar-thumb {
        background: var(--gold-dim);
        border-radius: 5px;
      }

      @media (max-height: 740px) {
        #wishes {
          padding-top: 38px;
          padding-bottom: 26px;
        }
        #wishes .wish {
          padding: 10px 13px;
          margin-bottom: 7px;
        }
        #wishes .wish p {
          font-size: 0.82rem;
        }
      }

      .sheet > footer {
        justify-content: flex-start !important;
        padding-top: 52px !important;
        padding-bottom: 38px !important;
      }
      footer .gunungan {
        margin: 0 auto 14px;
      }
      footer .names {
        font-size: 2.1rem;
      }
      footer .ft-when {
        margin-top: 14px;
        font-size: 0.95rem;
      }
      .ft-sep {
        margin: 22px auto;
      }
      .ft-thanks {
        margin-top: 26px;
      }

      @media (max-height: 740px) {
        .sheet > footer {
          padding-top: 38px !important;
          padding-bottom: 28px !important;
        }
        footer .names {
          font-size: 1.8rem;
        }
        footer .ft-when {
          font-size: 0.88rem;
          margin-top: 10px;
        }
        .ft-sep {
          margin: 16px auto;
        }
        .ft-thanks {
          margin-top: 18px;
        }
      }

      #cover {
        padding-top: clamp(26px, 4.5vh, 56px) !important;
      }
      .cover-top {
        margin-top: 0;
        padding-bottom: 24px;
      }
      .cover-top .cover-eyebrow {
        margin-top: 0;
      }

      @media (max-height: 740px) {
        #cover {
          padding-top: 20px !important;
        }
      }

      .cover-names-img {
        margin: 0.4em 0 0.3em;
        line-height: 0;
        width: 100%;
        display: flex;
        justify-content: center;
      }
      .cover-names-img img {
        width: min(86%, 340px);
        max-height: 30vh;
        height: auto;
        object-fit: contain;

        -webkit-mask-image: radial-gradient(
          ellipse 78% 74% at 50% 48%,
          #000 68%,
          rgba(0, 0, 0, 0.86) 82%,
          transparent 97%
        );
        mask-image: radial-gradient(
          ellipse 78% 74% at 50% 48%,
          #000 68%,
          rgba(0, 0, 0, 0.86) 82%,
          transparent 97%
        );
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;

        filter: sepia(var(--foto-sepia, 0.14)) saturate(1.02) hue-rotate(-6deg)
          contrast(1.06) brightness(var(--foto-terang, 1.02));

        animation: namaMasuk 1.4s cubic-bezier(0.2, 0.8, 0.3, 1) both;
      }

      .cover-names-img {
        position: relative;
      }

      .cover-names-img::before {
        content: "";
        position: absolute;
        inset: -6% -4%;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(
          ellipse 62% 58% at 50% 50%,
          rgba(242, 212, 140, 0.16) 0%,
          rgba(176, 58, 46, 0.1) 45%,
          transparent 72%
        );
      }
      .cover-names-img::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(
          ellipse 76% 70% at 50% 48%,
          rgba(38, 16, 14, var(--foto-selubung, 0.06)) 0%,
          rgba(38, 16, 14, 0.06) 62%,
          rgba(38, 16, 14, 0.3) 84%,
          transparent 97%
        );
        mix-blend-mode: multiply;
      }
      @keyframes namaMasuk {
        from {
          opacity: 0;
          transform: scale(0.94) translateY(10px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      @media (max-height: 740px) {
        .cover-names-img img {
          width: min(80%, 290px);
          max-height: 24vh;
        }
      }

      .sheet > section,
      .sheet > footer {
        scroll-snap-stop: always !important;
      }

      .sheet > section,
      .sheet > footer {
        content-visibility: auto;
        contain-intrinsic-size: auto 100dvh;
      }

      #hero,
      #quote,
      #couple {
        content-visibility: visible;
      }

      html,
      body {
        overscroll-behavior-y: contain;
      }

      #couple,
      #countdown,
      #event,
      :is(#gallery, #gallery-2, #gallery-3),
      #gift,
      #rsvp {
        justify-content: flex-start !important;
        padding-top: clamp(40px, 6.5vh, 64px) !important;
        padding-bottom: clamp(28px, 4vh, 44px) !important;
      }

      #couple h2 {
        font-size: 1.8rem;
        margin: 0.35em 0 0.8em;
      }
      #couple .eyebrow {
        font-size: 0.7rem;
      }

      #countdown h2,
      #event h2,
      :is(#gallery, #gallery-2, #gallery-3) h2,
      #gift h2,
      #rsvp h2 {
        margin: 0.35em 0 0.85em;
      }
      #countdown .cd-grid {
        margin-top: 6px;
      }
      #gift .form-intro,
      #rsvp .form-intro {
        margin: -0.3em auto 20px;
      }

      @media (max-height: 740px) {
        #couple,
        #countdown,
        #event,
        :is(#gallery, #gallery-2, #gallery-3),
        #gift,
        #rsvp {
          padding-top: 34px !important;
          padding-bottom: 24px !important;
        }
        #couple h2 {
          font-size: 1.6rem;
          margin: 0.3em 0 0.6em;
        }
      }

      #couple,
      #countdown,
      #event,
      :is(#gallery, #gallery-2, #gallery-3),
      #gift,
      #rsvp,
      #wishes {
        justify-content: flex-start !important;
        padding-top: clamp(24px, 3.6vh, 40px) !important;
        padding-bottom: clamp(20px, 3vh, 34px) !important;
      }

      #couple h2,
      #countdown h2,
      #event h2,
      :is(#gallery, #gallery-2, #gallery-3) h2,
      #gift h2,
      #rsvp h2,
      #wishes h2 {
        font-size: 1.55rem;
        margin: 0.3em 0 0.7em;
        letter-spacing: 0.05em;
      }

      #couple .eyebrow,
      #countdown .eyebrow,
      #event .eyebrow,
      :is(#gallery, #gallery-2, #gallery-3) .eyebrow,
      #gift .eyebrow,
      #rsvp .eyebrow,
      #wishes .eyebrow {
        font-size: 0.66rem;
      }
      #wishes #wish-list {
        margin-top: 8px;
      }

      @media (max-height: 740px) {
        #couple,
        #countdown,
        #event,
        :is(#gallery, #gallery-2, #gallery-3),
        #gift,
        #rsvp,
        #wishes {
          padding-top: 20px !important;
          padding-bottom: 16px !important;
        }
        #couple h2,
        #countdown h2,
        #event h2,
        :is(#gallery, #gallery-2, #gallery-3) h2,
        #gift h2,
        #rsvp h2,
        #wishes h2 {
          font-size: 1.4rem;
          margin: 0.25em 0 0.55em;
        }
      }

      #countdown .cal {
        width: 100%;
        max-width: 430px;
        padding: 24px 14px 22px;
        margin-top: 24px;
      }
      #countdown .cal-head {
        font-size: clamp(1.15rem, 4.8vw, 1.4rem);
        letter-spacing: 0.12em;
        padding-bottom: 18px;
      }
      #countdown .cal-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 6px 2px;
        margin-top: 16px;
      }
      #countdown .cal-grid .dow {
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        color: var(--gold);
        padding: 8px 0 12px;
      }
      #countdown .cal-grid .day {
        font-size: 1.18rem;
        min-height: 38px;
        color: var(--ivory);
      }
      #countdown .cal-grid .day.minggu {
        color: #e99180;
      }
      #countdown .cal-grid .day.hariH {
        color: #fff7e6;
      }
      #countdown .cal-grid .day.hariH::before {
        inset: 4%;
      }
      @media (max-width: 360px) {
        #countdown {
          padding-left: 16px;
          padding-right: 16px;
        }
        #countdown .cal {
          padding-left: 10px;
          padding-right: 10px;
        }
        #countdown .cal-grid .day {
          font-size: 1.1rem;
        }
      }

      .gal figure {
        isolation: isolate;
        backface-visibility: hidden;
      }
      .gal figure img,
      .portrait img {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }

      @media (max-width: 899px) {
        .sheet > section,
        .sheet > footer {
          scroll-snap-stop: normal !important;
        }
      }

      .gal figure img.photo-rested,
      .person .portrait img.photo-rested {
        -webkit-mask-image: none !important;
        mask-image: none !important;
        filter: none !important;
      }

      .gal figure img[src^="data:image/svg+xml"] {
        -webkit-mask-image: none !important;
        mask-image: none !important;
        filter: none !important;
        animation: none !important;
      }

      #hearts,
      #petals {
        contain: layout paint style;
        isolation: isolate;
      }

      .sheet .motion-visible .portrait::before {
        will-change: transform;
      }

      .gallery-page.motion-visible
        .gal.in-view
        figure
        img.photo-rested:not([src^="data:image/svg+xml"]) {
        will-change: transform;
      }

      .gallery-page.motion-visible .gal.in-view figure {
        backface-visibility: hidden;
      }

      @media (max-width: 899px) {
        html:not(.mengetik) {
          scroll-snap-type: none;
        }
      }
      html.page-navigating {
        scroll-snap-type: none !important;
      }

      @media (max-width: 899px) {
        .sheet > section,
        .sheet > footer {
          content-visibility: visible !important;
        }
      }

      .slide-fit-content {
        display: contents;
      }
      @media (max-width: 899px) {
        .sheet > section,
        .sheet > footer {
          height: 100vh;
          height: 100dvh;
          min-height: 100vh;
          min-height: 100dvh;
          max-height: 100vh;
          max-height: 100dvh;
          overflow: hidden;
          padding-top: clamp(12px, 2.3dvh, 26px) !important;
          padding-bottom: clamp(12px, 2.3dvh, 26px) !important;
          padding-left: clamp(15px, 5vw, 24px);
          padding-right: clamp(15px, 5vw, 24px);
        }
        .sheet > footer {
          padding-top: clamp(14px, 2.8dvh, 30px) !important;
          padding-bottom: clamp(12px, 2.5dvh, 26px) !important;
        }
        .slide-fit-content {
          display: flex;
          flex-direction: column;
          width: 100%;
          min-width: 0;
          max-width: none;
          flex: none;
          position: relative;
          transform-origin: top center;
        }
        #quote .slide-fit-content,
        #hero .slide-fit-content {
          margin-block: auto;
        }
        #wishes .slide-fit-content {
          min-height: 0;
          flex: 1 1 auto;
        }
        #wishes #wish-list {
          flex: 1 1 auto;
          min-height: 0;
          overflow-y: auto;
          overscroll-behavior: contain;
        }
        #wishes .slide-fit-content > div:last-child {
          flex: none;
        }

        .slide-fit-content.allow-inner-scroll {
          overflow-y: auto;
          overscroll-behavior: contain;
          -webkit-overflow-scrolling: touch;
          max-height: 100%;
          scrollbar-width: thin;
        }
        #wishes .slide-fit-content {
          overflow: visible;
        }

        #music-btn {
          left: 9px;
          right: auto;
          bottom: 10px;
          width: 39px;
          height: 39px;
          background: rgba(120, 30, 26, 0.88);
        }
        #couple .portrait {
          width: clamp(92px, min(19dvh, 35vw), 144px);
          height: auto;
          aspect-ratio: 172/222;
          margin-bottom: clamp(4px, 0.8dvh, 10px);
        }
        #couple h2 {
          font-size: clamp(1.35rem, 2.8dvh, 1.7rem);
          margin: 0.14em 0 0.35em;
        }
        #couple .person {
          margin-bottom: 0;
        }
        #couple .person h3 {
          font-size: clamp(1.3rem, 3dvh, 1.85rem);
          line-height: 1.17;
        }
        #couple .etnis {
          font-size: 0.67rem;
          line-height: 1.3;
          margin-top: 1px;
          letter-spacing: 0.12em;
        }
        #couple .parents {
          font-size: clamp(0.8rem, 1.95dvh, 0.91rem);
          line-height: 1.4;
          margin-top: 3px;
        }
        #couple .cp-sep {
          margin: clamp(5px, 1.1dvh, 12px) auto clamp(7px, 1.25dvh, 14px);
        }
        #couple .ig {
          margin-top: 5px;
          padding: 5px 12px;
        }
        #countdown .cd-grid {
          gap: 8px;
          margin-top: 2px;
        }
        #countdown .cd-cell {
          padding: clamp(10px, 1.8dvh, 17px) 3px;
          border-radius: 12px;
        }
        #countdown .cd-cell b {
          font-size: clamp(1.4rem, 3.5dvh, 1.85rem);
        }
        #countdown .cd-cell small {
          margin-top: 4px;
          font-size: 0.56rem;
          letter-spacing: 0.08em;
        }
        #countdown .cal {
          padding: clamp(10px, 1.8dvh, 17px) clamp(9px, 2vw, 14px);
          margin-top: clamp(9px, 1.6dvh, 16px);
        }
        #countdown .cal-head {
          font-size: clamp(0.95rem, 2.5dvh, 1.2rem);
          padding-bottom: 8px;
        }
        #countdown .cal-grid {
          gap: 2px;
          margin-top: 6px;
        }
        #countdown .cal-grid .dow {
          font-size: 0.61rem;
          padding: 4px 0 6px;
        }
        #countdown .cal-grid .day {
          font-size: clamp(0.78rem, 2dvh, 1rem);
          min-height: clamp(24px, 4dvh, 33px);
        }
        #countdown #calendar-btn {
          margin-top: clamp(8px, 1.5dvh, 14px);
        }
        #event .event-card {
          padding: clamp(11px, 1.8dvh, 20px) 14px;
        }
        #event .event-card h3 {
          font-size: 1.22rem;
        }
        #event .event-card .t {
          font-size: 0.92rem;
          margin-top: 7px;
        }
        #event .event-card .place {
          font-size: 0.79rem;
          line-height: 1.5;
          margin-top: 7px;
        }
        #event .map-frame {
          max-width: 320px;
          width: 100%;
          aspect-ratio: auto;
          height: clamp(93px, 22dvh, 185px);
          margin: clamp(8px, 1.3dvh, 13px) auto 2px;
        }
        #event .btn {
          margin-top: clamp(10px, 1.4dvh, 16px);
        }
        #rsvp .form-intro,
        #gift .form-intro {
          font-size: 0.81rem;
          line-height: 1.52;
          margin: 0 auto clamp(8px, 1.4dvh, 15px);
        }
        #rsvp .field {
          margin-bottom: clamp(6px, 1.2dvh, 10px);
        }
        #rsvp .field label {
          font-size: 0.66rem;
          margin-bottom: 4px;
          letter-spacing: 0.13em;
        }
        #rsvp .field input,
        #rsvp .field select,
        #rsvp .field textarea {
          font-size: 16px;
          padding: 7px 12px;
          min-height: 39px;
        }
        #rsvp .field textarea {
          min-height: clamp(51px, 9dvh, 70px);
        }
        #rsvp form > .form-msg {
          margin-top: 6px;
          min-height: 1em;
        }
        #rsvp .btn {
          margin-top: 6px;
          padding: 11px 22px;
        }
        #gift .bank {
          padding: clamp(10px, 1.7dvh, 18px) 14px;
          margin-bottom: clamp(7px, 1.2dvh, 13px);
        }
        #gift .bank .hz {
          font-size: 1.4rem;
        }
        #gift .bank .no {
          font-size: 1.24rem;
          margin: 5px 0;
        }
        #gift .bank .an {
          font-size: 0.78rem;
          line-height: 1.5;
        }
        #gift .bank .btn {
          margin-top: 11px;
          padding: 10px 18px;
        }
        #gift .qris-frame {
          max-width: clamp(94px, 19dvh, 145px);
          padding: 7px;
          margin: 7px auto;
        }
        .sheet > footer .gunungan {
          width: clamp(34px, 6.5dvh, 52px);
          height: auto;
          margin-bottom: 7px;
        }
        footer .names {
          font-size: clamp(1.38rem, 3.1dvh, 1.85rem);
          line-height: 1.38;
        }
        footer .ft-when {
          font-size: 0.85rem;
          line-height: 1.55;
          margin-top: 7px;
        }
        footer .ft-sep {
          margin: clamp(9px, 1.8dvh, 16px) auto;
        }
        footer .ft-fam {
          line-height: 1.45;
        }
        footer .ft-fam span {
          font-size: 0.82rem;
        }
        footer p.close {
          font-size: 0.76rem;
          line-height: 1.5;
          margin: clamp(8px, 1.5dvh, 15px) auto 0;
        }
        footer .ft-thanks {
          margin-top: clamp(9px, 1.4dvh, 15px);
        }
        footer .hz {
          margin-top: 5px;
        }

        .gallery-page .gal {
          max-width: min(100%, calc((100dvh - 116px) / 1.8125));
        }
        .gallery-page .gal figure {
          min-width: 0;
        }

        #couple h2,
        #countdown h2,
        #event h2,
        #gift h2,
        #rsvp h2,
        #wishes h2,
        .gallery-page h2 {
          font-size: clamp(1.26rem, 2.75dvh, 1.55rem);
          margin: 0.16em 0 0.55em;
        }
      }
      @media (max-width: 899px) and (max-height: 600px) {
        #quote blockquote {
          font-size: 1rem;
          line-height: 1.5;
        }
        #hero .names {
          font-size: clamp(1.95rem, 7vw, 2.5rem);
          margin-top: 12px;
        }
        #hero .when {
          margin-top: 14px;
        }
        #hero .hero-cd {
          margin-top: 16px;
          padding-top: 14px;
        }
        #gift {
          padding-bottom: clamp(24px, 4.5dvh, 33px) !important;
        }
        #gift .bank .hz {
          font-size: 1.2rem;
        }
        #gift .bank .no {
          font-size: 1.05rem;
        }
        #gift .form-intro {
          font-size: 0.74rem;
        }
        #wishes .slide-fit-content {
          min-height: 0;
        }
      }
      @media (max-width: 899px) and (max-height: 700px) {
        #wishes {
          padding-top: 12px !important;
          padding-bottom: 12px !important;
        }
        #wishes h2 {
          margin: 0.1em 0 0.25em;
        }
        #wishes #wish-list {
          margin-top: 5px;
        }
        footer .names {
          letter-spacing: 0.03em;
        }
      }
      @media (max-width: 899px) {
        html.mengetik #rsvp {
          height: auto !important;
          max-height: none !important;
          min-height: 100dvh !important;
          overflow: visible !important;
        }
        html.mengetik #rsvp .slide-fit-content {
          overflow: visible !important;
          zoom: 1 !important;
          width: 100% !important;
        }
      }

      .gallery-page .slide-fit-content {
        align-self: center;
        align-items: center;
      }
      .gallery-page .gal {
        margin-inline: auto !important;
        align-self: center;
        justify-self: center;
        min-width: 0;
      }
      .gallery-page .gal figure {
        min-width: 0;
        transform-origin: 50% 50%;
      }

      .gallery-page .gal figure img {
        object-fit: cover;
        object-position: 50% 50%;
        transform-origin: 50% 50%;
      }

      @media (max-width: 899px) {
        .gallery-page {
          padding-inline: clamp(9px, 2.4vw, 18px) !important;
        }
        .gallery-page .slide-fit-content {
          align-self: center;
          align-items: center;
          min-width: 0;
        }
        .gallery-page .eyebrow {
          line-height: 1.2;
        }
        .gallery-page h2 {
          margin-top: clamp(3px, 0.65dvh, 6px) !important;
          margin-bottom: clamp(7px, 1.2dvh, 11px) !important;
        }
        .gallery-page .gal {
          width: min(94vw, calc((100dvh - 115px) / 1.605)) !important;
          max-width: none !important;
          gap: clamp(6px, 1.5vw, 9px);
          margin-inline: auto !important;
          align-self: center;
          justify-self: center;
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .gallery-page .gal figure {
          aspect-ratio: 0.94;
          min-width: 0;
          cursor: zoom-in;
        }
        .gallery-page .gal figure:nth-child(3n) {
          aspect-ratio: 1.86;
        }
      }
      @media (max-width: 899px) and (min-height: 780px) {
        .gallery-page .gal {
          width: min(94vw, calc((100dvh - 132px) / 1.82)) !important;
        }
        .gallery-page .gal figure {
          aspect-ratio: 0.79;
        }
        .gallery-page .gal figure:nth-child(3n) {
          aspect-ratio: 1.85;
        }
      }

      .photo-lightbox {
        position: fixed;
        inset: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border: 0;
        border-radius: 0;
        background: #140807;
        color: var(--ivory);
        overflow: hidden;
        overscroll-behavior: contain;
      }
      .photo-lightbox[open] {
        display: flex;
        flex-direction: column;
      }
      .photo-lightbox::backdrop {
        background: rgba(12, 5, 5, 0.96);
      }
      .photo-lightbox .lightbox-toolbar {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: none;
        gap: 12px;
        padding: calc(10px + env(safe-area-inset-top, 0px))
          clamp(12px, 3vw, 28px) 10px;
        border-bottom: 1px solid rgba(242, 212, 140, 0.25);
        background: #26100e;
      }
      .photo-lightbox .lightbox-close,
      .photo-lightbox .lightbox-close-x,
      .photo-lightbox .lightbox-prev,
      .photo-lightbox .lightbox-next {
        border: 1px solid rgba(242, 212, 140, 0.65);
        background: #762820;
        color: #fff3da;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
      }
      .photo-lightbox .lightbox-close {
        gap: 8px;
        min-height: 48px;
        padding: 0 14px;
        border-radius: 999px;
        font-size: 0.85rem;
        font-weight: 500;
        letter-spacing: 0.01em;
      }
      .photo-lightbox .lightbox-close svg {
        width: 19px;
        height: 19px;
        flex: none;
      }
      .photo-lightbox .lightbox-close-x {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        font-size: 27px;
        line-height: 1;
      }
      .photo-lightbox .lightbox-counter {
        font-family: var(--sans);
        color: var(--gold-hi);
        font-size: 0.85rem;
        font-variant-numeric: tabular-nums;
        text-align: center;
        white-space: nowrap;
      }
      .photo-lightbox .lightbox-stage {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        padding: clamp(8px, 1.8dvh, 20px) clamp(10px, 2.8vw, 30px);
        touch-action: pan-y;
      }
      .photo-lightbox .lightbox-image {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        border-radius: 8px;
        box-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
        user-select: none;
        -webkit-user-drag: none;
      }
      .photo-lightbox .lightbox-footer {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px clamp(16px, 3vw, 32px)
          calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(242, 212, 140, 0.17);
        background: #26100e;
      }
      .photo-lightbox .lightbox-prev,
      .photo-lightbox .lightbox-next {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        font-size: 34px;
        line-height: 1;
      }
      .photo-lightbox .lightbox-prev:disabled,
      .photo-lightbox .lightbox-next:disabled {
        opacity: 0.3;
        cursor: default;
      }
      .photo-lightbox .lightbox-help {
        font-size: 0.74rem;
        line-height: 1.45;
        color: var(--muted);
        text-align: center;
        letter-spacing: 0;
      }
      .photo-lightbox button:focus-visible {
        outline: 2px solid var(--gold-hi);
        outline-offset: 3px;
      }
      @media (max-width: 390px) {
        .photo-lightbox .lightbox-toolbar {
          gap: 8px;
        }
        .photo-lightbox .lightbox-close {
          padding-inline: 12px;
        }
        .photo-lightbox .lightbox-help {
          font-size: 0.69rem;
        }
      }

      /* Hanya satu pengendali perpindahan halaman: JavaScript. */
      html:not(.mengetik) {
        scroll-snap-type: none !important;
      }
      @media (max-width: 899px) {
        html:not(.mengetik) {
          overflow-anchor: none;
        }
        .sheet > section,
        .sheet > footer {
          height: 100dvh !important;
          min-height: 100dvh !important;
          max-height: 100dvh !important;
        }
      }

      /* Navigasi swipe per halaman: nonaktifkan momentum scroll vertikal browser
         pada slide. Perubahan hanya menyangkut gesture, bukan desain/animasi. */
      html:not(.mengetik) .sheet > section,
      html:not(.mengetik) .sheet > footer {
        touch-action: pan-x pinch-zoom !important;
      }
      html.mengetik .sheet > section,
      html.mengetik .sheet > footer {
        touch-action: auto !important;
      }

      /* Galeri stabil: ukuran tidak berubah saat toolbar browser muncul/hilang. */
      .sheet > section,
      .sheet > footer {
        content-visibility: visible !important;
        contain-intrinsic-size: none !important;
      }
      .gallery-page .slide-fit-content {
        align-items: center;
        align-self: center;
        width: 100%;
      }
      .gallery-page .gal {
        width: min(100%, calc((100svh - 146px) / 1.82)) !important;
        max-width: 370px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(6px, 1.5vw, 9px);
        margin-inline: auto !important;
      }
      .gallery-page .gal figure {
        aspect-ratio: 0.82 !important;
        min-width: 0;
      }
      .gallery-page .gal figure:nth-child(3n) {
        aspect-ratio: 1.85 !important;
      }
      @media (max-width: 899px) {
        .sheet > section,
        .sheet > footer {
          height: 100vh !important;
          height: 100svh !important;
          min-height: 100svh !important;
          max-height: 100svh !important;
        }
        .gallery-page {
          padding-top: clamp(12px, 2.3svh, 26px) !important;
          padding-bottom: clamp(12px, 2.3svh, 26px) !important;
        }
        .gallery-page .slide-fit-content {
          width: 100% !important;
          max-height: none !important;
          overflow: visible !important;
        }
        .gallery-page .gal {
          width: min(94vw, calc((100svh - 136px) / 1.82)) !important;
          max-width: 100% !important;
        }
        .gallery-page h2 {
          font-size: clamp(1.26rem, 2.75svh, 1.55rem);
          margin-top: clamp(3px, 0.65svh, 6px) !important;
          margin-bottom: clamp(7px, 1.2svh, 11px) !important;
        }
      }

      /* Ornamen tambahan: Golden Line Drawing, tanpa perubahan geometri halaman. */
      .sheet > section h2.reveal,
      #hero .names.reveal,
      #quote .hz-quote.reveal {
        position: relative;
      }
      .sheet > section h2.reveal::before,
      .sheet > section h2.reveal::after,
      #hero .names.reveal::before,
      #hero .names.reveal::after,
      #quote .hz-quote.reveal::before,
      #quote .hz-quote.reveal::after {
        content: "";
        position: absolute;
        bottom: -7px;
        left: 50%;
        width: clamp(37px, 13%, 76px);
        height: 1px;
        opacity: 0;
        pointer-events: none;
        transition: transform 900ms cubic-bezier(.2,.75,.25,1), opacity 500ms ease;
        transition-delay: 220ms;
      }
      .sheet > section h2.reveal::before,
      #hero .names.reveal::before,
      #quote .hz-quote.reveal::before {
        background: linear-gradient(90deg, transparent, var(--gold-hi));
        transform: translateX(-100%) scaleX(0);
        transform-origin: right center;
      }
      .sheet > section h2.reveal::after,
      #hero .names.reveal::after,
      #quote .hz-quote.reveal::after {
        background: linear-gradient(90deg, var(--gold-hi), transparent);
        transform: scaleX(0);
        transform-origin: left center;
      }
      .sheet > section h2.reveal.in-view::before,
      #hero .names.reveal.in-view::before,
      #quote .hz-quote.reveal.in-view::before {
        opacity: .92;
        transform: translateX(-100%) scaleX(1);
      }
      .sheet > section h2.reveal.in-view::after,
      #hero .names.reveal.in-view::after,
      #quote .hz-quote.reveal.in-view::after {
        opacity: .92;
        transform: scaleX(1);
      }
      /* Cinematic Soft Light adalah satu lapisan fixed, tak mengubah layout/scroll. */
      #cinematic-glow {
        position: fixed;
        inset: 0;
        z-index: 6;
        opacity: 0;
        pointer-events: none;
        background: radial-gradient(ellipse 80% 55% at 49% 42%,
          rgba(242,212,140,.17), rgba(217,164,65,.07) 42%, transparent 79%);
      }
      @media (min-width: 900px) {
        #cinematic-glow { left: auto; right: 0; width: 430px; }
      }
      /* Golden Ending Ceremony mengikuti halaman footer, tanpa menimpa teks penutup. */
      .sheet > footer .ft-thanks {
        position: relative;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .sheet > footer .ending-halo {
        position: absolute;
        top: 36px;
        left: 50%;
        width: clamp(82px, 13svh, 114px);
        height: auto;
        aspect-ratio: 1;
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 0;
        opacity: 0;
        transition: opacity 800ms ease;
      }
      .sheet > footer .ending-halo svg { display: block; width: 100%; height: 100%; overflow: visible; }
      .sheet > footer .ending-halo .ring {
        fill: none;
        stroke: var(--gold-hi);
        stroke-width: .8;
        stroke-dasharray: 350;
        stroke-dashoffset: 350;
      }
      .sheet > footer .ending-halo .ring.inner {
        stroke: var(--gold-dim);
        stroke-dasharray: 310;
        stroke-dashoffset: 310;
      }
      .sheet > footer .ending-halo .double-happiness {
        font-family: var(--brush);
        font-size: 46px;
        fill: var(--gold-hi);
        opacity: .09;
        transform-origin: 60px 60px;
        transform: scale(.87);
      }
      .sheet > footer .gunungan,
      .sheet > footer .names,
      .sheet > footer .ft-thanks .aksara,
      .sheet > footer .ft-thanks .hz {
        position: relative;
        z-index: 1;
      }
      .sheet > footer.ceremony-played .ending-halo { opacity: .72; }
      .sheet > footer.ceremony-played .ring {
        animation: ending-ring-draw 1400ms cubic-bezier(.24,.82,.28,1) 150ms forwards;
      }
      .sheet > footer.ceremony-played .ring.inner {
        animation-delay: 400ms;
        animation-duration: 1550ms;
      }
      .sheet > footer.ceremony-played .double-happiness {
        animation: ending-mark-reveal 1100ms ease-out 400ms both;
      }
      .sheet > footer .ft-thanks { position: relative; }
      .sheet > footer .ft-thanks .aksara {
        margin-bottom: clamp(74px, 11svh, 98px);
      }
      .sheet > footer .ft-thanks .hz {
        margin-top: 0;
      }
      .sheet > footer .ft-thanks::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -9px;
        width: min(122px, 65%);
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--gold-hi), transparent);
        opacity: 0;
        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
        pointer-events: none;
      }
      .sheet > footer.ceremony-played .ft-thanks::after {
        animation: ending-last-line 1100ms ease-out 1000ms both;
      }
      @keyframes ending-ring-draw { to { stroke-dashoffset: 0; } }
      @keyframes ending-mark-reveal {
        from { opacity: 0; transform: scale(.87); }
        to { opacity: .09; transform: scale(1); }
      }
      @keyframes ending-last-line {
        to { opacity: .76; transform: translateX(-50%) scaleX(1); }
      }
      @media (max-width: 899px) {
        .sheet > footer .ending-halo { top: 30px; }
        .sheet > footer .ft-thanks .aksara {
          margin-bottom: clamp(64px, 10svh, 88px);
        }
        .sheet > section h2.reveal::before,
        .sheet > section h2.reveal::after { bottom: -5px; }
      }
      @media (prefers-reduced-motion: reduce) {
        .sheet > section h2.reveal::before,
        .sheet > section h2.reveal::after,
        #hero .names.reveal::before,
        #hero .names.reveal::after,
        #quote .hz-quote.reveal::before,
        #quote .hz-quote.reveal::after { transition: none; }
        .sheet > footer.ceremony-played .ending-halo .ring { animation: none; stroke-dashoffset: 0; }
        .sheet > footer.ceremony-played .ending-halo .double-happiness {
          animation: none; opacity: .09; transform: none;
        }
        .sheet > footer.ceremony-played .ft-thanks::after {
          animation: none; opacity: .76; transform: translateX(-50%) scaleX(1);
        }
      }

      /* Pembuka mobile-first: satu animasi opacity + sedikit pergeseran, tanpa SVG atau efek huruf satu per satu. */
      #hero {
        isolation: isolate;
        text-align: center;
      }
      #hero::before {
        content: "";
        position: absolute;
        inset: 16% 4% 8%;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(ellipse at center, rgba(92,40,27,.2), transparent 72%);
      }
      #hero .hz-top {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
        width: fit-content;
        line-height: 1.2;
        animation: none !important;
      }
      #hero .hz-top::before { display: none; }
      #hero .hero-seal {
        position: relative;
        display: grid;
        place-items: center;
        width: 94px;
        height: 94px;
        border: 1px solid rgba(219,167,76,.75);
        border-radius: 50%;
        background: radial-gradient(circle at 45% 38%, rgba(215,153,58,.12), rgba(25,8,6,.05) 70%);
        box-shadow: inset 0 0 0 6px rgba(217,164,65,.03), 0 0 0 6px rgba(217,164,65,.025);
        color: #f2d48c;
        font-family: var(--brush), serif;
        font-size: 4.3rem;
        font-weight: 400;
        line-height: 1;
        text-shadow: 0 2px 13px rgba(211,151,52,.23);
      }
      #hero .hero-seal::after {
        content: "";
        position: absolute;
        inset: 8px;
        border: 1px solid rgba(217,164,65,.24);
        border-radius: 50%;
        pointer-events: none;
      }
      #hero .hz-top small {
        display: block;
        margin-top: 12px;
        color: #c6a78b;
        font-family: var(--sans);
        font-size: .55rem;
        letter-spacing: .38em;
        line-height: 1.5;
        text-transform: uppercase;
      }
      #hero .hero-eyebrow {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin: clamp(15px, 2.5svh, 24px) 0 9px;
        font-family: var(--sans);
        font-size: .63rem;
        letter-spacing: .34em;
        text-transform: uppercase;
        color: #dfbe87;
      }
      #hero .hero-eyebrow::before,
      #hero .hero-eyebrow::after {
        content: "";
        width: clamp(22px, 8vw, 38px);
        height: 1px;
        background: linear-gradient(90deg, transparent, #d9a441);
      }
      #hero .hero-eyebrow::after { transform: rotate(180deg); }
      #hero .names.gold-live {
        margin: 0;
        padding: 0 3px;
        font-family: var(--display);
        font-size: clamp(2.3rem, 8.7vw, 3.55rem);
        font-weight: 400;
        line-height: 1.19;
        letter-spacing: .02em;
        overflow: visible;
        background: none;
        animation: none !important;
        -webkit-text-fill-color: initial;
      }
      #hero .names.reveal,
      #hero .names.reveal.in-view {
        opacity: 1;
        transform: none;
        transition: none;
      }
      #hero .names.reveal::before,
      #hero .names.reveal::after { display: none !important; }
      #hero .name-line {
        display: block;
        margin: 0 auto;
        width: fit-content;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
        color: #f2d48c;
        -webkit-text-fill-color: #f2d48c;
        background: none;
        filter: none;
      }
      #hero .names .amp {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        margin: .22em auto .25em;
        color: #d4a763;
        -webkit-text-fill-color: #d4a763;
        font-family: var(--serif);
        font-style: italic;
        font-size: clamp(1.05rem, 2.9svh, 1.45rem);
        line-height: 1;
      }
      #hero .names .amp::before,
      #hero .names .amp::after {
        content: "";
        width: clamp(32px, 12vw, 66px);
        height: 1px;
        background: linear-gradient(90deg, transparent, #d9a441);
      }
      #hero .names .amp::after { transform: rotate(180deg); }
      #hero .when {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        margin-top: clamp(17px, 3svh, 26px);
        font-family: var(--serif);
        font-size: clamp(.78rem, 2svh, .92rem);
        letter-spacing: .12em;
        line-height: 1.5;
        color: #f0dec1;
      }
      #hero .when::before,
      #hero .when::after { content: "◆"; color: #ba8743; font-size: .46rem; }
      #hero .aksara.gold-live {
        margin-top: clamp(20px, 3svh, 30px);
        font-size: clamp(1.18rem, 3.2svh, 1.55rem);
        line-height: 1.4;
        letter-spacing: .1em;
        background: none;
        color: var(--sogan);
        -webkit-text-fill-color: var(--sogan);
        animation: none !important;
      }
      #hero .aksara small {
        display: block;
        margin-top: 6px;
        font-size: .56rem;
        letter-spacing: .33em;
        -webkit-text-fill-color: var(--muted);
      }
      #hero .hero-cd { margin-top: clamp(20px, 3.7svh, 34px); padding-top: clamp(18px, 2.8svh, 25px); }
      #hero .hero-cd.hariH {
        font-size: clamp(.83rem, 2.1svh, 1rem);
        letter-spacing: .075em;
        line-height: 1.6;
        text-wrap: balance;
        color: #f3d49b;
      }

      /* Fade bertahap menggunakan properti CSS yang didukung browser mobile. */
      #hero .hero-step {
        opacity: 0;
        transform: translateY(9px);
        transition-property: opacity, transform;
        transition-duration: 650ms, 650ms;
        transition-timing-function: ease-out, ease-out;
        transition-delay: var(--hero-delay, 0ms);
      }
      #hero .hz-top.hero-step { --hero-delay: 80ms; }
      #hero .hero-eyebrow.hero-step { --hero-delay: 250ms; }
      #hero .name-line--first.hero-step { --hero-delay: 470ms; }
      #hero .amp.hero-step { --hero-delay: 710ms; }
      #hero .name-line--second.hero-step { --hero-delay: 920ms; }
      #hero .when.hero-step { --hero-delay: 1180ms; }
      #hero .aksara.hero-step { --hero-delay: 1410ms; }
      #hero .hero-cd.hero-step { --hero-delay: 1630ms; }
      #hero.hero-unveiled .hero-step {
        opacity: 1;
        transform: translateY(0);
      }
      @media (max-width: 899px) and (max-height: 720px) {
        #hero .hero-seal { width: 73px; height: 73px; font-size: 3.25rem; }
        #hero .hz-top small { margin-top: 7px; }
        #hero .hero-eyebrow { margin-top: 12px; margin-bottom: 5px; }
        #hero .names.gold-live { font-size: clamp(2rem, 7.8vw, 2.6rem); line-height: 1.12; }
        #hero .when { margin-top: 13px; }
        #hero .aksara.gold-live { margin-top: 15px; }
        #hero .hero-cd { margin-top: 16px; padding-top: 14px; }
      }
      @media (prefers-reduced-motion: reduce) {
        #hero .hero-step { opacity: 1 !important; transform: none !important; transition: none !important; }
      }

      /* Wedding film: 1 slide ringan, player YouTube hanya dibuat setelah diklik. */
      #film {
        background-image: linear-gradient(rgba(38,16,14,.89), rgba(38,16,14,.92)), var(--tex3) !important;
        background-size: cover, cover !important;
        background-repeat: no-repeat !important;
        background-position: var(--tex-pos) !important;
        background-color: var(--ink) !important;
        background-attachment: scroll !important;
        justify-content: center !important;
        padding-inline: clamp(16px, 6vw, 30px);
        overflow: hidden;
      }
      #film .slide-fit-content { width: 100%; align-items: center; margin-block: auto; }
      #film h2 { margin: 8px auto 10px; font-size: clamp(1.5rem, 4.6vw, 1.8rem); line-height: 1.28; }
      #film .film-intro { color: var(--muted); text-align: center; font-family: var(--serif); font-style: italic; font-size: .82rem; line-height: 1.7; max-width: 325px; margin: 0 auto; }
      #film .film-ornament { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; margin: 17px auto 20px; color: var(--gold-hi); }
      #film .film-ornament span { width: 70px; max-width: 22%; height: 1px; background: linear-gradient(90deg,transparent,var(--gold-dim)); }
      #film .film-ornament span:last-child { transform: rotate(180deg); }
      #film .film-ornament b { font: 1.6rem/1 var(--brush); font-weight: 400; }
      #film .film-screen {
        position: relative; width: min(100%, 370px); aspect-ratio: 16 / 9;
        margin: 0 auto; border: 1px solid rgba(242,212,140,.64); border-radius: 10px;
        padding: 5px; background: #140909; overflow: hidden;
        box-shadow: 0 0 0 4px rgba(217,164,65,.045), 0 12px 40px rgba(0,0,0,.43);
        isolation: isolate;
      }
      #film .film-screen::before,
      #film .film-screen::after { content: ""; position: absolute; height: 1px; width: 33%; left: 50%; transform: translateX(-50%); z-index: 4; pointer-events:none; background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); }
      #film .film-screen::before { top: 0; }
      #film .film-screen::after { bottom: 0; }
      #film .film-poster { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: none; border-radius: 5px; overflow: hidden; background: var(--ink-2); color: var(--gold-hi); }
      #film .film-poster img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.75) saturate(.82); }
      #film .film-poster-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 18%, rgba(20,7,5,.65) 100%); }
      #film .film-play-mark {
        position: absolute; left: 50%; top: 48%; transform: translate(-50%,-50%);
        display: grid; place-items: center; width: clamp(55px, 13vw, 68px); aspect-ratio: 1;
        border: 1px solid rgba(255,233,177,.85); border-radius: 50%; background: rgba(45,20,13,.66);
        box-shadow: 0 0 0 8px rgba(217,164,65,.08), 0 8px 25px rgba(0,0,0,.4);
        transition: background .3s ease, transform .3s ease;
      }
      #film .film-poster:not(:disabled):hover .film-play-mark,
      #film .film-poster:not(:disabled):focus-visible .film-play-mark { background: rgba(142,38,32,.95); transform: translate(-50%,-50%) scale(1.08); }
      #film .film-play-mark svg { margin-left: 4px; }
      #film .film-play-label { position: absolute; bottom: 13px; left: 0; right: 0; font-size: .67rem; letter-spacing: .25em; text-shadow: 0 2px 9px #000; font-weight: 500; }
      #film .film-poster:disabled { opacity: 1; cursor: default; }
      #film .film-poster:disabled .film-play-mark { opacity: .55; }
      #film .film-screen iframe { display:block; width:100%; height:100%; border:0; border-radius:5px; background: #000; }
      #film .film-stop { display: inline-flex; align-items:center; gap: 10px; margin: 15px auto 0; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(38,16,14,.68); color: var(--gold-hi); font-size: .73rem; letter-spacing: .08em; }
      #film .film-stop[hidden] { display:none; }
      #film .film-stop span { font-size: 1.3rem; line-height: 1; }
      #film .film-caption { margin-top: 24px; color: var(--gold-hi); font-size: .67rem; letter-spacing: .22em; text-align: center; font-weight: 400; }
      #film .film-caption span { color: var(--gold-dim); padding: 0 5px; }
      #film .film-note { margin-top: 6px; font-family: var(--serif); font-size: .78rem; line-height: 1.6; color: var(--muted); text-align: center; }
      #film button:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
      @media (max-width: 899px) {
        #film {
          justify-content: flex-start !important;
          padding-top: clamp(18px, 3.6svh, 34px) !important;
          padding-bottom: clamp(16px, 3svh, 28px) !important;
        }
        #film .slide-fit-content {
          margin-block: 0 auto;
          padding-top: 0;
        }
        #film .eyebrow {
          margin-top: 0;
          font-size: .64rem;
          letter-spacing: .42em;
        }
        #film h2 {
          font-size: clamp(1.34rem, 6vw, 1.76rem);
          margin: 6px auto 8px;
        }
        #film .film-intro {
          font-size: .78rem;
          line-height: 1.62;
          max-width: 300px;
        }
        #film .film-ornament {
          margin: 10px auto 14px;
        }
        #film .film-screen {
          width: min(100%, 360px);
        }
        #film .film-caption {
          margin-top: 14px;
          font-size: .65rem;
          letter-spacing: .2em;
        }
        #film .film-note {
          margin-top: 5px;
          font-size: .76rem;
          line-height: 1.5;
          max-width: 295px;
          margin-inline: auto;
        }
      }
      @media (max-height: 580px) {
        #film .film-ornament { margin: 8px auto 10px; }
        #film .film-caption { margin-top: 11px; }
        #film .film-note { margin-top: 3px; }
      }

      #film .film-bridge {
        width: 100%;
        margin: clamp(24px, 6svh, 72px) auto 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex: none;
      }
      #film .film-bridge-top {
        width: min(240px, 80%);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
        margin: 0 auto 10px;
        color: var(--gold-hi);
      }
      #film .film-bridge-line {
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(217, 164, 65, .55));
      }
      #film .film-bridge-line:last-child { transform: rotate(180deg); }
      #film .film-bridge-seal {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        border: 1px solid rgba(217, 164, 65, .58);
        border-radius: 50%;
        box-shadow: inset 0 0 0 4px rgba(217, 164, 65, .045);
        font-family: var(--serif);
        font-size: .83rem;
        color: var(--gold-hi);
        letter-spacing: .02em;
      }
      #film .film-bridge-seal em {
        font-style: normal;
        font-size: .65rem;
        margin: 0 2px;
        color: var(--gold-dim);
      }
      #film .film-gallery-next {
        border: 0;
        background: transparent;
        color: var(--gold-hi);
        padding: 3px 20px 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
      }
      #film .film-next-overline {
        display: block;
        font-family: var(--sans);
        font-size: .57rem;
        letter-spacing: .35em;
        color: var(--gold-dim);
        font-weight: 500;
      }
      #film .film-next-name {
        display: block;
        font-family: var(--display);
        font-size: clamp(1.12rem, 4.7vw, 1.4rem);
        letter-spacing: .05em;
        line-height: 1.5;
        color: var(--ivory);
      }
      #film .film-next-down {
        margin-top: 6px;
        width: 26px;
        height: 26px;
        border: 1px solid rgba(217, 164, 65, .48);
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: var(--gold-hi);
        animation: filmNextFloat 2.9s ease-in-out infinite;
      }
      #film .film-next-down svg { display: block; width: 14px; height: 14px; }
      #film .film-gallery-next:hover .film-next-name,
      #film .film-gallery-next:focus-visible .film-next-name { color: var(--gold-hi); }
      @keyframes filmNextFloat {
        0%, 100% { transform: translateY(0); opacity: .75; }
        50% { transform: translateY(4px); opacity: 1; }
      }
      @media (max-width: 899px) {
        #film .film-bridge { margin-top: clamp(24px, 6svh, 60px); }
      }
      @media (min-width: 0px) and (max-width: 899px) and (min-height: 760px) {
        #film .film-bridge {
          margin-top: clamp(70px, calc((100svh - 600px) * .5), 164px);
        }
      }
      @media (max-height: 700px) {
        #film .film-bridge { margin-top: clamp(18px, 4.5svh, 33px); }
        #film .film-bridge-top { margin-bottom: 5px; }
        #film .film-bridge-seal { width: 34px; height: 34px; font-size: .76rem; }
        #film .film-next-down { margin-top: 3px; width: 24px; height: 24px; }
      }
      @media (max-height: 570px) {
        #film .film-bridge { margin-top: 12px; }
        #film .film-bridge-top { display: none; }
        #film .film-next-down { margin-top: 0; }
      }
      @media (prefers-reduced-motion: reduce) {
        #film .film-next-down { animation: none; }
      }


      /* PERFORMANCE MOBILE-FIRST: efek visual dijeda di halaman yang tidak terlihat.
         Semua aturan navigasi, tinggi section dan urutan halaman tetap asli. */
      html.cover-closed #hearts .heart,
      html.cover-closed #petals .petal,
      html:not(.petals-active) #petals .petal,
      html.performance-paused .heart,
      html.performance-paused .petal,
      html.performance-paused .lantern,
      html.performance-paused .gold-live,
      html.performance-paused .film-next-down,
      html.performance-paused #music-btn.playing svg {
        animation-play-state: paused !important;
      }
      html.performance-paused .sheet > section *,
      html.performance-paused .sheet > footer *,
      html.performance-paused .sheet > section *::before,
      html.performance-paused .sheet > section *::after,
      html.performance-paused .sheet > footer *::before,
      html.performance-paused .sheet > footer *::after {
        animation-play-state: paused !important;
      }
      #cover.opened .seal::before,
      #cover.opened .seal::after,
      #cover.opened .cover-names-img img {
        animation-play-state: paused !important;
      }
      .sheet > section:not(.motion-visible) .gold-live,
      .sheet > section:not(.motion-visible) .gal.in-view figure img,
      .sheet > section:not(.motion-visible) .portrait::before,
      .sheet > section:not(.motion-visible) .cd-grid .today,
      .sheet > section:not(.motion-visible) .cal-grid .hariH::before,
      .sheet > section:not(.motion-visible) .bank::after,
      .sheet > section:not(.motion-visible) .film-next-down {
        animation-play-state: paused !important;
      }
      @media (max-width: 899px) {
        /* Foto: mengganti animasi mask + filter sepia berkepanjangan dengan
           fade/transform kompositor. Foto, grid dan ukuran tetap persis. */
        .gal figure img,
        .portrait img {
          -webkit-mask-image: none !important;
          mask-image: none !important;
        }
        .gal.in-view figure img:not([src^="data:image/svg+xml"]),
        .person.in-view .portrait img:not([src^="data:image/svg+xml"]) {
          animation: mobilePhotoArrive 750ms ease-out both !important;
        }
        .gal.in-view figure img.photo-rested,
        .person.in-view .portrait img.photo-rested {
          animation: none !important;
        }
        @keyframes mobilePhotoArrive {
          from { opacity: .55; transform: translate3d(0, 7px, 0) scale(1.015); }
          to { opacity: 1; transform: none; }
        }
        /* Background emas tetap ada, hanya pergeseran gradien/filter
           terus-menerus yang dinonaktifkan di ponsel. */
        .gold-live {
          animation: none !important;
          filter: none !important;
        }
        /* Masih tampak elegan tanpa alokasi layer permanen untuk partikel. */
        .heart,
        .petal {
          will-change: auto;
        }
        /* Penutup SVG: cincin langsung dalam bentuk akhir, lalu
           muncul lewat fade sederhana pada wadah .ending-halo. */
        .sheet > footer.ceremony-played .ending-halo .ring {
          animation: none !important;
          stroke-dashoffset: 0 !important;
        }
        .sheet > footer.ceremony-played .ending-halo .double-happiness {
          animation: none !important;
          opacity: .09 !important;
          transform: none !important;
        }
      }
      @media (max-width: 899px) and (prefers-reduced-motion: reduce) {
        .gal.in-view figure img,
        .person.in-view .portrait img,
        #film .film-next-down {
          animation: none !important;
          opacity: 1 !important;
          transform: none !important;
        }
      }
    

/* Transisi Cover → Hero (mobile): warna dan desain tetap asli.
   Cahaya di sambungan tirai dianimasikan via opacity, bukan filter/paint. */
@media (max-width: 899px) {
  #cover.opened .curtain.top::after,
  #cover.opened .curtain.bottom::before {
    animation-name: coverSeamOpacityMobile;
  }
  @keyframes coverSeamOpacityMobile {
    0% { opacity: .78; }
    45% { opacity: 1; }
    100% { opacity: .88; }
  }
}