/* =========================================================================
   TEMPO Italian Kitchen & Bar — site stylesheet
   Black / warm-cream brand echoing the backlit channel-letter sign.
   ========================================================================= */

:root {
    --ink: #0c0b09;
    --ink-2: #131110;          /* slightly raised panels */
    --ink-3: #1b1816;          /* cards */
    --cream: #f4ede1;
    --cream-dim: rgba(244, 237, 225, 0.62);
    --cream-faint: rgba(244, 237, 225, 0.4);
    --hairline: rgba(244, 237, 225, 0.14);
    --hairline-2: rgba(244, 237, 225, 0.28);
    --glow: rgba(255, 226, 178, 0.32);
    --glow-soft: rgba(255, 226, 178, 0.14);
    --warn: #e8b9a8;
    --maxw: 1500px;
    --pad: 2.5rem;
    --nav-h: 76px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { min-height: 100%; }
body {
    font-family: 'Montserrat', sans-serif;
    background: var(--ink);
    color: var(--cream);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Warm halo + film grain, fixed behind everything (matches coming-soon) */
.bg-fx::before,
.bg-fx::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.bg-fx::before {
    background:
        radial-gradient(ellipse 60% 45% at 22% 14%, rgba(255, 226, 178, 0.075), transparent 70%),
        radial-gradient(ellipse 50% 60% at 84% 88%, rgba(255, 226, 178, 0.04), transparent 70%);
}
.bg-fx::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.045;
}

/* --- Layout primitives -------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.wrap-narrow { max-width: 980px; }
section { position: relative; z-index: 1; }
.section { padding: clamp(4rem, 9vh, 7.5rem) 0; }
.section-sm { padding: clamp(3rem, 6vh, 4.5rem) 0; }
.hairline-top { border-top: 1px solid var(--hairline); }

/* --- Typography --------------------------------------------------------- */
.eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--cream-dim);
}
.eyebrow.with-rule::before {
    content: '';
    display: inline-block;
    width: 2.2rem;
    height: 1px;
    background: var(--cream-dim);
    vertical-align: middle;
    margin-right: 1rem;
}
.display {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0.01em;
    font-size: clamp(2.4rem, 5.2vw, 4rem);
}
.display.italic { font-style: italic; }
.h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-style: italic;
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    line-height: 1.12;
}
.lede {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.5;
    color: var(--cream-dim);
}
/* NO WIDOWS. Headings balance across lines instead of dropping one or two words
   onto a stranded last line; body copy uses `pretty`, which specifically avoids
   a single-word final line. Applies site-wide — don't hand-fix individual
   strings with <br> or &nbsp;, fix it here. */
h1, h2, h3, h4,
.display, .h2, .lede, .region-title, .region-blurb, .teaser-title,
.card-title, .panel-title, .band-cap .display, .eyebrow { text-wrap: balance; }
p, .body, li { text-wrap: pretty; }

/* Keep a phrase intact on desktop but let it wrap on phones — a nowrap span
   wider than the viewport overflows the page rather than breaking. */
.nowrap-md { white-space: nowrap; }
@media (max-width: 620px) { .nowrap-md { white-space: normal; } }

