@import url("cards.css");
@import url("mapchip.css");   /* the map bubble and its tail (25 Sep 2026) - shared with the home page; the solver in site-page.js places it */   /* the collection card (17 Sep 2026) - shared with the home page; the neighbourhood grid below draws it */
/* Site-page template styles, shared by every website-plan/prototype/<key>/index.html.
   Lifted from the Bondi page of 9 Sep 2026 and made generic on 10 Sep 2026. One file: a fix here is
   a fix on all twenty pages. Brand: Sandstone ground, Graphik headings (falls back to Inter), Solina body
   (falls back to Figtree), Neon Blue action. */
@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;--dblue:#A9D8EA;
  --head:"Graphik","Inter",Arial,sans-serif;--body:"Solina","Figtree",Arial,sans-serif;--nav:72px;--pad:40px;--accent:var(--orange);--accent-ink:var(--sand)}   /* --accent was unset here and every var(--accent,var(--blue)) fell to blue; ORANGE 2 Oct 2026 (page.css explains) */
@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 and the page runs full-bleed to 3440px and beyond (Nuo,
   13 Sep 2026, reversing his own instruction of that morning). page.css carries the reasoning and the measured cost. */
/* the one photograph that travels (footer.js DG_VT): the card and the hero are different shapes, so old and new fill
   the morphing box and crop as photographs do, instead of the UA default that fits the width and lets a wide hero go
   short. Half a second, the pages' own ease. */
::view-transition-group(.vtph){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(.vtph),::view-transition-new(.vtph){height:100%;object-fit:cover}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* type (11 Sep 2026): Inter/Figtree stand in for Graphik/Solina, body 17px at 400, headings in Title Case (the
   .caps class keeps the head face and tight leading, no longer upper case) - the reasoning is in page.css */
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}
a{color:inherit;text-decoration:none}
img{display:block}
button{font:inherit;cursor:pointer}
.caps{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;line-height:1.02}
.markslot{display:block;line-height:0}.markslot canvas{display:block}
.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-block}
/* --accent is never set (a per-site colour on the fills was reverted on 11 Sep 2026 - "looks tacky"), so these are blue */
/* outlines only, at rest and on hover - V2 slide 79 (13 Sep 2026); page.css says why .fill keeps its name */
.pill.fill{background:transparent;border-color:var(--accent,var(--blue));color:var(--accent,var(--blue))}
.pill.light{border-color:#fff;color:#fff}
.pill.sand{background:var(--sand);border-color:var(--sand);color:var(--ink)}
@media (hover:hover){.pill:hover{background:transparent;border-color:var(--accent,var(--blue));color:var(--accent,var(--blue))}
.pill.fill:hover{background:transparent;border-color:var(--ink);color:var(--ink)}}
.k{font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.08em;color:#3f3c39}
section{padding:0 var(--pad)}
h2.caps{font-size:clamp(28px,2.8vw,40px);margin-bottom:24px}

/* 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}
.nav .book{font-family:var(--head);font-size:14px;padding:12px 20px;border:2px solid #fff;border-radius:999px;color:#fff;background:transparent;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(--accent,var(--blue));background:transparent;color:var(--accent,var(--blue))}
.crumb{position:absolute;left:var(--pad);top:calc(var(--nav) + 14px);z-index:3;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.85)}
.crumb a{display:inline-block;padding:7px 0;margin:-7px 0}   /* a 24px tap box on an 11px line */
@media (hover:hover){.crumb a:hover{text-decoration:underline}}
@media (max-width:860px){.crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;right:var(--pad)}}   /* "The Portrait Pavilion by Audrey Green" ran to the edge at 390px */

/* hero */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#000;color:#fff;padding:0}
.hero img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;animation:drift 40s ease-in-out infinite alternate;transform-origin:55% 50%}
/* 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)}}
@media (prefers-reduced-motion:reduce){.hero img.ph{animation:none}}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 32%,rgba(0,0,0,0) 50%,rgba(0,0,0,.6) 100%)}
.hero .foot{position:absolute;left:var(--pad);right:var(--pad);bottom:56px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.hero .mark{margin-bottom:18px}
.hero .qual{font-family:var(--head);text-transform:uppercase;font-size:15px;letter-spacing:.06em;margin:-8px 0 16px}
.hero .where{font-size:clamp(18px,1.6vw,22px);line-height:1.3;max-width:40ch;color:rgba(255,255,255,.94);hyphens:auto;-webkit-hyphens:auto}
.hero .acts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hero .walk{font-size:14px;color:rgba(255,255,255,.8);margin-left:6px}

/* essentials */
.ess{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 40px;padding:40px var(--pad);border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);margin:0 var(--pad) 48px;padding-left:0;padding-right:0}   /* now sits between the story and the map: ruled above and below, 48px before the map */
.ess .best{grid-column:1/-1;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-top:8px}
/* B Corp: the licensed mark, ../../assets/bcorp.png (Nuo, 11 Sep) - BLACK since 13 Sep 2026 (V2 slides 30-32: "may
   only be used in black or white"; bcorp-white.png for dark grounds). Never redrawn. */
/* scoped to .ess (11 Sep 2026): the footer's B Corp link is also .bcorp, and a bare .bcorp rule in a page stylesheet
   leaks onto it - the ESG page's did, and put 110px of empty black under the footer logo */
.ess .bcorp{display:inline-block;line-height:0}
.ess .bcorp img{height:72px;width:auto;display:block}
.ess .bcorp.tile img{background:transparent;padding:0}   /* transparent everywhere (Nuo, 11 Sep); the PNG itself is made transparent by build_about_art.py */
.ess .k{margin-bottom:8px}
.ess .v{font-size:18px;line-height:1.3}
.ess .v b{font-weight:300;color:var(--blue);font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.06em;display:block;margin-top:4px}
.ess .v.closed{color:#8a4b2a}
/* open now (Tier 3, 11 Sep 2026): a dot before "Open until 22:00" that breathes once every 2.4s - the specials band's
   live dot in the venue page's blue. Only while the doors are open: "Opens at", "Closed today" and "Closed for today"
   draw nothing. Still under reduced motion. */
.ess .v.open::before{content:"";display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--blue);vertical-align:middle;margin:-2px 10px 0 0;box-shadow:0 0 0 0 rgba(24,71,232,.55);animation:dg-open 2.4s ease-out infinite}
@keyframes dg-open{0%{box-shadow:0 0 0 0 rgba(24,71,232,.55)}70%{box-shadow:0 0 0 8px rgba(24,71,232,0)}100%{box-shadow:0 0 0 0 rgba(24,71,232,0)}}
@media (prefers-reduced-motion:reduce){.ess .v.open::before{animation:none}}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chips span{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.03em;padding:5px 9px;border:1.5px solid var(--ink);border-radius:999px;line-height:1.1}   /* 11px: the floor for a name a reader takes something from (was 9.5) */

