/* =========================================================================
 * CapyFinder — Direction A · Cozy Wiki
 * Ported from design/ Claude Design exports (see design/tokens.md).
 * ========================================================================= */

:root {
  /* ---- Surfaces & ink ---------------------------------------------- */
  --bg:         #f4ead5;
  --bg-2:       #ede0c2;
  --surface:    #fffaf0;
  --surface-2:  #faf0d8;
  --ink:        #2b1d10;
  --ink-soft:   #6b563d;
  --ink-mute:   #9c876a;
  --hairline:   #d9c7a3;
  --hairline-2: #c8b388;

  /* ---- Brand ------------------------------------------------------- */
  --capy:       #7a4f29;
  --capy-deep:  #5a3818;
  --capy-warm:  #c08850;

  /* ---- Category pin colors (sync with app.py SEED_CATEGORIES) ----- */
  --c-cafe:       #8a5a3a;
  --c-petting:    #e08566;
  --c-farm:       #d4a23a;
  --c-zoo:        #4f8a6b;
  --c-aquarium:   #4a8fb8;
  --c-sanctuary:  #6f9a3f;
  --c-onsen:      #b65a7a;
  --c-safari:    #8a8a3a;
  --c-wild:      #b66a3a;
  --c-popup:     #a06ac0;
  --c-other:     #8a7560;

  /* ---- Semantic ---------------------------------------------------- */
  --ok:   #5f8a3a;
  --warn: #c47a1a;
  --err:  #b04a2a;
  --focus-ring: #c08850;

  /* ---- Type -------------------------------------------------------- */
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-body:    "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --t-xs:   12px;
  --t-sm:   13px;
  --t-base: 15px;
  --t-body: 16px;
  --t-md:   18px;
  --t-lg:   22px;
  --t-xl:   26px;
  --t-2xl:  32px;
  --t-3xl:  40px;
  --t-4xl:  52px;
  --t-hero: clamp(40px, 5.2vw, 64px);

  /* ---- Spacing ---------------------------------------------------- */
  --s-1: 4px; --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px;

  /* ---- Radii / borders ------------------------------------------- */
  --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;
  --bw: 1.5px;

  /* ---- Shadows --------------------------------------------------- */
  --shadow:    0 1px 0 rgba(122,79,41,.08), 0 12px 28px -18px rgba(60,30,5,.25);
  --shadow-lg: 0 2px 0 rgba(122,79,41,.10), 0 22px 44px -22px rgba(60,30,5,.30);

  /* ---- Layout ---------------------------------------------------- */
  --container: 1180px;
  --gutter: 24px;
  --gutter-mobile: 18px;
  --bp-mobile: 760px;

  /* ---- Motion ---------------------------------------------------- */
  --t-fast: 120ms;
  --t-med: 180ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ===== Base ========================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.wrap        { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 920px;             margin: 0 auto; padding: 0 var(--gutter); }
.wrap-form   { max-width: 760px;             margin: 0 auto; padding: 0 var(--gutter); }

main { display: block; }

/* ===== Header (shared) ============================================== */
header.site { padding: var(--s-5) 0 var(--s-1); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-xl);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand .mark {
  width: 42px;
  height: 42px;
  display: block;
  border-radius: 50%;
  background: transparent;
  /* Logo PNG is already a brown circle on a transparent backdrop;
     no extra disc / shadow needed. */
}
.nav ul { display: flex; gap: var(--s-1); list-style: none; padding: 0; margin: 0; }
.nav ul a {
  text-decoration: none; padding: var(--s-2) 14px;
  border-radius: var(--r-pill); color: var(--ink-soft); font-weight: 600;
}
.nav ul a:hover,
.nav ul a.is-active { color: var(--ink); background: var(--bg-2); }
.nav .submit-btn {
  background: var(--capy); color: var(--surface);
  text-decoration: none; padding: 10px 18px;
  border-radius: var(--r-pill); font-weight: 700; font-size: var(--t-sm);
  box-shadow: 0 1px 0 rgba(0,0,0,.15) inset, 0 6px 14px -8px rgba(122,79,41,.6);
}

/* ===== Footer (shared) ============================================== */
footer.site {
  border-top: 1px dashed var(--hairline);
  padding: var(--s-7) 0 var(--s-10);
  color: var(--ink-soft);
  font-size: var(--t-sm);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
}
footer.site nav { display: flex; gap: var(--s-4); flex-wrap: wrap; }
footer.site a { text-decoration: none; }

/* ===== Buttons / common ============================================= */
.btn {
  display: inline-block;
  background: var(--capy);
  color: var(--surface);
  border: var(--bw) solid var(--capy);
  padding: 11px 18px;
  border-radius: var(--r-pill);
  font: inherit; font-weight: 700; font-size: var(--t-sm);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--capy-deep); border-color: var(--capy-deep); text-decoration: none; }
