/* Christmas hub style sheet, Summit and Spur
   Built Oct 17, 2026 on the park-poster system: bone #F6F0E2, pine ink
   #152219, sage #7D8F69, Barlow Condensed poster caps, Source Sans 3 body,
   IBM Plex Mono for every date and dollar figure.
   Seasonal register: deep green and warm brass #B08A3C. No red, no
   clip-art, no kitsch. Brass carries the accents the parks build gives
   to rust; the layout grammar (data spines, stamps, ledger tables,
   receipt breakdowns) is the same family. */

:root {
  --bone: #F6F0E2;
  --paper: #FCF8ED;
  --ink: #152219;
  --ink-deep: #0D1710;
  --brass: #B08A3C;
  --brass-bright: #D9A441;
  --brass-pale: #EFE3C2;
  --sage: #7D8F69;
  --sage-pale: #DDE3D2;
  --line: #D9CEAC;
  --line-pale: #E4DABC;
  --muted: #5D6A5C;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Source Sans 3", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

h1, h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.04;
  letter-spacing: 0.015em;
  margin: 0 0 0.45em 0;
  font-weight: 600;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-top: 0; }
h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 0.35em 0;
}
h3.block { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 1.12rem; font-weight: 700; margin-top: 1.1em; margin-bottom: 0.25em; }

p { margin: 0 0 1em 0; }
a { color: var(--ink); text-decoration-color: var(--brass); text-underline-offset: 3px; }
a:hover { color: var(--brass); }

.kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--brass);
  margin: 0 0 0.7em 0;
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  background: var(--brass);
  margin-right: 10px;
  vertical-align: 1px;
}

.mono { font-family: var(--font-mono); }
.small { font-size: 0.9rem; color: var(--muted); }
.fineprint { font-size: 0.88rem; color: var(--muted); }
.caption { font-size: 0.88rem; color: var(--muted); margin: 8px 0 0 0; font-family: var(--font-mono); letter-spacing: 0.01em; }

/* Header */
header.site {
  background: var(--ink-deep);
  color: var(--bone);
  border-bottom: 3px solid var(--brass);
}
header.site .wrap { padding-top: 13px; padding-bottom: 11px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 34px; }
.brand {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--bone);
  text-decoration: none;
}
.brand small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin-top: 5px;
}
nav.main { margin-left: auto; padding-bottom: 3px; }
nav.main a {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bone);
  text-decoration: none;
  font-size: 0.8rem;
  margin-left: 24px;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
nav.main a:first-child { margin-left: 0; }
nav.main a:hover { border-bottom-color: var(--brass-bright); color: #fff; }

/* Layout */
main .wrap { padding-top: 40px; padding-bottom: 34px; }
section { margin-bottom: 40px; }
section:last-child { margin-bottom: 8px; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 24px 26px;
  margin-bottom: 18px;
}
.card p:last-child { margin-bottom: 0; }

.price {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--brass);
  font-weight: 600;
}

.stamp {
  display: inline-block;
  border: 2px solid var(--brass);
  color: var(--ink);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 2px;
  transform: rotate(-1.2deg);
  background: rgba(176, 138, 60, 0.07);
  margin-bottom: 14px;
}

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--bone);
  text-decoration: none;
  padding: 12px 22px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  font-size: 0.85rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  margin: 4px 8px 4px 0;
  cursor: pointer;
}
.btn:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn.alt {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--brass);
}
.btn.alt:hover { background: rgba(176, 138, 60, 0.12); color: var(--brass); }

ul.ledger { list-style: none; padding: 0; margin: 0 0 1em 0; }
ul.ledger li { padding: 10px 2px; border-bottom: 1px dotted var(--line); }
ul.ledger li:last-child { border-bottom: none; }

