@font-face { font-family: "Bevan"; src: url("../fonts/hotel/bevan-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "League Spartan"; src: url("../fonts/hotel/spartan-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "League Spartan"; src: url("../fonts/hotel/spartan-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Cutive Mono"; src: url("../fonts/hotel/cutive-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* GRAND HOTEL (theme key "hotel"): a pastel, perfectly symmetrical storybook hotel (original SVG facade). Intro: the lift
   in the lobby; tap to call it: the floor needle swings to the top, a bell flashes, the brass doors slide open. Cover:
   the hotel under a pastel sky, the couple's photo framed in brass like a lobby portrait, their names as the hotel's
   name, the date as check-in. Sections are numbered rooms (brass room plates), under striped awnings; the programme
   reads like a room-service menu with dotted leaders; venues are luggage tags; the closing is a door hanger.
   Type: Bevan (signage) · League Spartan (reading) · Cutive Mono (typed cards). */
:root {
  --bg: #fbeef0; --sky: #f6d9df; --paper: #fffaf6; --wall: #f2c4c9; --wall-2: #e9aab3; --trim: #fdf3ea; --roof: #7d4a6b; --glass: #b9a7c9; --path: #e3c9b5;
  --bush: #9db48f; --brass: #c9a24a; --accent: #b0405e; --accent-ink: #ffffff; --ink: #3d2433; --muted: #7a5d6b; --line: rgba(61, 36, 51, .16);
  --display: "Bevan", Georgia, serif; --text: "League Spartan", "Futura", "Helvetica Neue", Arial, sans-serif; --mono: "Cutive Mono", "Courier New", monospace;
  --radius: 14px; --maxw: 520px;
}
body { font-family: var(--text); font-size: 1.05rem; background: var(--bg); color: var(--ink); }
.t-hotel .inv { counter-reset: room 100; }

/* ---------- intro: the lift ---------- */
.ht-intro { --intro-ms: 2500; overflow: hidden; background: repeating-linear-gradient(90deg, var(--bg) 0 22px, color-mix(in srgb, var(--wall) 55%, var(--bg)) 22px 44px); transition: opacity .6s ease 1.9s, visibility 0s linear 2.5s; }
.ht-start { display: grid; justify-items: center; gap: 20px; padding: 20px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.ht-for { font: 400 1.3rem var(--display); } .ht-for b { font-weight: 400; color: var(--accent); }
.ht-lift { position: relative; display: grid; justify-items: center; gap: 12px; padding: 18px 18px 0; border-radius: 120px 120px 0 0; background: var(--roof); box-shadow: 0 0 0 6px var(--brass), 0 30px 40px -24px rgba(60, 20, 40, .6); }
.ht-dial { position: relative; width: 130px; height: 66px; border-radius: 66px 66px 0 0; background: var(--trim); box-shadow: inset 0 0 0 4px var(--brass); overflow: hidden; }
.ht-floors i { position: absolute; font: 400 .72rem var(--display); font-style: normal; color: var(--roof); }
.ht-floors i:nth-child(1) { left: 14px; bottom: 6px; } .ht-floors i:nth-child(2) { left: 26px; top: 20px; } .ht-floors i:nth-child(3) { left: 59px; top: 8px; } .ht-floors i:nth-child(4) { right: 26px; top: 20px; } .ht-floors i:nth-child(5) { right: 13px; bottom: 5px; color: var(--accent); }
.ht-needle { position: absolute; left: 63px; bottom: 0; width: 4px; height: 50px; border-radius: 2px; background: var(--accent); transform-origin: 50% 100%; transform: rotate(-78deg); transition: transform 1.1s cubic-bezier(.4, 1.4, .5, 1) .1s; }
.ht-needle::after { content: ""; position: absolute; left: -5px; bottom: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--brass); }
.ht-doors { position: relative; display: block; width: min(64vw, 240px); aspect-ratio: .66; overflow: hidden; background: color-mix(in srgb, var(--wall) 70%, #fff); box-shadow: inset 0 0 0 4px var(--brass); }
.ht-door { position: absolute; top: 4px; bottom: 0; width: calc(50% - 4px); background: linear-gradient(90deg, color-mix(in srgb, var(--brass) 70%, #fff), var(--brass) 40%, color-mix(in srgb, var(--brass) 75%, #000)); transition: transform 1s cubic-bezier(.6, 0, .3, 1) 1.15s; }
.ht-door.is-l { left: 4px; box-shadow: inset -2px 0 0 rgba(0, 0, 0, .25); } .ht-door.is-r { right: 4px; transform: scaleX(-1); }
.ht-plate { position: absolute; left: 50%; top: 40%; z-index: 2; padding: 6px 12px; transform: translateX(-50%); border-radius: 6px; background: var(--roof); color: var(--trim); font: 400 1.05rem var(--display); white-space: nowrap; transition: opacity .3s ease 1.1s; }
.ht-plate i { font-style: normal; font-size: .7em; margin: 0 .1em; }
.ht-call { position: absolute; right: -34px; top: 56%; width: 18px; height: 18px; border-radius: 50%; background: var(--trim); box-shadow: 0 0 0 4px var(--brass), 0 0 0 0 rgba(255, 220, 140, .6); animation: ht-glow 1.6s ease-in-out infinite; }
@keyframes ht-glow { 50% { box-shadow: 0 0 0 4px var(--brass), 0 0 0 10px rgba(255, 220, 140, 0); background: #ffe7a8; } }
.ht-tap { font: 600 .74rem var(--text); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.is-opening .ht-needle { transform: rotate(78deg); }
.is-opening .ht-door.is-l { transform: translateX(-104%); } .is-opening .ht-door.is-r { transform: scaleX(-1) translateX(-104%); }
.is-opening .ht-plate { opacity: 0; }
.is-opening .ht-call { animation: none; background: #ffe7a8; }
.is-opening .ht-tap, .is-opening .ht-for { opacity: 0; transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) { .ht-call { animation: none; } }

/* ---------- cover ---------- */
.t-hotel .ht-hero { position: relative; display: block; min-height: 100svh; padding: 0 0 60px; text-align: center; background: linear-gradient(180deg, var(--sky), var(--bg) 60%); overflow: hidden; }
.t-hotel .ht-hero > * { max-width: none; }
.ht-sky { position: absolute; left: 0; right: 0; top: 0; height: 220px; pointer-events: none; }
.ht-cloud { position: absolute; width: 90px; height: 26px; border-radius: 26px; background: #fff; opacity: .85; animation: ht-drift 30s linear infinite alternate; }
.ht-cloud::before { content: ""; position: absolute; left: 18px; top: -14px; width: 40px; height: 34px; border-radius: 50%; background: inherit; }
.ht-cloud.is-a { left: 6%; top: 46px; } .ht-cloud.is-b { right: 8%; top: 92px; transform: scale(.8); animation-duration: 40s; }
@keyframes ht-drift { to { translate: 30px 0; } }
.ht-facade { position: relative; display: block; width: min(100%, 520px); height: auto; margin: 26px auto 0; }
.ht-sign { font: 400 7px var(--display); letter-spacing: .14em; fill: var(--trim); }
.ht-lobby { padding: 0 var(--gutter); max-width: 460px !important; margin: 0 auto; }
.ht-portrait { position: relative; width: 52%; max-width: 210px; margin: -6px auto 22px; padding: 10px; background: linear-gradient(135deg, #f1dc9c, var(--brass) 40%, #9b7a2c); border-radius: 4px; box-shadow: 0 16px 26px -16px rgba(60, 20, 40, .6); }
.ht-ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--wall); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .2); }
.ht-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ht-nameplate { position: absolute; left: 50%; bottom: -12px; padding: 3px 10px; transform: translateX(-50%); border-radius: 3px; background: var(--roof); color: var(--trim); font: 400 .6rem var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.ht-hero .hero-media-tag { bottom: 26px; font-size: .5rem; white-space: normal; width: 86%; text-align: center; }
.ht-hero .hero-guest { margin: 0 0 4px; font: 400 1.1rem var(--display); } .ht-hero .hero-guest b { font-weight: 400; color: var(--accent); }
.ht-hero .hero-k, .t-hotel .sh-k { margin: 0; font: 600 .74rem var(--text); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.t-hotel .hero-t { margin: 8px 0 0; font: 400 clamp(2.6rem, 13vw, 3.8rem)/1.02 var(--display); color: var(--roof); text-transform: uppercase; letter-spacing: .02em; }
.t-hotel .hero-t span { display: block; font-size: calc(1em * var(--fit, 1)); }
.t-hotel .hero-t i { display: block; margin: .08em 0; font: 600 .32em/1.4 var(--text); font-style: normal; letter-spacing: .4em; color: var(--accent); }
.ht-hero .hero-line { margin: 12px auto 0; max-width: 20em; color: var(--muted); }
.ht-card { display: grid; gap: 0; margin: 20px auto 0; padding: 0; max-width: 320px; border: 2px solid var(--roof); border-radius: 6px; background: var(--paper); font-family: var(--mono); text-align: left; }
.ht-card > div { display: grid; grid-template-columns: 92px 1fr; gap: 8px; padding: 8px 12px; } .ht-card > div + div { border-top: 1px dashed var(--line); }
.ht-card dt { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ht-card dd { margin: 0; font-size: .86rem; }
.t-hotel .hero-cta, .t-hotel .rs-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; margin-top: 22px; padding: 12px 34px; border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font: 600 .8rem var(--text); letter-spacing: .22em; text-transform: uppercase; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--brass); }

/* ---------- rooms ---------- */
.t-hotel .s:not(.s-hero):not(.s-photo):not(.s-closing) { counter-increment: room; }
.t-hotel .s:not(.s-hero) { position: relative; width: calc(100% - 24px); max-width: 600px; margin: 0 auto 56px; padding: 62px 22px 44px; border-radius: 0 0 var(--radius) var(--radius); background: var(--paper);
  box-shadow: 0 0 0 2px var(--roof), 0 24px 36px -28px rgba(60, 20, 40, .6); }
.t-hotel .s:not(.s-hero)::before { content: ""; position: absolute; left: -2px; right: -2px; top: -22px; height: 30px;   /* striped awning with a scalloped edge */
  background: radial-gradient(circle at 50% 0, var(--accent) 0 8px, transparent 8.5px) 0 22px / 32px 16px repeat-x, radial-gradient(circle at 50% 0, var(--trim) 0 8px, transparent 8.5px) 16px 22px / 32px 16px repeat-x,
    repeating-linear-gradient(90deg, var(--accent) 0 16px, var(--trim) 16px 32px) 0 0 / 100% 22px no-repeat; border-radius: 6px 6px 0 0; }
.t-hotel .s-hero + .s { margin-top: 30px; }
.t-hotel .sh { margin-bottom: 26px; }
.t-hotel .s:not(.s-closing) .sh::before { content: "No. " counter(room); display: inline-block; margin-bottom: 12px; padding: 4px 14px; border-radius: 4px; background: linear-gradient(135deg, #f1dc9c, var(--brass) 50%, #9b7a2c); color: var(--roof); font: 400 .82rem var(--display); letter-spacing: .1em; box-shadow: 0 2px 4px rgba(60, 20, 40, .25); }
.t-hotel .sh-t { margin-top: 6px; font: 400 clamp(1.8rem, 8.6vw, 2.4rem)/1.1 var(--display); color: var(--roof); text-transform: uppercase; }
.t-hotel .story-body { text-align: center; }
.t-hotel .cd-u { padding: 12px 4px 8px; border: 2px solid var(--roof); border-radius: 6px; background: var(--bg); }
.t-hotel .cd-u b { font: 400 clamp(1.8rem, 9vw, 2.4rem)/1 var(--display); color: var(--accent); }
.t-hotel .cd-u span { font-weight: 600; }
.t-hotel .btn-line { min-height: 46px; border: 2px solid var(--roof); color: var(--roof); font: 600 .74rem var(--text); letter-spacing: .16em; text-transform: uppercase; }
.t-hotel .btn-line:hover { background: var(--roof); color: var(--trim); }
/* the programme as a room-service menu */
.t-hotel .tl-i { display: flex; align-items: baseline; gap: 8px; border: 0; padding: 8px 0; }
.t-hotel .tl-time { order: 3; flex: none; font: 400 .9rem var(--mono); color: var(--accent); }
.t-hotel .tl-i > div, .t-hotel .tl-i > span:not(.tl-time) { order: 1; }
.t-hotel .tl-i::after { content: ""; order: 2; flex: 1; border-bottom: 2px dotted var(--line); transform: translateY(-4px); }
.t-hotel .tl-title { font-weight: 600; }
/* venues as luggage tags */
.t-hotel .vn-c { position: relative; border: 2px solid var(--roof); border-radius: 30px 10px 10px 30px; background: var(--bg); padding: 22px 20px 22px 48px; text-align: left; }
.t-hotel .vn-c::before { content: ""; position: absolute; left: 16px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 2px var(--brass); }
.t-hotel .vn-l { color: var(--accent); font-weight: 600; }
.t-hotel .vn-n { font: 400 1.35rem/1.15 var(--display); color: var(--roof); }
.t-hotel .pp-h { font: 400 1.2rem var(--display); color: var(--roof); text-transform: uppercase; }
.t-hotel .dr-text { font: 600 1.25rem/1.35 var(--text); }
.t-hotel .sw-dot { border-radius: 6px; box-shadow: 0 0 0 2px var(--roof); }
.t-hotel .dr-roles > div, .t-hotel .rs, .t-hotel .rs-done { border: 2px solid var(--roof); border-radius: 8px; background: var(--bg); }
.t-hotel .dr-roles dt, .t-hotel .bio-r, .t-hotel .tml-d { color: var(--accent); }
.t-hotel .rs { font-family: var(--text); }
.t-hotel .f-l { font-family: var(--mono); letter-spacing: .04em; }
.t-hotel .f-in, .t-hotel .ch span { border-radius: 6px; background: var(--paper); border-color: color-mix(in srgb, var(--roof) 35%, transparent); }
.t-hotel .rs-btn { width: 100%; box-shadow: none; }
.t-hotel .faq summary { font-weight: 600; }
.t-hotel .gl-btn { background: var(--accent); }
.t-hotel .gal-i img, .t-hotel .gal-ph { border-radius: 4px; border: 6px solid; border-image: linear-gradient(135deg, #f1dc9c, var(--brass), #9b7a2c) 1; }
.t-hotel .gal-i figcaption { font-family: var(--mono); }
.t-hotel .tml-dot { background: var(--accent); }
.t-hotel .tml-t { font: 400 1.25rem var(--display); color: var(--roof); }
.t-hotel .tml-img { border: 6px solid var(--brass); border-radius: 4px; }

/* ---------- closing: the door hanger ---------- */
.t-hotel .ht-end { text-align: center; margin-bottom: 120px; }
.ht-hanger { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; width: 130px; height: 230px; margin: -10px auto 26px; padding: 70px 10px 0; border-radius: 16px; background: var(--accent); color: var(--trim); transform: rotate(-4deg); box-shadow: 0 16px 24px -14px rgba(60, 20, 40, .6); }
.ht-hole { position: absolute; left: 50%; top: 18px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: var(--paper); }
.ht-hole::after { content: ""; position: absolute; left: 50%; top: 26px; width: 10px; height: 26px; margin-left: -5px; background: var(--paper); }
.ht-hanger b { font: 400 .86rem/1.25 var(--display); text-transform: uppercase; font-weight: 400; }
.ht-hanger span:last-child { font: 400 .8rem var(--mono); }
.t-hotel .cl-line { font: 400 1.4rem/1.3 var(--display); color: var(--roof); }
.t-hotel .cl-tag { color: var(--accent); font-weight: 600; }
.t-hotel body.is-demo .ht-end { margin-bottom: 150px; }
@media (prefers-reduced-motion: reduce) { .ht-cloud { animation: none; } }