/* ============================================================
   CityScape™ Vancouver — homepage (T-homepage, 2026-09-21)
   Everything below the start screen, plus the hero additions
   (specs strip, Kickstarter CTA). Scoped to main.home so the
   game's own stylesheets are untouched. Tokens mirror press.css.
   ============================================================ */
/* html.home-mode: set by js/homepage.js while the homepage is showing,
   removed by app.js when a game starts. Lifts the game's viewport lock. */
html.home-mode, html.home-mode body {
  height: auto !important; min-height: 100%; overflow: visible !important; overflow-x: hidden !important;
  background: #F4EFE4 !important;
}
main.home {
  --hp-cream: #F4EFE4; --hp-paper: #FFFCF5; --hp-ink: #1c2836; --hp-muted: #6F675A;
  --hp-blue: #1B6FC8; --hp-blue-deep: #155BA6; --hp-gold: #C8A24D; --hp-hairline: rgba(200,162,77,.55);
  --hp-max: 1120px;
  display: block; background: var(--hp-cream); color: var(--hp-ink);
  font-family: 'Barlow', system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
main.home .wrap { max-width: var(--hp-max); margin: 0 auto; padding: 0 24px; }
main.home .home-band { padding: 64px 0; border-top: 1px solid var(--hp-hairline); }
main.home .eyebrow { font: 600 13px/1 'Barlow Condensed','Barlow',sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--hp-muted); margin: 0 0 10px; }
main.home h2 { font: 700 clamp(28px, 3.4vw, 40px)/1.1 'Barlow Condensed','Barlow',sans-serif; margin: 0 0 12px; text-wrap: balance; }
main.home h3 { font: 700 22px/1.15 'Barlow Condensed','Barlow',sans-serif; margin: 12px 0 6px; }
main.home p { text-wrap: pretty; }
main.home .sub { color: var(--hp-muted); font-size: 17px; line-height: 1.6; max-width: 62ch; margin: 0 0 18px; }
main.home .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
main.home .btn {
  display: inline-block; font: 700 14px/1 'Barlow Condensed','Barlow',sans-serif; letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 20px; border-radius: 4px; border: 1.5px solid transparent; text-decoration: none; cursor: pointer;
}
main.home .btn-primary { background: var(--hp-blue); color: #fff; }
main.home .btn-primary:hover { background: var(--hp-blue-deep); }
main.home .btn-secondary { background: transparent; color: var(--hp-blue-deep); border-color: var(--hp-hairline); }
main.home .btn-secondary:hover { border-color: var(--hp-blue); }
main.home .btn-ks { background: #05CE78; color: #0b2b1d; }
main.home .btn-ks:hover { background: #04b86b; }
main.home .link { background: none; border: 0; padding: 0; margin-top: 22px; color: var(--hp-blue-deep); font: 600 16px 'Barlow', sans-serif; border-bottom: 1px solid var(--hp-hairline); cursor: pointer; }
main.home .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Hero additions (inside #explainerScreen) ─────────── */
main.home .specs { list-style: none; display: flex; justify-content: center; gap: 0; margin: 14px 0 0; padding: 0; }
main.home .specs li {
  font: 600 12.5px/1 'Barlow Condensed','Barlow',sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6F675A;
  padding: 0 14px; border-left: 1px solid rgba(200,162,77,.55);
}
main.home .specs li:first-child { border-left: 0; }
#explainerScreen .hero-secondary { text-align: center; margin: 2px 0 4px; }
#explainerScreen .hero-secondary .btn-ks {
  display: inline-block; font: 700 13px/1 'Barlow Condensed','Barlow',sans-serif; letter-spacing: .1em; text-transform: uppercase;
  background: #05CE78; color: #0b2b1d; padding: 12px 18px; border-radius: 4px; text-decoration: none;
}
#explainerScreen .hero-secondary .btn-ks:hover { background: #04b86b; }
#explainerScreen .hero-secondary-note { display: block; margin: 8px auto 0; max-width: 78ch; font: 500 12.5px/1.5 'Barlow', sans-serif; color: #8b8272; text-wrap: pretty; }
#explainerScreen .hero-secondary-note strong { color: #1c2836; }

/* ── Proof row ───────────────────────────────────────── */
/* Paper, so the page alternates cream/paper/cream/paper/cream now that the
   paper #kickstarter band is gone. The chips flip to cream to stay visible. */
main.home .proof { padding: 36px 0; background: var(--hp-paper); }
main.home .venue-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
main.home .venue-chips li {
  display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 'Barlow Condensed','Barlow',sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hp-ink); background: var(--hp-cream); border: 1px solid var(--hp-hairline); border-radius: 999px; padding: 8px 14px 8px 10px;
}
main.home .venue-chips .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--nh, #1A1A1A); }
main.home #proofQuotes:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 28px; }

/* ── How it plays ────────────────────────────────────── */
/* Paper: with the venue-chip band gone this sits straight under the cream
   splash, and cream-on-cream leaves only a hairline between them. */
main.home .how { background: var(--hp-paper); }
main.home .beats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 24px; }

/* Cards fanned, lifted from .bs-bill (dashboard-target.css:4303) — the auction
   reveal is already a symmetric index-driven fan and 9deg is the house angle.
   The BOX sets the row height, not the art, so all four headings align.
   Cards are absolutely positioned ON PURPOSE: an in-flow img stretches an
   aspect-ratio box instead of being bound by it, which is what left the
   headings 11px apart before.
   HEIGHT is fixed and width follows, so cards come out the same size like real
   cards — and the same size in the 4-card fan as in the 3-card ones. Fixing
   width instead would give them different heights, since sources vary ~5% in
   ratio. */
main.home .beat-fan {
  position: relative; width: 100%; max-width: 240px; aspect-ratio: 6 / 5;
  --step: 38px; --angle: 9deg;
}
/* Build shows four (it is the only beat with a landmark), so the step and the
   angle tighten to keep the spread inside the 247px column. */
main.home .beat-fan[data-n="4"] { --step: 26px; --angle: 7deg; }

main.home .beat-fan img {
  position: absolute; left: 50%; top: 50%;
  height: 88%; width: auto; max-width: none; display: block;
  border-radius: 6px; box-shadow: 0 6px 16px rgba(28,40,54,.18);
  transform: translate(calc(-50% + (var(--i) - (var(--n) - 1) / 2) * var(--step)), -50%)
             rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--angle)));
  transition: transform 180ms ease;
}
/* Index and stacking. Hero on top, the rest descending outward from it. */
main.home .beat-fan[data-n="3"] img:nth-child(1) { --i: 0; z-index: 1; }
main.home .beat-fan[data-n="3"] img:nth-child(2) { --i: 1; z-index: 3; }
main.home .beat-fan[data-n="3"] img:nth-child(3) { --i: 2; z-index: 2; }
main.home .beat-fan[data-n="4"] img:nth-child(1) { --i: 0; z-index: 1; }
main.home .beat-fan[data-n="4"] img:nth-child(2) { --i: 1; z-index: 2; }
main.home .beat-fan[data-n="4"] img:nth-child(3) { --i: 2; z-index: 4; }
main.home .beat-fan[data-n="4"] img:nth-child(4) { --i: 3; z-index: 3; }