.body { font-size: 1rem; font-weight: 500; line-height: 1.75; color: var(--cream-dim); }
.body + .body { margin-top: 1.15rem; }
.measure { max-width: 56ch; }
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* --- Logo lockup (inline SVG, textLength keeps subline = TEMPO width) ---- */
.lockup svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 0 22px var(--glow)) drop-shadow(0 0 70px var(--glow-soft));
}
.lockup text { fill: var(--cream); font-family: 'Montserrat', sans-serif; }
.lockup .wm { font-weight: 800; font-size: 175px; }
.lockup .sl { font-weight: 600; font-size: 36px; }
.lockup rect { fill: var(--cream); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
    display: inline-block;
    background: var(--cream);
    color: var(--ink);
    border: 1px solid var(--cream);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 1rem 1.9rem 0.95rem 2.18rem;   /* extra left pad offsets tracking */
    cursor: pointer;
    transition: box-shadow 0.3s, background 0.3s, color 0.3s, transform 0.15s;
}
.btn:hover { background: #fff; box-shadow: 0 0 34px var(--glow); }
.btn:active { transform: translateY(1px); }
.btn.full { width: 100%; text-align: center; }
.btn.ghost {
    background: transparent;
    color: var(--cream);
    border-color: var(--hairline-2);
}
.btn.ghost:hover { border-color: var(--cream); background: transparent; box-shadow: 0 0 26px var(--glow); }

/* text link with hairline underline */
.link {
    color: var(--cream);
    text-decoration: none;
    border-bottom: 1px solid var(--hairline-2);
    padding-bottom: 2px;
    transition: border-color 0.3s, text-shadow 0.3s;
}
.link:hover { border-color: var(--cream); text-shadow: 0 0 14px var(--glow); }

/* --- Navigation --------------------------------------------------------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    background: rgba(12, 11, 9, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--hairline);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--cream);
}
.brand .mark {
    font-weight: 800;
    font-size: 1.18rem;
    letter-spacing: 0.34em;
    text-shadow: 0 0 18px var(--glow);
}
.brand .sub {
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cream-faint);
}
.nav-links { display: flex; align-items: center; gap: 1.7rem; list-style: none; }
.nav-links a {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--cream-dim);
    padding: 0.4rem 0;
    position: relative;
    transition: color 0.25s;
}
.nav-links a:hover { color: var(--cream); }
.nav-links a.active { color: var(--cream); }
.nav-links a.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 1px;
    background: var(--cream);
    box-shadow: 0 0 10px var(--glow);
}
.nav-links a.cta {
    color: var(--ink);
    background: var(--cream);
    padding: 0.6rem 1.1rem;
    letter-spacing: 0.2em;
}
.nav-links a.cta:hover { box-shadow: 0 0 24px var(--glow); }
.nav-toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--cream);
    cursor: pointer;
    width: 38px; height: 38px;
    position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
    content: '';
    position: absolute;
    left: 7px;
    width: 24px; height: 1.5px;
    background: var(--cream);
    transition: transform 0.3s, opacity 0.2s;
}
.nav-toggle span { top: 18px; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span::after { transform: translateY(-7px) rotate(-45deg); }

/* --- Hero --------------------------------------------------------------- */
.hero {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h));
    display: flex;
    align-items: center;
    padding: clamp(3rem, 8vh, 6rem) 0;
}
.hero-lockup { max-width: 560px; }
.hero .eyebrow { margin-bottom: 2rem; }
.hero .tagline { margin-top: 2.4rem; max-width: 48ch; }
.hero-cta { margin-top: 2.8rem; display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; align-items: center; }
.hero-meta {
    margin-top: 2.6rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cream-dim);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
}
.hero-meta .dot { opacity: 0.45; }

/* page header (interior pages) */
.page-head { padding: clamp(3.5rem, 8vh, 6rem) 0 clamp(2.5rem, 5vh, 4rem); text-align: center; }
.page-head .eyebrow { margin-bottom: 1.4rem; }
.page-head .lede { margin: 1.6rem auto 0; max-width: 52ch; }

/* --- Two-column feature ------------------------------------------------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: center;
}
.split.narrow-text { grid-template-columns: 1.05fr 0.95fr; }
.split .h2 + .body { margin-top: 1.4rem; }
.split .btn-row { margin-top: 2.2rem; }

/* --- Cards / grids ------------------------------------------------------ */
.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card {
    background: var(--ink-3);
    border: 1px solid var(--hairline);
    padding: 2.2rem 2rem;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.card:hover { border-color: var(--hairline-2); box-shadow: 0 24px 50px -30px rgba(0,0,0,0.8); transform: translateY(-3px); }
.card .card-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 0.7rem;
}
.card .body { font-size: 0.92rem; line-height: 1.65; }
.card .card-icon {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.7rem;
    color: var(--cream);
    text-shadow: 0 0 18px var(--glow);
    margin-bottom: 1rem;
}

/* --- Menu list ---------------------------------------------------------- */
.menu-section { margin-bottom: 3.5rem; }
.menu-section h3 {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.9rem;
    margin-bottom: 0.4rem;
}
.menu-section .menu-note { font-size: 0.82rem; color: var(--cream-faint); margin-bottom: 1.8rem; }
.menu-item { padding: 1.1rem 0; border-bottom: 1px solid var(--hairline); }
.menu-item:last-child { border-bottom: 0; }
.menu-item .row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.menu-item .name { font-weight: 600; font-size: 1.02rem; letter-spacing: 0.01em; }
.menu-item .price { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.15rem; color: var(--cream); white-space: nowrap; }
.menu-item .desc { margin-top: 0.4rem; font-size: 0.9rem; line-height: 1.6; color: var(--cream-dim); max-width: 64ch; }

/* --- Gallery ------------------------------------------------------------ */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery .tile {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--ink-3);
    border: 1px solid var(--hairline);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gallery .tile.wide { grid-column: span 2; aspect-ratio: 8 / 5; }
.gallery .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.gallery .tile:hover img { transform: scale(1.05); }
.gallery .tile .placeholder {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--cream-faint);
    letter-spacing: 0.04em;
}
.gallery .tile .tile-cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 1.4rem 1.2rem 1rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.25rem;
    color: var(--cream);
    background: linear-gradient(0deg, rgba(12, 11, 9, 0.78), transparent);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s, transform 0.4s;
    pointer-events: none;
}
.gallery .tile:hover .tile-cap { opacity: 1; transform: translateY(0); }
@media (hover: none) { .gallery .tile .tile-cap { opacity: 1; transform: none; } }

