/* =====================================================================
   DENDERA · pages.css · shared components for the two lounge pages
   (hero, manifesto, horizontal panels, feature sections, membership,
   reservation, visit, cross-over, footer art). Themed via variables set
   in observatory.css / oasis.css.
   ===================================================================== */
body.page { background: var(--page-bg); --veil-color: var(--page-bg); --t-color: var(--page-bg); }
.page main { position: relative; z-index: 1; }
.sky-fixed { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero .bg { position: absolute; inset: 0; z-index: 0; }
.hero .bg video, .hero .bg img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.hero .bg .veil { z-index: 1; }
.hero .inner { position: relative; z-index: 2; padding-bottom: clamp(80px, 14vh, 160px); }
.hero .kicker { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.hero .title { font-size: clamp(40px, 7.4vw, 118px); line-height: 0.98; letter-spacing: 0.06em; }
.hero .title .c { transition-delay: calc(var(--i) * 0.03s + 0.4s); }
.hero .lede-row { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-top: 36px; }
.hero .lede { max-width: 42ch; }
.hero .meta { display: grid; gap: 8px; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-dim); text-align: right; }
.hero .meta b { font-weight: 400; color: var(--gold); }
.hero .hero-emblem { position: absolute; right: var(--gutter); top: calc(var(--nav-h) + 24px); width: clamp(120px, 14vw, 220px); opacity: 0.85; z-index: 2; }
.hero .hero-emblem svg { width: 100%; height: auto; animation: spin 140s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
  .hero .lede-row { grid-template-columns: 1fr; }
  .hero .meta { text-align: left; }
  .hero .hero-emblem { display: none; }
}

/* ---------- manifesto with scroll-drawn artwork ---------- */
.manifesto { position: relative; }
.manifesto .grid { align-items: center; }
.manifesto .art { position: sticky; top: 15vh; aspect-ratio: 1; width: 100%; max-width: 520px; margin-inline: auto; }
.manifesto .art svg { width: 100%; height: 100%; overflow: visible; }
.manifesto .art svg [class^="e-"], .manifesto .art svg .v { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); }
.manifesto .text { font-family: var(--font-serif); font-weight: 300; font-size: clamp(26px, 3.4vw, 50px); line-height: 1.3; }
.manifesto .text .w > span { color: var(--ink-faint); transition: color 0.4s; }
.manifesto .text .w > span.lit { color: var(--ink); }
.manifesto .text .w > span.gold { color: var(--gold); }
.manifesto .caption { margin-top: 32px; }
.manifesto .progress { display: inline-flex; align-items: center; gap: 14px; margin-top: 40px; font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--ink-faint); }
.manifesto .progress .bar { width: 120px; height: 1px; background: rgba(255,255,255,0.12); position: relative; }
.manifesto .progress .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* ---------- horizontal panels (pinned) ---------- */
.panels { position: relative; overflow: hidden; }
.panels .track { display: flex; height: 100vh; height: 100svh; will-change: transform; }
.panel { position: relative; flex: 0 0 100vw; height: 100%; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.panel .media { height: 100%; }
.panel .media video, .panel .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel .copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 96px); position: relative; }
.panel .copy .num { font-family: var(--font-serif); font-size: 15px; letter-spacing: 0.3em; color: var(--gold); margin-bottom: 22px; }
.panel .copy .num::after { content: ''; display: block; width: 44px; height: 1px; background: var(--gold); margin-top: 16px; }
.panel .copy h3 { font-size: clamp(30px, 3.6vw, 56px); margin-bottom: 22px; }
.panel .copy p { max-width: 46ch; color: var(--ink-dim); font-size: clamp(15px, 1.15vw, 18px); line-height: 1.75; }
.panel .copy .facts { margin-top: 28px; display: grid; gap: 10px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }
.panel.reverse .media { order: 2; }
.panels .counter { position: absolute; bottom: 30px; left: var(--gutter); z-index: 3; font-family: var(--font-serif); font-size: 15px; letter-spacing: 0.3em; color: var(--ink-dim); display: flex; gap: 20px; align-items: center; }
.panels .counter .bar { width: 160px; height: 1px; background: rgba(255,255,255,0.12); position: relative; }
.panels .counter .bar i { position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.panels .hint { position: absolute; bottom: 30px; right: var(--gutter); z-index: 3; font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--ink-faint); }
@media (max-width: 900px) {
  .panels .track { display: block; height: auto; }
  .panel { grid-template-columns: 1fr; height: auto; flex: none; }
  .panel .media { aspect-ratio: 4 / 3; height: auto; }
  .panel.reverse .media { order: 0; }
  .panels .counter, .panels .hint { display: none; }
}

