/* Menus (11 Sep 2026). Brand tokens as the rest of the prototype. */
@font-face{font-family:"Graphik";src:local("Graphik Regular"),local("Graphik-Regular");font-weight:400}
@font-face{font-family:"Graphik";src:local("Graphik Medium"),local("Graphik-Medium");font-weight:500}
@font-face{font-family:"Solina";src:local("Solina Book"),local("Solina-Book");font-weight:300}
:root{--sand:#F2ECE9;--ink:#000;--blue:#1847E8;--orange:#F36F23;--pink:#FF3CA0;--dgreen:#C3E1CC;
  --head:"Graphik","Inter",Arial,sans-serif;--body:"Solina","Figtree",Arial,sans-serif;--nav:72px;--pad:40px;--ease:cubic-bezier(.2,.8,.2,1);
  --cgap:18px}   /* ONE gap for the specials strip and the season grid, so their columns line up (Nuo, 11 Sep 2026) */
@view-transition{navigation:auto}                                          /* Tier 3 view transitions - see page.css for the why */
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* NO WIDE-SCREEN CAP: --pad stays put at every width (Nuo, 13 Sep 2026, reversing his own instruction of that
   morning). page.css carries the reasoning. THIS PAGE IS WHERE THE CAP DID VISIBLE DAMAGE: `.panel .bar` below pads
   with var(--pad) inside a FIXED min(1100px,100%) sheet, so at 3440px it was asked for 1840px of padding in an
   1100px bar and the site name and both pills collapsed into stacked circles. Do not reintroduce a viewport-derived
   --pad without giving that bar a padding of its own. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--sand);color:var(--ink);font-family:var(--body);font-weight:400;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block}
button{font:inherit;cursor:pointer;color:inherit}
.caps{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;line-height:1.02}
.k{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:#3f3c39}
.pill{font-family:var(--head);font-size:14px;letter-spacing:-0.01em;padding:12px 20px;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s}
.pill.light{border-color:#fff;color:#fff}
@media (hover:hover){.pill:hover{background:transparent;border-color:var(--blue);color:var(--blue)}}   /* outline only - V2 slide 79 (13 Sep 2026) */
section{padding:0 var(--pad)}
h2.caps{font-size:clamp(28px,2.8vw,40px);letter-spacing:-0.02em;margin-bottom:28px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);transition:background .35s}
.nav .logo{height:24px;width:auto}.nav .logo.dark{display:none}
.nav ul{display:flex;gap:28px;list-style:none;font-family:var(--head);text-transform:uppercase;font-size:13px;letter-spacing:.02em;color:#fff;white-space:nowrap}
.nav ul .here{border-bottom:2px solid currentColor;padding-bottom:2px}
.nav .book{font-family:var(--head);font-size:14px;padding:12px 20px;border:2px solid #fff;border-radius:999px;color:#fff;background:transparent;white-space:nowrap;transition:all .25s}
.nav.solid{background:var(--sand);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.nav.solid .logo.light{display:none}.nav.solid .logo.dark{display:block}
.nav.solid ul{color:var(--ink)}.nav.solid .book{border-color:var(--blue);background:transparent;color:var(--blue)}

/* hero: one dish, slow zoom */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#1a1512;color:#fff;padding:0}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;animation:drift 40s ease-in-out infinite alternate;transform-origin:50% 60%}
/* ONE SLOW DRIFT FOR EVERY HERO PHOTOGRAPH (Nuo, 13 Oct 2026: "the hero image zooms in rapidly at the start, can we stop that? Or let it zoom in very slowly and smoothly? ... make everything consistent!"): from rest (scale 1, exactly as first painted) to 1.03 and back, 40s each way, ease-in-out - the Christmas 30 Sep cap of 1.03 is now everyone's. The rapid zoom was motion.js setting scale 1.08 on the image a moment after load; that is gone. */
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.03)}}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%)}
.hero .copy{position:absolute;left:var(--pad);right:var(--pad);bottom:64px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.hero h1{font-size:clamp(44px,6.5vw,96px);letter-spacing:-0.02em;line-height:1.02}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l span{display:inline-block;transform:translateY(112%);animation:rise 1s var(--ease) forwards}
@keyframes rise{to{transform:none}}
.hero .pill{opacity:0;animation:fade 1s .6s var(--ease) forwards}
@keyframes fade{to{opacity:1}}
.hero .cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:22px;height:22px;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* the season (12 Sep 2026): a Christmas pill beside Choose a location, and the dark Christmas Menus row - two cards
   that open the whole menu in a dialog, drawn by ../christmas/festive-blocks.js (festive.css). The row sat after the
   picker on 12 Sep; since 13 Sep it follows the New for Autumn row (Nuo). */
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.hero .acts .pill.xmas{border-color:var(--orange);color:#fff;gap:10px}
.hero .acts .pill.xmas i{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px rgba(243,111,35,.9);animation:fxpulse 1.8s ease-in-out infinite}
@media (hover:hover){.hero .acts .pill.xmas:hover{background:var(--orange);border-color:var(--orange);color:#000}}
.festive{padding:88px var(--pad) 88px;position:relative;overflow:hidden}
.festive::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 85% 0%,rgba(243,111,35,.14),rgba(243,111,35,0) 50%);pointer-events:none}
.festive>*{position:relative}
.festive .fhd{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:30px}
.festive .fhd .kk{display:inline-flex;align-items:center;gap:10px;margin-bottom:12px}
.festive .fhd .kk i{width:8px;height:8px;border-radius:50%;background:var(--fx-acc);animation:fxpulse 1.8s ease-in-out infinite}
.festive .fhd h2{font-size:clamp(30px,3.2vw,48px);margin:0}
.festive .fhd h2.caps{margin-bottom:0}
/* the header's right side is the "Christmas at Daisy Green →" pill (Nuo, 13 Sep 2026: white type, top right, on the
   title's line - it replaced a sub paragraph here and a side card below). Its white type comes from festive.css's
   shared .fx .pill.fill, made white for every dark ground the same day; this rule only stops the flex row squeezing it. */
.festive .fhd .pill.fill{flex:0 0 auto}
/* two menu cards, half the row each (13 Sep 2026: the Canapés, buns and bowls side card and its Book a table went) */
.festive .fcards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fcard{text-align:left;background:var(--fx-bg2);border:1px solid var(--fx-line2);border-radius:20px;padding:26px 26px 24px;color:var(--fx-ink);display:flex;flex-direction:column;gap:14px;cursor:pointer;position:relative;overflow:hidden;transition:transform .4s var(--ease),border-color .3s;transition-delay:var(--d,0s)}
.fcard::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 100% 100%,rgba(243,111,35,.16),rgba(243,111,35,0) 55%);opacity:0;transition:opacity .4s;pointer-events:none}
@media (hover:hover){.fcard:hover{transform:translateY(-4px);border-color:rgba(242,236,233,.5)}.fcard:hover::after{opacity:1}}
.fcard>*{position:relative;z-index:1}
.fcard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.fcard .price b{font-family:var(--head);font-weight:400;font-size:clamp(34px,3vw,46px);letter-spacing:-0.03em;line-height:.95;display:block;text-align:right}
.fcard .price small{display:block;font-family:var(--head);text-transform:uppercase;font-size:10px;letter-spacing:.08em;color:var(--fx-mute);text-align:right;margin-top:4px}
.fcard .ttl{font-family:var(--head);font-weight:400;font-size:clamp(22px,2vw,30px);letter-spacing:-0.02em;line-height:1.02}
.fcard .ln{font-size:14.5px;line-height:1.5;color:var(--fx-mute)}
/* no .teas rule: the card carries no dish names since 13 Sep 2026 (Nuo) - the menu is behind the button */
.fcard .pill{align-self:flex-start;margin-top:auto;pointer-events:none}   /* auto: the grid stretches both cards to one height and this keeps both buttons on the same foot line when one .ln wraps and the other does not */
dialog.fxd{position:fixed;inset:0;margin:auto;border:0;padding:0;border-radius:22px;width:min(760px,94vw);max-height:92vh;max-height:92dvh;overflow:auto;background:var(--fx-bg);color:var(--fx-ink);box-shadow:0 40px 100px rgba(0,0,0,.6);scrollbar-width:thin;scrollbar-color:rgba(242,236,233,.35) transparent}   /* a thin dark-ground scrollbar: the default white bar read as a fault in the 12 Sep render */
/* the gallery follows the dark row (13 Sep 2026: the row moved below the season). .gal has no top padding of its own -
   the sand section above it always carried the space - so against the dark edge it takes the same 64px the season
   takes after the black specials band (.specials + .season below). Sibling selector: off-season the row is not drawn
   and the season's 88px foot is the gap, as before. GENERAL sibling (~), not adjacent (+): the dish <dialog> is written
   between the row and the gallery, so `+` matched nothing - measured 13 Sep 2026: padding-top 0, tiles 24px under the
   dark edge - and a rule that matches nothing reads exactly like one that worked. */