/* --- Coming-soon panel -------------------------------------------------- */
.coming-soon {
    border: 1px solid var(--hairline);
    background: linear-gradient(180deg, rgba(255,226,178,0.03), transparent);
    padding: clamp(2.5rem, 6vw, 4.5rem);
    text-align: center;
}
.coming-soon .mark {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 3rem);
    text-shadow: 0 0 28px var(--glow);
    margin-bottom: 0.8rem;
}

/* --- Info / hours / contact rows --------------------------------------- */
.info-list { list-style: none; }
.info-list li { padding: 1rem 0; border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 1.2rem; }
.info-list li:last-child { border-bottom: 0; }
.info-list .k { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-dim); }
.info-list .v { font-size: 0.95rem; font-weight: 500; text-align: right; }
.info-block .label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cream-faint); margin-bottom: 0.5rem; }
.info-block .val { font-size: 1.05rem; font-weight: 500; line-height: 1.6; }

/* Opening hours — day on the left, time on the right, from tempo_site()['hours'] */
.hours-list { list-style: none; }
.hours-list li { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.3rem 0; }
.hours-list .d { color: var(--cream-dim); }
.hours-list .t { white-space: nowrap; font-variant-numeric: tabular-nums; }
.section.light .hours-list .d { color: rgba(12, 11, 9, 0.6); }
@media (max-width: 420px) { .hours-list li { flex-direction: column; gap: 0.1rem; } }
.info-block + .info-block { margin-top: 1.8rem; }

/* --- Forms -------------------------------------------------------------- */
.field { margin-bottom: 1.6rem; }
.field label,
.field .lab {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cream-dim);
    margin-bottom: 0.45rem;
}
.field .opt { text-transform: none; letter-spacing: 0.05em; color: var(--cream-faint); }
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=date],
.field input[type=time],
.field input[type=number],
.field select,
.field textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--hairline-2);
    color: var(--cream);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.45rem 0 0.6rem;
    outline: none;
    border-radius: 0;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field select option { background: var(--ink-2); color: var(--cream); }
.field input:focus, .field select:focus, .field textarea:focus {
    border-bottom-color: var(--cream);
    box-shadow: 0 12px 18px -14px var(--glow);
}
.field .err { display: block; margin-top: 0.4rem; font-size: 0.74rem; font-weight: 500; color: var(--warn); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-err {
    border: 1px solid rgba(232, 185, 168, 0.4);
    color: var(--warn);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 0.8rem 1rem;
    margin-bottom: 1.8rem;
}
.check { display: flex; align-items: flex-start; gap: 0.8rem; margin: 1.4rem 0 2rem; cursor: pointer; -webkit-user-select: none; user-select: none; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box {
    flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px;
    border: 1px solid rgba(244, 237, 225, 0.45); position: relative;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.check .box::after {
    content: ''; position: absolute; inset: 3px; background: var(--cream);
    transform: scale(0); transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.check input:checked + .box { border-color: var(--cream); box-shadow: 0 0 12px var(--glow); }
.check input:checked + .box::after { transform: scale(1); }
.check input:focus-visible + .box { outline: 2px solid var(--cream-dim); outline-offset: 3px; }
.check .lbl { font-size: 0.83rem; font-weight: 500; line-height: 1.45; color: var(--cream-dim); }
.hp { position: absolute; left: -9999px; top: -9999px; }

/* form panel (bordered, like coming-soon signup) */
.panel {
    border: 1px solid var(--hairline);
    background: linear-gradient(180deg, rgba(255,226,178,0.03), transparent);
    padding: clamp(2rem, 4vw, 3rem);
}
.panel .panel-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.9rem; margin-bottom: 0.5rem; }
.panel .panel-note { font-size: 0.86rem; font-weight: 500; line-height: 1.6; color: var(--cream-dim); margin-bottom: 2rem; }
.thanks-mark { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 2.6rem; text-shadow: 0 0 28px var(--glow); margin-bottom: 0.8rem; }

/* --- Map ---------------------------------------------------------------- */
.map-frame { border: 1px solid var(--hairline); width: 100%; aspect-ratio: 16 / 9; filter: grayscale(1) contrast(0.9) brightness(0.85); transition: filter 0.5s; }
.map-frame:hover { filter: grayscale(0.3) contrast(1) brightness(1); }

/* --- Footer ------------------------------------------------------------- */
.foot { position: relative; z-index: 1; border-top: 1px solid var(--hairline); padding: clamp(3rem, 7vh, 5rem) 0 2rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr; gap: 2.5rem 3rem; }
.foot .brand .mark { font-size: 1.4rem; }
.foot-tag { margin-top: 1.2rem; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.05rem; color: var(--cream-dim); max-width: 30ch; }
.foot-col h4 { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cream-faint); margin-bottom: 1.1rem; }
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 0.7rem; }
.foot-col a, .foot-col .v { font-size: 0.9rem; font-weight: 500; color: var(--cream-dim); text-decoration: none; transition: color 0.25s; }
.foot-col a:hover { color: var(--cream); }
.foot-signup .panel-note { font-size: 0.84rem; margin-bottom: 1.2rem; }
.foot-signup .inline-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.foot-signup .inline-form input[type=email] {
    flex: 1 1 180px;
    min-width: 0;
    background: rgba(244, 237, 225, 0.04);
    border: 1px solid var(--hairline-2);
    color: var(--cream);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.78rem 1rem;
    border-radius: 0;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.foot-signup .inline-form input[type=email]::placeholder { color: var(--cream-faint); }
.foot-signup .inline-form input[type=email]:focus {
    border-color: var(--cream);
    background: rgba(244, 237, 225, 0.07);
    box-shadow: 0 0 0 1px var(--cream), 0 10px 26px -18px var(--glow);
}
.foot-signup .inline-form .btn { flex: 0 0 auto; padding: 0.8rem 1.3rem; }
.foot-bar {
    margin-top: clamp(2.5rem, 5vh, 3.5rem);
    padding-top: 1.6rem;
    border-top: 1px solid var(--hairline);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem;
    font-size: 0.66rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(244, 237, 225, 0.38);
}
.foot-bar a { color: inherit; text-decoration: none; }
.foot-bar a:hover { color: var(--cream-dim); }

/* credit logos (Basch Solutions / Graystorm) */
.foot-credits {
    margin-top: 1.5rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 2.6rem;
}
.foot-credits a { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.foot-credits .cr-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(244, 237, 225, 0.38);
    transition: color 0.3s;
}
.foot-credits .cr-logo {
    height: 22px;
    width: auto;
    opacity: 0.82;                      /* full-color brand logos, slightly dimmed at rest */
    transition: opacity 0.3s, filter 0.3s;
}
.foot-credits a:hover .cr-logo { opacity: 1; filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.5)); }
.foot-credits a:hover .cr-label { color: var(--cream-dim); }

/* social icons */
.foot-social { display: flex; gap: 0.7rem; margin-top: 1.5rem; }
.foot-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    color: var(--cream-dim);
    border: 1px solid var(--hairline-2);
    border-radius: 50%;
    transition: color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.2s;
}
.foot-social a:hover { color: var(--cream); border-color: var(--cream); box-shadow: 0 0 22px var(--glow); transform: translateY(-2px); }
.foot-social svg { display: block; }

/* --- Animation (rise on load) ------------------------------------------ */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.rise { opacity: 0; animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.d1{animation-delay:.08s}.d2{animation-delay:.2s}.d3{animation-delay:.32s}
.d4{animation-delay:.44s}.d5{animation-delay:.56s}.d6{animation-delay:.68s}
@media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; } }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .foot-signup { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
    :root { --pad: 1.5rem; }
    .nav-toggle { display: block; }
    .nav-links {
        position: fixed;
        top: var(--nav-h); left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: rgba(12, 11, 9, 0.97);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--hairline);
        padding: 0.5rem var(--pad) 1.5rem;
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
        max-height: calc(100dvh - var(--nav-h));
        overflow-y: auto;
    }
    .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; }
    .nav-links li { border-bottom: 1px solid var(--hairline); }
    .nav-links li:last-child { border-bottom: 0; }
    .nav-links a { display: block; padding: 1rem 0; font-size: 0.8rem; }
    .nav-links a.active::after { display: none; }
    .nav-links a.cta { text-align: center; margin-top: 1rem; padding: 0.9rem 1.1rem; }
    .split, .split.narrow-text { grid-template-columns: 1fr; gap: 2.5rem; }
    .grid-3 { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .gallery .tile.wide { grid-column: span 2; }
    .form-grid { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .grid-2 { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: 1fr; }
    .gallery .tile.wide { grid-column: auto; }
    .info-list li { flex-direction: column; gap: 0.3rem; }
    .info-list .v { text-align: left; }
}

/* =========================================================================
   Photography + light sections  (added 2026-06-17)
   Breaks up the all-dark layout: cream sections alternate with the brand
   dark, and real food/interior photography is woven throughout.
   ========================================================================= */

/* --- Light (cream) section theme --------------------------------------- */
.section.light { background: var(--cream); color: var(--ink); }
.section.light.hairline-top { border-top-color: rgba(12, 11, 9, 0.1); }
.section.light .display,
.section.light .h2,
.section.light .panel-title,
.section.light .card-title,
.section.light .menu-section h3,
.section.light .thanks-mark,
.section.light .coming-soon .mark { color: var(--ink); text-shadow: none; }
.section.light .eyebrow { color: rgba(12, 11, 9, 0.55); }
.section.light .eyebrow.with-rule::before { background: rgba(12, 11, 9, 0.45); }
.section.light .lede { color: rgba(12, 11, 9, 0.66); }
.section.light .body { color: rgba(12, 11, 9, 0.72); }
.section.light .menu-section .menu-note { color: rgba(12, 11, 9, 0.5); }
.section.light .menu-item { border-bottom-color: rgba(12, 11, 9, 0.12); }
.section.light .menu-item .name,
.section.light .menu-item .price { color: var(--ink); }
.section.light .menu-item .desc { color: rgba(12, 11, 9, 0.66); }
.section.light .link { color: var(--ink); border-bottom-color: rgba(12, 11, 9, 0.32); }
.section.light .link:hover { border-color: var(--ink); text-shadow: none; }
.section.light .card { background: #fffdf8; border-color: rgba(12, 11, 9, 0.1); }
.section.light .card:hover { border-color: rgba(12, 11, 9, 0.22); box-shadow: 0 24px 50px -34px rgba(12, 11, 9, 0.4); }
.section.light .card-icon { color: var(--ink); text-shadow: none; }
.section.light .btn.ghost { color: var(--ink); border-color: rgba(12, 11, 9, 0.28); }
.section.light .btn.ghost:hover { border-color: var(--ink); box-shadow: 0 10px 30px -16px rgba(12, 11, 9, 0.5); }
.section.light .coming-soon { border-color: rgba(12, 11, 9, 0.14); background: linear-gradient(180deg, rgba(12, 11, 9, 0.025), transparent); }

/* --- Hero with photographic backdrop ----------------------------------- */
.hero.hero-photo { isolation: isolate; }
.hero.hero-photo .hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero.hero-photo .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero.hero-photo .hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(12, 11, 9, 0.8) 0%, rgba(12, 11, 9, 0.5) 48%, rgba(12, 11, 9, 0.12) 100%),
        linear-gradient(0deg, rgba(12, 11, 9, 0.5), transparent 42%);
}
/* lift legibility of hero text now that the photo shows through */
.hero.hero-photo .lockup svg { filter: drop-shadow(0 0 22px var(--glow)) drop-shadow(0 2px 18px rgba(0, 0, 0, 0.6)); }
.hero.hero-photo .eyebrow,
.hero.hero-photo .tagline,
.hero.hero-photo .hero-meta { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); }