.btn.secondary {
  background: var(--surface); color: var(--ink); border-color: var(--hairline);
}
.btn.secondary:hover { background: var(--bg-2); border-color: var(--capy-warm); }
.btn.danger { background: var(--err); border-color: var(--err); }
.btn.danger:hover { background: var(--err); border-color: var(--err); filter: brightness(0.9); }

.icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface);
  border: var(--bw) solid var(--hairline);
  color: var(--ink);
  padding: 9px 14px;
  border-radius: var(--r-pill);
  font: inherit; font-weight: 700; font-size: var(--t-sm);
  text-decoration: none; cursor: pointer;
}
.icon-btn:hover { border-color: var(--capy-warm); }
.icon-btn.primary {
  background: var(--capy); color: var(--surface); border-color: var(--capy);
}
.icon-btn.primary:hover { background: var(--capy-deep); border-color: var(--capy-deep); }

.muted { color: var(--ink-soft); }

.eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--capy-deep);
  font-size: var(--t-sm);
  margin: 0 0 var(--s-1);
}

/* ===== Inputs (forms) =============================================== */
.input, .textarea, .select-input,
input[type=text], input[type=email], input[type=number], input[type=url],
input[type=password], textarea, select {
  appearance: none;
  width: 100%;
  font: inherit; font-size: var(--t-base);
  color: var(--ink);
  background: var(--surface);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r);
  padding: 12px 14px;
  line-height: 1.4;
  transition: border-color 120ms, box-shadow 120ms;
}
.input::placeholder, .textarea::placeholder,
input::placeholder, textarea::placeholder { color: var(--ink-mute); }
.input:hover, .textarea:hover, .select-input:hover,
input:hover, textarea:hover, select:hover { border-color: var(--hairline-2); }
.input:focus, .textarea:focus, .select-input:focus,
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--capy-warm);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--capy-warm) 30%, transparent);
}
textarea, .textarea { resize: vertical; min-height: 96px; }

label.lbl {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
  display: flex; align-items: baseline; gap: 6px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: var(--s-5); }
.field .req { color: var(--capy); font-weight: 700; margin-left: 2px; }
.field .help { color: var(--ink-soft); font-size: var(--t-xs); font-weight: 500; margin: 0; }
.field .help.below { margin-top: 4px; }

/* ===== Errors panel ================================================= */
.errors {
  background: #f8e4e4;
  border: var(--bw) solid #e0b8b8;
  color: var(--err);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r);
  margin-bottom: var(--s-4);
}
.errors ul { margin: 0; padding-left: 20px; }

/* ===== Honeypot (visually hidden) =================================== */
.honeypot {
  position: absolute !important;
  left: -10000px !important; width: 1px; height: 1px; overflow: hidden;
}