.festive ~ .gal{padding-top:64px}
dialog.fxd::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}
dialog.fxd .x{position:sticky;top:12px;float:right;margin:12px 12px 0 0;z-index:2;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--fx-line2);background:rgba(11,9,8,.8);color:var(--fx-ink);font-size:20px;line-height:1}
dialog.fxd .fxbody{padding:8px 18px 22px;clear:both}
dialog.fxd .fx-menu{border:0;background:transparent;padding:8px 14px 10px}
dialog.fxd .fxacts{display:flex;gap:10px;flex-wrap:wrap;padding:6px 14px 8px}
@media (max-width:760px){.festive{padding:56px var(--pad) 56px}.festive .fhd{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:22px}.festive .fcards{grid-template-columns:1fr}.hero .acts{justify-content:flex-start}}   /* the pill drops under the title on a phone */

/* the ticker strip's rules were deleted on 23 Sep 2026 (Nuo: "prue hates these strips, delete them everywhere!") */
/* 233s, NOT the 55s Private Hire carries - a duration is not a speed. The row travels -50% of ITS OWN width, so the
   seconds only mean something next to the row's length. Measured in Chrome at 1440px on 13 Sep 2026: Private Hire's
   row is 6,327px and covers 3,164px in 55s = 57.5 px/s; this row carries the whole dish list at 26,780px and was
   covering 13,390px in 60s = 223.2 px/s - 3.88x faster off a BIGGER number, which is why copying 55s across would
   have made it worse. 13,390 / 57.5 = 233s. If the dish list grows, this number has to be re-derived, not nudged. */

/* the site picker: every site as a big name; hover shows the room; click opens its menu */
.pick{padding:96px var(--pad) 80px;position:relative}
/* THE FOLD (29 Sep 2026, menus.js has the ruling). On a desktop the button IS the plain heading - no flower, no fold, the
   default cursor - so nothing there changes. */
.pickt{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:default;display:inline-flex;align-items:center;gap:14px;text-align:left}
.pickfl{display:none}
@media (max-width:860px){
  .pickt{cursor:pointer}
  .pick:not(.open) .sites{display:none}
  .pick:not(.open) h2.caps{margin-bottom:0}
  /* white, as asked - on Sandstone that is about 1.2:1, so the drop shadow is what outlines it */
  .pickfl{display:block;flex:none;width:24px;height:24px;background:#fff;
    -webkit-mask:url(../../assets/flower-white.png) center/contain no-repeat;mask:url(../../assets/flower-white.png) center/contain no-repeat;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));animation:pickHop 1.6s cubic-bezier(.3,.6,.3,1) infinite}
  .pick.open .pickfl{animation:none}
  /* two hops towards the words, then a rest: the direction is the instruction */
  @keyframes pickHop{0%,55%,100%{transform:translate(0,0)}14%{transform:translate(-9px,-5px)}28%{transform:translate(0,0)}40%{transform:translate(-5px,-3px)}}
}
/* .pickp went with the standfirst it styled (14 Sep 2026). The rule is removed rather than left behind: a
   selector matching nothing reads as a thing that is still there, and this file has no other paragraph in
   .pick to inherit it by accident. */
