/* Desktop menu follows the rail links. Mobile retains its reachable header control. */
@media(min-width:721px) {
 .site-header .header-menu { display:none; }
 .brand-rail .rail-menu { display:grid; grid-template-columns:auto 27px; grid-template-rows:7px 7px; align-content:center; gap:0 22px; width:100%; height:64px; margin:-5px 0 24px; padding:14px 12px; border-top:1px solid #1e283026; }
 .rail-menu span { grid-column:2; width:27px; background:#1e2830; }
 .rail-menu span:nth-child(2) { width:19px; justify-self:end; }
 .rail-menu b { grid-column:1; grid-row:1/3; font:400 10px/1.4 Georgia,serif; letter-spacing:.14em; text-align:left; }
 .rail-menu:hover span { width:27px; transition:width .25s; }
}
@media(max-width:720px) { .rail-menu { display:none; } }
/* Cross-dissolve the moving photographs without fading through the dark backdrop. */
.opening-scene .opening-photo { opacity:0; z-index:0; overflow:hidden; transition:opacity 2.4s ease-in-out; }
.opening-scene .opening-photo.is-leaving { opacity:1; }
.opening-scene .opening-photo.is-current { opacity:1; z-index:1; }
.opening-scene .opening-photo img { animation:none; transform-origin:center; }
.opening-scene .opening-photo:is(.is-current,.is-leaving) img { will-change:transform; }
@media(max-width:720px) {
 .opening-scene .opening-photo figcaption { display:none; }
 .opening-scene .opening-note { bottom:82px; }
 .opening-scroll { bottom:19px; }
 .opening-scroll>span:first-child { display:none; }
}
/* Once per tab/visit; this veil never intercepts input and has a CSS fail-safe exit. */
.arrival-screen { display:none; position:fixed; inset:0; z-index:90; place-items:center; background:#1e2830; overflow:hidden; pointer-events:none; }
.arrival-pending .arrival-screen { display:grid; animation:arrival-away .7s 2.3s ease-in-out both; }
.arrival-sign { position:relative; z-index:1; display:flex; align-items:center; flex-direction:column; color:#fff; }
.arrival-sign img { width:130px; height:auto; filter:brightness(0) invert(1); }
.arrival-pending .arrival-sign img { animation:arrival-mark 1.8s .15s cubic-bezier(.2,.65,.25,1) both; }
@keyframes arrival-mark { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes arrival-away { to { opacity:0; visibility:hidden; } }
@media(prefers-reduced-motion:reduce) { .arrival-screen,.arrival-pending .arrival-screen { display:none; } .opening-scene .opening-photo { transition:none; } }
.menu-toggle[hidden] { display:none!important; }

/* A desktop drawer unfolds from the rail's right edge toward the page. */
@media(min-width:721px) {
 .menu-dialog { inset:0 auto 0 var(--rail); margin:0; width:min(720px,calc(100vw - var(--rail))); max-width:none; height:100dvh; max-height:none; padding:72px clamp(35px,5vw,80px) 40px; }
 .menu-dialog nav { margin:35px 0; }
 .menu-dialog nav a { font-size:clamp(20px,1.8vw,27px); padding:15px 0; }
}
@media(min-width:721px) and (prefers-reduced-motion:no-preference) {
 .menu-dialog[open] { animation:menu-unfold .65s cubic-bezier(.22,.7,.25,1) both; }
 .menu-dialog[open]::backdrop { animation:menu-shade .45s ease-out both; }
 .menu-dialog[open]>nav { animation:menu-writing .6s .12s ease-out both; }
 @keyframes menu-unfold { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
 @keyframes menu-shade { from { opacity:0; } to { opacity:1; } }
 @keyframes menu-writing { from { opacity:.3; transform:translateX(-12px); } to { opacity:1; transform:translateX(0); } }
}

/* The hotel tagline is the first and largest message in the opening photograph. */
.page-index .opening-scene .opening-heading { top:19%; right:9%; }
.page-index .opening-scene #hero-title { font-family:var(--serif); font-size:clamp(44px,4.3vw,62px); font-weight:400; line-height:1.25; letter-spacing:.09em; gap:28px; }
.page-index .opening-scene #hero-title .tagline-place { font-size:.5em; padding-top:0; letter-spacing:.15em; }
.page-index .opening-scene #hero-title>span:nth-child(2) { padding-top:.8em; }
.page-index .opening-scene #hero-title>span:nth-child(3) { padding-top:1.8em; }
.page-index .opening-scene .opening-note { font-size:clamp(21px,1.9vw,28px); bottom:76px; line-height:1.9; letter-spacing:.1em; text-shadow:0 2px 18px #101a2399; }
.page-index .opening-scene #hero-title ruby { ruby-position:over; ruby-align:center; }
.page-index .opening-scene #hero-title rt { font-size:11px; font-weight:400; letter-spacing:.12em; }
@media(max-width:1100px) and (min-width:721px) {
 .page-index .opening-scene #hero-title { font-size:46px; gap:24px; }
}
@media(max-width:720px) {
 .page-index .opening-scene .opening-heading { top:11%; right:28px; }
 .page-index .opening-scene #hero-title { font-size:clamp(33px,9.8vw,42px); gap:18px; }
 .page-index .opening-scene #hero-title .tagline-place { font-size:.53em; }
 .page-index .opening-scene .opening-note { font-size:19px; bottom:58px; line-height:1.9; }
 .page-index .opening-scene #hero-title rt { font-size:9px; }
 .arrival-sign img { width:112px; }
}

/* Phone details stay within the established rail, directly below MENU. */
.brand-rail .rail-phone { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:58px; margin:-6px 0 24px; gap:4px; line-height:1.8; white-space:nowrap; }
.rail-phone span { font-size:9px; letter-spacing:.025em; }
.rail-phone b { font-size:13px; font-weight:400; letter-spacing:.015em; }
.rail-phone:hover b { text-decoration:underline; text-underline-offset:5px; }
@media(min-width:721px) and (max-width:1100px) {
 .rail-phone span { font-size:8px; letter-spacing:0; }
 .rail-phone b { font-size:11px; }
}
.arrival-screen { background-image:var(--ink-texture); background-size:cover; background-position:center; background-repeat:no-repeat; }
@media(max-width:360px) {
 .page-index .opening-scene .opening-heading { right:24px; }
 .page-index .opening-scene #hero-title { gap:15px; }
}