@font-face {
    font-family: "Gallery Serif";
    src: url("../../../theme-v2/fonts/cormorant-garamond-latin-v21.woff2") format("woff2");
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}
@font-face {
    font-family: "Gallery Sans";
    src: url("../../../theme-v2/fonts/manrope-latin-v20.woff2") format("woff2");
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}
:root {
    --paper: #eeebe3;
    --text-primary: #242821;
    --text-secondary: #353b31;
    --text-muted: #54594e;
    --text-atmospheric: #64695d;
    --text-inverse: #f6f2e9;
    --text-inverse-secondary: #e0e1d5;
    --text-inverse-muted: #c6cbb9;
    --ink: var(--text-primary);
    --olive: #484f3e;
    --line: #aaa99b;
    --type-entry: clamp(88px, 9.1vw, 152px);
    --type-display: clamp(62px, 4.8vw, 88px);
    --type-heading: clamp(42px, 3.3vw, 58px);
    --type-body: clamp(15px, .9vw, 17px);
    --type-small: clamp(12px, .72vw, 14px);
    --type-micro: clamp(10px, .58vw, 11px);
    /* The couple's own fonts (custom font add-on) take over the HTML when set; see x-theme-custom-fonts.
       The lettering the scene paints keeps "Gallery Serif" and "Gallery Sans" (room-scene.js). */
    --serif: var(--invie-font-heading, "Gallery Serif"), Georgia, serif;
    --sans: var(--invie-font-body, "Gallery Sans"), Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #252820; overflow-x: clip; }
body {
    margin: 0;
    font-family: var(--sans);
    font-size: var(--type-body);
    line-height: 1.7;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}
body[data-mode="immersive"] { scrollbar-width: none; }
body[data-mode="immersive"]::-webkit-scrollbar { display: none; }
html:has(body[data-mode="immersive"]) { scrollbar-width: none; }
html:has(body[data-mode="immersive"])::-webkit-scrollbar { display: none; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: wait; opacity: .5; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: .97; }
em { font-weight: 400; }
img { display: block; max-width: 100%; }
.eyebrow { font-size: var(--type-small); line-height: 1.6; font-weight: 550; letter-spacing: .15em; text-transform: uppercase; color: var(--text-secondary); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; left: 20px; top: 15px; z-index: 120; padding: 10px 15px; background: var(--paper); color: var(--ink); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.exhibition-header {
    --ui-primary: var(--text-primary); --ui-secondary: var(--text-secondary); --ui-muted: var(--text-muted); --ui-atmospheric: var(--text-atmospheric);
    position: fixed; z-index: 25; inset: 0 0 auto; height: calc(108px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(4.5%, env(safe-area-inset-right, 0px)) 0 max(4.5%, env(safe-area-inset-left, 0px));
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    pointer-events: none; color: var(--ui-primary);
}
.exhibition-header a, .exhibition-header button { pointer-events: auto; }
.exhibition-header::before { content: ''; position: absolute; inset: 0 0 -30px; z-index: -1; background: linear-gradient(#eeebe3fa 0%, #eeebe3ed 52%, #eeebe300); pointer-events: none; }
body[data-mode="immersive"][data-phase="entrance"] .exhibition-header::before { background: linear-gradient(#171c17f5 0%, #171c17dc 52%, #171c1700); }
.exhibition-brand { font: 46px/.8 var(--serif); display: inline-flex; align-items: center; gap: 5px; min-height: 44px; }
.exhibition-brand > span:first-child { font-size: 34px; padding: 0 2px; color: var(--ui-muted); }
.brand-wordmark { font: 500 var(--type-micro)/1.55 var(--sans); letter-spacing: .13em; margin-left: 13px; color: var(--ui-secondary); }
.header-edition { position: absolute; left: 50%; transform: translateX(-50%); font-size: var(--type-micro); letter-spacing: .2em; white-space: nowrap; color: var(--ui-atmospheric); }
.header-controls { display: flex; align-items: center; gap: 26px; font-size: var(--type-small); letter-spacing: .015em; font-weight: 500; }
.quiet-link { font-size: var(--type-small); border-bottom: 1px solid currentColor; padding: 5px 0; min-height: 44px; }
.sound-button { display: flex; align-items: center; gap: 10px; font-size: var(--type-small); padding: 10px 0; min-height: 44px; }
.sound-bars { display: flex; align-items: center; gap: 3px; height: 15px; }
.sound-bars i { width: 1px; height: 5px; background: currentColor; }
.sound-bars i:nth-child(2) { height: 11px; }
.sound-bars i:nth-child(3) { height: 8px; }
.sound-button[aria-pressed="true"] .sound-bars i { animation: sound-meter 1s ease-in-out infinite alternate; }
.sound-button[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay: -.6s; }
.sound-button[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay: -.3s; }
@keyframes sound-meter { to { transform: scaleY(.35); } }
body[data-mode="immersive"][data-phase="entrance"] .exhibition-header,
body[data-phase="entrance"] .exhibition-footer { --ui-primary: var(--text-inverse); --ui-secondary: var(--text-inverse-secondary); --ui-muted: var(--text-inverse-muted); --ui-atmospheric: var(--text-inverse-muted); }
body[data-mode="static"] .exhibition-header { position: absolute; }
.gallery-stage { position: fixed; inset: 0 0 auto; height: 100vh; height: 100dvh; overflow: hidden; background: #e5e0d3; touch-action: pan-y pinch-zoom; }
.gallery-stage::after { content: ''; position: absolute; inset: auto 0 0; height: calc(118px + env(safe-area-inset-bottom, 0px)); pointer-events: none; background: linear-gradient(#eeebe300, #eeebe3ed 42%, #eeebe3fa); }
body[data-phase="entrance"] .gallery-stage::after { background: linear-gradient(#171c1700, #171c17df 42%, #171c17f2); }
#gallery-canvas { width: 100%; height: 100%; display: block; touch-action: pan-y pinch-zoom; }
.scene-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 160px #48433315; }
.threshold-veil { position: absolute; inset: 0; background: #171c17; opacity: .92; pointer-events: none; }
#gallery-experience { height: 860svh; position: relative; pointer-events: none; }
.experience-overlay { position: fixed; inset: 0 0 auto; height: 100vh; height: 100dvh; z-index: 10; overflow: hidden; pointer-events: none; }
.experience-overlay button, .experience-overlay a { pointer-events: auto; }
.entrance-overlay {
    position: absolute; inset: 0; color: var(--text-inverse);
    background: linear-gradient(90deg, #222820d9 0%, #293026a8 34%, #29302612 73%);
}
.entrance-copy { position: absolute; top: 22%; left: 10%; max-width: 510px; transform-origin: left center; }
.entrance-copy .eyebrow, .entrance-dedication .eyebrow { color: var(--text-inverse-secondary); }
.entrance-copy h1 { font-size: var(--type-entry); letter-spacing: -.035em; margin: 30px 0; line-height: .84; }
.entrance-copy h1 em { color: #d4d3b9; }
.entrance-intro { font-size: var(--type-body); line-height: 1.8; color: var(--text-inverse-secondary); margin-top: 32px; font-weight: 450; }
.enter-exhibition { display: flex; align-items: center; gap: 50px; border-bottom: 1px solid #b8bba3; padding: 14px 0; margin-top: 27px; font-size: var(--type-small); font-weight: 500; letter-spacing: .02em; }
.enter-exhibition > span:last-child { font-size: 30px; line-height: 1; transition: transform .3s; }
.enter-exhibition:hover > span:last-child { transform: translateX(8px); }
.entrance-instruction { display: block; margin-top: 13px; font-size: var(--type-micro); letter-spacing: .1em; color: var(--text-inverse-muted); }
.entrance-dedication { position: absolute; bottom: 12%; right: 7%; text-align: right; max-width: 35%; text-shadow: 0 1px 20px #32382a55; }
.entrance-dedication .eyebrow { font-size: var(--type-micro); }
.entrance-dedication > p { font: 36px var(--serif); letter-spacing: -.025em; margin-top: 8px; overflow-wrap: anywhere; }
.entrance-dedication em { color: #d1d3b7; }
.entrance-guest { position: absolute; bottom: 11.5%; left: 10%; font-size: var(--type-small); line-height: 1.8; color: var(--text-inverse-secondary); max-width: 30%; }
.entrance-guest strong { font: 19px var(--serif); display: inline-block; color: #eeeadd; overflow-wrap: anywhere; margin-top: 4px; }
.room-introduction { position: absolute; top: 28%; right: 6%; width: 26%; max-width: 380px; }
.room-introduction h2 { font-size: var(--type-display); font-weight: 450; letter-spacing: -.04em; line-height: .96; margin: 20px 0 24px; }
.room-introduction h2 > span { display: block; font-size: .74em; margin-bottom: .04em; }
.room-introduction h2 em { color: var(--olive); }
.room-introduction > p:last-child { font-size: var(--type-body); line-height: 1.75; color: var(--text-secondary); max-width: 29ch; font-weight: 450; }
.artwork-caption { position: absolute; bottom: 17%; left: 7%; width: min(28vw, 390px); }
/* Feathered reading fields are DOM light, not lit world text. No card edges,
   blur or GPU postprocessing: the architecture remains visible around the copy. */
.artwork-caption, .room-introduction, .journey-end { isolation: isolate; }
.artwork-caption::before, .room-introduction::before, .journey-end::before {
    content: ''; position: absolute; z-index: -1; inset: -120px -180px; pointer-events: none;
    background: radial-gradient(ellipse closest-side at center, #eeebe399 0%, #eeebe38c 45%, #eeebe355 70%, #eeebe300 100%);
}
.artwork-caption .eyebrow, .dialog-caption .eyebrow, .still-caption .eyebrow { display: flex; align-items: center; gap: 15px; }
.artwork-caption .eyebrow, .room-introduction .eyebrow { color: var(--text-primary); }
.caption-rule { display: inline-block; width: 26px; height: 1px; background: currentColor; opacity: .4; flex: none; }
.artwork-caption h2 { font-size: var(--type-heading); font-weight: 450; letter-spacing: -.03em; line-height: 1.04; margin: 18px 0 20px; text-wrap: balance; }
.caption-story { font-size: var(--type-body); font-weight: 450; line-height: 1.75; max-width: 33ch; color: var(--text-secondary); }
.caption-open { display: inline-flex; align-items: center; gap: 35px; margin-top: 24px; padding: 7px 0; min-height: 44px; border-bottom: 1px solid var(--text-muted); font-size: var(--type-small); font-weight: 500; letter-spacing: .015em; color: var(--text-primary); }
.caption-open span { font-size: 23px; line-height: 1; }
.journey-end { position: absolute; bottom: 18%; left: 7%; max-width: 480px; }
.journey-end h2 { font-size: var(--type-display); letter-spacing: -.04em; line-height: .95; margin-top: 20px; }
.journey-end h2 em { color: var(--olive); }
.exhibition-footer { --ui-primary: var(--text-primary); --ui-secondary: var(--text-secondary); --ui-muted: var(--text-muted); position: fixed; z-index: 20; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); left: max(4.5%, env(safe-area-inset-left, 0px)); right: max(4.5%, env(safe-area-inset-right, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--ui-primary); }
.room-label { display: flex; align-items: center; gap: 12px; font-size: var(--type-small); letter-spacing: .025em; color: var(--ui-secondary); }
.room-label > span:first-child { font: italic 24px var(--serif); color: var(--ui-primary); }
.room-label .caption-rule { width: 20px; }
.scroll-cue { font-size: var(--type-small); font-weight: 500; letter-spacing: .08em; display: flex; gap: 12px; align-items: center; color: var(--ui-secondary); }
.scroll-cue > span:first-child { font: 25px var(--serif); }
body[data-scroll-understood="true"] .scroll-cue { color: var(--ui-muted); }
body:not([data-scroll-understood="true"]) .scroll-cue > span:first-child { animation: explore-nudge 4s ease-in-out 2; }
@keyframes explore-nudge { 0%, 45%, 100% { transform: translateY(0); } 65% { transform: translateY(4px); } }
.artwork-navigation { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; pointer-events: auto; }
.artwork-navigation button { min-width: 48px; min-height: 48px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; color: var(--ui-muted); font: 450 20px var(--serif); transition: color .25s; }
.artwork-navigation button i { height: 1px; width: 14px; background: currentColor; transition: width .25s; }
.artwork-navigation button[aria-current="true"] { color: var(--ui-primary); font-weight: 650; }
.artwork-navigation button[aria-current="true"] i { width: 32px; height: 2px; }
.artwork-navigation button:hover { color: var(--ui-primary); }
.journey-line { position: fixed; z-index: 24; top: 45%; bottom: 37%; right: 3%; width: 1px; background: #676e5422; }
.journey-line span { display: block; height: 100%; background: #747b62; transform: scaleY(0); transform-origin: top; }
.loading-screen { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #e9e5d6; background: #252820; }
.loading-mark { font: italic 75px var(--serif); color: #d9d9c2; line-height: 1; margin-bottom: 40px; }
.loading-mark span { font-size: 50px; padding: 0 12px; color: #777f64; }
.loading-message { font-size: var(--type-body); color: var(--text-inverse-secondary); margin-top: 18px; text-align: center; padding: 0 20px; }
.loading-track { margin: 30px 0 10px; width: 140px; height: 1px; background: #5c644a; }
.loading-percent { margin-bottom: 30px; color: var(--text-inverse-secondary); font: var(--type-small) var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.loading-track span { display: block; width: 100%; height: 100%; background: #d9d9c2; transform: scaleX(.03); transform-origin: left; transition: transform .35s; }
.loading-screen .eyebrow { color: var(--text-inverse); }
.loading-screen .quiet-link { font-size: var(--type-small); color: var(--text-inverse-secondary); border-color: #a8af99; }

/* The still edition is the base document, including with scripts disabled. */
.still-edition { padding: 150px 8% 80px; }
.still-introduction { text-align: center; padding: 35px 0 100px; }
.still-introduction h1 { font-size: clamp(70px, 9vw, 140px); letter-spacing: -.045em; margin: 25px 0 20px; }
.still-introduction h1 em { color: var(--olive); }
.still-names { font: 28px var(--serif); margin: 10px 0 25px; }
.still-introduction > p:not(.eyebrow):not(.still-names) { font-size: var(--type-body); }
.still-note { margin: 20px auto; color: var(--text-secondary); max-width: 430px; }
.still-resume { font-size: var(--type-small); padding: 10px 0; min-height: 44px; border-bottom: 1px solid var(--text-muted); margin-top: 15px; }
.still-resume span { font-size: 20px; margin-left: 20px; }
.still-room-heading { display: flex; gap: 30px; align-items: center; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.still-room-heading, .still-artwork { scroll-margin-top: 130px; }
.still-room-heading h2 { font-size: 40px; }
.still-artwork { display: grid; grid-template-columns: 1.3fr .8fr; gap: 8%; align-items: center; max-width: 1150px; margin: 100px auto; }
.still-artwork:nth-of-type(odd) figure { order: 2; }
.still-artwork figure { padding: 18px; border: 4px solid #5a5141; background: #f5f1e7; box-shadow: 10px 16px 25px #52462b14; }
.still-artwork img { width: 100%; max-height: 600px; object-fit: contain; }
.still-caption h2 { font-size: var(--type-heading); margin: 24px 0; letter-spacing: -.03em; }
.still-caption > p:last-child { font-size: var(--type-body); line-height: 1.75; max-width: 34ch; color: var(--text-secondary); font-weight: 450; }
.still-placeholder { min-height: 330px; display: grid; place-content: center; text-align: center; font: 65px var(--serif); background: #dfdece; }
.still-footer { text-align: center; border-top: 1px solid var(--line); padding: 65px 15px 20px; }
.still-footer p { font: italic 35px var(--serif); max-width: 520px; margin: 0 auto 30px; }

/* A native dialog pauses the exhibition at the exact viewed pose. */
#artwork-dialog { --detail-reveal: 1; position: fixed; inset: 0; border: 0; margin: 0;
    padding: max(70px, env(safe-area-inset-top, 0px)) max(7%, env(safe-area-inset-right, 0px)) max(50px, env(safe-area-inset-bottom, 0px)) max(7%, env(safe-area-inset-left, 0px));
    width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; overflow: auto;
    background: rgb(238 234 224 / var(--detail-reveal)); color: var(--ink); }
#artwork-dialog[open] { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 7%; }
#artwork-dialog::backdrop { background: rgb(29 33 27 / calc(.28 * var(--detail-reveal))); }
.dialog-close { position: fixed; top: max(16px, env(safe-area-inset-top, 0px)); right: max(23px, env(safe-area-inset-right, 0px)); width: 44px; height: 44px; font: 34px var(--serif); z-index: 2; }
.dialog-visual { min-width: 0; }
.dialog-visual img { width: auto; height: auto; max-width: 100%; max-height: 72vh; max-height: 72dvh; object-fit: contain; margin: auto; }
.artwork-transition { position: fixed; z-index: 3; max-width: none; object-fit: cover; pointer-events: none; transform-origin: center; }
.dialog-caption h2 { font-size: var(--type-heading); line-height: 1.04; letter-spacing: -.03em; margin: 25px 0; }
.dialog-caption > p:not(.eyebrow) { font-size: var(--type-body); color: var(--text-secondary); line-height: 1.75; font-weight: 450; }
.dialog-medium { display: block; font-size: var(--type-small); letter-spacing: .015em; color: var(--text-muted); margin-top: 25px; }
.dialog-placeholder { display: grid; place-items: center; height: 45svh; background: #dadac9; font: italic 45px var(--serif); text-align: center; padding: 20px; }
body.dialog-open .exhibition-header, body.dialog-open .exhibition-footer { visibility: hidden; }
@media (max-width: 1100px) {
    .exhibition-header { height: calc(90px + env(safe-area-inset-top, 0px)); }
    .entrance-copy { left: 8%; top: 23%; }
    .entrance-copy h1 { font-size: 105px; }
    .entrance-guest { left: 8%; }
    .entrance-dedication > p { font-size: 30px; }
    .room-introduction { right: 5%; width: 29%; }
    .artwork-caption { left: 5%; width: 30vw; bottom: 16%; }
    .artwork-caption h2 { font-size: var(--type-heading); }
}
@media (max-width: 767px) {
    :root {
        --type-entry: clamp(78px, 18vw, 108px);
        --type-display: clamp(48px, 13vw, 58px);
        --type-heading: clamp(36px, 9.7vw, 42px);
        --type-body: 15px;
        --type-small: 13px;
        --type-micro: 11px;
    }
    .exhibition-header { height: calc(82px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(6%, env(safe-area-inset-right, 0px)) 0 max(6%, env(safe-area-inset-left, 0px)); }
    .exhibition-brand { font-size: 38px; }
    .brand-wordmark { display: none; }
    .header-edition { display: none; }
    .header-controls { gap: 14px; }
    .header-controls .quiet-link, .sound-button { font-size: var(--type-small); min-height: 44px; }
    #gallery-experience { height: 680svh; }
    .entrance-overlay { background: linear-gradient(0deg,#252c20eb 0%,#252c2044 45%,#252c2033 100%); }
    .entrance-copy { left: 8%; right: 8%; top: auto; bottom: 33%; }
    .entrance-copy > .eyebrow { font-size: var(--type-micro); }
    .entrance-copy h1 { font-size: var(--type-entry); margin: 24px 0; }
    .entrance-intro { font-size: var(--type-body); margin-top: 24px; }
    .enter-exhibition { margin-top: 22px; font-size: var(--type-small); gap: 40px; padding: 12px 0; }
    .entrance-instruction { font-size: var(--type-micro); letter-spacing: .05em; }
    .entrance-dedication { right: 8%; bottom: 18%; max-width: 44%; }
    .entrance-dedication .eyebrow { font-size: var(--type-micro); letter-spacing: .08em; }
    .entrance-dedication > p { font-size: 23px; }
    .entrance-guest { left: 8%; bottom: 18%; max-width: 36%; font-size: var(--type-small); }
    .entrance-guest strong { font-size: 17px; }
    .room-introduction { top: 14%; bottom: auto; left: 8%; right: 8%; width: auto; max-width: none; }
    .room-introduction h2 { font-size: var(--type-display); margin: 10px 0 14px; }
    .room-introduction > p:last-child { font-size: var(--type-body); max-width: 28ch; }
    .artwork-caption { left: max(8%, env(safe-area-inset-left, 0px)); width: 84%; bottom: max(13%, calc(74px + env(safe-area-inset-bottom, 0px))); }
    .artwork-caption h2 { font-size: var(--type-heading); max-width: none; margin: 12px 0; }
    .artwork-caption .eyebrow { font-size: var(--type-small); }
    .caption-story { max-width: 34ch; font-size: var(--type-body); line-height: 1.7; }
    .caption-open { font-size: var(--type-small); margin-top: 12px; gap: 30px; }
    .artwork-caption::before, .room-introduction::before, .journey-end::before { inset: -65px -90px; }
    .exhibition-footer { left: max(6%, env(safe-area-inset-left, 0px)); right: max(6%, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
    .room-label { font-size: var(--type-small); gap: 8px; }
    .room-label > span:first-child { font-size: 22px; }
    .room-label .caption-rule { width: 13px; }
    .gallery-stage::after { height: calc(146px + env(safe-area-inset-bottom, 0px)); }
    .scroll-cue { display: flex; position: absolute; bottom: calc(100% + 18px); left: 0; right: 0; justify-content: center; letter-spacing: .055em; }
    body[data-scroll-understood="true"] .scroll-cue { display: none; }
    .artwork-navigation { position: static; transform: none; margin-left: auto; gap: 0; }
    .artwork-navigation button { min-width: 44px; font-size: 22px; }
    .artwork-navigation button i { width: 14px; }
    .artwork-navigation button[aria-current=true] i { width: 28px; }
    .journey-line { right: 3.5%; top: 38%; bottom: 44%; }
    .still-edition { padding: 120px 7% 50px; }
    .still-introduction { padding: 30px 0 65px; }
    .still-introduction h1 { font-size: 72px; }
    .still-names { font-size: 26px; }
    .still-introduction > p:not(.eyebrow):not(.still-names) { font-size: var(--type-body); }
    .still-room-heading { gap: 20px; }
    .still-room-heading h2 { font-size: 34px; }
    .still-artwork { grid-template-columns: 1fr; gap: 35px; margin: 55px auto 85px; }
    .still-artwork:nth-of-type(odd) figure { order: 0; }
    .still-artwork figure { padding: 12px; border-width: 3px; }
    .still-artwork img { max-height: 460px; }
    .still-caption h2 { font-size: var(--type-heading); margin: 18px 0; }
    .still-caption > p:last-child { font-size: var(--type-body); }
    .still-footer p { font-size: 30px; }
    #artwork-dialog { padding: max(66px, env(safe-area-inset-top, 0px)) 7% max(30px, env(safe-area-inset-bottom, 0px)); }
    #artwork-dialog[open] { grid-template-columns: 1fr; gap: 25px; align-items: start; align-content: start; }
    .dialog-visual img { max-height: 46vh; max-height: 46dvh; }
    .dialog-caption h2 { font-size: var(--type-heading); margin: 16px 0; }
    .dialog-caption > p:not(.eyebrow) { font-size: var(--type-body); }
    .dialog-medium { font-size: var(--type-small); margin-top: 15px; }
    .dialog-placeholder { height: 30svh; font-size: 35px; }
}
@media (max-width: 360px) {
    :root { --type-heading: 34px; --type-small: 12px; }
    .header-controls { gap: 12px; }
    .entrance-dedication > p { font-size: 20px; }
    .entrance-guest strong { font-size: 15px; }
    .room-label { max-width: 130px; }
    .room-label .caption-rule { display: none; }
}
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
    .room-introduction { top: 14%; left: 8%; right: auto; width: 50%; max-width: 380px; }
    .artwork-caption { bottom: max(8%, calc(90px + env(safe-area-inset-bottom, 0px))); }
    .artwork-caption h2 { margin-top: 4px; }
}
@media (max-height: 650px) and (min-width: 768px) {
    .exhibition-header { height: 72px; }
    .entrance-copy { top: 20%; }
    .entrance-copy h1 { font-size: 77px; margin: 15px 0; }
    .entrance-intro { font-size: var(--type-body); margin-top: 20px; }
    .enter-exhibition { margin-top: 12px; padding: 7px 0; }
    .entrance-dedication, .entrance-guest { bottom: 13%; }
    .artwork-caption { bottom: 16%; }
    .artwork-caption h2 { font-size: 34px; margin: 12px 0; }
    .caption-story { font-size: 14px; }
    .exhibition-footer { bottom: 22px; }
}
@media (max-height: 650px) and (max-width: 767px) {
    :root { --type-body: 14px; --type-entry: 66px; --type-heading: 34px; }
    .exhibition-header { height: calc(74px + env(safe-area-inset-top, 0px)); }
    .entrance-copy { top: 17%; bottom: auto; }
    .entrance-copy h1 { margin: 12px 0; }
    .entrance-intro { margin-top: 16px; line-height: 1.6; }
    .enter-exhibition { margin-top: 12px; padding: 8px 0; }
    .entrance-instruction { display: none; }
    .entrance-dedication, .entrance-guest { bottom: 19%; }
    .entrance-dedication .eyebrow { font-size: 10px; letter-spacing: .035em; }
    .entrance-dedication > p { font-size: 20px; }
    .room-introduction h2 { margin: 8px 0 10px; }
    .room-introduction > p:last-child { line-height: 1.55; }
    .artwork-caption { left: 6%; width: 88%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    .artwork-caption h2 { margin: 4px 0; }
    .caption-story { line-height: 1.5; }
    .caption-open { margin-top: 0; }
    .artwork-caption .eyebrow { line-height: 1.25; }
    .scroll-cue { bottom: calc(100% + 10px); }
}
/* Authored destinations, with the artwork rail kept room-local. */
.header-wayfinding { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); text-align: center; }
.header-wayfinding .header-edition { position: static; display: block; transform: none; }
body[data-mode="immersive"] .header-wayfinding .header-edition { display: none; }
.room-navigation { display: flex; justify-content: center; gap: 16px; }
.room-navigation button { position: relative; min-height: 44px; min-width: 64px; font-size: var(--type-small); color: var(--ui-muted); }
.room-ending-mark { display: none; }
.room-navigation button i { position: absolute; bottom: 4px; left: 22%; right: 22%; height: 1px; background: currentColor; opacity: 0; }
.room-navigation button[aria-current="location"] { color: var(--ui-primary); }
.room-navigation button[aria-current="location"] i { opacity: 1; }
.room-navigation button:hover { color: var(--ui-primary); }
.room-navigation button:focus-visible { outline-offset: -3px; }
/* Room and artwork navigation starts with Room 01, after the entrance. */
body[data-phase="entrance"] .room-navigation,
body[data-phase="entrance"] .artwork-navigation { display: none; }
.room-introduction[data-title-placement="architecture"] { top: auto; bottom: 21%; left: 7%; right: auto; width: 28%; }
.room-introduction[data-title-placement="architecture"] h2 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.room-introduction[data-title-placement="architecture"] > p:last-child { font: italic clamp(27px, 2.4vw, 40px)/1.2 var(--serif); color: var(--text-primary); margin-top: 14px; }
@media (min-width: 768px) {
    .artwork-caption[data-side="right"] { left: auto; right: 7%; }
}
@media (min-width: 768px) and (orientation: landscape) {
    .artwork-caption[data-role="hero"] h2 { max-width: 10ch; }
    .artwork-caption[data-side="center"] { left: 7%; right: 7%; width: auto; bottom: 12%; text-align: center; }
    .artwork-caption[data-side="center"] .eyebrow { justify-content: center; }
    .artwork-caption[data-side="center"] h2 { max-width: none; font-size: clamp(30px, 2.6vw, 42px); margin: 8px 0 10px; }
    .artwork-caption[data-side="center"] .caption-story { max-width: 48ch; margin-inline: auto; }
    .artwork-caption[data-side="center"] .caption-open { margin-top: 10px; }
    body[data-room-id="room-04"] .artwork-caption[data-side="center"] { bottom: calc(12% - 8px); }
}
@media (max-width: 767px) {
    /* The entrance locator and room rail share the second header row. */
    .header-wayfinding { position: fixed; top: calc(64px + env(safe-area-inset-top, 0px)); right: max(6px, env(safe-area-inset-right, 0px)); left: max(6px, env(safe-area-inset-left, 0px)); transform: none; }
    body[data-phase="entrance"] .header-wayfinding { top: calc(94px + env(safe-area-inset-top, 0px)); }
    .exhibition-header::before { bottom: -66px; background: linear-gradient(#eeebe3fa 0%, #eeebe3ed 74%, #eeebe300); }
    body[data-mode="immersive"][data-phase="entrance"] .exhibition-header::before { background: linear-gradient(#171c17f5 0%, #171c17dc 74%, #171c1700); }
    .header-wayfinding .header-edition { display: none; }
    .room-navigation { gap: 0; }
    .room-navigation button { font-size: 13px; min-width: 44px; font-variant-numeric: tabular-nums; }
    .room-navigation-prefix, .room-navigation-ending { display: none; }
    .room-ending-mark { display: inline; font: 24px/1 var(--serif); }
    .room-introduction[data-title-placement="architecture"] { left: 8%; width: 84%; bottom: 21%; }
    .room-introduction[data-title-placement="architecture"] > p:last-child { font-size: 30px; }
    body[data-room-index]:not([data-room-index="0"]) .exhibition-footer { flex-wrap: wrap; justify-content: center; row-gap: 0; }
    body[data-room-index]:not([data-room-index="0"]) .artwork-navigation { order: 1; margin-left: 0; }
    body[data-room-index]:not([data-room-index="0"]) .room-label { order: 2; width: 100%; max-width: none; justify-content: center; font-size: 11px; line-height: 1.3; }
    body[data-room-index]:not([data-room-index="0"]) .room-label > span:first-child { font-size: 17px; }
    body[data-room-index]:not([data-room-index="0"]) .artwork-caption { bottom: max(15%, calc(104px + env(safe-area-inset-bottom, 0px))); }
}
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
    body[data-room-index]:not([data-room-index="0"]) .artwork-caption { left: 8%; width: 84%; right: auto; bottom: max(12%, 110px); }
    body[data-room-index]:not([data-room-index="0"]) .artwork-caption .caption-story { max-width: 40ch; }
}
/* Wedding information is set as an editorial plaque, with actual links and
   unlit DOM text. The broad reading field has no card edge or glass surface. */
.invitation-panel { position: absolute; bottom: 15%; left: 7%; width: min(36vw, 460px); color: #20251f; isolation: isolate; pointer-events: auto; }
.invitation-panel::before { content: ''; position: absolute; z-index: -1; inset: -110px -130px; pointer-events: none; background: radial-gradient(ellipse closest-side, #f1eee6fa 0%, #f1eee6ee 50%, #f1eee6a8 76%, #f1eee600 100%); }
.invitation-panel[data-side="right"] { left: auto; right: 7%; }
.invitation-panel[data-side="center"] { left: 50%; transform: translateX(-50%); width: min(600px, 86%); bottom: 12%; text-align: center; }
.invitation-panel[data-variant="wedding"]::before { inset: -24px -80px -70px; }
.invitation-panel .eyebrow { color: #34382e; font-size: 12px; }
.invitation-names { font: 450 clamp(32px, 3.1vw, 48px)/1.04 var(--serif); letter-spacing: -.025em; margin: 8px 0 12px; overflow-wrap: anywhere; }
.invitation-date, .invitation-time { font: 600 17px/1.5 var(--sans); color: #20251f; }
.invitation-time { margin-top: 3px; }
.invitation-event-title { font: 450 clamp(32px, 3.2vw, 46px)/1.1 var(--serif); margin: 10px 0 15px; overflow-wrap: anywhere; }
.invitation-location { margin-top: 22px; }
.invitation-venue { font: 600 18px/1.45 var(--sans); color: #20251f; }
.invitation-address { font: 450 15px/1.65 var(--sans); margin-top: 7px; color: #30362d; overflow-wrap: anywhere; }
.invitation-actions { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; }
.invitation-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; border-bottom: 1px solid #535a4c; color: #20251f; font: 600 14px/1.4 var(--sans); padding: 6px 0; }
.invitation-action span { font-size: 20px; font-weight: 400; }
.invitation-action:hover { border-bottom-width: 2px; }
.invitation-action:focus-visible { outline: 2px solid #343d2b; outline-offset: 5px; }
.invitation-program { list-style: none; padding: 0; margin: 14px auto 8px; max-width: 480px; }
.invitation-program li { display: flex; gap: 12px; justify-content: space-between; padding: 7px 0; font: 450 14px/1.5 var(--sans); text-align: left; border-top: 1px solid #747c674d; }
.invitation-program strong { font-weight: 600; flex-shrink: 0; }
.invitation-program-date { display: block; font-size: 13px; font-weight: 600; margin-top: 3px; }
.invitation-more { font: 500 13px/1.5 var(--sans); margin: 6px 0; color: #30362d; }
.still-information { max-width: 900px; margin: 70px auto 100px; color: #20251f; }
.invitation-full-names { font: 450 18px/1.7 var(--sans); max-width: 48ch; margin-top: 20px; overflow-wrap: anywhere; }
.invitation-return { margin-top: 20px; }
.invitation-timeline { list-style: none; padding: 0; margin: 50px 0 0; }
.invitation-timeline > li { position: relative; padding: 28px 0 38px 65px; border-top: 1px solid #85877788; }
.invitation-sequence { position: absolute; left: 0; top: 32px; font: italic 28px var(--serif); }
#still-room-05 { scroll-margin-top: 40px; }
@media (min-width: 768px) and (max-width: 1100px) {
    .header-wayfinding { top: 76px; }
    .header-wayfinding .header-edition { display: none; }
}
@media (max-width: 1100px) {
}
@media (max-width: 767px), (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {
    .invitation-panel, .invitation-panel[data-side="right"], .invitation-panel[data-side="center"] { left: 8%; right: 8%; width: auto; bottom: max(15%, calc(106px + env(safe-area-inset-bottom, 0px))); transform: none; text-align: left; }
    .invitation-names { font-size: 34px; }
    .invitation-event-title { font-size: 34px; margin: 8px 0 12px; }
    .invitation-date, .invitation-time { font-size: 16px; }
    .invitation-location { margin-top: 15px; }
    .invitation-venue { font-size: 16px; }
    .invitation-address { font-size: 15px; line-height: 1.55; }
    .invitation-actions { gap: 6px 22px; margin-top: 14px; }
    .invitation-program li { font-size: 13px; }
    .invitation-full-names { font-size: 16px; }
    .invitation-timeline > li { padding-left: 40px; }
    .invitation-sequence { font-size: 23px; }
}
@media (max-width: 767px) and (max-height: 650px) {
    .invitation-panel, .invitation-panel[data-side="right"], .invitation-panel[data-side="center"] { bottom: calc(99px + env(safe-area-inset-bottom, 0px)); }
    .invitation-panel .eyebrow { font-size: 11px; }
    .invitation-event-title, .invitation-names { font-size: 30px; margin: 5px 0 8px; }
    .invitation-location { margin-top: 10px; }
    .invitation-date, .invitation-time, .invitation-venue { font-size: 15px; }
    .invitation-address { font-size: 14px; line-height: 1.5; margin-top: 4px; }
    .invitation-actions { gap: 4px 15px; margin-top: 10px; }
    .invitation-action { font-size: 13px; }
    .invitation-program { margin-top: 10px; }
    .invitation-program li { padding: 4px 0; }
}
/* The book opens as a readable page beside its installation. The scene freezes
   while this DOM surface owns focus, scrolling, and the mobile keyboard. */
.guestbook-invitation { position: absolute; left: 7%; bottom: 18%; width: min(350px, 29%); color: #272d24; pointer-events: auto; }
.guestbook-invitation h2 { font: 450 clamp(34px, 3.4vw, 50px)/1.04 var(--serif); margin: 15px 0 18px; }
.guestbook-invitation > p:not(.eyebrow) { font: 400 15px/1.75 var(--sans); max-width: 32ch; }
.guestbook-invitation .caption-open { color: #272d24; }
.guestbook-wall { margin-top: 30px; display: flex; gap: 20px; }
.guestbook-wall blockquote { border-left: 1px solid #73756266; padding-left: 12px; margin: 0; flex: 1; min-width: 0; }
.guestbook-wall p { font: italic 19px/1.35 var(--serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.guestbook-wall cite { font: 500 11px/1.5 var(--sans); display: block; margin-top: 8px; overflow-wrap: anywhere; }
.guestbook-wall:empty { display: none; }
.still-guestbook { max-width: 900px; margin: 60px auto 100px; }
.still-guestbook h2 { font: 450 clamp(34px, 4vw, 54px)/1.1 var(--serif); margin: 18px 0; }
.still-guestbook > p:not(.eyebrow) { font: 400 16px/1.7 var(--sans); max-width: 44ch; }
.still-guestbook .invitation-action { margin-top: 22px; }
.guestbook-open { overflow: hidden; }
.guestbook-open .guestbook-invitation { opacity: 0 !important; pointer-events: none; }
#guestbook-dialog { --book-height: 100dvh; --book-top: 0px; position: fixed; top: var(--book-top); right: 0; bottom: auto; left: auto; margin: 0; width: min(630px, 52vw); max-width: none; height: var(--book-height); max-height: none; padding: 0; border: 0; background: transparent; color: #262c23; overflow: hidden; }
#guestbook-dialog::backdrop { background: #20251c00; transition: background .5s ease; }
#guestbook-dialog[data-ready="true"]::backdrop { background: #20251c3d; }
.guestbook-sheet { height: 100%; display: flex; flex-direction: column; background: #f4f0e7; box-shadow: -18px 0 70px #1c201529; opacity: 0; transform: translateX(30px); transition: opacity .4s ease, transform .5s ease; }
#guestbook-dialog[data-ready="true"] .guestbook-sheet { opacity: 1; transform: none; }
.guestbook-heading { position: relative; padding: max(38px, env(safe-area-inset-top)) 42px 24px; border-bottom: 1px solid #96968255; flex-shrink: 0; }
.guestbook-heading .eyebrow { color: #505745; font-size: 11px; letter-spacing: .13em; padding-right: 30px; }
.guestbook-heading h2 { font: 450 clamp(32px, 3vw, 44px)/1.06 var(--serif); margin: 18px 0 12px; max-width: 12ch; }
.guestbook-heading > p:last-child { font: 400 14px/1.65 var(--sans); max-width: 40ch; }
.guestbook-close { position: absolute; right: 23px; top: max(20px, env(safe-area-inset-top)); width: 44px; height: 44px; font: 300 32px/1 var(--sans); }
.guestbook-pages { padding: 24px 42px 35px; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; min-height: 0; flex: 1; scroll-padding: 20px; }
.guestbook-notice { border-left: 2px solid #777d63; padding-left: 14px; font: 450 13px/1.65 var(--sans); margin-bottom: 24px; }
.guestbook-tabs { display: flex; gap: 28px; border-bottom: 1px solid #74796655; margin-bottom: 26px; }
.guestbook-tabs button { display: flex; justify-content: space-between; gap: 30px; min-height: 48px; font: 500 15px var(--sans); border-bottom: 2px solid transparent; }
.guestbook-tabs button[aria-selected="true"] { border-color: #343c2b; }
.guestbook-tabs button span { font: italic 18px var(--serif); color: #646b58; }
.guestbook-field { margin-bottom: 23px; }
.guestbook-field label { display: block; font: 600 14px/1.5 var(--sans); margin-bottom: 9px; }
.guestbook-field input, .guestbook-field select, .guestbook-field textarea { display: block; width: 100%; min-height: 48px; border: 1px solid #7b806c; border-radius: 0; background: #fffcf6; color: #242c20; padding: 12px 13px; font: 400 16px/1.5 var(--sans); box-sizing: border-box; }
.guestbook-field textarea { resize: vertical; min-height: 140px; }
.guestbook-field input:disabled, .guestbook-field select:disabled, .guestbook-field textarea:disabled { color: #4c5345; background: #e8e7dc; }
.guestbook-field [aria-invalid="true"] { border: 2px solid #983c2d; }
.guestbook-field-error { margin-top: 7px; color: #883423; font: 500 13px/1.5 var(--sans); }
.guestbook-help { margin-top: 10px; color: #4c5444; font: 400 12px/1.6 var(--sans); }
.guestbook-feedback { padding: 14px 0; border-top: 1px solid #737a6455; margin-bottom: 14px; font: 500 14px/1.65 var(--sans); }
.guestbook-feedback[data-status="error"] { color: #883423; }
.guestbook-feedback[data-status="success"] { color: #344a29; }
.guestbook-submit { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-height: 52px; background: #303b29; color: #fffdf6; font: 500 15px/1.5 var(--sans); padding: 12px 19px; }
.guestbook-submit > span:last-child { font-size: 22px; }
.guestbook-submit:disabled { opacity: .55; cursor: default; }
.guestbook-notes { margin-top: 42px; border-top: 1px solid #787d684d; padding-top: 26px; }
.guestbook-notes h3 { font: 450 28px/1.2 var(--serif); margin-bottom: 15px; }
.guestbook-notes [data-notes-status] { font: 400 13px/1.6 var(--sans); }
.guestbook-notes ol { list-style: none; padding: 0; }
.guestbook-notes li { padding: 22px 0; border-bottom: 1px solid #787d6833; overflow-wrap: anywhere; }
.guestbook-notes li p { font: 400 16px/1.75 var(--sans); white-space: pre-wrap; margin-bottom: 12px; }
.guestbook-notes li strong { font: 600 13px/1.5 var(--sans); }
.guestbook-notes li span { display: block; font: 400 11px/1.6 var(--sans); color: #555e4b; margin-top: 3px; }
.guestbook-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; font: 500 12px/1.5 var(--sans); }
.guestbook-pagination button { min-height: 44px; text-decoration: underline; text-underline-offset: 5px; }
.guestbook-pagination button:disabled { opacity: .4; text-decoration: none; }
.guestbook-foot { flex-shrink: 0; border-top: 1px solid #74796655; padding: 10px 42px max(10px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #edeadf; }
.guestbook-foot > span { font: 500 9px/1.4 var(--sans); letter-spacing: .12em; }
.guestbook-foot button { font: 500 12px/1.5 var(--sans); min-height: 44px; }
#guestbook-dialog :focus-visible { outline: 2px solid #53683f; outline-offset: 4px; }
@media (max-width: 767px), (orientation: portrait) {
    .guestbook-invitation { left: 8%; right: 8%; width: auto; bottom: max(16%, 105px); }
    .guestbook-invitation h2 { font-size: 34px; margin: 8px 0 10px; }
    .guestbook-invitation > p:not(.eyebrow) { font-size: 14px; line-height: 1.6; max-width: 34ch; }
    .guestbook-invitation .caption-open { margin-top: 8px; }
    .guestbook-wall { display: none; }
    #guestbook-dialog { width: 100%; }
    .guestbook-sheet { transform: translateY(28px); }
    .guestbook-heading { padding: max(25px, env(safe-area-inset-top)) 7% 18px; }
    .guestbook-heading h2 { font-size: 34px; max-width: none; margin: 15px 35px 10px 0; }
    .guestbook-heading > p:last-child { font-size: 13px; }
    .guestbook-pages { padding: 22px 7% 30px; }
    .guestbook-foot { padding-left: 7%; padding-right: 7%; }
}
@media (max-width: 767px) {
    .room-navigation { gap: 0; justify-content: space-between; }
    .room-navigation button { min-width: 44px; font-size: 13px; }
}
@media (max-height: 650px) {
    .guestbook-heading { padding-top: 15px; padding-bottom: 12px; }
    .guestbook-heading h2 { font-size: 28px; margin-top: 10px; margin-bottom: 7px; }
    .guestbook-heading > p:last-child { display: none; }
    .guestbook-close { top: 10px; }
    .guestbook-pages { padding-top: 16px; }
}
@media (max-width: 767px) and (max-height: 650px) {
    .guestbook-invitation { bottom: 99px; }
    .guestbook-invitation h2 { font-size: 30px; }
    .guestbook-invitation > p:not(.eyebrow) { font-size: 13px; }
    .guestbook-invitation .caption-open { margin-top: 2px; }
}
/* Tanda kasih: bank accounts in the guest book and the still edition. */
.guestbook-gifts h3 { font: 450 28px/1.2 var(--serif); margin-bottom: 12px; }
.guestbook-gifts > p { font: 400 15px/1.7 var(--sans); max-width: 44ch; margin-bottom: 20px; }
.gift-accounts { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.gift-account { padding: 18px 20px; border: 1px solid #737a6455; border-radius: 4px; background: #fbf8f1; overflow-wrap: anywhere; }
.gift-account__bank { font: 600 12px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #4d5541; }
.gift-account__number { font: 500 24px/1.3 var(--sans); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .04em; margin: 6px 0 4px; color: var(--ink); }
.gift-account__holder { font: 400 14px/1.6 var(--sans); color: #4a5240; }
.gift-account__copy { margin-top: 10px; min-height: 44px; }
.gift-account__status { min-height: 1.4em; font: 500 13px/1.5 var(--sans); color: #344a29; }
.still-gifts { max-width: 900px; margin: 0 auto 100px; }
.still-gifts h2 { font: 450 clamp(34px, 4vw, 54px)/1.1 var(--serif); margin: 18px 0; }
.still-gifts > p:not(.eyebrow) { font: 400 16px/1.7 var(--sans); max-width: 44ch; margin-bottom: 22px; }
@media (max-width: 767px) {
    .guestbook-tabs { gap: 18px; }
    .guestbook-tabs button { gap: 10px; font-size: 14px; }
}
@media (max-width: 359px) {
    .guestbook-tabs { gap: 12px; }
    .guestbook-tabs button span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The final photograph gets its own quiet pause, beyond the numbered rooms. */
.journey-end h2 { text-wrap: balance; }
.journey-end h2 em:empty { display: none; }
.closing-statement { margin-top: 22px; max-height: 22vh; overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; white-space: pre-line; overflow-wrap: anywhere; font-size: 15px; line-height: 1.8; color: var(--text-secondary); scrollbar-width: thin; }
body[data-ending="true"] .scroll-cue,
body[data-ending="true"] .exhibition-footer { display: none; }
.replay-veil { position: fixed; inset: 0; z-index: 90; background: var(--paper); touch-action: none; }
.guestbook-actions { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.guestbook-actions .caption-open { gap: 14px; }
.guestbook-onward { display: flex; gap: 12px; align-items: center; min-height: 44px; font-size: 12px; text-decoration: underline; text-underline-offset: 5px; }
.guestbook-foot [data-continue-ending] { text-decoration: underline; text-underline-offset: 5px; }
.still-ending { max-width: 850px; margin: 110px auto 80px; text-align: center; scroll-margin-top: 130px; }
.still-ending figure { max-width: 740px; margin: 0 auto 65px; padding: 14px; border: 2px solid #78725f; background: #f5f1e7; }
.still-ending img { width: 100%; height: auto; max-height: 580px; object-fit: contain; }
.still-ending h2 { font-size: clamp(48px, 6vw, 76px); margin: 20px 0; }
.still-closing-statement { max-width: 52ch; margin: auto; white-space: pre-line; overflow-wrap: anywhere; }
.room-navigation { max-width: 100%; padding: 0; position: relative; pointer-events: auto; }
.room-navigation::-webkit-scrollbar { display: none; }
.room-navigation button { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 767px), (orientation: portrait) {
    .guestbook-actions { gap: 18px; }
    .guestbook-actions .caption-open { font-size: 12px; gap: 10px; }
    .guestbook-onward { gap: 10px; }
    .still-ending { margin: 80px auto 50px; }
    .still-ending figure { margin-bottom: 40px; padding: 10px; }
    .room-navigation { justify-content: center; }
    .room-navigation button { flex: 1 0 44px; }
}

/* Keep the entrance legible on small screens: the title and one clear action
   carry the invitation while secondary labels stay out of the way. */
@media (max-width: 767px) {
    .entrance-copy > .eyebrow,
    .entrance-instruction { display: none; }
    .entrance-copy { top: auto; bottom: 44%; }
    .entrance-copy h1 { margin-top: 24px; margin-bottom: 24px; }
    .entrance-intro { max-width: 30ch; line-height: 1.6; }
    .enter-exhibition { gap: 28px; margin-top: 20px; padding: 10px 0; }
    .entrance-dedication {
        left: 8%;
        right: 8%;
        bottom: max(18%, calc(106px + env(safe-area-inset-bottom, 0px)));
        max-width: none;
        text-align: center;
    }
    .entrance-dedication .eyebrow { display: none; }
    .entrance-dedication > p { margin-top: 0; font-size: clamp(20px, 6vw, 25px); }
    .entrance-guest {
        display: block;
        left: 8%;
        right: 8%;
        bottom: calc(18% + 58px + env(safe-area-inset-bottom, 0px));
        max-width: none;
        text-align: center;
        font-size: var(--type-micro);
        line-height: 1.4;
    }
    .entrance-guest br { display: none; }
    .entrance-guest strong { font: inherit; margin-left: 4px; }
}
@media (max-width: 767px) and (max-height: 650px) {
    .entrance-copy { top: 17%; bottom: auto; }
    .entrance-dedication { bottom: 19%; }
}

/* Task shortcuts: events, RSVP and gifts are reachable from the entrance on,
   so guests need not decode the numbered room rail to find them. */
.task-chips { display: flex; justify-content: center; gap: 8px; margin-top: 2px; pointer-events: auto; }
.task-chips button { min-height: 36px; padding: 6px 14px; border: 1px solid color-mix(in srgb, var(--ui-primary) 34%, transparent); border-radius: 999px; color: var(--ui-primary); font: 600 12px/1.2 var(--sans); letter-spacing: .04em; }
.task-chips button:hover { border-color: var(--ui-primary); }
.task-chips button:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
body[data-mode="static"] .task-chips { display: none; }
@media (max-width: 767px) {
    /* Inside the rooms the numbered rail stays and the shortcuts sit beneath it;
       the room introduction moves down to clear the extra row. */
    body[data-mode="immersive"]:not([data-phase="entrance"]) .task-chips { margin-top: 2px; }
    body[data-mode="immersive"]:not([data-phase="entrance"]) .room-introduction:not([data-title-placement="architecture"]) { top: max(calc(14% + 44px), calc(160px + env(safe-area-inset-top, 0px))); }
    body[data-mode="immersive"]:not([data-phase="entrance"]) .exhibition-header::before { bottom: -108px; }
    .task-chips button { min-height: 40px; }
}
.still-toc { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; justify-content: center; gap: 8px; padding: 10px 16px; background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.still-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 999px; color: var(--ink); font: 600 13px/1.2 var(--sans); letter-spacing: .04em; text-decoration: none; }
.still-toc a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.still-edition [id^="still-"] { scroll-margin-top: 72px; }
.gallery-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: min(92vw, 420px); padding: 12px 18px; border-radius: 12px; background: #20251f; color: #f3efe6; font: 500 14px/1.45 var(--sans); text-align: center; transform: translateX(-50%); box-shadow: 0 10px 30px #0004; }
/* Greeting and the couple with their parents, as other invitations give them. */
.invitation-greeting { margin: 0 0 6px; font: italic 500 16px/1.4 var(--serif); color: #2b3127; }
.still-greeting { margin: 0 0 10px; font: italic 500 18px/1.4 var(--serif); color: var(--text-secondary); }
.invitation-couple { list-style: none; display: grid; gap: 12px; margin: 16px 0 6px; padding: 0; }
.invitation-couple li { display: grid; gap: 3px; }
.invitation-couple strong { font: 600 16px/1.4 var(--sans); color: #20251f; }
.invitation-couple span { font: 450 15px/1.55 var(--sans); color: #30362d; }
/* The entrance names the couple; the date sits where the dedication was. */
.entrance-copy h1 { overflow-wrap: anywhere; }
.entrance-copy h1.entrance-title--long { font-size: clamp(48px, 7vw, 96px); line-height: .92; }
.entrance-dedication > p { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; }
@media (max-width: 767px) {
    .entrance-copy h1.entrance-title--long { font-size: clamp(44px, 13vw, 64px); }
    .entrance-dedication > p { font-size: 20px; }
}


/* ------------------------------------------------------------------------
   Quiet exhibition (2026-10 review): the rooms and photographs carry the
   experience. No reading fields, gradients or rails cover the scene; the
   few remaining controls sit in small, legible pills.
   ------------------------------------------------------------------------ */
.exhibition-header::before, .gallery-stage::after, .scene-vignette,
.artwork-caption, .room-introduction, .exhibition-footer, .journey-line, .header-edition,
.guestbook-wall { display: none !important; }
.exhibition-header { height: auto; padding-top: max(18px, env(safe-area-inset-top, 0px)); align-items: flex-start; }
.exhibition-brand { font-size: 30px; min-height: 40px; text-shadow: 0 0 18px #eeebe3cc; }
.exhibition-brand > span:first-child { font-size: 22px; }
.header-location { position: static; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 auto 0 0; padding: 0 18px;
    border: 1px solid #24282133; border-radius: 999px; background: #f3f0e9b8; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font: 500 12px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); transition: opacity .6s; }
.header-location:has([data-current-room-label]:empty) { opacity: 0; }
body[data-mode="immersive"]:not([data-phase="entrance"]) .exhibition-brand { display: none; }
.header-location [data-current-room-number] { font: italic 20px/1 var(--serif); letter-spacing: 0; text-transform: none; }
.header-location [data-current-room-number]:empty, .header-location [data-current-room-number]:empty + .locator-divider { display: none; }
.header-location [data-current-room-label] { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A long room title gives way (ellipsis), never the sound and menu controls beside it. */
.header-location { min-width: 0; }
.header-controls { gap: 10px; flex-shrink: 0; }
.sound-button, .menu-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 16px;
    border: 1px solid #24282133; border-radius: 999px; background: #f3f0e9b8; color: var(--ink);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 500 13px/1 var(--sans); letter-spacing: .04em;
}
.sound-button { padding: 0; }
.menu-button > span:first-child { display: grid; gap: 5px; width: 16px; }
.menu-button i { display: block; height: 1px; background: currentColor; }
body[data-phase="entrance"] .exhibition-brand, body[data-phase="entrance"] .header-location,
body[data-phase="entrance"] .menu-button { opacity: 0; pointer-events: none; }
/* Out of the row, not just transparent: the sound control then keeps the corner on the cover and in the still edition. */
body[data-phase="entrance"] .menu-button { position: absolute; }
body[data-mode="immersive"][data-phase="entrance"] .sound-button { background: #1d221c66; border-color: #f6f2e94d; color: var(--text-inverse); }
body[data-mode="static"] .header-location { display: none; }

/* Cover: the couple, the guest, and the way in. */
.threshold-veil { background: #1b201a; }
.entrance-overlay { background: radial-gradient(ellipse 80% 70% at 50% 55%, #1b201a00 0%, #1b201a59 70%, #1b201aa6 100%); }
.entrance-copy { position: absolute; inset: auto 8% 30% 8%; top: auto; max-width: none; text-align: center; transform-origin: center; }
.entrance-copy h1 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: .28em; margin: 0;
    font-size: clamp(64px, 8.4vw, 136px); line-height: .95; letter-spacing: -.03em; text-shadow: 0 2px 40px #11150f66; }
.entrance-copy h1 em { font-size: .55em; color: #d9d6bf; }
.entrance-guest { position: static; max-width: none; margin-top: 26px; font-size: 13px; letter-spacing: .06em; color: var(--text-inverse-secondary); }
.entrance-guest strong { display: inline; margin: 0; font: italic 20px var(--serif); letter-spacing: 0; color: #f0ecdf; }
.enter-exhibition { position: absolute; left: 50%; bottom: max(7%, calc(28px + env(safe-area-inset-bottom, 0px))); transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; padding: 10px 14px; border: 0;
    font: 500 11px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--text-inverse-secondary); white-space: nowrap; }
/* The couple's own, longer cue wraps inside the screen instead of running past its edges. */
.enter-exhibition { width: max-content; max-width: calc(100% - 40px); white-space: normal; text-align: center; }
.enter-exhibition i { position: relative; display: block; width: 1px; height: 46px; background: #f6f2e94d; overflow: hidden; }
.enter-exhibition i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #f6f2e9; animation: enter-cue 2.4s ease-in-out infinite; }
@keyframes enter-cue { to { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .enter-exhibition i::after { animation: none; top: 30%; } }

/* One hint while the first room opens, then the walk is wordless. */
.gallery-hint { position: absolute; left: 50%; bottom: max(6%, calc(22px + env(safe-area-inset-bottom, 0px))); transform: translateX(-50%);
    padding: 10px 18px; border-radius: 999px; background: #f3f0e9c7; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font: 500 12px/1.4 var(--sans); letter-spacing: .05em; color: var(--text-secondary); white-space: nowrap; }

/* Practical actions only: the wall already shows the names, date and venue. */
.invitation-panel, .invitation-panel[data-side="right"], .invitation-panel[data-side="center"],
.guestbook-invitation {
    position: absolute; left: 50%; right: auto; top: auto; bottom: max(6%, calc(22px + env(safe-area-inset-bottom, 0px))); transform: translateX(-50%);
    /* max-content: from left 50% an auto width shrinks to half the screen, breaking "Informasi lengkap" in two on phones. */
    width: max-content; max-width: calc(100% - 32px); text-align: center; isolation: auto; }
.invitation-panel::before { display: none; }
.invitation-panel > :not(.invitation-actions):not(.invitation-action) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.invitation-panel .invitation-actions, .guestbook-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.invitation-panel .invitation-action, .guestbook-invitation .caption-open {
    min-height: 44px; margin: 0; padding: 0 18px; gap: 10px; border: 1px solid #24282133; border-radius: 999px;
    background: #f3f0e9d9; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font: 500 13px/1 var(--sans); letter-spacing: .02em; color: var(--ink); }
.invitation-panel .invitation-action span, .guestbook-invitation .caption-open span { font-size: 15px; }
.guestbook-invitation .guestbook-onward { min-height: 44px; padding: 0 12px; font-size: 13px; color: var(--text-secondary); text-shadow: 0 0 10px #eeebe3; }

/* The menu: rooms by name, then what guests come for, then settings. */
.gallery-menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; justify-content: center; gap: 30px;
    padding: max(80px, env(safe-area-inset-top, 0px)) max(8%, calc((100% - 460px) / 2)) max(40px, env(safe-area-inset-bottom, 0px));
    background: #eeebe3f2; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow-y: auto; }
.gallery-menu-close { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: max(4.5%, env(safe-area-inset-right, 0px)); width: 44px; height: 44px; font: 34px var(--serif); }
.gallery-menu .eyebrow { color: var(--text-muted); }
.gallery-menu .room-navigation { display: grid; gap: 0; justify-content: stretch; }
.gallery-menu .room-navigation button { display: flex; align-items: baseline; gap: 18px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid #24282122;
    font: 400 clamp(26px, 6vw, 34px)/1.2 var(--serif); color: var(--text-secondary); text-align: left; white-space: normal; }
.gallery-menu .room-navigation button:hover, .gallery-menu .room-navigation button[aria-current="location"] { color: var(--ink); }
.gallery-menu .room-navigation button[aria-current="location"] .room-navigation-number { color: var(--olive); }
.room-navigation-number { flex: none; width: 2.4ch; font: italic 18px/1 var(--serif); color: var(--text-atmospheric); }
/* Flush left with the room list above them, as the eyebrow and the footer links are. */
.gallery-menu .task-chips { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.gallery-menu .task-chips button { min-height: 44px; padding: 0 18px; border: 1px solid #2428214d; border-radius: 999px; font: 500 13px/1 var(--sans); }
.gallery-menu-footer { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.gallery-menu-footer .quiet-link { font-size: 13px; color: var(--text-secondary); }
body.menu-open { overflow: hidden; }

/* Still edition: each frame follows its photograph instead of a fixed portrait box. */
.still-artwork figure { justify-self: center; width: fit-content; max-width: 100%; }
/* Size attributes are only a placeholder; the decoded photograph sets the frame. */
.still-artwork img { width: auto; height: auto; max-width: 100%; max-height: min(70vh, 640px); object-fit: initial; }
#artwork-dialog.is-untitled[open] { grid-template-columns: 1fr; justify-items: center; }
#artwork-dialog.is-untitled .dialog-caption { text-align: center; }
#artwork-dialog.is-untitled [data-dialog-description]:empty { display: none; }
#artwork-dialog.is-untitled .dialog-visual img { max-height: 78vh; max-height: 78dvh; }
@media (max-width: 767px) {
    .exhibition-header { padding-top: max(14px, env(safe-area-inset-top, 0px)); }
    .header-location { font-size: 11px; padding: 0 14px; }
    .menu-button-label { display: none; }
    .menu-button { padding: 0; }
    .entrance-copy { inset: auto 7% 26% 7%; }
    .entrance-copy h1 { flex-direction: column; align-items: center; font-size: clamp(58px, 17vw, 84px); row-gap: .06em; }
    .gallery-hint { white-space: normal; width: max-content; max-width: calc(100% - 40px); text-align: center; }
    .still-artwork figure { padding: 10px; }
}

/* Names wrap only between words: a name shrinks to its line instead (the template estimates --still-name-em). */
.still-introduction h1 { container-type: inline-size; }
.still-introduction h1 > :is(span, em) { font-size: min(1em, max(1rem, 92cqi / var(--still-name-em, 3))); overflow-wrap: break-word; }

/* Credits at the end of the visit: the family who also invite, and the wedding vendors. */
.gallery-credits { display: grid; gap: 14px; margin-top: 18px; }
.gallery-credits ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.gallery-credits li { display: flex; flex-direction: column; color: var(--text-primary); font-size: 14px; line-height: 1.35; }
.gallery-credits li span { color: var(--text-muted); font-size: 12px; }
.gallery-credits a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.still-ending .gallery-credits { max-width: 520px; margin: 30px auto 0; text-align: left; }

/* The closing card. The last wall can fall in shade, so the thanks, the closing message and the credits rest
   on paper: beside the final photograph on wide screens, as a sheet beneath it in portrait. Only the message
   and the credits scroll; the replay control always stays on screen. */
.journey-end {
    --end-top: calc(84px + env(safe-area-inset-top, 0px));
    --end-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    position: absolute; top: var(--end-top); bottom: var(--end-bottom); left: max(5%, env(safe-area-inset-left, 0px));
    width: clamp(300px, 31vw, 450px); max-width: none; height: fit-content; max-height: calc(100% - var(--end-top) - var(--end-bottom));
    margin-block: auto; display: flex; flex-direction: column; padding: 30px 32px 16px;
    background: #f5f2ebf0; border: 1px solid #2428211a; border-radius: 6px;
    box-shadow: 0 30px 60px -34px #2428217a, 0 2px 12px #24282112;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: auto;
}
.journey-end::before { display: none; }
.journey-end .eyebrow:empty { display: none; }
.journey-end h2 { flex: none; margin: 0; font-size: clamp(42px, 4vw, 64px); }
.journey-end .closing-statement { flex: none; margin-top: 14px; max-height: 6.8em; font-size: 15px; line-height: 1.7; }
/* minmax(0, 1fr): without it the column grows to a row's full width, and a sideways row could never scroll. */
.journey-end .gallery-credits { flex: 0 1 auto; min-height: 0; grid-template-columns: minmax(0, 1fr); margin-top: 18px; padding-top: 16px; border-top: 1px solid #2428211f; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.journey-end .gallery-credits ul { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 18px; }
.journey-end .caption-open { flex: none; align-self: flex-start; margin-top: 12px; }
@media (orientation: portrait) {
    .journey-end {
        top: auto; right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); left: max(12px, env(safe-area-inset-left, 0px));
        width: auto; max-width: 560px; height: auto; margin: 0 auto; padding: 20px 20px 6px; border-radius: 14px;
        /* The camera keeps the photograph's lower edge at about 48% of a portrait screen; the sheet stays below it. */
        max-height: min(calc(52% - 24px), 480px);
    }
    .journey-end h2 { font-size: clamp(30px, 9vw, 40px); }
    .journey-end .closing-statement { margin-top: 8px; font-size: 14px; line-height: 1.6; max-height: 4.8em; }
    /* Credits become one sideways row of small cards per group. */
    .journey-end .gallery-credits { margin: 14px -20px 0; padding: 12px 0 0; gap: 10px; overflow-x: hidden; }
    .journey-end .gallery-credits .eyebrow { padding: 0 20px; }
    .journey-end .gallery-credits ul { display: flex; gap: 8px; margin-top: 6px; padding: 0 20px 4px; overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
    .journey-end .gallery-credits ul::-webkit-scrollbar { display: none; }
    .journey-end .gallery-credits li { flex: 0 0 auto; width: min(64vw, 240px); padding: 9px 12px; border: 1px solid #2428211a; border-radius: 8px; background: #fffdf8; scroll-snap-align: start; }
    .journey-end .caption-open { margin-top: 4px; }
}
/* Small phones get a tighter sheet; credits that still overflow fade out at the bottom and scroll. */
@media (orientation: portrait) and (max-height: 700px) {
    .journey-end { padding: 16px 16px 4px; }
    .journey-end h2 { font-size: 28px; }
    .journey-end .closing-statement { margin-top: 6px; font-size: 13px; max-height: 3.2em; }
    .journey-end .gallery-credits { margin: 10px -16px 0; padding: 10px 0 14px; gap: 8px;
        -webkit-mask-image: linear-gradient(#000 calc(100% - 16px), transparent); mask-image: linear-gradient(#000 calc(100% - 16px), transparent); }
    .journey-end .gallery-credits .eyebrow { padding: 0 16px; }
    .journey-end .gallery-credits ul { padding: 0 16px 4px; scroll-padding-inline: 16px; }
    .journey-end .gallery-credits li { padding: 7px 10px; font-size: 13px; }
}
@media (orientation: landscape) and (max-height: 520px) {
    .journey-end { --end-top: calc(64px + env(safe-area-inset-top, 0px)); --end-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: clamp(260px, 36vw, 360px); padding: 16px 20px 6px; }
    .journey-end h2 { font-size: 32px; }
    .journey-end .closing-statement { margin-top: 6px; font-size: 13px; max-height: 3.2em; }
    .journey-end .gallery-credits { margin-top: 10px; padding-top: 10px; }
}

/* ------------------------------------------------------------------------
   Beyond the walls (2026-10): the screening room, the photo archive, the full
   invitation and Kirim Kado. Each opens as a page over the paused room.
   ------------------------------------------------------------------------ */
.stop-actions { position: absolute; left: 50%; right: auto; top: auto; bottom: max(6%, calc(22px + env(safe-area-inset-bottom, 0px))); transform: translateX(-50%);
    width: max-content; max-width: calc(100% - 32px); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; pointer-events: auto; }
.stop-actions .caption-open { min-height: 44px; margin: 0; padding: 0 18px; gap: 10px; border: 1px solid #24282133; border-radius: 999px;
    background: #f3f0e9d9; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 500 13px/1 var(--sans); letter-spacing: .02em; color: var(--ink); }
.stop-actions .caption-open span { font-size: 13px; }
/* Long addresses or many actions never run past a small phone's screen. */
.invitation-panel { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; padding: 8px; }

.page-dialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0;
    background: transparent; color: #262c23; overflow: hidden; }
.page-dialog::backdrop { background: #1d211b6b; }
.page-sheet { position: relative; display: flex; flex-direction: column; width: min(980px, 100%); height: 100%; margin-left: auto; background: #f4f0e7; box-shadow: -18px 0 70px #1c201529; }
.invitation-dialog .page-sheet { width: min(640px, 100%); }
.page-heading { position: relative; flex-shrink: 0; padding: max(26px, env(safe-area-inset-top, 0px)) 76px 18px 42px; border-bottom: 1px solid #96968255; }
.page-heading .eyebrow { color: #505745; font-size: 11px; letter-spacing: .13em; }
.page-heading h2 { font: 450 clamp(28px, 2.6vw, 40px)/1.08 var(--serif); margin-top: 8px; overflow-wrap: anywhere; }
.page-close { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: 20px; width: 44px; height: 44px; font: 300 32px/1 var(--sans); }
.page-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 24px 42px 36px; }
.page-foot { flex-shrink: 0; display: flex; justify-content: flex-end; padding: 8px 42px max(8px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid #74796655; background: #edeadf; }
.page-foot button { min-height: 44px; font: 500 13px/1.5 var(--sans); text-decoration: underline; text-underline-offset: 5px; }
.page-dialog :focus-visible { outline: 2px solid #53683f; outline-offset: 3px; }

/* The screening room: a darkened room, the stage, then the programme. */
.screening-dialog .page-sheet { width: 100%; background: #171a15; color: #f1ede2; box-shadow: none; }
.screening-dialog .page-heading { border-color: #f1ede21f; }
.screening-dialog .page-heading .eyebrow, .screening-programme .eyebrow { color: #c9c6b4; }
.screening-dialog .page-foot { background: #11130f; border-color: #f1ede21f; }
.screening-dialog .page-foot button { color: #f1ede2; }
.screening-dialog :focus-visible { outline-color: #f1ede2; }
.screening-body { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; padding-top: 20px; }
.screening-stage { position: relative; flex-shrink: 0; width: min(100%, 1120px); width: min(100%, 1120px, calc((100dvh - 250px) * 16 / 9)); aspect-ratio: 16 / 9; background: #0e100c; }
.screening-stage:empty::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, #2c3128, #0e100c); }
.screening-body:has(.screening-programme:not([hidden])) .screening-stage { width: min(100%, 1120px, calc((100dvh - 440px) * 16 / 9)); }
.screening-programme { width: min(100%, 1120px); }
.screening-programme .eyebrow { font-size: 11px; margin-bottom: 12px; }
.screening-programme .film-title { color: #d8d5c5; }
.screening-programme .film-list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.screening-programme .film-item[data-selected] .film-frame { outline: 2px solid #343c2b; outline-offset: 3px; }
.screening-programme .film-play span:last-child { display: none; }
.screening-programme .film-play { padding: 0; width: 48px; }
.screening-link { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 18px; color: #f3efe4; }
.screening-link .film-poster { position: absolute; inset: 0; opacity: .45; }
.screening-link .caption-open { position: relative; z-index: 1; color: #f3efe4; border-color: #f3efe499; padding: 0 18px; border: 1px solid #f3efe499; border-radius: 999px; background: #1d211bb3; }

/* Films, in the screening room and in the still edition. */
.film-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 26px; }
.still-screening .film-list:has(> :only-child) { grid-template-columns: minmax(0, 760px); }
.film-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1d211b; }
.film-poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.film-poster--type { display: grid; place-items: center; padding: 12px; background: radial-gradient(circle, #3a3f35, #191c17); color: #f3efe4; font: italic 22px/1.2 var(--serif); text-align: center; overflow-wrap: anywhere; }
.film-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-width: 48px; min-height: 48px; padding: 0 20px; border-radius: 999px; background: #f4f0e7e6; color: #20251f; font: 600 13px/1 var(--sans); letter-spacing: .04em; box-shadow: 0 6px 24px #0005; }
.film-play__icon { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.film-link { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
    background: #f4f0e7e6; color: #20251f; font: 600 13px/1 var(--sans); }
.film-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.film-title { margin-top: 10px; font: 500 14px/1.45 var(--sans); color: var(--text-secondary); overflow-wrap: anywhere; }
.still-screening { max-width: 1150px; margin: 90px auto 110px; scroll-margin-top: 130px; }
.still-screening h2 { font: 450 clamp(34px, 4vw, 54px)/1.1 var(--serif); margin: 16px 0 30px; }

/* The photo archive and the stories without a wall. */
.archive-dialog .page-sheet { width: min(1100px, 100%); }
.archive-photos + .archive-stories { margin-top: 38px; padding-top: 26px; border-top: 1px solid #787d684d; }
.archive-stories h3, .archive-photos h3 { font: 450 26px/1.2 var(--serif); margin-bottom: 16px; }
.archive-count { font: 500 13px/1 var(--sans); letter-spacing: .08em; color: #5b6250; margin-left: 8px; vertical-align: middle; }
.archive-story-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.archive-story { display: grid; grid-template-columns: minmax(0, 150px) 1fr; gap: 18px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid #787d6833; }
.archive-story.archive-story--text { grid-template-columns: 1fr; }
.archive-story img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #dedccf; }
.archive-story h4 { font: 450 24px/1.15 var(--serif); margin: 4px 0 8px; overflow-wrap: anywhere; }
.archive-story__text > p:not(.eyebrow) { font: 400 15px/1.7 var(--sans); color: var(--text-secondary); white-space: pre-line; overflow-wrap: anywhere; }
.archive-story .eyebrow { font-size: 11px; }
.archive-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.archive-thumb { display: block; aspect-ratio: 1; overflow: hidden; background: #dedccf; }
.archive-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.archive-thumb:hover img { transform: scale(1.03); }
.archive-thumb--empty { display: grid; place-items: center; font: italic 18px var(--serif); color: #5b6250; }
.archive-thumb:focus-visible { outline: 2px solid #343c2b; outline-offset: 2px; }
.archive-viewer { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 16px 42px max(14px, env(safe-area-inset-bottom, 0px)); background: #1b1f19; color: #f3efe4; }
.archive-viewer figure { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.archive-viewer img { max-width: 100%; max-height: calc(100% - 40px); object-fit: contain; touch-action: pan-y pinch-zoom; user-select: none; }
.archive-viewer figcaption { font: 500 13px/1.5 var(--sans); letter-spacing: .04em; color: #d8d5c5; }
.archive-viewer__controls { display: flex; justify-content: center; gap: 10px; padding-top: 10px; }
.archive-viewer__controls button { min-width: 48px; min-height: 48px; padding: 0 18px; border: 1px solid #f3efe455; border-radius: 999px; font: 500 14px/1 var(--sans); color: #f3efe4; }
.archive-viewer :focus-visible { outline-color: #f3efe4; }
.still-archive { max-width: 1150px; margin: 60px auto 110px; }

/* The full invitation dialog reuses the still edition's facts. */
.invitation-dialog-body { color: #20251f; }
.invitation-dialog .invitation-names { font-size: clamp(32px, 4vw, 44px); }
.invitation-dialog .invitation-timeline { margin-top: 30px; }

/* The guests' health reminders: the wedding hall's tablet, read in full. Its double rule
   echoes the bronze rim of the tablet on the hero relief. */
.invitation-health { margin: 4px 0 0; padding: 30px 34px 24px; border: 1px solid #7d735f73; outline: 1px solid #7d735f38; outline-offset: -7px; background: #ebe7dc; color: #20251f; }
.invitation-panel .invitation-health { border: 0; outline: 0; }
.invitation-health .eyebrow { font-size: 11px; letter-spacing: .15em; color: #505745; }
.invitation-health-title { font: 450 clamp(28px, 3vw, 38px)/1.1 var(--serif); letter-spacing: -.01em; margin: 8px 0 10px; overflow-wrap: anywhere; }
.invitation-health-description { font: 450 15px/1.65 var(--sans); color: #30362d; max-width: 52ch; overflow-wrap: anywhere; }
.invitation-health-list { list-style: none; margin: 18px 0 0; padding: 0; }
.invitation-health-list li { display: grid; grid-template-columns: 2.1em minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid #85877766; }
.invitation-health-number { font: italic 21px/1 var(--serif); color: #505745; }
.invitation-health-list p { max-width: 68ch; font: 500 15px/1.6 var(--sans); color: #20251f; overflow-wrap: anywhere; }
@media (max-width: 767px) {
    .invitation-health { padding: 24px 20px 16px; }
    .invitation-health-title { font-size: 28px; }
    .invitation-health-list li { column-gap: 10px; padding: 10px 0; }
    .invitation-health-number { font-size: 19px; }
}

/* Kirim Kado, after the accounts. */
.gift-delivery[data-after-accounts] { margin-top: 34px; padding-top: 26px; border-top: 1px solid #787d684d; }
.guestbook-gifts .gift-delivery > h3 { font: 450 28px/1.2 var(--serif); margin-bottom: 12px; }
.guestbook-gifts .gift-delivery > p, .still-gifts .gift-delivery > p { font: 400 15px/1.7 var(--sans); max-width: 44ch; margin-bottom: 20px; }
.still-gifts .gift-delivery > h2 { font: 450 clamp(30px, 3.4vw, 44px)/1.1 var(--serif); margin: 0 0 14px; }
.gift-address__name { font: 500 20px/1.35 var(--serif); margin: 6px 0 2px; color: var(--ink); overflow-wrap: anywhere; }
.gift-address__phone a { font: 500 15px/1.6 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.gift-address__address { font: 400 15px/1.65 var(--sans); font-style: normal; color: #30362d; margin-top: 6px; overflow-wrap: anywhere; }
.gift-address__note { font: italic 400 14px/1.6 var(--sans); color: #4a5240; margin-top: 8px; }

/* Five shortcuts still fit one row on a small phone: the row scrolls. */
.still-toc { overflow-x: auto; justify-content: safe center; scrollbar-width: none; }
@supports not (justify-content: safe center) { .still-toc { justify-content: flex-start; } }
.still-toc::-webkit-scrollbar { display: none; }
.still-toc a { flex-shrink: 0; }
/* The first room heading would otherwise sit on the shortcut bar's rule. */
.still-toc + .still-room-heading { margin-top: 48px; }

@media (max-width: 767px) {
    .page-heading { padding: max(20px, env(safe-area-inset-top, 0px)) 64px 14px 7%; }
    .page-heading h2 { font-size: 28px; }
    .page-close { right: 10px; }
    .page-body { padding: 20px 7% 30px; }
    .page-foot { padding-left: 7%; padding-right: 7%; }
    .screening-body { justify-content: flex-start; padding-left: 0; padding-right: 0; }
    .screening-programme { padding: 0 7% 10px; }
    .screening-programme .film-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .archive-story:not(.archive-story--text) { grid-template-columns: minmax(0, 96px) 1fr; gap: 14px; }
    .archive-story h4 { font-size: 21px; }
    .archive-viewer { padding: 12px 4% max(12px, env(safe-area-inset-bottom, 0px)); }
    .still-screening { margin: 60px auto 80px; }
    .film-list { gap: 20px; }
    .still-toc { justify-content: safe center; gap: 6px; padding-inline: 10px; }
    .still-toc a { padding-inline: 10px; }
}

/* The wedding organizer that ordered the invitation, under the credits. */
.gallery-credits__maker { margin: 0; color: var(--text-muted); font-size: 12px; letter-spacing: .04em; }
@media (orientation: portrait) { .journey-end .gallery-credits__maker { padding: 0 20px; } }
@media (orientation: portrait) and (max-height: 700px) { .journey-end .gallery-credits__maker { padding: 0 16px; } }