/* =============================================================
   ALFANZOO, ELEVATE
   Layer 2. Loaded AFTER styles.css, so these win the cascade.
   Upgrades the existing components in place. No selector is
   renamed and nothing is removed, this only adds craft.
   ============================================================= */

/* =============================================================
   1. PAGE SHELL
   ============================================================= */
body { position: relative; }/* Subtle warm vignette so large flat ivory areas read as paper, not void */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(198,161,91,.10), transparent 60%),
        radial-gradient(100% 70% at 100% 100%, rgba(46,59,50,.05), transparent 55%);
}
/* <main> is deliberately NOT given a z-index here.
 *
 * It used to be in this rule with .site-footer and footer. z-index:1 makes an element a
 * stacking context, and that trapped the printed menu's theater panel
 * (position:fixed; z-index:10000) inside <main>: the panel could only compete with
 * <main>'s own siblings, so the sticky menu tab bar and the footer painted over it, and
 * the panel scrolled away with the page instead of covering the viewport. No amount of
 * z-index on the panel itself could undo that, since it is clipped to its own context.
 *
 * The footer keeps z-index:1 because it sits over the body grain layer above it. <main>
 * needs nothing from it: body.menu-page in styles.css already gives <main>
 * position:relative for its two ::before/::after wash gradients, and position:relative
 * alone does not create a stacking context. */
.site-footer, footer { position: relative; z-index: 1; }/* Consistent vertical rhythm across every section */
section { position: relative; }.rooms-section, .team-section, .about-section, .gallery-section, .facts-section, .dining-section, .sign-section, .menu-section, .compare-section, .info-strip, .cta-banner, .values-section, .rf-section, .timeline-section {
    padding-block: var(--section-y);
}.page-top { padding-top: calc(var(--nav-h) + var(--space-2xl)); }/* Hairline separators between adjacent ivory sections */
.rich-content + *, .section-head + .avail-summary { position: relative; }/* =============================================================
   2. NAVIGATION, glass, not a bar
   ============================================================= */
.site-nav, body > nav:not(.mob-nav) {
    padding-inline: var(--gutter);
    padding-block: 1rem;
    transition:
        background var(--dur-md) var(--ease),
        padding var(--dur-md) var(--ease),
        box-shadow var(--dur-md) var(--ease),
        backdrop-filter var(--dur-md) var(--ease);
    will-change: background, padding;
}.site-nav.scrolled, nav.scrolled {
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    padding-block: .55rem;
    box-shadow:
        0 1px 0 var(--accent-line),
        0 10px 30px -18px rgba(0,0,0,.9);
}.nav-container { gap: var(--space-md); }.logo {
    font-size: var(--fs-lg);
    letter-spacing: .22em;
    transition: opacity var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
    white-space: nowrap;
}.logo:hover { opacity: .82; transform: translateY(-1px); }.brand-logo { max-height: 2.4rem; width: auto; }/* Nav links: hairline underline that grows from the centre */
.main-nav ul { display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 1.35rem); }.main-nav a {
    position: relative;
    display: inline-block;
    padding-block: .4rem;
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: rgba(255,255,255,.86);
    transition: color var(--dur-sm) var(--ease);
}.main-nav a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    inline-size: 0;
    block-size: 1px;
    background: var(--brass);
    transform: translateX(-50%);
    transition: inline-size var(--dur-md) var(--ease);
}.main-nav a:hover { color: #fff; }.main-nav a:hover::after, .main-nav a.is-active::after { inline-size: 100%; }.main-nav a.is-active { color: var(--brass-200); }/* Mobile drawer */
.mob-nav {
    background: var(--ink);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--e5);
}.mob-nav-item {
    color: rgba(255,255,255,.78);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    border-radius: var(--r-md);
    transition: background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}.mob-nav-item:hover { background: rgba(198,161,91,.14); color: #fff; }.mob-nav-item.is-active { color: var(--brass-200); }.menu-toggle {
    min-inline-size: 2.9rem;
    min-block-size: 2.9rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: var(--r-sm);
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--dur-sm) var(--ease), border-color var(--dur-sm) var(--ease);
}.menu-toggle:hover { background: rgba(198,161,91,.2); border-color: var(--brass); }/* =============================================================
   3. EDITORIAL SCAFFOLDING
   ============================================================= */
