/* Monbulk — "Hidden in the hills"
   Brand: Fern green ground, Berry red for action, Soil black for type, Wattle yellow for what's live,
   Ripe pink as a highlight on dark grounds, Mist as the page. Bricolage Grotesque + IBM Plex Mono. */
:root {
  --mist: #EEEDE7;
  --card: #FFFFFF;
  --fern: #12392B;
  --fern-deep: #0C2A1F;
  --berry: #B5173F;
  --soil: #1B1513;
  --wattle: #F4C430;
  --ripe: #FF8FB1;
  --muted: #5A5250;
  --line: #D6D3C9;
  --open: #1F7A45;
  --closed: #9A2E2E;
  --fire-high: #8A5A00;
  --fire-extreme: #C45A12;
  --fire-cat: #B42318;
  --display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --bar: 120px;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 12px)
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto
  }
}

body {
  margin: 0;
  background: var(--mist);
  color: var(--soil);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden
}

a {
  color: var(--berry)
}

a:hover {
  color: var(--fern)
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit
}

:focus-visible {
  outline: 3px solid var(--wattle);
  outline-offset: 2px
}

img {
  max-width: 100%
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r)
}

.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--berry)
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  background: var(--wattle);
  color: var(--soil);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600
}

.skip:focus {
  top: 12px
}

.note {
  font-size: 14px;
  color: var(--muted);
  margin: 0
}

[hidden] {
  display: none !important
}

/* ---------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 600;
  font-size: 14.5px;
  padding: 0 18px;
  min-height: 40px;
  border-radius: 999px;
  border: 2px solid var(--soil);
  background: var(--soil);
  color: var(--mist);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap
}

.btn:hover {
  color: var(--mist);
  filter: brightness(1.08)
}

.btn.berry {
  background: var(--berry);
  border-color: var(--berry);
  color: #fff
}

.btn.fern {
  background: var(--fern);
  border-color: var(--fern);
  color: var(--mist)
}

.btn.wattle {
  background: var(--wattle);
  border-color: var(--wattle);
  color: var(--soil)
}

.btn.mist {
  background: var(--mist);
  border-color: var(--mist);
  color: var(--soil)
}

.btn.soil {
  background: var(--soil);
  border-color: var(--soil);
  color: var(--mist)
}

.btn.outline {
  background: transparent;
  border-color: var(--mist);
  color: var(--mist)
}

.btn.outline-dark,
.btn.ghost {
  background: transparent;
  border-color: var(--soil);
  color: var(--soil)
}

.btn.wide {
  width: 100%
}

.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  filter: none
}

.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  color: inherit;
  min-height: 32px
}

/* ---------- header: a day bar (the useful stuff) over a fern nav bar */
.townbar {
  position: sticky;
  top: 0;
  z-index: 30
}

.daybar {
  background: var(--soil);
  color: var(--mist);
  font-family: var(--mono);
  font-size: 13px;
  padding-top: env(safe-area-inset-top, 0px)
}

.dayline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 26px;
  min-height: 38px;
  padding-block: 6px
}

.dayline a {
  color: inherit;
  text-decoration: none
}

.dayline a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--wattle)
}

.dayline .temp {
  font-weight: 600
}

.fire {
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.fire::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--wattle)
}

.fire.noRating::before,
.fire.norating::before {
  background: #8C8885
}

.fire.moderate::before {
  background: #5FB45F
}

.fire.high::before {
  background: var(--wattle)
}

.fire.extreme::before {
  background: #F08A4A
}

.fire.catastrophic::before {
  background: #F05A4A
}

.fire.extreme,
.fire.catastrophic {
  color: #FFB199;
  font-weight: 600
}

.bins {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 18px
}

.bin {
  display: inline-flex;
  align-items: center;
  gap: 7px
}

.bin::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8C8885
}

.bin.red::before {
  background: #E0475E
}

.bin.yellow::before {
  background: var(--wattle)
}

.bin.green::before {
  background: #5FB45F
}

.navbar {
  background: var(--fern);
  color: var(--mist);
  border-bottom: 1px solid #0A2219
}

.navrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  min-height: 56px;
  flex-wrap: wrap;
  padding-block: 6px
}

.brand {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--mist);
  text-decoration: none;
  line-height: 1
}

.brand:hover {
  color: var(--mist)
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin-left: auto
}

.nav a {
  position: relative;
  color: var(--mist);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  padding: 6px 0
}

.nav a[aria-current="true"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 3px;
  border-radius: 2px;
  background: var(--wattle)
}

.nav a.visit {
  background: var(--wattle);
  color: var(--soil);
  padding: 7px 14px;
  border-radius: 999px;
  min-height: 36px;
  display: inline-flex;
  align-items: center
}

.nav a.visit::after {
  display: none
}

.account {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px
}

.account .who {
  opacity: .85
}

.account button {
  background: transparent;
  border: 2px solid var(--mist);
  color: var(--mist);
  border-radius: 999px;
  min-height: 40px;
  padding: 0 14px;
  font-weight: 600;
  cursor: pointer
}

/* ---------- hero */
.hero {
  background: var(--fern);
  color: var(--mist);
  position: relative;
  overflow: hidden
}

.herogrid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
  align-items: flex-start;
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(120px, 12vw, 160px);
  position: relative;
  z-index: 2
}

.herocopy {
  flex: 999 1 520px;
  min-width: 0
}

.hero .eyebrow {
  color: var(--wattle)
}

#h-welcome {
  margin: 16px 0 0;
  font-size: clamp(56px, 9vw, 136px);
  line-height: .86;
  font-weight: 800;
  letter-spacing: -.05em;
  max-width: 12ch
}

.greeting {
  margin: 26px 0 0;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ripe)
}

.greeting:empty {
  display: none
}

.stand {
  margin: 10px 0 0;
  max-width: 46ch;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.4
}

.doors {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px
}

.ridge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(70px, 10vw, 140px);
  z-index: 1;
  display: block
}

.weekcard {
  flex: 1 1 340px;
  max-width: 460px;
  background: var(--mist);
  color: var(--soil);
  border-radius: 16px;
  padding: 24px
}

.wchead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px
}

.wchead h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.04em
}

.wchead a {
  font-weight: 600;
  font-size: 15px
}

.glance {
  margin: 12px 0 16px
}

.gl {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 2px solid var(--soil)
}

.gl .d {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--berry);
  padding-top: 3px;
  text-transform: uppercase
}

.gl strong {
  display: block;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600
}

.gl span {
  font-size: 14px;
  color: var(--muted)
}

/* ---------- main + right rail */
.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 28px;
  align-items: flex-start;
  padding-top: 32px;
  padding-bottom: 52px
}

main {
  flex: 999 1 640px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 42px
}

.rail {
  flex: 1 1 280px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px
}

@media (max-width:1000px) {
  .rail {
    max-width: none
  }
}

.block {
  min-width: 0
}

.blockhead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px
}

.blockhead h2,
.bandhead h2,
.dirbar h2,
#h-visiting,
#h-about {
  margin: 6px 0 0;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.04em
}

.bandhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 32px;
  flex-wrap: wrap;
  margin-bottom: 24px
}

.bandside {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  max-width: 44ch
}

.bandside p {
  margin: 0;
  font-size: 16px
}

.panel {
  border-radius: 16px;
  padding: clamp(18px, 2.6vw, 28px)
}

.fernpanel {
  background: var(--fern);
  color: var(--mist)
}

.fernpanel .eyebrow {
  color: var(--wattle)
}

.fernpanel .note {
  color: #C9D3CC
}

.berrypanel {
  background: var(--berry);
  color: #fff
}

.berrypanel .eyebrow {
  color: var(--wattle)
}

.lede {
  font-size: clamp(16px, 1.5vw, 18.5px);
  line-height: 1.45;
  margin: 10px 0 0
}

/* ---------- find + map */
.find {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px
}

.find input {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 52px;
  border: 2px solid var(--soil);
  border-radius: 999px;
  padding: 0 20px;
  font-size: 16px;
  background: var(--card)
}

.findmsg {
  margin: 4px 0 10px;
  font-size: 14px;
  color: var(--muted)
}

.findmsg:empty {
  display: none
}

.mapwrap {
  position: relative;
  height: clamp(380px, 56vh, 560px);
  border-radius: 18px;
  overflow: hidden;
  background: var(--fern);
  isolation: isolate;
  margin-top: 12px
}

#scene {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  outline: none
}

#scene.dragging {
  cursor: grabbing
}

#scene.over {
  cursor: pointer
}

#labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden
}

.poster {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: var(--fern)
}

.poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.posterbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  padding: 20px;
  background: rgba(27, 21, 19, .9);
  color: var(--mist)
}

.posterbar h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em
}

.posterbar p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.4;
  max-width: 42ch
}

.lightkey {
  display: flex;
  gap: 16px;
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fern)
}

.lightkey span {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.lightkey i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wattle);
  box-shadow: 0 0 8px 2px rgba(244, 196, 48, .85)
}

.lightkey i.hm {
  width: 6px;
  height: 6px;
  background: #F4E7C4;
  box-shadow: 0 0 6px 2px rgba(244, 231, 196, .95)
}

.kinds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr));
  gap: 8px;
  margin-top: 12px
}

.kind {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 13px;
  border: 1.5px solid var(--soil);
  border-radius: 10px;
  background: transparent;
  color: var(--soil);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left
}

.kind small {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--fern);
  white-space: nowrap
}

.kind small::before {
  content: '● ';
  color: var(--open)
}

.kind small.none::before {
  content: ''
}

.kind:hover {
  background: var(--card)
}

.kind.now {
  background: var(--fern);
  border-color: var(--fern);
  color: var(--mist)
}

.kind.now small {
  color: var(--mist)
}

.kind.now small::before {
  content: ''
}

/* map overlays (they sit on the 3D scene) */
.pin {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity .2s;
  will-change: transform
}

.pin button {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1.5px solid var(--soil);
  background: var(--mist);
  color: var(--soil);
  cursor: pointer;
  white-space: nowrap
}

.pin.landmark button {
  background: var(--fern);
  color: var(--mist)
}

.pin.event button {
  background: var(--berry);
  border-color: var(--berry);
  color: #fff
}

.pin.active button,
.pin button:hover {
  background: var(--wattle);
  color: var(--soil);
  border-color: var(--soil)
}

.pin.light {
  width: 28px;
  height: 28px
}

.pin.light button {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  background: var(--wattle);
  color: var(--soil);
  border-color: var(--soil);
  white-space: nowrap
}

.pin.light.on button,
.pin.light.active button,
.pin.light:hover button {
  opacity: 1;
  pointer-events: auto
}

.pin.light i {
  display: none
}

.pin.light b {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8dc 0 2px, #F4C430 3px 5px, rgba(244, 196, 48, .18) 6px 11px);
  box-shadow: 0 0 14px 3px rgba(244, 196, 48, .75);
  cursor: pointer
}

.pin.light.home b {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle, #fff 0 2px, #F4E7C4 3px 4.5px, rgba(244, 231, 196, .2) 5px 8px);
  box-shadow: 0 0 10px 2px rgba(255, 236, 190, .9)
}

.pin.light.on b,
.pin.light.active b {
  box-shadow: 0 0 20px 7px rgba(244, 196, 48, .95)
}

.pin.light.pink b,
.pin.light.home.pink b {
  width: 22px;
  height: 22px;
  background: radial-gradient(circle, #ffe6f5 0 2.5px, #FF1493 3px 6px, rgba(255, 20, 147, .28) 7px 11px);
  box-shadow: 0 0 16px 4px rgba(255, 20, 147, .88)
}

.pin.light.pink.on b,
.pin.light.pink.active b,
.pin.light.pink.match b {
  box-shadow: 0 0 24px 8px rgba(255, 20, 147, 1)
}

.pin.light.pink button {
  background: #FF1493;
  color: #fff;
  border-color: #1B1513
}

.pin i {
  display: block;
  width: 1.5px;
  height: 16px;
  background: var(--soil)
}

.pin b {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--soil)
}

.mui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--soil)
}

.mui .foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end
}

.mui .foot>* {
  pointer-events: auto;
  min-width: 0
}

.toolstack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end
}

.tools {
  display: flex;
  gap: 8px
}

.tool {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1.5px solid var(--soil);
  background: var(--mist);
  color: var(--soil);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 600
}

.hint {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-align: right;
  color: var(--soil)
}

.zoomhint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(27, 21, 19, .88);
  color: var(--mist);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  padding: 12px 16px;
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
  text-align: center
}

.zoomhint.on {
  opacity: 1
}

.mpanel {
  background: var(--mist);
  border: 1.5px solid var(--soil);
  border-radius: 16px;
  color: var(--soil)
}

.place {
  position: absolute;
  top: 16px;
  right: 16px;
  width: min(370px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 3
}

.place h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.03em;
  padding-right: 44px
}

.place .addr {
  margin: 0;
  font-size: 16px;
  line-height: 1.45
}

.place .addr span {
  display: block
}

.place .addr small {
  display: block;
  color: var(--muted);
  font-size: 14px
}

.place .biz {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1.5px solid var(--soil);
  padding-top: 12px
}

.place .biz h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800
}

.place dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  font-size: 14px
}

.place dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
  padding-top: 2px
}

.place dd {
  margin: 0;
  overflow-wrap: anywhere
}

.place .src {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 10px
}

.place .close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid var(--soil);
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  color: var(--soil)
}

