/* Public pages (home, rooms, banquet, legal, 404). Colours come from tokens.css only. */
.hdr { position: sticky; top: 0; z-index: 5; justify-content: space-between; }
.hdr nav { display: none; gap: 20px; margin-left: auto; margin-right: 16px; }
.hdr nav a { color: #fff; text-decoration: none; font-weight: 500; }
.hdr nav a:hover { color: var(--powder); }
@media (min-width: 700px) { .hdr nav { display: flex; } .hdr { padding-inline: max(16px, calc(50% - 560px)); } }
a.btn { display: inline-block; text-decoration: none; text-align: center; line-height: 20px; }
.btn.sm { padding: 10px 18px; font-size: 14px; }

.hero { position: relative; color: #fff; background: var(--oxford) center / cover; padding: 90px 20px 40px; min-height: 430px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#041819b3, #04181933 45%, #041819e6); }
.hero > * { position: relative; z-index: 1; }
.hero { padding-inline: max(20px, calc(50% - 560px)); }
.hero.short { min-height: 320px; padding-top: 70px; }
.hero small { color: var(--powder); letter-spacing: .14em; }
.hero h1 { font-size: 46px; line-height: 1.05; margin-top: 8px; }
.hero p { max-width: 460px; margin-bottom: 22px; }
.rule { width: 56px; height: 2px; background: var(--gold); margin: 10px 0; }

.sec { padding: 28px 20px; }
.sec.oxford { background: var(--oxford); color: #fff; }
.sec.panel { background: var(--panel); }
.in, .foot > * { max-width: 1120px; width: 100%; margin-inline: auto; }
.in > * + *, .sec h2 + .rule + * { margin-top: 14px; }
.sec h2, .legal h1 { font-size: 30px; }
.sec p + p, .legal p + p { margin-top: 10px; }


.call { margin: 4px 0 8px; }
form.inquiry { display: grid; gap: 4px; max-width: 520px; }
form.inquiry label { font-weight: 500; font-size: 14px; }
form.inquiry .field { margin: 4px 0 8px; }
form.inquiry .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
form.inquiry .decoy { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { color-scheme: dark; }
.thanks { background: var(--panel2); border-left: 4px solid var(--teal); border-radius: 8px; padding: 14px; }
.problem { background: #ffdede; color: #8a1c1c; border-radius: 8px; padding: 10px 14px; font-weight: 600; }

.foot { background: var(--oxford); border-top: 1px solid var(--blue); padding: 24px 20px; color: #fff; }
.foot > * + * { margin-top: 10px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot a { color: #fff; }
.foot nav a { display: inline-block; padding: 11px 4px; }
.foot small { color: var(--powder); }

.legal { padding: 28px 20px 40px; max-width: 760px; margin-inline: auto; }
.legal h2 { font-size: 28px; margin-top: 22px; }
.legal li { margin: 4px 0 4px 20px; }
.center { text-align: center; padding-block: 90px; }

/* Fade and slide in (reveal.js adds .rv to <html>; phones set to reduce motion never get it, so nothing is hidden or moved). */
.rv .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.rv .reveal.shown { opacity: 1; transform: none; }
a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }