:root {
    --brown-950: #24140a;
    --brown-900: #3a2112;
    --brown-800: #4a2c17;
    --brown-700: #5c3a20;
    --amber-700: #b45309;
    --amber-600: #c75e0b;
    --amber-500: #d97706;
    --gold: #c9a227;
    --gold-soft: #e3c883;
    --red-800: #7c2d12;
    --red-700: #8a1c1c;
    --cream: #faf6ef;
    --paper: #fffdf8;
    --ink: #2b1a10;
    --muted: #7a6a5a;
    --line: rgba(36, 20, 10, 0.16);
    --shadow: 0 10px 30px rgba(36, 20, 10, 0.12);
    --radius: 12px;
    --font-display: "Rye", Georgia, "Times New Roman", serif;
    --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 400;
    color: var(--brown-900);
    line-height: 1.2;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--amber-700); text-decoration: none; }
a:hover { color: var(--amber-500); }

.container { max-width: 1160px; margin: 0 auto; padding: 0 1.25rem; }

.section { padding: 3.5rem 0; }
.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1.75rem;
    position: relative;
}
.section-title::after {
    content: "";
    display: block;
    width: 90px;
    height: 3px;
    margin: 0.65rem auto 0;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    border-radius: 2px;
}
.section-intro { text-align: center; color: var(--muted); max-width: 720px; margin: -0.75rem auto 2rem; }

.text-sm { font-size: 0.9rem; }
.muted { color: var(--muted); }

.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
    text-align: center;
}
.btn-primary { background: var(--amber-700); color: #fff; }
.btn-primary:hover { background: var(--amber-500); color: #fff; }
.btn-ghost { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }
.btn-dark { background: var(--brown-900); color: #fff; }
.btn-dark:hover { background: var(--brown-800); color: #fff; }
.btn-outline { background: transparent; color: var(--amber-700); border-color: var(--amber-700); }
.btn-outline:hover { background: var(--amber-700); color: #fff; }

/* ------------------------------------------------------------------ Header */
.site-header {
    background: linear-gradient(180deg, var(--brown-950) 0%, var(--brown-900) 100%);
    border-bottom: 3px solid var(--gold);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
}
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand-mark { width: 44px; height: 44px; }
.brand-name { font-family: var(--font-display); font-size: 1.35rem; color: var(--gold-soft); letter-spacing: 0.5px; }

.site-nav { display: flex; align-items: center; }
.nav-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.nav-link {
    color: #eadfcf;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    border-bottom: 2px solid transparent;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nav-link.active { color: var(--gold-soft); border-bottom-color: var(--gold); }

.nav-item { position: relative; display: flex; }
.nav-list > .nav-item.has-dropdown > .nav-link { padding-right: 0.55rem; }
.nav-caret { font-size: 0.6rem; margin-left: 0.3rem; opacity: 0.7; }
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: var(--brown-950);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-top: 3px solid var(--gold);
    border-radius: 0 0 8px 8px;
    padding: 0.4rem;
    margin: 0;
    list-style: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    z-index: 40;
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown { display: block; }
.dropdown li { margin: 0; }
.dropdown > .nav-item { display: block; }
.dropdown a {
    display: block;
    padding: 0.55rem 0.8rem;
    border-radius: 6px;
    color: #eadfcf;
    font-size: 0.9rem;
    font-weight: 500;
}
.dropdown a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.dropdown a.active { color: var(--gold-soft); background: rgba(217, 119, 6, 0.18); border-bottom: 0; }

/* Third level: a dropdown entry that opens its own flyout to the right. */
.dropdown .dropdown {
    top: -0.4rem;
    left: 100%;
    min-width: 200px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-left: 3px solid var(--gold);
    border-radius: 0 8px 8px 0;
    box-shadow: 12px 10px 24px rgba(0, 0, 0, 0.45);
}
.dropdown .dropdown a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.dropdown .dropdown .nav-caret { display: inline-block; transform: rotate(-90deg); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 0.5rem; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--gold-soft); margin: 5px 0; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------ Hero */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 520px;
    overflow: hidden;
    color: #fff;
    text-align: center;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: center center;
    animation: hero-pan 20s ease-in-out infinite alternate;
    will-change: transform;
}
.hero-overlay { position: absolute; inset: 0; }
.hero-content { position: relative; z-index: 2; max-width: 820px; padding: 3rem 1.5rem; }
.hero-content h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); color: #fff; text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55); }
.hero-subtitle { margin-top: 1rem; font-size: clamp(1.05rem, 2.4vw, 1.35rem); color: #f6ecd9; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }
.hero-text { background: linear-gradient(160deg, var(--brown-950), var(--brown-800)); border-bottom: 1px solid rgba(201, 162, 39, 0.35); }

@keyframes hero-pan {
    0%   { transform: scale(1.05) translate3d(0, 0, 0); }
    50%  { transform: scale(1.12) translate3d(-1.2%, -0.6%, 0); }
    100% { transform: scale(1.08) translate3d(-2.2%, 0.4%, 0); }
}

/* ---------------------------------------------------------- Content blocks */
.page-content { max-width: 820px; margin: 0 auto; }
.page-content h2 { font-size: 1.7rem; margin: 1.5rem 0 0.6rem; }
.page-content h3 { font-size: 1.25rem; margin: 1.25rem 0 0.4rem; }
.page-content p { margin-bottom: 1rem; }
.page-content ul, .page-content ol { margin: 0 0 1rem 1.4rem; }
.page-content a { text-decoration: underline; }

/* ------------------------------------------------------------ Cards & grid */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}
.flex-between { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.card h3 { font-size: 1.05rem; color: var(--brown-900); }
.price { font-family: var(--font-display); color: var(--amber-700); font-size: 1.05rem; white-space: nowrap; }
.card .description { color: var(--muted); font-size: 0.92rem; margin-top: 0.35rem; }

/* -------------------------------------------------------- Special of the Day */
.special-wrap { background: linear-gradient(180deg, var(--brown-900), var(--brown-950)); padding: 3.5rem 0; }
.special-card {
    max-width: 760px;
    margin: 0 auto;
    background: var(--paper);
    border: 3px solid var(--gold);
    border-radius: 16px;
    padding: 2.25rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    position: relative;
    text-align: center;
}
.special-card::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(201, 162, 39, 0.65);
    border-radius: 10px;
    pointer-events: none;
}
.special-badge {
    display: inline-block;
    background: var(--red-700);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 1px;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    margin-bottom: 1rem;
    text-transform: uppercase;
}
.special-card h2 { font-size: 1.8rem; }
.special-items { text-align: left; margin-top: 0.5rem; }
.special-item { padding: 1.1rem 0; border-bottom: 1px dashed rgba(201, 162, 39, 0.35); }
.special-item:first-child { padding-top: 0.25rem; }
.special-item:last-child { padding-bottom: 0; border-bottom: 0; }
.special-item .special-name { margin: 0; }
.special-item .price { font-size: 1.2rem; }
.special-price-wrap { display: inline-flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; }
.price-special { color: var(--red-700); }
.special-was { color: var(--muted); font-size: 0.9rem; text-decoration: line-through; }
.special-item .special-desc { margin: 0.3rem 0 0; }
.special-name { font-size: 1.25rem; color: var(--amber-700); font-weight: 600; margin: 0.9rem 0 0.4rem; }
.special-desc { color: var(--muted); max-width: 560px; margin: 0 auto 1rem; }
.special-price { font-family: var(--font-display); font-size: 1.7rem; color: var(--brown-900); }

/* ---------------------------------------------------------- Restaurant hours */
.hours-wrap { padding: 3.5rem 0; }
.hours-box {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    box-shadow: 0 12px 34px rgba(36, 20, 10, 0.16);
    overflow: hidden;
}
.hours-box-header {
    background: linear-gradient(90deg, var(--brown-900), var(--brown-800));
    color: var(--gold-soft);
    text-align: center;
    padding: 1rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: 1px;
    border-bottom: 3px solid var(--gold);
}
.hours-rows { padding: 1.1rem 1.5rem; }
.hours-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.42rem 0; border-bottom: 1px dashed var(--line); font-size: 0.98rem; }
.hours-row:last-child { border-bottom: 0; }
.hours-row .day { font-weight: 600; color: var(--brown-900); min-width: 52px; }
.hours-row .time { color: var(--ink); }
.hours-row.today { color: var(--red-700); font-weight: 600; }
.hours-note { text-align: center; color: var(--muted); margin-top: 1rem; font-style: italic; }

/* ----------------------------------------------------- Banner frames */
.banner-frame {
    position: relative;
    background: linear-gradient(160deg, var(--brown-700) 0%, var(--brown-800) 45%, var(--brown-900) 100%);
    border: 4px solid var(--gold);
    border-radius: 14px;
    padding: clamp(0.9rem, 2vw, 1.5rem);
    box-shadow:
        inset 0 0 0 2px rgba(36, 20, 10, 0.35),
        0 18px 45px rgba(36, 20, 10, 0.35);
}
.banner-frame + .banner-frame { margin-top: 2.25rem; }
.banner-frame::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 2px dashed rgba(227, 200, 131, 0.55);
    border-radius: 9px;
    pointer-events: none;
}
.banner-inner {
    position: relative;
    background: var(--paper);
    border-radius: 8px;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.1rem, 3vw, 2.25rem);
}

/* Rope frame — braided twine look (lasso-style border) */
.banner-rope {
    border: none;
    padding: clamp(1rem, 2vw, 1.6rem);
    background-color: #7a4c1d;
    background-image:
        radial-gradient(circle at 50% 0%, rgba(255, 224, 168, 0.35), transparent 60%),
        repeating-linear-gradient(
            -45deg,
            #e9c983 0, #e9c983 2px,
            #c99a4e 2px, #c99a4e 7px,
            #9a6d31 7px, #9a6d31 9px,
            #c99a4e 9px, #c99a4e 14px,
            #5f3a15 14px, #5f3a15 16px
        ),
        repeating-linear-gradient(
            45deg,
            #5f3a15 0, #5f3a15 2px,
            #c99a4e 2px, #c99a4e 7px,
            #9a6d31 7px, #9a6d31 9px,
            #e9c983 9px, #e9c983 11px,
            #c99a4e 11px, #c99a4e 16px,
            #5f3a15 16px, #5f3a15 18px
        );
    box-shadow:
        inset 0 0 0 3px rgba(255, 220, 160, 0.22),
        inset 0 0 0 6px rgba(58, 34, 12, 0.38),
        0 18px 45px rgba(36, 20, 10, 0.35);
}
.banner-rope::before {
    inset: 10px;
    border: 4px dashed rgba(240, 200, 130, 0.7);
    border-radius: 10px;
    box-shadow: 0 0 0 2px rgba(58, 34, 12, 0.5);
}

/* Wanted poster frame */
.banner-wanted {
    position: relative;
    background: #e6d5a4;
    border: 5px double #3a2112;
    border-radius: 6px;
    padding: clamp(1.1rem, 2.2vw, 1.7rem);
    background-image:
        radial-gradient(circle at 12% 8%, rgba(58, 33, 18, 0.10), transparent 38%),
        radial-gradient(circle at 88% 90%, rgba(58, 33, 18, 0.12), transparent 42%),
        radial-gradient(circle at 60% 40%, rgba(255, 251, 235, 0.35), transparent 55%),
        repeating-linear-gradient(0deg, rgba(58, 33, 18, 0.03) 0 2px, transparent 2px 4px);
    box-shadow:
        inset 0 0 0 3px rgba(255, 251, 235, 0.35),
        inset 0 0 0 6px rgba(58, 33, 18, 0.12),
        0 18px 45px rgba(36, 20, 10, 0.35);
}
.banner-wanted .banner-inner {
    background: transparent;
    border-radius: 4px;
    padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2.5vw, 1.75rem);
}

/* --------------------------------------------------------------- Menu page */
.menu-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 2rem 0 2.5rem; }
.menu-tab {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--brown-800);
    cursor: pointer;
    transition: all 0.2s;
}
.menu-tab:hover { border-color: var(--amber-500); color: var(--amber-700); }
.menu-tab.active { background: var(--amber-700); border-color: var(--amber-700); color: #fff; }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.menu-section-heading {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--brown-900);
    text-align: center;
    margin-bottom: 1.5rem;
}
.menu-section-heading span { display: inline-block; border-bottom: 2px solid var(--gold); padding-bottom: 0.25rem; }
.menu-section-subtitle { text-align: center; color: var(--muted); font-size: 0.95rem; font-style: italic; margin: -0.75rem 0 1.75rem; }

.menu-items { padding-bottom: 2rem; }
.menu-item-row { border-bottom: 1px dashed var(--line); padding: 0.9rem 0; }
.menu-item-row:last-child { border-bottom: 0; }
.menu-item-name { font-size: 1.05rem; color: var(--brown-900); }
.menu-item-desc { color: var(--muted); font-size: 0.92rem; margin-top: 0.3rem; max-width: 60ch; }
.menu-item-variants { list-style: none; margin-top: 0.5rem; display: grid; gap: 0.25rem; max-width: 420px; }
.menu-item-variants li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.95rem; color: var(--ink); }

.drink-facts { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; margin-top: 0.45rem; }
.drink-fact { display: inline-flex; align-items: baseline; gap: 0.35rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.12rem 0.65rem; background: var(--paper); }
.drink-fact-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.drink-fact-value { font-size: 0.82rem; font-weight: 600; color: var(--brown-900); font-variant-numeric: tabular-nums; }


/* ---------------------------------------------------------------- Contact */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: start; }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; }
.info-card h3 { font-size: 1.15rem; margin-bottom: 0.6rem; color: var(--brown-900); }
.info-card p { color: var(--ink); font-size: 0.95rem; margin-bottom: 0.35rem; }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); }
.form-card h2 { font-size: 1.4rem; margin-bottom: 1.25rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--brown-900); margin-bottom: 0.35rem; }
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    background: var(--cream);
    color: var(--ink);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--amber-500);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16);
    background: #fff;
}
.form-group textarea { min-height: 130px; resize: vertical; }
.hp-field { position: absolute !important; left: -9999px !important; height: 0; width: 0; overflow: hidden; }

.alert { padding: 0.85rem 1rem; border-radius: 8px; margin-bottom: 1.25rem; font-size: 0.95rem; }
.alert-success { background: #e9f6ec; border: 1px solid #b9e2c3; color: #1f6b35; }
.alert-error { background: #fdeeee; border: 1px solid #f3c2c2; color: #8f1d1d; }

/* ---------------------------------------------------------------- Footer */
.site-footer { background: linear-gradient(180deg, var(--brown-900), var(--brown-950)); color: #d9cbb6; border-top: 3px solid var(--gold); margin-top: 3.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 2rem; padding: 3rem 1.25rem; }
.footer-brand { margin-bottom: 0.9rem; }
.footer-brand .brand-name { font-size: 1.15rem; }
.footer-text { font-size: 0.92rem; color: #cbbda6; margin-bottom: 0.4rem; }
.footer-heading { font-family: var(--font-display); font-size: 1.05rem; color: var(--gold-soft); margin-bottom: 0.9rem; letter-spacing: 0.5px; }
.footer-nav { display: flex; flex-direction: column; gap: 0.45rem; }
.footer-nav a { color: #cbbda6; font-size: 0.95rem; }
.footer-nav a:hover { color: var(--gold-soft); }
.footer-hours { list-style: none; }
.footer-hours li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; padding: 0.25rem 0; border-bottom: 1px dashed rgba(201, 162, 39, 0.25); }
.footer-hours .day { font-weight: 600; color: var(--gold-soft); }
.footer-note { margin-top: 0.75rem; font-style: italic; }
.footer-bottom { border-top: 1px solid rgba(201, 162, 39, 0.3); background: rgba(0, 0, 0, 0.22); }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.25rem; font-size: 0.88rem; color: #a99a84; }
.admin-login-link { color: inherit; margin-left: 0.5rem; text-decoration: underline; }
.admin-login-link:hover { color: var(--gold-soft); }

/* Range slider tick ruler (admin hero sliders) */
.range-ticks {
    position: relative;
    margin: 0.4rem 0.5rem 0;
    height: 1.1rem;
}
.range-ticks .tick {
    position: absolute;
    top: 0;
    height: 5px;
    width: 1px;
    background: var(--line);
    transform: translateX(-50%);
}
.range-ticks .tick em {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-style: normal;
    font-size: 0.7rem;
    color: var(--muted);
    line-height: 1;
    white-space: nowrap;
}
.range-ticks .tick[data-left="0"] { left: 0%; }
.range-ticks .tick[data-left="0"] em { transform: translateX(0); }
.range-ticks .tick[data-left="25"] { left: 25%; }
.range-ticks .tick[data-left="50"] { left: 50%; }
.range-ticks .tick[data-left="75"] { left: 75%; }
.range-ticks .tick[data-left="100"] { left: 100%; }
.range-ticks .tick[data-left="100"] em { transform: translateX(-100%); }

/* --------------------------------------------------- Event announcement ribbon */
.sb-event-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    padding: 0.9rem 1.25rem 0;
}

.sb-event-ribbon {
    position: relative;
    border: 1px solid rgba(196, 152, 60, 0.55);
    border-left: 5px solid var(--amber-600);
    border-radius: 8px;
    background: linear-gradient(90deg, #fff7e8, #fdf0d8);
    box-shadow: 0 2px 10px rgba(36, 20, 10, 0.08);
    overflow: hidden;
}

.sb-event-inner {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding: 0.7rem 0.95rem;
}

.sb-event-when {
    flex: 0 0 auto;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: var(--brown-900);
    color: var(--gold-soft);
    font: 700 11px/1.2 var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sb-event-body {
    flex: 1 1 240px;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    flex-wrap: wrap;
    min-width: 0;
    font-size: 0.94rem;
    line-height: 1.5;
}

.sb-event-heading {
    font: 700 1rem/1.35 var(--font-body);
    color: var(--brown-900);
}

.sb-event-details { color: var(--ink); opacity: 0.86; }
.sb-event-details br { content: ""; }

.sb-event-link {
    flex: 0 0 auto;
    color: var(--amber-700);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(180, 83, 9, 0.4);
    white-space: nowrap;
}
.sb-event-link:hover { border-bottom-color: currentColor; }

/* When the ribbon is up it is the first thing inside <main>, and the 0.9rem of
   padding above it reads as deliberate breathing room. With no ribbon there is
   nothing in that band at all, and the home page's first block is a plain
   .section, whose 3.5rem of top padding then shows as an empty strip of
   background under the header above the hero. Drop it, so with no banner the
   hero starts right at the header again.

   Both conditions are needed. The :first-child part means the padding comes back
   by itself the moment a ribbon is rendered, and the body class means a
   subpage that happens to open with a .section keeps its spacing untouched. */
body.pg-home main > .section:first-child { padding-top: 0; }

/* Flexbox gap is ignored by older iOS and Android browsers, which would leave
   the date badge pressed against the text. A margin keeps it readable there,
   and is dropped once gap is actually supported. */
.sb-event-when { margin-right: 0.9rem; }
@supports (gap: 1px) {
    .sb-event-when { margin-right: 0; }
}

@media (max-width: 680px) {
    .sb-event-stack { padding: 0.6rem 0.85rem 0; }
    .sb-event-inner { padding: 0.65rem 0.75rem; gap: 0.5rem; }
    .sb-event-body { flex: 1 1 100%; }
}

/* ------------------------------------------------------------- Pool bracket */
/* The live tournament bracket on the Players page. Rounds read left to right on
   a wide screen and stack top to bottom on a phone, so there is never a
   sideways scroll to discover. Results are marked with a word as well as a
   colour, so the bracket still reads without colour vision. */
.bracket-wrap { margin: 0 auto; max-width: 1080px; }

.bracket-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: .35rem;
}
.bracket-status { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.bracket-status strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--brown-900); }
.bracket-status-text { color: var(--muted); font-size: .9rem; }
.bracket-status-dot {
    width: .6rem; height: .6rem; border-radius: 50%;
    background: var(--line); display: inline-block; align-self: center;
}
.bracket-status-dot.is-live { background: var(--amber-500); box-shadow: 0 0 0 4px rgba(217,119,6,.18); }
.bracket-refresh { padding: .45rem 1.1rem; }
.bracket-updated { color: var(--muted); font-size: .8rem; margin-bottom: 1.25rem; }

.bracket-division {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 1.4rem 1.5rem; margin-bottom: 1.5rem;
}
.bracket-division-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap; margin-bottom: 1.1rem;
    padding-bottom: .7rem; border-bottom: 2px solid var(--line);
}
.bracket-division-name { font-size: 1.3rem; margin: 0; }
.bracket-rules-link {
    font-family: var(--font-body); font-size: .8rem; font-weight: 500;
    color: var(--muted); white-space: nowrap;
    padding: .3rem .1rem; /* keeps it a comfortable tap target on a phone */
}
.bracket-division-state { color: var(--muted); font-size: .88rem; }
.bracket-champion { font-size: .95rem; }
.bracket-champion span {
    background: var(--gold); color: var(--brown-950); font-size: .72rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    border-radius: 999px; padding: .1rem .55rem; margin-right: .4rem;
}

/* minmax(0, 1fr) rather than a fixed minimum: the columns share whatever room
   there is and shrink instead of pushing the page sideways. A bracket can run
   to five columns (two rounds, semifinals, final, 3rd place), which is more
   than a tablet has to give. */
.bracket-rounds { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .85rem; align-items: start; }
.bracket-round { min-width: 0; }
.bracket-round-label {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--muted); margin-bottom: .5rem;
}
/* The last two stages are the ones people care about, so they get lifted out
   of the running with a warmer frame. */
.bracket-stage-final .bracket-round-label,
.bracket-stage-third .bracket-round-label { color: var(--amber-700); }
.bracket-stage-final .bracket-match,
.bracket-stage-third .bracket-match { border-color: rgba(201,162,39,.55); }

.bracket-matches { list-style: none; }
.bracket-match {
    background: var(--cream); border: 1px solid var(--line);
    border-radius: 10px; padding: .5rem .6rem; margin-bottom: .6rem;
}
.bracket-player {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; padding: .2rem .35rem; border-radius: 6px; font-size: .93rem;
}
.bracket-player.is-winner { background: rgba(201,162,39,.22); font-weight: 600; }
.bracket-player.is-loser { color: var(--muted); text-decoration: line-through; }
.bracket-tag {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--amber-700); font-weight: 700;
}
.bracket-meta { color: var(--muted); font-size: .76rem; padding: .25rem .35rem 0; }
.bracket-bye { border-style: dashed; }
.bracket-bye .bracket-player-name { font-style: italic; }

.bracket-standings { margin-top: 1.25rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.bracket-standings-label {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--muted); margin-bottom: .5rem;
}
.bracket-standings ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.bracket-standing {
    display: inline-flex; align-items: baseline; gap: .4rem;
    background: var(--cream); border: 1px solid var(--line);
    border-radius: 999px; padding: .2rem .7rem; font-size: .86rem;
}
.bracket-standing-champion { background: var(--gold); border-color: var(--gold); font-weight: 600; }
.bracket-standing-eliminated { color: var(--muted); }
.bracket-standing-place { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.bracket-standing-champion .bracket-standing-place { color: var(--brown-950); }

.bracket-empty {
    background: var(--paper); border: 1px dashed var(--line);
    border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; color: var(--muted);
}

@media (max-width: 860px) {
    .bracket-rounds { display: block; }
    .bracket-round { margin-bottom: 1.1rem; }
    .bracket-round:last-child { margin-bottom: 0; }
    .bracket-division { padding: 1.1rem 1rem; }
}
@media (pointer: coarse) {
    .bracket-refresh { padding: .6rem 1.2rem; }
}

/* -------------------------------------------------------------- Responsive */
@media (max-width: 900px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
    .nav-toggle { display: block; }
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--brown-950);
        border-bottom: 3px solid var(--gold);
        padding: 0.5rem 1rem 1rem;
        gap: 0.1rem;
    }
    .site-nav.open { display: flex; }
    .nav-list { flex-direction: column; align-items: stretch; gap: 0.1rem; }
    .nav-item { display: block; width: 100%; }
    .nav-list > .nav-item.has-dropdown > .nav-link { padding-right: 0.75rem; }
    .nav-caret { margin-left: 0.45rem; }
    .dropdown,
    .dropdown .dropdown { display: block; position: static; box-shadow: none; border: 0; border-radius: 0; padding: 0.2rem 0 0.35rem 1rem; }
    .dropdown .dropdown { padding-left: 2rem; }
    .dropdown .dropdown .nav-caret { transform: none; }
    .nav-link { padding: 0.8rem 0.75rem; border-radius: 8px; border-bottom: 0; }
    .nav-link.active { background: rgba(217, 119, 6, 0.18); }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.25rem 1.25rem; }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .hero { min-height: 420px; }
    .section { padding: 2.5rem 0; }
}