/* here.events — the front door. The palette, faces and theme pill are the city
   sites' (lqa-events styles.css), so the page reads as the family's. */
:root {
  --sky: #edf1f4; --mist: #ffffff; --ink: #1b2733; --ink-soft: #55636f; --ink-bright: #1b2733;
  --line: #c9d2da; --gold: #e8791d; --gold-soft: #fbe9d8;
  --land: #dfe6ec; --land-edge: #9fb0bf;
  --display: "Big Shoulders", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --pagew: 128rem; /* was 62rem: the map now fills the screen (2026-10-11) */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sky: #141a20; --mist: #1d252e; --ink: #e8edf1; --ink-soft: #9aa7b2; --ink-bright: #ffffff;
    --line: #333f4a; --gold: #f08a33; --gold-soft: #3a2a1a;
    --land: #1d252e; --land-edge: #4a5a6a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --sky: #141a20; --mist: #1d252e; --ink: #e8edf1; --ink-soft: #9aa7b2; --ink-bright: #ffffff;
  --line: #333f4a; --gold: #f08a33; --gold-soft: #3a2a1a;
  --land: #1d252e; --land-edge: #4a5a6a;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html { overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--sky); color: var(--ink); font: 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 2px; }
a { color: inherit; }

/* ---- masthead ---- */
.masthead { width: min(var(--pagew), 100% - 3rem); margin: 1.6rem auto 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; position: relative; z-index: 2; } /* above the fold's fade overlay, which starts at the window's top (2026-10-14) */
.eyebrow { margin: 0; font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
h1 { margin: .1rem 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(2.8rem, 8vw, 4.6rem); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; color: var(--ink-bright); }
h1 .dot { color: var(--gold); }
.masthead-tools { flex: none; padding-top: .3rem; display: flex; align-items: center; gap: .6rem; }
.list-pill { display: inline-flex; align-items: center; gap: .4rem; height: 2.4rem; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--mist); color: var(--ink); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.list-pill svg { width: 1rem; height: 1rem; color: var(--gold); }
.list-pill:hover { border-color: var(--gold); }


/* the theme pill, as the city sites draw it */
.theme-toggle { position: relative; display: inline-flex; align-items: center; gap: 0; padding: .2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--mist); }
.theme-toggle button { position: relative; z-index: 1; width: 2rem; height: 2rem; display: grid; place-items: center; background: none; border: 0; padding: 0; color: var(--ink-soft); border-radius: 999px; cursor: pointer; }
.theme-toggle button svg { width: 1rem; height: 1rem; }
.theme-toggle button[aria-checked="true"] { color: var(--sky); }
.theme-toggle button:not([aria-checked="true"]):hover { color: var(--ink); }
.theme-knob { position: absolute; top: .2rem; left: .2rem; width: 2rem; height: 2rem; border-radius: 999px; background: var(--ink); transition: left .18s; }
.theme-toggle[data-active="dark"] .theme-knob { left: calc(.2rem + 2rem); }
.theme-toggle[data-active="system"] .theme-knob { left: calc(.2rem + 4rem); }

/* ---- the fold: masthead + map fill the first screen, whatever its size (Steve, 2026-10-11: "this is way to tiny …
   fit to screen size" — the page had been capped at 62rem, a small map on a big display). The map takes every row the
   masthead leaves; the svg letterboxes (preserveAspectRatio meet), so a wide screen centres it. The list follows on scroll. ---- */
.fold { height: calc(100svh - var(--footh, 3.2rem)); min-height: 34rem; display: grid; grid-template-rows: auto minmax(0, 1fr); } /* the first screen less the pinned footer */
.map { width: min(var(--pagew), 100% - 3rem); margin: .8rem auto 0; padding-bottom: .8rem; display: grid; grid-template-rows: minmax(0, 1fr); min-height: 0; }
.map-stage { position: relative; min-height: 0; }
#usMap { display: block; width: 100%; height: 100%; min-height: 0; touch-action: pan-y; cursor: grab; outline: none; }
/* the map fades into the page at the top, the bottom and the right of the screen, at any zoom: a gradient overlay on
   the map's own edges (a CSS mask on the svg was tried first and made every frame take over a second). The land is drawn
   past the frame (build-map.mjs BLEED), so what fades is land, not a frame line; no fade at the left, where the inset
   boxes sit against the frame (Steve, 2026-10-14: "let the fade go all the way to the top and bottom of the screen") */
.map-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--sky), transparent 8%, transparent 92%, var(--sky)), linear-gradient(90deg, transparent 94%, var(--sky)); }
/* zoomed in, the left edge shows land too (the whole map has no hard edge, Steve 2026-10-14); at k=1 that side is the inset boxes, so no fade there */
.map-stage:has(#usMap.is-zoomed)::before { background: linear-gradient(180deg, var(--sky), transparent 8%, transparent 92%, var(--sky)), linear-gradient(90deg, var(--sky), transparent 6%, transparent 94%, var(--sky)); }
/* on a wide screen the fade starts at the window's top edge, not the map's: the same overlay drawn on the fold instead
   of the map stage (the map itself does not move), the map's own width, running from the top of the window to the foot
   of the map, so the land arrives already half faded under the masthead and comes in slowly from there (Steve,
   2026-10-14: "map should slowfade to the top of the window … including behind the top title thingy"; then: "didn't want
   it to move just to extend fade boundary so it faded at the top of the window") */
@media (min-width: 701px) {
  :root:not([data-share]) .fold { position: relative; overflow: clip; } /* the clip the svg no longer does: the land stops at the fold's foot */
  :root:not([data-share]) #usMap { overflow: visible; } /* the land drawn BLEED units past the frame spills out of the svg's box: up behind the masthead to the window's top, and out to the sides (the map itself stays put; "still want the fade to GO ALL THE WAY TO THE TOP of the window") */
  :root:not([data-share]) .map-stage::before { display: none; }
  /* the top fade runs from the window's edge to .8rem under the frame's top — the masthead's height (its margin, the eyebrow,
     the h1 at .95 line height, the map's margin) plus .8rem — so the land behind the title fades in and the Alaska box, 24
     units down the frame, keeps a crisp edge (Steve: "I still want alaska at the top", the boxes must not fade) */
  :root:not([data-share]) .fold { --fade-top: calc(4.5rem + .95 * clamp(2.8rem, 8vw, 4.6rem)); }
  :root:not([data-share]) .fold::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, var(--sky), transparent var(--fade-top), transparent 93%, var(--sky)), linear-gradient(90deg, transparent 94%, var(--sky)); }
  :root:not([data-share]) .fold:has(#usMap.is-zoomed)::before { background: linear-gradient(180deg, var(--sky), transparent var(--fade-top), transparent 93%, var(--sky)), linear-gradient(90deg, var(--sky), transparent 6%, transparent 94%, var(--sky)); }
}
#usMap.is-zoomed { cursor: grab; }
#usMap.is-zoomed:active { cursor: grabbing; }
/* the keyboard-focus frame, drawn on an overlay above the land: a box-shadow on the svg itself paints under the svg's
   own content, and on a wide screen the land bleeds past the frame (overflow visible), so Newfoundland, the BC coast,
   the Great Lakes and Mexico cut through it (Steve, 2026-10-30: "the map overlays the border badly here"). The land
   still bleeds and fades to the window's top; only the frame line moves on top. */