/* ---------- feature: media + copy ---------- */
.feature .grid { align-items: center; }
.feature .media { width: 100%; }
.feature .copy h2 { margin: 18px 0 22px; }
.feature .list { margin-top: 32px; display: grid; }
.feature .list li { display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.feature .list li:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.feature .list .k { font-family: var(--font-serif); font-size: 15px; letter-spacing: 0.24em; color: var(--gold); padding-top: 4px; }
.feature .list .t { font-family: var(--font-serif); font-size: 22px; color: var(--ink); }
.feature .list .s { font-size: 14px; color: var(--ink-dim); margin-top: 4px; max-width: 40ch; }

/* ---------- section headers ---------- */
.sec-head { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; margin-bottom: clamp(40px, 6vw, 88px); }
.sec-head h2 { margin-top: 16px; }
.sec-head .aside { max-width: 36ch; color: var(--ink-dim); font-size: 15px; line-height: 1.7; }
.sec-head.center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; } }

/* ---------- membership ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 32px); perspective: 1600px; }
.tier { position: relative; padding: clamp(28px, 3vw, 44px); border: 1px solid rgba(var(--gold-rgb), 0.28); background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0)); transform-style: preserve-3d; transition: transform 0.6s var(--ease-out), border-color 0.6s; min-height: 520px; display: flex; flex-direction: column; overflow: hidden; }
.tier::before { content: ''; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--gold-rgb), 0.16), transparent 60%); opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.tier:hover::before { opacity: 1; }
.tier:hover { border-color: rgba(var(--gold-rgb), 0.7); }
.tier .t-emblem { width: 56px; height: 56px; opacity: 0.9; margin-bottom: 26px; }
.tier .t-emblem svg { width: 100%; height: 100%; }
.tier .t-emblem svg * { stroke-width: 2px; }
.tier .t-name { font-size: clamp(22px, 2vw, 30px); letter-spacing: 0.16em; }
.tier .t-sub { font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--ink-dim); margin-top: 8px; }
.tier .t-rule { width: 40px; height: 1px; background: var(--gold); margin: 24px 0; }
.tier ul { display: grid; gap: 12px; font-size: 15px; color: var(--ink-dim); flex: 1; }
.tier ul li { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: start; }
.tier ul li::before { content: ''; width: 6px; height: 6px; border: 1px solid var(--gold); transform: rotate(45deg); margin-top: 8px; }
.tier .t-foot { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.tier.featured { border-color: rgba(var(--gold-rgb), 0.6); background: linear-gradient(160deg, rgba(var(--gold-rgb), 0.08), rgba(var(--gold-rgb), 0.01)); }
.tier.featured .badge { position: absolute; top: 18px; right: 18px; font-size: 9px; letter-spacing: 0.34em; text-transform: uppercase; color: #0B0E17; background: var(--gold); padding: 6px 10px; }
@media (max-width: 1000px) { .tiers { grid-template-columns: 1fr; } .tier { min-height: 0; } }

.member-card { position: relative; aspect-ratio: 1.586; width: 100%; max-width: 520px; margin-inline: auto; border-radius: 14px; overflow: hidden; transform-style: preserve-3d; transition: transform 0.5s var(--ease-out); box-shadow: 0 40px 80px rgba(0,0,0,0.6); }
.member-card .face { position: absolute; inset: 0; background: linear-gradient(135deg, #0B0E17 0%, #131A33 50%, #0B0E17 100%); border: 1px solid rgba(var(--gold-rgb), 0.5); border-radius: 14px; padding: 28px 32px; display: flex; flex-direction: column; justify-content: space-between; }
.member-card .sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.14) 45%, rgba(var(--gold-rgb), 0.28) 50%, rgba(255,255,255,0.1) 55%, transparent 70%); transform: translateX(var(--sx, -60%)); transition: transform 0.3s linear; pointer-events: none; mix-blend-mode: screen; }
.member-card .mc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.member-card .mc-top svg { width: 64px; height: 64px; }
.member-card .mc-top svg * { stroke-width: 2px; }
.member-card .mc-word { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.44em; color: var(--gold); text-align: right; }
.member-card .mc-word small { display: block; font-family: var(--font-sans); font-size: 8px; letter-spacing: 0.4em; color: var(--ink-dim); margin-top: 6px; }
.member-card .mc-bottom { display: flex; justify-content: space-between; align-items: flex-end; }
.member-card .mc-name { font-family: var(--font-serif); font-size: 22px; letter-spacing: 0.06em; }
.member-card .mc-no { font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.36em; color: var(--ink-dim); }
.member-card .mc-tier { font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); }
.member-card .stars { position: absolute; inset: 0; opacity: 0.5; background-image: radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 70% 60%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 40% 80%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 85% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 55% 15%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 10% 75%, #fff 50%, transparent 51%); }

/* ---------- reserve ---------- */
.reserve .grid { align-items: start; }
.reserve .info { display: grid; gap: 28px; padding-top: 12px; }
.reserve .info h4 { font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; font-weight: 400; }
.reserve .info p { color: var(--ink-dim); font-size: 15px; line-height: 1.7; }
.reserve .info .serif { font-size: 24px; color: var(--ink); }
.reserve .form-wrap { padding: clamp(28px, 4vw, 56px); border: 1px solid rgba(var(--gold-rgb), 0.22); background: rgba(255,255,255,0.015); position: relative; }
.reserve .form-wrap::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(var(--gold-rgb), 0.12); pointer-events: none; }

