/* ============================================================================
   park-page.css — A SHOP YOU READ BY SCROLLING, not a room you orbit.

   WHY THIS FILE EXISTS. The owner, on his phone, 28 October 2026: "Move both
   to the scrolling page flow." Before that: "too much writing", then "still
   too much stuff especially for the phone". The clearing pages answer a guest
   with a 3D room and chips projected over it, and on a 390 px screen the chips
   cover the room and the rest is empty floor — measured twice, before and
   after a fit-out was stripped back, and barely different either time. The
   furniture was never what was wrong on a narrow screen.

   park-store.html has been the answer the whole time and nobody had copied it:
   no three.js, no ParkShop, no chips. A sticky shop nav, an entrance, then
   numbered rooms you scroll. This is that shell, lifted out of
   life/store-interior.css and generalised so it is not the memorabilia shop.

   WHAT WAS GENERALISED, AND IT IS ONLY THE PALETTE. The structure is the
   store's, selector for selector, because it works and because two shops that
   read differently for no reason is how a site stops feeling like one place.
   What changed is that walnut-and-brass became variables. A page sets
   --pp-accent and its three grounds and wears its own district's colour; the
   store keeps its own stylesheet and is untouched by this file.

   The memorabilia-only parts — cabinets, plinths, the window piece, the stock
   filter — are deliberately NOT here. A shell is not a template for one shop.
   ========================================================================= */

:root{
  /* the ground: three steps of the same dark, lightest at the top of the page */
  --pp-g0:#0a1210; --pp-g1:#0e1a17; --pp-g2:#13241f;
  /* the district's own colour — a page overrides these three and nothing else */
  --pp-accent:#117C78; --pp-accent-hi:#63B58C; --pp-accent-lo:#0b5a57;

  --pp-paper:#eef3ee; --pp-paper-2:#dce6df;
  --pp-ink:#0b1412;
  --pp-muted:rgba(238,243,238,.68);
  --pp-hair:rgba(99,181,140,.22);

  --pp-serif:'Bitter',Georgia,'Times New Roman',serif;
  --pp-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pp-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --pp-wrap:min(1180px,calc(100vw - 32px));

  /* TOKENS THIS SHELL DID NOT INVENT AND MUST STILL ANSWER FOR.
     life/holo-stage.css is the only clearing stylesheet a scrolling page
     still links — the projection in the counselling page's last room is
     real and is not being rebuilt. It reads --mono, --shop-accent-soft and
     --holo-hot, which were defined in park-clearing.css, the sheet these
     pages just stopped linking. Every one of its reads carries a gold
     fallback, so the projection does not break without them; it simply
     comes out gold on every page, whatever district it is in. Mapping them
     to the page's own accent is the difference between a thing that looks
     right on the counselling page by coincidence and one that is right. */
  --mono:var(--pp-mono);
  --shop-accent-soft:var(--pp-accent-hi);
  --holo-hot:var(--pp-accent-hi);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}
body{margin:0;background:var(--pp-g1);color:var(--pp-paper);
  font:400 16px/1.65 var(--pp-sans);
  background-image:
    radial-gradient(1100px 460px at 50% -140px,rgba(99,181,140,.10),transparent 70%),
    linear-gradient(180deg,var(--pp-g2),var(--pp-g1) 42%,var(--pp-g0));
  background-attachment:fixed}
a{color:var(--pp-accent-hi)}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--pp-accent-hi);outline-offset:3px}

.wrap{width:var(--pp-wrap);margin:0 auto}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--pp-accent-hi);
  color:var(--pp-ink);padding:8px 12px;border-radius:6px;z-index:50}
.skip:focus{left:12px}

/* ---- the shop nav: sticky, and the only furniture that follows you -------
   THE CLEARINGS HAD FOUR FIXED THINGS — a wordmark, a way-out pill, a footer
   and the help pill — laid out for a page that never scrolled. The moment the
   cards became a page they floated over the reading. One sticky bar instead,
   and the help pill, which is charter rule 4 and stays where it is. */