/* --- Image figure for split columns ------------------------------------ */
.media { position: relative; overflow: hidden; border: 1px solid var(--hairline); }
.section.light .media { border-color: rgba(12, 11, 9, 0.12); }
.media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.media.tall img { aspect-ratio: 4 / 5; }
.media:hover img { transform: scale(1.04); }

/* --- Full-bleed photo band with centered caption ----------------------- */
.photo-band { position: relative; z-index: 1; height: clamp(280px, 46vh, 460px); overflow: hidden; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; }
.photo-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 11, 9, 0.55), rgba(12, 11, 9, 0.28)); }
/* Food shots run far brighter than the dark room photography the default scrim
   was tuned for, and the caption washes out over cheese. Add .bright to any
   band whose image is light. */
.photo-band.bright::after { background: linear-gradient(0deg, rgba(12, 11, 9, 0.72), rgba(12, 11, 9, 0.5)); }
.photo-band .band-cap { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; }
/* keep the kicker legible where the photo runs bright behind it */
.photo-band .band-cap .eyebrow { margin-bottom: 1rem; color: var(--cream); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85); }
.photo-band .band-cap .eyebrow.with-rule::before { background: var(--cream); }
.photo-band .band-cap .display { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5); }

/* Home menu-teaser heading — must stay on ONE line beside the pizza photo.
   The font scales with the viewport so it never outgrows its split column; below
   860px the split collapses to one column and wrapping is allowed again. */
.teaser-title {
    white-space: nowrap;
    font-size: clamp(1.45rem, 3.05vw, 2.5rem);
}
@media (max-width: 860px) {
    .teaser-title { white-space: normal; font-size: clamp(1.9rem, 5.5vw, 2.5rem); }
}

/* EYEBROWS ON SMALL SCREENS.
   0.5em tracking plus a 2.2rem rule reads well on desktop but is disastrous on
   a phone: "Stay in the Loop" became "——— STAY IN THE / LOOP", and the hero's
   opening line broke mid-date. Tighten the tracking and shorten the rule for
   every eyebrow site-wide rather than patching them one at a time. */
@media (max-width: 620px) {
    .eyebrow { letter-spacing: 0.22em; font-size: 0.66rem; line-height: 1.5; }
    .eyebrow.with-rule::before { width: 1.4rem; margin-right: 0.6rem; }
    /* Hero opening line breaks at the dash, so the date stays whole. */
    .opening-line .ol-sep { display: none; }
    .opening-line .ol-date { display: block; margin-top: 0.3rem; }
    /* "Grand Opening" must never split across lines. */
    .opening-line .ol-lead { white-space: nowrap; }
    .opening-line { letter-spacing: 0.18em; }
}
/* Narrow phones (iPhone mini/SE and the 390-393px class) had "GRAND / OPENING"
   splitting: at 0.22em it only just fitted, so any font-rendering difference
   tipped it over. Tighter tracking and a shorter rule give real headroom
   instead of relying on it barely fitting. */
