:root {
  color-scheme: dark;
  --black: #090a0d;
  --royal-blue: #193e9a;
  --maroon: #633440;
  --gold: #b6a177;
  --ivory: #f0ede7;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--black); }
body { color: var(--ivory); font-family: Georgia, 'Times New Roman', serif; }
.hero { isolation: isolate; position: relative; display: flex; align-items: center; justify-content: center; min-height: 100svh; padding: 8rem 5.8vw; }
.hero-image { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.reading-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgb(9 10 13 / 43%), transparent 68%), linear-gradient(0deg, rgb(9 10 13 / 66%), transparent 60%); }
.masthead { position: absolute; top: 2.5rem; left: 0; width: 100%; text-align: center; }
.monogram { display: inline-block; color: var(--gold); font-size: 1.65rem; font-weight: 400; letter-spacing: -.14em; padding-right: .14em; }
.monogram span { position: relative; top: .18em; }
.hero-copy { width: min(100%, 57rem); text-align: center; }
.hero-copy .rule { margin-inline: auto; }
.rule { display: block; width: 2.7rem; height: 1px; background: var(--gold); margin-bottom: 1.55rem; }
h1 { margin: 0; font-weight: 400; line-height: 1.12; font-size: clamp(2.55rem, 5.15vw, 5.7rem); letter-spacing: .035em; }
h1 span { display: block; }
h1 .the { font-size: .27em; letter-spacing: .4em; margin-bottom: 1rem; color: var(--gold); }
p { margin: 1.55rem 0 2rem; font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 400; line-height: 1.55; letter-spacing: .012em; text-shadow: 0 1px 14px #000; }
.begin { display: inline-block; text-decoration: none; min-height: 46px; padding: .95rem 1.5rem; border: 1px solid var(--gold); background: rgb(9 10 13 / 76%); color: var(--ivory); font: 400 .75rem/1.3 Arial, sans-serif; letter-spacing: .16em; cursor: pointer; transition: background 180ms ease, border-color 180ms ease; }
.begin:hover { background: var(--maroon); border-color: var(--maroon); }
.begin:focus-visible { outline: 3px solid var(--royal-blue); outline-offset: 5px; }
.hero-actions { display: flex; flex-direction: column; align-items: center; gap: .65rem; }
.hero-actions .begin { text-transform: uppercase; max-width: 100%; line-height: 1.6; }
.usual-link { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1rem; font-size: 1rem; color: var(--ivory); text-underline-offset: .35rem; text-decoration-color: #b6a17799; }
.usual-link:hover { color: var(--gold); }
button.usual-link { border: 0; background: transparent; font-family: inherit; cursor: pointer; text-decoration-line: underline; }
#whatsapp-prompt { width: min(30rem, calc(100% - 2rem)); padding: 2.4rem; border: 1px solid #b6a17770; background: var(--black); color: var(--ivory); text-align: center; }
#whatsapp-prompt::backdrop { background: rgb(0 0 0 / 72%); backdrop-filter: blur(5px); }
#whatsapp-prompt .rule { margin-inline: auto; }
#whatsapp-prompt h2 { font-size: 2rem; line-height: 1.2; font-weight: 400; margin: 0; }
#whatsapp-prompt p { font-size: 1rem; line-height: 1.7; color: #c1bbb1; text-shadow: none; }
#whatsapp-prompt .begin { font-size: .875rem; }
.dismiss-booking { border: 0; background: transparent; color: #c1bbb1; min-height: 44px; margin-top: .8rem; padding: .65rem 1rem; font: .875rem Arial, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: .25rem; }
.dismiss-booking:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.usual-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.brand-edge { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--maroon); }
@media (max-width: 600px) {
  .hero { padding: 8rem 1.65rem; }
  .hero-image { object-position: 64% center; }
  .reading-shade { background: linear-gradient(0deg, rgb(9 10 13 / 90%), rgb(9 10 13 / 10%) 85%); }
  .masthead { top: 1.8rem; }
  h1 { font-size: clamp(2.1rem, 8.2vw, 3rem); }
  h1 .the { font-size: .4em; }
  p { font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.account-nav { position: absolute; right: 5.8vw; top: -.45rem; display: flex; align-items: center; gap: .6rem; }
.account-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .65rem 1rem; border-radius: 999px; color: var(--ivory); font: 400 .875rem/1.3 Arial, sans-serif; text-decoration: none; background: rgb(9 10 13 / 78%); border: 1px solid transparent; }
.account-signup { border-color: #b6a17799; }
.account-link:hover { color: var(--gold); border-color: var(--gold); }
.account-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#welcome-account { width: min(31rem, calc(100% - 2rem)); max-height: calc(100svh - 2rem); overflow-y: auto; padding: clamp(1.5rem, 5vw, 2.8rem); border: 1px solid #b6a17770; border-radius: 1.2rem; background: var(--black); color: var(--ivory); text-align: center; box-shadow: 0 24px 80px #0009; }
#welcome-account::backdrop { background: rgb(0 0 0 / 72%); backdrop-filter: blur(5px); }
#welcome-account .rule { margin-inline: auto; }
#welcome-account .welcome-brand { margin: 0 0 1.3rem; color: var(--gold); font: .875rem/1.5 Arial, sans-serif; letter-spacing: .16em; }
#welcome-account h2 { margin: 0; font-size: clamp(1.8rem, 6vw, 2.2rem); line-height: 1.2; font-weight: 400; }
#welcome-account p { font-size: 1rem; line-height: 1.65; color: #c1bbb1; text-shadow: none; }
.welcome-account-actions { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
#welcome-account .begin { font-size: 1rem; letter-spacing: .04em; border-radius: 999px; min-width: 12rem; }
.welcome-login { display: inline-flex; align-items: center; min-height: 44px; color: var(--ivory); font: .875rem/1.5 Arial, sans-serif; text-underline-offset: .3rem; }
.welcome-login:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 600px) { .masthead { text-align: left; padding-left: 1.65rem; } .account-nav { right: 1.65rem; } }

/* Full-screen film, with navigation and controls above the footage. */
.hero { width: 100%; width: 100vw; height: 100vh; height: 100dvh; min-height: 0; padding: 6rem 5.8vw 8rem; overflow: hidden; }
.hero-image { object-position: center; }
.reading-shade { background: linear-gradient(180deg, #090a0d88 0%, #090a0d22 25%, #090a0d55 50%, #090a0d 100%); }
.hero-copy { text-shadow: 0 2px 24px #000; }
.hero-copy p { margin-top: 1.1rem; }
.discover { position: absolute; right: 5.8vw; bottom: max(1.4rem, env(safe-area-inset-bottom)); min-height: 44px; display: flex; gap: .8rem; align-items: center; color: var(--ivory); font: .75rem Arial, sans-serif; text-decoration: none; }
.home-continuation { padding: clamp(4rem, 10vw, 8rem) 1.65rem; text-align: center; background: var(--black); }
.home-continuation .rule { margin-inline: auto; }
.home-continuation h2 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 400; margin: 0; }
.home-continuation p { max-width: 34rem; margin-inline: auto; }
.continuation-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
@media(max-width:600px) { .hero { padding: 6rem 1.4rem 9rem; } .discover { right: 1.4rem; bottom: 4.8rem; } .hero-copy p { font-size: 1.1rem; } }
@media(max-height:450px) and (orientation:landscape) { .masthead { top: .7rem; } .hero { padding: 3rem 1.5rem; } h1 { font-size: 2rem; } h1 .the { margin-bottom:.25rem; } .hero-copy .rule { display:none; } .hero-copy p { margin:.4rem 0; font-size:1rem; } .hero-actions { flex-direction:row; justify-content:center; } .discover { bottom:.4rem; } }