.sites{position:relative;border-top:2px solid var(--ink);padding-top:24px;display:block;text-align:justify;text-align-last:left;font-size:clamp(18px,1.9vw,34px);line-height:1.25}
.site{display:inline;white-space:nowrap;background:none;border:0;padding:0;font-family:var(--head);letter-spacing:-0.02em;font-size:inherit;line-height:inherit;color:var(--ink);cursor:pointer;transition:color .2s}
.site::after{content:"·";margin:0 .3em 0 .35em;color:#b8b1ab}
.site:last-of-type::after{content:""}
@media (hover:hover){.sites:hover .site{color:#b8b1ab}
.sites .site:hover{color:var(--ink)}
.sites .site:hover::after{color:#b8b1ab}}
.peek{position:absolute;width:260px;height:180px;object-fit:cover;border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.3);pointer-events:none;opacity:0;transform:scale(.92) rotate(-2deg);transition:opacity .25s,transform .35s var(--ease);z-index:5}
.peek.on{opacity:1;transform:none}

/* the menu panel: the site's interactive menu slides in over the page */
.panel{position:fixed;inset:0;z-index:100;display:none;background:rgba(10,8,8,.55);opacity:0;transition:opacity .3s}
.panel.on{display:block}.panel.in{opacity:1}
.panel .sheet{position:absolute;right:0;top:0;bottom:0;width:min(1100px,100%);background:var(--sand);transform:translateX(100%);transition:transform .5s var(--ease);display:flex;flex-direction:column}
.panel.in .sheet{transform:none}
.panel .bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px var(--pad);border-bottom:1px solid rgba(0,0,0,.1)}
.panel .bar .name{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;font-size:clamp(22px,2vw,28px);line-height:1}
.panel .bar .acts{display:flex;gap:8px}
.panel .bar .pill{padding:9px 16px;font-size:13px}
.panel iframe{flex:1;width:100%;border:0;background:#fff}
.panel .ptyped{flex:1;overflow:auto;padding:28px var(--pad) 48px}   /* the typed menu scrolls inside the sheet (23 Sep 2026) */
body.locked{overflow:hidden}

/* this fortnight's specials (menus-specials.js, 11 Sep 2026): a full-bleed black band between the picker and the season
   row. One line of display type, a live dot that breathes beside the dates, and a strip of tall photo cards from the
   hub's own /specials/img/ that snaps and swipes - four fit a desktop, the rest are a swipe away; a phone shows one and
   a half so the second card says "swipe". The slot is a coloured tag on the photograph in the brand's inks. On hover
   the description rises into view; tap opens the dish dialog with the places that serve it. */
.specials{background:#000;color:var(--sand);padding:88px var(--pad) 32px;overflow:hidden}   /* bottom was 64px; halved (Nuo, 11 Sep 2026: "reduce the black padding here by half") */
.specials .shd{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:34px}
.specials .shd .k{color:var(--sand);opacity:.75;margin-bottom:12px;display:inline-flex;align-items:center;gap:9px}
.specials .shd .k.live i{width:8px;height:8px;border-radius:999px;background:var(--pink);box-shadow:0 0 0 0 rgba(255,60,160,.6);animation:sp-live 2.4s ease-out infinite}
@keyframes sp-live{0%{box-shadow:0 0 0 0 rgba(255,60,160,.6)}70%{box-shadow:0 0 0 9px rgba(255,60,160,0)}100%{box-shadow:0 0 0 0 rgba(255,60,160,0)}}
.specials h2.caps{font-size:clamp(34px,4.2vw,64px);letter-spacing:-0.03em;line-height:.98;margin:0;text-wrap:balance}
/* the SPECIALS picture (Nuo, 1 Oct 2026; build_specials_title.py): its INK is the heading's full size, sized by height, width auto */
.specials h2.sptitle{line-height:0}
.specials h2.sptitle img{display:block;height:clamp(24px,2.4vw,36px);width:auto;max-width:100%}   /* smaller (Nuo, 2 Oct 2026: "make specials smaller"); was clamp(34px,4.2vw,64px) - 60px at 1440, now 35px */
.specials .shd .sub{max-width:62ch;color:rgba(242,236,233,.72);font-size:15px;line-height:1.5;margin:0 0 6px;text-align:right;text-wrap:balance}   /* two lines, as the season header below it */
/* scroll-padding MUST match the bleed (Nuo, 11 Sep 2026: "always left align the first card with the title"). The strip
   bleeds to the page edge with a negative margin and pads back to the content edge - but a mandatory snap aligns the
   first card to the SCROLLPORT's edge, inside that padding, so the card sat 40px left of the heading. scroll-padding
   moves the snap edge in to where the heading is. site-page.css's .cards had this right already. */
.specials .strip{display:flex;align-items:flex-start;gap:var(--cgap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);scrollbar-width:none;padding:6px 0 8px;margin:0 calc(-1 * var(--pad));padding-left:var(--pad);padding-right:var(--pad);-webkit-overflow-scrolling:touch}
.specials .strip::-webkit-scrollbar{display:none}
/* THE CARD IS THE SEASON GRID'S COLUMN, TO THE PIXEL (Nuo, 11 Sep 2026: "make the specials cards equal size and width
   and aligned with the autumn cards"). The strip's content box is the same width as .dcards - it bleeds by --pad and
   pads back by --pad - so a quarter of it less three gaps IS a 1fr column of repeat(4,1fr) with the same gap. Measured
   before: clamp(240px,23vw,320px) gave 316px at a 16px gap against the grid's 306px at 18px, so only the first column
   lined up (372 vs 364, 703 vs 688, 1035 vs 1011). A fifth card is still a swipe away.
   align-items:flex-start ON THE STRIP, and align-items:start on .dcards below, are the same fix for the same fault: a
   flex or grid item stretches to the tallest card in its row by default, and a <button> then CENTRES its content in
   the slack, so a card with a one-line "where" sat 7px (here) and 27px (season row) lower than its neighbour with a
   three-line one. Not stretching leaves no slack to centre in; every picture starts on the same line. (The season
   card lost its where-line on 13 Sep 2026; its descriptions still run one or two lines, so the rule still earns its place.) */
.specials .sp{flex:0 0 calc((100% - 3 * var(--cgap)) / 4);scroll-snap-align:start;display:block;text-align:left;background:transparent;border:0;padding:0;color:var(--sand);cursor:pointer;border-radius:14px;transition:transform .5s var(--ease)}
@media (hover:hover){.specials .sp:hover{transform:translateY(-6px)}}
.specials .sp .pic{position:relative;display:block;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#161412}
.specials .sp .pic img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 1s var(--ease)}
@media (hover:hover){.specials .sp:hover .pic img{transform:scale(1.07)}}
.specials .sp .pic.noimg img{display:none}
/* 11px, the floor for a label people read (was 10). White reads on Neon Blue (7.3:1) and not on Neon Orange (2.95:1) or Neon
   Pink (3.3:1) - measured 13 Sep 2026 - so those two carry black, as the dessert chip and the Christmas page already do
   (black on the orange is ~7.4:1, on the pink ~5.3:1). V2 slide 42 approves white on orange; accessibility beats the table. */
.specials .sp .type{position:absolute;left:12px;top:12px;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.12em;padding:6px 10px;border-radius:999px;color:#fff}
.specials .type.brunch{background:var(--orange);color:var(--ink)}.specials .type.lunch{background:var(--blue)}.specials .type.snack{background:var(--pink);color:var(--ink)}.specials .type.dessert{background:var(--dgreen);color:var(--ink)}
.specials .sp .body{display:block;padding:14px 4px 0}
.specials .sp .body b{display:block;font-family:var(--head);font-weight:400;letter-spacing:-0.02em;font-size:18px;line-height:1.15}
.specials .sp .body .d{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:rgba(242,236,233,.7);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}
.specials .sp .body .where{display:block;margin-top:8px;font-family:var(--head);text-transform:uppercase;font-size:10px;letter-spacing:.1em;color:rgba(242,236,233,.55)}
.specials .sp:focus-visible{outline:3px solid var(--sand);outline-offset:4px}

/* the season (menus-season.js, 11 Sep 2026): a row of dish cards between the picker and the gallery, a dialog for
   the story. Four across on a desktop, two on a phone. The card's picture is the Bible's page render (Nuo's call;
   swappable per dish in the data file); with no file the .pic shows its ink tile, so the row is never a row of
   broken images. The dialog is the booking dialogs' shape so the two feel like one family, and motion.css gives it
   the same @starting-style entrance. */
.season{padding:0 var(--pad) 88px}
/* the season has no top padding of its own because a sand section above it (the picker) already carries 80px at its
   foot. The black band carries none on the sand side, so when it is the neighbour the heading sat on the black edge
   (Nuo, 11 Sep 2026: "text for autumn is too close to the black border"). 64px is my number - the band's own heading
   sits 88px below its top edge, and this reads as the same rhythm without matching it. Sibling selector, not a flat
   padding-top: with no live period the band is not drawn and the picker's 80px would be doubled. */
.specials + .season{padding-top:64px}
.season .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:26px}
.season .hd .sub{max-width:68ch;color:#4a4643;font-size:15px;margin:0;text-align:right;text-wrap:balance}   /* two lines, balanced (Nuo, 11 Sep 2026) */
.dcards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--cgap);align-items:start}   /* start, not stretch: see .specials .sp above */
.dcard{display:block;text-align:left;background:transparent;border:0;padding:0;border-radius:14px;cursor:pointer;transition-delay:var(--d,0s)}
/* --tint, NOT --ink: the page's --ink is its text colour (#000), and a card that set --ink to orange would have
   recoloured everything inside it that reads the page token */
.dcard .pic{position:relative;display:block;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--tint,#ddd)}
.dcard .pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .9s var(--ease)}
@media (hover:hover){.dcard:hover .pic img{transform:scale(1.06)}}
.dcard .pic .ink{display:none;position:absolute;inset:0;padding:18px;color:var(--sand);font-size:clamp(20px,1.6vw,26px);align-items:flex-end;background:var(--tint)}
.dcard .pic.noimg img{display:none}.dcard .pic.noimg .ink{display:flex}
.dcard .body{display:block;padding:12px 4px 0}
.dcard .body b{display:block;font-family:var(--head);font-weight:400;letter-spacing:-0.02em;font-size:17px;line-height:1.2}
/* the short description: two lines and never a third, whatever the width (Nuo, 11 Sep 2026: "max 2 lines") */
.dcard .body .d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font-size:14px;line-height:1.45;color:#2b2926;text-wrap:pretty}
/* THE TEXT IS ON THE PHOTOGRAPH (Nuo, 25 Sep 2026: "move the text for these cards into the images in white font at the bottom;
   only the dish name should be displayed by default, the description only displays when the mouse hovers over that card").
   Interviewed: the name in 13px tracked caps (the tile labels' style); a soft bottom gradient always, so white reads on a
   white plate; on a coarse pointer the name alone - the description is in the dialog a tap opens. The .body markup is the
   same; it is positioned into .pic's box, which is why .dcard is position:relative and .body sits inside the 4:5 rounded
   corner. The description unfolds the way Book does on a tile (grid-template-rows 0fr -> 1fr), so nothing jumps. */
.dcard{position:relative}
.dcard .body{position:absolute;left:0;right:0;bottom:0;padding:48px 16px 14px;border-radius:0 0 14px 14px;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.66));pointer-events:none}
.dcard .body b{font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1.25;color:#fff}
.dcard .body .d{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;color:rgba(255,255,255,.92);font-size:13px;line-height:1.4;-webkit-line-clamp:none;transition:grid-template-rows .35s ease,opacity .3s ease,margin-top .35s ease}
.dcard .body .d{overflow:hidden}
@media (hover:hover){.dcard:hover .body .d,.dcard:focus-visible .body .d{grid-template-rows:1fr;opacity:1;margin-top:6px}}
.dcard .body .d>span{min-height:0;display:block}
@media (pointer:coarse){.dcard .body .d{display:none}}
/* no .dcard .where rule: the season card carries no where-line since 13 Sep 2026 (Nuo) - the places are in the dialog
   (#dishWhere) only. The specials card (.specials .sp .body .where, above) still has one. */
/* a place's name in a where-line is hoverable (footer.js DG_PEEK shows its photograph): the dotted rule is the only cue,
   and only where a hover exists */
@media (hover:hover) and (pointer:fine){.where .pk,#dishWhere .pk{text-decoration:underline dotted;text-decoration-color:currentColor;text-underline-offset:3px;text-decoration-thickness:1px}}
.dcard:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
dialog#dish{position:fixed;inset:0;margin:auto;border:0;padding:0;border-radius:16px;width:min(820px,94vw);max-height:92vh;max-height:92dvh;overflow:auto;background:var(--sand);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog#dish::backdrop{background:rgba(0,0,0,.55)}
dialog#dish .hd{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 10px}
dialog#dish .hd b{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;font-size:clamp(20px,2vw,26px);line-height:1.1}
dialog#dish .x{border:0;background:transparent;font-size:22px;line-height:1;padding:4px 8px;cursor:pointer;color:inherit}
dialog#dish .dbody{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:6px 22px 24px}
dialog#dish .pic{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#ddd}
dialog#dish .pic img{width:100%;height:100%;object-fit:cover}
dialog#dish .pic .ink{display:none;position:absolute;inset:0;padding:18px;color:var(--sand);font-size:26px;align-items:flex-end;background:var(--tint,#000)}
dialog#dish .pic.noimg img{display:none}dialog#dish .pic.noimg .ink{display:flex}
dialog#dish .txt p.body{font-size:16px;line-height:1.55;text-wrap:pretty}
dialog#dish .txt p[hidden]{display:none}

/* the gallery: one dense mosaic, name on hover, lightbox on click */
.gal{padding:0 var(--pad) 96px}
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:210px;grid-auto-flow:dense;gap:10px}
.tile{position:relative;overflow:hidden;border-radius:10px;background:#ddd;cursor:zoom-in;transition-delay:var(--d,0s)}
.tile.big{grid-column:span 2;grid-row:span 2}.tile.wide{grid-column:span 2}.tile.tall{grid-row:span 2}
.tile img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .9s var(--ease)}
@media (hover:hover){.tile:hover img{transform:scale(1.08)}}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 12px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.65));color:#fff;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
@media (hover:hover){.tile:hover .cap{opacity:1;transform:none}}
.lb{position:fixed;inset:0;z-index:110;background:rgba(10,8,8,.94);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.lb.on{display:flex}.lb.in{opacity:1}
.lb img{max-width:92vw;max-height:86vh;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb .x,.lb .arrow{position:absolute;color:#fff;background:rgba(0,0,0,.35);border:1.5px solid rgba(255,255,255,.7);border-radius:999px;width:48px;height:48px;display:grid;place-items:center;font-size:20px}
.lb .x{top:20px;right:20px}.lb .arrow{top:50%;transform:translateY(-50%)}.lb .arrow.prev{left:20px}.lb .arrow.next{right:20px}
.lb .cap{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#fff;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.08em}

/* allergens and calories: quiet, at the foot */
.allergens{padding:0 var(--pad) 90px}
.allergens .box{border-top:1px solid rgba(0,0,0,.18);padding-top:28px;display:grid;grid-template-columns:3fr 1fr;gap:40px;color:#4a4643;font-size:14px;line-height:1.5}
.allergens p{hyphens:auto;-webkit-hyphens:auto}
.allergens h3{font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--ink);margin-bottom:10px}
.allergens p{margin-bottom:10px;text-wrap:pretty}
.allergens a{text-decoration:underline;text-underline-offset:3px}
/* ALLERGIES, THEN CALORIES, CENTRED (Nuo, 3 Nov 2026: "middle align these, the allergies first, then calories") */
.allergens .box{grid-template-columns:minmax(0,1fr);gap:28px;text-align:center}
.allergens p{margin-inline:auto}   /* layout.css's 66ch line length kept, the column centred under its heading */

/* the footer's rules live in footer.js only (11 Sep 2026) - a per-page copy sat here and in four other stylesheets */

.site:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}

@media (max-width:1100px){.mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:170px}}
@media (max-width:860px){
  :root{--nav:60px;--pad:20px;--cgap:12px}body{font-size:16px}   /* one step down the scale on a phone */
  .nav ul{display:none}.nav .book{padding:10px 16px;font-size:13px}
  .hero{min-height:520px}.hero .copy{bottom:44px;flex-direction:column;align-items:flex-start}
  .pick{padding:56px var(--pad) 48px}.peek{display:none}
  /* one location per row on a phone (Nuo, 11 Sep) */
  .sites{font-size:17px;line-height:1.2;text-align:left;padding-top:8px}
  .site{display:block;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.12)}.site::after{content:"";margin:0}
  .panel .sheet{width:100%}.panel .bar{padding:12px var(--pad);flex-wrap:wrap}.panel .bar .name{font-size:18px}   /* "The Portrait Pavilion by Audrey Green" beside two pills wrapped to four lines */
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px;gap:8px}.tile .cap{opacity:1;transform:none;font-size:11px;letter-spacing:.03em}   /* a dish name: the 11px floor (was 9) */
  .specials{padding:56px var(--pad) 20px}.specials .shd{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:22px}.specials .shd .sub{text-align:left;font-size:14px}   /* bottom 40 -> 20, the desktop halving */
  .specials + .season{padding-top:40px}.festive ~ .gal{padding-top:40px}
  .specials .sp{flex-basis:68vw}.specials .sp .body b{font-size:16px}   /* one and a half cards across: the half says "swipe" - so on a phone the strip's card is deliberately NOT the grid's column */
  .season{padding-bottom:56px}.season .hd{flex-direction:column;align-items:flex-start;gap:10px}.season .hd .sub{text-align:left;font-size:14px}
  .dcards{grid-template-columns:1fr 1fr}.dcard .body b{font-size:15px}   /* gap: --cgap, 12px here */
  dialog#dish .dbody{grid-template-columns:1fr;gap:16px}dialog#dish .pic{aspect-ratio:4/3}
  .allergens .box{grid-template-columns:1fr;gap:20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero img.bg,.hero h1 .l span,.hero .pill,.hero .cue{animation:none}
  .hero h1 .l span{transform:none}.hero .pill{opacity:1}
  .reveal{opacity:1;transform:none;transition:none}
  .peek,.tile img,.dcard .pic img,.specials .sp .pic img,.specials .sp{transition:none}
  .specials .shd .k.live i{animation:none}
}

/* == PRUE PASS 23 SEP 2026 == - the shared rules that every first-parse stylesheet carries (the same text in each; the
   harness audit_prototype_caps.js asserts the marker is in at least one first-parse sheet of every page).
   1. ALL CAPS HEADINGS. Prue, 22 Sep 2026: "I like the capital font a lot more than the other font... wherever we can
      get more caps"; "I reckon all this should be caps". REVERSES the 11 Sep Title Case decision (page.css TYPE note:
      "dense caps everywhere is the strongest corporate-chain signal"). Her judgement, recorded with the argument it
      overruled in _Supporting/docs/2026-09-23-prototype-prue-tom-pass.md. Typed copy stays Title Case and the
      transform sets the caps (brand-voice rule 9). Body, buttons, table headers, tile taglines are untouched; the
      expander labels (Menu, What's On, FAQ) are headings and take it. Tracking -0.03em between the deck's print -7%
      and the old -0.02em; per-element rules with more specificity keep their own.
   2. BOOK IS A BUTTON, NOT A CAPSULE. Prue, 22 Sep: "book a table... it's too circular"; "maybe this can just be
      Book". Label "Book" everywhere; 8px corners on the Book controls only - the deck's web button (slide 79) is
      still a pill and every other pill keeps its 999px.
   3. GREEN PAGES LINK. Nuo, 23 Sep, twice. First "something more visible like pastel green", built as dark green text on
      a Dust Green band; then, on seeing it: "do not show link to green pages like this! Make it look the same as other
      links, only when the mouse hovers over it the font should become pastel green". So: AT REST IDENTICAL to its
      neighbours; ON HOVER (and keyboard focus) the text and the underline bar go Dust Green #C3E1CC. Dust Green as text
      on the solid Sandstone bar is 1.2:1 - his ruling, for a transient hover state, recorded. The footer and the phone
      drawer do the same (footer.js). The nav's per-link bar colour is inline (DG_NAVBAR), so the ::after rule below
      carries an attribute selector to outrank it.
   4. ACCENT SWITCH - RETIRED 12 Oct 2026 (Nuo, audit decision 12). The ?accent=blue|neon|dark trial of 23 Sep and its
      html[data-accent] rules are gone; no pick was recorded, so every page keeps the accent its own sheet sets. */
h1,h2,h3,.caps,.xp>summary h2,.xp>summary h3{text-transform:uppercase}
h1,h2,h3,.caps{letter-spacing:-0.03em}
.nav .book,button.book,.card .bk:not(.walk),.mapcard .mcbk,.pill[data-book]{border-radius:8px}
.nav ul li a[href*="green-pages"]:hover,.nav ul li a[href*="green-pages"]:focus-visible{color:#C3E1CC}
.nav ul li a[href*="green-pages"]::after{background:#C3E1CC}
/* 5. PASTEL SURFACES - BUILT AND REVERTED THE SAME AFTERNOON (23 Sep 2026). Section grounds in Dust Green / Dust Blue / Dust
      Orange / Dust Pink / Peggy Jean Green went on the home page and five section pages at 15:00; Nuo, on the live page: "I
      fucking hate the pastel background colours here! revert back to the same background colour for the entire page!" So:
      one ground, Sandstone, everywhere. The idea is Prue's liking for the pastel range; if it comes back it is a per-page
      class and a rule here, not a redesign. */

/* == E9 ONE BUTTON (Nuo, 24 Sep 2026, elegance pass) == every button in copy on the prototype is the same object: outline,
   8px corners, 13px caps in the head face, a 1.5px rule, no fill. Colour is the context's through currentColor (ink on
   Sandstone, white on a photograph); the tinted and filled variants (.fill .blue .sand .light) lose their tint. Floating
   chrome - the Map fab, dialog close buttons, the tour's Close - is not a button in copy and keeps its shape. The same
   text sits in every first-parse stylesheet, cards.css and collection.css; audit_prototype_caps.js checks each carries it. */
.pill,.nav .book,button.book,.card .bk:not(.walk),.mapcard .mcbk,.place .go,.place .bk,.ev .go,.enq .chips button,.chips button,.guide button,.railnav button{border-radius:8px;font-family:var(--head);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;border-width:1.5px;border-style:solid;background:transparent;box-shadow:none}
.pill.fill,.pill.blue,.pill.sand,.pill.light,.pill.dark,.nav .book,.card .bk:not(.walk),.place .go,.place .bk{color:inherit;border-color:currentColor;background:transparent}
.nav .book{color:#fff;border-color:currentColor}.nav.solid .book{color:var(--ink,#000);border-color:currentColor}   /* the bar's Book: white over a photograph, ink on the Sandstone bar - the one place inherit is wrong (the bar's own colour is ink while its links are white) */
@media (hover:hover){.pill:hover,.nav .book:hover,.card .bk:not(.walk):hover{background:transparent;color:inherit;border-color:currentColor;opacity:.7}}
/* == BUTTONS: BLACK, BLUE ON HOVER 3 OCT 2026 == Nuo: "on all the pages, make all the buttons show as black font with black border, turn
   them blue when the mouse hovers over them; except the art page on black: white, neon green on hover; and the christmas page on
   black: white, neon orange on hover". REVERSES the 2 Oct orange-accent block (kept above as the record). Shape, size, caps and no
   fill stand (E9). Light ground: ink rule and label; on hover Neon Orange #F36F23 (Nuo, 3 Oct 2026, 11:45 - was Neon Blue from that morning). A button over a photograph, on a card or on a dark
   bar stays white. art.css and christmas.css set --btn / --btn-hover on body for their black grounds. */
body .pill:not(.light),body .pill.fill,body .pill.blue,body .pill.dark,body .panel.dg .pill,body button.book,body .nav.solid .book,body .mapcard .mcbk,body .ev .go,body .enq .chips button,body .chips button,body .guide button,body .railnav button,body .cats .mchip,body .cats .cpill:not(.here){color:var(--btn,#000);border-color:var(--btn,#000)}   /* `body` prefix: out-ranks a page's own two-class pill rules (About's .pledge .bc a.pill, .lam a.pill) so one rule holds everywhere */
.nav:not(.solid) .book,.place .go,.place .bk,.hero .pill,.card .bk:not(.walk),.pill.light{color:#fff;border-color:currentColor}
@media (hover:hover){body .pill:hover,body .nav.solid .book:hover,body button.book:hover,body .cats .mchip:hover,body .cats .cpill:not(.here):hover,body .gbtn:hover{color:var(--btn-hover,#F36F23);border-color:var(--btn-hover,#F36F23);opacity:1;background:transparent}
.nav:not(.solid) .book:hover,.place .go:hover,.place .bk:hover,.hero .pill:hover,.card .bk:not(.walk):hover,.pill.light:hover{color:var(--btn-hover,#F36F23);border-color:var(--btn-hover,#F36F23)}}
/* PHONE, 27 Sep 2026 (Nuo: "show both links on the same line, reduce size of buttons if needed"): Christmas menus and Choose a
   location side by side under the title, a size down so the pair fits a 360px screen; still 24px+ tall (the tap floor). */
@media (max-width:760px){
  .hero .acts{flex-wrap:nowrap;gap:8px;max-width:100%}
  .hero .acts .pill{padding:9px 12px;font-size:11px;letter-spacing:.06em;white-space:nowrap}
  .hero .acts .pill.xmas{gap:7px}.hero .acts .pill.xmas i{width:7px;height:7px}
}
/* the dish cards' descriptions keep an ingredient or a bracket on one line too (typed.js descHtml, 27 Sep 2026) */
.body .d .nw{white-space:nowrap}

/* == SPECIALS: THE NAME ON THE PHOTOGRAPH 27 SEP 2026 == menus.js spCard. The name sits on the picture in white over a dark fade; the
   description and the places fold open under it on hover or keyboard focus (a 0fr -> 1fr row, so it rises to its own height).
   A phone (no hover) shows the name alone; a tap opens the dish as before. */
.specials .sp .pic .body{position:absolute;left:0;right:0;bottom:0;padding:56px 16px 16px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.78) 70%);color:#fff;z-index:1}
.specials .sp .pic .body b{color:#fff;font-size:20px}
.specials .sp .pic .more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s var(--ease),opacity .3s ease}
.specials .sp .pic .more>span{min-height:0;overflow:hidden}
.specials .sp .pic .body .d{color:rgba(255,255,255,.88)}
.specials .sp .pic .body .where{color:rgba(255,255,255,.72)}
@media (hover:hover){.specials .sp:hover .pic .more,.specials .sp:focus-visible .pic .more{grid-template-rows:1fr;opacity:1}}
@media (max-width:860px){.specials .sp .pic .body b{font-size:16px}}
/* == SPECIALS FLY IN FROM THE LEFT 27 SEP 2026 == Nuo: "also animate the specials cards like cards flying in from the left". As the
   strip comes into view each card is thrown in from off the left edge with a tilt, overshoots a little and settles, 140ms after
   the one before (--d, menus.js). Fill BACKWARDS only, so the hover lift still works once a card has landed. Reduced motion: shown. */
@media (prefers-reduced-motion:no-preference){
  .specials .sp.reveal{opacity:0;transform:none;transition:transform .5s var(--ease)}
  .specials .sp.reveal.in{opacity:1;animation:spFly .95s cubic-bezier(.2,.8,.2,1) calc(var(--d, 0ms) * 2) backwards}
  @keyframes spFly{
    0%{opacity:0;transform:translateX(-110vw) rotate(-10deg)}
    65%{opacity:1;transform:translateX(18px) rotate(1.5deg)}
    85%{transform:translateX(-4px) rotate(-.4deg)}
    100%{opacity:1;transform:none}}
}
/* the specials' passion-selling bullets in the dish dialog (27 Sep 2026): a short list, a neon-orange dot each */
#dish .sell{list-style:none;margin:6px 0 0;padding:0}
#dish .sell li{position:relative;padding-left:18px;margin:0 0 6px;font-size:16px;line-height:1.45}
#dish .sell li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:#F36F23}
/* == SPECIALS ON THE SANDSTONE 28 SEP 2026 == Nuo: "don't use black background for the specials section, use the same sandstone
   background like the rest of the menu page". The band is the page's own ground and ink now; the cards keep their photographs, with
   the name in white on them. */
.specials{background:var(--sand);color:var(--ink);padding-top:64px}
.specials .shd .k{color:var(--ink);opacity:.7}
.specials .sp{color:var(--ink)}
.specials .sp .pic{background:#e6ded8}
.specials .sp:focus-visible{outline-color:var(--ink)}
.specials + .season{padding-top:40px}
/* == SPECIALS NAMES AS THE AUTUMN NAMES 28 SEP 2026 == Nuo: "show the dish names for specials in all caps and same size as autumn
   dishes". The specials name takes the season card's type exactly (.dcard .body b above): 13px tracked caps, 15px on a phone.
   Was 20px / 16px sentence case. If the season name changes size, change these two with it. */
.specials .sp .pic .body b{font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1.25}
@media (max-width:860px){.specials .sp .pic .body b{font-size:15px}}
/* == THE LIVE DOT IS A FLOWER 28 SEP 2026 == Nuo: "turn the pink dot into a pulsating neon pink flower". The site's own
   flower-pink.png (Neon Pink #FF3CA0, the file every other prototype page uses - PNG, not the SVG, which WebKit will not
   paint) at 16px so the six petals read; it swells and turns on the same 2.4s beat the dot had. NO GLOW (Nuo, 28 Sep 2026:
   "make the flower neon pink and not with this ugly glow!") - the first cut's drop-shadow halo washed the ink out to a
   pale pink at this size. Solid ink, no filter, no opacity. Reduced motion: the flower, still. */
.specials .shd .k.live i{width:16px;height:16px;border-radius:0;box-shadow:none;animation:none;filter:none;
  background:url(../../assets/flower-pink.png) center/contain no-repeat}
@media (prefers-reduced-motion:no-preference){
  .specials .shd .k.live i{animation:sp-flower 2.4s ease-in-out infinite}
  @keyframes sp-flower{
    0%,100%{transform:scale(.9) rotate(0deg)}
    50%{transform:scale(1.15) rotate(30deg)}}
}
/* == SPECIALS TWO ACROSS ON A PHONE 28 SEP 2026 == Nuo: "display the specials on mobile 2 side by side, same as the autumn menu but
   keep the animation of flying in from the left". The strip stops being a swipe on a phone and becomes the season grid's two
   columns (.dcards: 1fr 1fr, gap --cgap), so the two sections line up column for column; the 13 Sep "one and a half across says
   swipe" rule is reversed. An odd last card stays half width, in the left column (his answer). The fly-in above is untouched -
   each card still has its own observer and is thrown in from off the left edge, which .specials' overflow:hidden clips. */
@media (max-width:860px){
  .specials .strip{display:grid;grid-template-columns:1fr 1fr;gap:var(--cgap);align-items:start;overflow:visible;scroll-snap-type:none;margin:0;padding:6px 0 8px}
  .specials .sp{flex:none;min-width:0;scroll-snap-align:none}
}
/* == THE LOCATIONS, EVENLY SPACED 29 SEP 2026 == Nuo: "always right align the last site name in the last row, Ziggy Green, and distribute
   the space evenly between all site names". Justified text spread the space INSIDE names too ("Glamarama   Green") and left the last row
   ragged. On a desktop the list is now a wrapping row of whole names with the space BETWEEN them: every row runs edge to edge, the last
   row included, so the last name always ends flush right. A last row of one name would sit left under space-between, so menus.js marks
   that case (.solo) and it is pushed right. The phone keeps one name a line. */
@media (min-width:861px){
  .sites{display:flex;flex-wrap:wrap;justify-content:space-between;text-align:left;text-align-last:auto}
  .sites .site{display:block}
  .sites .site.solo{margin-left:auto}
  /* THE DOT SITS IN THE MIDDLE OF ITS GAP (Nuo, 29 Sep 2026: "there should be equal space before and after all the dots"). Attached to the
     name before it, the dot took a fixed .35em on its left while space-between put all the free space on its right. So the dot leaves
     the flow - absolute, so it cannot move a name - and menus.js puts it at half the measured gap (--half); a name that ends its row has
     no gap after it and shows no dot (.eol). 1.1em is the least gap, so a dot always has room. */
  .sites{column-gap:1.1em}
  .sites .site{position:relative}
  .sites .site::after{position:absolute;top:0;left:calc(100% + var(--half, .55em));margin:0;transform:translateX(-50%);pointer-events:none}
  .sites .site.eol::after{content:""}
}

/* == THE TAGLINE 30 SEP 2026 == index.html's .hero .hline, the same rules (menus.js has the ruling). */
.hero .hline{position:absolute;left:var(--pad);right:var(--pad);bottom:64px;z-index:3;margin:0;text-align:center;font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:clamp(18px,1.6vw,24px);letter-spacing:.06em;line-height:1.3;color:#fff;text-wrap:balance}
.hero .hline .tg-w{white-space:nowrap}
.hero .hline.tg-arm .tg-l{opacity:0}
.hero .hline.tg-in .tg-l{animation:tgIn .5s ease var(--d) backwards}
@keyframes tgIn{from{opacity:0}to{opacity:1}}
/* (the tagline's colour wave and its halo were deleted 12 Oct 2026 - Prue does not like the glow; the letters still arrive white) */
@media (max-width:860px){.hero .hline{bottom:56px;font-size:18px;letter-spacing:.04em}}
/* the phone fold's flower next to "Choose a location" is Neon Orange, the Menus accent (Nuo, 30 Sep 2026: "on mobile, make the flower next to choose a location orange"); was white */
@media (max-width:860px){.pickfl{background:#F36F23}}

/* == THE LANDING PAGE'S CARD GAP 30 SEP 2026 == (Nuo, after an interview: "for all the dish cards, use the same dynamic spacing as the site cards on the landing page - apply this to all the similar cards on all pages"). Above 1440px the gap between cards grows with the screen, +1px per 15px, to 48px at 1920 - index.html's --gw; never below the gap the grid already had. Phones unchanged. */
@media (min-width:1441px){:root{--cgap:clamp(18px, calc(16px + (100vw - 1440px) / 15), 48px)}}

/* == THE MENU BY CATEGORY 2 OCT 2026 == menus.js catsHtml explains. The rows are ../expand.css's .xp (border, plus, 22-26px caps
   titles); this block only sets the section's room and what sits inside a row: the typed menu at the collection's width, one
   line of plain copy, and the places as chips in the E9 button shape with the page accent. The .pick rules above are left as
   the record of the picker and match nothing now. */
.cats{padding:40px 0 64px}
/* THE PILLS (2 Oct 2026, 16:40 - menus.js catsHtml): the About page's chapter row, here as the page's own tab row, sticky under the nav */
.cats .cpills{position:sticky;top:var(--nav);z-index:45;display:flex;justify-content:center;gap:6px;padding:10px var(--pad);background:var(--sand);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cats .cpills::-webkit-scrollbar{display:none}
.cats .cpill{flex:none;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.06em;padding:10px 16px;border-radius:999px;background:rgba(242,236,233,.85);border:1px solid rgba(0,0,0,.14);color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s;min-height:24px}
@media (hover:hover){.cats .cpill:hover{border-color:var(--ink)}}
.cats .cpill:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cats .cpanel{padding:36px var(--pad) 0;scroll-margin-top:calc(var(--nav) + 72px)}   /* 72, was 64: the hand-written row is 44px buttons in 10px padding (16 Oct 2026) */
.cats .cpanel[hidden]{display:none}
.cats .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
@media (max-width:860px){.cats .cpills{justify-content:flex-start;padding:8px var(--pad)}.cats .cpanel{padding-top:24px}}
.cats .ctyped{margin:4px 0 28px}
.cats .ctyped .tm{max-width:980px;margin:0 auto}
.cats .cline{font-size:16px;line-height:1.5;color:#3f3c39;margin:0 0 14px}
.tm-var{margin-left:2px;color:var(--tm-orange,#F36F23)}   /* a price that varies a little by place */
@media (max-width:860px){.cats{padding:40px 0 40px}.cats .cline{font-size:15px}}

/* The line sits in the 980px column of the card above (4 Oct 2026); the logos below are centred in the same column. The 4 Oct
   full-width buttons, their balanced rows and the phone's sideways row went on 16 Oct 2026 with the words (block below). */
.cats .cline,.cats .mchips{max-width:980px;margin-left:auto;margin-right:auto}

/* == HAND-WRITTEN CATEGORIES 16 OCT 2026 == (Nuo: "change all the buttons for menu categories to Chorine font"; interviewed: the six
   at the top only, written by hand like the Book buttons at the small size, no box). footer.js DG_HANDBTN dresses #cpills > .cpill
   and its CSS takes the box away; this sets the room and the chosen one: the Menu orange with its line drawn and kept (straight since 21 Oct 2026), where it
   was black-filled. The tabs inside the orange card are not these and are unchanged (his answer). */
.cats .cpills{gap:8px}
.cats .cpill{background:transparent;border:0;border-radius:0;min-height:44px}   /* the hand-written button's 44px tap area: .cats .cpill's 24px above out-ranks footer.js .dghw-b (16 Oct 2026, measured 35px at 390) */
.cats .cpill.here,body .cats .cpill.here{color:#F36F23;background:transparent}
.cats .cpill.here .dghw{--hwul:0}
/* LARGER (Nuo, 16 Oct 2026, with a screenshot of the six: "use larger font for these on the menu page"): the site's main hand-written
   size, footer.js's clamp(28px, 2.4vw, 36px) - 35px at 1440 - in place of the small 24px; 28px on a phone. My pick, not his number.
   ON A PHONE THEY WRAP, centred: at 28px the six are ~460px wide and the row scrolled sideways at 390 with Kids off the screen
   (measured 16 Oct 2026); two rows of 44px taps instead, the sticky bar ~100px tall. */
.cats .cpill.dghw-b{--hw:clamp(28px,2.4vw,36px)}
@media (max-width:860px){.cats .cpill.dghw-b{--hw:28px}.cats .cpills{flex-wrap:wrap;justify-content:center;row-gap:0;column-gap:10px;overflow-x:visible}}
.cats .cpill:focus-visible{outline:2px dashed currentColor;outline-offset:4px}

/* == THE LOCATION ROW IS THE SITES' LOGOS 16 OCT 2026 == (Nuo: "change the location buttons to site logos without borders"; his
   answers are in menus.js chipsHtml): no border, no fill; the landing map chip's 14px letter body; black, the Menu orange on hover,
   focus or tap - two slots cross-fade, because a drawn canvas keeps its colour; centred rows with even gaps on every screen, a phone
   wrapping too; a small place line, the map chip's own type, under a logo that does not say where it is (the Beany cafes, DAISY.). */
.cats .mchips{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 30px;margin-top:0;margin-bottom:0;padding:0}
.cats .mchip{flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:44px;min-width:44px;padding:6px 4px;border:0;border-radius:0;background:transparent;color:var(--ink);cursor:pointer;font:inherit}
.cats .mchip .mk{position:relative;display:block;line-height:0}
.cats .mchip .markslot{display:block;line-height:0;transition:opacity .25s ease}
.cats .mchip .markslot canvas{display:block}
.cats .mchip .mk-o{position:absolute;left:0;top:0;opacity:0}
.cats .mchip .mq{font-family:var(--head);font-size:11px;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;color:inherit;transition:color .25s ease}
@media (hover:hover){.cats .mchip:hover .mk-o{opacity:1}.cats .mchip:hover .mk-b{opacity:0}}
.cats .mchip:active .mk-o,.cats .mchip:focus-visible .mk-o{opacity:1}
.cats .mchip:active .mk-b,.cats .mchip:focus-visible .mk-b{opacity:0}
body .cats .mchip:active,body .cats .mchip:focus-visible{color:#F36F23}
.cats .mchip:focus-visible{outline:2px solid #F36F23;outline-offset:4px}
@media (max-width:860px){.cats .mchips{gap:12px 22px}}

/* == SHARP EDGES 16 OCT 2026 == (Nuo: "use sharp edges for all the dish cards and images on this page, keep all the animations";
   interviewed: the specials and New for Autumn cards, the gallery and the photo viewer, the dish pop-ups and their photos - and the
   place photograph that rises from a name inside a dish pop-up. The orange menu card keeps its rounded frame, like the printed menu
   (his answer). Corners only: every transition and keyframe is untouched. The dish card that flips out of a name (typed.css .tm-dlg)
   is rounded on the site pages still - menus.css is this page's alone - so its rules here carry `dialog` to out-rank typed.css,
   which loads after this file; the place photograph is footer.js's, injected later, hence `body`. */
.specials .sp,.specials .sp .pic,.dcard,.dcard .pic,.dcard .body,.tile,.lb img,dialog#dish,dialog#dish .pic{border-radius:0}
dialog.tm-dlg,dialog.tm-dlg .tm-dbody,dialog.tm-dlg .tm-pic{border-radius:0}
body .dgpeek{border-radius:0}
/* PRODUCE, SHORT (20 Oct 2026): the line at the foot of the page and the way to the Produce page */
.produce-line{padding:80px var(--pad) 90px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;border-top:1px solid rgba(0,0,0,.12);margin-top:40px}
.produce-line p{margin:0;font-family:var(--head);font-weight:400;font-size:clamp(22px,2.2vw,32px);line-height:1.2;max-width:28ch}
.produce-line a{font-size:15px;text-decoration:underline;text-underline-offset:3px}

/* ---- THE FOUR MENU TILES (Georgia's video review via Nuo, 4 Nov 2026 ('All of it'): "a really beautiful couple of like images with
   text over them for brunch, lunch, dinner, drinks"; reference supernormal.net.au/menu - a clean image, then the menu). They replace
   the six hand-written category buttons of 16 Oct 2026. Four across, square-cornered, the name in white caps on a soft foot shade;
   two by two on a phone. The chosen tile keeps a thin ink line under it. The menu below fades in (no flight, no spring). ---- */
.cats .ctiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:0 var(--pad);margin:0}   /* full width, --pad the gutter (Nuo, 20 Oct 2026) */
.cats .ctile{position:relative;display:block;aspect-ratio:3/4;max-height:78vh;width:100%;overflow:hidden;padding:0;margin:0;border:0;border-radius:0;background:#e4dcd7;cursor:pointer;color:#fff;font:inherit;text-align:left}
.cats .ctile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease,opacity .4s ease}
.cats .ctile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.42) 100%);pointer-events:none}
.cats .ctile .ct-l{position:absolute;left:20px;bottom:18px;z-index:1;font-family:var(--head);font-size:clamp(20px,1.8vw,28px);letter-spacing:.04em;text-transform:uppercase;line-height:1;color:#FFFFFF}
@media (hover:hover){.cats .ctile:hover img{transform:scale(1.03)}}
.cats .ctile.here{outline:2px solid var(--ink);outline-offset:4px}
.cats .ctile:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}
@media (max-width:760px){.cats .ctiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cats .ctile .ct-l{left:14px;bottom:12px;font-size:20px}}
.cats .cpanel.fade{animation:mnFade .35s ease-out both}
@keyframes mnFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.cats .cpanel.fade{animation:none}.cats .ctile img{transition:none}}
.cats .kidsnote{max-width:980px;margin:0 auto;font-size:15px;line-height:1.5;color:#3f3c39;text-align:center}

.cats .ctile.reveal{transform:none}   /* a fade only, no rise (4 Nov 2026) */

/* ALLERGIES AND CALORIES, NARROWER (Nuo, 6 Nov 2026, 18:36: "reduce the width of this section", his marks at about 70% of a 1,887px
   window): the words sit in a centred column at most 1,300px wide; the rule above stays full width. A ruling on this
   section only - the full-width text rule (2 Oct 2026) stands elsewhere. */
/* ALLERGIES AS WIDE AS CALORIES (Nuo, 6 Nov 2026, 20:30: "restrict the width of the allergies section to be same as for the calories
   section"; the 1300px cap of earlier that evening was wrong): one column sized by the Calories text alone - the Allergies block
   contributes no width (contain:inline-size) and wraps inside it; never wider than the page */
html body .allergens .box{grid-template-columns:minmax(0,max-content);justify-content:center}
html body .allergens .box>div{max-width:none;width:auto;margin-inline:0}
html body .allergens .box>div:first-child{contain:inline-size}
html body .allergens .box>div p{max-width:none}

/* the kids note's site names are links (Nuo, 6 Nov 2026, 19:06): the sentence's own colour, underlined, orange on hover */
.cats .kidsnote a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cats .kidsnote a:hover,.cats .kidsnote a:focus-visible{color:#F36F23}
/* THE BEST OF OUR FOOD carousel before Allergies (Nuo, 6 Nov 2026, 22:10; menus.js foodCarousel) */
.foodcar{position:relative;padding:20px var(--pad) 70px}
.fc-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 12px) / 4);column-gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.fc-track::-webkit-scrollbar{display:none}
.fc-card{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:#e6ddd7;scroll-snap-align:start}
.fc-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.fc-card::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.45));pointer-events:none}
.fc-card figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:#FFFFFF}
@media (hover:hover){.fc-card:hover img{transform:scale(1.04)}}
.fc-arrow{position:absolute;top:calc(20px + (100% - 90px) / 2);transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:1.5px solid #FFFFFF;background:rgba(0,0,0,.25);color:#FFFFFF;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}
.fc-arrow.prev{left:calc(var(--pad) + 12px)}.fc-arrow.next{right:calc(var(--pad) + 12px)}
@media (hover:hover){.fc-arrow:hover{background:rgba(0,0,0,.5)}}
@media (max-width:860px){.foodcar{padding:10px 0 50px}.fc-track{grid-auto-columns:72%;padding:0 var(--pad);scroll-padding:0 var(--pad)}.fc-arrow{display:none}}