/* Spread on hover — widen the step and the angle, pivot stays put. */
main.home .beat:hover .beat-fan { --step: 50px; --angle: 13deg; }
main.home .beat:hover .beat-fan[data-n="4"] { --step: 34px; --angle: 9deg; }

/* The rules link was flush-left under column 1, below a row whose items all
   bottom out level, so it read as a footnote on Bid rather than the section's
   own action. A hairline under the grid makes it the band's footer. */
main.home .how .beats { padding-bottom: 26px; border-bottom: 1px solid var(--hp-hairline); }
main.home .beat p { color: var(--hp-muted); line-height: 1.55; margin: 0; max-width: 34ch; }

/* ── Local Spots: the /local-spots map header, rebuilt static ──────────
   The neighbourhood tints are PAINTED INTO the artwork (the live map's
   polygons are fillOpacity:0), so this needs no map library — just the image,
   four signs and the card. Saves ~162KB of Leaflet on the homepage. */
main.home .spots { background: var(--hp-paper); padding: 0; }
/* Tall enough that the card clears the two low signs (Kitsilano and Mt.
   Pleasant sit at ~72% of the artwork). At 420px the card was taller than
   the band and spilled out of it. */
main.home .spots-hero { position: relative; overflow: hidden; height: clamp(560px, 44vw, 640px); background: var(--hp-cream); }