@media (max-width: 430px) {
    .opening-line { letter-spacing: 0.14em; font-size: 0.63rem; }
    .opening-line.with-rule::before { width: 1rem; margin-right: 0.45rem; }
}

/* Signup section: photo beside the form. Capped narrower than --maxw so the
   form doesn't stretch across a 1500px screen, and the photo stretches to the
   panel's height rather than keeping .media.tall's fixed 4:5 ratio. */
.notify-split { max-width: 1180px; align-items: stretch; }
.notify-split .media { align-self: stretch; }
.notify-split .media img { height: 100%; aspect-ratio: auto; object-fit: cover; }
@media (max-width: 860px) {
    /* Stacked, the photo would push the form a long way down the page. */
    .notify-split .media { display: none; }
}

/* --- Small food thumbnail row ------------------------------------------ */
.thumb-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.thumb-row .media img { aspect-ratio: 1 / 1; }
@media (max-width: 640px) { .thumb-row { grid-template-columns: 1fr; } }

/* --- Hero slider (rotating background behind the fixed lockup) ---------- */
.hero-slider { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-slider .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; will-change: opacity; }
.hero-slider .slide.active { opacity: 1; }
.hero-slider .slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slider .slide.active img { animation: heroKenBurns 10s ease-out both; }
@keyframes heroKenBurns { from { transform: scale(1.03); } to { transform: scale(1.13); } }
/* reuse the same legibility scrim as the single-photo hero */
.hero.hero-photo .hero-slider::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(12, 11, 9, 0.8) 0%, rgba(12, 11, 9, 0.5) 48%, rgba(12, 11, 9, 0.12) 100%),
        linear-gradient(0deg, rgba(12, 11, 9, 0.5), transparent 42%);
}
.hero-dots {
    position: absolute;
    left: 0; right: 0;
    bottom: clamp(1.4rem, 4vh, 2.6rem);
    z-index: 2;
    display: flex;
    gap: 0.7rem;
    justify-content: center;
}
.hero-dots button {
    width: 9px; height: 9px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--cream-dim);
    background: transparent;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.2s;
}
.hero-dots button:hover { border-color: var(--cream); }
.hero-dots button.active { background: var(--cream); border-color: var(--cream); box-shadow: 0 0 12px var(--glow); }
@media (prefers-reduced-motion: reduce) {
    .hero-slider .slide { transition: none; }
    .hero-slider .slide.active img { animation: none; }
}

/* --- Quattro Movimenti: the four facets as a musical program ------------ */
.movimenti-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vh, 4rem); }
.movimenti-head .lede em { font-style: normal; }   /* "Tempo" stands upright inside the italic lede */

.program { list-style: none; border-top: 1px solid var(--hairline); }
.movement {
    position: relative;
    display: grid;
    grid-template-columns: 2rem 4.5rem minmax(9.5rem, 13rem) 1fr;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.6rem, 3.4vh, 2.5rem) 0;
    border-bottom: 1px solid var(--hairline);
    transition: border-color 0.4s;
}
.movement::before {           /* warm wash sweeps in from the left on hover */
    content: '';
    position: absolute;
    inset: 0 calc(var(--pad) * -0.5);
    background: linear-gradient(90deg, var(--glow-soft), transparent 62%);
    opacity: 0;
    transition: opacity 0.45s;
    pointer-events: none;
}
.movement:hover { border-color: var(--hairline-2); }
.movement:hover::before { opacity: 1; }

.mv-num {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.25rem;
    color: var(--cream-faint);
    transition: color 0.4s;
}
.movement:hover .mv-num { color: var(--cream); }

/* metronome — dots ripple at this movement's own tempo (--beat) on hover */
.mv-beats { display: flex; align-items: center; gap: 0.5rem; }
.mv-beats i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cream-faint);
    transition: background 0.3s, box-shadow 0.3s;
}
.movement:hover .mv-beats i {
    background: var(--cream);
    box-shadow: 0 0 8px var(--glow);
    animation: mvBeat var(--beat, 1s) ease-in-out infinite;
}
.mv-beats i:nth-child(2) { animation-delay: calc(var(--beat, 1s) * 0.12); }
.mv-beats i:nth-child(3) { animation-delay: calc(var(--beat, 1s) * 0.24); }
.mv-beats i:nth-child(4) { animation-delay: calc(var(--beat, 1s) * 0.36); }
@keyframes mvBeat { 0%, 100% { transform: scale(1); opacity: 0.4; } 45% { transform: scale(1.7); opacity: 1; } }