.copy {
  font-size: 12px;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: transparent;
  cursor: pointer
}

#loading {
  position: absolute;
  inset: 0;
  background: var(--fern);
  color: var(--mist);
  display: grid;
  place-items: center;
  z-index: 5;
  transition: opacity .6s
}

#loading .box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(320px, 80%)
}

#loading strong {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--mist)
}

#loading .track {
  height: 4px;
  background: var(--fern-deep);
  border-radius: 2px;
  overflow: hidden
}

#loading .fill {
  height: 100%;
  width: 0;
  background: var(--wattle);
  transition: width .2s
}

#loading span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: #C9D3CC
}

/* ---------- this week */
.weekscroll {
  overflow-x: auto;
  border-radius: 14px
}

.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(86px, 1fr));
  min-width: 640px;
  background: var(--card);
  border: 2px solid var(--soil);
  border-radius: 14px;
  overflow: hidden
}

.day {
  min-height: 140px;
  padding: 14px 12px 12px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px
}

.day:last-child {
  border-right: 0
}

.day .dow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase
}

.day .hi {
  margin-top: 10px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .85;
  font-variant-numeric: tabular-nums
}

.day .lo {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted)
}

.day .sky {
  margin-top: auto;
  padding-top: 14px;
  font-size: 14px;
  font-weight: 600
}

.day .chance {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted)
}

.day.wet .hi {
  color: #2F5BA8
}

.day.today {
  background: var(--fern);
  color: var(--mist)
}

.day.today .lo,
.day.today .chance {
  color: #C9D3CC
}

.day.today .sky {
  color: var(--wattle)
}

.wxnote {
  margin: 12px 0 0;
  max-width: 78ch
}

.diary {
  margin-top: 32px
}

.entry {
  display: grid;
  grid-template-columns: 78px 110px minmax(0, 1fr);
  gap: 6px 14px;
  padding: 16px 0;
  border-top: 2px solid var(--soil)
}

.entry:first-child {
  margin-top: 10px
}

.entry time {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums
}

.entry .kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--berry);
  padding-top: 5px
}

.entry h3 {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em
}

.entry p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45
}

.entry .links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 8px;
  font-size: 14px
}

.links .linkbtn,
.event .linkbtn,
.spot .linkbtn {
  color: var(--berry);
  font-size: inherit
}

.hold {
  margin-top: 22px
}

.hold>h3 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em
}

.hold .entry {
  grid-template-columns: 110px minmax(0, 1fr)
}

.locals {
  margin-top: 56px
}

.events {
  display: flex;
  flex-direction: column
}

.event {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 0;
  border-top: 2px solid var(--soil)
}

.date {
  border: 2px solid var(--soil);
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-self: start;
  overflow: hidden;
  background: var(--card)
}

.date span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  padding: 4px 0;
  background: var(--berry);
  color: #fff
}

.date strong {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  padding-top: 4px;
  font-variant-numeric: tabular-nums
}

.date small {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  padding-bottom: 6px
}

.event h3 {
  margin: 6px 0 6px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.02em
}

.event p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 15px
}

.event .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  font-size: 14px
}

.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--soil)
}

.tag.today {
  background: var(--wattle);
  border-color: var(--wattle)
}

.empty {
  border: 2px dashed var(--line);
  border-radius: 16px;
  padding: 26px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 6px
}

.empty strong {
  color: var(--soil);
  font-size: 18px
}

.fernpanel .empty {
  border-color: #3C5E50;
  color: #C9D3CC
}

.fernpanel .empty strong {
  color: var(--mist)
}

.ro {
  font-size: 14px;
  margin: 0;
  opacity: .85
}

/* forms */
.formcard {
  background: var(--card);
  color: var(--soil);
  border: 2px solid var(--soil);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  display: grid;
  gap: 14px
}

.formcard h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em
}

.fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0
}

.field.wide {
  grid-column: 1/-1
}

.field label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted)
}

.field input,
.field select,
.field textarea {
  border: 2px solid var(--soil);
  border-radius: 10px;
  background: var(--mist);
  padding: 10px 12px;
  font-size: 16px;
  min-width: 0;
  min-height: 46px
}

.field textarea {
  min-height: 90px;
  resize: vertical
}

.formrow {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap
}

.formmsg {
  font-size: 14px;
  margin: 0
}

.formmsg:empty {
  display: none
}

.formmsg.err {
  color: var(--closed);
  font-weight: 600
}

.day.past {
  opacity: .5
}

.day.today .hi {
  color: var(--mist)
}

#railTop,
#railBottom {
  display: flex;
  flex-direction: column;
  gap: 20px
}

#railTop:empty,
#railBottom:empty {
  display: none
}

.entry.past {
  opacity: .55
}

.nextweek {
  margin-top: 28px
}

.nextweek>h3 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em
}

/* ---------- next bus */
.busline {
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.busline::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--wattle)
}

.buscard {
  background: var(--fern);
  color: var(--mist)
}

.buscard .eyebrow {
  color: var(--wattle)
}

.buscard .note {
  color: #C9D3CC;
  font-size: 13px
}

.busrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid #2E5A49
}

.busrow strong {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em
}

.busrow .in {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--wattle);
  font-variant-numeric: tabular-nums;
  text-align: right;
  line-height: 1
}

.busrow .in small {
  font-size: 14px;
  font-weight: 600;
  color: var(--mist);
  margin-left: 3px;
  letter-spacing: 0
}

.busrow .then {
  grid-column: 1/-1;
  font-family: var(--mono);
  font-size: 12px;
  color: #C9D3CC
}

/* ---------- noticeboard */
.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 18px
}

.notice {
  position: relative;
  background: var(--mist);
  color: var(--soil);
  border-radius: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25)
}

.notice:nth-child(3n+2) {
  background: var(--wattle)
}

.notice:nth-child(3n+3) {
  background: var(--ripe)
}

.notice .eyebrow {
  color: var(--berry)
}

.notice:nth-child(3n+2) .eyebrow,
.notice:nth-child(3n+3) .eyebrow {
  color: var(--soil)
}

.notice p {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  overflow-wrap: anywhere
}

.notice .by {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  opacity: .8
}

.notice .contact {
  font-size: 14px;
  overflow-wrap: anywhere
}

/* ---------- visiting */
.guide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 16px;
  margin-top: 26px
}

.guide article {
  background: var(--mist);
  color: var(--soil);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.guide h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.03em
}

.guide p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45
}

.guide .linkbtn {
  align-self: flex-start;
  margin-top: auto;
  color: var(--berry)
}

/* ---------- about */
.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 24px 48px
}

.about p {
  max-width: 62ch
}

.sources {
  font-size: 13px;
  color: var(--muted);
  margin-top: 20px
}

.sources a {
  color: var(--muted)
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-top: 32px;
  border-top: 3px solid var(--soil);
  padding-top: 20px
}

.fact strong {
  display: block;
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--berry);
  font-variant-numeric: tabular-nums
}

.fact span {
  font-size: 14px
}

/* ---------- places view */
.back {
  display: inline-block;
  margin-bottom: 16px;
  font-weight: 600
}

.dirbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px 36px;
  flex-wrap: wrap;
  margin-bottom: 8px
}

.dirbar p {
  margin: 8px 0 0;
  max-width: 46ch;
  color: var(--muted)
}

.dirsearch {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap
}

.dirsearch input {
  border: 2px solid var(--soil);
  border-radius: 999px;
  background: var(--card);
  padding: 0 18px;
  min-height: 48px;
  font-size: 16px;
  width: min(300px, 70vw)
}

.dirsearch button {
  border: 2px solid var(--soil);
  background: transparent;
  border-radius: 999px;
  min-height: 48px;
  padding: 0 18px;
  font-weight: 600;
  cursor: pointer
}

.dirsearch button[aria-pressed="true"] {
  background: var(--fern);
  border-color: var(--fern);
  color: var(--mist)
}

.catjump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 16px 0 6px
}

.catjump a {
  font-weight: 600;
  text-decoration: none;
  color: var(--soil);
  box-shadow: inset 0 -2px 0 var(--wattle)
}

.dircat {
  scroll-margin-top: calc(var(--bar) + 12px)
}

.dircat h2 {
  margin: 44px 0 6px;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .95
}

.dircat h2 span {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--muted)
}

.dircols,
.dirrow {
  display: grid;
  grid-template-columns: minmax(160px, 1.5fr) minmax(140px, 1.1fr) minmax(120px, .8fr) minmax(150px, .9fr);
  gap: 6px 22px;
  align-items: baseline;
  text-align: left
}

.dircols {
  padding: 8px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fern)
}

.dirrow {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  padding: 16px 0;
  cursor: pointer;
  color: inherit
}

.dirrow .nm {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0
}

.dirrow strong {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15
}

.dirrow em {
  font-style: normal;
  color: var(--muted);
  font-size: 14px
}

.dirrow .ph {
  font-size: 15px
}

.dirrow .hr {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted)
}

.dirrow:hover strong {
  text-decoration: underline;
  text-underline-offset: 4px
}

.dirrow.edge {
  cursor: default
}

.dirrow.edge:hover strong {
  text-decoration: none
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #B8B4AC;
  flex: none
}

.dot.open {
  background: var(--open)
}

.dot.closed {
  background: var(--closed)
}

.hr .o {
  color: var(--open);
  font-weight: 600
}

.hr .c {
  color: var(--closed);
  font-weight: 600
}

/* Unified map-first layout: both the 3D map hero and all community sections stay accessible on one page */

/* ---------- right rail */
.railcard {
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.railcard:empty {
  display: none
}

.railcard h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1
}

.railcard p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45
}

.railcard .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px
}

.cardlinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 6px
}

.spot {
  background: var(--card);
  border: 2px solid var(--soil)
}

.spot .addr {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted)
}

.spot .links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-weight: 600;
  font-size: 15px
}

.firecard {
  background: var(--soil);
  color: var(--mist)
}

.firecard .eyebrow {
  color: var(--wattle)
}

.firecard a:not(.btn) {
  color: var(--mist)
}

.firedot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wattle);
  display: inline-block
}

.know {
  border: 2px solid var(--soil)
}

.know .links a {
  font-weight: 600
}

.weekly {
  background: var(--ripe);
  color: var(--soil)
}

.weekly label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 4px
}

.weekly input {
  min-height: 46px;
  border: 2px solid var(--soil);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 16px;
  background: #fff
}

.adlabel {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--muted);
  margin: 0 0 6px
}

.promo {
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  min-height: 200px
}

.promo h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .98
}

.promo p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45
}

.promo .cta {
  font-weight: 600;
  font-size: 15px
}

.promo img {
  width: calc(100% + 44px);
  margin: -22px -22px 4px;
  height: 150px;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
  display: block
}

.promo.wattle {
  background: var(--wattle);
  color: var(--soil)
}

.promo.fern {
  background: var(--fern);
  color: var(--mist)
}

.promo.fern .cta {
  color: var(--wattle)
}

.promo.berry {
  background: var(--berry);
  color: #fff
}

.promo.mist {
  background: var(--card);
  color: var(--soil);
  border: 2px solid var(--soil)
}

a.promo:hover h3 {
  text-decoration: underline;
  text-underline-offset: 4px
}

.feature {
  background: var(--card);
  border: 2px solid var(--soil)
}

.feature .eyebrow {
  color: var(--berry)
}

.sticker {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--wattle);
  color: var(--soil);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(8deg);
  font-weight: 800;
  font-size: 18px;
  line-height: .9
}

.sticker small {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em
}

/* ---------- footer */
footer.site {
  background: var(--soil);
  color: var(--mist);
  padding-block: 44px calc(44px + env(safe-area-inset-bottom, 0px))
}

.footgrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px
}

.footgrid>* {
  flex: 1 1 360px
}

.footbrand {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1
}

footer.site p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
  max-width: 52ch
}

footer.site a {
  color: var(--wattle)
}

.credits {
  font-size: 12px !important;
  color: #B9B2AF
}

/* ---------- sign-in dialog */
.signin {
  border: 0;
  padding: 0;
  border-radius: 18px;
  max-width: 420px;
  width: calc(100% - 32px);
  background: var(--mist);
  color: var(--soil)
}

.signin::backdrop {
  background: rgba(12, 42, 31, .6)
}

.signinbox {
  position: relative;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.signinbox h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.04em;
  padding-right: 44px
}

.signinbox p {
  margin: 0
}

.signinbox label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted)
}

.signinbox input {
  min-height: 48px;
  border: 2px solid var(--soil);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 16px;
  background: #fff
}

.signinbox .or {
  font-size: 14px;
  color: var(--muted);
  text-align: center
}

.signinbox .close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 2px solid var(--soil);
  background: transparent;
  font-size: 22px;
  cursor: pointer
}

/* ---------- small screens */
@media (max-width:800px) {
  .townbar {
    position: static
  }

  .navrow {
    min-height: 0
  }

  .nav {
    margin-left: 0;
    width: 100%;
    gap: 2px 18px
  }

  .account {
    order: -1;
    margin-left: auto
  }

  .entry {
    grid-template-columns: 64px minmax(0, 1fr)
  }

  .entry .kicker {
    grid-column: 2
  }

  .hold .entry {
    grid-template-columns: minmax(0, 1fr)
  }

  .dircols {
    display: none
  }

  .dirrow {
    grid-template-columns: minmax(0, 1fr) auto
  }

  .dirrow .ad,
  .dirrow .ph {
    grid-column: 1
  }

  .dirrow .hr {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center
  }

  .hint {
    display: none
  }

  .place {
    top: auto;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 60%
  }

  main {
    gap: 52px
  }
}

