/* ============================================================
   Hyderabadi House — warm editorial design system
   ============================================================
   One stylesheet for the whole site. Flat colour only: no
   gradients, no glass, no glow. Depth comes from whitespace,
   hairlines and type scale instead.
   ============================================================ */

/* ---- Reset ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

/* ---- Tokens ----------------------------------------------- */
:root {
    /* Paper and ink. The paper is warm enough to read as stock,
       not as "off-white by accident". */
    --paper:        #FAF7F2;
    --paper-deep:   #F2ECE2;
    --paper-edge:   #E8E0D3;
    --ink:          #1C1A17;
    --ink-soft:     #5A544B;
    --ink-faint:    #8B8377;
    --accent:       #8C2F1F;
    --accent-deep:  #6E2317;
    --rule:         rgba(28, 26, 23, 0.14);
    --rule-soft:    rgba(28, 26, 23, 0.08);

    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing scale — a 4px base, but only these steps are used. */
    --s-1: 0.5rem;
    --s-2: 1rem;
    --s-3: 1.5rem;
    --s-4: 2.5rem;
    --s-5: 4rem;
    --s-6: 6rem;
    --s-7: 9rem;

    --measure: 62ch;
    --shell: 1240px;
    --gutter: 1.5rem;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --radius: 10px;
    --radius-sm: 6px;
}

@media (max-width: 900px) {
    :root { --s-6: 4rem; --s-7: 5.5rem; --gutter: 1.25rem; }
}

/* ---- Base ------------------------------------------------- */
body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 400;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent); color: var(--paper); }

/* ---- Type ------------------------------------------------- */
.display,
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-variation-settings: 'SOFT' 30, 'WONK' 1, 'opsz' 100;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 6.4vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.15; }

h4, h5 {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}

p { text-wrap: pretty; }

.lede {
    font-size: clamp(1.075rem, 1.5vw, 1.3rem);
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 46ch;
}

.prose { max-width: var(--measure); color: var(--ink-soft); }
.prose > * + * { margin-top: 1.1em; }
.prose strong { color: var(--ink); font-weight: 600; }

/* Small-caps section label with a leading rule — the main
   structural signal on every page. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.eyebrow::before {
    content: '';
    width: 2.25rem;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
    flex: none;
}

.eyebrow.is-centred { justify-content: center; }
.eyebrow.is-plain::before { display: none; }

/* ---- Layout ----------------------------------------------- */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.shell-narrow { max-width: 820px; }

.section { padding-block: var(--s-6); }
.section-tight { padding-block: var(--s-5); }

.section-head { margin-bottom: var(--s-4); }
.section-head h2 { margin-top: 0.7rem; }
.section-head .lede { margin-top: 1rem; }

.rule { height: 1px; background: var(--rule); border: 0; }

/* Editorial two-column: a narrow text column beside a wide image. */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.split-text { max-width: 34rem; }

@media (max-width: 860px) {
    .split { grid-template-columns: 1fr; gap: var(--s-3); }
    .split-media { order: -1; }
}

/* ---- Buttons ---------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95em 1.9em;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.btn:hover { background: var(--ink); color: var(--paper); }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
}

.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); }

.btn-light { border-color: rgba(250, 247, 242, 0.5); color: var(--paper); }
.btn-light:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Text link with a rule that draws in on hover. */
.link {
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 2px;
    transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}

.link:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Header ----------------------------------------------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: rgba(250, 247, 242, 0.94);
    border-bottom: 1px solid transparent;
    transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}

/* backdrop-filter only where it is supported; the solid rgba
   above is the fallback, so nothing is lost without it. */
@supports (backdrop-filter: blur(10px)) {
    .site-header { background: rgba(250, 247, 242, 0.82); backdrop-filter: blur(14px); }
}

.site-header.is-stuck { border-bottom-color: var(--rule); }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    height: 84px;
    transition: height 0.4s var(--ease);
}

.site-header.is-stuck .header-inner { height: 68px; }

/* The mobile drawer is fixed from top:0, so anything that must stay
   visible over it needs its own stacking position. */
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex: none; position: relative; z-index: 2; }
.header-actions { position: relative; z-index: 2; }
.brand img { height: 46px; width: auto; transition: height 0.4s var(--ease); }
.site-header.is-stuck .brand img { height: 38px; }

.brand-word {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    line-height: 1;
}

.brand-word small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.58rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.1rem); }

.nav a {
    position: relative;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding-block: 0.35rem;
    color: var(--ink);
    white-space: nowrap;
}

.nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s var(--ease);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.header-actions .btn { padding: 0.75em 1.4em; font-size: 0.7rem; }

/* One order button per breakpoint: the header one on desktop,
   the in-drawer one on mobile. */
.nav .btn-order { display: none; }

/* Hamburger, drawn in CSS so it needs no icon font. */
.nav-toggle {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    flex: none;
}

.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
    content: '';
    position: absolute;
    left: 11px;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transition: transform 0.4s var(--ease), opacity 0.25s linear;
}

.nav-toggle::before { top: 15px; }
.nav-toggle span    { top: 21.25px; }
.nav-toggle::after  { top: 27.5px; }

.nav-toggle[aria-expanded="true"]::before { transform: translateY(6.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span    { opacity: 0; }
.nav-toggle[aria-expanded="true"]::after  { transform: translateY(-6.25px) rotate(-45deg); }

@media (max-width: 940px) {
    .nav-toggle { display: block; }
    .header-actions .btn-order { display: none; }

    .nav {
        position: fixed;
        inset: 0 0 auto 0;
        padding: calc(84px + var(--s-3)) var(--gutter) var(--s-4);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--rule);
        transform: translateY(-101%);
        transition: transform 0.55s var(--ease);
        max-height: 100dvh;
        overflow-y: auto;
    }

    .nav.is-open { transform: translateY(0); }

    .nav a {
        width: 100%;
        font-family: var(--font-display);
        font-size: 1.75rem;
        letter-spacing: -0.01em;
        padding-block: 0.6rem;
        border-bottom: 1px solid var(--rule-soft);
    }

    .nav a::after { display: none; }
    .nav .btn-order {
        display: inline-flex;
        margin-top: var(--s-3);
        border-bottom: 0;
        font-family: var(--font-body);
        font-size: 0.78rem;
    }
}

.footer-brand img { filter: brightness(0) invert(1); opacity: 0.9; }

/* Page content clears the fixed header. */
.page { padding-top: 84px; }

/* ---- Hero -------------------------------------------------
   A split rather than a full-bleed: the best biryani photography
   we have is portrait, and stretching a 1536px-wide portrait
   across a 2560px screen is what made the old hero look soft.
   Here the image only has to cover half the viewport.

   The whole block sits inside the shell, so the photograph's right
   edge lines up with the header and everything below it rather than
   running off the side of the page. */
.hero {
    display: grid;
    /* Copy gets slightly less than half so the photograph carries the
       right-hand side without the text column running long. */
    grid-template-columns: 0.92fr 1.08fr;
    gap: clamp(1.5rem, 3.5vw, 3.25rem);
    align-items: stretch;
    min-height: min(72vh, 640px);
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
    background: var(--paper);
}

.hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--s-4);
}

.hero h1 {
    max-width: 13ch;
    margin-top: 0.75rem;
    font-size: clamp(2.3rem, 3.8vw, 3.7rem);
    letter-spacing: -0.028em;
}

/* One italic word carries the whole headline. Fraunces has a real
   italic, so this is a cut rather than a slant. */
.hero h1 em {
    font-style: italic;
    font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144;
}

.hero-lede {
    margin-top: 0.9rem;
    max-width: 40ch;
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    color: var(--ink-soft);
}

.hero .btn-row { margin-top: 1.6rem; }

.hero-figure {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--paper-deep);
}

/* Absolute, so the image's intrinsic 3:4 ratio cannot drive the grid
   row height -- left in flow it stretched the hero to 1037px on a
   900px viewport regardless of min-height. */
.hero-figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    /* Settles from a slight over-scale once the page is ready. */
    transform: scale(1.06);
    transition: transform 1.8s var(--ease);
}

.hero.is-ready .hero-figure img { transform: scale(1); }

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: var(--s-3);
    }

    /* Photograph first: on a phone the food is the hook, and the
       headline still lands within the first screen under it.

       An explicit height, not aspect-ratio: the only child is
       absolutely positioned, so the figure has no content height, and
       a stretched grid item with a definite row height never resolves
       aspect-ratio at all. Safari collapsed it to zero and the image
       vanished; a height works in every engine. */
    .hero-figure {
        order: -1;
        height: clamp(280px, 54vw, 440px);
    }

    .hero-copy { padding-block: 0 var(--s-4); }

    .hero h1 { max-width: none; }
    .hero-lede { max-width: none; }
    .hero .btn-row .btn { flex: 1 1 auto; }
}