/* ===== Search bar (hero + filter) =================================== */
.search {
  display: flex;
  background: var(--surface);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 6px;
  box-shadow: var(--shadow);
  max-width: 460px;
}
.search input {
  flex: 1; border: 0; background: transparent;
  padding: 12px 18px; font: inherit; color: var(--ink);
  outline: none;
  border-radius: 0;
}
.search input:focus { box-shadow: none; }
.search button {
  border: 0; background: var(--capy); color: var(--surface);
  font: inherit; font-weight: 700;
  padding: 10px 22px; border-radius: var(--r-pill);
  cursor: pointer;
  width: auto;
}

.quick-chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-2);
  color: var(--ink);
  padding: 7px 12px;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}
.chip:hover { border-color: var(--capy-warm); text-decoration: none; }

/* ===== Hero (home) ================================================== */
.hero {
  padding: var(--s-12) 0 var(--s-7);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-12);
  align-items: center;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-hero);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--ink);
}
.hero h1 em { font-style: italic; color: var(--capy-deep); }
.hero p.lede {
  font-size: var(--t-md);
  max-width: 46ch;
  color: var(--ink-soft);
  margin: 0 0 var(--s-6);
}

/* hero feature card (right side) */
.hero-card {
  position: relative;
  background: var(--surface);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  box-shadow: var(--shadow);
}
.hero-photo-card {
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(45deg, #e8d3a5 0 14px, #e0c890 14px 28px);
  border-radius: var(--r-lg);
  display: grid; place-items: center;
  color: var(--capy-deep);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-align: center;
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.hero-photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-card .caption {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.hero-card .stamp {
  background: var(--capy); color: var(--surface);
  padding: 4px 10px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ===== Section heads ================================================ */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5);
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-2xl);
  margin: 0;
  letter-spacing: -0.01em;
}
.section-head .meta { color: var(--ink-soft); font-size: var(--t-sm); }

/* ===== Map (real Leaflet, styled to match the design's map-card) ==== */
section.map-section, section.map { padding: var(--s-6) 0 var(--s-4); }
.map-card {
  background: var(--surface);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow);
}
#map {
  width: 100%;
  height: 460px;
  background: var(--bg-2);
}
#map.tall   { height: 520px; }
#map.medium { height: 460px; }
#map.short  { height: 380px; }

.legend {
  padding: var(--s-4) var(--s-5);
  border-top: var(--bw) solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  background: var(--bg);
}
.legend .item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink);
}
.legend .swatch {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c, var(--capy));
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--hairline);
}

/* ----- Leaflet overrides ----- */
.leaflet-container {
  background: var(--bg-2);
  font-family: var(--font-body);
}
.leaflet-tile-pane { filter: sepia(.18) saturate(.85) brightness(1.02); }