@media (prefers-reduced-motion: reduce) {

  .pin,
  #loading,
  .zoomhint {
    transition: none
  }
}

/* ---------- visitor's guide (visit.html)
   Content comes from data/visit.json; each group picks one of the layouts below. */
.page-visit { --bar: 72px }
.page-visit .nav a.visit { box-shadow: inset 0 0 0 2px var(--soil) }

/* hero: the guide's title and chapters on the left, a postcard of the town on the right */
.vhero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px 64px;
  align-items: center;
  padding-top: clamp(40px, 6vw, 80px);
  padding-bottom: clamp(120px, 13vw, 180px);
  position: relative;
  z-index: 2
}
.vhero .eyebrow { color: var(--wattle) }
.vhero h1 {
  margin: 14px 0 0;
  font-size: clamp(56px, 8.4vw, 124px);
  line-height: .84;
  font-weight: 800;
  letter-spacing: -.055em
}
.vhero h1 span { display: block; color: var(--wattle) }
.vhero .stand { margin-top: 22px; max-width: 40ch }
.vchapters { margin-top: 34px; display: flex; flex-direction: column; max-width: 460px }
.vchapters a {
  display: flex; align-items: baseline; gap: 18px;
  padding: 12px 0; border-top: 1px solid rgba(238, 237, 231, .25);
  color: var(--mist); text-decoration: none; font-size: 22px; font-weight: 700; letter-spacing: -.02em
}
.vchapters a:last-child { border-bottom: 1px solid rgba(238, 237, 231, .25) }
.vchapters a span { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--wattle); letter-spacing: .08em }
.vchapters a:hover { color: var(--wattle) }
.vchapters a::after { content: '↓'; margin-left: auto; font-weight: 500; opacity: .5 }

.postcard {
  position: relative; margin: 0; justify-self: center; width: min(100%, 520px);
  background: #FBFAF6; color: var(--soil); padding: 14px 14px 18px; border-radius: 4px;
  transform: rotate(2.5deg); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55)
}
.postcard-img { overflow: hidden; border-radius: 2px; aspect-ratio: 16 / 10 }
.postcard-img img { width: 100%; height: 100%; object-fit: cover; display: block }
.postcard figcaption { display: flex; flex-direction: column; padding: 14px 6px 0 }
.pc-greet { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--berry) }
.pc-name { font-size: clamp(48px, 6vw, 76px); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: var(--fern) }
.pc-sub { margin-top: 6px; font-size: 14px; color: var(--muted) }
.stamp {
  position: absolute; right: -18px; top: -22px; width: 92px; height: 108px;
  background: var(--berry); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: rotate(8deg); border-radius: 3px;
  box-shadow: inset 0 0 0 5px var(--berry), inset 0 0 0 7px rgba(255, 255, 255, .7), 0 6px 16px rgba(0, 0, 0, .35)
}
.stamp b { font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1 }
.stamp small { font-family: var(--mono); font-size: 11px; letter-spacing: .2em }

/* chapters */
.vpage { padding-top: 56px; padding-bottom: 80px; display: flex; flex-direction: column; gap: clamp(72px, 9vw, 120px) }
#vChaptersBody { display: flex; flex-direction: column; gap: clamp(80px, 10vw, 140px) }
.vchapter { scroll-margin-top: calc(var(--bar) + 16px) }
.vchead {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, .9fr);
  gap: 12px 36px; align-items: end; padding-bottom: 28px; border-bottom: 3px solid var(--soil); margin-bottom: 36px
}
.vchnum {
  font-size: clamp(88px, 12vw, 168px); font-weight: 800; line-height: .72; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 2px var(--soil)
}
.vchtitle h2 { margin: 10px 0 0; font-size: clamp(40px, 5.4vw, 72px); line-height: .9; font-weight: 800; letter-spacing: -.05em }
.vchead .lede { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; max-width: 46ch }
.vgroups { display: flex; flex-direction: column; gap: 56px }
.vchapter.is-split .vgroups { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 40px; align-items: start }
.vgrouplabel {
  display: flex; align-items: center; gap: 14px; margin: 0 0 18px;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted)
}
.vgrouplabel::after { content: ''; flex: 1; height: 1px; background: var(--line) }
.vnote { margin-top: 18px; max-width: 70ch }

/* shared bits */
.vkind { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--berry) }
.vgroups h3 { margin: 4px 0 0; font-size: 24px; line-height: 1.08; font-weight: 800; letter-spacing: -.03em }
.vbody { margin: 8px 0 0; font-size: 16px; line-height: 1.5 }
.vwhere { margin: 8px 0 0; font-size: 14px; color: var(--muted) }
.vlinks { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 600; font-size: 15px }
.vopen { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em }
.vopen::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #B8B4AC }
.vopen.is-open { color: var(--open); font-weight: 600 }
.vopen.is-open::before { background: var(--open); box-shadow: 0 0 0 4px rgba(31, 122, 69, .15) }
.vopen.is-shut { color: var(--muted) }

/* layout: feature — a mosaic. The lead tile is the fern panel, the second sits beside it in wattle,
   and the rest tile underneath; visit.js picks each tile's width from the item count. */
.vmosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px }
.vtile {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 2px solid var(--soil); border-radius: 18px; padding: 22px 22px 20px
}
.vtile.lead {
  grid-column: span 3; grid-row: span 2; overflow: hidden; border-color: var(--fern);
  background: var(--fern); color: var(--mist); padding: clamp(28px, 3.4vw, 40px); padding-bottom: 96px; justify-content: flex-start
}
.vtile.lead .vkind { color: var(--wattle) }
.vtile.lead h3 { font-size: clamp(44px, 5vw, 68px); line-height: .88; letter-spacing: -.055em; max-width: 9ch; margin-top: 10px }
.vtile.lead .vbody { font-size: 17px; max-width: 42ch; margin-top: 16px }
.vtile.lead .vwhere { color: #C9D3CC }
.vtile.lead .vlinks a { color: var(--wattle) }
.vtile-ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 80px; fill: #0C2A1F }
.vtile.second { grid-column: span 3; background: var(--wattle); border-color: var(--wattle) }
.vtile.second .vkind, .vtile.second .vwhere, .vtile.second a { color: var(--soil) }
.vtile.second h3 { font-size: clamp(30px, 3vw, 40px); line-height: .95; letter-spacing: -.045em }
.vtile.second .vbody { font-size: 17px }
.vtile.span-2 { grid-column: span 2 }
.vtile.span-3 { grid-column: span 3 }
.vtile.span-6 { grid-column: span 6; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4px 28px; align-items: start }
.vtile.span-6 > :not(.vkind):not(h3) { grid-column: 2 }
.vtile.span-6 > .vkind, .vtile.span-6 > h3 { grid-column: 1 }
.vtile.span-6 > .vkind { grid-row: 1 } .vtile.span-6 > h3 { grid-row: 2 }
.vtile.span-6 > .vbody { grid-row: 1; margin-top: 0 }
.vtile .vlinks { margin-top: auto; padding-top: 12px }
.vtile.lead .vlinks, .vtile.span-6 .vlinks { margin-top: 12px; padding-top: 0 }
.vtile h3 { font-size: 23px }
.vtile .vbody { font-size: 15px }

/* layout: road — stops along a road */
.vroad {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0 20px
}
.vroad::before {
  content: ''; position: absolute; left: 0; right: 0; top: 52px; height: 12px; border-radius: 6px;
  background: var(--soil) linear-gradient(90deg, var(--wattle) 0 18px, transparent 18px 34px) 0 50% / 34px 2px repeat-x
}
.vstop { position: relative; display: flex; flex-direction: column }
.vstop-place { margin: 0 0 50px; font-size: 26px; font-weight: 800; letter-spacing: -.035em; line-height: 1; min-height: 26px }
.vstop-dot {
  position: absolute; left: 0; top: 46px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--berry); border: 4px solid var(--mist); z-index: 1
}
.vstop-card { background: var(--card); border: 2px solid var(--soil); border-radius: 16px; padding: 20px; flex: 1; margin-bottom: 20px }