.map-stage:has(#usMap:focus-visible)::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: .4rem; box-shadow: 0 0 0 2px var(--ink-soft); }
/* zoom buttons: the theme pill's look, stacked at the map's corner */
.zoom { position: absolute; right: .4rem; bottom: .4rem; z-index: 2; display: flex; flex-direction: column; gap: .25rem; }
.zoom button { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: .55rem; background: var(--mist); color: var(--ink); font: 600 1.15rem/1 var(--body); cursor: pointer; }
.zoom button svg { width: 1rem; height: 1rem; }
.zoom button:hover:not(:disabled) { color: var(--gold); border-color: var(--gold); }
.zoom button:disabled { opacity: .4; cursor: default; }
main { width: min(var(--pagew), 100% - 3rem); margin: 0 auto; flex: 1; }
.far path { pointer-events: none; vector-effect: non-scaling-stroke; }
.far .fade { pointer-events: none; }
.fade-stop { stop-color: var(--sky); } /* the edge fades go to the page colour, whichever theme */
.far-fill { fill: color-mix(in srgb, var(--land) 50%, var(--sky)); stroke: none; }
.far-edge { fill: none; stroke: color-mix(in srgb, var(--land-edge) 50%, var(--sky)); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.land path { fill: var(--land); stroke: var(--land-edge); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.inset-line { fill: none; stroke: var(--land-edge); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; opacity: .7; }
.inset-back { fill: var(--sky); stroke: none; } /* under each inset: hides the neighbouring land where the box sits (the left insets slide, see map.js) */
.lakes { fill: var(--sky); fill-rule: evenodd; stroke: var(--land-edge); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.states { fill: none; stroke: var(--land-edge); stroke-width: .7; stroke-opacity: .75; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.pin { cursor: pointer; text-decoration: none; }
.pin .halo { fill: var(--gold); opacity: .18; transition: opacity .15s, r .15s; }
.pin .dot { fill: var(--gold); stroke: var(--sky); stroke-width: 1.5; }
.pin .leader { stroke: var(--ink-soft); stroke-width: 1; opacity: .6; vector-effect: non-scaling-stroke; }
.pin .label { font: 700 13px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; fill: var(--ink); paint-order: stroke; stroke: var(--sky); stroke-width: 3px; stroke-linejoin: round; }
.pin.is-soon .dot { fill: var(--ink-soft); opacity: .7; }
.pin.is-soon .halo { fill: var(--ink-soft); opacity: .12; }
.pin.is-soon .label { fill: var(--ink-soft); font-weight: 500; }
.pin:hover .halo, .pin:focus-visible .halo { opacity: .45; r: calc(11px / var(--k, 1)); }
.pin:hover .label, .pin:focus-visible .label { fill: var(--gold); }
.pin:focus-visible { outline: none; }
.pin:focus-visible .dot { stroke: var(--ink); stroke-width: 2.5; }
/* zoomed in: dots and halos keep their on-screen size (--k = the zoom ratio, set by map.js); names are set in screen
   pixels on every screen (--ks = screen px per map unit over the 1280-wide desktop's 1.333, never under 1, so the
   unzoomed desktop and the share card keep their look and a zoomed phone gets readable names) */
.pin .halo { r: calc(7px / var(--k, 1)); }
.pin .dot { r: calc(4.2px / var(--k, 1)); stroke-width: calc(1.5px / var(--k, 1)); }
.pin:focus-visible .dot { stroke-width: calc(2.5px / var(--k, 1)); }
/* the nearest city after "zoom to my location": a gold ring and a gold name */
.pin.is-nearest .halo { opacity: .5; r: calc(12px / var(--k, 1)); }
.pin.is-nearest .dot { stroke: var(--ink); stroke-width: calc(2px / var(--k, 1)); }
.pin.is-nearest .label { fill: var(--gold); }
/* "you are here": a dot in the ink with a pulsing gold ring, sized in screen pixels at every zoom */
.you { pointer-events: none; }
.you .you-dot { fill: var(--ink); stroke: var(--mist); stroke-width: calc(2px / var(--k, 1)); r: calc(5px / var(--k, 1)); }
.you .you-pulse { fill: none; stroke: var(--gold); stroke-width: calc(2px / var(--k, 1)); animation: you-pulse 1.8s ease-out infinite; }
@keyframes you-pulse { from { r: calc(6px / var(--k, 1)); opacity: .9; } to { r: calc(26px / var(--k, 1)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .you .you-pulse { animation: none; r: calc(12px / var(--k, 1)); opacity: .6; } }
.pin .label { font-size: calc(13px / var(--ks, 1)); stroke-width: calc(3px / var(--ks, 1)); }
/* the key and the count sit in the footer, right of the lockup (was a caption under the map until 2026-10-14) */
.foot-map { display: flex; gap: 1.2rem; align-items: center; justify-content: flex-end; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.foot-map .privacy { color: inherit; text-decoration: none; } /* the privacy page AdSense asks for (2026-10-24) */
.foot-map .privacy:hover { color: var(--gold); text-decoration: underline; }
.keys { display: inline-flex; align-items: center; gap: 1.2rem; } /* the two swatches stay one row, even when the footer stacks on a phone */
.key { display: inline-flex; align-items: center; gap: .4rem; }
.sw { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--gold); }
.sw.soon { background: var(--ink-soft); opacity: .7; }
.near { color: var(--gold); }
.near[hidden] { display: none; }

/* ---- the City List pop-up: the city sites' More Cities sheet (lqa styles.css .city-sheet), Steve 2026-10-19 —
   a bottom sheet on phones, a centred dialog on wider screens; every city grouped by state in columns ---- */
.sheet { position: fixed; inset: 0; z-index: 35; display: flex; align-items: flex-end; justify-content: center; } /* over the sticky footer (12) */
.sheet[hidden] { display: none; }
.sheet:target { display: flex; } /* no script: the pill's #citySheet link shows it */
.sheet-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.sheet-card { position: relative; width: 100%; max-height: 85vh; max-height: 85dvh; overflow: auto; background: var(--mist); color: var(--ink); border-radius: 16px 16px 0 0; padding: 1.1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0, 0, 0, .35); outline: none; overscroll-behavior: contain; }
.sheet-venue { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin: 0 0 .2rem; }
.sheet-title { font-family: var(--display); font-weight: 700; font-size: 1.6rem; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .8rem; }
body.sheet-open { overflow: hidden; }
.city-groups { columns: 9rem; column-gap: 1.4rem; margin-bottom: 1rem; } /* columns, not a grid: a tall state (Washington) packs beside the short ones */
.city-groups section { break-inside: avoid; margin-bottom: .9rem; }
.city-groups h3 { margin: 0 0 .3rem; font: 500 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.city-groups ul { list-style: none; margin: 0; padding: 0; }
.city-groups li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; padding: .18rem 0; font-size: .95rem; }
.city-groups li a { color: var(--ink); text-decoration: none; font-weight: 600; }
.city-groups li a:hover { color: var(--gold); }
.city-groups li small { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.city-groups li.is-soon span { color: var(--ink-soft); }
/* the By Activity pop-up: one row per site, the name and its address on a line, a sentence under it */
.activity-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.activity-list li { padding: .55rem 0; border-top: 1px solid var(--line); }
.activity-list li:first-child { border-top: 0; padding-top: .1rem; }
.activity-list a { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; color: var(--ink); text-decoration: none; }
.activity-list .act-name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .02em; }
.activity-list small { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: var(--gold); }
.activity-list a:hover .act-name { color: var(--gold); }
.activity-list p { margin: .15rem 0 0; font-size: .9rem; color: var(--ink-soft); }
.source-note { margin: 0 0 1rem; font-size: .72rem; color: var(--ink-soft); }
.city-close { display: block; margin: 0 auto; font: 500 .85rem/1 var(--body); cursor: pointer; border-radius: 999px; padding: .5em .95em; background: var(--sky); color: var(--ink); border: 1px solid var(--line); }
@media (min-width: 641px) {
  .sheet { align-items: center; }
  .sheet-card { width: min(46rem, calc(100vw - 2rem)); border-radius: 12px; padding: 1.1rem 1.4rem 1.2rem; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
  .city-close { display: none; } /* outside click or Esc, as on the city sites */
  .activity-sheet .sheet-card { width: min(30rem, calc(100vw - 2rem)); } /* two rows: no need for the city list's width */
}

/* ---- footer: the city sites' footer (lqa-events styles.css), Steve 2026-10-14: "add ghostwood sites branding like here
   to the here.events page" — the page's own background under a hairline that warms to the brand orange at the centre and
   cools to --line at the sides, the lockup (mark + GHOSTWOOD SITES) centred, one link to ghostwoodlabs.com in a new tab ---- */
footer { position: sticky; bottom: 0; z-index: 12; background: var(--sky); padding: .6rem 1.25rem calc(.6rem + env(safe-area-inset-bottom)); } /* pinned to the screen's foot like the city sites', so the lockup is always on screen (Steve, 2026-10-14: "where is the ghostwood labs branding?") */
footer::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, var(--line), var(--gold) 50%, var(--line)); }
.foot-inner { width: min(var(--pagew), 100% - 3rem); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; white-space: nowrap; } /* the lockup at the left end, as on the city sites, the map's key at the right (Steve, 2026-10-14: "GWL branding same location as LQA site") */
a.gw { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.gw-logo { width: 32px; height: 32px; color: var(--ink-bright); flex: none; }
.gw-credit { margin: 0; font-family: var(--mono); font-size: .9rem; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.gw-credit strong { font-weight: 500; color: var(--gold); }
a.gw:hover .gw-credit strong { color: var(--ink-bright); }

/* ---- narrow screens: the map keeps its dots, drops the always-on names (the City List pop-up carries them) ---- */
@media (max-width: 700px) {
  .fold { display: block; height: auto; min-height: 0; } /* a portrait phone: the map is as wide as the screen and as tall as that makes it */
  .map { margin-top: 1.2rem; display: block; }
  #usMap { height: auto; aspect-ratio: 1280 / 640; }
  .masthead { flex-direction: column; margin-top: 1.4rem; }
  .masthead-tools { order: -1; align-self: flex-end; flex-wrap: wrap; justify-content: flex-end; } /* three controls since By Activity (2026-10-30): on a portrait phone the theme pill takes a second row instead of pushing City List off the left edge */
  .pin .label, .pin .leader { display: none; }
  #usMap.is-zoomed .pin .label, #usMap.is-zoomed .pin .leader { display: initial; } /* zoomed in there is room for the names */
  .pin .dot { r: calc(4.5px / var(--ka, 1)); stroke-width: calc(1.2px / var(--ka, 1)); } /* --ka: screen px per map unit, so the dots keep a size on a 1280-unit frame drawn 390 px wide */
  .pin .halo { r: calc(8px / var(--ka, 1)); }
  .foot-map { flex-direction: column; align-items: flex-end; gap: .25rem; flex: none; } /* the key over the count, two short lines at the right */
  .foot-inner { gap: .8rem; }
}

@media (max-width: 480px) { .gw-credit { display: none; } } /* a narrow phone: the lockup down to its mark, as lqa's footer does when the line will not fit */

/* ---- ?share: the 1200x630 Open Graph card (scripts/share step; never seen by readers) ---- */
:root[data-share] body { width: 1200px; height: 630px; overflow: hidden; margin: 0; padding: 0; display: grid; grid-template-columns: 380px 1fr; align-items: center; gap: 0; } /* the text column must clear the map's left column, where the Alaska and Hawaii boxes sit (2026-10-14) */
:root[data-share] .masthead { padding: 0 0 0 48px; margin: 0; display: block; }
:root[data-share] .masthead .eyebrow { font-size: 12px; letter-spacing: .1em; }
:root[data-share] .masthead h1 { font-size: 58px; line-height: .9; }
:root[data-share] .theme-toggle, :root[data-share] .list-pill, :root[data-share] .sheet, :root[data-share] footer, :root[data-share] .zoom { display: none !important; }
:root[data-share] .fold { display: contents; } /* the masthead and the map are the card's two columns */
:root[data-share] .map { margin: 0; padding: 0 24px 0 0; display: block; width: auto; }
:root[data-share] #usMap { height: auto; aspect-ratio: 1280 / 640; }
:root[data-share] .pin .label, :root[data-share] .pin .leader { display: initial; }