/* ---------- visit ---------- */
.visit .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 64px); }
.visit h4 { font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; font-weight: 400; }
.visit .big { font-family: var(--font-serif); font-size: clamp(22px, 2vw, 30px); line-height: 1.3; }
.visit p { color: var(--ink-dim); font-size: 15px; line-height: 1.75; }
.visit .hours li { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 15px; }
.visit .hours li span:last-child { color: var(--ink-dim); }
@media (max-width: 900px) { .visit .cols { grid-template-columns: 1fr; } }

/* ---------- cross-over to the other lounge ---------- */
.crossover { position: relative; min-height: 70vh; display: grid; place-items: center; overflow: hidden; text-align: center; isolation: isolate; }
.crossover .bg { position: absolute; inset: 0; z-index: -2; }
.crossover .bg img, .crossover .bg video { width: 100%; height: 100%; object-fit: cover; }
.crossover .bg::after { content: ''; position: absolute; inset: 0; background: var(--cross-veil, rgba(5,7,15,0.55)); }
.crossover .inner { padding: 80px var(--gutter); display: grid; justify-items: center; gap: 24px; }
.crossover h2 { font-size: clamp(34px, 6vw, 84px); }
.crossover p { max-width: 46ch; color: var(--ink); font-family: var(--font-serif); font-size: clamp(18px, 1.6vw, 24px); }
.crossover .edge { position: absolute; left: 0; right: 0; height: 120px; z-index: -1; pointer-events: none; }
.crossover .edge.top { top: 0; background: linear-gradient(180deg, var(--page-bg), transparent); }

