/* Green Pages: the landing deck and the flip-book reader (11 Sep 2026). Shared by green-pages/index.html
   and every generated green-pages/issue-N/index.html. Same brand tokens as the site pages. */
@font-face{font-family:"Graphik";src:local("Graphik Regular"),local("Graphik-Regular");font-weight:400}
@font-face{font-family:"Graphik";src:local("Graphik Medium"),local("Graphik-Medium");font-weight:500}
@font-face{font-family:"Solina";src:local("Solina Book"),local("Solina-Book");font-weight:300}
:root{--sand:#F2ECE9;--ink:#000;--blue:#1847E8;--orange:#F36F23;--pink:#FF3CA0;--dgreen:#C3E1CC;
  --head:"Graphik","Inter",Arial,sans-serif;--body:"Solina","Figtree",Arial,sans-serif;--nav:72px;--pad:40px}
@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. */
*{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;min-height:100svh}
/* 100svh, NOT 100vh (16 Sep 2026). Measured on Nuo's iPhone, Safari 26.6.1: the visible area is 796px and a
   100vh box lays out at 836 - vh is the LARGE viewport, the height with the toolbars hidden. So this floor was
   40px taller than the screen and every issue scrolled a little even when its content was shorter than the
   page. svh is the height with the toolbars SHOWN, which is the state a reader arrives in, and it is the right
   unit for a minimum: it can only ever be too short, never too tall, and too short is what min-height is for.
   Not dvh: this tracks nothing, it is a floor, and a floor that grows and shrinks under the reader as the
   toolbar moves would reflow the page while they read it. */
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}
.k{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:#3f3c39}
.pill{font-family:var(--head);font-size:14px;letter-spacing:-0.01em;padding:12px 20px;border:2px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);display:inline-block}
.pill.fill{background:transparent;border-color:var(--blue);color:var(--blue)}   /* outlines only - V2 slide 79 (13 Sep 2026) */
.pill.light{border-color:#fff;color:#fff}
.pill.sand{background:var(--sand);border-color:var(--sand);color:var(--ink)}   /* the rack's "Read" pill used this class and had no rule: ink on a dark gradient */
@media (hover:hover){.pill:hover{background:transparent;border-color:var(--blue);color:var(--blue)}
.pill.fill:hover{border-color:var(--ink);color:var(--ink)}}
.linkish{border:0;background:none;color:var(--blue);text-decoration:underline;font:inherit;text-transform:none;letter-spacing:0;padding:4px 0;margin:-4px 0} /* 17px tall bare - under the 24px tap floor; the negative margin keeps the line where it was (25 Sep 2026) */

/* nav, solid sand: these pages have no photographic hero */
.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);background:var(--sand);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.nav .logo{height:24px;width:auto}
.nav ul{display:flex;gap:28px;list-style:none;font-family:var(--head);text-transform:uppercase;font-size:13px;letter-spacing:.02em;white-space:nowrap}
.nav ul .here{border-bottom:2px solid var(--ink);padding-bottom:2px}
.nav .book{flex:0 0 auto;font-family:var(--head);font-size:14px;padding:12px 20px;border:2px solid var(--blue);border-radius:999px;color:var(--blue);background:transparent;white-space:nowrap}

/* ---- landing ---- */
/* tight hero (Nuo, 11 Sep): smaller title, both words dark green; the kicker and the text share the right
   column, top-aligned with GREEN; little padding so the deck shows on load */
/* kicker above the title, both left-aligned; the text sits in the right column bottom-aligned with the title */
.gp-hero{padding:calc(var(--nav) + 24px) var(--pad) 0;display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:end}
.gp-hero h1{font-size:clamp(36px,4.6vw,76px);letter-spacing:-0.02em;line-height:1.02;white-space:nowrap;color:var(--ink);text-transform:uppercase}   /* one line, black (Nuo, 11 Sep); ALL CAPS (Nuo, 13 Sep) - by CSS, so the words stay "Green Pages" for search and screen readers */
.gp-hero h1 span{display:inline;color:var(--ink)}
/* the two words are separated by a real space in the markup (13 Sep 2026), not by this margin: with the margin alone the
   title's text read "GreenPages" to screen readers and crawlers (seen in the prerender). A space at this size is ~.25em. */