/* story */
/* ONE GRID FOR THE WHOLE PAGE (Nuo, 10 Sep 2026): the story, the map row and the What's On row are all two equal
   columns with a 20px gutter, so the photographs' right edge is the map's right edge, and the story text, Find us
   and Opening hours all start on the same line. The story used to be 1.05fr/.95fr with a 56px gap. */
.story{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;padding:88px var(--pad)}
.story .pics{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.story .pics img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
/* justified everywhere, never a split word (Nuo, 10 Sep 2026) */
.story .lead{font-size:clamp(22px,1.9vw,28px);line-height:1.25;letter-spacing:-0.01em;margin-bottom:24px;hyphens:auto;-webkit-hyphens:auto}   /* ragged: a lead this size justified opens rivers; the paragraphs under it stay justified (two-column block) */
.story p{font-size:17px;line-height:1.5;color:#2b2926;margin-bottom:14px;text-align:justify;hyphens:auto;-webkit-hyphens:auto}   /* full column width: the paragraph's right edge is the art grid's and Opening hours' right edge */
.story .art{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.story .art div{font-size:14px;line-height:1.45;hyphens:auto;-webkit-hyphens:auto}
.story .art b{font-weight:300;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.05em;display:block;margin-bottom:4px}
.story .name{margin-top:24px;font-size:14px;line-height:1.45;color:#2b2926;padding-top:16px;border-top:1px solid rgba(0,0,0,.1);hyphens:auto;-webkit-hyphens:auto}   /* full width, so its rule spans the column */
.story .name b{font-weight:300;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.05em;display:block;margin-bottom:4px}
/* this place's press and awards (11 Sep 2026): the same labelled-block shape as The name, one rule above, filled from
   ../press-data.js after the page has drawn; an empty slot takes no room */
.story .press{margin-top:24px;padding-top:16px;border-top:1px solid rgba(0,0,0,.1);display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.story .press:empty{display:none}
.story .press .pl{font-size:14px;line-height:1.45;color:#2b2926;hyphens:auto;-webkit-hyphens:auto}
.story .press .pl b{font-weight:300;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.05em;display:block;margin-bottom:4px}
.story .press .pl a{color:var(--ink)}@media (hover:hover){.story .press .pl a:hover{color:var(--blue)}}
.story .press .pl small{display:block;margin-top:4px;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:#3f3c39}

/* menu: a button first, the hub's guest menu expands below it */
.menu{padding:0 var(--pad) 88px}
.menu .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:20px;border-bottom:1.5px solid var(--ink)}
.menuwrap{display:none;position:relative;margin-top:20px;border-radius:16px;overflow:hidden;background:#fff;border:1.5px solid var(--ink)}
.menuwrap.on{display:block}
.menuwrap.typed{border:0;border-radius:0;background:transparent;overflow:visible}   /* the typed menu (23 Sep 2026) carries its own orange frame */
.menuwrap iframe{display:block;width:100%;height:960px;border:0;background:#fff}

/* 3D tour: under Find us / Opening hours, bottom-aligned with the map (sites without a tour have nothing
   there). Start grows the card to the viewport (.full, then .grown); Close shrinks it back. */
.panel.tourp{padding:0;min-height:260px;background:#000;overflow:hidden;flex:1;margin-top:auto;position:relative}
.tourp .frame{position:relative;flex:1;min-height:0;height:100%;background:#000}
.tourp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.tourp.full{position:fixed;z-index:200;margin:0;transition:top .4s cubic-bezier(.2,.8,.2,1),left .4s cubic-bezier(.2,.8,.2,1),width .4s cubic-bezier(.2,.8,.2,1),height .4s cubic-bezier(.2,.8,.2,1),border-radius .4s}
.tourp.full.grown{border-radius:0}
.tourp.ghost{visibility:hidden}
.tourp .tourclose{display:none;position:absolute;top:18px;right:18px;z-index:3;background:#fff;border:1.5px solid #000;border-radius:999px;padding:10px 18px;font-family:var(--head);font-size:13px;cursor:pointer}
.tourp.playing .tourclose{display:block}                 /* Expand once the tour is running; Close while full */
body.tour-open{overflow:hidden}
.tourp .cta{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;text-align:center;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.5));border:0;cursor:pointer;padding:24px}
.tourp .cta .caps{font-size:clamp(22px,2vw,28px)}
.tourp .cta small{font-size:13px;opacity:.85}
.tourp iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tourp .cap{position:absolute;left:20px;bottom:18px;color:#fff;font-size:13px;text-shadow:0 1px 2px rgba(0,0,0,.5)}

/* what's on + tour row */
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 var(--pad) 88px;align-items:stretch}
.panel{border-radius:16px;padding:40px;min-height:380px;display:flex;flex-direction:column;justify-content:space-between}
.panel.dg{background:var(--dgreen);color:var(--blue)}
.panel.ph{position:relative;overflow:hidden;color:#fff}
.panel.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.panel.ph .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.65));z-index:1}
.panel.ph>*:not(img):not(.sh){position:relative;z-index:2}
.panel h3{font-family:var(--head);letter-spacing:-0.02em;line-height:1.05;font-size:clamp(22px,2vw,28px);font-weight:400;margin-bottom:18px}
.evl{list-style:none;font-size:16px}
.evl li{display:flex;gap:16px;padding:12px 0;border-top:1px solid rgba(24,71,232,.25)}
.evl li:first-child{border-top:0}
.evl .d{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;min-width:140px;padding-top:3px}
.evl a{text-decoration:underline}
.panel .pill{align-self:flex-start;margin-top:20px}
.panel.evp{min-height:0;justify-content:flex-start;padding:32px 36px}
.evp .ph-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.evp .ph-row .pill{margin-top:0;align-self:flex-start}
.tourp .cta .pill{align-self:center;margin-top:6px}
.panel.dg .pill{border-color:var(--accent,var(--blue));color:var(--accent,var(--blue))}@media (hover:hover){.panel.dg .pill:hover{border-color:var(--ink);color:var(--ink)}}

/* find us: map left; details then the 3D tour right, tour bottom-aligned with the map */
.find{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 var(--pad) 20px;align-items:stretch}
.find .gmap{border-radius:16px;overflow:hidden;min-height:560px;height:100%;background:#EFEBE6;position:relative}
.find .side{display:flex;flex-direction:column;gap:24px}
.find .det{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;align-content:start;padding:8px 0 0}   /* no side padding and the art grid's gutter, so Find us / Opening hours sit exactly under the story's two art columns */
/* private hire, beside what's on: PRIVATE HIRE is the heading, the capacity line under it. The row is
   as tall as What's on and no taller (Nuo): no minimum height, hire stretches to match. */
.two .panel{min-height:0}
.panel.hire{padding:32px 36px}
.panel.hire h3{margin-bottom:12px}
.panel.hire p{font-size:17px;line-height:1.45;hyphens:auto;-webkit-hyphens:auto}
.panel.hire .pill{margin-top:22px}
.find .det .k{margin-bottom:8px}
.hrs{font-size:15px;line-height:1.7}
.hrs a{text-decoration:underline}
.hrs div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(0,0,0,.08)}
.hrs div.today{color:var(--blue)}
.find .quiet{font-size:13px;color:#5a5754;margin-top:14px}
.find .quiet a{text-decoration:underline}
/* the social marks under Find us (11 Sep 2026): the same 13px and grey as the .quiet line above them, so they read
   as the last quiet thing in the cell rather than a second call to action. Structure and glyph come from footer.js. */
.dgsoc.find{margin-top:12px;gap:18px;font-size:13px}
.dgsoc.find a{color:#5a5754}
@media (hover:hover){.dgsoc.find a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}}

/* faq */
.faq{padding:0 var(--pad) 88px}
.faq .grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 48px}
.faq dt{font-family:var(--head);font-weight:400;letter-spacing:-0.01em;font-size:17px;margin-bottom:8px;line-height:1.25}   /* Title Case questions, not caps */
.faq dd{font-size:17px;line-height:1.5;color:#2b2926;hyphens:auto;-webkit-hyphens:auto}
.find .quiet,.ess .v{hyphens:auto;-webkit-hyphens:auto}

/* nearby - six cards in the home page's tile (17 Sep 2026). The card is ../cards.css, imported at the top of this file; only
   the grid is here: six across on a desktop, four in the 861-1100 band, two on a phone (the phone rule is in the 860 block). */
.near{padding:0 var(--pad) 96px}
.near .cards{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
@media (min-width:861px) and (max-width:1100px){.near .cards{grid-template-columns:repeat(4,1fr)}}
dialog#book{position:fixed;inset:0;margin:auto;border:0;padding:0;border-radius:16px;width:min(560px,94vw);max-height:92vh;max-height:92dvh;overflow:auto;background:var(--sand);box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog#book::backdrop{background:rgba(0,0,0,.55)}
dialog#book .hd{display:flex;justify-content:space-between;align-items:center;padding:18px 22px 10px}
dialog#book .hd b{font-weight:300;font-family:var(--head);text-transform:uppercase;font-size:14px;letter-spacing:-0.02em}
dialog#book .x{border:0;background:transparent;font-size:22px;line-height:1;padding:4px 8px}
dialog#book iframe{display:block;width:100%;height:min(720px,70vh);height:min(720px,70dvh);border:0;background:#fff}
dialog#book .note{padding:10px 22px 18px;font-size:13px;color:#5a5754}dialog#book .note .bns{display:none}dialog#book .note a{color:inherit}@media (max-width:640px){dialog#book .note .bn1,dialog#book .note .bn2{display:block}dialog#book .note .bn2{white-space:nowrap}dialog#book .note .bnl{display:none}dialog#book .note .bns{display:inline}}@media (max-width:360px){dialog#book .note{font-size:12px;padding-left:14px;padding-right:14px}dialog#book .note .bn2{white-space:normal}}

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

@media (max-width:1100px){.ess{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  :root{--nav:60px;--pad:20px}
  .nav ul{display:none}.nav .book{padding:10px 16px;font-size:13px}
  .hero{min-height:560px}.hero .foot{bottom:36px;flex-direction:column;align-items:flex-start}
  .hero .where{font-size:17px;max-width:none;padding-right:8px}
  .hero .acts{gap:8px;flex-wrap:nowrap}.hero .acts .pill{padding:8px 13px;font-size:12px;white-space:nowrap}.hero .walk{font-size:12px;margin-left:2px}   /* one row of small pills (Nuo, 10 Sep) */
  body,.story p,.faq dd,.panel.hire p{font-size:16px}                     /* one step down the scale on a phone */
  .ess{grid-template-columns:1fr;gap:20px;padding:28px 0;margin-bottom:32px;position:relative}
  .ess .best .bcorp{right:0}
  .ess .best{flex-direction:column;align-items:flex-start;gap:18px}
  /* the B Corp lockup goes up to the right, top-aligned with TODAY (Nuo); the best-for chips keep the width */
  .ess .best .bcorp{position:absolute;top:28px;right:var(--pad)}
  .ess .best .bcorp img{height:56px}
  .ess .v{font-size:17px}
  .story{grid-template-columns:1fr;gap:28px;padding:56px var(--pad)}
  .story .art{grid-template-columns:1fr}
  .story .press{grid-template-columns:1fr}
  .story .lead{font-size:22px}
  .menu{padding-bottom:56px}
  .menuwrap iframe{height:760px}
  .menu .hd{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}   /* button on the MENU line */
  .menu .hd .pill{padding:10px 16px;font-size:13px;white-space:nowrap}
  .two,.find,.faq .grid{grid-template-columns:1fr}
  .two{padding-bottom:56px}.faq{padding-bottom:56px}
  .panel{padding:28px 24px;min-height:0}
  .panel.evp{padding:24px}
  .evl .d{min-width:104px}
  .find .gmap{min-height:380px}
  .find .side{gap:20px}
  .tourp .frame{min-height:280px}
  .find .det{grid-template-columns:1fr}
  /* nearby: one row you swipe, instead of three tall cards stacked */
  .near{padding-bottom:64px}
  .near .cards{grid-template-columns:1fr 1fr;gap:10px}
  .card .body{left:12px;right:12px;bottom:12px}.card .mark{margin-bottom:8px}.card .qual{font-size:11px}.card .bk{font-size:11px;padding:6px 10px}.card .bk.walk{font-size:10px;padding:0} /* 9px was under the 10px annotation floor on every site page (25 Sep 2026) */
  /* (the phone's horizontal snap strip of three cards went on 17 Sep 2026: the neighbourhood is the home page's two-across grid now) */
  /* no Expand on a phone, before OR after Play (Nuo, 11 Sep 2026: "just hide the button") - the tour plays in the
     card. The rule beats .tourp.playing .tourclose above by specificity, and the JS never opens .full without it */
  .tourp .tourclose,.tourp.playing .tourclose,.tourp.full .tourclose{display:none}
}

/* ============ THE OTHER HALF OF THE COLLECTION PAGE'S VIEW TRANSITION (14 Sep 2026) ============
   /collection/ sets view-transition-name:sitehero on the photograph you clicked, at click time; this names the
   hero it expands into. Both pages have to opt in for a cross-document transition, which is what @view-transition
   does. The name is static here because only one venue page is ever on screen, so it can never collide - the
   collection page is the one that has to set it on a single tile out of 21.
   With reduce set the navigation is plain, as everywhere else on this prototype. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.hero img.bg{view-transition-name:sitehero}
::view-transition-old(sitehero),::view-transition-new(sitehero){animation-duration:.55s}

/* ============ THE SIMPLIFY PASS (17 Sep 2026; site-page.js says what moved where) ============
   .one       the one sentence, centred, at reading size - the shape of nineorchard.com's line under its film
   .gal       the four story photographs as small thumbnails in a row; a click opens the lightbox (dialog.lb)
   .hero .where  the H1 is now the name with the neighbourhood after it, set small under the mark
   .xps       the expanders' band (../expand.css draws the rows); the blocks inside lose their section padding
   .today     today's line over the hours (the Today / Where / Serving strip is gone) */
.hero .where{font-family:var(--head);font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1.3;color:rgba(255,255,255,.92);margin-top:-6px}
.hero .where span{color:rgba(255,255,255,.7)}
.one{padding:72px var(--pad) 40px;text-align:center}
.one .onel{font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:#2b2926;margin:0 auto;text-transform:uppercase;letter-spacing:.02em}   /* ALL CAPS (Nuo, 3 Oct 2026: "show all the site text at the top ... in ALL CAPS"); the typed copy stays Title Case (brand-voice rule 9), the transform sets the caps; the letter spans inherit it */   /* one line, fitted by expand.js (17 Sep 2026) */
.one:empty{padding:32px 0 0}
.gal{padding:0 var(--pad) 48px}
.gal .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gal .th{display:block;padding:0;border:0;background:#111;border-radius:10px;overflow:hidden;aspect-ratio:3/2;cursor:zoom-in}
.gal .th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
@media (hover:hover){.gal .th:hover img{transform:scale(1.04)}}
.find{padding-top:8px;padding-bottom:40px}
.find .today{font-size:17px;line-height:1.3;margin:0 0 10px}
.find .today b{font-weight:300;color:var(--blue);font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;display:block;margin-top:2px}
.find .today.closed{color:#8a4b2a}
.xps{padding:16px 0 72px}
.xps .menu,.xps .faq{padding:0}
.xps .menu .hd{border-bottom:0;padding-bottom:0;justify-content:flex-start;gap:12px}
.xps .panel{min-height:0}
.xps .panel.evp{padding:0;background:transparent;color:var(--ink)}
.xps .panel.evp .k{color:#3f3c39 !important}
.xps .panel.hire{min-height:300px}
.xps .about p{font-size:17px;line-height:1.5;color:#2b2926;margin-bottom:14px}   /* the full measure (Nuo, 17 Sep 2026) */
.xps .hiretxt p{font-size:17px;line-height:1.5;color:#2b2926;margin-bottom:14px}
.xps .hiretxt .links{display:flex;gap:28px;flex-wrap:wrap}
.xps .a,.xps .hiretxt .a{font-family:var(--head);color:var(--blue);text-transform:uppercase;font-size:13px;letter-spacing:.04em;display:inline-block;margin-top:4px;padding:2px 0} /* 20px tall bare; the padding takes the tap box to 24 (25 Sep 2026) */
.xps .artwrap .art b a{color:inherit;border-bottom:1px solid rgba(0,0,0,.25)}
@media (hover:hover){.xps .artwrap .art b a:hover{color:var(--blue);border-color:var(--blue)}}
.xps .artwrap .art .a{grid-column:1/-1;margin-top:8px}
.xps .artwrap .art{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px}
.xps .artwrap .art div{font-size:15px;line-height:1.5}
.xps .artwrap .art b,.xps .artwrap .name b{font-weight:300;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.05em;display:block;margin-bottom:4px}
.xps .artwrap .name{margin-top:24px;font-size:15px;line-height:1.5}
dialog.lb{position:fixed;inset:0;margin:auto;border:0;padding:0;background:transparent;max-width:min(96vw,1400px);max-height:96vh;overflow:visible}
dialog.lb::backdrop{background:rgba(0,0,0,.86)}
dialog.lb figure{margin:0}
dialog.lb img{display:block;max-width:96vw;max-height:86vh;width:auto;height:auto;border-radius:6px;cursor:zoom-out}
dialog.lb figcaption{color:var(--sand);font-family:var(--head);font-size:13px;letter-spacing:.02em;text-align:center;padding:14px 0 0}
dialog.lb .x{position:fixed;top:18px;right:22px;border:0;background:transparent;color:var(--sand);font-size:34px;line-height:1;cursor:pointer}
@media (max-width:860px){
  .one{padding:44px var(--pad) 28px}
  .gal .thumbs{grid-template-columns:1fr 1fr;gap:8px}
  .xps .artwrap .art{grid-template-columns:1fr}
  .hero .where{font-size:11px}
}

/* == 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. */

/* == THE SITE'S OWN BAR, THE COUNTERS AND THE NEXT EVENT (23 Sep 2026; site-page.js explains each) == */
.nav.site .sitemark{display:flex;align-items:center;height:24px;min-width:80px;max-width:180px}
.nav.site .navmark{display:block;height:24px}.nav.site .navmark.dark{display:none}.nav.solid .navmark.light{display:none}.nav.solid .navmark.dark{display:block}   /* Sandstone over the photograph, black on the solid bar - the same pair the DAISY. logo uses */
.nav.site .navr{display:flex;align-items:center;gap:18px}
.nav.site .home{display:inline-flex;align-items:center;min-height:24px;padding:0 2px}   /* the tap floor; the logo itself stays 18/14px (audit, 24 Sep 2026) */
.nav.site .home .logo{height:18px;opacity:.85}   /* DAISY. small on the right: the way back to the collection */
.nav.site ul a{padding:8px 0}
.hero .nextev{position:absolute;left:var(--pad);right:var(--pad);bottom:18px;margin:0;font-family:var(--body);font-size:14px;color:rgba(255,255,255,.92)}
.hero .nextev .k{color:rgba(255,255,255,.7);margin-right:8px}
.hero .nextev a{border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:1px}
.hero .foot{bottom:56px}   /* the event line left the hero 24 Sep 2026 (E5) */
.evp.sitev em{font-style:normal;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:#7a7570;margin-left:8px}
.counters{padding:8px var(--pad) 56px}
.counters h2.caps{margin-bottom:24px}
.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 32px}
.counter{display:grid;grid-template-columns:2fr 3fr;gap:20px;align-items:start;border-top:1px solid rgba(0,0,0,.1);padding-top:20px}
.counter img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.counter h3.caps{font-size:clamp(20px,1.6vw,24px);margin:0 0 8px}
.counter .cline{font-size:15px;line-height:1.45;color:#2b2926;margin:0 0 12px}
.counter .cdet{font-size:14px;line-height:1.5;color:#2b2926;margin-bottom:14px}.counter .cdet a{text-decoration:underline;text-underline-offset:2px}
.counter .ctoday{display:block;font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:var(--blue);margin-top:4px}
.counter .acts .pill{font-size:13px;padding:10px 16px}.counter .walk{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:#3f3c39}
@media (max-width:1100px){.cgrid{grid-template-columns:1fr}}
@media (max-width:860px){.nav.site .navr{gap:10px}.nav.site .home .logo{height:14px}.counter{grid-template-columns:1fr}.hero .nextev{position:static;padding:12px var(--pad) 0;color:var(--ink);background:var(--sand)}.hero .nextev .k{color:#3f3c39}.hero .nextev a{border-color:rgba(0,0,0,.35)}.hero .foot{bottom:36px}}

/* == THE THIRD ROUND ON THE SITE PAGES (Nuo, 23 Sep 2026, on Bondi, Holland Park and Scarlett live) == */
/* the strip: photographs only, four a row (the 3D tour left the strip on 25 Oct 2026 - .tourw, below) */
.gal.strip .thumbs{grid-template-columns:repeat(4,1fr);gap:12px;align-items:stretch}
/* the map is as tall as Find Us / Opening Hours beside it, no taller (was a 560px minimum) */
.find{align-items:stretch}
.find .gmap{min-height:0;height:auto}
.find .side{gap:0}
/* THE PINS HAD NO STYLE ON THIS PAGE - the flower drew at its file size, 1024px, "huge" (Nuo). The home page's rules, sized
   to site-page.js's own constants (FL 40 for this site, SIS 18 for a sister); the chip the solver places is styled with them. */
.gmap .pin{position:absolute;margin:-9px 0 0 -9px;cursor:pointer;width:18px;height:18px}   /* margins, not a transform, and no z-index: either would make the pin a stacking context and keep its bubble under a later flower (mapchip.css, 25 Sep 2026) */
.gmap .pin.me{width:40px;height:40px;margin:-20px 0 0 -20px;z-index:2}
.gmap .pin img{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
/* a hovered flower grows to 2x over 1.6s (Nuo, 3 Oct 2026); the site maps show the full inks at rest (his 11:30 reversal), so there is no pastel-to-ink fade here - that stays on the home map */
.pin{transition:transform 1.6s cubic-bezier(.25,.6,.3,1)}
@media (hover:hover){.pin:hover{transform:scale(2);z-index:5}}
.gmap .pin.open img{animation:sitePinTurn 46s linear infinite}
@keyframes sitePinTurn{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* the bubble itself: mapchip.css (25 Sep 2026). Sisters carry one too now, shown on hover by site-page.js */
/* Book and Menu in the hero look the same: both 8px corners (Nuo, 23 Sep 2026) */
.hero .acts .pill{border-radius:8px}
@media (prefers-reduced-motion:reduce){.gmap .pin.open img{animation:none}}
/* ON A PHONE ONE ROW YOU SWIPE (Nuo, 25 Oct 2026, interviewed): the photographs only, the first flush with the gutter, each
   snapping to it; the next one always peeks in from the right (the tour card led this row until 13:04 the same day) */
@media (max-width:860px){
  .gal.strip .thumbs{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:8px;
    margin:0 calc(-1 * var(--pad));padding:0 var(--pad);scroll-padding-inline:var(--pad);scrollbar-width:none}
  .gal.strip .thumbs::-webkit-scrollbar{display:none}
  .gal.strip .thumbs > *{flex:0 0 72%;scroll-snap-align:start;aspect-ratio:4/3;height:auto}
}
/* THE HOURS ROWS ARE EVENLY SPACED (Nuo, 23 Sep 2026: "why is there more space between wednesday and thursday?"): today's row
   carries class .today, and `.find .today{font-size:17px;margin:0 0 10px}` - written for the summary line above the table - was
   landing on it too. The table's own row rule wins here by specificity. */
.find .hrs div.today{font-size:inherit;line-height:inherit;margin:0}

/* THE FIND SECTION, FOURTH ROUND (Nuo, 24 Sep 2026): the map is the RIGHT half, under the tour card; the left half is Opening
   Hours then Find Us; the socials under Find Us are gone and the hero's Book control sits there instead (a site with no booking
   prints its walk-ins line). Markup order changed in site-page.js; the column widths did not. */
.find .acts{margin-top:16px;display:flex;align-items:center;gap:12px}
.find .acts .pill{border-radius:8px;padding:10px 18px;font-size:13px}   /* the hero's Book, 8px corners (Nuo, 23 Sep) */
.find .acts .walk{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;color:#3f3c39}
.dgsoc.find{display:none}   /* the slot is gone; this keeps any cached page from drawing marks there */
@media (max-width:860px){.find .gmap{min-height:380px;height:380px}}   /* one column on a phone: the map gets its own height back */

/* == 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)}}

/* == THE ABOUT PHOTOGRAPH 27 SEP 2026 == site-page.js explains. Text left, photograph right, half the row each; the photograph
   takes the text's height because it is placed absolutely inside a grid cell that the text sizes. */
.xps .about.haspic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:stretch}
.xps .about.haspic .txt>p:last-child{margin-bottom:0}
.xps .about .apic{position:relative;margin:0;min-height:240px;border-radius:6px;overflow:hidden;background:#e6ded8}
.xps .about .apic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.xps .about.haspic{grid-template-columns:1fr;gap:20px}.xps .about .apic{min-height:0;aspect-ratio:4/3}}

/* == THE ONE LINE IN NEON 27 SEP 2026 == site-page.js oneLineHtml explains. */
.one .onel .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.one .onel .ow{white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .one .onel.ol-arm .ol{opacity:0}
  .one .onel.ol-on .ol{animation:olIn .45s ease var(--d) backwards,olWave var(--wc,8s) ease-in-out var(--w) infinite}
  @keyframes olIn{from{opacity:0}to{opacity:1}}
}

/* == THREE NEIGHBOURS, THE SAME HEIGHT 27 SEP 2026 == Nuo: "only show 3 sites here, keep the same height for cards". Three across,
   each card the height it had as one of six (four in the 861-1100 band) - a 4:5 tile of that column's width - so the row keeps its
   height and the cards widen. The strip is its own size container so the height follows the strip, not the window. Phone: the
   three stack full width at the height they had two to a row.
   == TWO NEIGHBOURS 29 SEP 2026 == Nuo: "only show 2 sites instead of 3 but keep the same height as the current cards, on mobile
   show the 2 site cards side by side". Two columns everywhere; the heights below are unchanged, so the desktop row keeps its
   height and the cards widen, and on a phone the pair sits side by side at the 4:5 height they already had. */
.near .cards{grid-template-columns:repeat(2,minmax(0,1fr));container-type:inline-size}
.near .cards .card{aspect-ratio:auto;height:calc((100cqw - 80px) / 6 * 1.25)}
@media (min-width:861px) and (max-width:1100px){.near .cards{grid-template-columns:repeat(2,minmax(0,1fr))}.near .cards .card{height:calc((100cqw - 48px) / 4 * 1.25)}}
@media (max-width:860px){.near .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.near .cards .card{height:calc((100cqw - 10px) / 2 * 1.25)}}
/* == THREE NEIGHBOURS 30 SEP 2026 == (Nuo, after an interview: "show 3 on desktop with wider gaps on large screens, keep only 2
   for mobile side by side"). Three columns from 861px, the tablet band included (his answer); the nearest two side by side on a
   phone, as on 29 Sep - the third is drawn and hidden. The height is the landing page's card height at the same width (his answer:
   "match the landing's 4 + 6 rows"): a six-across 4:5 card, four-across in the 861-1100 band, computed with the growing gap. The
   gap is the landing's: 16px to 1440, +1px per 15px of screen, 48px from 1920. */
.near{--ng:16px}
@media (min-width:1441px){.near{--ng:clamp(16px, calc(16px + (100vw - 1440px) / 15), 48px)}}
@media (min-width:861px){
  .near .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ng)}
  .near .cards .card{height:calc((100cqw - 5 * var(--ng)) / 6 * 1.25)}
}
@media (min-width:861px) and (max-width:1100px){.near .cards{grid-template-columns:repeat(3,minmax(0,1fr))}.near .cards .card{height:calc((100cqw - 3 * var(--ng)) / 4 * 1.25)}}
@media (max-width:860px){.near .cards > .card:nth-child(n+3){display:none}}
/* /beany/'s cafés link to their own pages (27 Sep 2026) */
.counter .cpic{display:block}.counter .cpic img{display:block}
.counter h3 a{color:inherit;text-decoration:none}
.counter .acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* a floor for the About photograph (Nuo, 27 Sep 2026, picked from the open items): Larry's two lines made it a 102px strip; 240px is the least it shows, so a very short About has a photograph taller than its text */
/* == FIND US TO THE RIGHT OF THE MAP (Nuo, 27 Sep 2026: "move find us to the right of the map for all site pages") == Desktop reads
   Opening hours | the map | Find us, a quarter, a half, a quarter - the map in the middle, as wide as before. Reverses the 24 Sep
   layout (hours and Find us side by side on the left, map on the right). The markup is unchanged: .side and .det let go of
   their boxes so their two blocks and the map are one row of the .find grid. A phone keeps hours, Find us, then the map. */
@media (min-width:861px){
  .find{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:20px 24px}
  .find .side,.find .det{display:contents}
  .find .det>div{padding-top:8px;min-width:0}
  .find .det>div:first-child{order:1}
  .find .gmap{order:2;min-height:0;height:calc(var(--hh, 420px) - 8px);margin-top:8px;align-self:start}   /* the taller of Opening hours and Find us, less the 8px top pad, from their top edge (site-page.js --hh; 27 Sep 2026, taller-of-two 12 Oct 2026) */
  .find .det>div{align-self:start}
  .find .det>div:nth-child(2){order:3}
}
/* more room under the address and under the directions (Nuo, 27 Sep 2026: "add more spacing below the address and the text") */
.find .faddr{display:inline-block;margin-bottom:12px}
.find .fdir{margin:0 0 18px}
/* the hero's location on a line of its own under the name (Nuo, 27 Sep 2026: "always show the location text on a new line here"); the
   middle dot goes, a comma stays for a screen reader so the H1 still reads "Peggy Jean at Riverside Green, Richmond Riverside" */
.hero .where .wl{display:block;margin-top:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* the Opening hours and Find us labels in moving neon (site-page.js, 27 Sep 2026) */
@media (prefers-reduced-motion:no-preference){
  .find .k.kneon .kl{animation:kNeon 3.6s linear calc(var(--i) * 70ms) infinite}
  @keyframes kNeon{0%,6%,90%,100%{color:inherit}12%,24%{color:#1847E8}30%,42%{color:#FF3CA0}48%,60%{color:#F36F23}66%,78%{color:#0F4A2C}}
}
/* About's good-to-know notes as cards (site-page.js notesHtml, 27 Sep 2026): white cards on the Sandstone, as many across as fit,
   one height a row; the heading in the site's small caps */
.xps .notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:28px;align-items:stretch}
.xps .note{background:#fff;border-radius:12px;padding:20px 22px}
.xps .note h3.caps{font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px;color:var(--ink,#000)}
.xps .note p{font-size:15px;line-height:1.5;color:#2b2926;margin:0 0 10px}
.xps .note p:last-child{margin-bottom:0}
.xps .note.wide{grid-column:1 / -1}   /* the children's note across the row; auto-fit lets the cards under it share the full width (27 Sep 2026) */
@media (min-width:861px){.xps .notes{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}}   /* Children across the top, the others one row under it filling the width (27 Sep 2026) */
@media (max-width:860px){.xps .notes{grid-template-columns:minmax(0,1fr)}}
/* == THE PHONE BAR 28 SEP 2026 == Nuo, on Scarlett (red cross and arrow): "for site pages on mobile, hide the daisy logo and move
   book button to the right before menu button". The bar is sitemark · (ul, hidden) · .navr · burger under justify-content:
   space-between, which parked .navr mid-bar; margin-left:auto sends it right, and footer.js's `.nav>.dgburger{margin-left:14px}`
   keeps the burger's gap. With the drawer OPEN the bar is the collection's, not the site's, so the DAISY. wordmark comes back top
   left at the standard 24px in place of the site mark - and footer.js DG_MOBILE sends a tap on it to the top of the landing page
   (Nuo, same message). */
/* == THE SITE MARK NEVER OVERLAPS 29 SEP 2026 == Nuo, on Audrey Green's lockup running under Book on an iPhone: "make sure audrey
   green logo never overlaps other text and elements on mobile". The mark is a canvas marks.js sizes to a 22px body with no
   width ceiling, so a wide lockup (AUDREY | GREEN) came out ~330px against the ~170px a 390px bar has left. On a phone the mark's
   box takes only the room Book and the burger leave (flex 0 1 auto, min-width 0, 12px clear of Book), and the canvas shrinks
   inside it with its own proportions (max-width 100%, height auto - a canvas keeps its bitmap's ratio). Short marks are
   unchanged; only one wider than the room gets smaller. Every site page, not only Audrey's. */
@media (max-width:860px){
  .nav.site .sitemark{flex:0 1 auto;min-width:0;max-width:none;margin-right:12px}
  .nav.site .navmark{height:auto;max-width:100%}   /* NOT display: the .light/.dark pair is switched by display, and a display here would show both */
  .nav.site .navmark canvas{display:block;max-width:100%;height:auto!important}   /* the box hugs the canvas, so .sitemark's align-items centres a shrunk mark */
  .nav.site .navr{flex:none}
  .nav.site .navr{margin-left:auto}
  .nav.site .home{display:none}
  body.mopen .nav.site .sitemark{display:none}
  body.mopen .nav.site .home{display:inline-flex;position:absolute;left:var(--pad);top:50%;transform:translateY(-50%)}
  body.mopen .nav.site .home .logo{height:24px;opacity:1}
}

/* == THE FLOWER TOP RIGHT 29 SEP 2026 == Nuo: "for the site pages, change the daisy logo on the top right just the white flower, only on
   desktop, this remains hidden on mobile". Desktop: the flower replaces DAISY. - white over the photograph, black once the bar goes
   solid Sandstone (white on Sandstone is 1.2:1, an invisible link). Phone: unchanged - the mark stays hidden on the bar, and the open
   menu still shows the DAISY. wordmark top left (THE PHONE BAR, above). */
.nav.site .home .homefl{display:none;width:22px;height:22px}
@media (min-width:861px){
  .nav.site .home .logo{display:none!important}
  .nav.site .home .homefl.light{display:block}
  .nav.solid.site .home .homefl.light{display:none}
  .nav.solid.site .home .homefl.dark{display:block}
}
/* == THE SCROLL CUE 29 SEP 2026 == the landing page's and page.css's jumping flower, the same size, place and bob (site pages do not load
   page.css). 20px from the foot, centred; the hero's name and pills sit 56px up at every width, so the two never meet. Reduced motion:
   still, as on every other page. */
.hero .cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:22px;height:22px;z-index:2;pointer-events:none;animation:siteCueBob 2s ease-in-out infinite}
@keyframes siteCueBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
@media (prefers-reduced-motion:reduce){.hero .cue{animation:none}}
/* == THE HERO FOOT 29 SEP 2026 == Nuo: "for site pages, always show the text walk-ins welcome before the book and menu buttons on desktop.
   on mobile, always the book and menu buttons at the bottom right of the hero image on the same line as the site name and location
   text to the left, show walk-ins welcome above the book and menu buttons on mobile". Desktop: one row, the line then the pills. Phone:
   the foot is a ROW again (it was a column, pills under the name), name bottom left, the actions bottom right - the line on top,
   right-aligned, the pills under it. The name may wrap; the actions never do. */
.hero .acts .btns{display:flex;gap:12px;align-items:center}
.hero .walk{margin-left:0;margin-right:6px}
@media (max-width:860px){
  .hero .foot{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:14px}
  .hero .foot>div:first-child{min-width:0}
  .hero .acts{flex:none;flex-direction:column;align-items:flex-end;gap:8px}
  .hero .acts .btns{gap:8px}
  .hero .walk{margin:0;text-align:right;white-space:nowrap}
}
/* "Start the tour" over the photograph: white type and border, every site page (Nuo, 13 Oct 2026). Text on a dark ground is
   white (CLAUDE.md §6); the sand pill read as dark-on-photo. */
.tourp .cta .pill,.tourp .cta .pill.sand{color:#FFFFFF!important;border-color:#FFFFFF!important;background:transparent!important}
@media (hover:hover){.tourp .cta:hover .pill,.tourp .cta .pill:hover{color:#F36F23!important;border-color:#F36F23!important}}   /* the house hover on a dark ground: neon orange (3 Oct 2026) */
/* the extras a wide screen shows (Nuo, 20 Oct 2026): the gallery strip's further photographs and the further neighbours are drawn
   but hidden until site-page.js fillLine() finds columns to spare on the line (.on) - layout.css section 7 */
.gal .thumbs .thx:not(.on),.near .cards .card.nx:not(.on){display:none}

/* THE 3D TOUR IS ITS OWN CARD, LAST OF THE MEDIA (Nuo, 25 Oct 2026, 11:20 on Ziggy, interviewed): after the photographs, Day / After
   Dark and the films; the width of the content column (the same 1440px edges as every block above it, layout.css section 7),
   21:9 on a desktop and 4:3 on a phone. Start still plays it in the card and Expand still grows it to the whole screen, so the
   full state drops the column cap and the card's ratio (its inline size wins). */
.tourw{padding:0 var(--pad) 48px}
.tourw .panel.tourp{display:block;max-width:none;margin:0;aspect-ratio:21/9;height:auto;min-height:0;flex:none;border-radius:0}   /* gutter to gutter like the six above it (7 Nov 2026, the full audit: it alone was still held to 1440px at 2560) */
.tourw .tourp .frame{position:absolute;inset:0;height:auto;min-height:0}
.tourw .panel.tourp.full{max-width:none;margin:0;aspect-ratio:auto}
@media (max-width:860px){.tourw .panel.tourp{aspect-ratio:4/3}}

/* ============ THE SITE PAGE AFTER GEORGIA'S VIDEO REVIEW (via Nuo, 4 Nov 2026, "All of it") ============
   Order: the hero (name, location, one boxed Book now) - the blurb - About, open - Opening hours and Find us - FOUR photographs -
   the 3D tour - Menu, The Art (only a site with art of its own), Good To Know - the neighbours. Gone: the spinning flower cursor,
   the letter-by-letter neon line, the moving neon labels, the map, the films, What's On and Private Hire, the second and third Book.
   Two faces only: the heading face for names and labels, the body face (Solina) for sentences and the button. */
/* no spinning daisy on a site page ("I really don't like that spinning daisy. I think that looks tacky"): footer.js's hero and card
   flowers (.dgfh, .dgfc) are not drawn, and the pointer they hid comes back; the cards' static flower cursor is a plain pointer.
   Higher specificity than footer.js's injected rules, which arrive after this sheet. */
html body .dgfh,html body .dgfc{display:none!important}
html body .dgfh-on,html body .dgfh-on *,html body .dgfc-on,html body .dgfc-on *{cursor:revert!important}
html body .near .card,html body .near .card *{cursor:pointer!important}
/* no films on a site page ("The video I think we don't need either. It's just too busy"): films.js still runs, nothing it adds shows */
.flm-dn,.flm-set,.hero .flm-hero{display:none!important}
/* the hero: the name in the heading face at its own weight (h1 defaults to bold - "This is like a bolded font"), the place under it */
.hero .where{font-family:var(--head);font-weight:400;font-size:clamp(20px,1.9vw,28px);letter-spacing:.04em;text-transform:uppercase;line-height:1.2;color:#fff;margin:0;max-width:none}
.hero .where .wl{display:block;font-size:13px;letter-spacing:.08em;margin-top:8px;color:rgba(255,255,255,.85)}
.hero .where .wl .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
.hero .acts .bknow{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 26px;border:1.5px solid #fff;border-radius:8px;
  color:#fff;background:transparent;font-family:var(--head,"IBM Plex Mono","Courier New",monospace);font-size:15px;letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s}
@media (hover:hover){.hero .acts .bknow:hover{background:#fff;color:#000}}
.hero .acts .bknow:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* the blurb: a plain sentence, clear, in the body face ("the blurb of each site should be more clear at the top") */
.one{padding:56px var(--pad) 8px}
.one .lede{font-family:var(--body,"Solina","Figtree",Arial,sans-serif);font-size:clamp(20px,1.8vw,26px);line-height:1.45;color:#2b2926;margin:0;text-transform:none;letter-spacing:0;text-align:center}   /* centred, every site page (Nuo, 7 Nov 2026: "This text on all site cards should be centre aligned!") */
/* About, open, under the blurb */
.about-top{padding:24px var(--pad) 32px}
.about-top>h2.caps{font-family:var(--head);font-weight:400;font-size:clamp(18px,1.4vw,22px);letter-spacing:.04em;margin:0 0 16px;text-align:center}
.about-top .about p{font-family:var(--body,"Solina","Figtree",Arial,sans-serif);font-size:17px;line-height:1.55;color:#2b2926;margin:0 0 14px;text-align:center}   /* centred under its centred heading on every site page (Nuo, 7 Nov 2026) */
.about-top .name{margin-top:20px;font-size:15px;line-height:1.5;color:#2b2926;padding-top:16px;border-top:1px solid rgba(0,0,0,.1)}
.about-top .name b{font-weight:400;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.06em;display:block;margin-bottom:4px}
.about-top .notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:28px;align-items:stretch}
.about-top .note{background:#fff;border-radius:12px;padding:20px 22px}
.about-top .note h3.caps{font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px;color:var(--ink,#000)}
.about-top .note p{font-size:15px;line-height:1.5;color:#2b2926;margin:0 0 10px}
.about-top .note p:last-child{margin-bottom:0}
.about-top .note.wide{grid-column:1 / -1}
@media (min-width:861px){.about-top .notes{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}}
@media (max-width:860px){.about-top .notes{grid-template-columns:minmax(0,1fr)}}
/* Opening hours and Find us side by side, the full width, no map; the labels plain ink ("I really don't like this rainbow colours") */
.find{grid-template-columns:minmax(0,1fr)!important;padding-top:8px;padding-bottom:48px}
@media (min-width:861px){.find{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:20px 64px}}   /* hours | Find us, half each, now the map has gone */
/* the full width of the column, never a reading measure (CLAUDE.md: text uses the full width of its container, Nuo 2 Oct 2026) */
.one .lede,.about-top p,.about-top .name,.find p{max-width:none!important}
.find .det .k,.find .det .k *{color:#3f3c39!important;animation:none!important;text-shadow:none!important}
.find .today b{color:#3f3c39}
.find .hrs .today,.find .hrs div.today,.find .hrs div.today *{color:inherit}
/* four photographs in one row on a desktop, two by two on a phone - nothing to swipe ("only four really good images") */
#gallery.gal.four .thumbs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px;overflow:visible}
#gallery.gal.four .thumbs>.th{flex:none;aspect-ratio:4/5!important;height:auto!important}
@media (max-width:860px){#gallery.gal.four .thumbs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}}
/* no flower in the hero either: the jumping scroll cue left the site pages with the spinning one (Georgia's video review via Nuo,
   4 Nov 2026 - my reading of "that spinning daisy"; it also sat on the name on a phone). Reverses Nuo's 29 Sep "same small jumping
   white flower" on the site pages only. */
.hero .cue{display:none!important}

/* SIX PHOTOGRAPHS UNDER THE HERO (6 Nov 2026 website meeting): one row of six on a desktop, three a row on a tablet; the phone keeps its swipe row */

/* THE MAP BACK, RIGHT OF FIND US (Nuo, 6 Nov 2026, 13:12: "for all the site pages, reduce the width of the find us section to half and
   bring back the google map to the right to use that space"): Opening hours | Find us | the map = a half, a quarter, a quarter; the
   map as tall as the taller of the two text blocks (site-page.js --hh). Reverses the 4 Nov "no map" for the map only. A phone: hours,
   Find us, then the map at 320px. */
@media (min-width:861px){
  .find{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr)!important;gap:20px 40px}
  .find .det>div:first-child{order:1}
  .find .det>div:nth-child(2){order:2}
  .find .gmap{order:3;min-height:260px;border-radius:0}
}
@media (max-width:860px){.find .gmap{min-height:320px;height:320px;border-radius:0}}

/* THE HERO TO THE SIX ON A PHONE (Nuo, 6 Nov 2026, 18:20: "On mobile, have the same spacing between hero image and the 6 images below as
   the space between images for all sites pages"): one value, --g6, is both the gap between the photographs and the space above them */
@media (max-width:860px){html body #gallery.gal.six{--g6:8px;padding-top:var(--g6)!important}html body #gallery.gal.six .thumbs{gap:var(--g6)!important}}

/* the bar's Book now (7 Nov 2026, 01:04; site-page.js .navbk): hidden over the hero, fading in once the bar is solid */
.nav.site .navbk{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s;white-space:nowrap}
.nav.site.solid .navbk{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease,visibility 0s}
.find .frev{display:flex;align-items:center;gap:4px;font-family:var(--head);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#5c5650}   /* Reviews on: G, owl - one quiet line (Nuo, 8 Nov 2026) */
.find .frev span{margin-right:6px}
.find .frev a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;color:#000;transition:color .2s}
.find .frev svg{width:17px;height:17px;display:block}
.find .frev a[title="Google"] svg{width:14px;height:14px}   /* the G a touch smaller than the owl (Nuo, 8 Nov 2026, 01:24) */
@media (hover:hover){.find .frev a:hover{color:#F36F23}}

/* THE ART AS PHOTOGRAPHS (Nuo, 8 Nov 2026): tiles at the six-photo strip's size and shape (6 across, 12px, 3:4; a phone 2 across, 8px, 4:5),
   left-aligned; artist and work in white over a soft fade at the foot; the description over the photograph on hover or a first tap */
.artwrap .arttiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0 0 32px}
/* centred on a desktop (Nuo, 8 Nov 2026: "centre align the 3 images on desktop"): a row of fewer than six keeps the tile size and sits in the middle */
@media (min-width:1101px){.artwrap .arttiles{display:flex;justify-content:center}.artwrap .arttiles>.atile{flex:0 0 calc((100% - 60px) / 6)}}
.artwrap .atile{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;cursor:zoom-in;background:#E6DDD7}
.artwrap .atile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.artwrap .atile figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:48px 14px 14px;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));color:#fff;transition:top .35s ease,background .35s ease;top:auto}
.artwrap .atile .an{font-family:var(--head);font-size:12px;line-height:1.35;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.artwrap .atile .ad{display:block;max-height:0;opacity:0;overflow:hidden;font-size:14px;line-height:1.45;color:#fff;transition:opacity .3s ease,max-height .35s ease}
@media (hover:hover){.artwrap .atile:hover figcaption,.artwrap .atile:focus-visible figcaption{top:0;background:rgba(0,0,0,.58)}.artwrap .atile:hover .ad,.artwrap .atile:focus-visible .ad{max-height:80%;opacity:1}.artwrap .atile:hover img{transform:scale(1.03)}}
.artwrap .atile.show figcaption{top:0;background:rgba(0,0,0,.58)}.artwrap .atile.show .ad{max-height:80%;opacity:1}
.artwrap .atile:focus-visible{outline:2px solid #F36F23;outline-offset:2px}
@media (min-width:861px) and (max-width:1100px){.artwrap .arttiles{grid-template-columns:repeat(3,minmax(0,1fr))}}   /* the strip's own 3 across here */
@media (max-width:860px){.artwrap .arttiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.artwrap .atile{aspect-ratio:4/5}.artwrap .atile figcaption{padding:36px 10px 10px}.artwrap .atile .an{font-size:11px}.artwrap .atile .ad{font-size:13px}}