.shopnav{position:sticky;top:0;z-index:20;background:rgba(10,18,16,.93);
  border-bottom:1px solid var(--pp-hair);backdrop-filter:saturate(140%) blur(8px)}
.shopnav .wrap{display:flex;align-items:center;gap:18px;min-height:56px}
.shopnav .mark{font:600 1rem/1 var(--pp-serif);letter-spacing:.02em;
  color:var(--pp-accent-hi);text-decoration:none;white-space:nowrap}
.shopnav ul{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0;
  overflow-x:auto;scrollbar-width:none}
.shopnav ul::-webkit-scrollbar{display:none}
.shopnav li a{display:block;padding:8px 10px;color:var(--pp-paper);
  text-decoration:none;font-size:.9rem;border-radius:6px;white-space:nowrap}
.shopnav li a:hover{background:rgba(99,181,140,.12)}

/* ---- the entrance -------------------------------------------------------- */
.entrance{position:relative;padding:26px 0 40px}
.fascia{position:relative;margin:6px auto 0;max-width:820px;text-align:center;
  padding:26px 18px 22px;border:1px solid var(--pp-hair);border-radius:6px;
  background:linear-gradient(180deg,rgba(99,181,140,.08),rgba(99,181,140,.02))}
.fascia .est{font:500 .72rem/1 var(--pp-mono);letter-spacing:.32em;
  text-transform:uppercase;color:var(--pp-accent-hi)}
.fascia h1{margin:10px 0 6px;font:600 clamp(2rem,6.4vw,3.4rem)/1.04 var(--pp-serif);
  letter-spacing:.01em;color:var(--pp-paper);text-wrap:balance}
.fascia .trade{margin:0;font:400 clamp(.9rem,2.4vw,1.05rem)/1.45 var(--pp-serif);
  font-style:italic;color:var(--pp-paper-2)}
.entrance .welcome{max-width:760px;margin:20px auto 0;text-align:center;
  color:var(--pp-paper-2)}
.entrance .cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}

/* ---- the buttons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid transparent;
  font:600 .95rem/1 var(--pp-sans);text-decoration:none;cursor:pointer;
  transition:transform .14s ease,border-color .14s ease,color .14s ease}
.btn-gold{background:linear-gradient(180deg,var(--pp-accent-hi),var(--pp-accent));
  color:var(--pp-ink);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,
  0 8px 22px rgba(17,124,120,.20)}
.btn-gold:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--pp-paper);
  border-color:rgba(238,243,238,.35)}
.btn-ghost:hover{border-color:var(--pp-accent-hi);color:var(--pp-accent-hi)}

/* ---- the rooms you scroll through ---------------------------------------
   The numeral is not decoration. park-store.html numbers its rooms because
   the order is the order you walk them, and a reader who has met I knows
   there is a II. Where an order carries no meaning, leave the numeral off
   rather than invent a sequence — the same rule the artifact guidance gives
   and the same one tools/CURATOR.md keeps for the shops. */
.room{padding:44px 0;border-top:1px solid var(--pp-hair)}
.room:first-of-type{border-top:0}
.room-h{display:flex;align-items:baseline;gap:14px;margin:0 0 6px}
.room-h h2{margin:0;font:600 clamp(1.5rem,3.6vw,2.1rem)/1.12 var(--pp-serif);
  color:var(--pp-paper);text-wrap:balance}
.room-h .no{font:500 .72rem/1 var(--pp-mono);letter-spacing:.24em;
  color:var(--pp-accent-hi);text-transform:uppercase}
.room-lede{max-width:70ch;color:var(--pp-paper-2);margin:6px 0 18px}
.room .body{max-width:70ch;margin:0 0 14px}

/* a fact and its answer, the shops' own <dl> */
.room .facts{display:grid;gap:14px;margin:18px 0 0;padding:0}
.room .facts > div{padding:16px 16px 14px;border-radius:6px;border:1px solid var(--pp-hair);
  background:linear-gradient(180deg,rgba(99,181,140,.08),rgba(99,181,140,.02))}