/* layout: spotlight — one big card with a sticker */
.vspot {
  position: relative; background: var(--berry); color: #fff; border-radius: 20px;
  padding: clamp(28px, 4vw, 40px); min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end
}
.vspot .vkind { color: var(--wattle) }
.vspot h3 { font-size: clamp(40px, 4.6vw, 60px); line-height: .9; letter-spacing: -.05em }
.vspot .vbody { font-size: 17px }
.vspot .vwhere { color: #FFD9E3 }
.vspot .vlinks a { color: #fff }
.vsticker {
  position: absolute; top: 22px; right: 22px; width: 118px; height: 118px; border-radius: 50%;
  background: var(--wattle); color: var(--soil); display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 14px; font-weight: 800; font-size: 17px; line-height: 1.02; letter-spacing: -.02em; transform: rotate(10deg)
}

/* layout: ledger — compact rows */
.vledger { display: flex; flex-direction: column }
.vrow { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 6px 24px; padding: 18px 0; border-top: 2px solid var(--soil) }
.vrow:last-child { border-bottom: 2px solid var(--soil) }
.vrow h3 { font-size: 22px }
.vrow .vbody { margin-top: 0; font-size: 15px }
.vrow .vlinks { margin-top: 8px }

/* layout: cards — a toned grid */
.vcardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px }
.vcard2 { background: var(--card); border: 2px solid var(--soil); border-radius: 16px; padding: 22px; display: flex; flex-direction: column }
.vcard2 .vlinks { margin-top: auto; padding-top: 12px }
.tone-wattle .vcard2 { background: var(--wattle); border-color: var(--wattle) }
.tone-wattle .vcard2 .vkind { color: var(--soil) }
.tone-wattle .vcard2 .vwhere { color: var(--soil); opacity: .75 }
.tone-wattle .vcard2 a { color: var(--soil) }
.tone-ripe .vcard2 { background: var(--ripe); border-color: var(--ripe) }
.tone-fern .vcard2 { background: var(--fern); border-color: var(--fern); color: var(--mist) }
.tone-fern .vcard2 .vkind, .tone-fern .vcard2 a { color: var(--wattle) }

/* layout: street — Main Road as a menu board, grouped by kind, each line with its street number. */
.vmenu {
  background: var(--soil); color: var(--mist); border-radius: 20px; padding: clamp(24px, 4vw, 44px);
  columns: 2 320px; column-gap: clamp(28px, 4vw, 56px)
}
.vmenu-group { break-inside: avoid; margin-bottom: 28px }
.vmenu-group h4 {
  margin: 0 0 10px; font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--wattle);
  padding-bottom: 10px; border-bottom: 2px solid rgba(238, 237, 231, .2)
}
.vmenu ol { list-style: none; margin: 0; padding: 0 }
.vmenu-item { padding: 10px 8px; margin: 0 -8px; border-radius: 8px }
.vmenu-line { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 19px }
.vmenu-line strong { font-weight: 700; letter-spacing: -.02em }
.vmenu-dots { flex: 1; min-width: 20px; border-bottom: 2px dotted rgba(238, 237, 231, .35); transform: translateY(-4px) }
.vmenu-no { font-weight: 800; font-size: 19px; color: var(--ripe); font-variant-numeric: tabular-nums; white-space: nowrap }
.vmenu-body { margin: 4px 0 0; font-size: 14px; color: #D6D1CE }
.vmenu .vopen { margin-top: 6px; color: #C9D3CC }
.vmenu .vopen.is-open { color: #8FE0AE }
.vmenu .vopen.is-open::before { background: #5FB45F; box-shadow: 0 0 0 4px rgba(95, 180, 95, .2) }
.vmenu .vlinks { margin-top: 4px; font-size: 14px }
.vmenu .vlinks a { color: var(--mist) }

/* a group with a single item: a signpost rather than a lonely row */
.vsignpost {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px 28px; align-items: center;
  background: var(--card); border: 2px solid var(--soil); border-left: 14px solid var(--berry); border-radius: 14px; padding: 22px 26px
}
.vsignpost h3 { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.04em }
.vsignpost .vbody { margin: 0 }

/* practical: big facts on fern */
.vpractical { background: var(--fern); color: var(--mist); border-radius: 22px; padding: clamp(28px, 5vw, 56px) }
.vpractical .eyebrow { color: var(--wattle) }
.vpractical h2 { margin: 8px 0 0; font-size: clamp(36px, 4.6vw, 56px); line-height: .94; font-weight: 800; letter-spacing: -.045em }
.vfacts { margin: 32px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; border-top: 1px solid rgba(238, 237, 231, .25); padding-top: 24px }
.vfacts dt { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #C9D3CC }
.vfacts dd { margin: 6px 0 0; display: flex; flex-direction: column }
.vfacts strong { font-size: clamp(34px, 4vw, 52px); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--wattle) }
.vfacts span { margin-top: 6px; font-size: 14px; color: #C9D3CC }
.vpr-body { margin: 28px 0 0; max-width: 64ch; font-size: 17px }
.vpractical .cardlinks { margin-top: 18px }
.vpractical a:not(.btn) { color: var(--wattle) }
.page-visit .sources { font-size: 13px; color: var(--muted); max-width: 80ch; margin: 0 }

@media (max-width: 900px) {
  .vhero-grid { grid-template-columns: minmax(0, 1fr) }
  .postcard { width: min(92%, 460px); margin-top: 8px }
  .vchead { grid-template-columns: auto minmax(0, 1fr) }
  .vchead .lede { grid-column: 1 / -1 }
  .vchapter.is-split .vgroups { grid-template-columns: minmax(0, 1fr) }
  .vmosaic { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .vtile.lead, .vtile.second, .vtile.span-6 { grid-column: 1 / -1 }
  .vtile.lead { grid-row: auto }
  .vtile.span-2, .vtile.span-3 { grid-column: span 1 }
}
@media (max-width: 700px) {
  .vindex li { grid-template-columns: 40px minmax(0, 1fr) }
  .vi-body { grid-column: 2 }
  .vrow { grid-template-columns: minmax(0, 1fr) }
  .vmosaic { grid-template-columns: minmax(0, 1fr) }
  .vtile.span-2, .vtile.span-3 { grid-column: 1 / -1 }
  .vtile.span-6, .vsignpost { display: flex; flex-direction: column; align-items: flex-start }
  .vroad::before { left: 11px; right: auto; top: 0; bottom: 0; width: 12px; height: auto;
    background: var(--soil) linear-gradient(180deg, var(--wattle) 0 18px, transparent 18px 34px) 50% 0 / 2px 34px repeat-y }
  .vstop { padding-left: 48px }
  .vstop-place { margin-bottom: 12px }
  .vstop-dot { top: 2px; left: 5px }
  .stamp { right: -8px; width: 78px; height: 92px }
}

/* ---------- map controls: atmosphere and guided trails (above the 3D map) */
.map-expbar { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 6px 0 0 }
.exp-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px }
.exp-label { font-size: 14px; font-weight: 700; margin-right: 4px }
.exp-pill {
  min-height: 36px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--soil);
  background: transparent; color: var(--soil); font-size: 14px; font-weight: 600; cursor: pointer
}
.exp-pill:hover { background: var(--card) }
.exp-pill.on { background: var(--soil); color: var(--mist) }
.exp-pill.trail.on { background: var(--wattle); border-color: var(--wattle); color: var(--soil) }
@media (max-width: 800px) { .map-expbar { flex-direction: column; gap: 8px } }

/* off-map places in the directory point at a road out of town */
.dirrow.edge { cursor: pointer }
.dirrow.edge:hover strong { text-decoration: underline; text-underline-offset: 4px }
.dirrow.edge .hr { color: var(--fern) }

/* signposts on the edge of the 3D board, for the roads out of town */
.pin.rim button { background: var(--wattle); color: var(--soil); border-color: var(--soil); border-radius: 4px; font-weight: 600 }
.pin.rim i { background: var(--soil); width: 3px; height: 22px }

/* ---------- Town Square: channels, posts and local groups */
.town-square { background: var(--card); border: 2px solid var(--soil) }
.town-square .bandhead h2 { max-width: 14ch }
.forum-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0 18px; border-top: 2px solid var(--soil); margin-top: 8px }
.ftab {
  min-height: 40px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--soil); background: transparent;
  color: var(--soil); font-size: 15px; font-weight: 600; cursor: pointer
}
.ftab:hover { background: var(--mist) }
.ftab.on { background: var(--soil); color: var(--mist) }
.ftab.groups { margin-left: auto; border-color: var(--fern); color: var(--fern) }
.ftab.groups.on { background: var(--fern); color: var(--mist) }
@media (max-width: 700px) {
  .forum-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px }
  .ftab { flex: none }
  .ftab.groups { margin-left: 0 }
}

.forum-feed { display: flex; flex-direction: column }
.thread { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--line) }
.thread:first-child { border-top: 0; padding-top: 4px }
.tvote {
  align-self: start; width: 52px; min-height: 60px; border-radius: 12px; border: 2px solid var(--soil);
  background: var(--mist); color: var(--soil); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer
}
.tvote:hover:not(:disabled) { background: var(--wattle); border-color: var(--wattle) }
.tvote.voted { background: var(--berry); border-color: var(--berry); color: #fff }
.tvote:disabled { cursor: default; border-color: var(--line); color: var(--muted) }
.tcount { font-size: 18px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1 }
.tmain { min-width: 0 }
.thead { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center }
.tch { font-size: 13px; font-weight: 700; color: var(--fern) }
.tch.ch-market { color: var(--berry) }
.tch.ch-alerts { color: #8A5A00 }
.tprice { font-size: 13px; font-weight: 800; background: var(--wattle); color: var(--soil); padding: 2px 10px; border-radius: 999px }
.thread h3 { margin: 6px 0 0; font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em }
.tbody { margin: 6px 0 0; font-size: 16px; line-height: 1.5; max-width: 68ch; white-space: pre-line; overflow-wrap: anywhere }
.tcontact { margin: 8px 0 0; font-size: 15px; font-weight: 600 }
.tfoot { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 14px; color: var(--muted) }
.tpin {
  border: 0; background: none; padding: 0; min-height: 32px; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--berry); text-decoration: underline; text-underline-offset: 3px
}

.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px }
.groups-grid > .empty { grid-column: 1 / -1 }
.gcard { display: flex; flex-direction: column; background: var(--mist); border-radius: 16px; padding: 22px; border-top: 8px solid var(--fern) }
.gcat { margin: 0; font-size: 13px; font-weight: 700; color: var(--fern) }
.gcard h3 { margin: 6px 0 0; font-size: 24px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em }
.gdesc { margin: 8px 0 0; font-size: 15px; line-height: 1.5 }
.gfoot { margin: auto 0 0; padding-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 14px; color: var(--muted) }

/* ---------- this week: tiles. The diary and locals' events, one tile each; colour follows the kind. */
.weekhead { align-items: flex-end }
.weekhead .bandside { max-width: 38ch }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 14px; margin-top: 22px }
.tiles > .empty, .tiles > .note { grid-column: 1 / -1 }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  min-height: 236px; padding: 20px 20px 16px; border-radius: 18px;
  background: var(--card); color: var(--soil); border: 2px solid var(--soil)
}
.tile.tone-wattle { background: var(--wattle); border-color: var(--wattle) }
.tile.tone-berry { background: var(--berry); border-color: var(--berry); color: #fff }
.tile.tone-soil { background: var(--soil); border-color: var(--soil); color: var(--mist) }
.tile.tone-fern { background: var(--fern); border-color: var(--fern); color: var(--mist) }
.tile.tone-mist { background: var(--mist); border-color: var(--line) }
.tile.tone-local { border-color: var(--soil); box-shadow: inset 0 8px 0 var(--ripe) }
.tile.past { opacity: .45 }
.tdate { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px }
.tdate span { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase }
.tdate strong { order: -1; font-size: 60px; font-weight: 800; letter-spacing: -.06em; line-height: .8 }
.tdate small { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; opacity: .75 }
.tile.today .tdate span { background: var(--berry); color: #fff; padding: 3px 9px; border-radius: 999px }
.tile.tone-berry.today .tdate span { background: var(--soil) }
.tkick { margin: 0; font-size: 13px; font-weight: 700; opacity: .8 }
.tile h3 { margin: 0; font-size: 22px; line-height: 1.08; font-weight: 800; letter-spacing: -.03em; overflow-wrap: anywhere }
.twhen { margin: 0; font-size: 14px; font-weight: 600 }
.tile .tbody {
  margin: 2px 0 0; font-size: 15px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden
}
.tlinks { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 14px }
.tlinks a, .tlinks .linkbtn { color: inherit; font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px }
.tby { opacity: .7 }
.tiles.small { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 10px }
.tiles.small .tile { min-height: 0; padding: 14px 16px 12px; border-width: 2px }
.tiles.small .tdate strong { font-size: 36px }
.tiles.small .tile h3 { font-size: 18px }
.tiles.small .tlinks { padding-top: 6px }

/* community notices: deadlines and open calls, quieter than the week */
.cnotices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; margin-top: 10px }
.cnotice { background: var(--card); border-radius: 14px; padding: 16px 18px; border-left: 6px solid var(--wattle) }
.cnotice .kicker { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--berry) }
.cnotice h4 { margin: 6px 0 0; font-size: 18px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em }
.cnotice p { margin: 6px 0 0; font-size: 15px; line-height: 1.45 }
.cnotice a { display: inline-block; margin-top: 8px; font-weight: 600; font-size: 14px; color: var(--berry) }

/* the Town Square, signposted from the home page */
.squarelink {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 36px;
  background: var(--soil); color: var(--mist); border-radius: 18px; padding: clamp(24px, 4vw, 44px)
}
.squarelink .eyebrow { color: var(--wattle) }
.squarelink h2 { margin: 8px 0 0; font-size: clamp(30px, 3.8vw, 48px); line-height: .95; font-weight: 800; letter-spacing: -.045em; max-width: 16ch }
.squarelink p:last-child { margin: 12px 0 0; max-width: 52ch }

/* ---------- the directory: categories down the side, cards in a grid */
.dirlayout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; margin-top: 22px; align-items: start }
.dirside { position: sticky; top: calc(var(--bar) + 16px); display: flex; flex-direction: column; gap: 4px }
.dirside button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%;
  min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--soil); text-align: left; cursor: pointer
}
.dirside button b { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--muted) }
.dirside button:hover { background: var(--card) }
.dirside button[aria-pressed="true"] { background: var(--soil); color: var(--mist) }
.dirside button[aria-pressed="true"] b { color: var(--wattle) }
.dirside button.none { opacity: .45 }
.dircat h3 {
  margin: 0 0 14px; font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.045em; line-height: .95
}
.dircat + .dircat h3 { margin-top: 40px }
.dircat h3 span { margin-left: 8px; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--muted) }
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px }
.dcard {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px 14px;
  background: var(--card); border-radius: 14px; border-top: 6px solid var(--line)
}
.dcard.isopen { border-top-color: var(--open) }
.dkind { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted) }
.dcard h4 { margin: 2px 0 0; font-size: 20px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; overflow-wrap: anywhere }
.daddr { margin: 0; font-size: 15px }
.dstat { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted) }
.dstat .o { color: var(--open); font-weight: 600 }
.dstat .c { color: var(--closed); font-weight: 600 }
.dot.out { background: var(--wattle); box-shadow: 0 0 0 1px var(--soil) }
.dacts { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px }
.dacts a { color: var(--soil); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--wattle); text-decoration-thickness: 2px }
.dmap {
  min-height: 36px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--berry); background: transparent;
  color: var(--berry); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer
}
.dmap:hover { background: var(--berry); color: #fff }
@media (max-width: 760px) {
  .dirlayout { grid-template-columns: minmax(0, 1fr); gap: 16px }
  .dirside {
    position: sticky; top: var(--bar); z-index: 3; flex-direction: row; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); padding: 8px var(--gutter-r) 8px var(--gutter-l); background: var(--mist)
  }
  .dirside button { width: auto; flex: none; border: 2px solid var(--soil); border-radius: 999px; min-height: 40px }
}

/* ---------- the Town Square page */
.page-forum { --bar: 72px }
.page-forum .nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--wattle) }
.fhero-grid {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 48px;
  padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(110px, 12vw, 160px); position: relative; z-index: 2
}
.fhero h1 { margin: 14px 0 0; font-size: clamp(48px, 7vw, 104px); line-height: .86; font-weight: 800; letter-spacing: -.055em; max-width: 13ch }
.fhero h1 span { color: var(--wattle) }
.fhero .stand { margin-top: 22px; max-width: 46ch }
.fhero-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.fhero .ro { color: var(--ripe); flex-basis: 100% }
.fpage { padding-top: 36px; padding-bottom: 72px }
.fpage.town-square { background: none; border: 0 }
.fpage .formcard { margin-bottom: 28px }
.flayout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start }
.flayout .forum-tabs { position: sticky; top: calc(var(--bar) + 16px); flex-direction: column; flex-wrap: nowrap; border: 0; padding: 0; margin: 0 }
.flayout .ftab { text-align: left; border-radius: 10px; border-width: 0; min-height: 44px }
.flayout .ftab.on { background: var(--soil); color: var(--mist) }
.flayout .ftab.groups { margin: 12px 0 0; border-width: 2px }
.forum-feed .empty, .groups-grid .empty { background: var(--card) }
.fpage .thread { background: var(--card); border-radius: 16px; padding: 18px 20px; border: 0; margin-bottom: 12px }
.fhouse { margin-top: 24px; max-width: 64ch }
a.tpin { color: var(--berry); font-weight: 600 }
@media (max-width: 760px) {
  .flayout { grid-template-columns: minmax(0, 1fr); gap: 14px }
  .flayout .forum-tabs { position: static; flex-direction: row; overflow-x: auto }
  .flayout .ftab { border-width: 2px; border-radius: 999px; flex: none }
  .flayout .ftab.groups { margin: 0 }
}
.dphone { margin: 0; font-size: 15px }
.dphone a { color: var(--soil); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--wattle); text-decoration-thickness: 2px }

/* bins in the day bar: both calendars until the viewer picks theirs */
.binpick { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(238, 237, 231, .35); text-underline-offset: 3px }
.binpick:hover { text-decoration-color: currentColor }
button.bin.binpick { text-decoration: none }
button.bin.binpick:hover { text-decoration: underline }
.binask { opacity: .7 }
a.binask { color: inherit }