/* ---------- moods (Observatory) ---------- */
.moods { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.moods canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.moods .veil { background: radial-gradient(ellipse at 30% 50%, rgba(5,7,15,0.35), rgba(5,7,15,0.75)); }
.moods .inner { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: var(--nav-h) var(--gutter) 60px; z-index: 2; }
.moods .names { display: grid; gap: 6px; }
.moods .names button { text-align: left; font-family: var(--font-display); font-size: clamp(28px, 4.2vw, 64px); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(237,233,224,0.18); transition: color 0.6s, transform 0.6s var(--ease-out); transform-origin: left center; line-height: 1.15; display: flex; align-items: center; gap: 22px; }
.moods .names button i { width: 0; height: 1px; background: var(--gold); transition: width 0.6s var(--ease-out); }
.moods .names button.active { color: var(--ink); }
.moods .names button.active i { width: 48px; }
.moods .names button:hover { color: rgba(237,233,224,0.6); }
.moods .desc { position: relative; min-height: 220px; }
.moods .desc .d { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); display: grid; gap: 18px; align-content: center; }
.moods .desc .d.active { opacity: 1; transform: none; }
.moods .desc .d h3 { font-family: var(--font-serif); font-size: clamp(24px, 2.6vw, 38px); font-weight: 300; }
.moods .desc .d p { color: var(--ink-dim); max-width: 44ch; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.75; }
.moods .desc .d .tags { font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--gold); }
.moods .head { position: absolute; top: calc(var(--nav-h) + 20px); left: var(--gutter); right: var(--gutter); z-index: 3; display: flex; justify-content: space-between; align-items: center; }
.moods .dial { position: absolute; right: var(--gutter); bottom: 40px; z-index: 3; display: flex; align-items: center; gap: 16px; font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--ink-faint); }
.moods .dial .ring { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(var(--gold-rgb), 0.35); position: relative; }
.moods .dial .ring i { position: absolute; left: 50%; top: 50%; width: 1px; height: 18px; background: var(--gold); transform-origin: top center; transform: translate(-50%, 0) rotate(var(--rot, 0deg)); }
@media (max-width: 900px) {
  .moods .inner { grid-template-columns: 1fr; align-content: end; gap: 24px; padding-bottom: 90px; }
  .moods .desc { min-height: 170px; }
  .moods .names button { font-size: 22px; }
}

/* ---------- ingredients strip (Oasis) ---------- */
.strip { position: relative; overflow: hidden; padding-block: 40px; }
.strip .row { display: flex; gap: clamp(24px, 4vw, 64px); width: max-content; will-change: transform; }
.strip .item { display: flex; align-items: center; gap: 22px; font-family: var(--font-display); font-size: clamp(22px, 3vw, 44px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; transition: color 0.5s; }
.strip .item svg { width: 28px; height: 28px; flex: none; opacity: 0.6; }
.strip .item:hover { color: var(--gold); }
.strip.slow .row { animation: marquee 60s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- gallery mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(120px, auto); gap: clamp(12px, 1.6vw, 24px); }
.mosaic .m1 { grid-column: 1 / 8; grid-row: span 2; }
.mosaic .m2 { grid-column: 8 / 13; }
.mosaic .m3 { grid-column: 8 / 13; }
.mosaic .m4 { grid-column: 1 / 5; }
.mosaic .m5 { grid-column: 5 / 13; }
.mosaic .media { height: 100%; }
.mosaic .cap { position: absolute; left: 22px; bottom: 18px; font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink); opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.5s var(--ease-out); z-index: 2; }
.mosaic .media:hover .cap { opacity: 1; transform: none; }
.mosaic .media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.55)); opacity: 0; transition: opacity 0.5s; }
.mosaic .media:hover::after { opacity: 1; }
@media (max-width: 800px) { .mosaic .m1, .mosaic .m2, .mosaic .m3, .mosaic .m4, .mosaic .m5 { grid-column: 1 / -1; grid-row: auto; } }

