/* Annandale Arms. One stylesheet for the whole site.
   Shape grammar (agreed with the client on the design walkthrough):
   square corners = the business (prices, times, buttons), rounded = comfort (rooms, food,
   welcome), the archway = "what else is there", used ONCE per page. */
:root{
  --navy:#0F1237; --navy-2:#1B2150; --navy-line:#262A52; --sky:#2BACEB;
  --sage:#7E8468; --sage-haze:#A3A991; --sage-ink:#23281b;
  --brass:#C08A3E; --oak:#B6A08A;
  --stone:#F3EDE4; --stone-haze:#CFC3AF; --paper:#FBF8F3;
  --ink:#0F1237; --muted:#464B60; --soft:#9BA0BC;
  --r-biz:2px; --r-comfort:24px;
  --wrap:1140px; --gut:28px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --serif:Fraunces,Georgia,serif; --sans:Inter,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.6;
     -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-999px;top:0;background:var(--sky);color:#06233a;padding:10px 14px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}

/* Unconfirmed facts. Shown loudly on the preview so nobody signs off a plausible-looking
   guess; build.py --release refuses to build while any remain. */
.gap{background:#FFE58A;color:#3a2c00;padding:0 4px;border-radius:2px;font-style:normal;
     font-family:var(--sans);font-size:.9em}

/* ── header ── */
.top{background:var(--navy);position:sticky;top:0;z-index:40}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:68px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{width:40px;height:40px}
.brand b{font-family:var(--serif);font-size:17px;color:#fff;font-weight:500;letter-spacing:.02em;line-height:1.1}
.brand small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
             color:var(--sky);font-weight:600;margin-top:3px}
.menu{display:flex;gap:24px;align-items:center}
.menu a{font-size:14px;color:#C6C9D8;font-weight:500;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.menu a:hover{color:#fff}
.menu a[aria-current="page"]{color:#fff;border-bottom-color:var(--brass)}
.menu .call{color:#fff;font-weight:600}
.menu .btn{border-bottom:0;padding:10px 16px;color:#06233a}
.burger{display:none;background:none;border:1px solid #3A4070;color:#fff;border-radius:var(--r-biz);
        font:600 13px var(--sans);padding:9px 12px;cursor:pointer}

/* ── buttons: square, they are business ── */
.btn{display:inline-block;padding:14px 24px;border-radius:var(--r-biz);background:var(--sky);color:#06233a;
     font-size:14px;font-weight:700;text-decoration:none;border:1px solid var(--sky)}
.btn:hover{background:#4dbcf0}
.btn-o{display:inline-block;padding:14px 24px;border-radius:var(--r-biz);border:1px solid #5B6185;color:#E7E2D8;
       font-size:14px;font-weight:600;text-decoration:none}
.btn-o:hover{border-color:#fff;color:#fff}
.btn-dk{display:inline-block;padding:14px 24px;border-radius:var(--r-biz);background:var(--navy);color:#fff;
        font-size:14px;font-weight:700;text-decoration:none}
.btn-dk:hover{background:var(--navy-2)}
.btn-line{display:inline-block;padding:13px 22px;border-radius:var(--r-biz);border:1px solid currentColor;
          font-size:14px;font-weight:600;text-decoration:none}
.btns{display:flex;flex-wrap:wrap;gap:10px}

/* ── type ── */
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sky);margin-bottom:14px;font-weight:600}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1}
h4{font-family:var(--serif);font-weight:500}
.lede{font-size:17px;line-height:1.65;max-width:56ch}

/* ── hero (home) ── */
.hero{background:var(--navy);color:var(--stone);padding:56px 0 40px}
.herogrid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(34px,5vw,54px);color:#fff;margin-bottom:18px;max-width:16ch}
.hero .lede{color:#C6C9D8;margin-bottom:28px}
/* Client asked for a montage of bar, restaurant and a room as the first picture,
   not a single shot. Rounded: the photos are comfort. */
.montage{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:10px;aspect-ratio:5/4}
.montage figure{position:relative;border-radius:var(--r-comfort);overflow:hidden;margin:0}
.montage figure:first-child{grid-row:1 / 3}
.montage img{width:100%;height:100%;object-fit:cover}
.montage figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 11px;font-family:var(--serif);
  font-size:14px;color:#fff;background:linear-gradient(to top,rgba(15,18,55,.85),rgba(15,18,55,0))}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--navy-line);margin-top:40px;
       border-radius:var(--r-biz);overflow:hidden}
.fact{background:var(--navy);padding:16px 18px}
.fact b{display:block;font-family:var(--serif);font-size:24px;color:var(--brass);font-weight:500;margin-bottom:3px;line-height:1.2}
.fact span{font-size:12.5px;color:var(--soft);line-height:1.45}

/* ── page header (inner pages) ── */
.phead{background:var(--navy);color:var(--stone);padding:52px 0 30px}
.phead h1{font-size:clamp(32px,4.6vw,48px);color:#fff;margin-bottom:14px}
.phead .lede{color:#C6C9D8;margin-bottom:24px}
.phead.sage{background:var(--sage)}
.phead.sage .eyebrow{color:#E4E8D6}
.phead.sage .lede{color:#EDEFE2}

/* ── hills: layout, not colour. Deep, few, asymmetric, overlapping. ── */
.hill{display:block;width:100%;height:150px}
/* Hills end on fractional pixels, and the last pixel row blends with the colour ABOVE the hill,
   which showed as a hairline under some dividers. Fix: tuck each hill 1px under the next
   section, and make sections positioned so their background paints over the svg's last row. */
.hill,.seasonal-wrap,.plain-hill{margin-bottom:-1px}
.band,.reviews,.bookstrip,.phead,.hero{position:relative}
.paper-band{background:var(--paper)}

/* ── bands ── */
.band{padding:56px 0}
.band h2{font-size:clamp(28px,3.4vw,38px);margin-bottom:14px}
.band p{max-width:60ch}
.band p + p{margin-top:12px}
.sage-band{background:var(--sage);color:#EDEFE2}
.sage-band .eyebrow{color:#E4E8D6}
/* The client asked for "The restaurant" to be bigger, so on the sage band the label is the
   headline and the line under it is the strapline, not an eyebrow. */
.sage-band .bigtag{font-family:var(--serif);font-size:clamp(34px,4.4vw,48px);color:#fff;font-weight:500;line-height:1.05;margin-bottom:6px}
.sage-band .strap{font-family:var(--serif);font-size:clamp(19px,2.2vw,24px);color:#E4E8D6;margin-bottom:16px}
.stone-band{background:var(--stone)}
.stone-band .eyebrow,.paper-band .eyebrow{color:#A8946F}
.navy-band{background:var(--navy);color:#C6C9D8}
.navy-band h2{color:#fff}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.card{background:var(--paper);border-radius:var(--r-comfort);overflow:hidden;color:var(--sage-ink)}
.card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.card .cbody{padding:17px 19px 21px}
.card h3{font-size:19px;margin-bottom:6px}
.card p{font-size:14px;line-height:1.55;color:#4c5240}

.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split.wide-left{grid-template-columns:1.2fr .8fr}
.rounded{border-radius:var(--r-comfort);overflow:hidden}
.rounded img{width:100%;height:100%;object-fit:cover}
.arch{border-radius:200px 200px var(--r-biz) var(--r-biz);overflow:hidden;aspect-ratio:3/4;border:1px solid #DCD2C2;max-width:340px}
.arch img{width:100%;height:100%;object-fit:cover}
.arch-row{display:grid;grid-template-columns:320px 1fr;gap:44px;align-items:center}

/* ── info panels: square, business ── */
.panel{background:#fff;border:1px solid #E4DCCF;border-radius:var(--r-biz);padding:22px 24px}
.panel h3{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#A8946F;font-weight:600;margin-bottom:10px}
.panel p,.panel li{font-size:15px;color:var(--muted)}
.panel ul{list-style:none}
.panel li{padding:7px 0;border-bottom:1px solid #EEE7DB;display:flex;justify-content:space-between;gap:14px}
.panel li:last-child{border-bottom:0}
.panel li b{color:var(--ink);font-weight:600}
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.panels.two{grid-template-columns:repeat(2,1fr)}

/* ── menu ── */
.menu-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px 56px;margin-top:26px}
.mgroup h3{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#A8946F;
           font-weight:600;padding-bottom:9px;border-bottom:1px solid var(--stone-haze);margin-bottom:6px}
.dish{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:10px 0;border-bottom:1px dotted #DDD3C3}
.dish b{font-weight:600;font-size:15.5px}
.dish i{font-style:normal;font-size:15px;font-weight:600;color:var(--ink)}
.dish span{grid-column:1/-1;font-size:13.5px;color:var(--muted);line-height:1.5}
.menu-note{font-size:13.5px;color:var(--muted);margin-top:18px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.tabs a{font-size:13px;font-weight:600;text-decoration:none;padding:9px 14px;border:1px solid var(--stone-haze);border-radius:var(--r-biz)}
.tabs a:hover{border-color:var(--navy)}

/* ── booking strip ── */
.bookstrip{background:var(--navy);color:#C6C9D8;padding:38px 0}
.bookstrip .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.bookstrip h2{font-size:28px;color:#fff;margin-bottom:6px}
.bookstrip p{font-size:15px}
.bookstrip a.tel{color:#fff;font-weight:600}

/* ── footer ── */
.foot{background:var(--navy);color:var(--soft);padding:44px 0 90px;font-size:14px;line-height:1.75;border-top:1px solid var(--navy-line)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;margin-bottom:28px}
.foot h2{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);margin-bottom:10px;font-weight:600}
.foot a{color:#C6C9D8;display:block;text-decoration:none}
.foot a:hover{color:#fff}
.legal{border-top:1px solid var(--navy-line);padding-top:16px;font-size:12px;color:#6B7196;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.legal a{display:inline;color:#8F95B6}

/* ── rooms: a gallery, with the archway as the one special tile ── */
.roomgal{display:grid;grid-template-columns:1.1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;aspect-ratio:16/10}
.roomgal figure{margin:0;border-radius:var(--r-comfort);overflow:hidden;position:relative}
/* elliptical radii: horizontal half the width, vertical sized to the tile so the top is a true round arch */
.roomgal figure.archtile{grid-row:1 / 3;border-radius:50% 50% var(--r-biz) var(--r-biz) / 27% 27% var(--r-biz) var(--r-biz)}
.roomgal img{width:100%;height:100%;object-fit:cover}
.roomgal figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 9px;font-size:12.5px;color:#fff;
  background:linear-gradient(to top,rgba(15,18,55,.8),rgba(15,18,55,0))}
.types{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;background:#E4DCCF;
       border:1px solid #E4DCCF;border-radius:var(--r-biz);overflow:hidden;margin:26px 0}
.type{background:#fff;padding:16px 18px}
.type b{display:block;font-family:var(--serif);font-weight:500;font-size:18px;margin-bottom:3px}
.type span{font-size:13.5px;color:var(--muted);line-height:1.5;display:block}
.ticks{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.ticks li{font-size:13px;padding:6px 11px;border:1px solid #DCD2C2;border-radius:var(--r-biz);background:#fff;color:var(--muted)}

/* ── story: a long read for people waiting for their food, so phone first ── */
.story{max-width:720px;margin:0 auto;padding:0 var(--gut)}
.story p{font-size:18px;line-height:1.75;margin:0 0 18px;color:#2A2E48}
.story h2{font-size:clamp(26px,3.4vw,34px);margin:46px 0 16px}
.story .first::first-letter{font-family:var(--serif);float:left;font-size:64px;line-height:.9;padding:6px 10px 0 0;color:var(--brass)}
.story figure{margin:28px 0}
.story figure img{width:100%;border-radius:var(--r-comfort)}
.story figcaption{font-size:13.5px;color:var(--muted);margin-top:9px}
.story .pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.story .pair img{aspect-ratio:4/5;object-fit:cover}
.story .wide{margin-left:calc(-1 * min(120px, 8vw));margin-right:calc(-1 * min(120px, 8vw))}
.story .label{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#A8946F;font-weight:600}
.story blockquote{border-left:3px solid var(--brass);padding:4px 0 4px 20px;margin:26px 0;font-family:var(--serif);font-size:23px;line-height:1.4;color:var(--navy)}

/* anchors land below the sticky header */
[id]{scroll-margin-top:84px}

/* ── enquiry dialog: square, it is business ── */
.enquire{margin:auto;border:0;border-radius:var(--r-biz);padding:0;width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);
         background:var(--paper);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.enquire::backdrop{background:rgba(15,18,55,.6)}
.enquire form{padding:26px 26px 22px;display:grid;gap:13px;position:relative}
.enquire h2{font-size:28px;padding-right:40px}
.enquire .x{position:absolute;top:12px;right:12px;width:38px;height:38px;border:1px solid #DCD2C2;background:#fff;
            border-radius:var(--r-biz);font-size:22px;line-height:1;cursor:pointer;color:var(--ink)}
.enquire label{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
.enquire small{font-weight:400}
.enquire input,.enquire select,.enquire textarea{font:15px var(--sans);padding:11px 12px;border:1px solid #CFC3AF;
       border-radius:var(--r-biz);background:#fff;color:var(--ink);width:100%}
.enquire input:focus,.enquire select:focus,.enquire textarea:focus{outline:2px solid var(--sky);outline-offset:0;border-color:var(--sky)}
.enquire .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.enquire .hint{font-size:13px;color:var(--muted)}
.enquire .btn{cursor:pointer;justify-self:start}
.enquire .hp{position:absolute;left:-9999px}
.form-status{font-size:14px;padding:10px 12px;border-radius:var(--r-biz)}
.form-status.ok{background:#E3EED9;color:#2C4A16}
.form-status.bad{background:#FBE3DC;color:#7A2410}
@media (max-width:520px){.enquire .row2{grid-template-columns:1fr}.enquire form{padding:22px 16px 18px}}


/* ── reviews: real Google reviews, quoted word for word. Rating and count checked 6 Oct 2026;
   refresh at launch. No AggregateRating schema: Google ignores self-hosted reviews of yourself. ── */
.reviews{background:var(--stone);padding:48px 0}
/* a rule only where reviews follow a band of the same colour (restaurant menu), never under a hill */
.band + .reviews{border-top:1px solid #E4DCCF}
.reviews .score{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.reviews .score b{font-family:var(--serif);font-size:44px;font-weight:500;color:var(--navy);line-height:1}
/* filled to the real score: 4.5 of 5 = 90% */
.reviews .score .stars{font-size:22px;letter-spacing:2px;color:var(--brass);background:linear-gradient(90deg,var(--brass) 89%,#D8CDBB 89%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.reviews .score span{color:var(--muted);font-size:15px}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{background:#fff;border:1px solid #E4DCCF;border-radius:var(--r-comfort);padding:22px 24px;margin:0}
.quote blockquote{font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--navy);margin:0 0 14px}
.quote figcaption{font-size:13px;color:var(--muted)}
.quote figcaption b{color:var(--ink);font-weight:600}
.reviews .more{margin-top:20px;font-size:14px}
@media (max-width:900px){.quotes{grid-template-columns:1fr}.reviews{padding:36px 0}}


/* ── seasonal hill (home only, see src/seasonal_hill.py). Season by colour, never animation. ── */
/* Height follows the width so the drawing is never cut at the top (a capped height cropped the
   far crest on wide screens). Phones get a minimum height and lose a little from the SIDES only. */
.hill.seasonal{height:auto;aspect-ratio:1200/230;min-height:120px}
:root{--decid-shade:#3D5229;--patch:#55663E;--far-top:#9DA68A;--far:#8C9579;--mid-top:#7C8F5A;--mid:#617447;--mid-low:#4E5E3A;--near-top:#C9CDB0;
      --conif:#2F3D2A;--decid:#4F6A36;--trunk:#3B3328;--stars:0}
[data-season="autumn"]{--far-top:#B2A487;--far:#958A72;--mid-top:#A88456;--mid:#86683F;--mid-low:#62553A;--near-top:#D8C9A8;
      --conif:#2F3B2B;--decid:#9C6A3E;--decid-shade:#74502F;--patch:#6F7048}
[data-season="winter"]{--far-top:#F4F5F6;--far:#C9CED3;--mid-top:#EEF0F1;--mid:#8E9183;--mid-low:#6E7064;--near-top:#E6E2DA;
      --conif:#2C3529;--decid:#6D6258;--decid-shade:#574E46;--patch:#A9ADA3;--stars:1}
[data-season="spring"]{--far-top:#AFBB93;--far:#97A57C;--mid-top:#9DB867;--mid:#78964A;--mid-low:#5E7840;--near-top:#D5DDB4;
      --conif:#34442E;--decid:#86A257;--decid-shade:#64803F;--patch:#5E7A3E}
[data-season="summer"]{--far-top:#8E9A7C;--far:#7C8A6E;--mid-top:#6E8A45;--mid:#56703A;--mid-low:#435A30;--near-top:#C3CBA2;
      --conif:#28361F;--decid:#3A5228;--decid-shade:#2C401F;--patch:#6E6A4E}
.hill.seasonal .conif{fill:var(--conif)}
.hill.seasonal .decid{fill:var(--decid)}
.hill.seasonal .decid.shade{fill:var(--decid-shade)}
[data-season="winter"] .hill.seasonal .decid{opacity:.6}
.hill.seasonal .patches{fill:var(--patch);opacity:.45}
.hill.seasonal .stars{opacity:var(--stars)}


/* falling leaves (autumn) and snow (winter) over the seasonal hill, filled in by site.js.
   Kept from the first draft at Matthias's request; off for anyone who asks for less motion. */
.seasonal-wrap{position:relative;background:var(--navy)}
.seasonal-wrap .hill{display:block;width:100%}
.air{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.air > *{position:absolute}
.leaf{animation:drift var(--d) linear var(--delay) infinite;left:-5%;top:var(--y0)}
.leaf > i{display:block;animation:flutter var(--f) ease-in-out var(--delay) infinite}
.leaf svg{display:block;width:var(--s);height:var(--s)}
@keyframes drift{from{left:-5%;top:var(--y0)} to{left:105%;top:var(--y1)}}
@keyframes flutter{0%{transform:translateY(0) rotate(0)}25%{transform:translateY(-16px) rotate(110deg)}
  50%{transform:translateY(5px) rotate(200deg)}75%{transform:translateY(-9px) rotate(290deg)}100%{transform:translateY(0) rotate(360deg)}}
.flake{width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:var(--o);top:-4%;left:var(--x);
       animation:fall var(--d) linear var(--delay) infinite}
@keyframes fall{from{transform:translate(0,0)} to{transform:translate(var(--dx),var(--fall))}}
.butterfly{animation:flit var(--d) ease-in-out var(--delay) infinite}
.butterfly svg{display:block;width:16px;height:12px;animation:flap .22s ease-in-out infinite alternate}
@keyframes flap{from{transform:scaleX(1)} to{transform:scaleX(.25)}}
@keyframes flit{0%{left:-4%;top:55%}20%{left:20%;top:30%}40%{left:42%;top:48%}60%{left:63%;top:26%}80%{left:84%;top:44%}100%{left:104%;top:30%}}
@media (prefers-reduced-motion:reduce){
  .butterfly{display:none}
  .leaf,.leaf > i,.flake{animation:none}
  .leaf{left:var(--x);top:var(--y0)}
  .flake{transform:translateY(calc(var(--fall) * var(--p)))}
}

/* hill under the home hero: seasonal on phones (same 900px breakpoint as the menu), plain on
   laptops, where the small graphics looked out of place. Agreed with Dan 8 Oct.
   ?season= is a preview, so it shows the seasonal hill at any width. */
.seasonal-wrap{display:none}
@media (max-width:900px){
  .seasonal-wrap{display:block}
  .plain-hill{display:none}
}
[data-season-preview] .seasonal-wrap{display:block}
[data-season-preview] .plain-hill{display:none}

/* ── phone action bar: TV traffic arrives on phones ── */
.actionbar{display:none}

@media (max-width:900px){
  :root{--gut:16px}
  .burger{display:block}
  /* closed = invisible + unclickable rather than display:none, so opening and closing can
     transition (and a fast second tap reverses from where it is). visibility waits for the
     fade on close, then takes the links out of the tab order. */
  .menu{display:flex;position:absolute;left:0;right:0;top:100%;background:var(--navy);flex-direction:column;
        align-items:stretch;gap:0;padding:6px 16px 16px;border-top:1px solid var(--navy-line);
        opacity:0;transform:translateY(-14px);visibility:hidden;pointer-events:none;
        transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility 0s linear .25s}
  .menu.open{opacity:1;transform:none;visibility:visible;pointer-events:auto;
             transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility 0s}
  .menu a{padding:13px 0;border-bottom:1px solid var(--navy-line);font-size:16px}
  .menu .btn{margin-top:12px;text-align:center;padding:14px}
  .herogrid,.split,.split.wide-left,.arch-row{grid-template-columns:1fr;gap:28px}
  .hero{padding:34px 0 28px}
  .facts{grid-template-columns:repeat(2,1fr);margin-top:28px}
  .hill{height:80px}
  .band{padding:40px 0}
  .cards,.panels,.panels.two,.menu-cols{grid-template-columns:1fr}
  .arch{max-width:240px}
  .roomgal{grid-template-columns:1fr 1fr;grid-template-rows:auto;aspect-ratio:auto}
  .roomgal figure{aspect-ratio:1/1}
  .roomgal figure.archtile{grid-row:auto;grid-column:1 / 3;aspect-ratio:4/5;max-width:none;border-radius:50% 50% var(--r-biz) var(--r-biz) / 40% 40% var(--r-biz) var(--r-biz)}
  .story p{font-size:17px}
  .story .wide{margin-left:0;margin-right:0}
  .fgrid{grid-template-columns:1fr;gap:20px}
  .actionbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:50;
             background:var(--navy);border-top:1px solid var(--navy-line);padding:8px;gap:8px;
             padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .actionbar a{text-align:center;padding:13px 6px;border-radius:var(--r-biz);font-weight:700;font-size:15px;text-decoration:none}
  .actionbar .a1{background:var(--sky);color:#06233a}
  .actionbar .a2{border:1px solid #5B6185;color:#fff}
}
@media (max-width:420px){
  .montage{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;aspect-ratio:auto}
  .montage figure:first-child{grid-column:1 / 3;grid-row:auto;aspect-ratio:4/3}
  .montage figure{aspect-ratio:1/1}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ── menus (/menu/, built from src/menus.py). Square: prices are business. ──
   Sticky tabs + section links under the sticky header. site.js shows one menu at a time and
   sets html.js; without JS every menu shows in turn and the tabs are plain anchors. */
.mnav{position:sticky;top:68px;z-index:30;background:var(--paper);border-bottom:1px solid #E4DCCF}
.mtabs,.chips{display:flex;overflow-x:auto;scrollbar-width:none}
.mtabs::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none}
.mtabs{gap:6px;padding:12px 0 10px}
.mtabs a{flex:0 0 auto;font-size:14px;font-weight:600;text-decoration:none;padding:9px 14px;color:var(--ink);
         border:1px solid var(--stone-haze);border-radius:var(--r-biz);background:#fff}
.mtabs a[aria-current="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.chips{display:none;gap:18px;padding:0 0 8px}
.js .chips.on{display:flex}
.chips a{flex:0 0 auto;font-size:13px;color:var(--muted);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.chips a.on{color:var(--ink);border-bottom-color:var(--brass)}
.js .mpanel{display:none}
.js .mpanel.on{display:block}
.mpanel{padding:34px 0 8px}
.mpanel h2{margin-bottom:6px}
.mwhen{color:var(--muted);font-size:15px}
.mprices{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mprices div{background:var(--navy);color:#C6C9D8;padding:10px 16px;border-radius:var(--r-biz);font-size:14px}
.mprices b{color:#fff;margin-left:4px}
.mcols{columns:2 340px;column-gap:56px;margin-top:22px}
.mcols .mgroup{break-inside:avoid;margin-bottom:28px;scroll-margin-top:190px}
.mnote{font-size:13.5px;color:var(--muted);padding:8px 0 2px}
.tag{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--sage-ink);border:1px solid var(--sage-haze);
     padding:1px 5px;margin-left:4px;border-radius:2px;vertical-align:2px;white-space:nowrap}
.mcard{text-decoration:none;display:block}
/* the four menu cards on /restaurant/ lead with one of Dan's photos from that menu, edge to edge */
.mcard{overflow:hidden}
.mcard img{display:block;width:calc(100% + 48px);height:auto;max-width:none;margin:-22px -24px 16px;aspect-ratio:4/3;object-fit:cover}
.mcard span{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--brass)}
.mcard:hover{border-color:var(--navy)}
.panels.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  .panels.four{grid-template-columns:1fr 1fr}
  .mpanel{padding-top:26px}
  .mcols .mgroup{break-inside:auto}
}

/* ── table QR landing (/table/): two big choices on a phone ── */
.table-hello{background:var(--navy);color:#fff;text-align:center;padding:48px 0 64px;
             min-height:calc(100svh - 68px)}
.table-hello img{margin:0 auto 22px}
/* starts when the picture has arrived (site.js adds .in), not when the page draws: on a first
   visit the image lands after a page-draw animation has finished. No JS = no animation. */
.js .table-hello img{opacity:0}
.js .table-hello img.in{animation:settle .9s var(--ease-out) both}
/* the goat settles onto its rock, once, on the page most people see once. The buttons never
   wait for it. */
@keyframes settle{from{opacity:0;transform:translateY(-22px) scale(.92)} to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .table-hello img.in{animation-name:fade}
  @keyframes fade{from{opacity:0} to{opacity:1}}
  .menu,.menu.open{transform:none}
}
.table-hello h1{color:#fff;font-size:clamp(32px,8vw,46px);margin-bottom:30px}
.bigbtns{display:grid;gap:14px;max-width:420px;margin:0 auto}
.bigbtn{display:block;padding:22px 20px;border-radius:var(--r-biz);text-decoration:none;font-family:var(--serif);
        font-size:26px;color:var(--navy);background:var(--stone)}
.bigbtn:first-child{background:var(--sky);color:#06233a}
.bigbtn small{display:block;font-family:var(--sans);font-size:13px;margin-top:4px;opacity:.8}

/* food photos on the menu (option A, chosen 14 Oct): a square thumbnail on the dish's own line,
   tap for the WHOLE photo in a centred pop-up. The global *{margin:0} reset un-centres a <dialog>,
   so .photobox puts margin:auto back. Photos are shown whole (contain), never cropped. */
.dish.has-ph{grid-template-columns:76px 1fr;column-gap:14px;align-items:start}
.dish.has-ph .dbody{display:grid;grid-template-columns:1fr auto;gap:2px 16px}
.thumb{position:relative;width:76px;height:76px;padding:0;border:0;border-radius:var(--r-biz);overflow:hidden;
       cursor:zoom-in;background:var(--stone)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb em{position:absolute;right:4px;bottom:4px;font:700 11px var(--sans);font-style:normal;background:rgba(15,18,55,.8);
          color:#fff;padding:2px 5px;border-radius:2px}
.photobox{margin:auto;border:0;padding:0;background:var(--paper);border-radius:var(--r-biz);
          width:min(94vw,640px);max-height:94vh;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.photobox::backdrop{background:rgba(15,18,55,.8)}
.photobox .pics{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;background:#0b0d29}
.photobox .pics img{flex:0 0 100%;width:100%;height:auto;max-height:calc(94vh - 64px);object-fit:contain;scroll-snap-align:center}
.photobox p{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;font-weight:600;font-size:15px}
.photobox p small{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
.photobox button{flex:0 0 auto;font:600 14px var(--sans);padding:9px 14px;border:1px solid #DCD2C2;background:#fff;
                 border-radius:var(--r-biz);cursor:pointer;color:var(--ink)}