@media (max-width: 620px) {
    .hero-figure { height: clamp(260px, 66vw, 360px); }
}

/* ---- Branch bar --------------------------------------------
   Straddles the hero's bottom edge, half on the photograph and
   half on the paper. Carries live per-branch status, so it earns
   the position rather than just decorating it. */
.branch-bar {
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    z-index: 5;
    margin-top: var(--s-4);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* The 1px gap over a rule-coloured background draws the dividers,
       so they stay correct however the cells wrap -- no per-child
       border rules to keep in step with the column count. */
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}

.bbar-item {
    display: block;
    padding: clamp(1.1rem, 1.6vw, 1.5rem);
    text-decoration: none;
    background: var(--paper);
    transition: background 0.4s var(--ease);
}

a.bbar-item:hover { background: var(--paper-deep); }

/* The branch that is not open yet: present in the row, but plainly
   not somewhere you can order from. */
.bbar-item.is-soon { background: var(--paper-deep); }
.bbar-item.is-soon .bbar-name { color: var(--ink-faint); }
.bbar-item.is-soon .status { color: var(--ink-faint); }

.bbar-name {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    line-height: 1.1;
}

.bbar-name span {
    font-family: var(--font-body);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    flex: none;
}

.bbar-meta { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.3rem; }
.bbar-today { font-size: 0.84rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Four across needs real width; below that it halves, then stacks. */
@media (max-width: 1080px) {
    .branch-bar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
    .branch-bar { grid-template-columns: 1fr; margin-top: var(--s-3); }
}

/* ---- Figures ---------------------------------------------- */
.figure { position: relative; overflow: hidden; background: var(--paper-deep); border-radius: var(--radius); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure-tall { aspect-ratio: 4 / 5; }
.figure-wide { aspect-ratio: 16 / 10; }
.figure-square { aspect-ratio: 1; }

.figure-caption {
    margin-top: 0.8rem;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
}

/* ---- Stat / fact row -------------------------------------- */
.facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
    border-top: 1px solid var(--rule);
    padding-top: var(--s-3);
}

.fact-n {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
}

.fact-l {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

@media (max-width: 700px) {
    .facts { grid-template-columns: 1fr; gap: var(--s-2); }
    .facts > * + * { border-top: 1px solid var(--rule-soft); padding-top: var(--s-2); }
}

/* ---- Dish cards ------------------------------------------- */
.dish-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

@media (max-width: 900px) { .dish-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dish-grid { grid-template-columns: 1fr; } }

/* The card is an <a> wrapping spans, so each part has to be
   made a block or the whole card runs together on one line. */
.dish { display: block; text-decoration: none; }
.dish > * { display: block; }
.dish .figure { display: block; aspect-ratio: 4 / 3; }
.dish .figure img { transition: transform 1.1s var(--ease); }
.dish:hover .figure img { transform: scale(1.04); }

/* The index sits on the image corner, on a paper chip, so it reads
   as a plate number in a printed menu. */
.dish { position: relative; }

.dish-n {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 0.4rem 0.7rem;
    background: var(--paper);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--ink-faint);
}

.dish-cat {
    margin-top: 0.9rem;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.dish-name { margin-top: 0.35rem; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.15; }
.dish-desc { margin-top: 0.35rem; font-size: 0.88rem; color: var(--ink-soft); }
.dish-price { margin-top: 0.5rem; font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Branch cards ----------------------------------------- */
.branch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 940px) { .branch-grid { grid-template-columns: 1fr; } }

.branch-card {
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rule);
    background: var(--paper);
    padding: var(--s-3);
    transition: border-color 0.4s var(--ease);
}

.branch-card:hover { border-color: var(--ink); }
/* Bleeds to the card's top edge, so only the top corners follow the
   card's radius; the bottom meets the card body square. */
.branch-card .figure {
    aspect-ratio: 3 / 2;
    margin: calc(var(--s-3) * -1) calc(var(--s-3) * -1) var(--s-3);
    border-radius: var(--radius) var(--radius) 0 0;
}
.branch-card h3 { margin-bottom: 0.15rem; }

.branch-city {
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.8rem;
}

.branch-meta { font-size: 0.9rem; color: var(--ink-soft); }
.branch-meta > * + * { margin-top: 0.35rem; }
.branch-meta a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.branch-meta a:hover { border-color: var(--accent); color: var(--accent); }
.branch-card .btn-row { margin-top: auto; padding-top: var(--s-3); }

/* Live open/closed pill. Colour is carried by the dot, so the
   label stays readable if colour is lost. */
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink-faint);
    flex: none;
}