.capy-pin { position: relative; width: 22px; height: 22px; }
.capy-pin .halo {
  position: absolute; inset: -7px;
  border-radius: 50%;
  opacity: .22;
}
.capy-pin .dot {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.leaflet-popup-content-wrapper {
  background: var(--surface);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.leaflet-popup-tip { background: var(--surface); }
.leaflet-popup-content { margin: 12px 14px; font-size: var(--t-sm); }
.leaflet-popup-content strong { color: var(--ink); }
.leaflet-popup-content a { color: var(--capy-deep); font-weight: 700; text-decoration: underline; }

/* ===== Cards (location grid) ======================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
.card {
  background: var(--surface);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  transition: transform 120ms ease;
}
.card:hover { transform: translateY(-2px); text-decoration: none; }
.card .img {
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg, #e8d3a5 0 12px, #e0c890 12px 24px);
  border-bottom: var(--bw) solid var(--hairline);
  position: relative;
  display: grid; place-items: end start;
  padding: 12px;
  overflow: hidden;
}
.card .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .pin-tag {
  position: relative;
  z-index: 1;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-pill);
  padding: 5px 10px 5px 8px;
  font-size: var(--t-xs);
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.2);
}
.card .pin-tag .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c, var(--capy));
}
.card .body {
  padding: var(--s-4) 18px var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-1);
  flex: 1;
}
.card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  font-size: var(--t-md);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.card .where { color: var(--ink-soft); font-size: var(--t-sm); font-weight: 600; }
.card .blurb {
  color: var(--ink-soft); font-size: var(--t-sm); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .meta {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--s-3);
  font-size: var(--t-xs);
  color: var(--ink-soft);
  border-top: 1px dashed var(--hairline);
  font-variant-numeric: tabular-nums;
}
.card .meta strong { color: var(--ink); font-weight: 700; }

/* ===== Games CTA strip (home) ======================================= */
section.games-cta-section { padding: var(--s-12) 0 var(--s-12); }
.games-cta {
  background: var(--capy);
  color: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--s-8);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-8);
  align-items: center;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.games-cta::before {
  content: "";
  position: absolute;
  inset: auto -60px -80px auto;
  width: 320px; height: 320px;
  background: var(--capy-warm);
  border-radius: 50%;
  opacity: .5;
}
.games-cta h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-2xl);
  margin: 0 0 var(--s-2);
  letter-spacing: -0.01em;
}
.games-cta p { margin: 0 0 var(--s-4); opacity: .9; max-width: 42ch; }
.games-cta .row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.games-cta a.play {
  background: var(--surface);
  color: var(--capy-deep);
  padding: 11px 18px;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-sm);
}
.games-cta a.muted {
  color: var(--surface);
  padding: 11px 4px;
  text-decoration: underline;
  font-weight: 600;
  font-size: var(--t-sm);
}
.games-tiles {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.game-tile-mini {
  background: rgba(255,250,240,.12);
  border: 1px solid rgba(255,250,240,.25);
  border-radius: var(--r);
  padding: 14px 12px;
  font-size: var(--t-xs);
  font-weight: 700;
  text-align: center;
  color: var(--surface);
}
.game-tile-mini .emoji { font-size: 28px; display: block; margin-bottom: 6px; }
.game-tile-mini.coming { opacity: .55; }

/* ===== Page head (interior pages) =================================== */
.page-head { padding: var(--s-8) 0 var(--s-5); }
.page-head h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-3xl);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-2);
}
.page-head .summary {
  color: var(--ink-soft);
  font-size: var(--t-md);
  max-width: 64ch;
  margin: 0;
}
.page-head .summary strong { color: var(--ink); font-weight: 700; }

.page-head.centered { padding: var(--s-10) 0 var(--s-6); text-align: center; }
.page-head.centered h1 {
  font-size: var(--t-4xl);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
.page-head.centered p.lede {
  color: var(--ink-soft);
  font-size: var(--t-md);
  max-width: 56ch;
  margin: 0 auto;
}

/* ===== Filter bar (locations) ======================================= */
.filter {
  background: var(--surface);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-6);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  gap: var(--s-4);
}
.filter-top {
  display: grid;
  grid-template-columns: 1.4fr auto auto;
  gap: var(--s-3);
  align-items: end;
}
.filter .search { box-shadow: none; max-width: none; }
.filter .select {
  display: flex; flex-direction: column;
  font-size: var(--t-xs);
  color: var(--ink-soft);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.filter .select select {
  margin-top: 4px;
  font: inherit; font-size: var(--t-sm); font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  padding: 9px 32px 9px 12px;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* category chip checkboxes (filter) — pure-CSS via :has(input:checked) */
.cats-filter {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.cat-chip {
  --c: var(--c-other);
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 12px;
  background: var(--bg);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.cat-chip:hover { border-color: var(--c); }
.cat-chip input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; padding: 0; }
.cat-chip .dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--hairline);
  flex: 0 0 auto;
}
.cat-chip .count {
  color: var(--ink-soft);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
  margin-left: 2px;
}
.cat-chip:has(input:checked) {
  border-color: var(--c);
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--c) 14%, transparent), color-mix(in oklab, var(--c) 14%, transparent)),
    var(--surface);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--c) 18%, transparent);
}
.cat-chip:has(input:checked) .dot {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--c);
}
.cat-chip:has(input:checked) .count { color: var(--ink); }