@media (max-width: 760px) {
  /* phones: tighter cards so a category doesn't run for metres */
  .dcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 12px 14px; border-top-width: 4px }
  .dcard > * { grid-column: 1 }
  .dcard .dacts { grid-column: 2; grid-row: 1 / span 5; align-self: center; flex-direction: column; align-items: flex-end; padding-top: 0; margin: 0; gap: 8px }
  .dcard h4 { font-size: 18px }
  .dstat { margin-top: 2px; font-size: 13px }
  .dmap { min-height: 34px; padding: 0 12px; font-size: 13px }
  .tile { min-height: 0; padding: 16px 16px 12px }
  .tdate strong { font-size: 44px }
  .tile h3 { font-size: 20px }
  .tile .tbody { -webkit-line-clamp: 3 }
}
@media (max-width: 760px) { .binlong { display: none } }

/* what's on: one week at a time, with arrows */
.weeknav { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; padding: 10px; border-radius: 999px; background: var(--card); border: 2px solid var(--soil) }
.wklabel { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 12px; text-align: center }
.wklabel strong { font-size: 22px; font-weight: 800; letter-spacing: -.03em }
.wklabel span { font-family: var(--mono); font-size: 13px; color: var(--muted) }
.wkarrow {
  flex: none; min-width: 48px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 0;
  background: var(--soil); color: var(--mist); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; line-height: 1
}
.wkarrow.next { background: var(--berry); color: #fff }
.wkarrow:hover:not(:disabled) { background: var(--fern) }
.wkarrow:disabled { background: var(--line); color: var(--muted); cursor: default }
#wkPrev { font-size: 26px; padding: 0 }
@media (max-width: 760px) {
  .weeknav { border-radius: 18px; padding: 8px }
  .wklabel strong { font-size: 18px }
  .wkarrow.next span { display: none }
  .wkarrow.next { font-size: 26px; padding: 0 }
}

/* the directory gets the full width: no rail, so the cards run three or four across */
html[data-view="places"] .layout > main { flex-basis: 100%; max-width: 100% }
html[data-view="places"] .dgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)) }

/* the map lives on the directory view now */
html[data-view="places"] #places { margin-top: 8px }

/* Town Square: up and down votes, reports, held posts */
.tvotes { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 52px }
.tvotes .tvote { width: 44px; min-height: 36px; border-radius: 10px; gap: 0 }
.tvotes .tcount { padding: 2px 0 }
.tvote.up.on { background: var(--fern); border-color: var(--fern); color: var(--mist) }
.tvote.down.on { background: var(--berry); border-color: var(--berry); color: #fff }
.tvote.down:hover:not(:disabled) { background: var(--ripe); border-color: var(--ripe) }
.thread.held { outline: 2px dashed var(--wattle); outline-offset: -2px }
.theld { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #8A5A00 }
.treport { color: var(--muted) !important; font-weight: 500 !important }
.treported { font-size: 13px; color: var(--muted) }
.treportbox { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: var(--mist) }
.treportbox p { margin: 0 0 8px; font-weight: 600 }
.treportbox .note { margin: 8px 0 0; font-weight: 400 }
.treasons { display: flex; flex-wrap: wrap; gap: 6px }
.treasons button { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--soil); background: var(--card); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer }
.treasons button:hover { background: var(--wattle); border-color: var(--wattle) }
.ftab.review { border-color: #8A5A00; color: #8A5A00 }
.ftab.review.on { background: #8A5A00; color: #fff }
.ftab.review b { font-family: var(--mono); font-size: 12px; margin-left: 6px }
.wxnote + .weeknav { margin-top: 22px }
/* add an event: under this week's tiles */
.addevent { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; max-width: none; margin-top: 22px; padding: 20px 24px; border-radius: 18px; border: 2px dashed var(--soil) }
.addevent p { font-size: 17px; font-weight: 600 }
#eventForm { margin-top: 14px }

/* ================= The Rec: sport, clubs and groups ================= */
.page-rec { --bar: 72px }
.page-rec .nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--wattle) }
.rhero-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px 56px; align-items: end;
  padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(120px, 12vw, 170px); position: relative; z-index: 2
}
.rhero h1 { margin: 14px 0 0; font-size: clamp(64px, 10vw, 150px); line-height: .82; font-weight: 800; letter-spacing: -.06em }
.rhero h1 span { display: block; color: var(--wattle) }
.rhero .stand { margin-top: 24px; max-width: 42ch }
.rjump { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.rjump a {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px; text-decoration: none;
  background: rgba(238, 237, 231, .08); color: var(--mist); border-left: 6px solid var(--k, var(--wattle)); transition: background .15s
}
.rjump a:hover { background: rgba(238, 237, 231, .16) }
.rjump strong { font-size: 19px; font-weight: 800; letter-spacing: -.02em }
.rjump span { font-size: 14px; opacity: .8 }
.rjump a:last-child:nth-child(odd) { grid-column: 1 / -1 }
.tone-berry { --k: var(--berry) } .tone-wattle { --k: var(--wattle) } .tone-ripe { --k: var(--ripe) } .tone-fern { --k: #3f8a63 } .tone-soil { --k: var(--soil) }
.rjump .tone-soil { --k: var(--mist) }

.rpage { padding-top: 28px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 72px }
.rhead h2 { margin: 8px 0 0; font-size: clamp(36px, 4.6vw, 60px); line-height: .94; font-weight: 800; letter-spacing: -.045em }
.rhead .lede { margin: 12px 0 0; max-width: 60ch }

/* the scoreboard: an old ground scoreboard, black board and yellow figures */
.scoreboard { background: var(--soil); color: var(--mist); border-radius: 24px; padding: clamp(22px, 4vw, 44px); position: relative; overflow: hidden }
.scoreboard::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .025) 3px 4px)
}
.sbhead { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 28px }
.sbeyebrow { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--wattle) }
.sbhead h2 { margin: 8px 0 0; font-size: clamp(36px, 4.6vw, 60px); line-height: .94; font-weight: 800; letter-spacing: -.045em }
.sbgrid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px }
.sblabel { margin: 0 0 12px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(238, 237, 231, .65); border-bottom: 1px solid rgba(238, 237, 231, .2); padding-bottom: 10px }
.fxlist { display: flex; flex-direction: column; gap: 10px }
.fx { background: #120E0D; border: 1px solid rgba(244, 196, 48, .18); border-radius: 14px; padding: 14px 16px }
.fxwhen { margin: 0; display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--wattle) }
.fxha { color: rgba(238, 237, 231, .6) }
.fxteams { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 20px; line-height: 1.15 }
.fxteams strong { font-weight: 800; letter-spacing: -.02em }
.fxteams em { font-style: normal; font-weight: 600; color: rgba(238, 237, 231, .7); font-size: 16px }
.fxv { font-family: var(--mono); font-size: 13px; color: var(--wattle) }
.fxscore { margin: 10px 0 0; display: flex; align-items: center; gap: 14px }
.fxscore b { font-family: var(--mono); font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; color: var(--wattle); letter-spacing: .02em; text-shadow: 0 0 18px rgba(244, 196, 48, .35) }
.fxscore i { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; padding: 3px 8px; border-radius: 4px; background: rgba(238, 237, 231, .12) }
.fx.rW .fxscore i { background: #1F7A45; color: #fff }
.fx.rL .fxscore i { background: var(--berry); color: #fff }
.fxmeta { margin: 8px 0 0; font-size: 14px; color: rgba(238, 237, 231, .75) }
.fxnote { display: block; margin-top: 4px; color: var(--mist) }
.fxlinks { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px }
.fxlinks a, .fxlinks .linkbtn { color: var(--mist); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; font-size: 14px }
.fxempty { margin: 0; padding: 18px; border: 1px dashed rgba(238, 237, 231, .25); border-radius: 14px; color: rgba(238, 237, 231, .75) }
.sbnote { position: relative; margin: 22px 0 0; font-size: 14px; color: rgba(238, 237, 231, .65) }
.fxform { position: relative; margin-top: 22px; color: var(--soil) }

/* the year at the Rec: a month band */
.sband { margin-top: 24px; display: flex; flex-direction: column; gap: 4px; overflow-x: auto }
.srow { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(12, minmax(26px, 1fr)); gap: 4px; align-items: center; text-decoration: none; color: var(--soil); min-width: 560px }
.shead span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center }
.shead span.now { color: var(--berry); font-weight: 600 }
.sname { font-weight: 700; font-size: 15px; padding-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.scell { height: 26px; border-radius: 6px; background: rgba(27, 21, 19, .06) }
.scell.on { background: var(--k) }
.tone-wattle .scell.on { background: var(--wattle) }
.scell.now { outline: 2px solid var(--soil); outline-offset: 1px }
.srow:not(.shead):hover .sname { color: var(--berry) }
.sall { margin: 14px 0 0; font-size: 15px }
.sall a { color: var(--soil); font-weight: 600 }

/* clubs */
.rfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 20px }
.rfilter button {
  min-height: 42px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--soil); background: transparent;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; color: var(--soil)
}
.rfilter button b { font-family: var(--mono); font-size: 12px; font-weight: 500; margin-left: 4px; opacity: .7 }
.rfilter button[aria-pressed="true"] { background: var(--soil); color: var(--mist) }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: start }
.ccard {
  display: flex; flex-direction: column; gap: 12px; background: var(--card); border-radius: 20px; padding: 22px 22px 18px;
  border-top: 10px solid var(--k); scroll-margin-top: calc(var(--bar) + 20px); transition: box-shadow .3s
}
.ccard.flash { box-shadow: 0 0 0 4px var(--wattle) }
.ckind { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.ckind b { color: var(--berry); font-weight: 600 }
.ccard h3 { margin: 4px 0 0; font-size: 26px; line-height: 1.02; font-weight: 800; letter-spacing: -.035em }
.cnick { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--berry) }
.ctag { margin: 0; font-size: 16px; line-height: 1.45 }
.cfacts { margin: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.cfacts div { display: grid; grid-template-columns: 96px 1fr; gap: 10px }
.cfacts dt { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); padding-top: 2px }
.cfacts dd { margin: 0; font-size: 15px; line-height: 1.4 }
.cseason { margin: 0; font-size: 14px; display: flex; gap: 10px; align-items: baseline }
.cseason span { font-family: var(--mono); font-size: 12px; color: var(--muted); width: 96px; flex: none }
.cjoin { background: var(--mist); border-radius: 14px; padding: 14px 16px }
.cjoin p { margin: 0; font-size: 15px; line-height: 1.45 }
.cjoinlabel { font-weight: 800; font-size: 15px !important; margin-bottom: 4px !important }
.ccontact { margin-top: 8px !important; display: flex; flex-wrap: wrap; gap: 4px 16px }
.ccontact a { color: var(--soil); font-weight: 700; text-decoration-color: var(--wattle); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere }
.clinks { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 15px }
.clinks a { color: var(--soil); font-weight: 600; text-underline-offset: 3px }
.clinks .cbtn { background: var(--berry); color: #fff; text-decoration: none; padding: 9px 16px; border-radius: 999px; font-weight: 700 }
.clinks .cbtn:hover { background: var(--soil) }
.csrc { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.45 }
.csrc a { color: var(--muted) }

/* outside */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-top: 22px }
.pcard { background: var(--fern); color: var(--mist); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 8px }
.pcard h3 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: var(--wattle) }
.pcard p { margin: 0; line-height: 1.45 }
.pcard .paddr { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .75 }
.pcard .clinks a { color: var(--mist) }
.pcard .csrc, .pcard .csrc a { color: rgba(238, 237, 231, .65) }

/* also in town, and the club reps' form */
.ralso { border-top: 2px solid var(--soil); padding-top: 22px }
.ralso h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.03em }
.ralso > p { margin: 8px 0 0; max-width: 64ch }
.ralso ul { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px }
.ralso li { padding: 8px 14px; border-radius: 999px; background: var(--card); font-weight: 600; font-size: 15px }
.rrun { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px 48px; align-items: start; background: var(--wattle); border-radius: 24px; padding: clamp(22px, 4vw, 44px) }
.rrun h2 { margin: 8px 0 0; font-size: clamp(32px, 4vw, 52px); line-height: .95; font-weight: 800; letter-spacing: -.045em }
.rrun p { max-width: 46ch }
.rrun .eyebrow { color: var(--soil) }
.rrunform { margin: 0 }