.mv-tempo { display: flex; flex-direction: column; gap: 0.25rem; }
.mv-term {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    line-height: 1;
    color: var(--cream);
    transition: text-shadow 0.4s;
}
.movement:hover .mv-term { text-shadow: 0 0 26px var(--glow); }
.mv-gloss {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cream-faint);
}
.mv-name {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cream-dim);
    margin-bottom: 0.7rem;
    transition: color 0.4s;
}
.movement:hover .mv-name { color: var(--cream); }
.mv-text .body { max-width: 52ch; }

@media (prefers-reduced-motion: reduce) {
    .movement:hover .mv-beats i { animation: none; }
}
@media (max-width: 760px) {
    .movement {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "num tempo"
            "beats beats"
            "text text";
        gap: 0.5rem 1.3rem;
        align-items: baseline;
    }
    .mv-num { grid-area: num; }
    .mv-tempo { grid-area: tempo; }
    .mv-beats { grid-area: beats; margin-top: 0.5rem; }
    .mv-text { grid-area: text; margin-top: 0.7rem; }
}

/* =========================================================================
   Regional menu  (added 2026-08-12 — client's final print menu)
   The printed menu tours the regions of Italy; each block carries the
   region, its wine, and the dishes it inspired.
   ========================================================================= */

/* --- Quiet bordered panel (generic sibling of .coming-soon) ------------- */
.panel {
    border: 1px solid var(--hairline);
    background: linear-gradient(180deg, rgba(255, 226, 178, 0.03), transparent);
    padding: clamp(2rem, 5vw, 3.4rem);
}

/* --- Jump chips --------------------------------------------------------- */
.menu-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; }
.menu-jump a {
    display: inline-block;
    padding: 0.55rem 1.05rem;
    border: 1px solid var(--hairline);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream-dim);
    text-decoration: none;
    transition: color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.menu-jump a:hover { color: var(--cream); border-color: var(--hairline-2); box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.9); }

/* --- Region block ------------------------------------------------------- */
.region { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.region + .region { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.region-head { margin-bottom: 2.2rem; }
.region-kicker {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--cream-faint);
}
.region-kicker .wine {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--cream-dim);
}
.region-kicker .wine::before { content: '·'; margin: 0 0.5rem; }
.region-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(2rem, 4vw, 2.9rem);
    line-height: 1.1;
    margin-top: 0.3rem;
}
.region-blurb {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--cream-dim);
    max-width: 62ch;
    margin-top: 0.6rem;
}
.region-note {
    margin-top: 1.2rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--hairline);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cream-faint);
}

/* --- Item list: two printed columns on wide screens --------------------- */
.menu-list.two-col { column-count: 2; column-gap: clamp(2rem, 4.5vw, 4.5rem); }
.menu-list .menu-item { break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (max-width: 760px) { .menu-list.two-col { column-count: 1; } }

.menu-item .gf { color: var(--cream-faint); margin-right: 0.2rem; }
.menu-item .pair {
    margin-top: 0.45rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--cream-faint);
}
.menu-item .add {
    margin-top: 0.45rem;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--cream-faint);
    max-width: 64ch;
}
.menu-item .add em {
    font-style: normal;
    font-weight: 600;
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-right: 0.35rem;
}

/* --- Sides -------------------------------------------------------------- */
.sides-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4.5vw, 4.5rem); }
@media (max-width: 560px) { .sides-grid { grid-template-columns: 1fr; } }
.sides-grid .side {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--hairline);
}
.sides-grid .side .name { font-weight: 600; font-size: 0.98rem; letter-spacing: 0.01em; }
.sides-grid .side .name .sub {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--cream-faint);
}
.sides-grid .side .price { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.15rem; white-space: nowrap; }

/* --- Fine print --------------------------------------------------------- */
.menu-fine { list-style: none; }
.menu-fine li { font-size: 0.78rem; line-height: 1.7; color: var(--cream-faint); }
.menu-fine li + li { margin-top: 0.55rem; }

/* --- Light-section overrides for all of the above ----------------------- */
.section.light .panel { border-color: rgba(12, 11, 9, 0.14); background: linear-gradient(180deg, rgba(12, 11, 9, 0.025), transparent); }
.section.light .menu-jump a { color: rgba(12, 11, 9, 0.6); border-color: rgba(12, 11, 9, 0.16); }
.section.light .menu-jump a:hover { color: var(--ink); border-color: rgba(12, 11, 9, 0.4); box-shadow: 0 12px 30px -22px rgba(12, 11, 9, 0.6); }
.section.light .region-title { color: var(--ink); }
.section.light .region-kicker { color: rgba(12, 11, 9, 0.5); }
.section.light .region-kicker .wine { color: rgba(12, 11, 9, 0.62); }
.section.light .region-blurb { color: rgba(12, 11, 9, 0.66); }
.section.light .region-note { color: rgba(12, 11, 9, 0.55); border-top-color: rgba(12, 11, 9, 0.14); }
.section.light .menu-item .gf,
.section.light .menu-item .pair,
.section.light .menu-item .add { color: rgba(12, 11, 9, 0.55); }
.section.light .sides-grid .side { border-bottom-color: rgba(12, 11, 9, 0.12); }
.section.light .sides-grid .side .name,
.section.light .sides-grid .side .price { color: var(--ink); }
.section.light .sides-grid .side .name .sub { color: rgba(12, 11, 9, 0.5); }
.section.light .menu-fine li { color: rgba(12, 11, 9, 0.55); }