.kicker {
    gap: .9rem;
    font-size: var(--fs-3xs);
    letter-spacing: .32em;
    margin-bottom: var(--space-md);
    color: var(--brass-deep);
}.kicker::before {
    inline-size: 2.75rem;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, var(--brass));
}.section-head { margin-bottom: var(--space-2xl); }.section-head h2 { font-size: var(--fs-4xl); letter-spacing: var(--tr-display); }.section-head h2 em { color: var(--brass-deep); }.section-head p { font-size: var(--fs-lg); color: var(--fg-muted); font-weight: 300; max-width: 58ch; }.sec-index { font-size: var(--fs-md); color: var(--brass); opacity: .75; }.crumbs {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: var(--tr-caps);
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--space-md);
}.crumbs a { position: relative; }.crumbs a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    inline-size: 0; block-size: 1px;
    background: currentColor;
    transition: inline-size var(--dur-sm) var(--ease);
}.crumbs a:hover::after { inline-size: 100%; }.crumbs-dark { color: rgba(255,255,255,.7); }.rich-content { max-width: var(--max-prose); }.rich-content > * + * { margin-top: 1.1em; }.rich-content h2, .rich-content h3 { margin-top: 1.8em; }.rich-content a {
    color: var(--brass-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .25em;
}blockquote {
    position: relative;
    background: linear-gradient(180deg, var(--paper-200), var(--paper-100));
    border-inline-start: 2px solid var(--brass);
    padding: var(--space-xl) var(--space-2xl);
    font-size: var(--fs-xl);
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    box-shadow: var(--e1);
}/* =============================================================
   4. BUTTONS
   ============================================================= */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    min-block-size: 3rem;
    padding: .95rem 2.1rem;
    border-radius: var(--r-pill);
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: var(--tr-caps);
    text-transform: uppercase;
    white-space: nowrap;
    /* Guard, not decoration: white-space:nowrap above means a long label makes an
       inline-flex button shrink-to-fit at max-content, which on a phone is wider
       than the viewport and simply runs off the edge. Capping at the container
       turns that into a clipped-but-contained button instead of a page-wide
       horizontal scrollbar. */
    max-inline-size: 100%;
    isolation: isolate;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--dur-sm) var(--ease-out),
        box-shadow var(--dur-md) var(--ease),
        color var(--dur-sm) var(--ease),
        border-color var(--dur-sm) var(--ease);
}/* The fill wipe */
.btn::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    transform: translateY(101%);
    transition: transform var(--dur-md) var(--ease);
}.btn:hover { transform: translateY(-2px); }.btn:active { transform: translateY(0) scale(.985); transition-duration: var(--dur-2xs); }/* A specular sheen that sweeps on hover */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.34) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform var(--dur-xl) var(--ease);
    pointer-events: none;
}.btn:hover::after { transform: translateX(120%); }.btn-primary { background: var(--ink); color: var(--ivory); box-shadow: var(--e2); }.btn-primary::before { background: var(--brass); }.btn-primary:hover { color: var(--ink); box-shadow: var(--e4); }.btn-secondary { background: var(--brass); color: var(--ink); box-shadow: var(--e2); }.btn-secondary::before { background: var(--ivory); }.btn-secondary:hover { color: var(--ink); box-shadow: var(--e4); }.btn-outline { border-color: rgba(255,255,255,.5); color: #fff; }.btn-outline::before { background: #fff; }.btn-outline:hover { color: var(--ink); border-color: #fff; box-shadow: var(--e3); }.btn-ghost { border-color: var(--border-strong); color: var(--ink); background: var(--paper-50); }.btn-ghost::before { background: var(--ink); }.btn-ghost:hover { color: var(--ivory); border-color: var(--ink); box-shadow: var(--e3); }.btn-sm { min-block-size: 2.4rem; padding: .55rem 1.15rem; font-size: var(--fs-3xs); }.btn-lg { min-block-size: 3.5rem; padding: 1.15rem 2.6rem; font-size: var(--fs-xs); }.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }blockquote {
    position: relative;
    background: linear-gradient(180deg, var(--paper-200), var(--paper-100));
    border-inline-start: 2px solid var(--brass);
    padding: var(--space-xl) var(--space-2xl);
    font-size: var(--fs-xl);
    border-radius: 0 var(--r-lg) var(--r-lg) 0;
    box-shadow: var(--e1);
}/* =============================================================
   5. CARDS, one tactile language
   ============================================================= */
.room-card, .sign-card, .facility-card, .value-card, .info-card, .team-card, .avail-card, .fact-badge, .stat {
    position: relative;
    border-radius: var(--r-lg);
    box-shadow: var(--e1);
    overflow: hidden;
    transition:
        transform var(--dur-md) var(--ease-out),
        box-shadow var(--dur-md) var(--ease),
        border-color var(--dur-md) var(--ease);
}/* NO background here on purpose.
   This layer used to set `background: var(--paper-50)` on the whole group,
   which silently repainted the three cards that styles.css deliberately makes
   DARK, .sign-card, .info-card and .stat, while their inner text stayed
   ivory. The result was cream cards with cream text: "Call us" and the phone
   number were invisible, and the dish names on the restaurant page were too.
   Surface colour is a component decision, not a craft one, so each component
   keeps the background it defines in styles.css and this layer only adds
   shape, depth and the lift on hover. */
    @container (max-width: 22rem) {
.room-body, .sign-body{ padding: var(--space-md); }
.room-price{ font-size: var(--fs-md); }
    }
/* There used to be a second `}` on its own line here, closing nothing. CSS recovers
   from a stray top-level `}` by discarding it, so the page looked fine, but it left
   the whole rest of this file nesting one level shallower than it reads, which makes
   any brace-counting check of elevate.css report a false imbalance. Removed so a
   lint on this file can be trusted. */
/* =============================================================
   6. FORMS
   styles.css sets the sizes and colours; this is the feel: one
   consistent field, a focus ring that survives on both paper and
   ink, and no surprise zoom on iOS.
   ============================================================= */
input, textarea, select {
    font-family: var(--font-body);
    transition: border-color var(--dur-sm) var(--ease),
                box-shadow var(--dur-sm) var(--ease),
                background-color var(--dur-sm) var(--ease);
}
textarea { min-block-size: 7rem; line-height: var(--lh-normal); }
select {
    appearance: none;
    padding-inline-end: 2.2rem;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 1.05rem center, right .75rem center;
    background-size: .32rem .32rem, .32rem .32rem;
    background-repeat: no-repeat;
}
.form-group { display: grid; gap: .15rem; }
.form-group label { line-height: 1.3; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
input[type="checkbox"], input[type="radio"] {
    inline-size: auto;
    margin: 0;
    accent-color: var(--brass);
}
::placeholder { color: var(--muted); opacity: .8; }

/* =============================================================
   7. MEDIA
   ============================================================= */
img, picture, svg, video { max-inline-size: 100%; }
img { block-size: auto; }
figure { margin: 0; }
figcaption { color: var(--muted); font-size: var(--fs-xs); }
/* Card photos fill their column and crop rather than letterbox. Only the width
   is forced here: setting block-size on these made each photo stretch to 100%
   of its card, and on .sign-card (which is not a sized flex box, just a block
   with an aspect-ratio'd img above a text body), that pushed the dish name and
   price clean out of the card. The strip tile is a real fixed-ratio box, so it
   is the one place a height fill is safe. */
.room-media img, .rf-media img, .room-card img, .sign-card img,
.gallery-item img, .avail-card > img, .highlight-card img {
    inline-size: 100%;
    object-fit: cover;
}
.az-strip-item img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* =============================================================
   8. TABLES
   ============================================================= */
table { border-collapse: collapse; inline-size: 100%; }
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { font-size: var(--fs-sm); }
.compare-table th { white-space: nowrap; }
.compare-table tbody tr { border-block-end: 1px solid var(--border); }
.compare-table tbody tr:last-child { border-block-end: 0; }
.compare-table td { padding: 1rem 1.4rem; vertical-align: middle; }
.compare-price { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink); white-space: nowrap; }
.compare-table thead th { position: sticky; inset-block-start: 0; z-index: 1; }

/* =============================================================
   9. BADGES & PILLS
   ============================================================= */
.room-price-badge { font-family: var(--font-display); letter-spacing: .02em; box-shadow: var(--e2); }
.amenities-list, .rf-pills { list-style: none; }
.amenities-list li, .rf-pills span {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--paper-50);
    padding: .3rem .75rem;
    font-size: var(--fs-2xs);
    color: var(--ink-soft);
    line-height: 1.3;
}
.rf-pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.rf-num {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    line-height: 1;
    /* Sits on the room photograph, so it carries its own contrast rather than
       inheriting the card's. */
    text-shadow: 0 2px 14px rgba(10, 8, 5, .75), 0 0 3px rgba(10, 8, 5, .6);
}

/* =============================================================
   10. STATES, alerts and empty results
   ============================================================= */
.alert {
    display: grid;
    gap: .35rem;
    border: 1px solid var(--border-strong);
    border-inline-start: 3px solid var(--accent-line);
    border-radius: var(--r-sm);
    background: var(--paper-50);
    padding: 1rem 1.15rem;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    margin-block-end: 1.25rem;
}
.alert.success { border-inline-start-color: var(--brass); }
.alert.error, .alert.danger { border-inline-start-color: var(--clay); }
.empty, .avail-empty {
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-lg);
    background: var(--paper-50);
    padding: var(--space-2xl) var(--space-lg);
    color: var(--ink-soft);
}
.avail-empty h2 { color: var(--ink); margin-block-end: .5rem; }

/* =============================================================
   11. OVERLAYS, the table modal and shared lightbox chrome
   ============================================================= */
dialog, .mgal-box, .table-modal {
    border: 0;
    padding: 0;
    border-radius: var(--r-xl);
    box-shadow: var(--e5);
}
dialog::backdrop { background: rgba(11, 10, 7, .72); backdrop-filter: blur(6px); }
body:has(dialog[open]) { overflow: hidden; }

/* =============================================================
   12. HEADER & NAV
   ============================================================= */