.filter-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--hairline);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.filter-bottom .actions { display: flex; gap: var(--s-2); }
.filter-bottom .count-results {
  margin-left: auto;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ===== Results / list section ======================================= */
section.results { padding: var(--s-8) 0 var(--s-10); }
.results-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.results-head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-2xl); margin: 0;
  letter-spacing: -0.01em;
}
.results-head .sub { color: var(--ink-soft); font-size: var(--t-sm); margin-top: 4px; }

/* ===== Detail page ================================================== */
.crumb {
  margin: var(--s-7) 0 var(--s-5);
  font-size: var(--t-sm);
  color: var(--ink-soft);
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-weight: 600;
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--capy-deep); text-decoration: underline; }
.crumb .sep { color: var(--ink-mute); }
.crumb .current { color: var(--ink); }

.titleblock {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: flex-end;
  margin-bottom: var(--s-5);
}
.badge-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.badge {
  --c: var(--c-other);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px;
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--c) 14%, transparent), color-mix(in oklab, var(--c) 14%, transparent)),
    var(--surface);
  color: var(--ink);
  border: var(--bw) solid var(--c);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .02em;
}
.badge .dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 2px var(--surface);
}
.badge.muted {
  background: var(--bg-2);
  border-color: var(--hairline);
  color: var(--ink-soft);
}
.titleblock h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-4xl); line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
.titleblock .where {
  color: var(--ink-soft);
  font-size: var(--t-md);
  font-weight: 600;
}
.titleblock .where strong { color: var(--ink); font-weight: 700; }
.titleblock .actions { display: flex; gap: var(--s-2); align-items: center; }

/* hero photo (large 16:9 on detail) */
.hero-photo {
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(135deg, #e8d3a5 0 14px, #e0c890 14px 28px);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--capy-deep);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  margin-bottom: var(--s-3);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo .placeholder-label {
  background: rgba(255,250,240,.86);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  color: var(--ink-soft);
  letter-spacing: .06em;
}
.hero-credits {
  display: flex; justify-content: space-between;
  margin-bottom: var(--s-8);
  font-size: var(--t-xs); color: var(--ink-soft); font-weight: 600; padding: 0 6px;
}
.hero-credits a { color: var(--capy-deep); text-decoration: underline; }

/* hero fallback (no-photo state) — themed by category color */
.hero-fallback {
  --c: var(--c-other);
  aspect-ratio: 16 / 9;
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--c) 9%, transparent) 0 16px,
      transparent 16px 36px),
    var(--surface);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--s-3);
}
.hero-fallback .corner-tl,
.hero-fallback .corner-br {
  position: absolute;
  width: 80px; height: 80px;
  background: radial-gradient(circle, color-mix(in oklab, var(--c) 24%, transparent) 2px, transparent 3px);
  background-size: 14px 14px;
}
.hero-fallback .corner-tl { top: 20px; left: 20px; }
.hero-fallback .corner-br { bottom: 20px; right: 20px; transform: rotate(180deg); }
.hero-fallback .center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--s-6);
}
.hero-fallback .glyph {
  font-size: 88px; line-height: 1;
  opacity: .9;
  filter: drop-shadow(0 4px 0 color-mix(in oklab, var(--c) 30%, transparent));
  margin-bottom: var(--s-3);
}
.hero-fallback .title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-xl); color: var(--ink);
  letter-spacing: -0.005em; margin: 0 0 4px;
}
.hero-fallback .sub {
  color: var(--ink-soft); font-size: var(--t-sm);
  margin: 0 0 var(--s-4); font-weight: 600;
}

/* body grid: prose left, info card right */
.body-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--s-12);
  align-items: flex-start;
  margin-bottom: var(--s-10);
}
.prose h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-2xl); letter-spacing: -0.01em;
  margin: var(--s-8) 0 var(--s-3);
}
.prose h2:first-of-type { margin-top: 0; }
.prose p {
  font-size: var(--t-md); color: var(--ink);
  margin: 0 0 var(--s-4); max-width: 64ch;
}
.prose p.lede {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--t-lg); color: var(--ink);
  line-height: 1.45;
  border-left: 3px solid var(--capy-warm);
  padding-left: var(--s-4);
  margin-bottom: var(--s-6);
}

