/*
Theme Name: Skatepark Review
Description: Custom theme for skateparkreview.com. Design v2, "pool lip".
Version: 0.1.0
Requires PHP: 8.1
Text Domain: skatepark
*/

@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

/* Skatepark Review, design v2.
   Idea: skateboarding started in empty swimming pools. The one bold motif is the pool lip:
   a concrete coping edge over a band of blue tile. It runs under every hero. Photos arrive
   grey like raw concrete and warm into color. Type is one family (Archivo) used at its
   narrowest for headlines and its widest for numbers. Everything else stays quiet. */

:root {
  --concrete: #dcddd9;
  --slab: #eceeea;
  --paper: #f6f7f4;
  --asphalt: #1b1e21;
  --steel: #666e74;
  --line: #c3c6c0;
  --pool: #1d6fa5;
  --pool-2: #2c87c0;
  --pool-deep: #0c3a5b;
  --pool-light: #9fd2ef;
  --grout: #e8eef1;
  --caution: #e9b949;   /* safety-paint yellow: skateable, with a catch */

  --f: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --narrow: "wdth" 62;
  --tight: "wdth" 72;
  --wide: "wdth" 125;

  --gutter: clamp(16px, 3.2vw, 48px);
  --max: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--asphalt);
  /* poured-concrete grain: fine noise at low opacity over the page color */
  background: var(--concrete) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  font: 400 1.125rem/1.55 var(--f); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pool); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 20; background: var(--paper); padding: 8px 12px; }
p { max-width: 64ch; }

/* ---------------------------------------------------------------- type */
.display {
  font-variation-settings: var(--narrow); font-weight: 850;
  font-size: clamp(4rem, 10.5vw, 10rem); line-height: 0.84; letter-spacing: -0.012em;
  margin: 0; text-wrap: balance;
}
.display--xl { font-size: clamp(5.5rem, 19vw, 17rem); line-height: 0.8; padding-bottom: 0.14em; }
.display--park { font-size: clamp(3.4rem, 8.4vw, 8rem); }
.h2 { font-variation-settings: var(--tight); font-weight: 800; font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 0.95; margin: 0 0 12px; }
.h3 { font-variation-settings: var(--tight); font-weight: 750; font-size: 1.6rem; line-height: 1.05; margin: 0 0 18px; }
.lede { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.45; max-width: 34ch; margin: 28px 0 0; }

/* ---------------------------------------------------------------- stars */
.stars { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; white-space: nowrap; }
.stars__num { font-variation-settings: var(--wide); font-weight: 750; }
.stars__bar {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2l2.9 6.6 7.1.6-5.4 4.7 1.6 7-6.2-3.7-6.2 3.7 1.6-7L2 9.4l7.1-.6z'/%3E%3C/svg%3E");
  display: inline-block; width: 5.6em; height: 1em;
  background: linear-gradient(90deg, currentColor calc(var(--r) / 5 * 100%), color-mix(in srgb, currentColor 22%, transparent) 0);
  -webkit-mask: var(--star) 0 0 / 1.12em 1em repeat-x; mask: var(--star) 0 0 / 1.12em 1em repeat-x;
}
.stars__count { color: var(--steel); font-size: 0.9em; }
.stars--sm { font-size: 0.88rem; gap: 6px; }
.stars--lg { font-size: 1.5rem; }