.room .facts dt{font:600 .98rem/1.3 var(--pp-serif);color:var(--pp-accent-hi);margin-bottom:5px}
.room .facts dd{margin:0;color:var(--pp-paper-2);font-size:.95rem}

.room .chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.room .chips li{padding:7px 12px;border-radius:999px;border:1px solid var(--pp-hair);
  font:500 .78rem/1 var(--pp-mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--pp-paper-2)}
.room .cta{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0}
.room .sub{margin:26px 0 8px;font:600 1.05rem/1.3 var(--pp-serif);color:var(--pp-paper)}

/* ---- the way out --------------------------------------------------------- */
/* AND THE PAGE RESERVES THE PILL'S OWN CORNER, which the clearings never had
   to. The crisis pill is position:fixed, and on a page that does not scroll
   the cards were laid out around it by hand — park-clearing.css sets a board's
   bottom edge to clear `.ps-help--clearing{bottom:132px}` and says so. A
   scrolling page has no such hand: whatever happens to be last ends up under
   the pill when the guest reaches the bottom.

   tools/help-reach-check.js measured it on the office page at phone width:
   "the help pill covers Emergency by 116x25 px" — the pill sitting on the
   crisis block, the one block on the page somebody may be reaching for in a
   hurry. The counselling page passed the same run, and only because two more
   sections happen to sit below its crisis block. That is luck, and the next
   shop converted would spend it.

   So the reserve is the pill's own height, taken from park-help.css rather
   than guessed: bottom 132 + a 38 px summary = 170 px of pill, and the raised
   variant is 160 + 38 = 198. 208 clears the tallest of them with 10 px to
   spare, on every page wearing this shell, whatever ends up last. */
.pagefoot{padding:30px 0 208px;border-top:1px solid var(--pp-hair);
  text-align:center;font-size:.9rem;color:var(--pp-muted)}
.pagefoot a{color:var(--pp-paper-2);text-decoration:none}
.pagefoot a:hover{color:var(--pp-accent-hi)}
.pagefoot .sep{opacity:.5;margin:0 8px}


/* ============================================================================
   THE FOUR THINGS THE SHELL FORGOT — 28 October 2026.

   Lifting the store's shell onto the clearing pages dropped park-clearing.css,
   and four pieces of furniture that were only ever defined in that sheet went
   with it. A class-by-class audit of both converted pages against every sheet
   they still link found them (tools/ has no check for this, which is the next
   thing owed): .urgent, .num, .board-reach and .card-film were in the markup,
   styled by nothing.

   .urgent is the one that mattered. It is the crisis block — Lifeline, 13YARN,
   000 — and unstyled it collapsed to three bare inline links at the bottom of
   the page, directly under the fixed help pill, which then covered them.
   tools/help-reach-check.js caught it on park-suite.html at phone and laptop
   ("the help pill covers Emergency by 149x37 px") and that is the whole reason
   this block exists. The check saw it; a screenshot of a page I had already
   called finished did not.

   These are page furniture, not memorabilia: a crisis panel, a figure set in
   mono, a row of ways to reach a person, a film in a column. They belong in a
   shell. The cabinets and plinths still do not.
   ========================================================================= */

/* ---- a figure, set apart from the sentence around it ---------------------- */
.room .num{font:500 .96rem/1.4 var(--pp-mono);letter-spacing:.01em;
  color:var(--pp-accent-hi)}

