/* Shared base for the simple prototype pages – careers, esg, privacy, radio-lamington (11 Sep 2026). Tokens,
   nav, hero, pills, reveal, the usual. A page's own stylesheet adds what is particular to it. */
@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}
/* TYPE (11 Sep 2026, after Georgia and John's "typography needs refining"). Two things they were reacting to:
   1. nobody outside the office has Graphik or Solina installed, so everyone saw the Google stand-ins; those are
      now Inter (for Graphik) and Figtree (for Solina), the nearest free faces - Archivo and Karla were wider and
      looser, and Karla has no 300 weight so the 300 the body asked for was silently 400 anyway;
   2. every heading was UPPERCASE at -0.05em: dense caps everywhere is the strongest "corporate chain" signal on
      the page, and the brand rule is Title Case for headings. [REVERSED 23 Sep 2026 by Prue - headings are caps
      again, at -0.03em; see the PRUE PASS block at the end of this file. Point 2 is kept as the argument she overruled.] .caps keeps the head face and the tight leading
      but no longer forces upper case - the site marks are artwork and unaffected, the small labels (.k, nav,
      chips, card qualifiers) stay in caps because they are labels.
   One scale: 12 / 14 / 17 / 22 / 28 / 40 / 64, with 96 as the single display step for a hero h1. Body is 17px
   at weight 400, 16px on a phone. Ragged-left is the default; justify stays only where two text columns sit
   side by side (the venue story, the Radio Lamington and About Us two-column copy, the photobook pages). */
/* --green is the V2 deck's DARK GREEN logo colourway (slides 10-13), which has no hex on any palette slide; #0F4A2C
   was sampled from slide 10 on 12 Sep 2026 (±10 a channel) and replaces the hub's own #2D5C3D, which was never a
   brand colour. One constant here and in about.css, art.css, christmas.css, hire.css and footer.js (--n4); replace
   all six the day John supplies the value. build_prototype_previews.py carries the same constant for the assets. */
:root{--sand:#F2ECE9;--ink:#000;--blue:#1847E8;--orange:#F36F23;--pink:#FF3CA0;--dgreen:#C3E1CC;--green:#0F4A2C;
  --head:"Graphik","Inter",Arial,sans-serif;--body:"Solina","Figtree",Arial,sans-serif;--nav:72px;--pad:40px;--ease:cubic-bezier(.2,.8,.2,1);--accent:var(--orange);--accent-ink:var(--sand)}   /* ORANGE 2 Oct 2026 (Nuo): Neon Orange #F36F23 is the accent on every page but Art - buttons and outlines only, text links keep their inks. The button LABEL in orange on Sandstone is 2.9:1, under the 4.5:1 text floor: Nuo's ruling, recorded with the number. Was var(--blue). */
/* VIEW TRANSITIONS (Tier 3, 11 Sep 2026): pages cross-fade into each other, and the venue card that was clicked grows
   into the venue page's hero (the hero carries view-transition-name vt-<site key>; footer.js DG_VT names the ONE card
   at pageswap). The opt-in has to be in a stylesheet BOTH documents parse before first paint - this one, and its
   equivalent in the six other first-parse stylesheets and the home page's inline style - not motion.css, which
   footer.js adds after render. Chrome 126+, Safari 18.2+; Firefox loads pages as before. Reduced motion: no
   transition at all. The harness asserts every page carries this pair through its own first-parse styles. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
/* WIDE DESKTOPS: SUPERSEDED 19 OCT 2026. The cap is back, by Nuo's choice after Prue's review ("more empty space" on
   desktop): a 1440px content column, gutters that grow with the screen, running text held to ~66 characters, and the
   fixed-width containers reset to a 40px pad so the trap below cannot return. All of it lives in layout.css, linked
   LAST on every page; no rule in this sheet changed. The 13 Sep history is kept below because it explains the trap.
   --- 13 Sep 2026: THERE IS NO CAP, AND THE ABSENCE IS THE DECISION (Nuo, reversing his own instruction of
   the same morning). A 1600px centred column was added at 07:00 as
   `@media (min-width:1681px){:root{--pad:calc((100vw - 1600px) / 2)}}` in this sheet and in nine others; on his
   3440px ultrawide it left ~920px of empty gutter each side and he asked for it out again the same day: "I should
   have never told you to restrict the width."
   HE WAS SHOWN THE ARITHMETIC AND OVERRULED IT, so do not re-derive this from readability alone. Measured at 1920px
   before the cap existed: the About page's body paragraph ran 1564px (196 characters a line), Art's 1822px (214),
   Menus' 1336px (191). At 3440px an About paragraph runs ~3360px, roughly 400 characters. He was offered a
   prose-only measure cap that would have left every grid, photograph, hero and panel full-bleed, and chose "remove
   everything, accept long lines". The lever that would satisfy both is a max measure on running prose only; the
   reason it is not here is his judgement, not an oversight.
   The cap removal also fixed a second thing, and that one is arithmetic rather than taste: --pad was viewport-derived
   while `.panel .bar` on the menus page sits inside a FIXED min(1100px,100%) sheet. At 3440px --pad was 920px a side,
   so 1840px of padding was asked of an 1100px bar and the site name and both pills collapsed into stacked circles.
   ANY future cap that makes --pad grow with the screen brings that back - a container that is not full-viewport-width
   must not pad with a viewport-derived --pad. The cap returned on 19 Oct 2026, so layout.css resets --pad to 40px on
   .panel .sheet, dialog, .reader, .mmenu, .lb, .issue-page .reading and [role="dialog"]. */