/* The signs are positioned as percentages OF THE ARTWORK, so this box must
   keep the image's own aspect ratio and the parent does the cropping. Never
   object-fit:cover on the image: that shifts the visible region and every sign
   lands somewhere wrong. Centred vertically because the zones sit in the
   middle band of the drawing; the crop eats sky and south Vancouver. */
main.home .spots-map { position: absolute; left: 0; width: 100%; aspect-ratio: 1130 / 710; top: 50%; transform: translateY(-50%); }
main.home .spots-map img { width: 100%; height: 100%; display: block; }
main.home .spots-map .sign { position: absolute; width: 19%; transform: translate(-50%, -50%); pointer-events: none; }
/* Shadow on the whole sign, never on its path — the white plate is its only
   boundary against cream (same rule as local-spots.css:129). */
main.home .spots-map .street-sign { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 4px rgba(28,40,54,.28)); }

/* Top-anchored, not centred: the card has to sit above the low signs, and
   centring it in a short band pushed it straight into them. */
main.home .spots-hero .wrap { position: relative; height: 100%; display: flex; align-items: flex-start; padding-top: 28px; pointer-events: none; }
main.home .spots-card {
  /* 340px keeps the right edge clear of the Downtown sign, whose left edge
     sits at 37.9% of the band width. Wider and they collide at 1280-1440. */
  pointer-events: auto; max-width: min(340px, 32vw);
  background: rgba(244,239,228,.94); border: 2px solid var(--hp-gold); border-radius: 10px;
  padding: 22px 24px 24px;
}
/* The card has to stay short enough to clear the two low signs, so it runs
   tighter than a normal band: smaller heading, and buttons that fit on ONE
   row. Left to the default padding they wrapped to two rows and added 57px. */
main.home .spots-card h2 { font-size: clamp(26px, 2.4vw, 32px); margin-bottom: 10px; }
main.home .spots-card .sub { font-size: 16px; margin-bottom: 12px; text-wrap: balance; }
main.home .spots-card .stats { margin-bottom: 0; }
main.home .spots-card .actions { margin-top: 16px; gap: 8px; flex-wrap: nowrap; }
main.home .spots-card .btn { padding: 12px 14px; white-space: nowrap; }

/* ── Box ── the launch band: headline, countdown, box shot, both CTAs ── */
main.home .box .wrap { text-align: center; }
/* Three deliberate widths give the centred stack a taper: image 900, prose
   48ch, signup 560. 62ch reads fine ragged-left but is too wide centred. */
main.home .box .sub { margin: 22px auto 0; max-width: 48ch; text-wrap: balance; }

/* Pledge tiers, one row of three. Full 1120px wrap rather than the 900px the
   single box shot used — three renders need the width. */
