@font-face { font-family: "DM Sans"; src: url("/assets/fonts/dm-sans-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/DMSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/DMSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/DMSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PP Monument"; src: url("/assets/fonts/pp-monument-extended-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
/* the signature faces (4 Nov: guests sign their own painting): Allura for Latin, its Latin Extended set for names such as
   Şükrü or Łucja, and Aref Ruqaa (OFL) for a name written in Arabic: Ruqʿah is the hand Arabic is written in every day,
   the natural counterpart of a signature. Each file loads only when a name needs it (unicode-range). */
@font-face { font-family: "Allura"; src: url("/assets/fonts/allura-latin-400-normal.woff2") format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Allura"; src: url("/assets/fonts/allura-latin-ext-400-normal.woff2") format("woff2"); font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Aref Ruqaa"; src: url("/assets/fonts/aref-ruqaa-arabic-400-normal.woff2") format("woff2"); font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  --ivory: #F4F0E9; --paper: #FBF8F3; --burgundy: #43150F; --wine: #5A1F1D; --deep: #2B0C0A;
  --ink: #342D2B; --mute: #796F69; --line: #DACCC1; --line-soft: #E9E0D6; --gold: #B08A5A;
  --sans: "DM Sans", -apple-system, "Segoe UI", sans-serif; --serif: "Cormorant", Georgia, serif;
  --radius: 14px; --pad: 22px; --safe-b: env(safe-area-inset-bottom, 0px);
  --bar-top: calc(24px + env(safe-area-inset-top, 0px)); --mark-h: 33px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; min-height: 100dvh; }
a { color: inherit; }
button { font: inherit; }
img { display: block; max-width: 100%; }

.app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--ivory); position: relative; }
@media (min-width: 560px) { body { background: #E8E1D7; } .app { box-shadow: 0 0 0 1px rgba(67,21,15,.08), 0 20px 60px rgba(67,21,15,.12); } }

.screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* the reveal screens sit on the red silk from the concept deck. silk-reveal.jpg is the generated full-resolution one;
   silk-reveal-brief.jpg is the fabric cut straight out of the deck's phone mockup, if that exact one is wanted. */
:root { --silk: url("/assets/img/silk-reveal.jpg"); }
/* The silk runs through the whole journey (11 Nov, Emmad: "Silk for all of them"). The red pages (journey, rooms,
   element, host card) lie on the same silk brought down to the burgundy (silk-soft.jpg: #43150F on average, plain at
   its top and bottom edge, so it repeats down a long page without a seam and never rescales when a page grows), half
   covered by the flat red: the colour and the words' contrast stay as they were. The first page carries the silk as
   a pale veil drifting over the stone (.veil, below). tools/make_silk.py draws the three pictures from silk-reveal.jpg.
   --red-flat: how much flat burgundy lies over the silk (1 = the flat red of before, 0 = the silk plainly).
   --veil: the veil's strength on the first page (0 = none). */
:root { --silk-soft: url("/assets/img/silk-soft.jpg"); --red-flat: .5; --veil: .5;
  --red-ground: linear-gradient(rgba(67,21,15,var(--red-flat)), rgba(67,21,15,var(--red-flat))), var(--burgundy) var(--silk-soft) center top / 100% auto repeat-y; }
.screen.dark { position: relative; isolation: isolate; background: #2B0C0A var(--silk) center / cover no-repeat; color: var(--ivory); }
.screen.dark::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(43,12,10,.08) 0%, rgba(43,12,10,.26) 38%, rgba(43,12,10,.26) 64%, rgba(43,12,10,.10) 100%); }
.dark .reveal-word, .dark .reveal-name, .dark .lead, .dark .display { text-shadow: 0 1px 14px rgba(28,8,6,.45); }
.screen.dark .brand, .screen.dark .mark, .screen.dark .eyebrow { color: #D9C6BC; }
.content { padding: 0 var(--pad) calc(28px + var(--safe-b)); flex: 1; display: flex; flex-direction: column; }
.center { text-align: center; align-items: center; }
.grow { flex: 1; }

/* the top bar (10 Nov): the back disc (40px) and the mark share one centre line, 44px below the top of every screen */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--bar-top) var(--pad) 6px; min-height: calc(var(--bar-top) + 46px); }
.brand { font-family: "PP Monument", var(--sans); font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--burgundy); font-weight: 300; text-decoration: none; }
.brand.lg { font-size: 15px; }
.iconbtn { width: 40px; height: 40px; border: 0; background: transparent; color: var(--burgundy); border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; }
.iconbtn:active { background: rgba(67,21,15,.08); }
.dark .iconbtn { color: var(--ivory); }
.rule { width: 36px; height: 1px; background: var(--line); margin: 10px auto; }
.dark .rule { background: rgba(244,240,233,.4); }

.eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--mute); font-weight: 500; }
.eyebrow.burgundy { color: var(--burgundy); font-weight: 600; }
h1, h2, h3 { margin: 0; font-weight: 400; color: var(--burgundy); }
.display { font-family: var(--serif); font-weight: 500; font-size: 38px; line-height: 1.08; letter-spacing: -.005em; }
.display.sm { font-size: 30px; }
.lead { font-size: 17px; line-height: 1.5; color: var(--ink); margin: 0; }
.muted { color: var(--mute); }
.small { font-size: 13px; line-height: 1.5; }
.dark h1, .dark h2 { color: var(--ivory); }
.dark .lead { color: #EADFD6; }
.dark .muted { color: #C9B6AD; }
p { margin: 0; }
.stack > * + * { margin-top: 14px; }
.stack.lg > * + * { margin-top: 22px; }

.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 14px 22px; border-radius: 13px; border: 1.5px solid transparent; background: var(--burgundy); color: var(--ivory); font-size: 16px; font-weight: 500; cursor: pointer; text-decoration: none; transition: transform .08s ease, background .2s ease; }
.btn:active { transform: scale(.985); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn.ghost { background: transparent; color: var(--burgundy); border-color: var(--line); }
.btn.light { background: var(--ivory); color: var(--burgundy); }
.btn.pill { border-radius: 999px; }
.btn .arrow { margin-left: auto; }
.linkbtn { background: none; border: 0; color: var(--burgundy); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; cursor: pointer; padding: 10px; }
.dark .linkbtn { color: var(--ivory); }

.field { display: block; }
.field span { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0 0 6px 2px; }
.field input { width: 100%; min-height: 56px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); padding: 0 16px; font: inherit; font-size: 17px; color: var(--ink); outline: none; }
.field input:focus { border-color: var(--burgundy); }
.error { color: #8E1B1B; font-size: 14px; }

.hero { position: relative; aspect-ratio: 4 / 3.1; overflow: hidden; background: #D8CFC3; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero.tall { aspect-ratio: 4 / 4.4; }
.hero .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43,12,10,.18) 0%, rgba(43,12,10,0) 35%, rgba(43,12,10,.55) 100%); }
.hero .over { position: absolute; left: var(--pad); right: var(--pad); bottom: 22px; color: var(--ivory); }
.hero .over .eyebrow { color: #E7D9D0; }
.hero .over h2 { color: var(--ivory); font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1.08; margin-top: 8px; }
.hero .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.hero .topbar .brand, .hero .topbar .iconbtn { color: var(--ivory); }

/* ---- the entry screens and the drink screens, after the concept deck (slides 3, 6 and 17) ---- */
/* the mark is set in PP Monument Extended Light, the face of the Chedi Private Residences wordmark in the brand pack.
   One mark for the whole app (10 Nov): "MY CHEDI" in the same box, 151 x 33 px, at the same place on every screen:
   over photographs, on the silk, on burgundy and on paper. Only its tint follows what is behind it. */
.mark { position: relative; flex: none; display: block; width: max-content; height: var(--mark-h); margin: 0 auto; padding: 9px 18px 10px; border: 1px solid transparent; border-radius: 999px;
  font-family: "PP Monument", var(--sans); font-size: 12px; font-weight: 300; line-height: 1; letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; white-space: nowrap; text-align: center; text-decoration: none; color: var(--burgundy); }
.mark::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 26px; height: 1px; margin-left: -13px; background: currentColor; opacity: .6; }
.invite { position: relative; height: clamp(300px, 48vh, 470px); height: clamp(300px, 48dvh, 470px); overflow: hidden; background: #E6DFD4; }
.invite img, .stage-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.invite .mark, .stage-photo > .mark { position: absolute; top: calc(var(--bar-top) + (40px - var(--mark-h)) / 2); left: 50%; transform: translateX(-50%); z-index: 2; }
/* the warm stone rising from the bottom of the invitation: the deck's own travertine (slide 3, text removed), covering
   the whole section so its warm ivory top meets the photo as in the mockup. tools/make_stone.py is a procedural stand-in. */
.entry { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px var(--pad) calc(26px + var(--safe-b));
  background: #EDE5D9 url("/assets/img/stone.jpg") center bottom / cover no-repeat; position: relative; isolation: isolate; }
/* the silk as a pale veil over the stone, behind the words (11 Nov): two folds drifting through each other, light
   where they catch it, a warm shade where they turn away; it thins out under the photograph. It stands still for a
   guest whose phone asks for less motion. A browser that cannot show the pictures shows the stone as before. */
.veil { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: var(--veil);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 70px); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 70px); }
.veil i { position: absolute; left: 50%; top: 50%; width: 620px; height: 700px; margin: -350px 0 0 -310px; background: center / 100% 100% no-repeat; will-change: transform, opacity; }
.veil i:first-child { background-image: url("/assets/img/veil-a.webp"); animation: veil-one 17s ease-in-out infinite alternate; }
.veil i:last-child { background-image: url("/assets/img/veil-b.webp"); animation: veil-two 23s ease-in-out infinite alternate; }
@keyframes veil-one { from { transform: translate3d(-71px, -28px, 0) scale(1.02) rotate(-2deg); opacity: 1; } to { transform: translate3d(5px, -58px, 0) scale(1.13) rotate(2.5deg); opacity: .3; } }
@keyframes veil-two { from { transform: translate3d(69px, 24px, 0) scale(1.12) rotate(2deg); opacity: .2; } to { transform: translate3d(-3px, 60px, 0) scale(1) rotate(-2.5deg); opacity: .95; } }
@media (prefers-reduced-motion: reduce) {
  .veil i:first-child { animation: none; transform: translate3d(-33px, -43px, 0) scale(1.07); opacity: .65; }
  .veil i:last-child { animation: none; transform: translate3d(33px, 42px, 0) scale(1.06); opacity: .55; }
}
.eyebrow.tracked { font-size: 11px; letter-spacing: .34em; text-indent: .34em; font-weight: 400; color: var(--ink); }
.eyebrow.tracked.faint { font-size: 10px; color: var(--mute); margin-top: 10px; }
.eyebrow.tracked.ivory { color: #E7D9D0; }
.hairline { width: 34px; height: 1px; background: var(--burgundy); opacity: .55; margin: 16px auto; flex: none; }
.hairline.ivory { background: var(--ivory); }
.title { font-family: var(--sans); font-weight: 300; font-size: 44px; line-height: 1.06; letter-spacing: -.012em; color: var(--burgundy); }
.question { font-family: var(--sans); font-weight: 300; font-size: 21px; line-height: 1.3; color: var(--burgundy); }
.btn.caps { border-radius: 16px; font-size: 12.5px; letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; font-weight: 500; min-height: 54px; width: min(100%, 310px); }
.btn.caps .arr { font-weight: 300; font-size: 16px; letter-spacing: 0; text-indent: 0; margin-left: -4px; }
.photo-card { border-radius: 4px; overflow: hidden; aspect-ratio: 1.21; background: #E6DFD4; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; }
.welcome h1 { font-family: var(--sans); font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--burgundy); letter-spacing: -.01em; }
.welcome .lead { margin-top: 8px; font-size: 17px; }
.field.quiet input { border-radius: 8px; border: 1px solid var(--line); background: var(--paper); min-height: 58px; }
.field.quiet input::placeholder { color: #9C9089; }
.stage { background: var(--red-ground); color: var(--ivory); }
.stage-photo { position: relative; height: clamp(230px, 42vh, 400px); height: clamp(230px, 42dvh, 400px); overflow: hidden; background: #E6DFD4; flex: none; }
.stage-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(67,21,15,0) 76%, rgba(67,21,15,.7) 91%, var(--burgundy) 100%); }
/* over the silk (11 Nov) the photograph itself thins out, by the same measures, so the silk shows through where the
   photograph ends (over a flat red the two look alike); a browser without masks keeps the red fade above */
@supports ((-webkit-mask-image: linear-gradient(#000, #000)) or (mask-image: linear-gradient(#000, #000))) {
  .stage-photo { background: transparent; }
  .stage-photo::after { display: none; }
  .stage-photo img { -webkit-mask-image: linear-gradient(180deg, #000 76%, rgba(0,0,0,.3) 91%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, #000 76%, rgba(0,0,0,.3) 91%, rgba(0,0,0,0) 100%); }
}
.stage-photo > .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.stage-photo .iconbtn { color: var(--burgundy); }
.stage-body { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px var(--pad) calc(26px + var(--safe-b)); }
.stage-body .hairline { margin: 14px auto; }
.serif-title { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.1; color: var(--ivory); }
.serif-name { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1; color: var(--ivory); }
.stage .reveal-word { font-size: 44px; }
.stage .btn.light { border-radius: 999px; margin-top: 22px; }
.stage .linkbtn { color: var(--ivory); margin-top: 6px; }
.stage .drinklist { width: 100%; text-align: left; margin-top: 8px; }
.stage .drinklist .row { border-bottom-color: rgba(244,240,233,.18); }
.stage .placeholder { vertical-align: baseline; }

.card { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px; }
.card.flat { background: transparent; border-color: var(--line); }
.option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 16px 20px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--ivory); color: var(--ink); font-size: 17px; text-align: left; cursor: pointer; transition: all .15s ease; }
.option.selected { background: var(--wine); border-color: var(--wine); color: var(--ivory); }
.option .tick { width: 18px; height: 14px; flex: none; opacity: 0; }
.option.selected .tick { opacity: 1; }

.chapter { display: block; position: relative; border-radius: var(--radius); overflow: hidden; background: #2B1512; color: var(--ivory); text-decoration: none; min-height: 150px; }
.chapter img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.chapter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(43,12,10,.86) 0%, rgba(43,12,10,.55) 55%, rgba(43,12,10,.15) 100%); }
.chapter .in { position: relative; z-index: 1; padding: 16px 18px; display: flex; flex-direction: column; min-height: 150px; }
.chapter .eyebrow { color: #E2D1C8; }
.chapter h3 { color: var(--ivory); font-size: 20px; font-weight: 400; margin-top: 4px; line-height: 1.2; }
.chapter .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #E7D9D0; }
.chapter .foot .state { display: inline-flex; align-items: center; gap: 6px; }
.chapter.done::after { background: linear-gradient(90deg, rgba(43,12,10,.9) 0%, rgba(43,12,10,.7) 100%); }
.chapter.next { outline: 2px solid var(--gold); outline-offset: 2px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgba(244,240,233,.14); color: var(--ivory); }
.badge.gold { background: var(--gold); color: #2B1512; }
.badge.ivory { background: var(--ivory); color: var(--burgundy); }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin: 0 0 18px; }
.tabs button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 6px; font-size: 15px; color: var(--mute); cursor: pointer; margin-bottom: -1px; }
.tabs button.active { color: var(--burgundy); border-bottom-color: var(--burgundy); }

.progress { display: flex; gap: 6px; }
.progress i { flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
.progress i.on { background: var(--burgundy); }

.reveal-word { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 14vw, 64px); letter-spacing: .22em; text-indent: .22em; color: var(--ivory); line-height: 1; max-width: 100%; }
.reveal-name { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: #D9C6BC; }

.moment { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); text-align: left; cursor: pointer; font: inherit; }
.moment .title, .moment .sub { display: block; }
.moment.on { border-color: var(--burgundy); }
.moment .title { font-size: 15px; color: var(--burgundy); font-weight: 500; }
.moment .sub { font-size: 13px; color: var(--mute); margin-top: 2px; }
.heart { width: 22px; height: 22px; flex: none; }

.drinklist { display: grid; gap: 10px; }
.drinklist .row { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.drinklist .row .el { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--burgundy); font-weight: 600; }
.drinklist .row .nm { color: var(--ink); }
.drinklist .row .nt { color: var(--mute); font-size: 13px; }

.framewrap { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px; display: grid; place-items: center; }
.framewrap canvas { width: 100%; max-width: 340px; height: auto; box-shadow: 0 14px 34px rgba(60,25,20,.22), 0 2px 6px rgba(60,25,20,.15); }
.note { font-size: 13px; color: var(--mute); line-height: 1.5; }
.placeholder { display: inline-block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8E1B1B; border: 1px dashed #C9A3A3; border-radius: 6px; padding: 2px 7px; vertical-align: middle; }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); background: var(--burgundy); color: var(--ivory); padding: 12px 18px; border-radius: 999px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.2); z-index: 50; animation: fade .25s ease; }
.spinner { width: 28px; height: 28px; border: 3px solid rgba(67,21,15,.15); border-top-color: var(--burgundy); border-radius: 50%; animation: spin .8s linear infinite; }
.dark .spinner { border-color: rgba(244,240,233,.2); border-top-color: var(--ivory); }
@keyframes spin { to { transform: rotate(360deg); } }
.plan { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); background: var(--paper); }
.plan img { width: 100%; height: auto; }
.list { display: grid; gap: 10px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.kv b { font-weight: 500; color: var(--burgundy); }
.hostnote { font-size: 12px; color: var(--mute); text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.fallback { position: fixed; left: 50%; bottom: calc(16px + var(--safe-b)); transform: translateX(-50%); width: min(440px, calc(100% - 24px)); background: var(--burgundy); color: var(--ivory); border-radius: 16px; padding: 16px 18px; box-shadow: 0 14px 40px rgba(0,0,0,.3); z-index: 60; animation: fade .3s ease; }
.fallback .small { color: #EADFD6; margin-bottom: 12px; }
.fallback .btn.light { min-height: 48px; }
.fallback .linkbtn { color: #EADFD6; width: 100%; }

/* ---- glass controls (3 Nov): the floating controls that sit over photography and the silk, as frosted glass in the
   spirit of iOS 26's Liquid Glass: the back disc, the mark's capsule, the toast and the venue-fallback card. The pages
   themselves keep the deck's paper, stone and burgundy. On by default (html.glass, see app.js; ?glass=0 for the flat look). ---- */
.glass .hero .topbar .iconbtn, .glass .stage-photo .iconbtn, .glass .screen.dark .iconbtn, .glass .topbar .iconbtn[data-go] {
  background: rgba(255,255,255,.28); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(67,21,15,.06), 0 4px 14px rgba(43,12,10,.14); color: var(--burgundy); }
.glass .hero .topbar .iconbtn, .glass .screen.dark .iconbtn { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.38); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 4px 14px rgba(0,0,0,.18); color: var(--ivory); }
.glass .iconbtn:active { transform: scale(.94); }
.glass .mark { background: rgba(255,255,255,.26); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  border-color: rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(43,12,10,.12); }
.glass .mark::after { display: none; }
.glass .screen.dark .mark { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 14px rgba(0,0,0,.16); }
.glass .toast { background: rgba(43,12,10,.62); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 30px rgba(0,0,0,.25); }
.glass .fallback { background: rgba(43,12,10,.72); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); border: 1px solid rgba(255,255,255,.2); }
.glass .btn { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.12); }
.glass .btn.light, .glass .btn.ghost { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 2px 10px rgba(43,12,10,.08); }

/* ---- the journey page and the room pages after the deck (slide 17, screens 05 and 07; 3 Nov) ---- */
.screen.night { background: var(--red-ground); }
.screen.night::before { display: none; }
.night .title.ivory, .title.ivory { color: var(--ivory); }
.title.sm { font-size: 32px; }
.night .muted, .night .note { color: #C9B6AD; }
.night .tabs { border-bottom-color: rgba(244,240,233,.18); }
.night .tabs button { color: #C9B6AD; }
.night .tabs button.active { color: var(--ivory); border-bottom-color: var(--ivory); }
.night .progress i { background: rgba(244,240,233,.22); }
.night .progress i.on { background: var(--ivory); }
.night .chapter { box-shadow: 0 0 0 1px rgba(244,240,233,.14), 0 10px 30px rgba(0,0,0,.22); }
.night .chapter::after { background: linear-gradient(180deg, rgba(43,12,10,.82) 0%, rgba(43,12,10,.36) 44%, rgba(43,12,10,.1) 68%, rgba(43,12,10,.7) 100%); }
.night .chapter img { opacity: 1; }
.night .chapter.done::after { background: linear-gradient(180deg, rgba(43,12,10,.86) 0%, rgba(43,12,10,.62) 50%, rgba(43,12,10,.8) 100%); }
.night .chapter.next { outline-color: var(--gold); }
.night .btn.ghost { color: var(--ivory); border-color: rgba(244,240,233,.4); }
.night .linkbtn { color: var(--ivory); }
.night .plan { background: rgba(244,240,233,.06); border-color: rgba(244,240,233,.16); }
.night .note a { color: var(--ivory); }
.stage-photo.room { height: clamp(220px, 44vh, 420px); height: clamp(220px, 44dvh, 420px); }
.stage-photo.room img { object-position: center 50%; }
.chapter-wrap { background: var(--red-ground); display: flex; flex-direction: column; flex: none; }     /* the photograph and the chapter on one ground (11 Nov) */
.chapter-wrap.fill { flex: 1; }                        /* a page with nothing under its chapter: the red runs to the foot */
.chapter-block { color: var(--ivory); padding: 4px var(--pad) 30px; display: flex; flex-direction: column; gap: 12px; }
.chapter-block .lead { color: #EADFD6; }
.chapter-block .title { margin-top: 2px; }
.card.glassy { background: rgba(244,240,233,.08); border-color: rgba(244,240,233,.18); color: var(--ivory); margin-top: 4px; }
.card.glassy .lead { color: var(--ivory); }
.placeholder.dim { color: #F0C9C9; border-color: #A86A6A; }

/* ---- the sign step at the end of the questions (4 Nov): the lower right corner of the painting, its ivory mount on
   two sides, the guest's signature in it as it will be signed (Allura, rising 7°, 70 % opacity) */
.sign-corner { position: relative; width: 100%; max-width: 380px; aspect-ratio: 16 / 9.5; background: #F4EFE7; border-radius: 2px; overflow: hidden; container-type: inline-size;
  box-shadow: 0 18px 44px rgba(20,4,3,.38), inset 0 0 0 1px rgba(255,255,255,.4); }
.sign-canvas { position: absolute; left: 0; top: 0; right: 15%; bottom: 17%; background: #5A1A15 var(--silk) 35% 88% / 165% auto no-repeat;
  box-shadow: 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(0,0,0,.12); }
.sign-canvas::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(20,4,3,0) 45%, rgba(20,4,3,.22)); pointer-events: none; }
.sign-name { position: absolute; right: 9%; bottom: 15%; z-index: 1; display: inline-block; transform: rotate(-7deg); transform-origin: right bottom; white-space: nowrap;
  font-family: "Allura", "Aref Ruqaa", cursive; font-size: 44px; font-size: 14cqw; line-height: 1.1; color: #F6EEE2; opacity: .7; text-shadow: 0 1px 2.5px rgba(30,8,6,.45); }
.sign-field { width: 100%; max-width: 380px; }
.sign-field input { text-align: center; font-size: 19px; }
.sign-note { color: #D9C6BC; max-width: 320px; }

/* ---- the residence map in 3D (5 Nov): the Sales Centre as a white architect's model on the deck's travertine (the
   first page's stone, a shade deeper so the model stands off it), in the Residence tab. Pins: visited in wine, the
   next stop in gold with its callout, still to come in ivory. */
.res3d { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  background: radial-gradient(125% 100% at 50% 42%, rgba(110,78,58,0) 50%, rgba(80,52,38,.15) 100%), linear-gradient(rgba(110,78,58,.08), rgba(110,78,58,.08)),
    #E9DFD2 url("/assets/img/stone.jpg") center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(244,240,233,.16); }
.res3d canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y; outline: none; transition: opacity .6s ease; }
.res3d .wait { position: absolute; inset: 0; display: grid; place-items: center; }
.res3d-labels { position: absolute; left: 0; top: 0; pointer-events: none; }
.res3d-pin { width: 0; height: 0; }
.res3d-pin button { pointer-events: auto; font-family: var(--sans); -webkit-tap-highlight-color: transparent; }
.res3d-pin .dot { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1.5px solid var(--wine); background: var(--paper); color: var(--wine); font-size: 11.5px; font-weight: 600; line-height: 1; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(20,4,3,.35); }
.res3d-pin.is-done .dot { background: var(--wine); color: var(--ivory); border-color: rgba(244,240,233,.85); }
.res3d-pin.is-next .dot { left: -15px; top: -15px; width: 30px; height: 30px; background: var(--gold); color: #2B1512; border-color: #F1E3CC; font-size: 13px; box-shadow: 0 0 0 5px rgba(176,138,90,.3), 0 3px 10px rgba(20,4,3,.4); }
.res3d-pin.is-focus:not(.is-next) .dot { box-shadow: 0 0 0 4px rgba(244,240,233,.42), 0 2px 6px rgba(20,4,3,.35); }
.res3d-pin.is-moment .dot::after { content: "\2665"; position: absolute; right: -7px; top: -7px; width: 15px; height: 15px; border-radius: 50%; background: var(--deep); color: var(--gold); font-size: 9px; line-height: 15px; text-align: center; }
.res3d-pin .callout { position: absolute; left: 0; bottom: 18px; translate: calc(-50% + var(--dx, 0px)) 0; display: none; align-items: center; gap: 7px; white-space: nowrap; border: 0; border-radius: 10px; padding: 8px 11px; background: var(--paper); color: var(--burgundy); font-size: 13px; font-weight: 500; line-height: 1; box-shadow: 0 6px 18px rgba(20,4,3,.42); cursor: default; }
.res3d-pin .callout.is-go { cursor: pointer; }
.res3d-pin .callout.is-gold { background: var(--gold); color: #2B1512; }
.res3d-pin .callout::after { content: ""; position: absolute; left: calc(50% - var(--dx, 0px)); bottom: -4px; width: 9px; height: 9px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.res3d-pin.is-next .callout { bottom: 22px; }
.res3d-pin.is-below .callout { bottom: auto; top: 18px; }
.res3d-pin.is-next.is-below .callout { top: 22px; }
.res3d-pin.is-below .callout::after { bottom: auto; top: -4px; }
.res3d-pin.is-focus { z-index: 100 !important; }
.res3d-pin.is-focus .callout { display: inline-flex; }
.res3d-pin button:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; }
.res3d-tag, .res3d-hint, .res3d-reset { background: rgba(35,9,7,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #EDE3DC; }
.res3d-tag { pointer-events: none; font-size: 11px; font-weight: 500; line-height: 1; padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.res3d-hint { position: absolute; left: 10px; top: 10px; font-size: 12px; line-height: 1.2; padding: 6px 10px; border-radius: 8px; pointer-events: none; transition: opacity .5s ease; }
.res3d-hint.off { opacity: 0; }
.res3d-reset { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.res3d-reset.on { opacity: 1; pointer-events: auto; }
.res3d-bar { display: flex; justify-content: flex-end; margin: -4px 0 -6px; }
@media (prefers-reduced-motion: reduce) { .res3d canvas, .res3d-hint, .res3d-reset { transition: none; } }

/* ---------------------------------------------------------------- the rooms' codes (10 Nov, the client's event plan v6)
   A room's question opens with the four digits on the sign in that room (or the sign's QR). The code field sits on
   ivory under the room's burgundy chapter, where the question will be: one large field, digits only, sent as soon as
   the fourth is in. A journey card whose room is still closed is quieter than an open one. */
.stage-photo.room.short { height: clamp(140px, 24vh, 220px); height: clamp(140px, 24dvh, 220px); }
.chapter-block.tight { padding-bottom: 22px; gap: 8px; }
.lockpanel { text-align: center; }
.lockpanel.stack > * + * { margin-top: 12px; }
.lockpanel .lead { max-width: 330px; margin-left: auto; margin-right: auto; }
.codefield { display: block; }
.codefield input { display: block; width: 100%; max-width: 250px; margin: 0 auto; min-height: 70px; padding: 0 0 0 .42em; border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper);
  text-align: center; font: 500 34px/1 var(--sans); letter-spacing: .42em; color: var(--burgundy); font-variant-numeric: tabular-nums; caret-color: var(--burgundy); outline: none; }
.codefield input:focus { border-color: var(--burgundy); box-shadow: 0 0 0 3px rgba(67,21,15,.08); }
.codefield input::placeholder { color: #D2C8BE; }
.codefield.bad input { border-color: #8E1B1B; animation: nudge .3s ease; }
.error.center { text-align: center; }
@keyframes nudge { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .codefield.bad input { animation: none; } }
.chapter .lock { width: 12px; height: 14px; flex: none; }
.chapter.locked img { opacity: .62; filter: saturate(.7); }
.chapter.locked::after { background: linear-gradient(90deg, rgba(43,12,10,.9) 0%, rgba(43,12,10,.68) 55%, rgba(43,12,10,.38) 100%); }
/* a rehearsal guest's label (staff and reviewers), and the line about the framed print on the closing screens */
.tag { display: inline-block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid currentColor; opacity: .85; vertical-align: 1px; }
.stage .giftline { color: #E7D9D0; max-width: 310px; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(244,240,233,.2); }