*{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:clip}   /* clip, NOT hidden - see the note at html{overflow-x:clip} below: hidden here kills position:sticky on every page */
a{color:inherit;text-decoration:none}
img{display:block}
button{font:inherit;cursor:pointer;color:inherit}
/* HEADINGS ARE GRAPHIK REGULAR (13 Sep 2026, Nuo: "change to make them consistent with branding guidelines").
   V2 slides 48-49: Graphik Regular "for headlines and display copy"; Medium "for emphasis, such as on names for
   business cards". Every heading, title, display figure and card/venue/dish name in the prototype is 400 now;
   500 survives only where the deck uses it - a person's name set as emphasis, a small caps label, emphasis
   inside running text. Same rule in every page stylesheet. */
.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:12px;letter-spacing:.08em;color:#3f3c39}
/* PILLS ARE OUTLINES (13 Sep 2026, same instruction). V2 slide 79, Web Button: "Background should be sandstone or
   same as page background, with outline and text in accent neon black or black. Outline of button 2px." So no
   pill carries a fill, at rest or on hover. `.fill` is kept as a class name because 40 templates use it: it now
   means "accent outline" (accent border and text) against the default black outline; hover swaps the two.
   Pills on DARK grounds (.light, the pack bar, photo overlays) are outside the slide's spec and keep their
   white-on-hover, which is the only legible hover there. */
.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:border-color .2s,color .2s}
.pill.fill{background:transparent;border-color:var(--accent);color:var(--accent)}
.pill.light{border-color:#fff;color:#fff}
@media (hover:hover){.pill:hover{background:transparent;border-color:var(--accent);color:var(--accent)}
.pill.fill:hover{border-color:var(--ink);color:var(--ink)}}
.pill.big{font-size:18px;padding:18px 32px}
section{padding:0 var(--pad)}
h2.caps{font-size:clamp(28px,2.8vw,40px);margin-bottom:28px}
h3.caps{font-size:clamp(22px,2vw,28px)}
.hd{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* justified type breaks long words at a hyphen (Nuo, 11 Sep 2026: "break up some words like through-out to make the
   text fit nicely") – every page carries lang="en-GB", which is what the browser's hyphenation needs; footer.js sets
   the limits (six-letter words or longer, three letters either side of the break) for every page */
p.body{font-size:17px;line-height:1.5;color:#2b2926;max-width:68ch;hyphens:auto;-webkit-hyphens:auto;margin-bottom:1em}

/* 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(--accent);background:transparent;color:var(--accent)}   /* outline, not a fill: V2 slide 79 (13 Sep 2026) */

/* hero: full bleed photograph, slow zoom, one word */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#111;color:#fff;padding:0}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;animation:drift 40s ease-in-out infinite alternate;transform-origin:50% 55%}
/* 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,.55) 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.03em;line-height:.96}   /* the display step; was up to 140px in caps */
/* each line is an overflow:hidden clip for the rise-in. At line-height .96 the clip is SHORTER than the glyphs, so a
   descender on the line's letters (the g of "Lamington Boxes") was cut off (Nuo, 13 Sep 2026: "why is the bottom of
   the g cut off"). The clip gets .2em of room below, taken back as margin so the line spacing does not move, and the
   span starts its rise further down so none of it shows through the extra room before the animation begins. */
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.hero h1 .l span{display:inline-block;transform:translateY(135%);animation:rise 1s var(--ease) forwards}
.hero h1 .l:nth-child(2) span{animation-delay:.12s}
@keyframes rise{to{transform:none}}
.hero .pill{opacity:0;animation:fade 1s .6s var(--ease) forwards}
@keyframes fade{to{opacity:1}}
/* == ONE PAGE TITLE (Nuo, 15 Oct 2026: "make all the page titles look consistent, should be in smaller font in bottom centre with the
   same appear animations", with Radio Lamington's as the model; asked, he kept Our Collection, Shop and Green Pages as they are).
   index.html's .hero .hline, the rules about.css, menus.css, hire.css, art.css, christmas.css and rl.css each carry, here ONCE for
   the pages that had the big rising title: Press, Sustainability, Charity, Careers, Privacy Policy. footer.js DG_TAGLINE lays the
   letters out; each page calls it after drawing. */
.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}}
@media (max-width:860px){.hero .hline{bottom:56px;font-size:18px;letter-spacing:.04em}}
.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)}}
.hero.short{height:62svh;min-height:420px}