main.home .tiers { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
main.home .tiers img { width: 100%; height: auto; display: block; border-radius: 4px; border: 1px solid var(--hp-hairline); }
main.home .tiers h3 { font-size: 18px; margin: 10px 0 0; }
main.home .box .actions { justify-content: center; }
main.home .countdown { font: 700 clamp(22px, 2.6vw, 30px)/1.1 'Barlow Condensed','Barlow',sans-serif; color: var(--hp-blue-deep); margin: 0 0 12px; }
main.home .box .countdown { margin: 0 0 4px; }

/* Email capture sits below a hairline as the band's third, quietest action. */
main.home .box-signup {
  max-width: 560px; margin: 28px auto 0; padding-top: 22px;
  border-top: 1px solid var(--hp-hairline);
}
main.home .note { font: 500 13.5px/1.5 'Barlow', sans-serif; color: var(--hp-muted); max-width: 46ch; margin: 0 auto 12px; text-wrap: balance; }
main.home .subscribe { display: flex; gap: 10px; flex-wrap: wrap; }
/* .subscribe is a bare flex row — text-align:center does not centre flex children. */
main.home .box .subscribe { justify-content: center; }
main.home .subscribe input[type=email] {
  flex: 1 1 220px; min-width: 0; font: 400 16px 'Barlow', sans-serif; padding: 12px 14px; border: 1.5px solid var(--hp-hairline); border-radius: 4px; background: #fff; color: var(--hp-ink);
}
main.home .subscribe input[type=email]:focus { outline: 2px solid var(--hp-blue); outline-offset: 1px; border-color: var(--hp-blue); }
main.home .done { font-weight: 600; color: var(--hp-blue-deep); margin: 0; }

/* ── Responsive ──────────────────────────────────────── */
/* 4-up only holds while the wrap is at its 1120px max (247px a column). Below
   that the columns shrink under the 240px art and the copy re-wraps to four
   lines, so go 2x2 while each column still fits the full measure. Cascade order
   1040 -> 900 -> 640 -> 480 is load-bearing; do not reorder. */
@media (max-width: 1040px) { main.home .beats { grid-template-columns: repeat(2, 1fr); gap: 26px 28px; } }
@media (max-width: 900px) {
  /* Card above the map rather than over it — at phone width a floating card
     covers the zones it is meant to be introducing. Mirrors /local-spots. */
  main.home .spots-hero { height: auto; }
  main.home .spots-hero .wrap { display: block; padding-top: 32px; }
  main.home .spots-card { max-width: none; background: var(--hp-cream); }
  main.home .spots-map { position: relative; top: auto; transform: none; margin-top: 24px; }
  main.home .tiers { grid-template-columns: 1fr; gap: 22px; }
  main.home .home-band { padding: 44px 0; }
}
/* One column later than the rest of the page: 2x2 still gives ~200px a column
   at 640px. Stacking at 900 would put four full-height cards in a row on every
   tablet. */
@media (max-width: 640px) { main.home .beats { grid-template-columns: 1fr; gap: 22px; } }
@media (max-width: 480px) {
  main.home .specs { flex-wrap: wrap; row-gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  main.home * { transition: none !important; }
  /* transition:none does not stop a transform changing — pin the fan closed. */
  main.home .beat:hover .beat-fan { --step: 38px; --angle: 9deg; }
  main.home .beat:hover .beat-fan[data-n="4"] { --step: 26px; --angle: 7deg; }
}

/* ── Start screen: one spacing rhythm ─────────────────────
   The blocks used to carry six different margins that collapsed into each
   other unpredictably: 9 / 12 / 16 / 16 / 16 and then 2px between the start
   buttons and the Kickstarter line. Laying the column out with a single gap
   gives exact, even spacing and removes margin collapsing entirely, so there
   is one number to change instead of six. Desktop only — the phone splash has
   its own design with sticky bottom buttons. */
@media (min-width: 901px) {
  #explainerScreen .explainer-container { display: flex; flex-direction: column; gap: 26px; }
  #explainerScreen .explainer-container > * { margin-top: 0 !important; margin-bottom: 0 !important; }
  /* The subtitle is a caption on the logo, so it sits closer to it. */
  #explainerScreen .explainer-header { margin-top: -10px !important; }
  /* A wider break before the Kickstarter line: it is a different subject from
     the two start buttons above it. */
  #explainerScreen .hero-secondary { margin-top: 8px !important; }
}