/* ---------- big quote ---------- */
.quote { text-align: center; }
.quote blockquote { margin: 0 auto; max-width: 22ch; font-family: var(--font-serif); font-weight: 300; font-style: italic; font-size: clamp(28px, 4.2vw, 62px); line-height: 1.2; }
.quote cite { display: block; margin-top: 28px; font-style: normal; font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); }

/* ---------- hero: book a table first ---------- */
.hero .inner { padding-bottom: clamp(56px, 9vh, 120px); }
.hero .book { margin-top: clamp(26px, 4vh, 44px); }
.hero .book .qb-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.hero .book .qb-head .eyebrow { color: var(--gold-2); }
.hero .book .qb-head .alt { font-size: 10px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-dim); }
.hero .book .qb-head .alt:hover { color: var(--gold); }
.quick-book { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr auto; gap: 0; border: 1px solid rgba(var(--gold-rgb), 0.55); background: rgba(5,7,15,0.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: relative; }
.quick-book::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(var(--gold-rgb), 0.16); pointer-events: none; }
.quick-book .qf { position: relative; display: grid; gap: 6px; padding: 18px 22px 16px; border-right: 1px solid rgba(var(--gold-rgb), 0.22); }
.quick-book .qf label { font-size: 9px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); }
.quick-book .qf input, .quick-book .qf select { background: none; border: 0; color: var(--ink); font-family: var(--font-serif); font-size: 21px; padding: 0; width: 100%; color-scheme: dark; }
.quick-book .qf select { cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C9A84C'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; padding-right: 22px; }
.quick-book .qf select option { background: #0B0E17; color: var(--ink); font-family: var(--font-sans); font-size: 15px; }
.quick-book .qf input:focus, .quick-book .qf select:focus { outline: none; }
.quick-book .qf::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: 10px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-out); }
.quick-book .qf:focus-within::after { transform: scaleX(1); }
.quick-book .go { display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 0 clamp(22px, 2.6vw, 40px); font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: #0B0E17; background: var(--gold); position: relative; overflow: hidden; white-space: nowrap; transition: color 0.5s; }
.quick-book .go::before { content: ''; position: absolute; inset: 0; background: var(--gold-2); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-in-out); }
.quick-book .go:hover::before { transform: scaleX(1); }
.quick-book .go span { position: relative; }
.quick-book .go .arrow { width: 22px; height: 1px; background: currentColor; position: relative; transition: width 0.4s var(--ease-out); }
.quick-book .go .arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.quick-book .go:hover .arrow { width: 32px; }
.hero .after { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-top: 26px; }
.hero .after .lede { font-size: clamp(18px, 1.9vw, 24px); }
.hero .after .meta { display: flex; gap: 26px; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-dim); }
.hero .after .meta b { font-weight: 400; color: var(--gold); }
@media (max-width: 900px) {
  .quick-book { grid-template-columns: 1fr 1fr; }
  .quick-book .qf:nth-child(2) { border-right: 0; }
  .quick-book .qf:nth-child(3) { grid-column: 1 / -1; border-right: 0; border-top: 1px solid rgba(var(--gold-rgb), 0.22); }
  .quick-book .go { grid-column: 1 / -1; padding: 18px; }
  .hero .after { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero .after .meta { flex-wrap: wrap; gap: 10px 18px; }
  .hero .book .qb-head { flex-wrap: wrap; }
}
@media (max-height: 640px) and (min-width: 901px) { .hero .after { display: none; } }

/* reserve section directly after the hero: a little tighter */
.reserve.first { padding-top: clamp(64px, 8vw, 120px); }
.reserve .sec-head .aside { font-family: var(--font-serif); font-size: 20px; color: var(--ink); }