.gp-hero p{font-size:clamp(16px,1.25vw,19px);line-height:1.4;max-width:60ch;color:#2b2926;padding-bottom:.1em}   /* one sentence a line */
.gp-hero p .s{display:block}   /* each sentence a block: the same three lines the <br>s gave, and a hook for the phone's blank line below */
.gp-hero .k{margin-bottom:10px;line-height:1}

/* the deck: covers stacked and fanned, newest on top. Each card sits in the same spot and is turned and
   nudged by --i (its depth); the top card is upright. Hover lifts; drag or arrow keys riffle. */
/* the fan hangs below and left of the deck box (rotated cards), so the wrap carries the room for it and the
   shelf sits above the cards' z-index on its own ground (it was overlapped, 11 Sep) */
/* the deck box is barely taller than the top card, so the hero and the magazines sit close (Nuo, 11 Sep) */
.deck-wrap{padding:40px var(--pad) 72px;display:grid;grid-template-columns:1fr minmax(320px,30%);gap:24px;align-items:center}
.deck{position:relative;height:min(64vh,620px);perspective:1600px;touch-action:pan-y;user-select:none}
/* the top card sits at the right of its column, next to the text; the fan trails away to the left (Nuo, 11 Sep) */
/* the fan spreads LEFT and slightly UP from the top card (Nuo, 11 Sep: not down, never cut off): each card
   behind turns a little about its own centre and steps 46px left, 6px up */
.gcard{position:absolute;left:72%;top:50%;width:min(42vh,400px);aspect-ratio:170/240;transform-origin:50% 50%;
  transform:translate(-50%,-50%) translate(calc(var(--i) * -58px), calc(var(--i) * -6px)) rotate(calc(var(--i) * -2.4deg)) scale(calc(1 - var(--i) * 0.03));
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s,opacity .4s;z-index:calc(40 - var(--i));cursor:pointer;
  border-radius:8px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.22),0 2px 6px rgba(0,0,0,.18);filter:brightness(calc(1 - var(--i) * 0.06));will-change:transform}
.gcard img{width:100%;height:100%;object-fit:cover}
.gcard .typo{width:100%;height:100%;padding:24px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.gcard .typo .caps{font-size:clamp(28px,4vh,44px);letter-spacing:-0.02em}
.gcard .typo small{font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.08em;opacity:.9}
.gcard .tag{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.92);color:var(--ink);font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;padding:6px 10px;border-radius:999px;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s}
@media (hover:hover){.gcard:hover{filter:brightness(1)}
.gcard[style*="--i:0"]:hover{transform:translate(-50%,-53%) rotate(-1deg) scale(1.03)}}
.gcard[style*="--i:0"] .tag{opacity:1;transform:none}
.gcard.gone{opacity:0;transform:translate(-50%,-50%) translateX(70vw) rotate(24deg);pointer-events:none}
.deck.dealing .gcard{animation:deal .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 60ms)}
@keyframes deal{from{transform:translate(-50%,40vh) rotate(18deg) scale(.9);opacity:0}to{opacity:1}}
.deck-side{display:flex;flex-direction:column;gap:18px;min-width:220px}
.deck-side .now{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;line-height:1.02;font-size:clamp(28px,2.8vw,40px)}
.deck-side .now small{display:block;text-transform:uppercase;font-size:12px;letter-spacing:.08em;margin-top:8px;color:#3f3c39}
.deck-side .row{display:flex;gap:10px;align-items:center}
.deck-side .arrow{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:transparent;font-size:18px;display:grid;place-items:center}
@media (hover:hover){.deck-side .arrow:hover{background:var(--ink);color:var(--sand)}}
.deck-side .arrow:disabled{opacity:.3;cursor:default}@media (hover:hover){.deck-side .arrow:disabled:hover{background:transparent;color:inherit}}   /* the run stops at issue 1 and at the newest */
/* THE SECOND `}` ABOVE WAS MISSING UNTIL 14 SEP 2026, AND IT COST THE WHOLE RACK ON EVERY PHONE.
   With one brace, this @media (hover:hover) stayed OPEN and swallowed everything down to the `}}` that used to
   close `.mag:hover .cov` - the lead list, .shelf, .shelf h2, .rack, .mag, @keyframes dropin, .mag .cov and its
   .typo. A phone reports hover:none, so NONE of that applied: .rack never became a grid, .mag .cov never got its
   aspect-ratio, border-radius, overflow or tilt, and each magazine rendered as a bare full-width block. The
   @media (max-width:860px) rule below was setting grid-template-columns on an element whose display was `block`,
   which does nothing - so the stylesheet read as correct at every point anyone looked at it, and the live
   computed value of grid-template-columns even came back as the authored `repeat(2, 1fr)` string, because an
   unresolved track list is what a non-grid element reports. Measured in a 375px viewport: .rack display `block`,
   every .mag 375px wide.
   TWO LESSONS. A one-line rule that both declares and opens an @media is where a brace goes missing, because the
   line already ends in `}` and looks balanced. And a CSS fault has no console: the only way to catch this class is
   to read computed `display` on a touch viewport, which is what audit_green_pages.js should now do. */
.gp-hero p,.deck-side .lead li,.mag .peek li{hyphens:auto;-webkit-hyphens:auto}   /* justified everywhere (Nuo, 10 Sep) */
.deck-side .lead{font-size:15px;line-height:1.45;color:#2b2926;max-width:34ch;list-style:none;padding:0}
.deck-side .lead li{padding-left:14px;position:relative;margin-bottom:4px}
.deck-side .lead li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--blue)}