.site-nav {
    transition: background-color var(--dur-md) var(--ease),
                padding var(--dur-md) var(--ease),
                box-shadow var(--dur-md) var(--ease);
}
.site-nav.scrolled { border-block-end: 1px solid rgba(198, 161, 91, .18); }
.nav-container { min-block-size: 3.25rem; }
.main-nav a { padding-block: .5rem; }
.mob-nav {
    transition: transform var(--dur-lg) var(--ease-out),
                opacity var(--dur-lg) var(--ease-out);
}

/* =============================================================
   13. FOOTER
   ============================================================= */
.footer-grid { align-items: start; }
.footer-col { display: grid; gap: .55rem; align-content: start; }
.footer-h { color: var(--brass); }
.footer-links { list-style: none; display: grid; gap: .45rem; }
.footer-links a { color: rgba(250, 246, 238, .78); }
.footer-links a:hover { color: var(--champagne, #E8CF9A); }
.social-icons { display: flex; gap: .6rem; }
.social-icons a {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 1px solid rgba(198, 161, 91, .35);
    border-radius: 50%;
    color: var(--champagne, #E8CF9A);
    transition: background-color var(--dur-sm) var(--ease),
                color var(--dur-sm) var(--ease),
                transform var(--dur-sm) var(--ease-out);
}
.social-icons a:hover { background: var(--brass); color: var(--ink); transform: translateY(-2px); }
.footer-giant {
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    line-height: .8;
    text-align: center;
    color: rgba(250, 246, 238, .04);
}
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
    justify-content: space-between;
    border-block-start: 1px solid rgba(198, 161, 91, .2);
    padding-block-start: var(--space-lg);
    font-size: var(--fs-xs);
}
/* .copyright was ivory at .4 over ink = 3.6:1. .55 is 5.3:1 and still reads as
   the quiet line it is meant to be. */
.copyright { color: rgba(250, 246, 238, .55); }
.footer-bottom a { color: rgba(250, 246, 238, .82); }
.footer-bottom a:hover { color: var(--champagne, #E8CF9A); }
@media (min-width: 769px) {
    .footer-bottom { padding-inline: 4.5rem; }
}

/* =============================================================
   14. SECTION RHYTHM
   One vertical scale for every band, so pages assembled from
   different templates still step the same way.
   ============================================================= */
.rooms-section, .dining-section, .gallery-section, .facts-section,
.facility-section, .values-section, .timeline-section, .team-section,
.compare-section, .sign-section, .menu-section, .about-section,
.faq-section, .contact-section, .location-section,
.section { padding-block: var(--section-y); }
/* A page opener already carries its own generous bottom padding, so letting the
   first .section add another full --section-y left ~8rem of dead air between the
   intro and the content on every inner page. */
.page-top ~ .section { padding-block-start: clamp(2.5rem, 2rem + 2vw, 4rem); }

/* =============================================================
   15. REVEAL & SCROLL
   styles.css owns the opacity transition; this makes sure a
   jump-link target is never hidden under the fixed nav.
   ============================================================= */
:target, [id] { scroll-margin-block-start: 6rem; }
.reveal { will-change: opacity, transform; }
.reveal.visible { will-change: auto; }

/* =============================================================
   16. FOCUS & ACCESSIBILITY
   A visible, on-brand ring everywhere, including on the dark
   bands, where a brass ring would otherwise disappear.
   ============================================================= */
:focus-visible {
    outline: 2px solid var(--brass-deep);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}
.hero :focus-visible, .info-strip :focus-visible, .cta-banner :focus-visible,
.creed-band :focus-visible, .az-lead :focus-visible, .footer :focus-visible,
.mob-menu :focus-visible, .booking-widget :focus-visible, .az-quotes :focus-visible {
    outline-color: var(--champagne, #E8CF9A);
}
::selection { background: var(--brass); color: var(--ink); }

/* =============================================================
   17. CONTAINER QUERIES
   Cards are reused in narrow columns (the room rail, the photo
   strips) where a viewport media query cannot see the squeeze.
   ============================================================= */
@container (max-width: 22rem) {
    .room-body, .sign-body, .rf-body { padding: var(--space-md); }
    .room-price { font-size: var(--fs-md); }
    .rf-meta, .amenities-list { grid-template-columns: 1fr; }
}
/* =============================================================
   18. HIGH-REFINEMENT DISPLAY
   ============================================================= */
@media (min-width: 1400px) {
    :root { --max-width: 1320px; }
    .hero-copy h1 { max-inline-size: 17ch; }
}@media (min-width: 1800px) {:root { --max-width: 1440px; }}

/* =============================================================
   19. CONTRAST CORRECTIONS

   Everything here was found by measuring the rendered pages rather
   than by reading the source: tools/contrast.mjs resolves the real
   computed foreground and background behind every piece of text and
   reports anything under the WCAG AA threshold (4.5:1 for body text,
   3:1 for large). Each rule below closes one measured gap.

   These live in the top layer deliberately. styles.css carries three
   generations of colour decisions in cascade order and several are
   correct only where they were written; this block states the intent
   once, in the layer that wins.
   ============================================================= */

/* ---- Brass is a border and a fill, not body text ----
   #C6A15B is 2.25:1 on ivory and 2.39:1 on a card. It is decorative
   gold. Wherever it carried TEXT it moves to --brass-deep (#7E622F),
   which is 5.3:1 on ivory and 5.6:1 on a card and sits on the same
   hue, so nothing shifts visually except legibility. On dark bands
   --brass stays: it is 7.7:1 on ink. */
.crumbs, .crumbs-dark { color: var(--muted); }
.crumbs a, .crumbs-dark a { color: var(--brass-deep); }
.crumbs a:hover, .crumbs-dark a:hover { color: var(--ink); }
.btn-ghost { color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { color: var(--ivory); }
.compare-price { color: var(--ink); }

.highlight-card .btn { color: var(--brass-deep); border-color: rgba(126, 98, 47, .5); }
.highlight-card .btn:hover { color: var(--ink); }

/* ---- Kicker on a dark band ----
   .kicker defaults to --brass-deep, which is right on paper and only
   3.0:1 on the dark cards. Inside those, flip it to plain brass. */
.info-strip .kicker,
.highlight-card .kicker,
.room-card .kicker,
.team-card .kicker,
.sign-card .kicker { color: var(--brass); }

/* ---- .btn-outline has to work on both surfaces ----
   It was white text with a white border, which is invisible on every
   light section it appears in (the gallery's "Reserve a Table", the
   contact page's "Get Directions"). It is ink by default now, with an
   explicit light variant for the dark bands it also sits on. */
.btn-outline { border-color: rgba(20, 18, 13, .45); color: var(--ink); }
.btn-outline::before { background: var(--ink); }
.btn-outline:hover { color: var(--ivory); border-color: var(--ink); }
.hero .btn-outline,
.rf-lead .btn-outline,
.menu-hero .btn-outline,
.cta-banner .btn-outline,
.creed-band .btn-outline,
.mob-menu .btn-outline,
.btn-table-gold { border-color: rgba(255, 255, 255, .55); color: #fff; }
.hero .btn-outline::before,
.rf-lead .btn-outline::before,
.menu-hero .btn-outline::before,
.mob-menu .btn-outline::before { background: #fff; }
.hero .btn-outline:hover,
.rf-lead .btn-outline:hover,
.menu-hero .btn-outline:hover,
.mob-menu .btn-outline:hover { color: var(--ink); border-color: #fff; }

/* ---- Form labels inside the dark surfaces ----
   The global label colour is --ink-soft, which is 1.8:1 on the lead
   form's forest card and unreadable. The booking widget had the same
   problem: its light label was scoped to .hero-widget only, so the
   widget on /availability fell back to ink-soft on a dark panel. */
.az-lead-form .form-group label,
.creed-band label,
.info-strip label { color: rgba(250, 246, 238, .78); }
.booking-widget .bw-label,
.booking-widget .bw-guests label,
.booking-widget .bw-code summary { color: rgba(255, 255, 255, .88); }

/* ---- Muted text on dark ----
   --muted was darkened in foundation.css for light surfaces. Where
   ivory was faded to sit quietly on ink it went too far. */
.az-trust .stat span { color: rgba(250, 246, 238, .62); }
.az-lead-note { color: rgba(250, 246, 238, .7); }
.az-lead-alt { color: rgba(250, 246, 238, .72); }
.az-lead-alt a { color: var(--brass); }

/* ---- The staff link was faded to .6 inline: 3.6:1 on ink.
   It is a real link, so it gets a real contrast. */
.footer-bottom a[style*="opacity"] { opacity: .82 !important; }

.dg-album-count { color: var(--muted); }

/* ---- The gold "Reserve a Table" pill, on a light page ----
   .btn-table-gold is gold on transparent, which is 7.7:1 over the homepage hero
   and 2.25:1 over ivory. On an inner page the nav is transparent until it
   scrolls, so the button has to flip to the deep gold while that is true and
   flip back once the bar paints its own dark background. This is the same
   not(.scrolled) pattern the logo and nav links already use via .light-top. */
.light-top nav.site-nav:not(.scrolled) .btn-table-gold {
    border-color: var(--brass-deep);
    color: var(--brass-deep);
}
.light-top nav.site-nav:not(.scrolled) .btn-table-gold:hover {
    background: var(--brass-deep);
    color: var(--ivory);
}

@media (max-width: 768px) {
    .btn-sm {
        min-block-size: 2.75rem;
        font-size: .75rem;
    }
    .mob-nav-item {
        font-size: .75rem;
        letter-spacing: .02em;
    }
    .mob-nav-toggle {
        font-size: .75rem;
        letter-spacing: .05em;
    }
}

@media (max-width: 340px) {
    .mob-nav-item {
        font-size: .6875rem;
        letter-spacing: 0;
    }
}

/* ---- Two components that only ever sit on a dark band ----
   .contact-section is forest-deep on both the homepage and /contact, but its
   kicker inherited the page default (--brass-deep, 2.9:1 on that surface).
   /contact opens with a dark .info-strip whose breadcrumb used the light-page
   muted colour. Both are "this text lives on ink", so both are stated here. */
.contact-section .kicker,
.contact-info .kicker { color: var(--brass); }
.info-strip .crumbs,
.info-strip .crumbs-dark { color: rgba(250, 246, 238, .68); }
.info-strip .crumbs a,
.info-strip .crumbs-dark a { color: var(--brass); }
.info-strip .crumbs a:hover { color: var(--champagne, #E8CF9A); }

/* .contact-section is a dark band like .info-strip, so its outline button is
   the light variant. It happened to render correctly via .contact-info a, but
   only by accident of specificity. */
.contact-section .btn-outline { border-color: rgba(255, 255, 255, .55); color: #fff; }
.contact-section .btn-outline::before { background: #fff; }
.contact-section .btn-outline:hover { color: var(--ink); border-color: #fff; }

/* =============================================================
   19. RESPONSIVE HEADER NAV
   The hamburger, and the panel it opens.

   WHY THIS BLOCK HAS TO EXIST HERE
   --------------------------------
   styles.css sets the header up as a three-tier nav:
     >1024px   links inline,          .menu-toggle hidden
     769-1024  links collapsed,       .menu-toggle shown
     <=768px   bottom drawer (#mobNav) + full-screen #mobMenu

   elevate.css loads AFTER styles.css, and both write `.main-nav ul { display }`
   and `.menu-toggle { display }` at the same specificity, media queries add none.
   So whichever file says it LAST wins, and elevate.css was winning:

     - `.main-nav ul { display: flex }` here beat the `display: none` in the
       1024px media query. Every other property from that query still applied, `position: absolute`, `flex-direction: column`, the dark background, the
       padding, so between 769 and 1024 the nav rendered as an always-open black
       panel sitting on top of the hero, roughly 300px tall. On an iPad in portrait
       that covered the top third of the homepage.

     - `.menu-toggle { display: grid }` here beat BOTH the base `display: none`
       and the media query's `display: block`, so the hamburger showed at every
       width above 768. On a desktop, next to a row of perfectly good links, it
       did nothing at all: its handler adds `.active` to the list, and `.active`
       only means `display: flex` in the collapsed tier, where it already was.

   The whole responsive tier is restated below rather than patched, so nothing here
   depends on the media queries in styles.css still reading the way they did. If
   those are ever deleted, this block still produces a correct header.

   One definition of "collapsed" per tier, and the open state is a class this file
   owns, `.is-open`, rather than the legacy `.active`, so the JS and the CSS
   cannot drift apart on the name alone. `.active` is still honoured. */

/* ---- tier 1: desktop -----------------------------------------------------
   The links are on screen at this width, so the button has no job. Hidden rather
   than disabled: a greyed-out hamburger next to a working nav reads as a broken
   site, which is exactly how it looked. */
@media (min-width: 1025px) {
    .menu-toggle { display: none; }
    .main-nav ul, ul.main-nav {
        display: flex;
        flex-direction: row;
        position: static;
        background: none;
        padding: 0;
        gap: clamp(.4rem, 1.4vw, 1.35rem);
        border: 0;
    }
}

/* ---- tier 2: tablet, 769–1024 --------------------------------------------
   The links no longer fit beside the two CTAs, so they collapse into a panel
   under the header and the hamburger opens it. This is the tier the button was
   built for and the one that had been broken. */
@media (min-width: 769px) and (max-width: 1024px) {
    .menu-toggle { display: grid; }

    /* The CTAs come BACK.
     *
     * styles.css hides "Reserve a Table" at 1180px and "Book Your Stay" at 1024px,
     * because at those widths six links plus two buttons plus a hamburger do not fit
     * in one row. The links are collapsed now, so a row's worth of room is free
     * again, and leaving both CTAs hidden meant that between 769 and 1180 the header
     * offered nothing but a logo and a menu button. Collapsing the links is what
     * makes room for the buttons; hiding the buttons too threw that room away.
     * Measured at 900px: logo 60 + Reserve 173 + Book 164 + toggle 46 = 443px of
     * content in an 810px row. */
    .nav-cta { display: inline-flex; }
    .nav-container .btn-table-gold { display: inline-flex; }

    .main-nav ul, ul.main-nav {
        display: none;
        position: absolute;
        inset-inline: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: .35rem 5% .9rem;
        background: rgba(20, 18, 13, .97);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-block-end: 1px solid rgba(198, 161, 91, .3);
        box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9);
        /* Capped so a long nav can never grow taller than the screen it is
           covering, and scrollable rather than clipped. */
        max-block-size: calc(100dvh - var(--nav-h, 5.25rem));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    /* `.is-open` is what the JS adds; `.active` is what the old handler added.
       Both are honoured so the panel opens either way. */
    .main-nav ul.is-open,
    .main-nav ul.active,
    ul.main-nav.is-open,
    ul.main-nav.active { display: flex; }

    .main-nav ul a, ul.main-nav a {
        font-size: .82rem;
        /* Full-width tap targets, because this tier is mostly touched. */
        inline-size: 100%;
        padding-block: .7rem;
        border-block-end: 1px solid rgba(198, 161, 91, .12);
    }
    .main-nav ul a::after { display: none; }
    .main-nav ul li:last-child a { border-block-end: 0; }

    /* Focus here is a full-width row, so the default outline draws a box the width
     * of the screen and reads as a text input that swallowed the menu. Pulled inside
     * the row and backed with a tint so it reads as "this row is selected" instead.
     * Still a 2px ring against a moving background, the indicator is unchanged in
     * strength, only in shape. */
    .main-nav ul a:focus-visible {
        outline: 2px solid var(--champagne, #E8CF9A);
        outline-offset: -3px;
        background: rgba(198, 161, 91, .14);
    }
}

/* ---- tier 3: phone, <=768 -----------------------------------------------
   #mobNav (the bottom bar) and #mobMenu (the full-screen drawer) own this tier
   and are built in footer.php with real focus trapping. The desktop markup stays
   out of the way entirely, hidden, not merely narrow. */
@media (max-width: 768px) {
    .menu-toggle { display: none; }
    .main-nav, .main-nav ul, ul.main-nav { display: none; }
}

/* ---- the open/closed affordance ------------------------------------------
   The ☰ becomes ✕ while the panel is open, so the button's state is visible in
   the button rather than only in aria-expanded. Drawn with spans rather than by
   swapping the character, because a text swap re-renders the glyph and drops the
   transition mid-animation. */
.menu-toggle .az-burger, .menu-toggle .az-burger-x { grid-area: 1 / 1; }
.menu-toggle .az-burger-x { display: none; }
.menu-toggle[aria-expanded="true"] .az-burger { display: none; }
.menu-toggle[aria-expanded="true"] .az-burger-x { display: block; }
/* =============================================================
   20. PHONE BOTTOM BAR
   Five columns: two links, the logo, two links.

   The bar was three columns wide, Home, Rooms, [Menu], Contact, with a lot of
   empty space either side of the button. styles.css gave each item `flex: 1 1 0`
   and the button `flex: 0 0 auto`, which means the button's centre lands at exactly
   half the bar for ANY number of columns. So going from 3 to 5 needed no offsets
   and no measurement: two links each side of it is what puts it dead centre.

   All five columns are then put on ONE shared two-row grid (an icon row above a
   label row), rather than each column sizing itself. That is the whole reason the
   middle column's label lines up with the other four: the row heights come from the
   grid, so the label baseline is a property of the bar and not of what each child
   happens to contain. The earlier version let every column centre its own content,
   which put the button's label 11.5px below its four neighbours, invisible to every
   per-column assertion, obvious in a screenshot.

   styles.css is left alone. It is the shared foundation, the same file every other
   page's bottom bar is built from, and this tier is already restated above for the
   same reason the nav was: elevate.css loads last, so anything decided here wins and
   nothing here depends on a rule in another file still reading as written. */
@media (max-width: 768px) {
    .mob-nav {
        display: grid;
        /* `1fr auto 1fr`-style centring does not exist, so the centring is explicit:
           two equal tracks, the button's own width, then two equal tracks again.
           minmax(0, 1fr) rather than 1fr because a track's default min is min-content,
           and one long label would otherwise refuse to shrink and shove the disc off
           centre, the label gets an ellipsis instead of the disc getting moved. */
        grid-template-columns: repeat(2, minmax(0, 1fr)) 54px repeat(2, minmax(0, 1fr));
        align-items: center;
        /* Gap .2rem on five columns costs a whole column's worth of width in total and
           buys nothing at this size. Dropped to 0 and the padding carries the inset. */
        gap: 0;
        padding-inline: .3rem;
    }

    /* The shared column shape. Both rules are needed: .mob-nav-item keeps
       `flex: 1 1 0` and .mob-nav-toggle keeps `flex: 0 0 auto`, and those are inert
       in a grid, but the two classes also differ in ways grid does NOT override, so
       they are restated together rather than relying on one to inherit from the
       other. */
    .mob-nav-item,
    .mob-nav-toggle {
        display: grid;
        /* Icon row then label row. 1.5rem is taller than a 1rem icon on purpose: it
           is what makes room for the 54px disc to be raised out of the bar without
           the bar having to grow to swallow it. */
        grid-template-rows: 1.5rem auto;
        justify-items: center;
        align-content: center;
        gap: .22rem;
        padding: .45rem .1rem;
        /* Without this the ellipsis below cannot engage, because a grid item's
           automatic minimum size is its content's. */
        min-inline-size: 0;
    }

    .mob-nav-item {
        /* Five columns at 360px is 72px each. The label is the binding constraint,
           not the icon, so it is what gets the smaller size and the hard clip. */
        font-size: .54rem;
        letter-spacing: .05em;
    }
    .mob-nav-item span {
        max-inline-size: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mob-nav-item i { font-size: 1rem; }

    /* THE MIDDLE COLUMN IS THE DISC, AND NOTHING ELSE.
     *
     * There was a version with the word MENU under the disc. It cannot work, and the
     * reason is worth keeping in writing because it looks like it should:
     *
     * All five columns sit on one grid with a 1.5rem icon row above a label row. A
     * 54px disc needs 54px, and the icon row has 24px, so the disc overhangs its own
     * row by 15px a side, straight into the label row. Lifting it to clear the label
     * lifts it out of the bar, and lifting it out of the bar is the entire effect. So
     * the disc is either flush with its row and not raised, or raised and sitting on
     * the label. Raising it and keeping the label needs the icon row to be ~3rem,
     * which makes the bar 116px tall on a 800px phone.
     *
     * So the disc is the whole of the middle column. The bar keeps its 69px, the disc
     * stands 15px proud of the top edge as it always did, and the four link labels
     * share one row so they cannot drift apart. This is also the usual shape for a
     * centre action button in a bottom bar. */
    .mob-nav-toggle {
        /* styles.css still describes the old three-column button, and every one of
           these declarations fights the grid above. Each is undone explicitly rather
           than left to hope a later rule happens to collide:

           `align-self: flex-start`, still resolves in a grid (`flex-start` is a legal
             align-self and means `start`), so the disc would ride the bar's top edge
             instead of being raised by its own margin.
           `width/height: 58px`, sizes the box independently of the 54px track; the
             leftover 2px each side is what put the disc off the bar's centre line.
           `margin: -1.7rem .3rem 0`, the old raise, but it also shifts the column
             4.8px sideways, which is what made the disc 7px off centre. Only the
             block-start survives, as the raise.
           `padding: .45rem .1rem`, a link's row padding. On the disc it would shrink
             the box to 50.8px and the 54px logo would then be clamped by the global
             `img { max-width: 100% }` down to fit, which is why the disc measured
             51px wide rather than 54. */
        align-self: center;
        inline-size: 54px;
        block-size: 54px;
        margin: -1.35rem 0 0;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
        cursor: pointer;
    }

    .mob-nav-toggle .mob-nav-logo,
    .mob-nav-toggle .mob-nav-a {
        display: grid;
        place-items: center;
        inline-size: 54px;
        block-size: 54px;
        /* Belt and braces against that global img max-width: the disc has to be
           allowed to be wider than the padding box it is dropped into. */
        max-inline-size: none;
        max-block-size: none;
        border-radius: 50%;
        border: 3px solid var(--ink);
        background: linear-gradient(135deg, #E8CF9A, var(--brass));
        box-shadow: 0 8px 24px rgba(198, 161, 91, .45);
    }
    .mob-nav-toggle .mob-nav-logo { object-fit: cover; }
    /* The word MENU, when there was one, used to turn brass to show the drawer was
       open. The disc itself carries that state now, so the button needs no separate
       restyle, but it does need to read as pressed, and :active is the only signal
       left once the label is gone. */
    .mob-nav-toggle:active { transform: scale(.94); }

    /* body padding must clear the bar, or the bar sits on the end of the page.

       `!important` is not laziness here, it is the only thing that works: styles.css
       resets body with `margin: 0 !important; padding: 0 !important`, and an
       important shorthand beats every non-important longhand regardless of order.
       That also means styles.css's own `body { padding-bottom: 92px }` on this tier
       has never applied, the fixed bar has been quietly covering the bottom of
       every page on a phone, and this rule is what finally clears it.

       4.3rem is the bar's height to the nearest rem: 1.5rem icon row + .22rem gap +
       the .54rem label line + .45rem of column padding, plus the bar's own .35rem.
       It cannot be read from the bar at runtime, so tools/mobbar.mjs asserts the
       measured bar against this figure on every phone width, if a future edit makes
       the bar taller, the check fails rather than the footer disappearing. */
    body { padding-block-end: calc(4.3rem + env(safe-area-inset-bottom)); }
    /* styles.css's reset is on the shorthand, so it is the shorthand that has to be
       beaten, padding-block-end alone above is not enough on its own, and the two
       rules together cover the shorthand reset and any longhand reset alike. */
    body { padding-bottom: calc(4.3rem + env(safe-area-inset-bottom)) !important; }
}