/* =========================================================================
   Lunch + Catering menus  (added 2026-08-21)
   TEMPO runs three menus off one nav slot, so every menu page opens with a
   switcher. Catering prices come in PAIRS (half pan / full pan) and lunch
   leads with a Mon-Fri feature grid — neither fits the dinner row.
   ========================================================================= */

/* --- Dinner / Lunch / Catering switcher (sits in the dark page-head) ----- */
.menu-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 2.2rem; }
.menu-switch a {
    display: inline-block;
    padding: 0.6rem 1.3rem;
    border: 1px solid var(--hairline);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cream-dim);
    text-decoration: none;
    transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.menu-switch a:hover { color: var(--cream); border-color: var(--hairline-2); }
.menu-switch a.is-current { background: var(--cream); border-color: var(--cream); color: var(--ink); }

/* --- "Printable PDF" links, directly under the switcher ----------------- */
.menu-downloads {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem 1.1rem;
    margin-top: 1.4rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.menu-downloads .lab { color: var(--cream-faint); }
.menu-downloads .lab::after { content: ''; display: inline-block; width: 1.4rem; height: 1px; background: var(--cream-faint); vertical-align: middle; margin-left: 0.7rem; }
.menu-downloads a {
    color: var(--cream-dim);
    text-decoration: none;
    border-bottom: 1px solid var(--hairline-2);
    padding-bottom: 0.2rem;
    transition: color 0.3s, border-color 0.3s;
}
.menu-downloads a:hover { color: var(--cream); border-color: var(--cream); }
.section.light .menu-downloads .lab { color: rgba(12, 11, 9, 0.5); }
.section.light .menu-downloads .lab::after { background: rgba(12, 11, 9, 0.4); }
.section.light .menu-downloads a { color: rgba(12, 11, 9, 0.7); border-bottom-color: rgba(12, 11, 9, 0.3); }
.section.light .menu-downloads a:hover { color: var(--ink); border-color: var(--ink); }

/* --- Lunch: Mon-Fri pasta + soup features ------------------------------- */
.daily-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 760px) { .daily-grid { grid-template-columns: 1fr; } }
.daily-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
}
.daily-row {
    display: grid;
    grid-template-columns: 7.5rem 1fr auto;
    gap: 1rem;
    align-items: baseline;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--hairline);
}
.daily-row:last-of-type { border-bottom: 0; }
.daily-row .day {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cream-faint);
}
.daily-row .dish { font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; }
.daily-row .price { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.1rem; white-space: nowrap; }
@media (max-width: 420px) {
    .daily-row { grid-template-columns: 1fr auto; }
    .daily-row .day { grid-column: 1 / -1; }
}

/* --- Catering: two prices per row (half pan / full pan) ----------------- */
/* Two aligned price columns — catering's half/full pan AND the wine list's
   glass/bottle. .dual-legend deliberately mirrors .dual-price's flex gap +
   min-width so the column labels land exactly above their own prices; change
   one and you must change the other. The SECOND price is dimmed via
   `span + span`, so markup needs no per-column classes — but an item missing
   its first price must still emit an empty <span> or it will slide into the
   wrong column. */
.dual-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--hairline);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cream-faint);
}
.dual-legend { display: inline-flex; gap: clamp(1rem, 3vw, 2.4rem); }
.dual-legend span { min-width: 3.4ch; text-align: right; }
.dual-price {
    display: inline-flex;
    gap: clamp(1rem, 3vw, 2.4rem);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.15rem;
    white-space: nowrap;
}
.dual-price span { min-width: 3.4ch; text-align: right; }
.dual-price span + span { color: var(--cream-dim); }

/* --- Light-section overrides -------------------------------------------- */
.section.light .daily-title { color: var(--ink); }
.section.light .daily-row { border-bottom-color: rgba(12, 11, 9, 0.12); }
.section.light .daily-row .day { color: rgba(12, 11, 9, 0.5); }
.section.light .daily-row .dish,
.section.light .daily-row .price { color: var(--ink); }
.section.light .dual-head { color: rgba(12, 11, 9, 0.5); border-bottom-color: rgba(12, 11, 9, 0.14); }
.section.light .dual-price { color: var(--ink); }
.section.light .dual-price span + span { color: rgba(12, 11, 9, 0.6); }