@media (max-width: 860px) {
  .rhero-grid { grid-template-columns: minmax(0, 1fr) }
  .sbgrid { grid-template-columns: minmax(0, 1fr) }
  .rrun { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 560px) {
  .rjump { grid-template-columns: minmax(0, 1fr) }
  .rjump a:last-child:nth-child(odd) { grid-column: auto }
  .rpage { gap: 56px }
  .cfacts div { grid-template-columns: minmax(0, 1fr); gap: 2px }
}

/* ================= phone header: one-line day bar, section links behind a Menu button ================= */
.menubtn { display: none }
.footlinks.site { margin-top: 6px; font-size: 14px; opacity: .85 }
@media (max-width: 800px) {
  .dayline { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; gap: 18px; font-size: 12px; min-height: 34px; padding-block: 4px }
  .dayline::-webkit-scrollbar { display: none }
  .dayline > * { flex: none }
  .dayline .bins { flex-wrap: nowrap; gap: 4px 12px }
  .navrow { flex-wrap: nowrap; position: relative; min-height: 56px; padding-block: 4px; gap: 8px; max-width: 100%; box-sizing: border-box; }
  .brand { font-size: 24px; min-width: 0; }
  .brand .brandtag { display: none !important; }
  .navbar .account { display: none !important; }
  .menubtn { margin-left: auto; }
  .menubtn {
    order: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
    border-radius: 999px; border: 0; background: var(--wattle); color: var(--soil); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer
  }
  .menubtn .bars { display: inline-flex; flex-direction: column; gap: 3px }
  .menubtn .bars i { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s }
  .navrow.open .menubtn .bars i:nth-child(1) { transform: translateY(5px) rotate(45deg) }
  .navrow.open .menubtn .bars i:nth-child(2) { opacity: 0 }
  .navrow.open .menubtn .bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg) }
  .navrow > .nav { display: none }
  .navrow.open > .nav {
    display: flex; position: absolute; z-index: 40; top: 100%; left: 0; right: 0; width: auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 0; background: var(--fern);
    padding: 4px var(--gutter-r) 18px var(--gutter-l); border-bottom: 1px solid #0A2219; box-shadow: 0 18px 30px rgba(0, 0, 0, .25)
  }
  .navrow.open > .nav a { padding: 14px 0; font-size: 19px; border-top: 1px solid rgba(238, 237, 231, .14) }
  .navrow.open > .nav a[aria-current="true"]::after, .navrow.open > .nav a[aria-current="page"]::after { display: none }
  .navrow.open > .nav a[aria-current="true"], .navrow.open > .nav a[aria-current="page"] { color: var(--wattle) }
  .navrow.open > .nav a.visit { margin-top: 12px; justify-content: center; border-top: 0; padding: 12px 16px }
}
@media (max-width: 800px) { .navrow.open > .nav a { box-shadow: none !important } }

/* ================= Local info ================= */
.page-info { --bar: 72px }
.page-info .nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--wattle) }
.ihero-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px 56px; align-items: end;
  padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(110px, 12vw, 160px); position: relative; z-index: 2
}
.ihero h1 { margin: 14px 0 0; font-size: clamp(60px, 9vw, 132px); line-height: .84; font-weight: 800; letter-spacing: -.06em }
.ihero h1 span { display: block; color: var(--wattle) }
.ihero .stand { margin-top: 22px; max-width: 44ch }
.ijump { display: flex; flex-wrap: wrap; gap: 8px }
.ijump a {
  padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--mist);
  background: rgba(238, 237, 231, .08); display: inline-flex; align-items: center; gap: 8px
}
.ijump a::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--k, var(--mist)) }
.ijump a:hover { background: rgba(238, 237, 231, .18) }
.ijump .tone-soil { --k: var(--mist) } .ijump .tone-mist { --k: var(--mist) }
.ipage { padding-top: 24px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 64px }
#infoBody { display: flex; flex-direction: column; gap: 64px }
.isec { scroll-margin-top: calc(var(--bar) + 16px) }
.isechead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 28px; padding-bottom: 14px; border-bottom: 3px solid var(--k, var(--soil)); margin-bottom: 18px }
.isechead h2 { margin: 0; font-size: clamp(32px, 4vw, 50px); line-height: .95; font-weight: 800; letter-spacing: -.045em }
.isechead p { margin: 0; max-width: 56ch; font-size: 16px }
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px }
.iitem { background: var(--card); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0 }
.iitem h3 { margin: 0; font-size: 19px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em }
.iitem p { margin: 0; font-size: 15px; line-height: 1.45 }
.iphones { margin-top: 2px !important }
.iphone { display: inline-flex; flex-direction: column; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--soil); text-decoration: none; line-height: 1.05 }
.iphone small { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.iphone:hover { color: var(--berry) }
.ilinks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto !important; padding-top: 4px }
.ilinks a { color: var(--soil); font-weight: 700; text-decoration-color: var(--wattle); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere }
.isrc { font-size: 12.5px !important; color: var(--muted) }
.isrc a { color: var(--muted) }
/* emergencies: the red block, big numbers first */
.iemergency { background: var(--berry); color: #fff; border-radius: 24px; padding: clamp(22px, 4vw, 40px) }
.iemergency .isechead { border-bottom-color: rgba(255, 255, 255, .35) }
.iemergency .isechead p { font-size: 18px; font-weight: 600 }
.iemergency .iitem { background: rgba(0, 0, 0, .16); color: #fff }
.iemergency .iitem.big { background: #fff; color: var(--soil) }
.iemergency .ibig { white-space: nowrap; font-size: clamp(46px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.05em; line-height: .9; color: var(--berry); text-decoration: none }
.iemergency .iphone, .iemergency .ilinks a, .iemergency .isrc a { color: #fff }
.iemergency .iphone small, .iemergency .isrc { color: rgba(255, 255, 255, .75) }
.iemergency .big .ilinks a { color: var(--soil) }
/* about, privacy, contact */
.isite { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px 48px; border-top: 2px solid var(--soil); padding-top: 24px; scroll-margin-top: calc(var(--bar) + 16px) }
.isite h2, .icontact h2 { margin: 8px 0 0; font-size: clamp(30px, 3.6vw, 46px); line-height: .95; font-weight: 800; letter-spacing: -.045em }
.iprose p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; max-width: 66ch }
.icontact { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px 48px; background: var(--wattle); border-radius: 24px; padding: clamp(22px, 4vw, 40px); scroll-margin-top: calc(var(--bar) + 16px) }
.icontact .eyebrow { color: var(--soil) }
.icontact .formcard { margin: 0 }
.inbox { grid-column: 1 / -1; background: var(--card); border-radius: 16px; padding: 18px 20px }
.inbox h3 { margin: 0; font-size: 22px; font-weight: 800 }
.imsg { border-top: 1px solid var(--line); padding: 12px 0 }
.imsg p { margin: 4px 0; white-space: pre-line }
.imeta { font-size: 13px; color: var(--muted) }
@media (max-width: 860px) {
  .ihero-grid, .isite, .icontact { grid-template-columns: minmax(0, 1fr) }
}

/* ================= home: the Today card, the links strip, the directory's one search ================= */
#todayDate { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.todayfacts { list-style: none; margin: 14px 0 6px; padding: 0; display: flex; flex-direction: column }
.todayfacts li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line) }
.todayfacts li:first-child { border-top: 2px solid var(--soil) }
.todayfacts .tk { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.todayfacts .tv { font-weight: 700; font-size: 16px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px }
.todayfacts .tv small { font-weight: 500; color: var(--muted); font-size: 13px }
.todayfacts .tv a { color: var(--berry) }
.todayfacts .bin { gap: 5px; font-weight: 700 }
.todayfacts .firedot { width: 10px; height: 10px; border-radius: 50%; background: #8C8885; display: inline-block }
.todayfacts .firedot.moderate { background: #3E9B4F } .todayfacts .firedot.high { background: #E0A800 }
.todayfacts .firedot.extreme { background: #E06A1B } .todayfacts .firedot.catastrophic { background: #B42318 }
.todayfacts li.tfire.extreme .tv, .todayfacts li.tfire.catastrophic .tv { color: var(--fire-cat) }
.wchead.sub { margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--soil) }
.wchead.sub h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.03em }
.wchead.sub + .glance { margin-top: 4px }
.morelinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px }
.mlink {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: 18px; text-decoration: none;
  background: var(--soil); color: var(--mist); min-height: 128px; transition: transform .15s
}
.mlink:nth-child(2) { background: var(--berry) } .mlink:nth-child(3) { background: var(--fern) }
.mlink:nth-child(4) { background: var(--wattle); color: var(--soil) }
.mlink .eyebrow { color: var(--wattle) } .mlink:nth-child(4) .eyebrow { color: var(--soil) }
.mlink strong { font-size: 19px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em }
.mlink strong::after { content: ' →' }
.mlink:hover { transform: translateY(-2px) }
.asof { margin: 4px 0 0; font-size: 13px }
.dirq { margin: 0; font-size: 15px }
.dfix { margin-top: 6px; font-size: 12.5px; color: var(--muted); align-self: flex-start }
@media (max-width: 760px) {
  .dcard .dfix { grid-column: 1 / -1 }
  /* the 3D map starts as a short strip on phones; it opens full size when asked */
  .mapwrap:has(> .poster:not([hidden])) { height: 260px }
}

/* add to calendar, on each What's on tile */
.tlinks { position: relative }
.tcal { display: inline-flex; align-items: center; gap: 6px }
.tcal::before { content: ''; width: 13px; height: 13px; border: 2px solid currentColor; border-radius: 3px; border-top-width: 4px; box-sizing: border-box }
.calmenu {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(100% + 6px); display: flex; flex-direction: column;
  background: var(--soil); color: var(--mist); border-radius: 14px; padding: 6px; box-shadow: 0 14px 30px rgba(0, 0, 0, .3)
}
.calmenu a { color: var(--mist) !important; text-decoration: none !important; font-weight: 700; padding: 11px 12px; border-radius: 9px }
.calmenu a:hover, .calmenu a:focus-visible { background: rgba(238, 237, 231, .12) }
.calmenu .calwhen { padding: 6px 12px 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: rgba(238, 237, 231, .7) }

/* "Something wrong?" report links on every card (js/report.js) */
.dfix { font-weight: 400; text-decoration: underline; text-underline-offset: 2px }
.vlinks a.dfix, .fxlinks a.dfix, .tlinks a.dfix { color: inherit !important; opacity: .7; font-size: 12.5px; font-weight: 400 }
.csrc .dfix { align-self: flex-start; margin-top: 2px }
.isrc .dfix { margin: 0 0 0 auto; padding-left: 12px; white-space: nowrap }
.isrc { display: flex; flex-wrap: wrap; gap: 4px }

/* ================= AWARD-WINNING MAP-FIRST HERO STAGE & CARTOGRAPHER'S HUD ================= */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px
}

.brandtag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(244, 196, 48, .16);
  color: var(--wattle);
  border: 1px solid rgba(244, 196, 48, .35);
  margin-left: 2px
}

.sunbadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wattle)
}

.sundot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wattle);
  box-shadow: 0 0 8px rgba(244, 196, 48, .85)
}

/* Full-bleed opening 3D map hero */
.stage-hero {
  position: relative;
  width: 100%;
  background: var(--fern-deep);
  border-bottom: 3px solid var(--soil)
}

.stage-mapwrap.mapwrap {
  margin-top: 0;
  border-radius: 0;
  height: clamp(580px, calc(100dvh - var(--bar, 112px)), 980px);
  width: 100%;
  background: #E6E9E4
}

/* Floating Cartographer's HUD grid */
.hud-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  padding: clamp(14px, 2vw, 24px) var(--gutter-r) clamp(14px, 2vw, 22px) var(--gutter-l);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  max-width: 1640px;
  margin: 0 auto
}

.hud-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap
}

.hud-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: auto
}

.hud-card,
.hud-trails,
.stage-dock,
.hud-bottom .toolstack > * {
  pointer-events: auto
}

.hud-card {
  background: rgba(238, 237, 231, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 2px solid var(--soil);
  border-radius: 22px;
  color: var(--soil);
  box-shadow: 0 18px 42px rgba(18, 32, 26, .22), 0 3px 0 var(--soil);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), opacity .22s ease
}

.hud-card-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px
}

.hud-collapse {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1.5px solid var(--soil);
  background: var(--card);
  color: var(--soil);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex: none;
  transition: background .15s
}

.hud-collapse:hover {
  background: var(--wattle)
}

/* Top-Left Intro & Omnibox Search Card */
.stage-intro {
  width: min(460px, 100%);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.stage-intro.collapsed {
  width: auto;
  padding: 12px 16px
}

.stage-intro.collapsed .intro-body {
  display: none
}

.stage-intro #h-welcome {
  margin: 2px 0 0;
  font-size: clamp(36px, 4.2vw, 54px);
  line-height: .9;
  font-weight: 800;
  letter-spacing: -.045em;
  color: var(--soil);
  max-width: none
}

.stage-intro .greeting {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--berry)
}

.stage-intro .stand {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.42;
  color: var(--muted);
  max-width: 44ch
}

.stage-find {
  margin: 12px 0 0;
  display: flex;
  gap: 8px;
  align-items: stretch
}

.find-input-wrap {
  position: relative;
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  align-items: center
}

.find-icon {
  position: absolute;
  left: 14px;
  color: var(--muted);
  pointer-events: none
}

.stage-find input {
  width: 100%;
  min-height: 46px;
  padding: 0 36px 0 40px;
  border: 2px solid var(--soil);
  border-radius: 14px;
  background: var(--card);
  font-size: 15px;
  font-weight: 500
}

.find-clear {
  position: absolute;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: var(--mist);
  color: var(--soil);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center
}

.find-clear:hover {
  background: var(--wattle)
}

.stage-find .btn {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 14px
}

/* Interactive 3D Map Category Pills */
.stage-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px
}

.stage-chip {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1.5px solid var(--soil);
  background: rgba(255, 255, 255, .72);
  color: var(--soil);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, transform .12s
}

.stage-chip:hover {
  background: var(--card);
  transform: translateY(-1px)
}

.stage-chip[aria-pressed="true"] {
  background: var(--fern);
  border-color: var(--fern);
  color: var(--mist)
}

.stage-chip.open-pill[aria-pressed="true"] {
  background: var(--wattle);
  border-color: var(--soil);
  color: var(--soil)
}