/* ---------------------------------------------------------------- pool lip */
.lip { position: relative; z-index: 2; }
/* coping: the rounded concrete edge, lit from above */
.lip__coping {
  height: 18px; border-radius: 9px 9px 0 0;
  background: linear-gradient(#fbfbf9 0 35%, #e2e3df 100%);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}
/* one row of pool tile under the coping, then the wall drops away */
.lip__tiles {
  height: 22px;
  background-color: var(--pool);
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, var(--pool) 50%, var(--pool-2) 50%);
  background-size: 22px 22px, 22px 22px, 44px 22px;
  box-shadow: inset 0 4px 5px -3px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(0, 0, 0, 0.12);
}

/* ---------------------------------------------------------------- header */
.top { background: var(--paper); }
.top__row { max-width: var(--max); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; gap: 36px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-variation-settings: var(--tight); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.005em; }
.logo__mark { width: 30px; height: 30px; fill: none; stroke: var(--pool); stroke-width: 5; stroke-linecap: round; }
.logo__mark circle { fill: var(--pool); stroke: none; }
.top__nav { display: flex; gap: 26px; font-weight: 600; font-size: 1rem; }
.top__nav a { text-decoration: none; }
.top__nav a:hover { color: var(--pool); }
.top__search { margin-left: auto; }
.top__search input, .bigsearch input {
  font: inherit; color: inherit; background: var(--slab); border: 0; border-radius: 999px;
  padding: 10px 18px; width: 260px; font-size: 1rem;
}
.top__search input:focus, .bigsearch input:focus { background: #fff; }

/* ---------------------------------------------------------------- buttons */
button, .btn {
  font: 700 1rem/1 var(--f); font-variation-settings: var(--tight);
  background: var(--asphalt); color: var(--paper); border: 0; border-radius: 999px;
  padding: 16px 24px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
button:hover, .btn:hover { background: var(--pool); }
.btn--quiet { background: transparent; color: var(--asphalt); box-shadow: inset 0 0 0 2px var(--asphalt); }
.btn--quiet:hover { background: var(--asphalt); color: var(--paper); }
.textbtn { background: none; color: var(--asphalt); padding: 12px 0; font-size: 1.05rem; }
.textbtn:hover { background: none; color: var(--pool); }
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------------------------------------------------------------- photo reveal (the one motion moment) */
.reveal { filter: grayscale(1) contrast(1.05); transition: filter 1.8s ease 0.2s; }
.is-ready .reveal { filter: none; }

/* ---------------------------------------------------------------- home */
.hero {
  padding: clamp(40px, 6vw, 88px) 0 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end;
}
.hero__text { padding-bottom: clamp(32px, 5vw, 72px); }
.bigsearch { display: flex; gap: 8px; margin-top: 36px; max-width: 560px; background: #fff; border-radius: 999px; padding: 6px; }
.bigsearch input { flex: 1; min-width: 0; background: transparent; font-size: 1.15rem; padding: 12px 18px; width: auto; }
.bigsearch input:focus { background: transparent; }
.icon--pin { color: var(--pool); }
.hero__photo { margin: 0; position: relative; align-self: stretch; min-height: 520px; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: opacity 1.2s ease, filter 1.8s ease 0.2s; }
.hero__photo img:not(.is-on) { opacity: 0; }
.hero__photo figcaption { transition: opacity 0.4s; }
.hero__photo.is-swapping figcaption { opacity: 0; }
.hero__photo figcaption {
  position: absolute; left: 0; bottom: 0; background: var(--paper); padding: 14px 18px 12px;
  display: grid; gap: 2px; font-size: 0.95rem;
}
.hero__photo figcaption strong { font-variation-settings: var(--tight); font-weight: 800; font-size: 1.2rem; }
.hero__photo figcaption a { text-decoration: none; }
.hero__photo figcaption > span:not(.stars) { color: var(--steel); }

.band { padding: clamp(64px, 8vw, 120px) 0 clamp(64px, 8vw, 110px) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.band__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); margin-bottom: 32px; flex-wrap: wrap; }
.band__head p { margin: 0; color: var(--steel); }
.rail { list-style: none; margin: 0; padding: 0 var(--gutter) 12px 0; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 24vw, 340px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.rail li { scroll-snap-align: start; }
.card { display: grid; gap: 6px; text-decoration: none; }
.card__img { aspect-ratio: 4 / 5; background: var(--slab); overflow: hidden; margin-bottom: 10px; }
.card__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.5s, transform 0.6s; }
.card:hover .card__img img, .card:focus-visible .card__img img { filter: none; transform: scale(1.03); }
.card__name { font-variation-settings: var(--tight); font-weight: 800; font-size: 1.55rem; line-height: 1; }
.card__place { color: var(--steel); font-size: 0.98rem; }

.night { background: var(--pool-deep); color: var(--paper); padding: clamp(64px, 8vw, 120px) var(--gutter); }
.night > * { max-width: calc(var(--max) - 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.night__head p { color: color-mix(in srgb, var(--paper) 75%, transparent); margin: 0; }
.usmap { margin-top: 24px; margin-bottom: 0; position: relative; }
.usmap svg { width: 100%; height: auto; display: block; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.usmap svg:active { cursor: grabbing; }
.usmap circle { fill: var(--pool-light); opacity: 0.8; transition: opacity 0.2s; }
.usmap circle:hover { fill: #fff; opacity: 1; stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; cursor: pointer; }
.usmap__tip {
  position: absolute; left: 0; top: 0; pointer-events: none; transform: translate(-50%, calc(-100% - 14px));
  background: var(--paper); color: var(--asphalt); padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  font-variation-settings: var(--tight); font-weight: 750; font-size: 1rem; opacity: 0; transition: opacity 0.15s;
}
.usmap__tip.is-on { opacity: 1; }
.states { margin-top: 48px; font-variation-settings: var(--tight); font-weight: 700; font-size: clamp(1.35rem, 2.3vw, 2.1rem); line-height: 1.32; text-wrap: pretty; }
.states a { text-decoration: none; margin-right: 0.3em; white-space: nowrap; }
.states a:hover { color: var(--pool-light); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.states sup { font-variation-settings: var(--wide); font-weight: 500; font-size: 0.45em; vertical-align: 0.95em; margin-left: 0.2em; color: var(--pool-light); }

/* ---------------------------------------------------------------- shared page head */
.crumbs { font-size: 0.95rem; color: var(--steel); display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.crumbs a { color: var(--steel); }
.pagehead { max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 28px; }
.pagehead__meta { font-size: 1.25rem; margin: 18px 0 0; }
.pagehead__meta strong { font-variation-settings: var(--wide); font-weight: 750; }

/* ---------------------------------------------------------------- state */
.statebody { max-width: var(--max); margin: 0 auto; padding: 48px var(--gutter) 96px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.statemap { position: sticky; top: 24px; }
.statemap svg { width: 100%; height: auto; display: block; }
.shape { fill: var(--slab); stroke: var(--steel); stroke-width: 1; stroke-linejoin: round; }
.statemap circle { fill: var(--pool); transition: opacity 0.2s, r 0.15s; }
.statemap circle.is-off { opacity: 0.12; }
.statemap circle.is-hot { fill: var(--asphalt); r: 9; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-bottom: 18px; border-bottom: 2px solid var(--asphalt); }
.filters__label { margin: 0; font-weight: 600; }
.filters__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--paper); color: var(--asphalt); padding: 8px 14px; font-size: 0.95rem; font-variation-settings: "wdth" 100; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--line); }
.chip span { color: var(--steel); font-weight: 500; }
.chip:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--asphalt); }
.chip[aria-pressed="true"] { background: var(--pool); color: #fff; box-shadow: none; }
.chip[aria-pressed="true"] span { color: var(--pool-light); }
.filters__sort { margin-left: auto; font-size: 0.95rem; color: var(--steel); }
.filters__sort select { font: inherit; color: var(--asphalt); background: var(--paper); border: 0; border-radius: 999px; padding: 8px 12px; margin-left: 6px; }
.parklist__count { color: var(--steel); margin: 16px 0 4px; font-size: 0.95rem; }
.rows { list-style: none; margin: 0; padding: 0; }
.row a { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.row a:hover .row__name { color: var(--pool); }
.row__img { aspect-ratio: 4 / 3; background: var(--slab); overflow: hidden; display: grid; place-items: center; }
.row__img img { width: 100%; height: 100%; object-fit: cover; }
.radar { width: 100%; height: 100%; }
.radar circle { fill: var(--steel); opacity: 0.55; }
.radar .ring { fill: none; stroke: var(--line); stroke-width: 1; opacity: 1; }
.radar .me { fill: var(--pool); opacity: 1; stroke: var(--paper); stroke-width: 2.5; }
.row__main { display: grid; gap: 2px; }
.row__name { font-variation-settings: var(--tight); font-weight: 800; font-size: 1.45rem; line-height: 1.05; }
.row__place { color: var(--steel); font-size: 0.98rem; }
.row__feats { display: flex; gap: 8px; margin-top: 6px; color: var(--asphalt); }
.row__feats .icon { width: 20px; height: 20px; }
.row__side { display: grid; justify-items: end; gap: 6px; text-align: right; }
.row__hours { font-size: 0.9rem; color: var(--steel); }

/* ---------------------------------------------------------------- park */
/* Photo mosaic: skaters judge a park by its photos, so they lead the page. */
.mosaic { position: relative; background: var(--asphalt); }
.mosaic__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; height: min(64vh, 640px); min-height: 340px;
  grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mosaic__grid li { overflow: hidden; background: #2a2e32; }
.mosaic__grid li:first-child { grid-row: 1 / -1; }
.mosaic--n2 .mosaic__grid { grid-template-columns: 3fr 2fr; grid-template-rows: 1fr; }
.mosaic--n3 .mosaic__grid { grid-template-columns: 2fr 1fr; }
.mosaic--n4 .mosaic__grid li:nth-child(2) { grid-column: 2 / -1; }
.mosaic__grid a { display: block; height: 100%; }
.mosaic__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.mosaic__grid a:hover img { transform: scale(1.03); }
.mosaic__grid a:focus-visible { outline: 3px solid var(--pool-light); outline-offset: -3px; }
.mosaic__credit { position: absolute; right: 0; bottom: 0; margin: 0; padding: 4px 10px; font-size: 0.75rem; color: #fff; background: rgb(0 0 0 / 0.55); max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mosaic__count { display: none; }

.viewer { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(12 14 16 / 0.96); color: #fff; }
.viewer[open] { display: grid; place-items: center; }
.viewer::backdrop { background: rgb(0 0 0 / 0.6); }
.viewer img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.viewer__btn, .viewer__close { position: absolute; border: 0; background: rgb(255 255 255 / 0.12); color: #fff; font: inherit; font-size: 2rem; line-height: 1; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; }
.viewer__btn:hover, .viewer__close:hover { background: rgb(255 255 255 / 0.25); }
.viewer__prev { left: 16px; top: 50%; translate: 0 -50%; }
.viewer__next { right: 16px; top: 50%; translate: 0 -50%; }
.viewer__close { right: 16px; top: 16px; }
.viewer__count { position: absolute; left: 0; bottom: 14px; width: 100%; margin: 0; text-align: center; font-size: 0.95rem; color: #c9ced2; }
.parkhead { max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 0; }
.parkhead__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.parkhead__place { margin: 14px 0 0; font-size: 1.15rem; color: var(--steel); }
.score { display: flex; align-items: center; gap: 16px; }
.score__num { font-variation-settings: var(--wide); font-weight: 800; font-size: clamp(3.6rem, 6vw, 5.5rem); line-height: 0.8; }
.score__side { display: grid; gap: 6px; color: var(--steel); font-size: 0.95rem; }
.score__side .stars__bar { color: var(--asphalt); font-size: 1.5rem; }
.quick { display: flex; flex-wrap: wrap; gap: 20px 56px; margin-top: 40px; padding: 22px 0; border-top: 2px solid var(--asphalt); border-bottom: 1px solid var(--line); align-items: center; }
.quick > div:not(.quick__go) { display: grid; gap: 2px; }
.quick__go { margin-left: auto; }
.quick__k { color: var(--steel); font-size: 0.9rem; }
.quick__v { font-variation-settings: var(--tight); font-weight: 750; font-size: 1.35rem; }
.quick__go { display: flex; gap: 10px; flex-wrap: wrap; }

.parkbody { max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter) 110px; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); }
.parkmain > section + section { margin-top: 64px; }
.feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.feats li { background: var(--paper); padding: 18px 16px 14px; display: grid; gap: 22px; font-variation-settings: var(--tight); font-weight: 750; font-size: 1.2rem; }
.feats .icon { width: 40px; height: 40px; stroke-width: 1.4; color: var(--pool); }
.prose p { font-size: 1.2rem; line-height: 1.6; margin: 0 0 1em; }
.credit { font-size: 0.85rem; color: var(--steel); margin-top: 10px; }
.hours { width: 100%; max-width: 520px; border-collapse: collapse; }
.hours th, .hours td { text-align: left; font-weight: 400; padding: 9px 0; border-bottom: 1px solid var(--line); }
.hours td { text-align: right; }
.hours .today th, .hours .today td { font-weight: 750; color: var(--pool); }
.hours .today th::after { content: " (today)"; font-weight: 400; color: var(--steel); }
.locator { margin: 0 0 44px; }
.locator svg { width: 100%; height: auto; }
.locator circle { fill: var(--steel); opacity: 0.55; }
.locator circle.here { fill: var(--pool); opacity: 1; stroke: var(--paper); stroke-width: 3; }
.locator figcaption { font-size: 0.9rem; color: var(--steel); margin-top: 6px; }
.near { list-style: none; margin: 0; padding: 0; }
.near a { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 2px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.near__img { grid-row: span 2; aspect-ratio: 1; background: var(--slab); display: grid; place-items: center; overflow: hidden; }
.near__img img { width: 100%; height: 100%; object-fit: cover; }
.near__name { font-variation-settings: var(--tight); font-weight: 750; font-size: 1.1rem; line-height: 1.1; }
.near__mi { grid-row: span 2; font-variation-settings: var(--wide); font-weight: 800; font-size: 1.4rem; }
.near__mi small { font-size: 0.6em; font-weight: 500; color: var(--steel); }
.near a:hover .near__name { color: var(--pool); }

/* ---------------------------------------------------------------- footer */
.foot { background: var(--asphalt); color: var(--concrete); overflow: hidden; padding-bottom: 36px; }
.foot__word { font-variation-settings: var(--narrow); font-weight: 900; font-size: 17.5vw; line-height: 0.78; letter-spacing: -0.02em; color: #30363c; white-space: nowrap; padding: 36px 0 28px; margin-left: -0.04em; }
.foot__row { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 0.95rem; }
.foot__row p { margin: 0; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 900px) {
  .top__row { gap: 16px; padding-top: 12px; padding-bottom: 12px; }
  .top__search { display: none; }
  .top__nav { margin-left: auto; }
  .filters__chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); scrollbar-width: none; }
  .chip { flex: none; }
  .display { font-size: clamp(3.6rem, 16vw, 6rem); }
  .display--park { font-size: clamp(3rem, 13vw, 5rem); }
  .display--xl { font-size: clamp(5rem, 25vw, 10rem); }
  .hero { grid-template-columns: minmax(0, 1fr); padding-right: var(--gutter); }
  .hero__text { padding-bottom: 0; }
  .hero__photo { min-height: 0; aspect-ratio: 4 / 5; margin: 0 calc(-1 * var(--gutter)); }
  .statebody, .parkbody { grid-template-columns: minmax(0, 1fr); }
  .statemap { position: static; }
  .quick__go { width: 100%; margin-left: 0; }
  .quick__go .btn { flex: 1; justify-content: center; }
}
@media (max-width: 560px) {
  .top__nav { gap: 16px; font-size: 0.95rem; }
  .top__nav a[href$="#map"] { display: none; }
  .logo { font-size: 1.2rem; }
  .row a { grid-template-columns: 88px minmax(0, 1fr); row-gap: 8px; align-items: start; }
  .row__img { grid-row: span 2; }
  .row__side { grid-column: 2; justify-items: start; text-align: left; }
  .filters__sort { margin-left: 0; }
  .score__num { font-size: 3.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { filter: none; transition: none; }
  * { transition: none !important; }
}

/* ---------------------------------------------------------------- theme additions */
.badge-closed { display: inline-block; background: var(--asphalt); color: var(--paper); font-weight: 700; font-size: 0.85rem; padding: 4px 10px; border-radius: 999px; vertical-align: middle; }
.row.is-closed .row__name { color: var(--steel); }
.summary { background: var(--paper); padding: 22px 24px; }
.summary p { margin: 0; font-size: 1.15rem; line-height: 1.55; }
.summary__credit { display: block; margin-top: 10px; font-size: 0.85rem; color: var(--steel); }
.reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.reviews li { border-top: 1px solid var(--line); padding-top: 14px; }
.reviews blockquote { margin: 6px 0 6px; font-size: 1.05rem; line-height: 1.55; }
.reviews cite { font-style: normal; color: var(--steel); font-size: 0.9rem; }
.cities { list-style: none; margin: 0; padding: 0; columns: 3 200px; column-gap: 32px; }
.cities li { break-inside: avoid; }
.cities a { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.cities a:hover { color: var(--pool); }
.cities span { color: var(--steel); }
.section-pad { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter) 96px; }
.statelist { list-style: none; margin: 0; padding: 0; columns: 4 220px; column-gap: 40px; }
.statelist li { break-inside: avoid; }
.statelist a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-variation-settings: var(--tight); font-weight: 750; font-size: 1.3rem; }
.statelist a:hover { color: var(--pool); }
.statelist span { color: var(--steel); font-variation-settings: var(--wide); font-weight: 500; font-size: 0.95rem; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,0.14); list-style: none; margin: 0; padding: 6px; z-index: 30; max-height: 360px; overflow: auto; }
.suggest a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.suggest a:hover, .suggest a[aria-selected="true"] { background: var(--slab); }
.suggest span { color: var(--steel); font-size: 0.9rem; }
.bigsearch, .top__search { position: relative; }
.nearlist { margin-top: 24px; }
.plain { max-width: 70ch; }
.statemap circle { cursor: pointer; }
.card__img:not(.has-photo) { display: grid; place-items: center; }
.card__img .radar { width: 72%; height: auto; }
.row__img .radar, .near__img .radar { width: 100%; height: 100%; }
.row__img, .near__img, .card__img { position: relative; }
.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.credit-line { font-size: 0.75rem; color: var(--steel); }
/* home map: state outlines under the park dots; a state lights up on hover and links to its page */
.usstates path { fill: rgba(255, 255, 255, 0.035); stroke: rgba(159, 210, 239, 0.32); stroke-width: 0.8; stroke-linejoin: round; transition: fill 0.2s; }
.usstates a:hover path, .usstates a:focus-visible path { fill: rgba(159, 210, 239, 0.16); }
.usstates a:focus-visible { outline: none; }
.usstates a:focus-visible path { stroke: #fff; stroke-width: 1.6; }
.usstates path { vector-effect: non-scaling-stroke; }
.usmap__zoom { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.usmap__zoom button { width: 44px; height: 44px; padding: 0; justify-content: center; font-size: 1.4rem; background: var(--paper); color: var(--asphalt); }
.usmap__zoom button:hover { background: #fff; }
.usmap__zoom [data-zoom="reset"] { width: auto; padding: 0 16px; font-size: 0.95rem; }
.usmap__panel { position: absolute; left: 0; top: 0; background: var(--paper); color: var(--asphalt); padding: 16px 18px; display: grid; gap: 4px; justify-items: start; max-width: 260px; }
.usmap__panel strong { font-variation-settings: var(--tight); font-weight: 800; font-size: 1.6rem; line-height: 1; }
.usmap__panel span { color: var(--steel); font-size: 0.95rem; }
.usmap__panel .btn { margin-top: 10px; padding: 12px 18px; }
.usmap__hint { margin: 10px 0 0; font-size: 0.9rem; color: color-mix(in srgb, var(--paper) 65%, transparent); }
.usmap__zoom [hidden], .usmap__panel[hidden] { display: none; }
.elements { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.elements li { background: var(--paper); padding: 7px 12px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; }
.know { margin: 22px 0 0; display: grid; gap: 0; }
.know div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.know dt { color: var(--steel); }
.know dd { margin: 0; }
@media (max-width: 560px) { .know div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
/* contact form */
.contactwrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.contactform { background: var(--paper); padding: clamp(20px, 3vw, 36px); display: grid; gap: 22px; max-width: 640px; }
.contactform fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.contactform legend, .contactform .field { font-weight: 600; }
.contactform .field { display: grid; gap: 6px; }
.contactform .field span { font-weight: 400; color: var(--steel); font-size: 0.95rem; }
.contactform input[type=text], .contactform input[type=email], .contactform textarea {
  font: inherit; font-weight: 400; color: var(--asphalt); background: #fff; border: 1.5px solid var(--line); border-radius: 8px; padding: 12px 14px; width: 100%;
}
.contactform input:focus, .contactform textarea:focus { border-color: var(--pool); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pool) 25%, transparent); }
.contactform .radio { display: flex; gap: 10px; align-items: center; font-weight: 400; }
.contactform .radio input { accent-color: var(--pool); width: 18px; height: 18px; }
.contactform button { justify-self: start; }
.formnote, .formpark { margin: 0; color: var(--steel); font-size: 0.95rem; }
.formpark { color: var(--asphalt); font-weight: 600; }
.formerror { margin: 0; padding: 12px 14px; background: #fff3f0; border-left: 4px solid #c0392b; }
.formdone { background: var(--paper); padding: 32px; max-width: 640px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) { .contactwrap { grid-template-columns: minmax(0, 1fr); } }
.foot__credit { width: 100%; margin: 6px 0 0; color: #8a9096; font-size: 0.85rem; }
.badge-closed--temp { background: var(--caution); color: var(--asphalt); }
/* phones and small tablets: the mosaic becomes a swipe strip */
@media (max-width: 760px) {
  .mosaic__grid, .mosaic--n2 .mosaic__grid, .mosaic--n3 .mosaic__grid { display: flex; height: 62vw; min-height: 240px; max-height: 460px; gap: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .mosaic__grid::-webkit-scrollbar { display: none; }
  .mosaic__grid li { flex: 0 0 100%; scroll-snap-align: start; }
  .mosaic__grid a:hover img { transform: none; }
  .mosaic__count { display: block; position: absolute; right: 10px; top: 10px; margin: 0; padding: 3px 10px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: #fff; background: rgb(0 0 0 / 0.55); }
  .mosaic__credit { left: 0; max-width: none; }
  .viewer__btn { display: none; }
}
/* weather: "Skate now" + next 12 hours */
.wxnow .quick__v { display: inline-flex; align-items: center; gap: 8px; }
.wxnow .quick__v::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--wx, var(--steel)); flex: none; }
.wx__hours { list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(54px, 1fr); gap: 3px; overflow-x: auto; scrollbar-width: thin; }
.wx__hours li { background: var(--paper); padding: 10px 2px 8px; display: grid; justify-items: center; gap: 6px; text-align: center; border-bottom: 5px solid var(--wx, var(--line)); }
.wx__hours li:first-child { background: #fff; }
.wx__t { font-size: 0.85rem; color: var(--steel); }
.wx__hours .icon { width: 26px; height: 26px; color: var(--asphalt); }
.wx__deg { font-variation-settings: var(--tight); font-weight: 750; font-size: 1.2rem; }
.wx__s { font-size: 0.8rem; line-height: 1.15; color: var(--asphalt); }
.wx__note { margin: 10px 0 0; font-size: 0.85rem; color: var(--steel); }
.is-good { --wx: var(--pool); }
.is-meh { --wx: var(--caution); }
.is-no { --wx: var(--steel); }
/* collection pages */
.collbody { max-width: var(--max); margin: 0 auto; padding: 48px var(--gutter) 96px; display: grid; gap: 56px; }
.collbody__list { max-width: 980px; }
.cities__plain { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--steel); }
.collnav__h { margin-top: 56px; }
.collnav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.collnav a { display: inline-flex; gap: 10px; align-items: baseline; padding: 9px 14px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); text-decoration: none; font-weight: 600; }
.collnav a:hover { box-shadow: inset 0 0 0 1.5px var(--pool); color: var(--pool); }
.collnav span { color: var(--steel); font-weight: 400; font-size: 0.9rem; }
.builders { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.builders a { display: grid; gap: 6px; text-decoration: none; background: var(--paper); padding-bottom: 16px; }
.builders__img { aspect-ratio: 16 / 10; width: 100%; }
.builders__name { font-variation-settings: var(--tight); font-weight: 800; font-size: 1.5rem; padding: 6px 16px 0; }
.builders__meta { color: var(--steel); padding: 0 16px; font-size: 0.95rem; }
.builders a:hover .builders__name { color: var(--pool); }
.parkcredit a { color: inherit; }
.builders__img { position: relative; overflow: hidden; }
.feats a { display: grid; gap: 22px; color: inherit; text-decoration: none; }
.feats li:has(a):hover { box-shadow: inset 0 0 0 1.5px var(--pool); }
.elements a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
.elements a:hover { color: var(--pool); }
/* Upload button: a white pill over the photos, so it reads on any picture. */
.mosaic__add { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px;
  border-radius: 999px; background: #fff; color: var(--asphalt); font-weight: 700; font-size: 1rem; text-decoration: none;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.35); transition: background 0.15s, color 0.15s; }
.mosaic__add .icon { width: 22px; height: 22px; color: var(--pool); transition: color 0.15s; }
.mosaic__add:hover { background: var(--pool); color: #fff; }
.mosaic__add:hover .icon { color: #fff; }
.mosaic__add:focus-visible { outline: 3px solid var(--pool-light); outline-offset: 2px; }
.consent { align-items: flex-start; }
.consent input { margin-top: 3px; }
.contactform input[type=file] { font: inherit; font-weight: 400; padding: 10px; background: #fff; border: 1.5px dashed var(--line); border-radius: 8px; }
@media (max-width: 760px) { .mosaic__add { left: 12px; bottom: 36px; padding: 9px 14px 9px 11px; font-size: 0.92rem; } }