/* THE COLLECTION CARD (17 Sep 2026) - one stylesheet for the tile the home page's grid and a site page's "Also in the
   Neighbourhood" both draw: the photograph, the second photograph that fades in on hover, the mark, the neighbourhood line,
   the character line that unfolds on hover, and the outline Book pill. It was the home page's inline CSS until Nuo asked
   for six neighbourhood cards "in the same format as the new landing page" - a second copy would drift the way the
   three mark renderers did before marks.js. The GRID stays with each page (index.html's .cards ladder, site-page.css's
   .near .cards): this file is the card, not the row. Tokens (--head, --body, --sand, --ink, --blue) come from the page.
   A page loads it BEFORE its own stylesheet, so a page's phone overrides still win by order. */
/* a card on its way out is a clone pinned where it was, so the grid can reflow under it */
.card.leaving{position:absolute;pointer-events:none;z-index:2;margin:0}
/* THE TILE IS SIZED BY ITS OWN PROPORTION, NOT BY THE SCREEN (Nuo, 17 Sep 2026: "smaller tiles, six per row"). It was
   half the viewport tall so two rows filled the screen beside the map, and 21 of them ran to 3,525px - Prue's "too much
   stuff". At 4:5 in five or six columns the whole collection is on screen in about 1,300px and nothing needs a click.
   The column counts are in the responsive block below; the 861-1100 band keeps its own ladder. */
/* the normal pointer, no flower (Georgia's video review via Nuo, 4 Nov 2026 ('All of it')) */
.card{cursor:pointer;position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:#111;color:#fff;transition:transform .35s ease,box-shadow .35s ease;will-change:transform}
.card.hot{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.18)}@media (hover:hover){.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.18)}}
.card img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
@media (hover:hover){.card:hover img.ph{transform:scale(1.04)}}
/* the second picture (Tier 2, 11 Sep 2026): the room first, then the food - the story's first photograph fades in over
   the card's own on hover, 700ms, and out again on leave. pointer:fine only, so a phone never downloads it. */
.card img.ph2{opacity:0;transition:opacity .7s var(--ease,ease),transform .8s ease}
@media (pointer:fine){.card.has2:hover img.ph2{opacity:1}}
@media (pointer:coarse){.card img.ph2{display:none}}
.card .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72) 100%)}
.card .body{position:absolute;left:16px;right:16px;bottom:16px}
.card .mark{margin-bottom:10px}
/* the neighbourhood: ONE line. fitQuals() sets nowrap and, where the name overflows the card, an inline font-size down
   to an 11px floor (Nuo, 13 Sep 2026: NATIONAL PORTRAIT GALLERY wrapped under Larry's at 14px) */
.card .qual{font-family:var(--head);text-transform:uppercase;font-size:11px;letter-spacing:.06em;margin:-2px 0 10px;opacity:.9}
/* the character line, ragged, no address (Nuo, 11 Sep 2026) - and since 13 Sep 2026 shown ONLY while the card is
   hovered ("they look too messy here"), or lit from its flower on the map (.hot), or focused from the keyboard - and
   then IN FULL (Nuo, same night: "doesn't need to be limited to 2 lines only"; the 11 Sep two-line clamp is gone).
   At rest it is folded to nothing so the mark and the neighbourhood sit just above the pill; on hover it unfolds to
   whatever height its text needs and they slide up. The fold is a grid row going 0fr -> 1fr with the text in a
   min-height:0 child, which animates to the text's OWN height - a max-height would have to be a guess, and a guess
   over the real height makes the collapse start late. A phone has no hover, so on a coarse pointer it is not drawn
   at all - the same rule as the second picture above. */
.card .line{font-size:13px;line-height:1.35;color:rgba(255,255,255,.94);padding-bottom:0;border-bottom:1px solid transparent;margin-bottom:0;display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .35s ease,opacity .3s ease,padding .35s ease,margin .35s ease,border-color .3s ease}
.card .line>span{min-height:0;overflow:hidden}
.card.hot .line{grid-template-rows:1fr;opacity:1;padding-bottom:10px;margin-bottom:10px;border-bottom-color:rgba(255,255,255,.35)}@media (hover:hover){.card:hover .line,.card:focus-visible .line{grid-template-rows:1fr;opacity:1;padding-bottom:10px;margin-bottom:10px;border-bottom-color:rgba(255,255,255,.35)}}
@media (pointer:coarse){.card .line{display:none}}
.card .acts{display:flex;justify-content:flex-start;align-items:center}
/* BOOK IS AN OUTLINE, NEVER A FILL (Nuo, 17 Sep 2026, after Prue on 16 Sep). Twenty-one filled blue pills were the
   loudest thing on the page and the reason it read as "desperate to sell". Nuo kept the pill on every tile - the
   8 Sep brief ranks bookings first - and took the weight out of it: a 1.5px Sandstone outline on the photograph, the
   same language as the nav's Book pill (V2 slide 79, outline and text only). Hover fills Sandstone with ink text,
   which a pill on a photograph may do (visual identity skill §4). Still one colour on every card, as on 11 Sep. */
.card .bk{font-family:var(--head);font-size:12px;letter-spacing:.01em;padding:7px 13px;border-radius:999px;background:transparent;border:1.5px solid rgba(242,236,233,.92);color:var(--sand);transition:background .25s,color .25s}
@media (hover:hover){.card .bk:hover{background:var(--sand);color:var(--ink)}}
/* a walk-in place says so in small caps, no pill at all - a pill that does nothing should not look like the one that does */
.card .bk.walk{background:transparent;border:0;padding:0;color:rgba(242,236,233,.85);text-transform:uppercase;font-size:10px;letter-spacing:.08em;cursor:default}
@media (hover:hover){.card .bk.walk:hover{background:transparent;color:rgba(242,236,233,.85)}}
.card .est{position:absolute;top:14px;right:14px;font-family:var(--head);font-size:10px;letter-spacing:.04em;text-transform:uppercase;background:rgba(0,0,0,.45);padding:4px 8px;border-radius:999px;opacity:.85}

/* == 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)}}
/* == BOOK ON HOVER, EVERY SITE CARD (Nuo, 27 Sep 2026: "never show book button on site cards by default, only when mouse hovers
   over it!") == The landing page's E2 rule (24 Sep), moved here so the site pages' neighbourhood cards follow it too: at rest the
   tile is the mark and the neighbourhood; Book (or Walk-ins only) unfolds on hover, keyboard focus, or a lit flower (.hot). A
   phone never draws it - the site page's own Book is one tap away. */
.card .acts{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .35s ease,opacity .3s ease}
.card .acts>*{min-height:0;overflow:hidden;align-self:start}
.card:not(.hot):not(:hover):not(:focus-within) .acts{height:0;overflow:hidden}
.card.hot .acts{grid-template-rows:1fr;opacity:1}
@media (hover:hover){.card:hover .acts,.card:focus-visible .acts,.card:focus-within .acts{grid-template-rows:1fr;opacity:1}}
@media (pointer:coarse){.card .acts{display:none}}