/* info-card (right column on detail) */
.info-card {
  background: var(--surface);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: sticky;
  top: var(--s-4);
}
.info-card .head {
  padding: var(--s-4) var(--s-5);
  background: var(--bg-2);
  border-bottom: var(--bw) solid var(--hairline);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-md);
  letter-spacing: -0.005em;
  display: flex; justify-content: space-between; align-items: baseline;
}
.info-card .head .stat {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--t-xl); color: var(--capy-deep);
  letter-spacing: -0.01em;
}
.info-card dl { margin: 0; padding: var(--s-2) var(--s-5); }
.info-card dl div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--hairline);
  font-size: var(--t-sm);
}
.info-card dl div:last-child { border-bottom: 0; }
.info-card dt {
  color: var(--ink-soft); font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
  font-size: var(--t-xs); align-self: center;
}
.info-card dd { margin: 0; color: var(--ink); font-weight: 600; }
.info-card dd a { color: var(--capy-deep); font-weight: 700; text-decoration: underline; }
.info-card .ctas {
  border-top: var(--bw) solid var(--hairline);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2);
  display: grid; gap: var(--s-2);
}
.info-card .ctas a {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-sm);
  border: var(--bw) solid transparent;
}
.info-card .ctas a.book { background: var(--capy); color: var(--surface); }
.info-card .ctas a.book:hover { background: var(--capy-deep); }
.info-card .ctas a.dir {
  color: var(--ink);
  border-color: var(--hairline);
  background: var(--surface);
}
.info-card .ctas a.dir:hover { border-color: var(--capy-warm); }

.minimap-wrap {
  margin-top: var(--s-4);
  border: var(--bw) solid var(--hairline);
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.minimap-wrap #map { height: 280px; border-radius: 0; }
.minimap-wrap .meta {
  padding: var(--s-3) var(--s-4);
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px dashed var(--hairline);
  font-size: var(--t-xs); color: var(--ink-soft); font-weight: 600;
}
.minimap-wrap .meta a { color: var(--capy-deep); text-decoration: underline; font-weight: 700; }

.closing {
  margin-top: var(--s-10);
  padding: var(--s-6) 0 var(--s-4);
  border-top: 1px dashed var(--hairline);
  display: flex; justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}
.closing .suggest {
  color: var(--capy-deep);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 4px;
  font-weight: 700;
}
.coords {
  text-align: center;
  padding: var(--s-3) 0 var(--s-6);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: .06em;
}
.coords code {
  color: var(--ink-soft);
  background: var(--surface);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
}
.coords .sep { margin: 0 var(--s-3); color: var(--hairline-2); }

/* ===== Submit form ================================================== */
form.submit-form {
  padding: var(--s-7) 0 var(--s-12);
  display: flex; flex-direction: column;
  gap: var(--s-8);
}
fieldset.section { border: 0; margin: 0; padding: 0; }
.submit-form .section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px dashed var(--hairline);
}
.submit-form .section-head .num {
  font-family: var(--font-mono);
  color: var(--ink-mute);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
}
.submit-form .section-head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-xl); letter-spacing: -0.01em;
  margin: 0; flex: 1;
}
.submit-form .section-head h2 .accent { font-style: italic; color: var(--capy-deep); }
.submit-form .section-head .opt {
  color: var(--ink-soft);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.row { display: grid; gap: var(--s-3); }
.row.cols-2 { grid-template-columns: 1fr 1fr; }
.row.cols-2-1 { grid-template-columns: 2fr 1fr; }

/* category radio chips (submit) */
.cats-radio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}
.cat-radio {
  --c: var(--c-other);
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: border-color 120ms, background 120ms;
}
.cat-radio:hover { border-color: var(--c); }
.cat-radio input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.cat-radio .dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--hairline);
  flex: 0 0 auto;
}
.cat-radio .ico { font-size: 16px; line-height: 1; }
.cat-radio .name { flex: 1; }
.cat-radio .check {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: var(--bw) solid var(--hairline);
  background: var(--surface);
  flex: 0 0 auto;
  display: grid; place-items: center;
  color: var(--surface);
  font-size: 11px; font-weight: 900;
}
.cat-radio:has(input:checked) {
  border-color: var(--c);
  background:
    linear-gradient(0deg, color-mix(in oklab, var(--c) 12%, transparent), color-mix(in oklab, var(--c) 12%, transparent)),
    var(--surface);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--c) 18%, transparent);
}
.cat-radio:has(input:checked) .dot {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--c);
}
.cat-radio:has(input:checked) .check { background: var(--c); border-color: var(--c); }
.cat-radio:has(input:checked) .check::before { content: "✓"; }