.stage-chip b {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  opacity: .8
}

.stage-chip .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--open)
}

/* Live Mini-Drawer of Matching Places inside Stage Card */
.stage-results {
  margin-top: 10px;
  background: var(--card);
  border: 1.5px solid var(--soil);
  border-radius: 14px;
  overflow: hidden
}

.stage-results-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--mist);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase
}

.stage-results-list {
  max-height: 195px;
  overflow-y: auto;
  display: flex;
  flex-direction: column
}

.stage-res-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .12s
}

.stage-res-item:last-child {
  border-bottom: 0
}

.stage-res-item:hover {
  background: rgba(244, 196, 48, .22)
}

.stage-res-item strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2
}

.stage-res-item small {
  display: block;
  font-size: 12px;
  color: var(--muted)
}

.stage-res-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--mist);
  border: 1px solid var(--line);
  white-space: nowrap
}

.stage-res-tag.open {
  background: rgba(31, 122, 69, .12);
  color: var(--open);
  border-color: rgba(31, 122, 69, .3)
}

.stage-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(27, 21, 19, .14)
}

.stage-meta-row .lightkey {
  margin: 0
}

.lightkey i.ev {
  width: 8px;
  height: 8px;
  background: var(--berry);
  box-shadow: 0 0 8px 2px rgba(181, 23, 63, .75)
}

.lightkey i.pk,
.pk-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF1493;
  box-shadow: 0 0 8px 2px rgba(255, 20, 147, .9)
}

.pk-dot {
  margin-right: 6px;
  vertical-align: middle
}

.dinfo {
  margin: 4px 0 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted)
}

.railcard.credit .eyebrow {
  display: flex;
  align-items: center;
  color: #FF2A9D
}

.railcard .credit-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted)
}

.credit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px
}

.btn.pink-cta {
  background: #FF1493;
  color: #fff;
  border-color: rgba(255, 255, 255, .35)
}

.stage-dir-link {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fern)
}

.stage-dir-link:hover {
  color: var(--berry);
  text-decoration: underline
}

/* Top-Right Live Town Pulse Card */
.stage-pulse.weekcard {
  width: min(370px, 100%);
  max-width: 370px;
  flex: none;
  padding: 18px 20px;
  background: rgba(238, 237, 231, .94)
}

.stage-pulse.collapsed {
  width: auto;
  padding: 12px 16px
}

.stage-pulse.collapsed .pulse-body {
  display: none
}

.pulse-head-right {
  display: flex;
  align-items: center;
  gap: 10px
}

.pulse-date {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted)
}

.stage-pulse .wchead h2 {
  font-size: 26px;
  line-height: 1
}

.stage-pulse .todayfacts {
  margin: 10px 0 12px
}

.stage-pulse .glance {
  margin: 8px 0 12px
}

.stage-pulse .gl {
  padding: 8px 0
}

.stage-pulse .gl strong {
  font-size: 15.5px
}

.pulse-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.pulse-actions .btn {
  flex: 1;
  min-height: 40px;
  font-size: 14px;
  padding: 0 12px
}

/* When Place Inspector is open on the right, tuck the Pulse card neatly so they never collide */
.stage-mapwrap:has(#place:not([hidden])) .stage-pulse {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px) scale(.97)
}

/* Bottom-Left Guided 3D Camera Trails */
.hud-trails {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  background: rgba(238, 237, 231, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid var(--soil);
  border-radius: 18px;
  padding: 7px 10px;
  box-shadow: 0 12px 28px rgba(18, 32, 26, .2), 0 3px 0 var(--soil)
}

.trails-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--fern);
  padding: 0 6px
}

.trail-pill {
  border: 1.5px solid var(--soil);
  border-radius: 12px;
  background: var(--card);
  color: var(--soil);
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, transform .12s
}

.trail-pill small {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted)
}

.trail-pill:hover {
  background: var(--wattle);
  transform: translateY(-1px)
}

.trail-pill.active {
  background: var(--fern);
  border-color: var(--fern);
  color: var(--mist)
}

.trail-pill.active small {
  color: var(--wattle)
}

.trail-pill.reset {
  background: transparent;
  border-style: dashed
}

.trail-pill.reset:hover {
  background: var(--card);
  border-style: solid
}

/* Bottom-Center Floating Quick-Jump Section Dock */
.stage-dock {
  display: flex;
  align-items: stretch;
  gap: 6px;
  background: rgba(18, 57, 43, .95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid var(--soil);
  border-radius: 18px;
  padding: 6px;
  box-shadow: 0 14px 32px rgba(18, 32, 26, .28), 0 3px 0 var(--soil)
}

.dock-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--mist);
  transition: background .15s, transform .12s
}

.dock-item:hover {
  background: rgba(238, 237, 231, .14);
  color: var(--wattle);
  transform: translateY(-1px)
}

.dock-kicker {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  color: #B9C8BF;
  text-transform: uppercase
}

.dock-item strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px
}

.dock-item b {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(244, 196, 48, .22);
  color: var(--wattle)
}

.dock-item b:empty {
  display: none
}

/* Cinema / Pure Map Toggle Button */
.tool.cinema-btn {
  width: auto;
  padding: 0 14px;
  gap: 7px;
  display: inline-flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 700
}

.tool.cinema-btn[aria-pressed="true"] {
  background: var(--soil);
  color: var(--wattle);
  border-color: var(--soil)
}

html.map-cinema .stage-intro,
html.map-cinema .stage-pulse,
html.map-cinema .stage-dock {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.97)
}

/* 3D Map Pin Filtering States */
.pin.light.dim {
  opacity: .18 !important;
  transform: scale(.85)
}

.pin.light.match b {
  box-shadow: 0 0 22px 7px rgba(244, 196, 48, .98);
  transform: scale(1.18)
}

.pin.light.showlabel button {
  opacity: 1;
  pointer-events: auto
}

/* Enriched Slide-Over Place Inspector */
.stage-mapwrap .place {
  top: clamp(14px, 2vw, 24px);
  right: var(--gutter-r);
  width: min(400px, calc(100% - 32px));
  max-height: calc(100% - 110px);
  border: 2px solid var(--soil);
  border-radius: 22px;
  background: rgba(238, 237, 231, .96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 46px rgba(18, 32, 26, .28), 0 4px 0 var(--soil);
  z-index: 6
}

.place-head-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-right: 48px
}

.p-open-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase
}

.p-open-badge.open {
  background: rgba(31, 122, 69, .15);
  color: var(--open);
  border: 1px solid rgba(31, 122, 69, .35)
}

.p-open-badge.closed {
  background: rgba(154, 46, 46, .12);
  color: var(--closed);
  border: 1px solid rgba(154, 46, 46, .3)
}

.p-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.p-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 11px;
  border: 1.5px solid var(--soil);
  background: var(--card);
  color: var(--soil);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s
}

.p-act-btn:hover {
  background: var(--wattle);
  color: var(--soil)
}

.p-act-btn.primary {
  background: var(--fern);
  border-color: var(--fern);
  color: var(--mist)
}

.p-act-btn.primary:hover {
  background: var(--berry);
  border-color: var(--berry);
  color: #fff
}

.p-events {
  border-top: 1.5px solid var(--soil);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.p-events-title {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--berry)
}

.p-event-card {
  background: var(--card);
  border: 1.5px solid var(--soil);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px
}

.p-event-card strong {
  font-size: 15px;
  font-weight: 700
}

.p-event-card span {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted)
}

.p-neighbors {
  border-top: 1.5px solid var(--soil);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.p-neighbors-title {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fern)
}

.p-neighbor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.p-neighbor-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1.5px solid var(--soil);
  background: var(--card);
  color: var(--soil);
  text-align: left;
  cursor: pointer;
  transition: background .15s
}

.p-neighbor-btn:hover {
  background: var(--wattle)
}

.p-neighbor-btn small {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase
}

.p-neighbor-btn strong {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

/* Below-the-fold category strip */
.kinds-block {
  background: var(--card);
  border: 2px solid var(--soil);
  border-radius: 22px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 4px 0 var(--soil)
}

.kinds-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px
}

.kinds-header h2 {
  margin: 4px 0 0;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: .96;
  font-weight: 800;
  letter-spacing: -.04em
}

.kinds-header .note {
  margin: 0;
  max-width: 42ch
}

/* Floating Back-to-3D-Map Pill */
.back-to-map-fab {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 2px solid var(--soil);
  background: var(--wattle);
  color: var(--soil);
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 12px 28px rgba(18, 32, 26, .3), 0 3px 0 var(--soil);
  cursor: pointer;
  transition: transform .18s, background .15s
}

.back-to-map-fab:hover {
  background: var(--fern);
  color: var(--mist);
  transform: translateY(-2px)
}

.load-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--wattle)
}

/* Highlighted directory card when jumped to from the 3D map */
.dcard.flash-target {
  outline: 3px solid var(--berry);
  box-shadow: 0 0 0 6px rgba(244, 196, 48, .55);
  transition: box-shadow .3s
}

/* Desktop default: hide mobile-only map launcher & mobile map topbar */
.mobile-map-topbar,
.mobile-map-promo {
  display: none
}

@media (max-width: 960px) and (min-width: 821px) {
  .stage-pulse.weekcard {
    display: none
  }
  .hide-sm {
    display: none
  }
}

/* ================= MOBILE OPT-IN 3D MAP EXPERIENCE (<= 820px) =================
   On mobile, the 3D map is NOT forced at the forefront. Visitors land on a fast,
   edge-to-edge, native-scrolling town guide with an inviting 3D feature card. */