/* ---- a row of ways to reach a person ------------------------------------- */
.board-reach{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.board-reach .btn{flex:1 1 auto;justify-content:center}

/* ---- the crisis block ---------------------------------------------------
   PORTED, NOT REDRAWN. The 44 px target is the one number here that was
   measured rather than chosen: these were the smallest touch targets on ten
   clearing pages and they are the links a guest may be reaching for with a
   shaking hand. WCAG 2.2 asks 24x24. This clears it, and it stays 44 on a
   scrolling page for exactly the same reason it did on an orbiting one.

   What did change is the ground. On the clearing the panel needed its own
   translucent dark because the 3D scene moved underneath it; here the page
   is still, so the block takes the same hairline-and-wash treatment as
   .room .facts and reads as part of the page rather than floating over it.
   The margin is large on purpose — this block ends a section, and the help
   pill is fixed over the bottom of the viewport. */
.room .urgent{margin:26px 0 0;padding:16px 16px 14px;max-width:70ch;
  border:1px solid var(--pp-accent-lo);border-radius:8px;
  background:linear-gradient(180deg,rgba(99,181,140,.08),rgba(99,181,140,.02))}
.room .urgent p{margin:0 0 10px;font-size:.9rem;color:var(--pp-paper-2);max-width:none}
.room .urgent [data-park-crisis-links]{display:flex;flex-wrap:wrap;gap:8px 12px}
.room .urgent a{display:inline-flex;align-items:center;min-height:44px;
  padding:0 12px;border-radius:8px;border:1px solid var(--pp-hair);
  font:500 .8rem/1 var(--pp-mono);color:var(--pp-accent-hi);text-decoration:none}
.room .urgent a:hover{background:rgba(99,181,140,.12);border-color:var(--pp-accent-hi)}

/* ---- a named thing and what it is ---------------------------------------
   A FIFTH ORPHAN, found by the check the first four produced. When the
   remaining eight shops came onto this shell, tools/style-coverage-check.js
   named .kit at park-sport.html:213 — the list describing what is in that
   room, a term in bold with its explanation under it. It was defined only in
   park-clearing.css, exactly like the other four, and it is the first thing
   that check caught that no human had already found by looking. */
.room .kit{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px;
  max-width:70ch}
.room .kit li{margin:0;padding:12px 14px;border-radius:6px;
  border:1px solid var(--pp-hair);border-left:2px solid var(--pp-accent);
  background:linear-gradient(180deg,rgba(99,181,140,.08),rgba(99,181,140,.02))}
.room .kit b{display:block;font:600 .95rem/1.35 var(--pp-sans);
  color:var(--pp-paper);letter-spacing:-.005em}
.room .kit span{display:block;margin-top:4px;font-size:.9rem;line-height:1.56;
  color:var(--pp-paper-2)}

/* ---- a film, in a column -------------------------------------------------
   THE OLD CAP IS GONE AND ITS MEASUREMENTS WITH IT, deliberately. The 34vh
   and 56vh caps in park-clearing.css were measured against a fixed card —
   "642 px of visible card on 1440x900" with its own max-height and
   overflow-y:auto — and were chosen so the player plus its caption fitted
   inside that window. There is no such window here. A section on a scrolling
   page is as tall as what is in it, so a viewport-height cap now answers a
   question nobody is asking and, on a short laptop window, shrinks a film
   that had all the room in the world below it.

   Width is the real constraint in a column, so width is what is capped: the
   film is at most as wide as the reading measure and keeps its own aspect.
   The one height cap left is for an upright film, where unconstrained width
   would stand a 9:16 player taller than the screen. */
.card-film{margin:0 0 20px;max-width:70ch}
.card-film video{display:block;width:100%;height:auto;border-radius:6px;
  background:var(--pp-g0)}
.card-film.upright{max-width:min(46ch,100%)}
.card-film figcaption{margin-top:9px;font-size:.86rem;color:var(--pp-muted)}

@media (max-width:640px){
  .room{padding:34px 0}
  .entrance{padding:18px 0 28px}
  .fascia{padding:20px 14px 18px}
  /* two across, and the number gets the wider column: at an even 1fr/1fr
     "Ring 0467 937 659" wrapped onto two lines and stood the gold button
     taller than the ghost one beside it. The number is joined by non-breaking
     spaces, so it can only wrap as a block. */
  .board-reach{display:grid;grid-template-columns:1.15fr 1fr;gap:9px;margin:14px 0 0}
  .board-reach .btn{width:auto;padding:14px 6px;font-size:.9rem;gap:0}
  .room .urgent{margin:30px 0 0;padding:14px 14px 12px}
}