.status.is-open::before { background: #2E7D4F; }
.status.is-open { color: #2E7D4F; }
.status.is-closed::before { background: var(--accent); }

/* ---- Hours table ------------------------------------------ */
.hours { width: 100%; font-size: 0.92rem; }
.hours div {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 0.5rem;
    border-bottom: 1px solid var(--rule-soft);
}
.hours div:last-child { border-bottom: 0; }
.hours dt, .hours .d { color: var(--ink); font-weight: 500; }
.hours .t { color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
.hours .is-today .d, .hours .is-today .t { color: var(--accent); font-weight: 600; }
.hours .is-shut .t { color: var(--ink-faint); }

/* ---- Menu -------------------------------------------------- */
.menu-tabs {
    position: sticky;
    top: 68px;
    z-index: 40;
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    overflow-x: auto;
    scrollbar-width: none;
}

.menu-tabs::-webkit-scrollbar { display: none; }

.menu-tab {
    position: relative;
    flex: none;
    padding: 1rem 1.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
    transition: color 0.35s var(--ease);
}

.menu-tab::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform 0.45s var(--ease);
}

.menu-tab[aria-selected="true"] { color: var(--ink); }
.menu-tab[aria-selected="true"]::after { transform: scaleX(1); }
.menu-tab:hover { color: var(--ink); }

.menu-jump {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-block: 1rem;
    scrollbar-width: none;
}

.menu-jump::-webkit-scrollbar { display: none; }

.menu-jump a {
    flex: none;
    padding: 0.5em 1.1em;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    color: var(--ink-soft);
    white-space: nowrap;
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}

.menu-jump a:hover { border-color: var(--ink); color: var(--ink); }
.menu-jump a.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.menu-cat { padding-top: var(--s-5); scroll-margin-top: 190px; }
.menu-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; border-bottom: 1px solid var(--ink); padding-bottom: 0.7rem; }
.menu-cat-head h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.menu-cat-note { margin-top: 0.7rem; color: var(--ink-soft); font-size: 0.92rem; }

.menu-count { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); flex: none; }

.menu-list { list-style: none; padding: 0; margin: 0; }

.menu-item {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 1.5rem;
    align-items: start;
    padding-block: 1.3rem;
    border-bottom: 1px solid var(--rule-soft);
}

.menu-item:last-child { border-bottom: 0; }
.menu-item > .mi-body { grid-column: 1 / 3; }
.menu-item > .mi-thumb + .mi-body { grid-column: 2; }

.mi-thumb { grid-column: 1; width: 88px; height: 88px; object-fit: cover; background: var(--paper-deep); border-radius: var(--radius-sm); }
.mi-name { font-family: var(--font-display); font-size: 1.22rem; line-height: 1.2; }
.mi-desc { margin-top: 0.3rem; font-size: 0.9rem; color: var(--ink-soft); max-width: 54ch; }

.mi-price {
    grid-column: 3;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mi-size { display: block; font-size: 0.86rem; }
.mi-size span { color: var(--ink-faint); font-weight: 400; margin-right: 0.5em; }

@media (max-width: 620px) {
    .menu-tabs { top: 62px; }
    .menu-cat { scroll-margin-top: 165px; }
    .menu-item { grid-template-columns: 68px 1fr; gap: 0.35rem 1rem; padding-block: 1.05rem; }
    .mi-thumb { width: 68px; height: 68px; }
    .menu-item > .mi-price {
        grid-column: 2 / -1;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0 1rem;
    }
}

/* ---- Branch picker modal ----------------------------------- */
.picker {
    width: min(560px, calc(100vw - 2rem));
    /* The reset's `* { margin: 0 }` beats the UA's `margin: auto`
       on <dialog>, which is what centres a modal. Put it back. */
    margin: auto;
    padding: 0;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink);
}

.picker::backdrop { background: rgba(20, 17, 14, 0.55); }

@supports (backdrop-filter: blur(4px)) {
    .picker::backdrop { backdrop-filter: blur(3px); }
}

.picker-inner { padding: clamp(1.5rem, 4vw, 2.5rem); }
.picker h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); margin-top: 0.6rem; }
.picker-lede { margin-top: 0.6rem; color: var(--ink-soft); font-size: 0.95rem; }

.picker-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 40px;
    height: 40px;
    color: var(--ink-faint);
    transition: color 0.3s var(--ease);
}