table { border-collapse: collapse; width: 100%; margin: 0 0 1em 0; background: var(--paper); }
th, td { text-align: left; padding: 10px 12px; border: 1px solid var(--line); vertical-align: top; }
th {
  background: var(--brass-pale);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
td.num, th.num { font-family: var(--font-mono); white-space: nowrap; }

.example {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 5px solid var(--brass-bright);
  padding: 20px 24px;
  margin: 0 0 18px 0;
}
.example p:last-child { margin-bottom: 0; }

/* Data spine: the mono stat strip used on pillars and cards */
.spine {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 10px 2px;
  margin: 0 0 18px 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.spine b { color: var(--brass); font-weight: 600; }

/* City pillars on the hub homepage */
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 40px; }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; } }
.pillar {
  background: var(--ink);
  color: var(--bone);
  border-radius: 2px;
  padding: 30px 30px 26px 30px;
  position: relative;
  overflow: hidden;
}
.pillar::after {
  content: "";
  position: absolute;
  right: 26px; top: 30px;
  width: 12px; height: 12px;
  background: var(--brass-bright);
  transform: rotate(45deg);
}
.pillar h2 { color: var(--bone); font-size: clamp(2.2rem, 4vw, 3rem); }
.pillar .kicker { color: var(--brass-bright); }
.pillar .kicker::before { background: var(--brass-bright); }
.pillar p { color: #E9E2CC; }
.pillar .spine { border-top-color: var(--bone); border-bottom-color: rgba(246, 240, 226, 0.25); }
.pillar .spine b { color: var(--brass-bright); }
.pillar a { color: var(--bone); text-decoration-color: var(--brass-bright); }
.pillar a:hover { color: var(--brass-bright); }
.pillar .btn { background: var(--brass); border-color: var(--brass); color: var(--ink-deep); }
.pillar .btn:hover { background: var(--brass-bright); border-color: var(--brass-bright); color: var(--ink-deep); }
.launch-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid var(--brass-bright);
  color: var(--brass-bright);
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 14px;
}

/* Content slot: a designed panel in the product-block family (solid
   line, paper ground, ink head rule). Restyled Nov 9, 2026 in the NY
   holiday design pass: the original dashed border read as "content
   still in production" around finished sections. */
.slot {
  border: 1px solid var(--line);
  border-top: 4px solid var(--ink);
  background: var(--paper);
  border-radius: 2px;
  padding: 22px 26px;
  margin-bottom: 18px;
}
.slot .slot-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brass);
  display: block;
  margin-bottom: 8px;
}
.slot p:last-child { margin-bottom: 0; }

/* Affiliate slot: placement held until accounts are approved */
.affiliate-slot {
  border: 1px dashed var(--muted);
  background: var(--paper);
  border-radius: 2px;
  padding: 18px 22px;
  margin-bottom: 18px;
}
.affiliate-slot .slot-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}
.affiliate-slot p { font-size: 0.95rem; margin-bottom: 0; }

/* FTC disclosure line, present from day one */
.disclosure {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 2px;
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0 0 26px 0;
}

/* Tool forms */
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 860px) { .tool-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.field .hint { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.85rem; color: var(--muted); display: block; margin-top: 4px; }
.field input[type="number"], .field input[type="text"], .field input[type="date"], .field select {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
}
.field input:focus, .field select:focus { outline: 2px solid var(--brass-bright); outline-offset: 1px; }

/* Receipt style breakdown (calculator output) */
.receipt {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--ink);
  padding: 22px 24px;
}
.receipt table { background: transparent; margin-bottom: 0; }
.receipt td, .receipt th { border: none; border-bottom: 1px dotted var(--line); padding: 8px 4px; }
.receipt th { background: transparent; }
.receipt tr.total td {
  border-bottom: none;
  border-top: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.1rem;
}
.receipt td.amt { text-align: right; font-family: var(--font-mono); white-space: nowrap; }

/* Finder filters */
.filters { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.filters .field { margin-bottom: 0; flex: 1 1 180px; }
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid var(--sage);
  color: var(--ink);
  background: var(--sage-pale);
}
.badge.pending { border-color: var(--brass); background: var(--brass-pale); }
.badge.stage { border-color: var(--muted); background: transparent; color: var(--muted); }

/* Footer */
footer.site {
  background: var(--ink-deep);
  color: var(--bone);
  border-top: 3px solid var(--brass);
  margin-top: 30px;
}
footer.site .wrap { padding-top: 26px; padding-bottom: 26px; }
footer.site p { font-size: 0.9rem; color: #CFC7A8; margin-bottom: 0.6em; }
footer.site a { color: var(--bone); text-decoration-color: var(--brass-bright); }
footer.site .foot-brand {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: var(--bone);
}

/* Kit signup forms: plain HTML forms posting to Kit. Same pattern as the
   main Summit and Spur sheet, in the Christmas palette. Added Oct 17,
   2026 with the booking windows capture fix. */
.kit-form .email-row { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-form input[type="email"] {
  flex: 1 1 240px;
  font-family: inherit;
  font-size: 1rem;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 2px;
}
.kit-form input[type="email"]:focus { outline: 2px solid var(--brass-bright); outline-offset: 1px; }
.kit-form button { min-height: 44px; cursor: pointer; }
.capture-card .slot-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brass);
  display: block;
  margin-bottom: 8px;
}