/* photo dropzone (wraps the real <input type=file>) */
.dropzone {
  border: 2px dashed var(--hairline-2);
  background:
    repeating-linear-gradient(45deg, transparent 0 24px, rgba(217,199,163,.18) 24px 26px),
    var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-7) var(--s-6);
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center; gap: var(--s-3);
  transition: border-color 120ms, background 120ms;
}
.dropzone:hover { border-color: var(--capy-warm); }
.dropzone .ico {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--capy);
  color: var(--surface);
  display: grid; place-items: center;
  font-size: 26px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.15);
}
.dropzone .title {
  font-family: var(--font-display);
  font-size: var(--t-lg); font-weight: 700; margin: 0;
}
.dropzone .meta { font-size: var(--t-xs); color: var(--ink-soft); margin: 0; }
.dropzone input[type=file] {
  width: auto;
  background: var(--surface);
  border: var(--bw) solid var(--hairline);
  padding: 8px;
  border-radius: var(--r);
}

.submit-actions {
  display: flex; gap: var(--s-3); justify-content: flex-end;
  border-top: 1px dashed var(--hairline);
  padding-top: var(--s-5);
}

/* ===== Games index ================================================== */
.games-page .page-head {
  padding: var(--s-10) 0 var(--s-7);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-6);
  align-items: end;
  border-bottom: 1px dashed var(--hairline);
}
.games-page .page-head h1 {
  font-size: var(--t-4xl);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
.games-page .stats {
  display: flex; gap: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.games-page .stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  color: var(--capy-deep);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  padding: var(--s-8) 0 var(--s-12);
}
.games-grid .card {
  display: flex; flex-direction: column;
  text-decoration: none;
}
.games-grid .card.coming {
  opacity: .55;
  pointer-events: none;
  background: var(--bg-2);
  border-style: dashed;
}
.tile {
  --c: var(--capy);
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border-bottom: var(--bw) solid var(--hairline);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--ink);
}
.tile .glyph {
  font-size: 78px; line-height: 1;
  filter: drop-shadow(0 4px 0 color-mix(in oklab, var(--c) 32%, transparent));
  z-index: 2;
}
.tile.t-pet {
  --c: var(--capy);
  background:
    radial-gradient(circle at 50% 55%,
      color-mix(in oklab, var(--c) 18%, var(--surface)) 0 22%,
      color-mix(in oklab, var(--c) 8%, var(--surface)) 22% 60%,
      var(--surface-2) 60% 100%);
}
.tile.t-pet .glyph { font-size: 96px; }
.tile.coming-stamp::after {
  content: "Coming soon";
  position: absolute;
  bottom: 12px;
  background: var(--surface);
  border: var(--bw) solid var(--hairline);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-soft);
}