/* chapter pills (as About) */
.chapters{position:fixed;top:var(--nav);left:0;right:0;z-index:45;display:flex;justify-content:center;gap:6px;padding:8px var(--pad);opacity:0;visibility:hidden;transform:translateY(-16px);transition:opacity .35s,transform .35s var(--ease),visibility 0s .35s;pointer-events:none}
.chapters.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .35s,transform .35s var(--ease),visibility 0s}
.chapters a{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;padding:8px 14px;border-radius:999px;background:rgba(242,236,233,.85);backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.08);transition:background .2s,color .2s}
.chapters a.here{background:var(--ink);color:var(--sand);border-color:var(--ink)}

/* mosaic + lightbox (as Private Hire) */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:200px;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)}}
.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}
body.locked{overflow:hidden}

/* the flip-book's styles moved to flipbook.css on 15 Sep 2026 - one copy, shared with hire.css and
   the Christmas pack; load it before this file. */


/* an in-page anchor lands under the fixed nav without this (measured 10 Sep 2026: #report, the RL chapters) */
section[id],[id].anchor{scroll-margin-top:calc(var(--nav) + 20px)}
/* one word that cannot break – "#aLamingtonforaLamington" at 34px is 498px – must never widen the page: at
   390px it pushed the layout viewport to 518px and put the nav's own button off the screen (measured) */
h1,h2,h3,p,li,dd,dt{overflow-wrap:anywhere}
/* CLIP, NOT HIDDEN - AND THE BODY RULE ABOVE HAD TO CHANGE WITH IT, OR position:sticky IS DEAD ON EVERY PAGE
   THAT LOADS THIS FILE. Measured 14 Sep 2026 on /collection/, whose left-hand chapter spine and sticky chapter
   headings simply did not stick: the spine's top measured -180px against its own `top:98px`.
   The mechanism. `overflow-x:hidden` on body normally costs nothing, because the browser PROPAGATES body's
   overflow up to the viewport and then treats the body box itself as `visible`. That propagation happens only
   while html's own overflow is `visible` - and line 169 here sets html to `clip`. So the propagation stopped,
   body became a scroll container in its own right, and every position:sticky inside it began sticking to BODY's
   scrollport rather than to the viewport. Body's scrollport never scrolls (its scrollHeight equals its height:
   4805 = 4805), so nothing ever sticks. Nothing errors, nothing is red, and the element just sits in the flow.
   `clip` is the fix because clip is `hidden` WITHOUT a scroll container - which is the entire reason the keyword
   exists. Same visual result, sticky alive. Proved in the browser: with hidden, spine top -180; with clip, top
   98, exactly its declared offset.
   NOTE shop.css line 23, which carries a bare `body{overflow-x:clip}` with no comment. Shop is the only other
   page that loads page.css AND uses sticky, so somebody met this fault, fixed their own page and did not write
   down why - which is why it was waiting here to be met again. That line is now redundant; it is left alone
   because removing it changes nothing and this note is the record. */
html{overflow-x:clip}

@media (max-width:1100px){.mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:160px}}
@media (max-width:860px){
  :root{--nav:60px;--pad:20px}
  .nav ul{display:none}.nav .book{padding:10px 16px;font-size:13px}
  .chapters{display:none}                                              /* the floating chapter pills hide too much of a phone (Nuo, 10 Sep) */
  .hero{min-height:480px}.hero .copy{bottom:44px;flex-direction:column;align-items:flex-start}
  .hd{flex-direction:column;align-items:flex-start;gap:12px}          /* heading and its paragraph stack; side by side they shared 350px */
  body{font-size:16px}p.body{font-size:16px}                          /* one step down the scale on a phone */
  .mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px;gap:8px}
  /* Expand on a phone: the desktop rule kept 72px side padding and a --bh of (100vw-144)/1.4134 = 174px, so the
     full-screen report was a 246x174 box in a black overlay (measured). Full screen means full screen. */
}
/* reduced motion: every ambient and entrance animation in the shared base stops, and the page still reads.
   The four bundles that use page.css add nothing of their own here; motion.css carries the same rule for
   the layer it adds. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero img.bg,.hero .cue,.hero h1 .l span,.hero .pill{animation:none}
  .hero h1 .l span{transform:none}.hero .pill{opacity:1}
  .reveal{opacity:1;transform:none;transition:none}
  .tile img{transition: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)}}