.picker-close:hover { color: var(--ink); }
.picker-close::before, .picker-close::after {
    content: '';
    position: absolute;
    left: 12px;
    top: 19px;
    width: 16px;
    height: 1.5px;
    background: currentColor;
}
.picker-close::before { transform: rotate(45deg); }
.picker-close::after  { transform: rotate(-45deg); }

.picker-list { margin-top: var(--s-3); display: grid; gap: 0.6rem; }

.picker-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.15rem;
    text-align: left;
    text-decoration: none;
    border: 1px solid var(--rule);
    color: var(--ink);
    transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}

.picker-opt:hover { border-color: var(--ink); background: var(--paper-deep); }
/* Both must be block or the name and the status run together on one
   line whenever the status text happens to be short. */
.picker-opt-name { display: block; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.15; }
.picker-opt-sub { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-top: 0.15rem; }

.picker-opt-go {
    flex: none;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.picker-opt:hover .picker-opt-go { color: var(--accent); }

/* ---- Footer ------------------------------------------------ */
.site-footer {
    background: var(--ink);
    color: rgba(250, 247, 242, 0.72);
    padding-block: var(--s-5) var(--s-3);
    margin-top: var(--s-6);
}

.site-footer h4 {
    color: var(--paper);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--s-4) var(--s-3);
}

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand img { height: 54px; width: auto; margin-bottom: 1rem; }
.footer-brand p { max-width: 32ch; font-size: 0.9rem; }

.site-footer ul { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; }
.site-footer li + li { margin-top: 0.5rem; }
.site-footer a { text-decoration: none; transition: color 0.3s var(--ease); }
.site-footer a:hover { color: var(--paper); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: var(--s-4);
    padding-top: var(--s-2);
    border-top: 1px solid rgba(250, 247, 242, 0.14);
    font-size: 0.78rem;
}

.footer-credit { display: flex; align-items: center; gap: 0.6rem; }
.footer-credit img { height: 22px; width: auto; opacity: 0.75; }

/* ---- Motion ------------------------------------------------ */
/* Elements start shifted and fade up as they enter. The class is
   added by JS only when IntersectionObserver exists, so with no
   JS everything simply renders in place. */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ---- Utilities --------------------------------------------- */
.u-centre { text-align: center; }
.u-centre .lede, .u-centre .prose { margin-inline: auto; }
.u-centre .eyebrow { justify-content: center; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

:where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.is-loading { color: var(--ink-faint); font-size: 0.9rem; }

/* ---- Anchored branch sections ------------------------------
   The header is fixed, so a #hash jump must stop short of it. */
.branch-section { scroll-margin-top: 110px; }

/* Numbered "how we cook" cards reuse .dish-grid for its column
   behaviour but carry no image, so the eyebrow needs the rule
   removed to sit tight against the heading. */
.dish-grid .eyebrow.is-plain {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0;
    color: var(--accent);
}

/* ---- Embedded map ------------------------------------------
   The Google iframe ships fixed 600x450; this makes it fluid and
   matches the radius the photography uses. */
.branch-map {
    margin-top: var(--s-4);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper-deep);
    /* Own stacking context, so the rounded corners actually clip
       the iframe in Safari. */
    isolation: isolate;
}

.branch-map iframe {
    display: block;
    width: 100%;
    height: clamp(260px, 34vh, 380px);
    border: 0;
}

/* ---- Coming-soon branch ------------------------------------
   Deliberately quieter than a live branch: no status dot, no
   hours, nothing that implies you can order from it yet. */
.coming {
    border: 1px dashed var(--rule);
    border-radius: var(--radius);
    padding: clamp(1.75rem, 4vw, 3rem);
    text-align: center;
    background: var(--paper-deep);
}

.coming h2 { margin-top: 0.7rem; }
.coming .lede { margin-inline: auto; margin-top: 0.9rem; }

.coming-tag {
    display: inline-block;
    margin-top: 1.4rem;
    padding: 0.5em 1.1em;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    background: var(--paper);
}

/* Same idea inside the order dialog: present, but plainly not
   something you can click through to yet. */
.picker-opt.is-soon {
    border-style: dashed;
    background: var(--paper-deep);
    cursor: default;
}

.picker-opt.is-soon:hover { border-color: var(--rule); background: var(--paper-deep); }
.picker-opt.is-soon .picker-opt-name { color: var(--ink-faint); }
.picker-opt.is-soon .picker-opt-go { color: var(--ink-faint); }