/* ---- the rack (Nuo, 11 Sep): every issue as a big cover standing on a shelf line, tilted like a newsstand.
   They drop in one by one when the rack scrolls into view (.shelf.in); hover straightens and lifts a cover
   and slides its contents up over it. Covers lead; number and month sit small underneath. ---- */
.shelf{padding:48px var(--pad) 110px;border-top:1px solid rgba(0,0,0,.1);position:relative;z-index:45;background:var(--sand);overflow:hidden}
/* z-index 45, not 60 (Nuo, 8 Nov 2026: "Menu on mobile is hidden behind every issue section"): above the cards (40 at most), under the bar (50) and its drawer */
.shelf h2{font-size:clamp(28px,2.8vw,40px);letter-spacing:-0.02em;margin-bottom:36px}
/* minmax(0,1fr) rather than 1fr, and min-width:0 on the item: hardening, not the fix. The phone fault was the
   runaway @media noted above; this was written first on a guess and left in place because it is right anyway.
   A `1fr` track is minmax(AUTO,1fr), so its floor is the item's min-content width and a track can refuse to
   shrink - which would overflow a 390px phone the moment a cover caption gained a long word. Cost: nothing. */
/* SIX ACROSS ON A DESKTOP, AND THE COVERS DO NOT TOUCH (Nuo, 23 Sep 2026: "for every issue, show 6 issues side by side on desktop" - his screenshot had five, and issues 9 and 8 overlapping). Five 1fr columns with ±2.2° of tilt let a cover's corners cross into its neighbour; six columns, a 32px gutter and the tilt held to ±1° keep every cover inside its own track. */
.rack{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:48px 32px;perspective:1400px}
@media (min-width:861px) and (max-width:1180px){.rack{grid-template-columns:repeat(4,minmax(0,1fr))}}   /* a tablet: four; the phone rule (two) is below */
.mag{display:block;opacity:0;transform:translateY(-70px);min-width:0}
.shelf.in .mag{animation:dropin .75s cubic-bezier(.34,1.45,.44,1) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes dropin{0%{opacity:0;transform:translateY(-70px) rotate(var(--tilt))}70%{opacity:1;transform:translateY(6px) rotate(var(--tilt))}100%{opacity:1;transform:none}}
.mag .cov{position:relative;display:block;aspect-ratio:170/240;border-radius:6px;overflow:hidden;background:#111;box-shadow:0 18px 36px rgba(0,0,0,.18),0 2px 4px rgba(0,0,0,.14);transform:rotate(var(--tilt));transform-origin:50% 100%;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.mag .cov img,.mag .cov .typo{width:100%;height:100%;object-fit:cover}
.mag .cov .typo{padding:18px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.mag .cov .typo .caps{font-size:clamp(22px,2vw,28px);letter-spacing:-0.02em}
.mag .cov .typo small{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.08em;opacity:.9}
/* no shelf line under the captions (Nuo, 11 Sep) */
@media (hover:hover){.mag:hover .cov{transform:rotate(0) translateY(-14px) scale(1.04);box-shadow:0 34px 60px rgba(0,0,0,.28),0 4px 8px rgba(0,0,0,.14);z-index:5}}   /* its own block now: it used to close the runaway one opened 28 lines above */
.mag .peek{position:absolute;left:0;right:0;bottom:0;padding:16px 16px 18px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.82) 30%);color:#fff;transform:translateY(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:8px}
.mag .peek .k{color:rgba(255,255,255,.75)}
.mag .peek ul{list-style:none;font-size:13px;line-height:1.35}
.mag .peek li{padding-left:12px;position:relative;margin-bottom:3px}
.mag .peek li::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;background:var(--dgreen)}
.mag .peek .pill{align-self:flex-start;padding:8px 14px;font-size:12px;margin-top:4px}
@media (hover:hover){.mag:hover .peek,.mag:focus-visible .peek{transform:none}}
.mag .lbl{display:block;padding-top:12px;text-align:center}
.mag .lbl b{font-weight:300;font-family:var(--head);text-transform:uppercase;font-size:14px;letter-spacing:-0.01em;display:block}
.mag .lbl small{font-size:12.5px;color:#3f3c39;display:block;margin-top:2px}

/* ---- reader ---- */
.reader{position:fixed;inset:0;z-index:100;background:#141414;color:#fff;display:none;flex-direction:column;opacity:0;transition:opacity .35s}
.reader.on{display:flex}.reader.in{opacity:1}
.reader .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--pad);font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.06em}
.reader .bar .ttl{display:flex;align-items:center;gap:14px}
.reader .bar .ttl b{font-weight:500;font-size:14px;letter-spacing:-0.02em}
.reader .bar .acts{display:flex;gap:10px;align-items:center}
.reader .bar .pill{padding:9px 14px;font-size:12px}
.reader .stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 72px 24px;position:relative}
.reader .arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(0,0,0,.3);color:#fff;font-size:20px;display:grid;place-items:center;z-index:5}
@media (hover:hover){.reader .arrow:hover{background:#fff;color:#141414}}
.reader .arrow.prev{left:16px}.reader .arrow.next{right:16px}
/* .flipbook, not .book: the nav's Book-a-table button is class "book" and took width:100%/height:100%
   from this rule (the header exploded, 11 Sep).
   height:100% IS THE PAGE-HEIGHT CAP. The page-turn library sizes its pages from the width of this box and, when
   that would overflow the box's HEIGHT, from the height instead (its source, read 13 Sep 2026); its maxHeight
   option is never read. So this rule is what keeps a spread inside a short laptop stage, and what lets it grow
   into the extra height in the browser's fullscreen. Do not drop the height. */
.flipbook{width:100%;height:100%;max-width:1400px}
.flipbook.loading{display:grid;place-items:center;font-family:var(--head);text-transform:uppercase;font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.7);text-align:center;padding:24px}
/* page after page, a vertical scroll: the phone's layout from 11 Sep to 13 Sep 2026 (Nuo), now the fallback on
   any device when the page-turn library cannot be loaded or draws nothing */
.flipbook.scroll{overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:8px 0 80px;-webkit-overflow-scrolling:touch;scroll-snap-type:y proximity}
.flipbook.scroll .gp-page{width:100%;flex:0 0 auto;border-radius:6px;scroll-snap-align:start}
.gp-page{background:#fff;overflow:hidden;position:relative;container-type:size}
.gp-page img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff;pointer-events:none}
/* the words: the PDF's own text at its real position, invisible over the image, selectable and readable */
.gp-page .tl{position:absolute;inset:0}
.gp-page .tl span{position:absolute;color:transparent;white-space:pre;line-height:1;font-family:Arial,sans-serif;font-size:calc(var(--s) * 100cqh);left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);transform-origin:0 0;cursor:text}
.gp-page .tl span::selection{background:rgba(24,71,232,.35)}
.gp-page .tl a{color:transparent}
.reader .bar .count{opacity:.8}
.grow{position:fixed;z-index:99;border-radius:8px;overflow:hidden;background:#111;transition:top .5s cubic-bezier(.2,.8,.2,1),left .5s cubic-bezier(.2,.8,.2,1),width .5s cubic-bezier(.2,.8,.2,1),height .5s cubic-bezier(.2,.8,.2,1),border-radius .5s}
.grow img{width:100%;height:100%;object-fit:cover}
body.reader-open{overflow:hidden}

/* ---- the issue page's reading view ---- */
.issue-page .reading{padding:calc(var(--nav) + 48px) var(--pad) 96px;max-width:860px;margin:0 auto}
.reading .rhd{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-bottom:40px;padding-bottom:24px;border-bottom:1.5px solid var(--ink)}
/* the header's first row, made by reader.js on an issue page: All issues at the left, Back at the right, the two
   pills centred on each other (Nuo, 13 Sep 2026). align-self:stretch because .rhd packs its children to the left. */
.reading .rhr{display:flex;align-items:center;justify-content:space-between;gap:12px;align-self:stretch}
.reading h1{font-size:clamp(34px,5vw,64px);letter-spacing:-0.02em}
.reading article h2{font-family:var(--head);font-weight:400;letter-spacing:-0.02em;line-height:1.02;font-size:clamp(28px,2.8vw,40px);margin:48px 0 14px}
.reading article h3{font-family:var(--head);font-size:18px;letter-spacing:-0.01em;margin:28px 0 8px}
.reading article p{font-size:17px;line-height:1.55;color:#2b2926;margin-bottom:14px;hyphens:auto;-webkit-hyphens:auto}
.reading article [data-page]{position:relative}

@media (max-width:860px){
  :root{--nav:60px;--pad:20px}body{font-size:16px}   /* one step down the scale on a phone */
  .nav ul{display:none}.nav .book{padding:10px 16px;font-size:13px}
  /* A BLANK LINE BETWEEN THE THREE SENTENCES, AND THE MAGAZINES DO NOT MOVE (Nuo, 13 Sep 2026). Two blank lines at 16px x 1.4
     are 44.8px; the deck's 40px top padding and 5px of the hero's gap give them back, so the top card stays at y=422 at
     390px (measured before and after). Desktop keeps its three tight lines and its 40px. */
  .gp-hero{grid-template-columns:1fr;gap:11px;padding-top:calc(var(--nav) + 24px)}
  .gp-hero h1{margin-top:0}
  /* TIGHTER 29 SEP 2026 (Nuo: "on mobile, reduce the space between each line of the text, make the cards for the issues bit
     larger"). Lines 1.4 -> 1.25 and the gap between sentences 1.4em -> 0.6em, so the deck no longer sits at the y=422 the note
     above measured - it rises ~40px, which is the point. The top card 58vw -> 66vw (cap 300 -> 340px): at 390px, 226 -> 257px
     wide, and still inside the deck's box at left 58%. */
  .gp-hero p{line-height:1.25}
  .gp-hero p .s + .s{margin-top:.6em}
  .deck-wrap{grid-template-columns:1fr;gap:20px;padding-top:0}
  .deck{height:64vh}
  .gcard{width:min(66vw,340px);left:58%}
  .deck-side{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
  .deck-side .lead{display:none}
  .rack{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 12px}   /* THREE side by side on a phone (Nuo, 29 Sep 2026; two before) - see the minmax note on the base rule */
  .mag .lbl{padding-top:8px}.mag .lbl b{font-size:12px}.mag .lbl small{font-size:11px;line-height:1.25}   /* a ~110px column at 390: "September 2026 · 52 pages" wraps to two lines at 11px, the names floor */
  .mag .peek{display:none}                                 /* no hover on a phone: tap opens the issue */
  .reader .stage{padding:0 8px 12px}
  .reader .arrow{width:40px;height:40px;top:auto;bottom:14px;transform:none}
  .reader .arrow.prev{left:14px}.reader .arrow.next{right:14px}
  .reader .bar{padding:10px var(--pad)}
  .reader .bar .ttl span{display:none}
  /* no "Read as text" (Nuo, 11 Sep 2026) and no "Fullscreen" (Nuo, 13 Sep 2026) on a phone: the bar has room for
     the title, the count and Close, and a pill on a phone's bar wraps the title (below). audit_green_pages.js
     asserts both stay hidden here. */
  .reader .bar #rdText,.reader .bar #rdFull{display:none}
  .reader .bar .ttl b,.reader .bar .count{white-space:nowrap}   /* "ISSUE 6" and "1 / 52" were breaking over two lines */
}

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

/* == E9 ONE BUTTON (Nuo, 24 Sep 2026, elegance pass) == every button in copy on the prototype is the same object: outline,
   8px corners, 13px caps in the head face, a 1.5px rule, no fill. Colour is the context's through currentColor (ink on
   Sandstone, white on a photograph); the tinted and filled variants (.fill .blue .sand .light) lose their tint. Floating
   chrome - the Map fab, dialog close buttons, the tour's Close - is not a button in copy and keeps its shape. The same
   text sits in every first-parse stylesheet, cards.css and collection.css; audit_prototype_caps.js checks each carries it. */
.pill,.nav .book,button.book,.card .bk:not(.walk),.mapcard .mcbk,.place .go,.place .bk,.ev .go,.enq .chips button,.chips button,.guide button,.railnav button{border-radius:8px;font-family:var(--head);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;border-width:1.5px;border-style:solid;background:transparent;box-shadow:none}
.pill.fill,.pill.blue,.pill.sand,.pill.light,.pill.dark,.nav .book,.card .bk:not(.walk),.place .go,.place .bk{color:inherit;border-color:currentColor;background:transparent}
.nav .book{color:#fff;border-color:currentColor}.nav.solid .book{color:var(--ink,#000);border-color:currentColor}   /* the bar's Book: white over a photograph, ink on the Sandstone bar - the one place inherit is wrong (the bar's own colour is ink while its links are white) */
@media (hover:hover){.pill:hover,.nav .book:hover,.card .bk:not(.walk):hover{background:transparent;color:inherit;border-color:currentColor;opacity:.7}}
/* == BUTTONS: BLACK, BLUE ON HOVER 3 OCT 2026 == Nuo: "on all the pages, make all the buttons show as black font with black border, turn
   them blue when the mouse hovers over them; except the art page on black: white, neon green on hover; and the christmas page on
   black: white, neon orange on hover". REVERSES the 2 Oct orange-accent block (kept above as the record). Shape, size, caps and no
   fill stand (E9). Light ground: ink rule and label; on hover Neon Orange #F36F23 (Nuo, 3 Oct 2026, 11:45 - was Neon Blue from that morning). A button over a photograph, on a card or on a dark
   bar stays white. art.css and christmas.css set --btn / --btn-hover on body for their black grounds. */
body .pill:not(.light),body .pill.fill,body .pill.blue,body .pill.dark,body .panel.dg .pill,body button.book,body .nav.solid .book,body .mapcard .mcbk,body .ev .go,body .enq .chips button,body .chips button,body .guide button,body .railnav button,body .cats .mchip,body .cats .cpill:not(.here){color:var(--btn,#000);border-color:var(--btn,#000)}   /* `body` prefix: out-ranks a page's own two-class pill rules (About's .pledge .bc a.pill, .lam a.pill) so one rule holds everywhere */
.nav:not(.solid) .book,.place .go,.place .bk,.hero .pill,.card .bk:not(.walk),.pill.light{color:#fff;border-color:currentColor}
@media (hover:hover){body .pill:hover,body .nav.solid .book:hover,body button.book:hover,body .cats .mchip:hover,body .cats .cpill:not(.here):hover,body .gbtn:hover{color:var(--btn-hover,#F36F23);border-color:var(--btn-hover,#F36F23);opacity:1;background:transparent}
.nav:not(.solid) .book:hover,.place .go:hover,.place .bk:hover,.hero .pill:hover,.card .bk:not(.walk):hover,.pill.light:hover{color:var(--btn-hover,#F36F23);border-color:var(--btn-hover,#F36F23)}}
/* PHONE, 27 Sep 2026 (Nuo: "hide this part from green pages page on mobile"): the deck's side panel - issue title, date and pages,
   the two arrows and Read this issue - is not drawn on a phone. The deck itself still opens the issue on a tap (reader.js). */
@media (max-width:860px){.deck-side{display:none}}
/* == EVERY ISSUE FILLS THE ROW 27 SEP 2026 == Nuo: "for superwide screens, show all the issues side by side, adjust the number of
   issues per line dynamically with page and screen width". A cover is at least 140px wide and the row takes as many as fit
   (auto-fill), so a 1900px-plus screen shows all eleven on one line, 1440 eight, a tablet five or six; the phone keeps its two
   (the rule below 861px). Replaces the fixed six (and four in the 861-1180 band). */
@media (min-width:861px){.rack{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:40px 20px}}
/* the site-wide deal (footer.js DG_DEAL) takes over a cover's arrival: its own drop-in yields, and a dealt cover rests visible */
.shelf.in .mag.dgdeal{animation:none}
.shelf.in .mag.dgdeal.dgdealt{animation:dgDealX .72s cubic-bezier(.2,.8,.2,1) var(--dly,0ms) backwards}
.mag.dgdeal.dgdealt{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.mag{opacity:1;transform:none}}

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

/* == ZOOM IN THE READER 6 OCT 2026 == (Nuo, interviewed: − / + pills and Fit on desktop, Ctrl + wheel and trackpad pinch; on a
   phone a two-finger pinch and double-tap, no pills; max 3x; a drag pans while zoomed). reader.js does the work. The stage clips
   the zoomed book, or it would spill over the bar. touch-action:none over the whole reader gives every touch to reader.js, so a
   pinch zooms the BOOK and not the whole page with the bar in it, and a double-tap is not the browser's own zoom; the scroll
   fallback keeps its vertical pan (its own scroller is nearest, so the reader's none does not reach that pan). − and + are as
   tall as the pills beside them (same type, so the same height) and 40px wide; Fit shows only while zoomed. */
.reader{touch-action:none}
.reader .flipbook.scroll{touch-action:pan-y}
.reader .stage{overflow:hidden}
.reader .bar .zb{width:40px;padding-left:0;padding-right:0;text-align:center}
.reader .bar .zb:disabled{opacity:.35;cursor:default;pointer-events:none}
.reader:not(.zoomed) .bar #rdFit{display:none}
.reader.zoomed .stage{cursor:grab}
.reader.zoomed.panning .stage{cursor:grabbing}
.reader.zoomed .flipbook{user-select:none;-webkit-user-select:none}
@media (max-width:860px){.reader .bar #rdZoomOut,.reader .bar #rdZoomIn,.reader .bar #rdFit{display:none}}
/* == THE SHUFFLE MUST NOT WIDEN THE PAGE 7 OCT 2026 == Nuo, on a phone: "the page jumps weird" when the issues shuffle. A riffled
   card leaves with translateX(70vw) for 260ms and nothing clipped it, so for that moment the page was wider than the screen and a
   phone could pan or rescale it. clip, not hidden: hidden would make .deck-wrap a scroll box and cut the fan's shadows top and
   bottom; clip cuts only the sideways overflow. Cause INFERRED from the symptom - not reproduced on an iPhone. */
.deck-wrap{overflow-x:clip}

/* == SQUARE AND STRAIGHT 19 OCT 2026 == (Prue's review: "I feel like maybe we should square these all off ... sharp edges ... more
   elegant"; the rack read as magazines dropped at random). Every cover is sharp-cornered, the rack's covers stand straight (the
   per-cover --tilt is pinned to 0, so the drop-in and the hover lose their lean too), and the hover only lifts - no turn, no
   zoom. The deck's fan keeps its spread (that is how it shows there are more issues); its cards are sharp-cornered too. */
.rack .mag{--tilt:0deg!important}
.mag .cov,.gcard,.grow,.flipbook.scroll .gp-page{border-radius:0}
.mag .cov{box-shadow:0 10px 24px rgba(0,0,0,.14),0 1px 3px rgba(0,0,0,.12)}
@media (hover:hover){.mag:hover .cov{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.2),0 2px 4px rgba(0,0,0,.12)}}

/* THE READER ON SANDSTONE (6 Nov 2026 website meeting: "I'd probably do the sandstone background instead of black"). Ink type and
   ink controls; the pages keep their white. */
.reader{background:var(--sand,#F2ECE9);color:#000}
.reader .bar .pill,.reader .bar button{color:#000!important;border-color:#000!important}
.reader .arrow{border-color:#000;background:rgba(242,236,233,.8);color:#000}
@media (hover:hover){.reader .arrow:hover{background:#000;color:#F2ECE9}}
.flipbook.loading{color:#3f3c39}
.gp-page{box-shadow:0 10px 30px rgba(0,0,0,.12)}
.deck-side .lead li::before{background:#0F4A2C}

/* SMOOTHER DECK (Nuo, 7 Nov 2026, 00:18): the cards glide on transform alone, a little slower and with a softer landing; the darkening of the
   cards behind is a black veil whose opacity eases (cheap) in place of a brightness filter on every card (repainted each frame) */
.gcard{transition:transform 1.2s cubic-bezier(.45,.05,.25,1),opacity .4s;filter:none!important;backface-visibility:hidden}   /* the fan glides on the moving issue's 1.2s clock (7 Nov 2026, 00:57) */
.gcard::after{content:"";position:absolute;inset:0;background:#000;opacity:calc(var(--i) * .06);transition:opacity 1.2s cubic-bezier(.45,.05,.25,1);pointer-events:none}
@media (hover:hover){.gcard:hover::after{opacity:0}}