@media (max-width: 820px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }

  .hide-sm {
    display: none !important;
  }

  /* ---- 1. Default Mobile State: 3D Map Closed, Community Guide at the Forefront ---- */
  .stage-hero:not(.mobile-map-open) {
    background: var(--fern);
    border-bottom: 2px solid var(--soil);
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 0 20px 0;
    margin: 0;
    overflow: visible;
  }

  .stage-hero:not(.mobile-map-open) .stage-mapwrap.mapwrap {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .stage-hero:not(.mobile-map-open) #scene,
  .stage-hero:not(.mobile-map-open) #labels,
  .stage-hero:not(.mobile-map-open) #zoomhint,
  .stage-hero:not(.mobile-map-open) #loading,
  .stage-hero:not(.mobile-map-open) #mapPoster,
  .stage-hero:not(.mobile-map-open) #place,
  .stage-hero:not(.mobile-map-open) .hud-trails,
  .stage-hero:not(.mobile-map-open) .hud-bottom .toolstack,
  .stage-hero:not(.mobile-map-open) .mobile-map-topbar,
  .stage-hero:not(.mobile-map-open) #toggleIntroBtn,
  .stage-hero:not(.mobile-map-open) #lightkey,
  .stage-hero:not(.mobile-map-open) .stage-pulse {
    display: none !important;
  }

  .stage-hero:not(.mobile-map-open) .hud-layer {
    position: static !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 14px var(--gutter-r) 0 var(--gutter-l) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .stage-hero:not(.mobile-map-open) .hud-top {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
  }

  .stage-hero:not(.mobile-map-open) .stage-intro {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 18px 16px;
    border-radius: 18px;
    background: var(--mist);
    border: 2px solid var(--soil);
    box-shadow: 0 4px 16px rgba(18, 32, 26, 0.16), 0 2px 0 var(--soil);
  }

  .stage-hero:not(.mobile-map-open) .stage-intro .intro-body {
    display: block !important;
  }

  .stage-hero:not(.mobile-map-open) .stage-intro #h-welcome {
    font-size: clamp(30px, 8.2vw, 38px);
    line-height: 0.95;
    letter-spacing: -0.04em;
    margin: 4px 0 0;
  }

  .stage-hero:not(.mobile-map-open) .stage-intro .greeting {
    font-size: 15.5px;
    margin-top: 6px;
  }

  .stage-hero:not(.mobile-map-open) .stage-intro .stand {
    display: block !important;
    font-size: 13.5px;
    line-height: 1.4;
    margin-top: 6px;
    color: var(--muted);
  }

  .stage-hero:not(.mobile-map-open) .stage-find {
    margin-top: 12px;
    gap: 8px;
    display: flex;
  }

  .stage-hero:not(.mobile-map-open) .stage-find input {
    min-height: 46px;
    font-size: 14.5px;
    border-radius: 12px;
  }

  .stage-hero:not(.mobile-map-open) .stage-find .btn {
    min-height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14.5px;
  }

  .stage-hero:not(.mobile-map-open) .stage-filter-bar {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    margin-top: 10px;
    padding-bottom: 2px;
  }

  .stage-hero:not(.mobile-map-open) .stage-filter-bar::-webkit-scrollbar {
    display: none;
  }

  .stage-hero:not(.mobile-map-open) .stage-chip {
    flex: none;
    font-size: 12px;
    padding: 5px 10px;
  }

  /* Refined 3D Map Opt-in Feature Card */
  .stage-hero:not(.mobile-map-open) .mobile-map-promo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
    padding: 12px;
    border-radius: 16px;
    border: 2px solid var(--soil);
    background: var(--fern-deep);
    color: var(--mist);
    box-shadow: 0 4px 14px rgba(18, 32, 26, 0.22);
  }

  .mobile-map-preview {
    position: relative;
    width: 100%;
    height: 125px;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid rgba(244, 196, 48, 0.35);
  }

  .mobile-map-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .mobile-map-beacon {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(18, 32, 26, 0.88);
    color: var(--wattle);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  .mobile-map-beacon i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wattle);
    box-shadow: 0 0 6px var(--wattle);
  }

  .mobile-map-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mobile-map-info .eyebrow {
    font-size: 10.5px;
    color: var(--wattle);
  }

  .mobile-map-info strong {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    line-height: 1.2;
  }

  .mobile-map-info p {
    margin: 0 0 4px 0;
    font-size: 12.5px;
    line-height: 1.35;
    color: #C9D3CC;
  }

  .mobile-map-open-btn {
    width: 100%;
    min-height: 44px;
    font-size: 14.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    box-shadow: 0 2px 0 var(--soil);
  }

  /* Clean 3-Pill Section Dock on Mobile */
  .stage-hero:not(.mobile-map-open) .hud-bottom {
    margin-top: 0;
    width: 100%;
  }

  .stage-hero:not(.mobile-map-open) .stage-dock {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 5px;
    border-radius: 14px;
    background: var(--fern-deep);
    border: 2px solid var(--soil);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .stage-hero:not(.mobile-map-open) .dock-item {
    padding: 7px 4px;
    align-items: center;
    text-align: center;
    border-radius: 10px;
  }

  .stage-hero:not(.mobile-map-open) .dock-kicker {
    font-size: 8.5px;
  }

  .stage-hero:not(.mobile-map-open) .dock-item strong {
    font-size: 12.5px;
  }

  /* ---- 2. Active Mobile 3D Map State: Opened by User Choice (.mobile-map-open) ---- */
  body.mobile-map-active {
    overflow: hidden;
  }

  .stage-hero.mobile-map-open {
    position: fixed;
    inset: 0;
    z-index: 90;
    height: 100dvh;
    width: 100vw;
    border-bottom: 0;
    background: #E6E9E4;
  }

  .stage-hero.mobile-map-open .stage-mapwrap.mapwrap {
    height: 100dvh;
    width: 100%;
    border-radius: 0;
  }

  .stage-hero.mobile-map-open .mobile-map-topbar {
    position: absolute;
    top: max(12px, env(safe-area-inset-top, 12px));
    left: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    pointer-events: none;
  }

  .mobile-map-back,
  .mobile-map-search-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    border: 2px solid var(--soil);
    font-family: var(--display);
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(18, 32, 26, 0.25), 0 2px 0 var(--soil);
  }

  .mobile-map-back {
    background: var(--soil);
    color: var(--wattle);
  }

  .mobile-map-search-btn {
    background: rgba(238, 237, 231, 0.95);
    color: var(--soil);
  }

  .mobile-map-search-btn[aria-expanded="true"] {
    background: var(--wattle);
    color: var(--soil);
  }

  .stage-hero.mobile-map-open .mobile-map-promo,
  .stage-hero.mobile-map-open .stage-pulse,
  .stage-hero.mobile-map-open .stage-dock,
  .stage-hero.mobile-map-open .cinema-btn,
  .stage-hero.mobile-map-open .hint {
    display: none !important;
  }

  .stage-hero.mobile-map-open .hud-layer {
    padding: calc(max(12px, env(safe-area-inset-top, 12px)) + 52px) 12px max(14px, env(safe-area-inset-bottom, 14px)) 12px;
  }

  .stage-hero.mobile-map-open:not(.mobile-search-open) .stage-intro {
    display: none !important;
  }

  .stage-hero.mobile-map-open.mobile-search-open .stage-intro {
    width: 100%;
    padding: 12px 14px;
  }

  .stage-hero.mobile-map-open.mobile-search-open .stage-intro .hud-card-bar,
  .stage-hero.mobile-map-open.mobile-search-open .stage-intro #h-welcome,
  .stage-hero.mobile-map-open.mobile-search-open .stage-intro .greeting,
  .stage-hero.mobile-map-open.mobile-search-open .stage-intro .stand,
  .stage-hero.mobile-map-open.mobile-search-open .stage-intro .stage-meta-row {
    display: none !important;
  }

  .stage-hero.mobile-map-open.mobile-search-open .stage-find {
    margin-top: 0;
  }

  .stage-hero.mobile-map-open .hud-bottom {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .stage-hero.mobile-map-open .hud-trails {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: calc(100vw - 180px);
    padding: 6px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .stage-hero.mobile-map-open .hud-trails::-webkit-scrollbar {
    display: none;
  }

  .stage-hero.mobile-map-open .trails-label {
    display: none;
  }

  .stage-hero.mobile-map-open .trail-pill {
    flex: none;
    white-space: nowrap;
    padding: 6px 10px;
    font-size: 12px;
  }

  .stage-hero.mobile-map-open .trail-pill small {
    display: none;
  }

  .stage-hero.mobile-map-open .stage-mapwrap .place {
    top: auto;
    bottom: max(12px, env(safe-area-inset-bottom, 12px));
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 58dvh;
    z-index: 15;
  }
}

/* =====================================================================
   UX & VISUAL SCALE REFINEMENT — Scannable Typography, Scaled Cards & Categorized Links List
   ===================================================================== */

:root {
  --bar: 102px;
}

/* --- Scaled-down Map Hero & Subpage Hero --- */
.mapstage-wrap {
  height: clamp(440px, 64vh, 640px);
}

.mapstage-hud {
  padding: 16px;
}

.hud-brand {
  padding: 16px 20px;
  max-width: 390px;
  border-radius: 16px;
}

.hud-brand h1 {
  margin: 6px 0 0;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: .94;
}

.hud-brand .greeting {
  margin: 8px 0 0;
  font-size: 15px;
}

.hud-brand .stand {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.4;
}

.hud-week {
  padding: 14px 16px;
  width: min(300px, 100%);
  border-radius: 16px;
}

.hud-week .wchead h2 {
  font-size: 18px;
}

.hud-find {
  padding: 8px 10px 8px 16px;
}

.hud-find input {
  min-height: 36px;
  font-size: 14.5px;
}

.hud-find .btn {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13.5px;
}

.subhero .herogrid,
.rhero-grid,
.ihero-grid {
  padding-top: clamp(24px, 3.5vw, 38px);
  padding-bottom: clamp(52px, 6vw, 76px);
  gap: 20px 32px;
}

#h-rec,
#h-info,
.subhero #h-welcome {
  margin: 8px 0 0;
  font-size: clamp(34px, 4.8vw, 54px);
  line-height: .94;
}

.rhero .stand,
.ihero .stand,
.subhero .stand {
  font-size: clamp(15px, 1.35vw, 17px);
  max-width: 54ch;
}

/* --- Directory Toolbar, Search Input & Community Subchips --- */
.dirsearch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dir-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 230px;
  max-width: 320px;
}

.dir-search-icon {
  position: absolute;
  left: 12px;
  color: var(--muted);
  pointer-events: none;
}

.dir-input-wrap input {
  width: 100%;
  min-height: 38px;
  padding: 0 30px 0 34px;
  border-radius: 999px;
  border: 1.5px solid var(--soil);
  background: var(--card);
  font-size: 13.5px;
}

.dir-input-wrap input::-webkit-search-cancel-button {
  display: none;
}

.dir-input-clear {
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  background: rgba(238, 237, 231, 0.18);
  color: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.dirsearch button#dirOpen {
  min-height: 38px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 999px;
  border: 1.5px solid var(--soil);
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}

.dir-subchips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(18, 57, 43, 0.25);
  border: 1px solid rgba(238, 237, 231, 0.12);
}

.dir-subchip {
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(238, 237, 231, 0.2);
  background: rgba(12, 42, 31, 0.5);
  color: var(--mist);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.dir-subchip b {
  font-family: var(--mono);
  font-size: 10.5px;
  opacity: .8;
}

/* --- Scaled-down Cards View (.dcard, .ccard, .iitem, .pcard, .vcard2) --- */
.dircat h3 {
  font-size: clamp(20px, 2.2vw, 26px);
}

.dgrid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr));
  gap: 10px;
}

.dcard {
  padding: 13px 15px 12px;
  border-radius: 12px;
  gap: 3px;
}

.dkind {
  font-size: 11px;
}

.dcard h4 {
  font-size: 16.5px;
  line-height: 1.18;
}

.dinfo {
  font-size: 12.5px;
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.daddr,
.dphone {
  font-size: 13px;
}

.dstat {
  font-size: 11.5px;
  margin-top: 2px;
}

.dacts {
  margin-top: 6px;
  gap: 6px;
}

.dmap,
.dacts a {
  font-size: 11.5px;
  padding: 4px 10px;
  min-height: 28px;
}

/* Show all N in category button */
.dircat-more {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.dircat-more-btn {
  width: 100%;
  max-width: 400px;
  min-height: 36px;
  font-size: 12.5px;
}

/* Scaled-down Club Cards (.ccard) & Info Items (.iitem) */
.cgrid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

.ccard {
  padding: 16px 18px 14px;
  border-radius: 14px;
  gap: 8px;
}

.ccard h3 {
  font-size: 19px;
  line-height: 1.1;
}

.ctag {
  font-size: 13.5px;
  line-height: 1.4;
}

.cfacts {
  font-size: 12.5px;
  gap: 6px 12px;
}

.cjoin {
  padding: 10px 12px;
  font-size: 13px;
}

.igrid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 245px), 1fr));
  gap: 10px;
}

.iitem {
  padding: 14px 16px;
  border-radius: 13px;
  gap: 6px;
}

.iitem h3 {
  font-size: 17px;
}

.iitem p {
  font-size: 13.5px;
  line-height: 1.4;
}

.iphone {
  font-size: 19px;
}

.pcard,
.vcard2 {
  padding: 16px 18px;
  border-radius: 14px;
}

/* ---------- List view (the Cards | List switch on the directory, the Rec and Local info)
   One panel per category with hairline rows. Left: the name, its status in words, one full line of detail.
   Right: the phone number, at most two actions, and further links folded under "More". */
.viewswitch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1.5px solid var(--soil) }
.viewswitch button {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: transparent; color: inherit; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer
}
.viewswitch button[aria-pressed="true"] { background: var(--soil); color: var(--mist) }
#clubGrid.is-list-mode { display: flex; flex-direction: column; gap: 32px }
.dircat.is-list + .dircat.is-list { margin-top: 28px }
.lpanel { position: relative; margin-top: 12px; padding: 4px 6px; border-radius: 22px; background: var(--card) }
.llist { list-style: none; margin: 0; padding: 0 }
.lrow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px;
  padding: 14px 16px; border-top: 1px solid var(--line); border-radius: 14px
}
.llist > .lrow:first-child { border-top-color: transparent }
.lrow-main { min-width: 0 }
.lrow-title { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 16.5px; line-height: 1.25 }
.lrow-title strong { font-weight: 800; letter-spacing: -.015em }
.lrow-detail { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere }
.lrow-note { display: block; margin-top: 2px }
.lbadge {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase
}
.lstatus { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap }
.ldot { width: 8px; height: 8px; border-radius: 50%; background: #B8B4AC; flex: none }
.lstatus.open { color: var(--open); font-weight: 600 }
.lstatus.open .ldot { background: var(--open) }
.lstatus.closed .ldot { background: var(--closed) }
.ldot.out { background: var(--wattle) }
.lrow-side { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 16px }
.lphone {
  display: inline-flex; align-items: center; min-height: 40px; color: inherit; text-decoration: none; white-space: nowrap;
  font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums
}
.lphone.big { font-size: clamp(28px, 3vw, 36px); font-weight: 800; letter-spacing: -.04em }
.lacts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px }
.lact, .lmore summary {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: inherit; font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer
}
.lact-ext { margin-left: 5px; font-size: .92em }
.lrow-report { display: inline-block }
.lrow-note + .lrow-report { display: block; margin: 2px 0 0 }
.lrow-report .dfix { font-size: 12.5px }
.lmore { position: relative }
.lmore summary { list-style: none }
.lmore summary::-webkit-details-marker { display: none }
.lmore summary::after { content: '▾'; margin-left: 6px; font-size: 11px; opacity: .7 }
.lmore[open] summary::after { content: '▴' }
.lmore-list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border-radius: 16px; background: var(--card); box-shadow: 0 18px 40px rgba(0, 0, 0, .25)
}
.lmore-list a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; color: inherit; text-decoration: none; font-size: 14px; font-weight: 600; white-space: normal }
.lmore-list a:hover { text-decoration: underline; text-underline-offset: 3px }
.lsub-head {
  margin: 0; padding: 16px 16px 6px; display: flex; align-items: baseline; gap: 8px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted)
}
.lpanel > .lsub-head:first-child { border-top: 0 }
.lsub-head span { font-weight: 500; opacity: .75 }
@media (max-width: 720px) {
  .lrow { grid-template-columns: minmax(0, 1fr); padding: 14px 12px }
  .lrow-side { justify-content: flex-start }
  .lact, .lmore summary, .lphone, .viewswitch button { min-height: 44px }
  .lact, .lmore summary { padding: 0 12px }
  .lmore-list a { min-height: 44px }
  .lpanel { padding: 4px 2px }
  .lmore-list { right: auto; left: 0 }
}

/* --- Recreation & Local Info Search Bars --- */
.rclub-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rclub-input-wrap {
  min-width: 240px;
}

.info-search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.info-input-wrap {
  flex: 1 1 280px;
  max-width: 480px;
}