/* Section subnav, added at the Oct 17, 2026 merge under summitandspur.com:
   the Christmas pages carry the site main nav above this section row. */
header.site .subwrap { padding-top: 0; padding-bottom: 12px; }
nav.sub { margin-left: auto; }
nav.sub a {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brass-bright);
  text-decoration: none;
  font-size: 0.72rem;
  margin-left: 20px;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
nav.sub a:first-child { margin-left: 0; }
nav.sub a:hover { border-bottom-color: var(--brass-bright); color: #fff; }

/* NYC Christmas map + itinerary builder (added Oct 19, 2026) */
#map { height: 520px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); z-index: 0; }
@media (max-width: 760px) { #map { height: 420px; } }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; min-height: 40px; }
.chip .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: baseline; }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.poi-pop h3 { font-size: 1.25rem; margin: 2px 0 6px 0; }
.poi-pop p { margin: 0 0 7px 0; font-size: 0.95rem; line-height: 1.5; }
.poi-pop .pop-cat { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0; }
.poi-pop .pop-dates { font-family: var(--font-mono); font-size: 0.85rem; }
.poi-pop .pop-meta { font-size: 0.88rem; color: var(--muted); margin-bottom: 3px; }
.poi-pop .pop-note { font-size: 0.88rem; border-left: 3px solid var(--sage); padding-left: 9px; }
.poi-pop .btn { min-height: 38px; padding: 6px 14px; font-size: 0.95rem; }
.booking-slot .btn { margin-top: 2px; }
.book-strip li { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.book-strip .book-name { font-weight: 600; }
.book-strip .btn { margin: 2px 0; }
.vibe-btn.on { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.pick-list { margin-bottom: 16px; }
.pick-group { border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; margin-bottom: 10px; background: var(--paper); }
.pick-group summary { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; font-size: 1.1rem; cursor: pointer; padding: 4px 0; }
.pick { display: flex; align-items: baseline; gap: 9px; padding: 7px 0; border-bottom: 1px dotted var(--line-pale); cursor: pointer; }
.pick:last-child { border-bottom: none; }
.pick input { width: 19px; height: 19px; accent-color: var(--brass); flex: none; position: relative; top: 3px; }
.pick-name { font-weight: 600; }
.pick-dates { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); }
.day-card { border: 1px solid var(--line); border-left: 5px solid var(--brass); border-radius: 6px; background: var(--paper); padding: 18px 20px; margin-bottom: 16px; }
.day-card h3 { margin-top: 0; }
.day-where { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: -6px; }
.day-list { margin: 0 0 6px 0; padding-left: 22px; }
.day-list li { margin-bottom: 12px; }
.day-list .booking-slot { margin: 5px 0 0 0; }
.day-list .booking-slot .btn { min-height: 36px; padding: 4px 12px; font-size: 0.9rem; }
.trip-warn { border: 1px solid var(--brass); background: var(--brass-pale); border-radius: 6px; padding: 14px 18px; margin-bottom: 16px; }
.trip-warn h3 { margin-top: 0; font-size: 1.2rem; }
.trip-warn ul { margin: 0; padding-left: 20px; }
.trip-warn li { margin-bottom: 5px; font-size: 0.97rem; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cat-head { margin-top: 30px; border-bottom: 2px solid var(--line); padding-bottom: 6px; }
.poi-card { margin-bottom: 16px; }
/* Presentation redesign, Oct 19, 2026: collapsible stop groups on the
   map page (the placed disclosure line uses .disclosure above). */
.stop-group { border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; background: var(--paper); }
.stop-group > summary { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; font-size: 1.15rem; cursor: pointer; padding: 6px 0; }
.stop-group .poi-card { margin-top: 14px; margin-bottom: 14px; }
.leaflet-popup-content { font-family: var(--font-body); }
@media print {
  header.site, footer.site, #map-section, #all-stops, #stop-details,
  #builder-form, .share-row, #export-panel .btn, #export-panel form,
  #shared-banner { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .day-card { break-inside: avoid; border-color: #999; }
  #export-panel { border: none; padding: 0; }
}

/* Popup containment (Oct 19, 2026), map page: popups stay inside the map on
   phones; content scrolls inside the popup instead of overflowing. */
.leaflet-popup-content-wrapper { max-width: calc(100vw - 56px); }
.leaflet-popup-content { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Stacked-card tables (Oct 21, 2026, page-audit A2/D7/D8) ----------
   The fleet pattern, in the Christmas tokens: under the 760px breakpoint
   a .stack-cards table retires its header row, each row becomes a card,
   and each cell prints its column label from data-label (the label text
   is the column header's own text). These tables are short lists of
   records (a market, a rink, a booking window), so a card keeps each
   record whole instead of asking the reader to pan a wide table and hold
   the row's identity in memory; the market finder's dates and hours, the
   guides' cost columns, and the booking windows' statuses each get a
   full line of their own, and nothing can be cut mid-glyph. Desktop
   rendering is the same table, with one change: cells in these tables
   give up white-space: nowrap, whose long strings (rink price bands,
   market hours) forced the tables wider than a desktop container too. */
.stack-cards td.num { white-space: normal; }
@media (max-width: 760px) {
  .stack-cards { display: block; width: 100%; border: none; background: transparent; }
  .stack-cards thead { display: none; }
  .stack-cards tr.stack-head { display: none; }
  .stack-cards tbody { display: block; }
  .stack-cards tr {
    display: block;
    background: var(--paper);
    border: 1px solid var(--line);
    margin: 0 0 12px 0;
    padding: 4px 14px 8px;
  }
  .stack-cards td {
    display: block;
    border: none;
    border-bottom: 1px solid var(--line-pale);
    padding: 8px 0;
  }
  .stack-cards tr td:last-child { border-bottom: none; }
  .stack-cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 2px;
  }
  /* The first cell is the card's title line: it carries no label. */
  .stack-cards td:first-child { padding-top: 10px; }
}

/* ---------- SP-01: guide product block + persistent buy bar (Nov 2, 2026) ----------
   One component, built once to the benchmark anatomy (product block,
   Pattern 3; persistent buy bar, Pattern 2): cover presentation (angled
   plus flat), format line, price inside the block, buy action, delivery
   note, two matted interior spreads, details row, and a tier-progression
   variant (.pb-tiers) for the guide's companion offers.
   Wiring contract: launch wiring (NYC Nov 6, Chicago Nov 13) replaces the
   contents of .pb-buy / .pb-tier-cta at the markers in the page HTML and
   flips lead-in wording; the .pb-price-line sentence is the slot's own
   price line and is never reworded by this component. Every price
   rendering for a guide lives inside its .product-block or its .buy-bar,
   nowhere else on the page. */
.product-block {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--ink);
  padding: 26px 28px 20px;
  margin-bottom: 18px;
}
.pb-grid { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
@media (max-width: 860px) { .pb-grid { grid-template-columns: 1fr; } }
.pb-stage { background: var(--ink-deep); padding: 16px 16px 58px; position: relative; border-radius: 2px; }
.pb-stage .pb-angled { display: block; width: 100%; height: auto; }
.pb-stage .pb-flat {
  position: absolute; right: 20px; bottom: 14px; width: 34%; height: auto;
  border: 1px solid var(--brass);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.product-block .kicker { margin-bottom: 0.5em; }
.pb-format {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.9em 0;
}
.pb-price-line { font-size: 1.02rem; margin: 0 0 0.4em 0; }
.pb-price-line .price { font-size: 1.5rem; }
.pb-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0.6em 0 1em 0; }
.pb-buy .btn { margin: 0; }
.pb-delivery { font-size: 0.9rem; color: var(--muted); }
.pb-spreads { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
@media (max-width: 760px) { .pb-spreads { grid-template-columns: 1fr; } }
.pb-spreads figure { margin: 0; }
.pb-spreads img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.pb-spreads figcaption {
  font-size: 0.85rem; color: var(--muted); margin-top: 7px;
  font-family: var(--font-mono); letter-spacing: 0.01em;
}
.pb-details {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
  padding: 10px 2px; margin-top: 22px;
  font-family: var(--font-mono); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.pb-details b { color: var(--brass); font-weight: 600; }
.pb-tiers { margin-top: 6px; }
.pb-tiers-title {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--brass);
  margin: 18px 0 2px 0;
}
.pb-tier {
  display: grid; grid-template-columns: 92px 1fr; gap: 18px;
  padding: 16px 0 4px; border-bottom: 1px dotted var(--line);
}
.pb-tier:last-child { border-bottom: none; }
.pb-tier img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.pb-tier h3 { font-size: 1.2rem; }
.pb-tier p { font-size: 0.97rem; }
.pb-tier-cta { font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* Persistent buy bar: fixed to the page foot, revealed by the inline
   script once the product block has scrolled away. */
.buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--ink-deep); color: var(--bone);
  border-top: 3px solid var(--brass);
  transform: translateY(110%);
  transition: transform 0.22s ease;
}
.buy-bar.show { transform: none; }
.buy-bar .bb-in {
  max-width: 1120px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 18px;
}
.bb-name {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: 0.04em; white-space: nowrap;
}
.bb-price { font-family: var(--font-mono); font-weight: 600; color: var(--brass-bright); white-space: nowrap; }
.bb-price s { color: #9A917B; font-weight: 400; margin-left: 4px; }
.buy-bar .bb-cta { margin: 0 0 0 auto; background: var(--brass); border-color: var(--brass); color: var(--ink-deep); padding: 9px 18px; }
.buy-bar .bb-cta:hover { background: var(--brass-bright); border-color: var(--brass-bright); color: var(--ink-deep); }
.bb-close {
  background: none; border: none; color: var(--bone);
  font-size: 1.35rem; line-height: 1; cursor: pointer; padding: 4px 6px;
}
@media (max-width: 760px) {
  .buy-bar .bb-in { gap: 12px; padding: 10px 14px; }
  .bb-name { display: none; }
}
@media print { .buy-bar { display: none !important; } }

/* ---------- SP-02: Christmas imagery layer (Nov 2, 2026) ----------
   Image-led first screens for the cluster, inside the shared tokens
   (SP-25's no-fork rule: components live here, not in a new sheet).
   .xmas-hero: full-bleed photograph, a caption tier under it (reader
   note at caption size, credit demoted to a smaller second element,
   per-place accent drawn from the place: New York brass, Chicago
   steel #3E6B8C, the markets page's own group colours), then the H1
   in the poster system on the ink band with the data spine demoted
   into that band's caption tier. .pillar-photo + .pillar-proof make
   the hub's city pillars image cards with the guide cover and proof
   lines adjacent to the door. .poi-photo gives Tier-1 market cards
   the same image-card treatment; Tier-2 cards are untouched and stay
   a clean directory. */
.xmas-hero {
  margin: 0 0 34px 0;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.xmas-hero .hero-frame {
  height: min(54vh, 500px); min-height: 320px; overflow: hidden;
  background: var(--ink-deep);
}
.xmas-hero .hero-frame img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}
.xmas-hero .hero-frame img.focus-low { object-position: 50% 68%; }
.xmas-hero .hero-frame img.focus-sky { object-position: 30% 14%; }
.xmas-hero-cap { border-bottom: 1px solid var(--line); margin-bottom: 0; }
.xmas-hero-cap .cap-in {
  max-width: 1120px; margin: 0 auto; padding: 9px 24px 9px 12px;
  display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline;
  border-left: 4px solid var(--place-accent, var(--brass));
}
.xmas-hero-cap .cap-note {
  font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.01em; color: var(--ink);
}
.xmas-hero-cap .cap-credit { font-size: 0.72rem; color: var(--muted); margin-left: auto; }
.xmas-titleband {
  background: var(--ink-deep); color: var(--bone);
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding: 34px 0 30px 0; margin-bottom: 40px;
}
.xmas-titleband .tb-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.xmas-titleband h1 { color: var(--bone); }
.xmas-titleband .kicker { color: var(--brass-bright); }
.xmas-titleband .kicker::before { background: var(--brass-bright); }
.xmas-titleband p { color: #E9E2CC; max-width: 68ch; }
.xmas-titleband .spine { border-top-color: rgba(246, 240, 226, 0.4); border-bottom: none; margin-bottom: 4px; }
.xmas-titleband .spine b { color: var(--brass-bright); }
.xmas-titleband .stamp { color: var(--bone); background: rgba(176, 138, 60, 0.16); }
.accent-chicago { --place-accent: #3E6B8C; }

/* City pillar image cards (hub) */
.pillar .pillar-photo {
  margin: -30px -30px 22px -30px; height: 208px; overflow: hidden;
  border-bottom: 3px solid var(--brass);
}
.pillar .pillar-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pillar-proof {
  display: flex; gap: 16px; align-items: center;
  border-top: 1px solid rgba(246, 240, 226, 0.25);
  padding-top: 16px; margin-top: 18px;
}
.pillar-proof img {
  width: 64px; height: auto; flex: none;
  border: 1px solid var(--brass-bright);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.pillar-proof .pp-lines { font-size: 0.92rem; line-height: 1.45; color: #E9E2CC; }
.pillar-proof .pp-lines b { color: var(--bone); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.02rem; display: block; }

/* Tier-1 market card photography (markets page) */
.poi-card .poi-photo { margin: -24px -26px 16px -26px; }
.poi-card .poi-photo img { display: block; width: 100%; height: 190px; object-fit: cover; }
.poi-card .poi-photo figcaption {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em;
  color: var(--muted); padding: 6px 2px 0 2px;
}
.poi-card.has-photo { border-top: 4px solid var(--place-accent, var(--brass)); }
@media (max-width: 760px) {
  .xmas-hero .hero-frame { height: 46vh; min-height: 280px; }
  .xmas-hero-cap .cap-credit { margin-left: 0; }
  .pillar .pillar-photo { height: 180px; }
  .poi-card .poi-photo img { height: 160px; }
}
@media print { .xmas-hero .hero-frame { height: auto; } .xmas-hero .hero-frame img { height: auto; } }

/* ---------- SP-04: gifts pick cards (Nov 3, 2026) ----------
   The text-only "list" page (Lane 1 C-08, killed pattern) replaced by
   one pick-card shelf per gifts page, built to the benchmark anatomy
   (Pattern 3 at card scale) on the Zsigmond presentation standard:
   every pick photographed on the same pine-green ground, cropped by
   one rule (3:2 frame, cover fit), name beneath the image and never
   over it, the checked price as its own line, a suits line and a
   one-line reason, and a link only where a revenue route exists
   (the no-unpaid-links doctrine: unrouted picks stay text). The
   shipping-cutoff prose becomes a .spine data strip per city. */
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px) { .pick-grid { grid-template-columns: 1fr; } }
.pick-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--place-accent, var(--brass));
  display: flex; flex-direction: column;
  margin: 0;
}
.pick-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink-deep); margin: 0; }
.pick-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pick-media.stage { display: grid; place-items: center; padding: 18px; }
.pick-media.stage img {
  width: auto; height: 100%; object-fit: contain;
  border: 1px solid var(--brass);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.pick-credit {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em;
  color: var(--muted); padding: 7px 22px 0 22px; margin: 0;
}
.pick-body { padding: 20px 22px 18px; display: flex; flex-direction: column; flex: 1; }
.pick-body h3 { margin-bottom: 0.3em; }
.pick-price { font-size: 1.02rem; margin: 0 0 0.55em 0; }
.pick-price .checked { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; margin-left: 8px; }
.pick-suits {
  font-family: var(--font-mono); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin: 0 0 0.6em 0;
}
.pick-suits b { color: var(--brass); font-weight: 600; }
.accent-chicago .pick-suits b { color: #3E6B8C; }
.pick-reason { font-size: 0.98rem; margin: 0 0 0.8em 0; }
.pick-link {
  margin-top: auto;
  font-family: var(--font-mono); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.pick-where {
  margin-top: auto;
  font-family: var(--font-mono); font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.cutoff-note { font-size: 0.95rem; color: var(--muted); margin-top: -6px; }

/* Buy actions (gifts revenue fix, Nov 9, 2026): the button slot sits at
   the card foot; the where line follows it directly instead of taking
   the auto margin. Buttons reuse .btn unchanged so they read as the
   site's own controls, never as ad units (conversion audit F13/F14).
   Cards with no confirmed revenue route keep the text-only where line
   (no-unpaid-links doctrine). */
.pick-actions { margin: auto 0 0 0; }
.pick-actions + .pick-where { margin-top: 10px; }

/* ---------- NY holiday design pass, Nov 9, 2026 (baseline score 65) ----------
   Presentation layer only: header density, the fleuron divider and the
   maker's mark (the Summit badge, from the social dressing kit), one
   rationed motion primitive, the receipt's total moment, the single-card
   pick-grid measure, and the compact product block for the map page.
   Nothing here touches script-touched ids/classes, URLs, title tags,
   heading text, or map/calculator behaviour. */

/* Header: the two nav rows become single-line scroll strips on phones
   instead of wrapping into five rows. The desktop header also tightens
   so the first screen starts sooner. */
@media (max-width: 760px) {
  header.site .wrap { padding-top: 10px; padding-bottom: 8px; }
  .brand { font-size: 1.5rem; }
  header.site .wrap nav.main,
  header.site .subwrap nav.sub {
    width: 100%; margin-left: 0; display: flex; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 4px;
  }
  header.site .wrap nav.main::-webkit-scrollbar,
  header.site .subwrap nav.sub::-webkit-scrollbar { display: none; }
  nav.main a, nav.sub a { flex: none; margin-left: 18px; }
  nav.main a:first-child, nav.sub a:first-child { margin-left: 0; }
  header.site .subwrap { padding-bottom: 8px; }
}

/* Fleuron divider: rule, diamond, rule. The cluster's second ornament,
   from the same diamond as the pillar's corner device. Used once or
   twice a page, never stacked. */
.fleuron { display: flex; align-items: center; gap: 14px; margin: 2px 0 32px; }
.fleuron::before, .fleuron::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.fleuron span { width: 9px; height: 9px; background: var(--brass); transform: rotate(45deg); flex: none; }

/* Maker's mark: the Summit badge as a designed object in the footer,
   on the same cream ground the badge was built on, coin-cropped. */
.foot-id { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.foot-id .foot-brand { margin: 0; }
.foot-badge {
  width: 56px; height: 56px; flex: none;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--brass); background: var(--paper);
}

/* Motion, rationed: one slow drift on hero photographs, and a hover
   lift on the two card systems. No motion anywhere else. */
.xmas-hero .hero-frame img { animation: hero-drift 28s ease-in-out infinite alternate; }
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.045); } }
.pillar, .pick-card { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.pillar:hover, .pick-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(13, 23, 16, 0.16); }
@media (prefers-reduced-motion: reduce) {
  .xmas-hero .hero-frame img { animation: none; }
  .pillar, .pick-card { transition: none; }
}

/* Receipt total: the calculator's payoff moment, set as an ink band
   with the total in brass, not a body-weight table row. */
.receipt tr.total td {
  background: var(--ink); color: var(--bone);
  font-size: 1.35rem; padding: 12px 10px;
}
.receipt tr.total td.amt { color: var(--brass-bright); }
.receipt tr.total + tr td { border-top: none; }

/* Single pick in a section: a composed editorial measure, not a
   half-empty two-column grid. */
@media (min-width: 761px) {
  .pick-grid.solo { grid-template-columns: minmax(0, 600px); }
}

/* Compact product block: the map page's guide panel (inside the
   export panel, and the page-foot strip). Cover at thumb scale,
   one price line, buy row, add-on line. */
.product-block.compact { padding: 20px 22px 16px; }
.product-block.compact .pb-grid { grid-template-columns: 150px 1fr; gap: 20px; }
.product-block.compact .pb-stage { padding: 10px 10px 10px; }
.product-block.compact .pb-stage .pb-flat { display: none; }
.product-block.compact .pb-stage .pb-angled { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); }
.product-block.compact h3 { font-size: 1.25rem; }
.product-block.compact .pb-price-line { margin-bottom: 0.2em; }
.product-block.compact .pb-addon {
  font-size: 0.92rem; color: var(--muted); margin: 0.5em 0 0 0;
}
@media (max-width: 860px) {
  .product-block.compact .pb-grid { grid-template-columns: 110px 1fr; }
}

/* The map frame carries the ink head rule of the receipt and the
   product block, so the tool reads as part of the system, not a
   stock Leaflet surface. */
#map { border-top: 4px solid var(--ink); }

/* Booking-window statuses use the finder's badge language. */
.status-badge { white-space: normal; }

/* Pass 2, same day: the calculator's form column becomes a panel in
   the receipt's family, and heroes/titlebands get the fade-up half of
   the rationed motion pair. */
.tool-grid > div:first-child {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--ink);
  padding: 22px 24px 6px;
}
.xmas-hero, .xmas-titleband { animation: fade-up 0.7s ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .xmas-hero, .xmas-titleband { animation: none; }
}