/* Lahe Baar premium public-site layer — loaded after lahebaar-theme.css. */
:root {
  --bg: #090a0b;
  --bg-soft: #0e1012;
  --surface: #121518;
  --surface-2: #181b1f;
  --border: rgba(242, 238, 231, .12);
  --border-gold: rgba(198, 165, 107, .44);
  --gold: #c6a56b;
  --gold-light: #e1c181;
  --text: #f2eee7;
  --text-muted: #aaa8a4;
  --text-faint: #74777c;
  --radius: 2px;
  --radius-sm: 2px;
  --container: 1180px;
}

body.lb { background:#090a0b; color:var(--text); font-size:16px; }
.lb .container { width:min(100% - 48px,var(--container)); padding:0; }
.lb .site-header { position:sticky; background:rgba(7,8,9,.94); border-color:rgba(198,165,107,.18); }
.lb .site-header__inner { min-height:78px; padding:0; }
.lb .brand { position:relative; padding-left:34px; font-family:Inter,sans-serif; font-size:1.05rem; font-weight:600; letter-spacing:.16em; }
.lb .brand::before { content:''; position:absolute; left:0; top:50%; width:20px; height:28px; transform:translateY(-50%); background:url('../icons/logo.svg') center/contain no-repeat; }
.lb .main-nav { gap:2.2rem; }
.lb .nav-link { color:#d5d1cb; font-size:.86rem; letter-spacing:.045em; }
.lb .nav-link::after { bottom:-10px; height:1px; }
.lb .nav-cta { padding:.72rem 1.15rem; }

/* ---------- Header social icons (desktop): deliberately secondary --
   smaller than nav links, muted until hover, real platform colors rather
   than site gold so they still read as "Instagram"/"Facebook" at a glance. ---------- */
.lb .header-social {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-left: 1.6rem;
    padding-left: 1.6rem;
    border-left: 1px solid rgba(242,238,231,.16);
}
@media (max-width: 1150px) {
    /* Widened from 900px to 1150px: adding the social icons made the full
       desktop header (nav + divider + icons + CTA) genuinely too wide to
       fit at 1024px (confirmed by measuring: header content needed 1118px
       against a 945px available width there) -- moved this breakpoint, and
       the shared one in lahebaar-theme.css that switches nav/CTA to the
       hamburger, up together so both switch at the same point and the
       header never has to fit content wider than its container. */
    .lb .header-social { display: none; }
}
.lb .header-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 0.95rem;
    color: #fff;
    transition: var(--transition, all .2s ease);
}
/* Brand colors are the DEFAULT appearance, not a hover-only reveal -- on
   mobile there is no hover at all, so a hover-only treatment would mean
   these icons never show as Instagram/Facebook-colored there, which
   directly contradicts "use the real platform colors" (confirmed via a
   real screenshot: the mobile menu icons showed as plain muted circles).
   Hover/focus now only adds a subtle scale, matching "slightly brighter/
   clearer... subtle scale" from the spec, rather than being what makes
   the color correct in the first place. */
.lb .header-social-instagram {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.lb .header-social-facebook {
    background: #1877F2;
}
.lb .header-social-icon:hover,
.lb .header-social-icon:focus-visible {
    transform: scale(1.1);
    filter: brightness(1.15);
    outline: none;
}

/* ---------- Mobile menu social section: sits below the main links as its
   own quiet footer-like block, not mixed into the nav list. ---------- */
.mobile-nav-social {
    padding: 1.1rem 0;
    margin-top: 0.4rem;
    border-top: 1px solid rgba(242,238,231,.12);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.mobile-nav-social-label {
    font-size: 0.78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold, #c6a56b);
}
.mobile-nav-social-icons { display: flex; gap: 0.9rem; }
.lb .mobile-nav-social-icons .header-social-icon {
    /* .lb prefix bumps this to 3 classes, beating lahebaar-theme.css's
       ".lb .mobile-nav a" (2 classes + 1 element -- classes are compared
       before element count in CSS specificity, so 3 classes always wins
       regardless). Without this, that theme rule's "display: block" was
       silently overriding the flex centering below, leaving the icon
       glyph sitting at its default inline position in the top-left of
       the circle instead of centered (confirmed via computed style: was
       rendering as "block" instead of "flex"). */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
    padding: 0;
    border-bottom: none;
}
.mobile-nav-cta { margin-top: 0.6rem; }

.lb .hero { min-height:330px; padding:7.2rem 0 4.5rem; display:flex; align-items:center; background:#0e1113; isolation:isolate; }
.lb .hero::before { content:''; position:absolute; inset:0; z-index:-2; background-position:center; background-size:cover; opacity:.42; }
.lb .hero::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(7,8,9,.98) 0%,rgba(7,8,9,.82) 48%,rgba(7,8,9,.42) 100%); }
.lb .home-hero { min-height:630px; text-align:left; }
#nextEventTitle { font-size: 1.8rem; } /* desktop size, unchanged from before; mobile overrides this under 768px below */
.lb .home-hero::before { background-image: var(--home-hero-image, url('../img/temp/hero-background.png')); opacity:.63; }
.lb .menu-hero::before { background-image:url('../img/temp/menu-cocktails.png'); }
.lb .res-hero::before { background-image:url('../img/temp/events-banner.png'); background-position:center 44%; opacity:.42; }
.lb .events-hero::before { background-image:url('../img/temp/events-banner.png'); }
.lb .contact-hero::before { background-image:url('../img/temp/contact-banner.png'); background-position:center 54%; }
.lb .home-hero .hero-content { max-width:740px; margin:0; }
.lb .home-hero .eyebrow,.lb .home-hero .heading-rule { margin-left:0; margin-right:0; }
.lb .home-hero-actions { justify-content:flex-start; }
.lb .eyebrow { font-size:.76rem; letter-spacing:.26em; }
.lb .page-hero-title,.lb .section-title { color:var(--text); letter-spacing:-.025em; }
.lb .page-hero-title { font-size:clamp(3rem,7vw,6.3rem); max-width:900px; }
.lb .home-hero .page-hero-title { font-size:clamp(3.3rem,7vw,6.8rem); line-height:.93; }
.lb .section-title { font-size:clamp(2rem,4.2vw,3.6rem); }
.lb .heading-rule { width:74px; height:1px; }
.lb .section-subtitle { line-height:1.75; }

.lb .section { padding:6.5rem 0; }
.lb .section-alt { background:#0d0f11; border-block:1px solid var(--border); }
.lb .section-head { margin-bottom:3.5rem; }
.lb .feature-grid { grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.lb .feature-block { background:#0c0e10; padding:2rem; min-height:210px; }
.lb .feature-icon { width:46px; height:46px; border-radius:0; background:rgba(198,165,107,.09); }
.lb .feature-heading { display:block; }
.lb .feature-heading h3 { margin-top:1rem; font-size:1rem; text-transform:uppercase; letter-spacing:.09em; }
.lb .image-slot,.lb .card,.lb .contact-info-panel,.lb .contact-form-panel,.lb .res-panel,.lb .map-panel,.lb .map-wrap { border-radius:2px!important; }
.lb .home-gallery,.lb .about-gallery { gap:1rem!important; }
.lb .image-slot img { filter:saturate(.82) contrast(1.04); }

.lb .btn { min-height:50px; border-radius:0; letter-spacing:.13em; padding:.9rem 1.6rem; }

/* ---------- Shared public-facing form input styling ---------- */
/* This class was already used by the Privaatpeod form and every page
   builder form/embed block, but was never actually defined anywhere in
   the public site's CSS -- each existing form (reservations, contact)
   had instead built its own one-off input styling per page. Without
   this, .form-input fields fell back to the browser's native white
   input appearance, clashing hard with the dark theme (confirmed via a
   real screenshot showing exactly this). */
.lb .form-input {
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    color: var(--text);
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.lb .form-input::placeholder { color: rgba(245,243,239,0.4); }
.lb .form-input:focus {
    outline: none;
    border-color: var(--gold, #c6a56b);
    background: rgba(255,255,255,0.05);
}
.lb textarea.form-input { resize: vertical; min-height: 90px; }
.lb select.form-input {
    /* Native <select> option lists are rendered by the OS, not this CSS,
       and can otherwise show white-on-white on some browsers -- forcing
       both the closed box and color-scheme keeps the dropdown itself
       readable against this dark theme. */
    color-scheme: dark;
    cursor: pointer;
}
.lb .form-input[type="date"],
.lb .form-input[type="time"] {
    color-scheme: dark;
}

.lb .btn-solid { background:linear-gradient(110deg,#b99557,#dec17e); border-color:#d8b973; }
.lb .btn-outline { color:var(--text); border-color:rgba(242,238,231,.35); }
.lb .btn-outline:hover { background:var(--gold); border-color:var(--gold); color:#0a0b0c; }

.lb .menu-type-tabs { justify-content:flex-start; border-bottom:1px solid var(--border); gap:0; }
.lb .menu-type-tab { border:0; border-bottom:2px solid transparent; border-radius:0; padding:1rem 2.2rem; }
.lb .menu-type-tab.active { color:var(--gold); background:transparent; border-bottom-color:var(--gold); }
.lb .menu-masonry { column-gap:1.25rem; }
.lb .menu-category-block { background:#101214; border:1px solid var(--border); padding:1.6rem; }
.lb .menu-category-header { border-bottom:1px solid var(--border-gold); }
.lb .menu-category-item { padding:1.05rem 0; }
.lb .menu-category-item-price { font-variant-numeric:tabular-nums; }
.lb .menu-cta-band { border-left:2px solid var(--gold); }

.lb .events-grid { grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:1.25rem!important; align-items:stretch!important; }
.lb .event-card { display:flex; flex-direction:column; height:100%; min-width:0; background:#0c0e10; }
.lb .card-media { aspect-ratio:16/9; flex:none; border-bottom:1px solid var(--border); }
.lb .event-poster { background-color:#08090a!important; background-size:contain!important; background-repeat:no-repeat!important; background-position:center!important; }
.lb .featured-event { align-items:start; }
.lb .featured-event .event-poster-featured { width:100%; min-height:0!important; aspect-ratio:16/9; align-self:start; }
.lb .card-body { display:flex; flex:1; flex-direction:column; padding:1.45rem; }
.lb .event-card-title { font-size:1.2rem!important; line-height:1.35; }
.lb .event-description { white-space:pre-wrap; overflow-wrap:anywhere; }
.lb .event-card-desc { min-height:5.8em; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.lb .event-card-actions { margin-top:auto; padding-top:1.3rem; }
.lb .featured-event { border:1px solid var(--border-gold)!important; background:#0f1113!important; }

.lb .about-hero-grid { gap:5rem; }
.lb .about-hero .image-slot { min-height:430px!important; border:1px solid var(--border-gold); }

.lb .res-layout { grid-template-columns:minmax(0,1fr) 360px!important; gap:1.5rem!important; }
.lb .res-panel { background:#101214!important; border:1px solid var(--border)!important; padding:2rem!important; }
.lb .step-indicator { margin-bottom:2.5rem!important; }
.lb .step-circle { width:40px!important; height:40px!important; background:#0b0d0f!important; border:1px solid #697078!important; }
.lb .step-node.active .step-circle,.lb .step-node.done .step-circle { color:#111!important; background:var(--gold)!important; border-color:var(--gold)!important; }
.lb .step-node.active .step-label { color:var(--gold)!important; }
.lb .notice-banner { background:rgba(198,165,107,.08)!important; border:1px solid var(--border-gold)!important; color:#e3d4b8!important; }
.lb .guest-stepper { height:54px; border:1px solid var(--border); background:#0b0d0f; }
.lb .guest-stepper button { color:var(--text); }
.lb .review-block { background:#0b0d0f!important; border:1px solid var(--border)!important; }
.lb .info-card { position:sticky; top:100px; }

.lb .form-field label { color:#ddd7ce; font-weight:600; }
.lb .form-field input,.lb .form-field select,.lb .form-field textarea { min-height:52px; background:#0b0d0f; border:1px solid #3a3e43; }
.lb .form-field textarea { min-height:130px; }
.lb .form-field input:focus,.lb .form-field select:focus,.lb .form-field textarea:focus { box-shadow:0 0 0 3px rgba(198,165,107,.1); }

.lb .contact-grid { gap:1px; background:var(--border); border:1px solid var(--border); }
.lb .contact-info-panel,.lb .contact-form-panel { border:0!important; background:#0f1113!important; padding:2.5rem!important; }
.lb .contact-info-icon { border-radius:0; border:1px solid var(--border-gold); background:transparent; }
.lb .map-panel { min-height:390px!important; background:url('../img/temp/contact-banner.png') center/cover!important; position:relative; overflow:hidden; }
.lb .map-panel::before { content:''; position:absolute; inset:0; background:rgba(7,8,9,.74); }
.lb .map-panel>* { position:relative; }
.lb .map-wrap { margin-top:2.5rem; border:1px solid var(--border); overflow:hidden; background:#0f1113; }
.lb .map-embed { display:block; width:100%; height:390px; border:0; filter:grayscale(1) invert(.9) contrast(.9); }
.lb .map-actions { display:flex; justify-content:space-between; align-items:center; gap:2rem; padding:1.4rem 1.6rem; border-top:1px solid var(--border); }
.lb .map-actions .eyebrow { margin-bottom:.35rem; }

.lb .site-footer { background:#060708; padding-top:4rem; }
.lb .footer-grid { grid-template-columns:1.5fr 1fr 1fr .8fr; }
.lb .footer-col h4 { font-size:.75rem; letter-spacing:.18em; }
.lb .secret-access { width:8px; height:8px; opacity:.45; }

@media (max-width:900px) {
  .lb .container { width:min(100% - 32px,var(--container)); }
  .lb .site-header__inner { min-height:70px; }
  .lb .hero { min-height:300px; padding:6rem 0 3rem; }
  .lb .home-hero { min-height:570px; }
  .lb .home-hero::after { background:linear-gradient(180deg,rgba(7,8,9,.28),rgba(7,8,9,.95) 86%); }
  .lb .page-hero-title { font-size:clamp(2.6rem,11vw,4.5rem); }
  .lb .feature-grid { grid-template-columns:1fr; }
  .lb .feature-block { min-height:auto; }
  .lb .events-grid { grid-template-columns:1fr 1fr!important; }
  .lb .res-layout { grid-template-columns:1fr!important; }
  .lb .info-card { position:static; }
  .lb .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:620px) {
  .lb .container { width:calc(100% - 34px); }
  .lb .brand { font-size:.9rem; }
  .lb .hero { min-height:270px; padding:5.5rem 0 2.8rem; }
  /* .lb .home-hero / .page-hero-title mobile sizing consolidated into the
     single homepage mobile block at the end of this file -- removed here
     to avoid two competing definitions for the same viewport range. */
  .lb .section { padding:4.5rem 0; }
  .lb .section-tight { padding:2.5rem 0; }
  .lb .events-grid { grid-template-columns:1fr!important; }
  .lb .event-card-desc { min-height:0; }
  .lb .menu-type-tabs { overflow-x:auto; flex-wrap:nowrap; }
  .lb .menu-type-tab { flex:1; padding:.9rem 1rem; }
  .lb .about-hero-grid { gap:2.2rem; }
  .lb .about-hero .image-slot { min-height:300px!important; }
  .lb .res-panel { padding:1.25rem!important; }
  .lb .step-label { font-size:.7rem!important; }
  .lb .step-line { margin-inline:.4rem!important; }
  .lb .step-actions { display:grid!important; grid-template-columns:1fr 1.4fr; }
  .lb .contact-grid { display:block; }
  .lb .contact-info-panel,.lb .contact-form-panel { padding:1.4rem!important; }
  .lb .contact-form-panel { border-top:1px solid var(--border)!important; }
  .lb .map-embed { height:310px; }
  .lb .map-actions { display:block; }
  .lb .map-actions .btn { width:100%; margin-top:1.2rem; }
  .lb .footer-grid { grid-template-columns:1fr; }
  .lb .footer-bottom { display:block; }
  .lb .footer-bottom a { display:block; margin-top:.8rem; }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

/* 2026 compact editorial composition — faithful to the approved mockups */
body.lb { background:#080a0b; }
.lb .container { width:min(calc(100% - 64px),1240px); }
.lb .site-header__inner { min-height:70px; }
.lb .site-header { position:relative; }
.lb .nav-cta { min-width:176px; justify-content:center; }
.lb .hero:not(.home-hero) { min-height:285px; padding:52px 0 42px; }
.lb .hero:not(.home-hero) .hero-content { max-width:760px; margin:0; text-align:left; }
.lb .hero:not(.home-hero) .eyebrow,
.lb .hero:not(.home-hero) .heading-rule { margin-left:0; margin-right:0; }
.lb .hero:not(.home-hero) .page-hero-title { font-size:clamp(3.4rem,5.5vw,5.2rem); line-height:.92; text-transform:uppercase; }
.lb .hero:not(.home-hero) .section-subtitle { max-width:620px; margin-inline:0; }
.lb .section { padding:48px 0; }
.lb .section-tight { padding:34px 0; }
.lb .section-head { margin-bottom:28px; }
.lb .site-footer { padding:0; border-top:1px solid var(--border); }
.lb .site-footer .footer-grid { display:none; }
.lb .footer-bottom { min-height:68px; padding:18px 0; align-items:center; }
.lb .footer-bottom::before { content:'LAHE BAAR'; color:var(--text); font-weight:800; letter-spacing:.28em; margin-right:auto; }

/* Home */
.page-home .home-hero { min-height:560px; padding:90px 0 70px; }
.page-home .home-hero .page-hero-title { max-width:700px; }
.page-home .feature-block { min-height:170px; padding:26px; }
.page-home .home-gallery { max-height:360px; overflow:hidden; }

/* Menu */
.page-menu .menu-hero { min-height:310px!important; }
.page-menu .menu-hero::before { opacity:.55; background-position:70% 55%; }
.page-menu .menu-hero::after { background:linear-gradient(90deg,#070809 0%,rgba(7,8,9,.94) 38%,rgba(7,8,9,.22) 100%); }
.page-menu .menu-hero .hero-content { max-width:640px; }
.page-menu .menu-type-tabs { margin:0 0 28px; justify-content:center; }
.page-menu .menu-type-tab { flex:0 0 auto; padding:12px 22px; font-size:.74rem; }
.page-menu .menu-masonry { columns:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 64px; }
.page-menu .menu-category-block { display:block; margin:0; padding:0; border:0; background:transparent; }
.page-menu .menu-category-header { padding:14px 0 12px; margin:0; border-bottom:1px solid var(--border-gold); }
.page-menu .menu-category-item { padding:13px 0; }
.page-menu .menu-item-thumb { width:46px; height:46px; border-radius:0; }
.page-menu .menu-cta-band { min-height:150px; margin-top:36px; padding:30px 38px 30px 43%; border:1px solid var(--border); background:linear-gradient(90deg,rgba(8,10,11,.1),#101214 51%),url('../img/temp/gallery-interior.png') left center/48% cover no-repeat; }

/* Reservations */
.page-reservations .res-hero { min-height:300px!important; padding-bottom:28px!important; }
.page-reservations .res-hero .hero-inner { width:min(calc(100% - 64px),1240px); display:grid; grid-template-columns:minmax(0,760px); }
.page-reservations .res-hero .hero-content { max-width:760px; }
.page-reservations .res-hero .step-indicator { width:min(100%,720px); margin:30px 0 0!important; }
.page-reservations .step-circle { width:34px!important; height:34px!important; }
.page-reservations .step-indicator .step-line { background:rgba(242,238,231,.28); }
.page-reservations .section { padding:32px 0 42px!important; }
.page-reservations .res-layout { grid-template-columns:minmax(0,1fr) 340px!important; gap:18px!important; max-width:1050px; }
.page-reservations .res-panel { padding:24px!important; }
.page-reservations .form-field { margin-bottom:16px; }
.page-reservations .form-field textarea { min-height:96px; }
.page-reservations .info-card { top:82px; }
.page-reservations .info-card .image-slot { min-height:190px!important; }
.page-reservations .review-block { padding:15px!important; margin-bottom:12px!important; }
.page-reservations .terms-box { margin-top:14px!important; }

/* Events */
.page-events .events-hero { min-height:245px!important; }
.page-events .section { padding:36px 0 44px!important; }
.page-events .featured-event { grid-template-columns:1fr 1fr!important; max-height:none; }
.page-events .featured-event .event-poster-featured { aspect-ratio:16/9; height:auto!important; }
.page-events .featured-event .card-body { padding:28px; }
.page-events .events-grid { gap:16px!important; margin-top:24px!important; }
.page-events .event-card-desc { min-height:0; -webkit-line-clamp:5; }

/* About */
.page-about .about-hero { min-height:360px!important; }
.page-about .about-hero-grid { grid-template-columns:1fr 1fr; gap:42px; align-items:center; }
.page-about .about-hero .image-slot { min-height:300px!important; }
.page-about .section { padding:42px 0; }
.page-about .feature-block { min-height:170px; }
.page-about .about-gallery { max-height:360px; overflow:hidden; }

/* Contact */
.page-contact .contact-hero { min-height:250px!important; }
.page-contact .contact-hero::after { background:linear-gradient(90deg,rgba(7,8,9,.98) 0%,rgba(7,8,9,.8) 46%,rgba(7,8,9,.18) 100%); }
.page-contact .section { padding:30px 0 0!important; }
.page-contact .contact-grid { grid-template-columns:.9fr 1.1fr; }
.page-contact .contact-info-panel,.page-contact .contact-form-panel { padding:25px!important; }
.page-contact .contact-info-item { padding:10px 0; }
.page-contact .contact-info-icon { width:42px; height:42px; }
.page-contact .form-field { margin-bottom:12px; }
.page-contact .form-field input { min-height:44px; }
.page-contact .form-field textarea { min-height:82px; }
.page-contact .map-wrap { margin-top:16px; }
.page-contact .map-embed { height:220px; }
.page-contact .map-actions { padding:13px 18px; }
.page-contact .site-footer { margin-top:28px; }

@media (max-width:900px) {
  .lb .container { width:min(calc(100% - 34px),1240px); }
  .lb .hero:not(.home-hero) { min-height:250px; padding:46px 0 34px; }
  .lb .site-footer .footer-bottom::before { display:none; }
  .page-menu .menu-masonry { gap:10px 28px; }
  .page-reservations .res-hero .hero-inner { width:min(calc(100% - 34px),1240px); }
  .page-events .featured-event { grid-template-columns:1fr!important; }
  .page-about .about-hero-grid { grid-template-columns:1fr; }
  .page-about .about-hero .image-slot { display:none; }
}

@media (max-width:620px) {
  .lb .site-header__inner { min-height:66px; }
  .lb .hero:not(.home-hero) { min-height:230px; padding:38px 0 30px; }
  .lb .hero:not(.home-hero) .page-hero-title { font-size:clamp(2.7rem,13vw,4rem); }
  .lb .section { padding:34px 0; }
  .lb .footer-bottom { min-height:62px; font-size:.72rem; }
  /* .page-home .home-hero mobile min-height consolidated into the single
     homepage mobile block at the end of this file. */
  .page-menu .menu-hero { min-height:310px!important; }
  .page-menu .menu-masonry { grid-template-columns:1fr; }
  .page-menu .menu-type-tabs { justify-content:flex-start; }
  .page-menu .menu-type-tab { flex:0 0 auto; padding:11px 16px; }
  .page-menu .menu-cta-band { min-height:180px; padding:86px 20px 22px; background:linear-gradient(0deg,#101214 0%,rgba(8,10,11,.42) 100%),url('../img/temp/gallery-interior.png') center/cover; }
  .page-reservations .res-hero { min-height:330px!important; }
  .page-reservations .res-hero .step-indicator { margin-top:25px!important; }
  .page-reservations .res-panel { padding:18px!important; }
  .page-events .featured-event .card-body { padding:20px; }
  .page-about .about-hero { min-height:280px!important; }
  .page-contact .contact-hero { min-height:235px!important; }
  .page-contact .contact-grid { display:block; }
  .page-contact .map-embed { height:250px; }
  .page-contact .map-actions { padding:15px; }
}

/* Shared inner-page hero rhythm, September 2026. */
html { scrollbar-gutter: stable; }
body.lb .hero:not(.home-hero) {
  box-sizing: border-box;
  min-height: 340px !important;
  padding: 32px 0 !important;
  align-items: center;
}
body.lb .hero:not(.home-hero) .page-hero-title {
  font-size: clamp(2.7rem, 4.5vw, 4rem) !important;
  line-height: 1.04;
  margin: 0;
}
body.lb .hero:not(.home-hero) .eyebrow { margin: 0 0 16px; }
body.lb .hero:not(.home-hero) .heading-rule { margin: 18px 0; }
body.lb .hero:not(.home-hero) .section-subtitle { margin: 0; line-height: 1.5; }
body.lb .about-hero .image-slot { min-height: 0 !important; height: 220px; overflow: hidden; }
body.lb .about-hero .image-slot img { width: 100%; height: 100%; object-fit: cover; }
body.lb .res-hero .step-indicator { margin: 24px 0 0 !important; }
body.lb .hero + .section { padding-top: 32px !important; }
@media (max-width: 620px) {
  body.lb .hero:not(.home-hero) { min-height: 380px !important; padding: 28px 0 !important; }
  body.lb .hero:not(.home-hero) .page-hero-title { font-size: clamp(2.2rem, 10vw, 3.1rem) !important; }
  body.lb .hero + .section { padding-top: 24px !important; }
}

/* Reservation mobile repair: override the later desktop two-column rule. */
@media (max-width:900px) {
  body.lb.page-reservations .res-layout {
    grid-template-columns:minmax(0,1fr)!important;
    width:100%; max-width:100%; gap:18px!important;
  }
  body.lb.page-reservations .res-layout>.res-panel {
    min-width:0; width:100%; max-width:100%; box-sizing:border-box;
  }
  body.lb.page-reservations .info-card { position:static; }
  body.lb.page-reservations .form-row { display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
  body.lb.page-reservations .form-field { min-width:0; }
  body.lb.page-reservations .form-field input,
  body.lb.page-reservations .form-field select,
  body.lb.page-reservations .form-field textarea,
  body.lb.page-reservations #dateDisplay {
    box-sizing:border-box; width:100%; min-width:0; max-width:100%; font-size:16px;
  }
  body.lb.page-reservations .guest-stepper { width:100%; box-sizing:border-box; }
  body.lb.page-reservations .guest-stepper span { flex:1; }
  body.lb.page-reservations .guest-stepper button { flex:0 0 54px; min-height:48px; }
  body.lb.page-reservations .step-actions {
    display:flex!important; flex-wrap:wrap; gap:12px; margin-top:24px;
  }
  body.lb.page-reservations .step-actions .btn {
    flex:1 1 150px; min-width:0; max-width:100%; min-height:48px;
    box-sizing:border-box; padding:12px 16px; white-space:normal;
  }
  body.lb.page-reservations .review-row { display:grid; grid-template-columns:90px minmax(0,1fr); gap:12px; }
  body.lb.page-reservations .review-row span { min-width:0; overflow-wrap:anywhere; }
  body.lb.page-reservations .checkbox-field { align-items:flex-start; }
  body.lb.page-reservations .checkbox-field label { min-width:0; overflow-wrap:anywhere; }
  body.lb.page-reservations .info-card .image-slot { min-height:0!important; aspect-ratio:16/9; }
}
@media (max-width:620px) {
  body.lb.page-reservations .res-panel { padding:18px!important; }
  body.lb.page-reservations .res-hero .step-indicator {
    display:grid; grid-template-columns:auto minmax(8px,1fr) auto minmax(8px,1fr) auto;
    gap:10px; width:100%;
  }
  body.lb.page-reservations .step-node { flex-direction:column; gap:7px; }
  body.lb.page-reservations .step-line { width:100%; margin:0 0 23px!important; min-width:0; }
  body.lb.page-reservations .step-label { font-size:12px!important; }
  body.lb.page-reservations .terms-modal { padding:12px; }
  body.lb.page-reservations .terms-modal-content { box-sizing:border-box; padding:20px; max-height:85dvh; }
}

/* Page titles already identify the section; omit decorative hero labels. */
body.lb .hero .eyebrow { display:none; }

/* Consistent public-page header and hero alignment. */
body.lb .container,
body.lb.page-reservations .res-hero .hero-inner {
  width:min(calc(100% - 64px),1240px);
}
body.lb .site-header__inner { min-height:70px; }
body.lb .brand {
  padding-left:0; font-family:Inter,sans-serif; font-size:22px;
  font-weight:600; letter-spacing:.24em;
}
body.lb .brand::before { display:none; }
body.lb .hero:not(.home-hero) {
  align-items:flex-start;
  padding:60px 0 32px!important;
}
body.lb .hero:not(.home-hero)::before { opacity:.68; }
body.lb .hero:not(.home-hero)::after {
  background:linear-gradient(90deg,rgba(7,8,9,.98) 0%,rgba(7,8,9,.82) 48%,rgba(7,8,9,.42) 100%);
}
body.lb .hero:not(.home-hero) .section-subtitle { font-size:18px; }
body.lb .about-hero-grid { align-items:start; }
@media(max-width:900px) {
  body.lb .container,
  body.lb.page-reservations .res-hero .hero-inner { width:calc(100% - 34px); }
}
@media(max-width:620px) {
  body.lb .site-header__inner { min-height:66px; }
  body.lb .brand { font-size:17px; }
  body.lb .hero:not(.home-hero) { padding:38px 0 28px!important; }
  body.lb .hero:not(.home-hero) .section-subtitle { font-size:16px; }
}

/* Balance menu categories vertically without shared, empty grid rows. */
body.lb.page-menu .menu-masonry {
  display:block;
  column-count:2;
  column-gap:64px;
  column-fill:balance;
}
body.lb.page-menu .menu-category-block {
  display:inline-block;
  width:100%;
  box-sizing:border-box;
  break-inside:avoid;
  page-break-inside:avoid;
  margin:0 0 22px;
  vertical-align:top;
}
@media(max-width:900px) {
  body.lb.page-menu .menu-masonry { column-gap:28px; }
}
@media(max-width:620px) {
  body.lb.page-menu .menu-masonry { column-count:1; }
}

/* Mobile navigation: visible close control and readable booking action. */
body.lb .mobile-nav { box-sizing:border-box; padding:88px 28px 28px; }
body.lb .mobile-nav-close {
  position:absolute; top:16px; right:20px; display:flex;
  align-items:center; justify-content:center; width:44px; height:44px;
  padding:0; background:transparent; border:1px solid var(--border-gold);
  color:var(--text); font-size:24px; cursor:pointer;
}
body.lb .mobile-nav-close:hover { color:var(--gold-light); border-color:var(--gold); }
body.lb .mobile-nav-close:focus-visible { outline:2px solid var(--gold-light); outline-offset:3px; }
body.lb .mobile-nav a.btn.btn-solid {
  display:flex; align-items:center; justify-content:center;
  width:100%; box-sizing:border-box; min-height:52px; padding:14px 18px;
  color:#17130f; text-align:center; font-size:13px; font-weight:800;
  letter-spacing:.1em; line-height:1.4; border:1px solid #d8b973;
  white-space:normal; background:#cfaf6c;
  transition:background-color .18s ease,color .18s ease;
  transform:none; box-shadow:none;
}
body.lb .mobile-nav a.btn.btn-solid:hover,
body.lb .mobile-nav a.btn.btn-solid:focus-visible { color:#17130f; background:#e1c181; transform:none; }

/* Explicit independent menu stacks; preserve the opening category pairs. */
body.lb.page-menu .menu-masonry {
  display:grid; column-count:auto;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1px; gap:0 64px; align-items:start;
}
body.lb.page-menu .menu-category-block {
  display:block; margin:0; min-width:0; align-self:start;
}
body.lb.page-menu .menu-masonry>.menu-empty { grid-column:1/-1; grid-row:span 150; margin:0; }
@media(max-width:900px) {
  body.lb.page-menu .menu-masonry { column-gap:28px; }
}
@media(max-width:620px) {
  body.lb.page-menu .menu-masonry { display:block; }
  body.lb.page-menu .menu-category-block { margin-bottom:22px; }
}

/* ============================================================================
   HOMEPAGE MOBILE REDESIGN (index.php only), <768px
   Added as one consolidated block placed last in the file so it reliably
   wins the cascade against the older scattered 620px/900px rules above for
   these same selectors, instead of adding yet another override layer.
   Desktop (≥768px) and every other page are unaffected.
   ============================================================================ */
@media (max-width: 768px) {

  /* ---------- Layout: visual order + local tokens + sticky-bar clearance.
     Header > hero > next event > features > gallery > footer is a pure CSS
     flex reorder of the existing DOM nodes -- nothing duplicated, no JS/
     content changes. Fixed-position elements (mobile nav drawer, overlay,
     sticky bar, secret link) are unaffected since fixed positioning removes
     them from normal flow regardless of flex order. */
  body.lb.page-home {
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    --sp-xs: 14px;   /* small spacing: 12-16px */
    --sp-sm: 28px;   /* content spacing: 24-32px */
    --sp-md: 84px;   /* section spacing: 72-96px */
  }
  body.lb.page-home > .site-header      { order: 1; }
  body.lb.page-home > .home-hero        { order: 2; }
  body.lb.page-home > #nextEventSection { order: 3; }
  body.lb.page-home > .feature-section  { order: 4; }
  body.lb.page-home > .gallery-section  { order: 5; }
  body.lb.page-home > .site-footer      { order: 6; }

  /* ---------- Typography contrast (mobile only; desktop untouched) ---------- */
  .page-home .section-subtitle,
  .page-home .feature-block p {
    color: #c5c1ba; /* body copy: readable against black, not muted grey */
  }
  .page-home .muted,
  .page-home #nextEventMeta {
    /* !important needed: an equal-specificity `.lb .muted` rule elsewhere
       does not reliably lose on source order here (verified empirically --
       removing !important regressed the footer's muted text color back to
       the old value). #nextEventMeta is an ID selector, listed explicitly
       since it IS meta/secondary info (a date + time line) and would
       otherwise not match the .muted rule at all. */
    color: #99958f !important;
  }

  /* ---------- Shared mobile button sizing (hero + next-event CTA) ---------- */
  .page-home .home-hero-actions .btn,
  .page-home .next-event-teaser .btn {
    min-height: 54px;
    padding: 0 14px;
    font-size: 13.5px;
    letter-spacing: 0.06em;
  }


  /* ---------- Hero (task 2) ---------- */
  .lb .home-hero {
    min-height: 0;
    height: auto;
    padding: 56px 0 42px;
    align-items: flex-end;
  }
  .lb .home-hero::after {
    /* Strengthened overlay so headline/paragraph stay readable over the
       photo without hiding it -- photo is kept, not replaced. Top stop
       bumped slightly further (.30->.38) per a follow-up readability pass;
       the photo is still clearly visible, just with a bit more separation
       behind the bold white headline specifically. */
    background: linear-gradient(180deg, rgba(7,8,9,.38) 0%, rgba(7,8,9,.90) 72%, rgba(7,8,9,.97) 100%);
  }
  .lb .home-hero .container { width: calc(100% - 44px); }
  .lb .home-hero .hero-content { max-width: 100%; }
  .lb .home-hero .page-hero-title {
    font-size: clamp(2.8rem, 11vw, 4.2rem);
    line-height: 0.90;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    overflow-wrap: break-word; /* safety net: at ~320px, "SELTSKOND." alone
      measures wider than the available column at this font-size floor, so
      without this it would clip/overflow rather than wrap. See summary. */
  }
  .lb .home-hero .heading-rule { margin: 0 0 20px; width: 52px; }
  .lb .home-hero .section-subtitle {
    font-size: clamp(16px, 4vw, 18px);
    line-height: 1.55;
    margin: 0 0 28px !important; /* a competing .section-subtitle
      centering rule (equal specificity, applies auto horizontal margins on
      wider mobile widths) otherwise wins; font-size/line-height above don't
      have this conflict and don't need !important */
    max-width: 36ch;
  }
  .lb .home-hero-actions { margin-top: 0; gap: 12px; }
  .lb .home-hero-actions .btn { flex: 1 1 auto; }
  .lb .home-hero-actions .btn-solid {
    flex-grow: 1.3; /* primary CTA stays visually dominant */
  }
  .lb .home-hero-actions .btn-outline {
    /* Secondary action: lighter weight, less visually heavy. */
    background: rgba(255,255,255,0.02);
    border-color: rgba(242,238,231,.22);
    color: #d9d5cd;
  }

  /* ---------- Feature section (task 3) ---------- */
  body.lb.page-home .feature-section {
    padding: var(--sp-md) 0 !important; /* !important + the body.lb.page-home
      prefix matches the specificity of a legacy `body.lb .hero + .section`
      sibling rule elsewhere, which -- despite also using !important -- still
      matches this section by DOM order even though Next Event now sits
      between them visually after the reorder above. Without matching both
      its specificity and its !important, that older rule would win. */
  }
  .page-home .feature-section .section-head {
    margin-bottom: var(--sp-sm);
  }
  .page-home .feature-section .section-title {
    font-size: clamp(1.7rem, 6.8vw, 2.1rem); /* ~15-20% smaller than desktop clamp */
    line-height: 1.15;
  }
  .page-home .feature-grid {
    grid-template-columns: 1fr;
    gap: 1px; /* existing hairline separator style, not rounded cards */
  }
  .page-home .feature-block {
    min-height: 0;
    padding: 30px 28px; /* ~28-32px internal padding */
  }
  .page-home .feature-block .feature-heading {
    margin-bottom: 12px;
  }
  .page-home .feature-block p {
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
  }

  /* ---------- Gallery: keep large photos but cap total mobile length ---------- */
  .page-home .gallery-section { padding: var(--sp-sm) 0 var(--sp-md); }
  .page-home .home-gallery {
    grid-template-columns: 1fr;
    gap: var(--sp-xs);
    max-height: none; /* let aspect-ratio govern height, no hard cap that crops oddly */
  }
  .page-home .home-gallery .image-slot { aspect-ratio: 4 / 3; }
  .page-home .home-gallery .image-slot img { width: 100%; height: 100%; object-fit: cover; }

  /* ---------- Next event teaser (tasks 4 & 5) ---------- */
  .page-home #nextEventSection {
    padding: 36px 0 44px;
    border-top: none; /* was mid-page section-alt divider; not needed at top */
  }
  .page-home .next-event-teaser {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .page-home .next-event-teaser > div { width: 100%; }
  .page-home #nextEventTitle {
    font-size: clamp(2rem, 8.5vw, 3rem);
    line-height: 1.0;
    text-align: left;
    overflow-wrap: break-word;
    hyphens: auto;
    margin: 0 0 8px;
  }
  .page-home #nextEventTitle .next-event-category {
    display: block;
    font-size: clamp(16px, 4.5vw, 19px); /* fixed range, not relative to the
      event-name font-size above -- previously this used a relative "em"
      unit (0.42em of the parent), which meant a long event name pushing
      the clamp toward its upper bound also oversized this category label
      well past the 16-19px target. */
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--gold, #c6a56b);
    text-transform: uppercase;
    margin-bottom: 6px;
    line-height: 1.2;
  }
  .page-home #nextEventMeta {
    font-size: clamp(16px, 4vw, 18px);
    margin: 0;
  }
  .page-home .next-event-teaser .btn { width: 100%; }

}

/* ---------- Very narrow screens: hero headline needs one more size step
   down so it doesn't dominate the viewport on the smallest phones. ---------- */
@media (max-width: 380px) {
  .lb .home-hero .page-hero-title {
    font-size: clamp(2.6rem, 10.5vw, 3.6rem);
  }
}

/* ==========================================================================
   Logo from admin (Seaded -> Logo ja favicon). site-common.js swaps the
   header's "LAHE BAAR" text for the logo and adds it centered at the top of
   the mobile menu. Sizes come from admin via --lb-logo-h / --lb-mobile-logo-h.
   ========================================================================== */
/* Logo remembered from a previous visit: hide the text for the split second
   before the logo is swapped in, and reserve the logo's height already. */
html[data-lb-logo] .site-header .brand:not(.brand--logo) { visibility:hidden; min-height:var(--lb-logo-h,56px); display:flex; align-items:center; }

body.lb .site-header .brand.brand--logo {
  display:flex; align-items:center; flex-shrink:0;
  padding:8px 0; letter-spacing:0; font-size:0; line-height:0;
}
body.lb .site-header .brand-logo {
  display:block; height:var(--lb-logo-h,56px); width:auto; max-width:260px; object-fit:contain;
}
/* White-on-black logos: "screen" makes the black background disappear into
   the dark header. Colored logos on transparent backgrounds look the same
   either way (the header is almost black), so this is safe to leave on. */
html.lb-logo-blend body.lb .site-header .brand-logo,
html.lb-logo-blend body.lb .mobile-nav-logo img { mix-blend-mode:screen; }

@media(max-width:620px) {
  body.lb .site-header .brand-logo { height:min(var(--lb-logo-h,56px), 48px); max-width:180px; }
}

/* Mobile menu: logo centered above the links. The close button sits in the
   top-right corner, so the menu can start higher than without a logo. */
body.lb .mobile-nav.has-logo { padding-top:24px; }
body.lb .mobile-nav a.mobile-nav-logo {
  display:flex; justify-content:center; align-items:center;
  padding:12px 0 22px; margin:0 0 6px; border-bottom:0;
}
body.lb .mobile-nav a.mobile-nav-logo img {
  display:block; height:var(--lb-mobile-logo-h,100px); width:auto; max-width:calc(100% - 100px); object-fit:contain; /* stays clear of the close button */
}

/* Per-text look chosen in admin (Veebilehe sisu). Sizes are set by
   site-common.js relative to each text's own size. */
.ck-hidden { display:none !important; }
.ck-accent { color:var(--gold, #d4af37) !important; -webkit-text-fill-color:currentColor; }
.ck-bold { font-weight:700 !important; }
.ck-normal { font-weight:400 !important; }

/* ===== Mobile menu: everything fits on one phone screen =====
   Tighter link spacing (still ~44px tall -- a comfortable tap target), a
   little less room around the logo, and "Broneeri laud" placed right under
   the links (above "Jälgi meid") so it never needs scrolling. */
body.lb .mobile-nav { display:flex; flex-direction:column; }
body.lb .mobile-nav > a.mobile-nav-logo { order:0; padding:4px 0 14px; margin:0; }
body.lb .mobile-nav > nav { order:1; }
body.lb .mobile-nav > .mobile-nav-cta { order:2; margin-top:1.1rem; flex-shrink:0; }
body.lb .mobile-nav > .mobile-nav-social { order:3; margin-top:1rem; }
body.lb .mobile-nav nav a { padding:0.7rem 0; }
@media (max-height: 700px) {
  body.lb .mobile-nav nav a { padding:0.55rem 0; font-size:1rem; }
  body.lb .mobile-nav a.mobile-nav-logo img { height:min(var(--lb-mobile-logo-h,100px), 72px); }
}

/* ===== Menu page: more compact list (less scrolling) =====
   Items without a description get a single tight row; descriptions sit
   right under the name. */
body.lb.page-menu .menu-category-item { padding:8px 0; }
body.lb.page-menu .menu-category-item-desc { margin-top:1px; line-height:1.35; font-size:.84rem; }
body.lb.page-menu .menu-category-header { padding:10px 0 8px; }
body.lb.page-menu .menu-category-block { margin-bottom:18px; }
@media (max-width:700px) {
  body.lb.page-menu .menu-category-item { padding:9px 0; }
}

/* ===== Announcement bar (Seaded -> Teadaanne) ===== */
.announce-bar { position:relative; z-index:60; display:flex; align-items:center; justify-content:center; gap:.75rem; padding:.65rem 3rem .65rem 1rem; font-size:.9rem; line-height:1.4; text-align:center; }
.announce-inner { display:flex; align-items:center; justify-content:center; gap:.4rem 1rem; flex-wrap:wrap; }
.announce-text { font-weight:600; }
.announce-link { font-weight:700; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.announce-close { position:absolute; right:.5rem; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; background:transparent; font-size:1.4rem; line-height:1; cursor:pointer; opacity:.75; }
.announce-close:hover { opacity:1; }
.announce-gold { background:linear-gradient(110deg,#b99557,#dec17e); color:#17130f; }
.announce-gold .announce-link, .announce-gold .announce-close { color:#17130f; }
.announce-red { background:#b3312d; color:#fff; }
.announce-red .announce-link, .announce-red .announce-close { color:#fff; }
.announce-dark { background:#15171a; color:#f2eee7; border-bottom:1px solid rgba(198,165,107,.35); }
.announce-dark .announce-link { color:var(--gold, #d4af37); }
.announce-dark .announce-close { color:#f2eee7; }
@media (max-width:600px) { .announce-bar { font-size:.84rem; padding:.6rem 2.6rem .6rem .8rem; } }

/* ===== Special opening days under the regular hours ===== */
.hours-special { margin-top:.9rem; padding-top:.75rem; border-top:1px dashed rgba(198,165,107,.35); }
.hours-special-title { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold, #d4af37); margin-bottom:.35rem; }
.hours-row-special small { display:block; font-size:.78rem; opacity:.7; }
.hours-row-special.is-today { color:var(--gold, #d4af37); font-weight:600; }

/* Contact page: the contact-details column stretches to the same height as
   the form, so no lighter empty box shows under it. */
body.lb.page-contact .contact-grid { align-items:stretch; }
body.lb.page-contact .contact-info-panel { height:100%; box-sizing:border-box; }

/* ===== Menüü: bottom "Broneeri laud" banner photo =====
   The old PC rule described the photo size as "48% cover", which browsers
   reject -- so the photo never showed on PC. The photo now sits in its own
   layer (::before), which also lets admin change it (Veebilehe sisu ->
   Menüü -> Pildid, via image-slots.js). */
body.lb.page-menu .menu-cta-band { position:relative; overflow:hidden; background:#101214 !important; }
body.lb.page-menu .menu-cta-band::before {
  content:''; position:absolute; top:0; bottom:0; left:0; width:48%; z-index:0;
  background-image:url('../img/temp/gallery-interior.png'); background-size:cover; background-position:center; background-repeat:no-repeat;
}
body.lb.page-menu .menu-cta-band::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(8,10,11,.05) 0%, rgba(16,18,20,.35) 36%, #101214 49%);
}
body.lb.page-menu .menu-cta-band > * { position:relative; z-index:2; }
@media (max-width:700px) {
  body.lb.page-menu .menu-cta-band::before { width:100%; }
  body.lb.page-menu .menu-cta-band::after { background:linear-gradient(0deg, #101214 0%, rgba(8,10,11,.42) 100%); }
}

/* Homepage hero fills the whole first screen below the announcement + menu
   bars (measured in site-common.js); the next section appears on scroll.
   Never shorter than before (630px PC / 570px phone). */
body.lb.page-home .home-hero {
  min-height: max(630px, calc(100vh - var(--lb-top-offset, 90px)));
  min-height: max(630px, calc(100svh - var(--lb-top-offset, 90px)));
  display: flex; align-items: center;
}
body.lb.page-home .home-hero > .container { width: 100%; }
@media (max-width: 768px) {
  body.lb.page-home .home-hero {
    min-height: max(570px, calc(100vh - var(--lb-top-offset, 70px)));
    min-height: max(570px, calc(100svh - var(--lb-top-offset, 70px)));
  }
}

/* Native dropdown lists are drawn by the browser -- dark site, dark controls
   (otherwise Chrome shows a white list around the options). */
.lb select, .lb input, .lb textarea { color-scheme: dark; }
.lb select option { background-color: #111316; color: #f2eee7; }