/* The parts a brochure has no reason to have.

   Nothing here restyles the template. theme.css is the design system and stays
   the single place a colour or a radius is decided; this sheet only draws the
   handful of things that exist because there is a real restaurant behind the
   page: the notice shown when the runtime is held back, a validation message
   from the server, and the small states the order and the table plan can be in.

   Every colour below is a token from theme.css. If one is ever written as a
   literal here, that is the bug. */

/* ---- The runtime is held back ------------------------------------------ */
.runtime-notice {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .85rem 1.1rem;
    background: var(--gold-wash, #F5EBD9);
    border-bottom: 1px solid var(--line, #E4D8C2);
    color: var(--ink, #241E18);
    font-size: .9rem;
}
.runtime-notice--safe_mode { background: #F7E9E3; border-bottom-color: #E4C4B6; }
.runtime-notice__icon { flex: none; line-height: 1.3; }
.runtime-notice__headline { margin: 0; font-weight: 600; }
.runtime-notice__message { margin: .15rem 0 0; color: var(--muted, #6E6357); }

/* ---- What the server says about a form --------------------------------- */
.form-note {
    margin-top: .75rem;
    padding: .7rem .9rem;
    border-radius: var(--r-sm, 6px);
    font-size: .9rem;
    border: 1px solid var(--line, #E4D8C2);
    background: var(--cream-50, #FDFBF7);
    color: var(--muted, #6E6357);
}
.form-note--ok { border-color: #BFD8C4; background: #F1F8F2; color: #2F5D3A; }
.form-note--bad { border-color: #E4BFB4; background: #FBF1ED; color: #8A3E28; }
.form-note ul { margin: .35rem 0 0; padding-inline-start: 1.1rem; }

/* ---- The order, while it is still arriving ------------------------------ */
.cart-line__opt { display: block; }
.js-cart-lines .cart-empty { text-align: center; padding: 2.5rem 1rem; }
.js-cart-lines .cart-empty svg { width: 34px; height: 34px; color: var(--gold, #A97B3E); }

/* ---- The table plan ----------------------------------------------------- */
/* A table that is full is shown rather than hidden, so the room still reads
   like the room. It simply cannot be chosen. */
.table-chip[disabled] { opacity: .45; cursor: not-allowed; }
.table-chip[disabled] span { text-transform: lowercase; }

/* ---- A branch that is closed right now ---------------------------------- */
.closed-note {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    align-items: center;
    padding: .8rem 1rem;
    border: 1px solid var(--line, #E4D8C2);
    border-radius: var(--r-sm, 6px);
    background: var(--cream-50, #FDFBF7);
    color: var(--muted, #6E6357);
    font-size: .92rem;
}

/* ---- Printing the carte ------------------------------------------------- */
@media print {
    .site-header, .site-footer, .cookie-bar, .drawer, .modal, .to-top,
    .basket-bar, .runtime-notice, .mobile-nav, .overlay { display: none !important; }
}

/* ---- The loading screen -------------------------------------------------
   The template has none. This is built from its own tokens so it reads as the
   same site, and it takes itself away on load. The owner edits it under
   Website, Loading Screen, which is why it carries data-loader. */
.sx-loader {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    place-items: center;
    background: var(--cream-50, #FDFBF7);
    transition: opacity .4s ease, visibility .4s ease;
}
.sx-loader.is-done { opacity: 0; visibility: hidden; }
.sx-loader__stage { display: grid; justify-items: center; gap: 1.1rem; }
.sx-loader__rule {
    display: block;
    width: 140px;
    height: 1px;
    background: var(--line, #E4D8C2);
    position: relative;
    overflow: hidden;
}
.sx-loader__rule::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: -40%;
    width: 40%;
    background: var(--gold, #A97B3E);
    animation: sx-loader-sweep 1.15s ease-in-out infinite;
}
@keyframes sx-loader-sweep {
    0%   { inset-inline-start: -40%; }
    100% { inset-inline-start: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .sx-loader__rule::after { animation: none; inset-inline-start: 0; width: 100%; }
}

/* ---- The journal ---------------------------------------------------------
   A page the template does not have, so its layout is here rather than in the
   design system. Everything inside it is the template's own card. */
.journal-layout {
    display: grid;
    gap: clamp(20px, 3vw, 36px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    align-items: start;
}
@media (max-width: 1024px) {
    .journal-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   The pages the template does not have
   ==========================================================================

   The brochure this site is built on covers a restaurant's front: a home page,
   a carte, a gallery, a contact form. A working restaurant needs more than
   that, and those extra pages were written in the idiom of the three sites
   built before this one, which sit on a different template with a twelve column
   grid, an animation library and a section heading of its own.

   None of those exist here, so the markup asked for words this stylesheet had
   never heard: the journal post ran down the page with no column, the legal
   pages sat flush against the edge of the window with nothing holding them in,
   and an arrow that should have been seventeen pixels across filled the screen,
   because an inline icon with no width takes the whole of whatever contains it.

   Everything below is written in theme.css's own tokens. The design system
   still decides every colour, radius and easing; this only gives the borrowed
   markup the house's furniture to sit on.
   ========================================================================== */

/* ---- An icon is an icon ------------------------------------------------
   The single fault behind the worst of it. An <svg> with a viewBox and no
   width is not small by default: it fills its container. Every icon the
   template draws itself is sized by a rule next to it, so the ones written
   into these pages had nothing. This is the floor, not a replacement for a
   deliberate size, and anything that wants its own still sets one. */
.mm-branch svg, .mm-here svg, .site-btn svg, .site-ctl svg,
.post-social-sharing svg, .post-nav svg, .bwn svg, .dsh-stars svg,
.about-cta svg, .toc svg, .pin svg {
    width: 17px;
    height: 17px;
    flex: none;
}

/* ---- The words the borrowed markup brought with it ---------------------- */

/* The other template's page wrapper. Here it is the house container. */
.auto-container {
    width: 100%;
    max-width: var(--container, 1240px);
    margin-inline: auto;
    padding-inline: var(--gutter, clamp(16px, 4vw, 40px));
}

/* Twelve columns, because the markup counts in twelve. Below the large
   breakpoint every column is the full width, which is what the borrowed
   markup expected of it. */
.row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 34px);
    align-items: start;
}
.row > [class*="col-"] { grid-column: span 12; }
.row.align-items-center { align-items: center; }
.section-row { margin-bottom: clamp(22px, 3vw, 40px); }

@media (min-width: 768px) {
    .col-md-6 { grid-column: span 6; }
}
@media (min-width: 992px) {
    .col-lg-4  { grid-column: span 4; }
    .col-lg-5  { grid-column: span 5; }
    .col-lg-6  { grid-column: span 6; }
    .col-lg-7  { grid-column: span 7; }
    .col-lg-8  { grid-column: span 8; }
    .col-lg-10 { grid-column: span 10; }
    .col-lg-12 { grid-column: span 12; }
    .offset-lg-1 { grid-column-start: 2; }
}

/* The other template's section heading, drawn as this one draws its own:
   a gold eyebrow with a rule, then the title, then the standfirst. */
.section-title { max-width: 680px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.section-title h3 {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-body, var(--sans));
    font-size: 11.5px; font-weight: 500;
    letter-spacing: .26em; text-transform: uppercase;
    color: var(--gold-deep, #8a6229);
    margin: 0 0 14px;
}
.section-title h3::before {
    content: ""; width: 22px; height: 1px; flex: none;
    background: var(--gold-soft, #e0c79a);
}
.section-title h2 { margin: 0; }
.section-title p { margin-top: 12px; color: var(--muted, #796e62); }
.section-title--center { margin-inline: auto; text-align: center; }
.section-title--center h3 { justify-content: center; }

/* The animation library the other template loads. Nothing here depends on
   motion to be legible, so these are simply visible, and the classes are kept
   so the markup does not have to be picked over to remove them. */
.wow, .fadeInUp, .text-anime-style-2, .image-anime { opacity: 1; transform: none; }

/* ---- Choosing a branch --------------------------------------------------
   Ordering, booking a table and hiring a room all begin by asking which
   branch, so they ask it once and with one face. Cards on paper with a gold
   hairline that lights along the top, the branch numbered in the corner the
   way this menu numbers its courses. */
.mm-pick { padding-block: clamp(44px, 5.5vw, 84px) clamp(24px, 3vw, 40px); }

.mm-pick__grid {
    display: grid;
    gap: clamp(16px, 1.8vw, 24px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}

.mm-branch {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 1.8vw, 22px);
    height: 100%;
    padding: clamp(20px, 2.3vw, 30px);
    background: var(--paper, #fff);
    border: 1px solid var(--line, #e4d8c2);
    border-radius: var(--r, 10px);
    text-decoration: none;
    overflow: hidden;
    transition: border-color var(--dur, .32s) var(--ease),
                transform var(--dur, .32s) var(--ease),
                box-shadow var(--dur, .32s) var(--ease);
}
.mm-branch::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 2px;
    background: var(--brass, linear-gradient(120deg, #8a6229, #e0c79a, #a97b3e));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--ease-out);
}
.mm-branch:hover, .mm-branch:focus-visible {
    border-color: var(--gold-soft, #e0c79a);
    transform: translateY(-4px);
    box-shadow: var(--sh-md, 0 10px 28px -12px rgba(64,45,20,.2));
}
.mm-branch:hover::before, .mm-branch:focus-visible::before { transform: scaleX(1); }

.mm-branch__no {
    flex: none;
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: .04em;
    color: var(--gold, #a97b3e);
    opacity: .6;
}

.mm-branch__body { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }

.mm-branch__name {
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
    line-height: 1.25;
    color: var(--ink, #241e18);
}
.mm-branch__addr {
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.55;
    color: var(--faint, #8a7f71);
}

.mm-branch__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.mm-branch__fact {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1;
    padding: 6px 12px;
    color: var(--body, #6e6357);
    border: 1px solid var(--line, #e4d8c2);
    border-radius: var(--r-pill, 999px);
}

.mm-state {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    line-height: 1; padding: 6px 12px; border-radius: var(--r-pill, 999px);
}
.mm-state i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.mm-state.is-open { color: #3f6b4c; background: rgba(76,122,90,.13); }
.mm-state.is-open i { background: var(--success, #4c7a5a); }
.mm-state.is-shut { color: var(--faint, #8a7f71); background: var(--cream-200, #f3ebde); }
.mm-state.is-shut i { background: var(--faint, #8a7f71); }

.mm-branch__go {
    flex: none;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gold-deep, #8a6229);
}
.mm-branch__go svg { transition: transform var(--dur, .32s) var(--ease); }
.mm-branch:hover .mm-branch__go svg { transform: translateX(5px); }

@media (max-width: 767px) {
    .mm-branch { flex-wrap: wrap; padding: 20px; gap: 14px; }
    .mm-branch__go {
        width: 100%; justify-content: space-between;
        padding-top: 14px; border-top: 1px solid var(--line-soft, #efe7d9);
    }
}

/* Where you are booking, once the branch is chosen. */
.mm-here {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(12px, 1.6vw, 18px);
    margin-top: clamp(20px, 2.6vw, 30px);
    padding: clamp(14px, 1.7vw, 20px) clamp(16px, 2vw, 24px);
    background: var(--paper, #fff);
    border: 1px solid var(--line, #e4d8c2);
    border-inline-start: 2px solid var(--gold, #a97b3e);
    border-radius: var(--r, 10px);
}
.mm-here__ic {
    flex: none; display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--gold-wash, #f5ebd9);
    color: var(--gold-deep, #8a6229);
}
.mm-here__b { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mm-here__k {
    font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
    line-height: 1.4; color: var(--faint, #8a7f71);
}
.mm-here__n { font-family: var(--serif, Georgia, serif); font-size: 1.12rem; font-weight: 500; line-height: 1.35; color: var(--ink, #241e18); }
.mm-here__a { font-size: .8rem; line-height: 1.45; color: var(--muted, #796e62); }
.mm-here__change {
    font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    text-decoration: none; padding-bottom: 2px;
    color: var(--gold-deep, #8a6229);
    border-bottom: 1px solid var(--gold-soft, #e0c79a);
    transition: color .3s var(--ease), border-color .3s var(--ease);
}
.mm-here__change:hover { color: var(--gold, #a97b3e); border-color: var(--gold, #a97b3e); }

@media (max-width: 575px) {
    .mm-here__change {
        width: 100%; text-align: center; padding: 11px;
        border: 1px solid var(--gold-soft, #e0c79a); border-radius: var(--r-sm, 6px);
    }
}

/* ---- A journal entry ----------------------------------------------------
   The index is the template's own card grid. The entry itself is not a page
   the template has, so it is drawn here: the piece in a readable column with
   the sidebar beside it, and everything that surrounds the reading set quietly
   enough to stay out of the way of it. */
.page-single-post { padding-block: clamp(40px, 5vw, 80px); }

.post-image {
    border-radius: var(--r-lg, 16px);
    overflow: hidden;
    background: var(--cream-200, #f3ebde);
    margin-bottom: clamp(22px, 2.6vw, 34px);
}
.post-image img, .post-featured-image img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.post-image img { aspect-ratio: 16 / 9; }

.post-head { margin-bottom: clamp(18px, 2vw, 26px); }
.post-cat {
    display: inline-block;
    font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    padding: 6px 12px; margin-bottom: 14px;
    color: var(--gold-deep, #8a6229);
    background: var(--gold-wash, #f5ebd9);
    border-radius: var(--r-pill, 999px);
}
.post-head h1 { margin: 0 0 12px; }
.post-byline {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
    font-size: .84rem; color: var(--faint, #8a7f71);
}
.post-date { font-size: .84rem; color: var(--faint, #8a7f71); }

.post-entry { color: var(--body, #6e6357); line-height: 1.8; }
.post-lead {
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(1.12rem, 1.5vw, 1.36rem);
    line-height: 1.62;
    color: var(--ink-2, #3a3129);
    margin-bottom: 1.3em;
}
.post-entry > * + * { margin-top: 1.1em; }
.post-entry h2, .post-entry h3 { margin-top: 1.7em; }
.post-entry img { border-radius: var(--r, 10px); }
.post-entry blockquote {
    margin: 1.6em 0;
    padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 28px);
    border-inline-start: 2px solid var(--gold, #a97b3e);
    background: var(--cream-100, #f9f4ec);
    border-radius: 0 var(--r, 10px) var(--r, 10px) 0;
    font-family: var(--serif, Georgia, serif);
    font-size: 1.16rem;
    color: var(--ink-2, #3a3129);
}

/* Tags and sharing, on one rule under the piece. */
.post-tag-links {
    margin-top: clamp(26px, 3vw, 40px);
    padding-top: clamp(18px, 2.2vw, 26px);
    border-top: 1px solid var(--line-soft, #efe7d9);
}
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tag-links {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--faint, #8a7f71);
}
.tag-links a, .blog-tags a {
    display: inline-block;
    padding: 6px 12px;
    font-size: .72rem; letter-spacing: .08em; text-transform: none; text-decoration: none;
    color: var(--body, #6e6357);
    border: 1px solid var(--line, #e4d8c2);
    border-radius: var(--r-pill, 999px);
    transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.tag-links a:hover, .blog-tags a:hover {
    color: var(--gold-deep, #8a6229);
    border-color: var(--gold-soft, #e0c79a);
    background: var(--gold-wash, #f5ebd9);
}

.post-social-sharing ul {
    display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
    margin: 0; padding: 0; list-style: none;
}
.post-social-sharing a {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    color: var(--ink-2, #3a3129);
    background: var(--paper, #fff);
    border: 1px solid var(--line, #e4d8c2);
    border-radius: 50%;
    transition: color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.post-social-sharing a:hover {
    color: var(--gold-deep, #8a6229);
    border-color: var(--gold-soft, #e0c79a);
    transform: translateY(-2px);
}
@media (min-width: 992px) {
    .post-social-sharing ul { justify-content: flex-end; }
}

/* Who wrote it. */
.post-author {
    display: flex; align-items: center; gap: clamp(14px, 1.8vw, 20px);
    margin-top: clamp(24px, 3vw, 36px);
    padding: clamp(18px, 2.2vw, 26px);
    background: var(--cream-100, #f9f4ec);
    border: 1px solid var(--line-soft, #efe7d9);
    border-radius: var(--r, 10px);
}
.post-author__avatar {
    flex: none; width: 66px; height: 66px; border-radius: 50%; overflow: hidden;
    background: var(--cream-200, #f3ebde);
}
.post-author__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* The one before and the one after. */
.post-nav {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    margin-top: clamp(24px, 3vw, 36px);
}
.post-nav__item {
    display: flex; flex-direction: column; gap: 6px;
    padding: clamp(16px, 1.9vw, 22px);
    text-decoration: none;
    background: var(--paper, #fff);
    border: 1px solid var(--line, #e4d8c2);
    border-radius: var(--r, 10px);
    transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.post-nav__item:hover {
    border-color: var(--gold-soft, #e0c79a);
    transform: translateY(-3px);
    box-shadow: var(--sh-md, 0 10px 28px -12px rgba(64,45,20,.2));
}
.post-nav__item span {
    font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--faint, #8a7f71);
}
.post-nav__item strong {
    font-family: var(--serif, Georgia, serif);
    font-size: 1.04rem; font-weight: 500; line-height: 1.4;
    color: var(--ink, #241e18);
}
.post-nav__next { text-align: right; }

/* Beside the piece. */
.blog-sidebar { display: grid; gap: clamp(16px, 2vw, 24px); position: sticky; top: calc(var(--header-h, 82px) + 20px); }
.blog-sidebar__box {
    padding: clamp(18px, 2.1vw, 24px);
    background: var(--paper, #fff);
    border: 1px solid var(--line, #e4d8c2);
    border-radius: var(--r, 10px);
}
.blog-sidebar__box h3, .blog-sidebar__box h4 {
    font-family: var(--serif, Georgia, serif);
    font-size: 1.12rem; margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft, #efe7d9);
}
.blog-cats, .blog-latest { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.blog-cats a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 0; text-decoration: none;
    font-size: .92rem; color: var(--body, #6e6357);
    border-bottom: 1px solid var(--line-soft, #efe7d9);
    transition: color .25s var(--ease), padding-inline-start .25s var(--ease);
}
.blog-cats li:last-child a { border-bottom: 0; }
.blog-cats a:hover { color: var(--gold-deep, #8a6229); padding-inline-start: 6px; }

.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.blog-latest li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft, #efe7d9); }
.blog-latest a {
    display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px;
    align-items: center; text-decoration: none;
}
.blog-latest img {
    width: 62px; height: 62px; object-fit: cover;
    border-radius: var(--r-sm, 6px); background: var(--cream-200, #f3ebde);
}
.blog-latest strong {
    display: block;
    font-family: var(--serif, Georgia, serif);
    font-size: .96rem; font-weight: 500; line-height: 1.35;
    color: var(--ink, #241e18);
}
.blog-latest span { font-size: .76rem; color: var(--faint, #8a7f71); }
.blog-latest a:hover strong { color: var(--gold-deep, #8a6229); }

/* More from the journal, under the piece. */
.our-blog { padding-block: clamp(40px, 5vw, 76px); background: var(--cream-100, #f9f4ec); }
.post-item {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    background: var(--paper, #fff);
    border: 1px solid var(--line, #e4d8c2);
    border-radius: var(--r, 10px);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.post-item:hover {
    transform: translateY(-4px);
    border-color: var(--gold-soft, #e0c79a);
    box-shadow: var(--sh-md, 0 10px 28px -12px rgba(64,45,20,.2));
}
.post-featured-image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-200, #f3ebde); }
.post-featured-image img { transition: transform .7s var(--ease); }
.post-item:hover .post-featured-image img { transform: scale(1.055); }
.blog-item-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: clamp(16px, 1.9vw, 22px); }
.post-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.post-item-meta .post-cat { margin-bottom: 0; }
.post-item-content h3 { font-size: 1.14rem; line-height: 1.35; margin: 0; }
.post-item-content p { margin-top: 8px; font-size: .92rem; color: var(--muted, #796e62); }
.blog-item-btn { margin-top: auto; padding-top: 6px; }
.readmore-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    text-decoration: none; color: var(--gold-deep, #8a6229);
}
.readmore-btn::after {
    content: ""; width: 18px; height: 1px;
    background: currentColor; transition: width .3s var(--ease);
}
.post-item:hover .readmore-btn::after { width: 28px; }

/* ---- The legal pages ----------------------------------------------------
   Terms and the privacy notice are long and are read in one go, so they get a
   measure that can be read and a contents list that stays beside the reading
   rather than scrolling away from it. Without these two the whole document sat
   flush against the edge of the window and the contents ran together into one
   unbroken line of links. */
.sec { padding-block: clamp(40px, 5vw, 80px); }

.pin {
    display: grid;
    gap: clamp(22px, 3vw, 44px);
    align-items: start;
}
@media (min-width: 992px) {
    .pin { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
    .pin__side { position: sticky; top: calc(var(--header-h, 82px) + 20px); }
}

.pin__side h4 {
    font-family: var(--serif, Georgia, serif);
    font-size: 1.02rem;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line, #e4d8c2);
}

/* One link a line, quiet until it is the one being read. */
.toc { display: flex; flex-direction: column; }
.toc a {
    display: block;
    padding: 8px 0 8px 14px;
    font-size: .88rem;
    line-height: 1.45;
    text-decoration: none;
    color: var(--body, #6e6357);
    border-inline-start: 2px solid var(--line-soft, #efe7d9);
    transition: color .25s var(--ease), border-color .25s var(--ease), padding-inline-start .25s var(--ease);
}
.toc a:hover {
    color: var(--gold-deep, #8a6229);
    border-inline-start-color: var(--gold-soft, #e0c79a);
    padding-inline-start: 18px;
}

/* The document itself: a measure a person can read without losing the line. */
.rv { max-width: 74ch; }
.rv h2 {
    font-size: clamp(1.32rem, 2vw, 1.72rem);
    margin: 2em 0 .55em;
    scroll-margin-top: calc(var(--header-h, 82px) + 24px);
}
.rv h2:first-child { margin-top: 0; }
.rv p, .rv li { color: var(--body, #6e6357); line-height: 1.8; }
.rv p + p { margin-top: 1em; }
.rv ul, .rv ol { margin: .85em 0 0; padding-inline-start: 1.25rem; }
.rv li + li { margin-top: .45em; }
.rv li::marker { color: var(--gold, #a97b3e); }
.rv a { color: var(--gold-deep, #8a6229); text-underline-offset: 3px; }

.dim { color: var(--faint, #8a7f71); }

/* The little spacing words the borrowed markup uses. */
.mt2 { margin-top: 1rem; }
.mt4 { margin-top: 2rem; }
.mb3 { margin-bottom: 1.5rem; }

/* A page the owner writes themselves reads like the legal ones. */
.page-legal-body { max-width: 74ch; }
.page-legal-body > * + * { margin-top: 1.1em; }
.page-legal-body h2, .page-legal-body h3 { margin-top: 1.9em; }

/* ---- Small controls the pages draw for themselves ----------------------- */

/* A plain link that should carry itself like a button. */
.site-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 44px; padding: 11px 20px;
    font-size: 12px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
    text-align: center; text-decoration: none; white-space: nowrap;
    color: #fff;
    background: var(--gold-cta, #966c33);
    border: 1px solid var(--gold-cta, #966c33);
    border-radius: var(--r-sm, 6px);
    cursor: pointer;
    transition: background var(--dur, .32s) var(--ease), color var(--dur, .32s) var(--ease),
                border-color var(--dur, .32s) var(--ease), transform var(--dur, .32s) var(--ease),
                box-shadow var(--dur, .32s) var(--ease);
}
.site-btn:hover {
    background: var(--gold-deep, #8a6229);
    border-color: var(--gold-deep, #8a6229);
    transform: translateY(-2px);
    box-shadow: var(--sh-gold, 0 12px 28px -12px rgba(169,123,62,.45));
}
.site-btn--quiet {
    color: var(--ink, #241e18);
    background: transparent;
    border-color: var(--line, #e4d8c2);
}
.site-btn--quiet:hover {
    color: var(--gold-deep, #8a6229);
    background: var(--paper, #fff);
    border-color: var(--gold-soft, #e0c79a);
    box-shadow: var(--sh-md, 0 10px 28px -12px rgba(64,45,20,.2));
}

/* A square control: stepping a quantity, taking a line back off a list. */
.site-ctl {
    display: grid; place-items: center;
    width: 34px; height: 34px; flex: none;
    font-size: 1rem; line-height: 1;
    color: var(--ink-2, #3a3129);
    background: var(--paper, #fff);
    border: 1px solid var(--line, #e4d8c2);
    border-radius: var(--r-sm, 6px);
    cursor: pointer;
    transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.site-ctl:hover {
    color: var(--gold-deep, #8a6229);
    background: var(--gold-wash, #f5ebd9);
    border-color: var(--gold-soft, #e0c79a);
}
.site-ctl[disabled] { opacity: .45; cursor: not-allowed; }

/* ---- Order online, the line that sends you on ---------------------------- */
.about-cta { padding-block: clamp(40px, 5vw, 76px); }
.about-cta__inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: clamp(20px, 3vw, 44px);
    padding: clamp(26px, 3.4vw, 48px);
    background: var(--cream-100, #f9f4ec);
    border: 1px solid var(--line, #e4d8c2);
    border-radius: var(--r-lg, 16px);
}
.about-cta__inner .section-title { margin-bottom: 0; }
.about-cta__btn { display: flex; flex-wrap: wrap; gap: 12px; }

/* The other template's two buttons, in this one's hand. */
.btn-default {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 14px 26px;
    font-size: 13px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap;
    color: var(--ink, #241e18);
    background: transparent;
    border: 1px solid var(--line, #e4d8c2);
    border-radius: var(--r-sm, 6px);
    transition: background var(--dur, .32s) var(--ease), color var(--dur, .32s) var(--ease),
                border-color var(--dur, .32s) var(--ease), transform var(--dur, .32s) var(--ease),
                box-shadow var(--dur, .32s) var(--ease);
}
.btn-default:hover {
    color: var(--gold-deep, #8a6229);
    background: var(--paper, #fff);
    border-color: var(--gold-soft, #e0c79a);
    transform: translateY(-2px);
    box-shadow: var(--sh-md, 0 10px 28px -12px rgba(64,45,20,.2));
}
.btn-highlighted {
    color: #fff;
    background: var(--gold-cta, #966c33);
    border-color: var(--gold-cta, #966c33);
}
.btn-highlighted:hover {
    color: #fff;
    background: var(--gold-deep, #8a6229);
    border-color: var(--gold-deep, #8a6229);
    box-shadow: var(--sh-gold, 0 12px 28px -12px rgba(169,123,62,.45));
}

/* ---- What a guest thought of a dish ------------------------------------- */
.dsh-stars { display: inline-flex; align-items: center; gap: 8px; }
.dsh-stars__row { display: inline-flex; align-items: center; gap: 2px; }
.dsh-star { position: relative; display: inline-grid; width: 14px; height: 14px; }
.dsh-star svg { position: absolute; inset: 0; width: 14px; height: 14px; }
.dsh-star__b { fill: var(--cream-400, #dfd1b9); }
.dsh-star__f { fill: var(--gold, #a97b3e); }
.dsh-stars__n { font-size: .78rem; font-weight: 500; color: var(--muted, #796e62); }
.dsh-stars__n small { color: var(--faint, #8a7f71); font-weight: 400; }

/* ---- Tickets for an event ----------------------------------------------- */
.tk-shell { display: grid; gap: clamp(16px, 2vw, 24px); }
.tk-main {
    display: grid; gap: clamp(14px, 1.8vw, 20px);
    padding: clamp(18px, 2.2vw, 26px);
    background: var(--paper, #fff);
    border: 1px solid var(--line, #e4d8c2);
    border-radius: var(--r, 10px);
}
.tk-line__cls, .cls { font-size: .78rem; color: var(--faint, #8a7f71); }
.sel { display: inline-flex; align-items: center; gap: 8px; }

/* ---- The rest of the small words --------------------------------------- */
.menu-items-list { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.dish-modal__media { border-radius: var(--r, 10px); overflow: hidden; background: var(--cream-200, #f3ebde); }
.dish-modal__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.dish-modal__price { font-family: var(--serif, Georgia, serif); font-size: 1.28rem; color: var(--gold-deep, #8a6229); }
.tagline { font-size: .84rem; line-height: 1.5; color: var(--muted, #796e62); }

/* A second copy of the page banner, kept in the markup for the visual editor
   to write into and never shown to a guest. */
.pbnr-dup { display: none; }

/* Said when the window is too narrow for the plan of the room to be read. */
.tooSmall {
    padding: 18px;
    text-align: center;
    font-size: .9rem;
    color: var(--muted, #796e62);
    background: var(--cream-100, #f9f4ec);
    border: 1px dashed var(--line, #e4d8c2);
    border-radius: var(--r-sm, 6px);
}

/* Where a booking stands, once a day and a time are chosen. */
.bwn__f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bwn__f--sum {
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--gold-wash, #f5ebd9);
    border: 1px solid var(--line-2, rgba(169,123,62,.22));
    border-radius: var(--r-sm, 6px);
    font-size: .9rem;
    color: var(--ink-2, #3a3129);
}
.bwn__rail--times { display: flex; flex-wrap: wrap; gap: 8px; }

/* On the bar, whether the kitchen is open is said by the bar's own state
   rather than by the pill, so the pill takes its colour from the parent. */
.mm-here.is-open .mm-here__state { color: #3f6b4c; background: rgba(76,122,90,.13); }
.mm-here.is-open .mm-here__state i { background: var(--success, #4c7a5a); }
.mm-here.is-shut .mm-here__state { color: var(--faint, #8a7f71); background: var(--cream-200, #f3ebde); }
.mm-here.is-shut .mm-here__state i { background: var(--faint, #8a7f71); }

/* The body of a journal entry, and the older piece on the left. */
.post-content { min-width: 0; }
.post-nav__prev { text-align: left; }
.mm-branch__go__t { letter-spacing: inherit; }
@media (max-width: 767px) { .mm-branch__go__t { letter-spacing: .16em; } }

/* ---- The page wrapper the editable pages use ----------------------------
   `shell` is the wrapper the owner's own pages and the legal documents sit in.
   It was only ever defined inside `.sx-block`, which is the visual editor's
   own scope, so a page carrying it on its own had no side padding at all and
   its text ran into the edge of the window. The scoped rule is more specific
   and still wins inside a block, so this only reaches the ones that had
   nothing. */
.shell {
    width: 100%;
    max-width: var(--container, 1240px);
    margin-inline: auto;
    padding-inline: var(--gutter, clamp(16px, 4vw, 40px));
}

/* ---- The business's own name in the word-mark ---------------------------
   The template set its mark in capitals by hand. The name now comes from the
   owner's settings, so the capitals are the stylesheet's job, and a logo the
   owner uploaded sits where the words would. */
.wordmark__name { text-transform: uppercase; }
.wordmark__logo { display: inline-flex; align-items: center; }
.wordmark__logo img { display: block; height: 44px; width: auto; max-width: 220px; object-fit: contain; }
.wordmark--lg .wordmark__logo img { height: 56px; max-width: 260px; }
.footer-reach { margin-top: 12px; line-height: 1.8; }
.footer-reach a { color: var(--cream-50); }

/* ---- Closed, said in the colour the template uses for it ----------------
   The markup carries `is-closed`; the template only ever styled its own
   modifier, so a shut branch read in the green of an open one. */
.branch-choice__status.is-closed { color: var(--danger); }
.branch-choice__status.is-closed::before { background: var(--danger); box-shadow: 0 0 0 3px rgba(166,72,60,.16); }
.branch-choice__card.is-shut { border-style: dashed; }
.branch-choice__card.is-shut .branch-choice__media img { filter: grayscale(.55); opacity: .82; }
.branch-choice__card.is-shut:hover { transform: none; box-shadow: none; }

/* ---- Anything a script hides stays hidden --------------------------------
   Cards and empty notes set their own display, which beats the browser's
   rule for `hidden`. */
.grid > [hidden], .menu-empty[hidden], .mm-list > [hidden] { display: none !important; }

/* ---- A dish that cannot be ordered right now ---------------------------- */
.menu-item.is-unavailable { opacity: .72; }
.menu-item.is-unavailable .menu-item__thumb img { filter: grayscale(.6); }
.menu-item .dsh-stars { margin-bottom: 4px; }

/* ---- The side by side / one by one switch ------------------------------- */
.mm-vsw { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); }
.mm-vsw__b {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
    border: 0; border-radius: 999px; background: transparent; color: var(--ink-2);
    font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background var(--dur, .25s) var(--ease, ease), color var(--dur, .25s) var(--ease, ease);
}
.mm-vsw__b svg { width: 16px; height: 16px; flex: none; }
.mm-vsw__b:hover { background: var(--cream-100); }
.mm-vsw__b.is-on { background: var(--espresso); color: var(--cream-50); }
.mm-vsw__b:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 720px) { .mm-vsw { display: none; } }

/* One by one: a single column, each card laid on its side with the picture to
   the left. Below the breakpoint the list is always cards. */
@media (min-width: 721px) {
    .mm-list.is-rows { grid-template-columns: minmax(0, 1fr); }
    .mm-list.is-rows > .card { display: grid; grid-template-columns: minmax(220px, 32%) minmax(0, 1fr); grid-template-rows: 1fr auto; }
    .mm-list.is-rows > .card > .card__media,
    .mm-list.is-rows > .card > .event__media { grid-row: 1 / span 2; aspect-ratio: auto; min-height: 220px; height: 100%; }
    .mm-list.is-rows > .card > .card__media img { position: absolute; inset: 0; }
    .mm-list.is-rows > .card > .card__tag { left: 14px; }
}

/* ---- Events: where an evening stands ------------------------------------ */
.mm-state--upcoming { color: var(--gold-deep); }
.mm-state--ongoing { color: #3f6b4c; background: rgba(76,122,90,.13); border-color: transparent; }
.mm-state--ended { color: var(--muted-2); background: var(--cream-200); border-color: transparent; }
.mm-event--ended .event__media img { filter: grayscale(.45); }
.mm-event__by { margin: 0; }

/* ---- Gallery films ------------------------------------------------------ */
.gallery-item__ph { display: block; width: 100%; height: 100%; min-height: 180px; background: linear-gradient(160deg, var(--cream-200), var(--cream-400)); }
.gallery-item__play {
    position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%);
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(33,27,21,.62); border: 1px solid rgba(224,199,154,.55); color: var(--cream-50);
    pointer-events: none; transition: transform var(--dur, .25s) var(--ease, ease);
}
.gallery-item__play svg { width: 22px; height: 22px; fill: currentColor; margin-left: 3px; }
.gallery-item--video:hover .gallery-item__play { transform: translate(-50%, -50%) scale(1.08); }
.lightbox__video { display: block; max-width: min(100%, 1100px); max-height: 82vh; border-radius: var(--r, 10px); background: #000; box-shadow: var(--sh-lg); }
.lightbox__video[hidden], .lightbox img[hidden] { display: none; }

/* ---- A branch that is shut right now ------------------------------------ */
.mm-shut { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .mm-shut { grid-template-columns: 1fr; } }
.mm-shut__panel, .mm-shut__hours { border: 1px solid var(--line-soft); border-radius: var(--r-lg, 16px); background: var(--paper); padding: clamp(22px, 3vw, 34px); }
.mm-shut__panel h2 { margin: 14px 0 8px; }
.mm-shut__next { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: var(--r, 10px); background: var(--gold-wash); }
.mm-shut__next svg { width: 26px; height: 26px; flex: none; color: var(--gold-deep); }
.mm-shut__next span { display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.mm-shut__next strong { display: block; font-size: 18px; color: var(--ink); margin-top: 2px; }
.mm-shut__hours .info-list__row.is-today { color: var(--gold-deep); font-weight: 500; }

/* ---- Finding a branch --------------------------------------------------- */
.mm-find { display: grid; gap: 14px; }
.mm-find .filter-bar { margin-bottom: 0; }
.mm-offer__in { margin: 0; letter-spacing: .12em; text-transform: uppercase; font-size: 11px; }

/* ---- A pin's note on a map ---------------------------------------------- */
.map-pop { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.map-pop__links { display: flex; gap: 12px; margin-top: 8px; }
.map-pop__links a { color: var(--gold-deep); font-weight: 500; }

/* ---- A dish or course with no photograph of its own ----------------------
   The tile keeps its place in the row and carries the dish's first letter,
   so the list stays even without borrowing another plate's picture. */
.menu-item__thumb--none { display: grid; place-items: center; background: var(--gold-wash); color: var(--gold-deep); }
.menu-item__thumb--none span { font-family: var(--font-display); font-size: 34px; line-height: 1; }
.category-head { background: var(--ink); }

/* Clear order, under the checkout button in the cart drawer: a quiet text
   button, since it undoes rather than moves the order on. */
.cart-clear {
    display: block; width: 100%; margin-top: 10px; padding: 9px; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted, #796e62); transition: color .3s var(--ease, ease);
}
.cart-clear:hover, .cart-clear:focus-visible { color: var(--danger, #a6483c); }

/* Out of hours: a quiet notice above the menu, which stays on show. */
.mm-closed {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-top: clamp(20px, 3vw, 32px); padding: 16px 20px;
    background: var(--paper, #fff); border: 1px solid var(--line, #e4d8c2);
    border-inline-start: 3px solid var(--gold, #a97b3e); border-radius: var(--r, 10px); box-shadow: var(--sh-xs);
}
.mm-closed__ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold-wash, #f5ebd9); color: var(--gold-deep, #8a6229); }
.mm-closed__ic svg { width: 20px; height: 20px; }
.mm-closed__b { flex: 1 1 280px; min-width: 0; display: grid; gap: 2px; }
.mm-closed__b strong { color: var(--ink, #241e18); font-weight: 600; font-size: .98rem; line-height: 1.45; }
.mm-closed__b span { color: var(--muted, #796e62); font-size: .88rem; line-height: 1.5; }
.mm-closed__go { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 575px) { .mm-closed__go { width: 100%; } .mm-closed__go .btn { flex: 1 1 auto; } }
.menu-item__off { white-space: nowrap; }