/* THE EXPANDER (17 Sep 2026) - one shape for every "more" on the prototype, after Prue on 16 Sep: "too much stuff… get
   what's important to the front and the other stuff down below". Nuo's rule the same day: the default view of every page
   is the minimum, and everything else opens on a click.

   It is a native <details>, deliberately:
     - the content is IN THE HTML, so a crawler or an AI fetcher reads it closed or open (the prerender writes it too);
     - no script is needed for it to work, so a script error cannot lock a section shut;
     - the browser gives it keyboard and screen-reader behaviour for free.
   expand.js adds only what <details> cannot do alone: open the one a URL hash or an in-page link points into, and tell
   the page a section opened so it can re-measure what was drawn at zero width (marks, flip-books, sliders).

   Markup:  <details class="xp" id="spaces"><summary><h2 class="caps">The Spaces</h2><i></i></summary><div class="xp-b">…</div></details>
   The heading inside the summary keeps the document outline; the <i> is the plus that turns into a minus.
   Tokens (--head, --ink, --pad) come from the page's own stylesheet. .xp.dark is the Art page's variant on black. */
.xp{border-top:1px solid rgba(0,0,0,.12);margin:0 var(--pad)}
.xp:last-of-type{border-bottom:1px solid rgba(0,0,0,.12)}
.xp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;-webkit-tap-highlight-color:transparent}
.xp>summary::-webkit-details-marker{display:none}
.xp>summary h2,.xp>summary h3{margin:0;font-size:clamp(20px,1.9vw,26px);font-weight:400;font-family:var(--head);letter-spacing:-0.02em;line-height:1.1}
/* the plus: two hairlines, the vertical one turns away when open. 24px is the tap floor; the summary is the whole row anyway */
.xp>summary i{position:relative;flex:none;width:24px;height:24px;display:block}
.xp>summary i::before,.xp>summary i::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:currentColor;transform:translate(-50%,-50%);transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
.xp>summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.xp[open]>summary i::after{transform:translate(-50%,-50%) rotate(0deg);opacity:0}
/* E7 QUIET ROWS (Nuo, 24 Sep 2026, elegance pass): a 13px caps label on a hairline, no plus sign; an open row's rule is ink. The
   cost is discoverability, accepted; the whole row is still the control and the pointer still says so.
   REVERSED 2 OCT 2026 (Nuo, after Prue's pass on pachamamagroup.com and zephyr.london: "I love the way they use + and - for
   sections to expand and collapse ... increase the font size for the section titles"). Measured on the references: Pachamama's
   accordion titles 24.2px weight 400 with a two-hairline plus; Zephyr's 22.5px caps. So the plus is back and the label is
   clamp(22px,1.9vw,26px) - caps kept (the 23 Sep Prue pass), tracking .02em so caps at this size do not clot. The E7 rules
   below are kept as the record of what was reversed; the 2 Oct rules follow and win by order. */
.xp>summary h2,.xp>summary h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.xp>summary{padding:20px 0}
.xp>summary i,.xp>summary i::before,.xp>summary i::after{display:none}
.xp[open]{border-top-color:var(--ink,#000)}
/* == PLUS AND MINUS, LARGER TITLES 2 OCT 2026 == */
.xp>summary h2,.xp>summary h3{font-size:clamp(19px,1.6vw,22px);letter-spacing:.02em;text-transform:uppercase}   /* a little smaller (Nuo, 3 Oct 2026); was clamp(22px,1.9vw,26px) - 26 at 1440, now 22 */
.xp>summary{padding:26px 0}
.xp>summary i{display:block}
.xp>summary i::before,.xp>summary i::after{display:block;width:18px;height:1.5px}
.xp>summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.xp[open]>summary i::after{transform:translate(-50%,-50%) rotate(0deg);opacity:0}
.xp>summary:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
/* a one-line hint after the title, muted - what the reader will find inside, so a closed row is not a mystery */
.xp>summary .hint{font-size:14px;color:#5a5754;margin-left:auto;margin-right:16px;text-align:right;font-family:var(--body);font-weight:400;letter-spacing:0}
.xp-b{padding:4px 0 40px}
/* == NO RULES, THE SIGN IN A CIRCLE AFTER THE TITLE 25 OCT 2026 == (Nuo, on Scarlett's rows: "do not show any divider lines, make the
   + and - signs smaller and inside a circle and show them right after the section titles"). Wins by order over 2 Oct; the hand-drawn
   pages (Christmas, Private Hire) keep their own drawn sign, so no circle there. */
.xp,.xp:last-of-type,.xp[open],.xp.dark,.xp.dark:last-of-type{border-top:0;border-bottom:0}
.xp>summary{justify-content:flex-start;gap:12px}
.xp>summary i{width:24px;height:24px;border:1.5px solid currentColor;border-radius:50%;box-sizing:border-box}
.xp>summary i::before,.xp>summary i::after{width:10px;height:1.5px}
html.ch .xp>summary i,html.ph .xp>summary i{border:0;border-radius:0}
@media (prefers-reduced-motion:no-preference){
  .xp[open] .xp-b{animation:xpIn .45s cubic-bezier(.2,.8,.2,1) backwards}   /* backwards, not both (13 Oct 2026): a finished animation that keeps
     filling a transform keeps the open section on its own compositing layer, and in Nuo's Chrome 154 what changed inside it afterwards
     (the Spaces readout and dimmed cards as the slider moves) did not repaint */
  @keyframes xpIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}
/* on a dark page (Art) */
.xp.dark{border-color:rgba(242,236,233,.16)}
.xp.dark:last-of-type{border-bottom-color:rgba(242,236,233,.16)}
.xp.dark>summary .hint{color:rgba(242,236,233,.6)}
@media (max-width:860px){
  .xp>summary{padding:20px 0}
  .xp>summary h2,.xp>summary h3{font-size:18px}   /* was 20 (3 Oct 2026) */   /* 2 Oct 2026: the clamp floor is 22px; 20px holds "Private Hire & Events" on one line at 390px with the plus */
  .xp>summary .hint{display:none}
  .xp-b{padding:0 0 28px}
}

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

/* NOTHING INSIDE AN OPEN ROW WAITS FOR A SCROLL-IN (Nuo, 13 Oct 2026: "the site cards on the christmas page are not showing as well!").
   A page's .reveal and motion.js's .mo start at opacity 0 and are shown by an IntersectionObserver that, inside an opened <details>, did
   not fire in his Chrome 154. The row already fades in as it opens (xpIn), so its contents are simply visible. */
.xp[open] .reveal:not(.dim),.xp[open] .mo:not(.dim),.xp[open] .dgdeal:not(.dgdealt){opacity:1!important;transform:none!important}   /* a dimmed card keeps its own dimming */

/* THE UNDERLINE IS THE WORDS' WIDTH (Nuo, 5 Nov 2026, of THE EVENTS PACK: "do not underline more than the text"). footer.js draws the
   hover underline as a background on the row's h2/h3, and a heading in a centred pair carries 36px of left padding (to balance the
   sign on its right), so the line ran 36px past the words (measured at 1760: box 243px, words 207px). The background is now drawn in
   the CONTENT box only, so the line is exactly as long as the title. */
.xp>summary h2,.xp>summary h3{background-origin:content-box;background-clip:content-box}