/* game frame (when playing a single game) */
.game-frame {
  width: 100%;
  height: 72vh;
  min-height: 480px;
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* ===== Admin stat tiles ============================================= */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.stat-grid .stat {
  background: var(--surface);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r);
  padding: var(--s-4);
  box-shadow: var(--shadow);
}
.stat-grid .n {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--capy);
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-grid .label {
  color: var(--ink-soft);
  font-size: var(--t-sm);
  font-weight: 600;
  margin-top: 4px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: var(--bw) solid var(--hairline);
  border-radius: var(--r);
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px dashed var(--hairline);
  font-size: var(--t-sm);
}
th { background: var(--bg-2); font-weight: 700; color: var(--ink); }
tr:last-child td { border-bottom: 0; }

/* ===== Mobile ======================================================= */
@media (max-width: 760px) {
  .wrap, .wrap-narrow, .wrap-form { padding: 0 var(--gutter-mobile); }
  header.site { padding-top: var(--s-3); }
  .nav ul { display: none; }
  .nav .submit-btn { padding: 8px 14px; font-size: var(--t-sm); }

  .hero {
    padding: var(--s-6) 0 var(--s-3);
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .hero h1 { font-size: 36px; }
  .hero p.lede { font-size: var(--t-base); }
  .search { max-width: none; }
  .search button { padding: 10px 14px; font-size: var(--t-sm); }
  .hero-card { padding: var(--s-3); }

  .section-head h2 { font-size: var(--t-xl); }
  .section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .section-head .meta { font-size: var(--t-xs); }

  #map { height: 340px; }
  .legend { padding: var(--s-3) var(--s-4); gap: 8px 12px; }
  .legend .item { font-size: var(--t-xs); }

  .cards { grid-template-columns: 1fr; gap: var(--s-4); }
  .card .img { aspect-ratio: 16 / 10; }

  section.games-cta-section { padding: var(--s-8) 0 var(--s-10); }
  .games-cta {
    grid-template-columns: 1fr;
    padding: var(--s-6);
  }
  .games-cta h2 { font-size: var(--t-xl); }

  .page-head { padding: var(--s-5) 0 var(--s-4); }
  .page-head h1 { font-size: 28px; }
  .page-head .summary { font-size: var(--t-base); }
  .page-head.centered h1 { font-size: 32px; }

  .filter { padding: var(--s-4); border-radius: var(--r); gap: var(--s-3); }
  .filter-top { grid-template-columns: 1fr; gap: var(--s-2); }
  .filter .select select { width: 100%; }
  .cats-filter { gap: 6px; }
  .cat-chip { padding: 7px 11px 7px 10px; font-size: var(--t-xs); gap: 6px; }

  .filter-bottom { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .filter-bottom .count-results { margin-left: 0; }

  .results-head { gap: var(--s-2); }
  .results-head h2 { font-size: var(--t-xl); }

  /* detail */
  .crumb { margin: var(--s-4) 0 var(--s-3); }
  .titleblock { grid-template-columns: 1fr; gap: var(--s-3); }
  .titleblock h1 { font-size: 32px; }
  .titleblock .where { font-size: var(--t-base); }
  .titleblock .actions { flex-wrap: wrap; }
  .hero-photo, .hero-fallback { border-radius: var(--r-lg); aspect-ratio: 4 / 3; }
  .hero-credits { font-size: 11px; }
  .body-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .info-card { position: static; }
  .prose p { font-size: var(--t-base); }
  .prose h2 { font-size: var(--t-xl); margin-top: var(--s-6); }
  .prose p.lede { font-size: var(--t-md); }
  .closing { flex-direction: column; align-items: flex-start; gap: var(--s-2); }

  /* submit */
  .cats-radio { grid-template-columns: 1fr; }
  .row.cols-2, .row.cols-2-1 { grid-template-columns: 1fr; }
  .submit-actions { flex-direction: column-reverse; align-items: stretch; }

  /* games */
  .games-page .page-head { grid-template-columns: 1fr; gap: var(--s-3); }
  .games-grid { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-6) 0 var(--s-10); }
  .game-frame { height: 80vh; }
}