/* ============================================================
   town.css — the generated town pages (tools/build-towns.mjs).
   Sage for mountain towns, ocean for Gulf towns.
   ============================================================ */
.town { --tone: var(--color-sage); }
.town--ocean { --tone: var(--color-ocean); }

.town-hero { position: relative; min-height: 78vh; min-height: 78svh; display: flex; align-items: flex-end; color: #fff; isolation: isolate; overflow: hidden; padding: calc(var(--nav-height) + 4rem) 0 clamp(2.5rem, 7vh, 5rem); }
.town-hero__bg { position: absolute; inset: 0; z-index: -2; background-image: var(--hero-lg, var(--hero)); background-size: cover; background-position: center; transform: scale(1.04); animation: heroPan 18s ease-out forwards; }
.town-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,24,22,0.45) 0%, rgba(20,24,22,0.1) 40%, rgba(20,24,22,0.82) 100%); }
.town-hero__crumbs { font-size: 0.9rem; color: rgba(255,255,255,0.85); margin-bottom: 1.4rem; }
.town-hero__crumbs a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4); }
.town-hero__kicker { font-size: 1rem; font-weight: 500; color: rgba(255,255,255,0.9); margin-bottom: 0.4rem; }
.town-hero__title { font-size: clamp(3rem, 8vw, 6.5rem); color: #fff; line-height: 0.95; margin-bottom: 1rem; text-shadow: 0 2px 30px rgba(0,0,0,0.35); }
.town-hero__sub { font-size: 1.15rem; color: rgba(255,255,255,0.9); max-width: 34rem; margin-bottom: 1.8rem; }
.town-hero__cta { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.town-hero__link { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.5); padding-bottom: 2px; }

.town-intro { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.town-intro__title { margin-bottom: 1.25rem; }
.town-intro__ways { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.75rem; }
.town-intro__ways .meet__way { flex: 1 1 14rem; padding: 1rem 1.2rem; border: 1px solid var(--color-rule); border-radius: var(--radius); background: var(--color-warm-white); font-size: 1.1rem; font-weight: 500; color: var(--color-ink); transition: border-color var(--transition-fast); }
.town-intro__ways .meet__way span { display: block; font-size: 0.82rem; font-weight: 400; color: var(--color-ink-40); }
.town-intro__ways .meet__way:hover { border-color: var(--tone); }
.town-intro__side { display: grid; gap: 1.2rem; }
.town-intro__side .light--town { margin-top: 0; }
.town-intro__map { margin: 0; background: var(--color-warm-white); border: 1px solid var(--color-rule); border-radius: var(--radius-lg); padding: 1.25rem; }
.town-map { width: 100%; height: auto; display: block; overflow: visible; }
.town-map__state { fill: var(--color-cream); stroke: var(--color-ink-20); stroke-width: 1.4; stroke-linejoin: round; }
.town-map__gulf { fill: var(--color-ocean-pale); }
.town-map__state-name { fill: var(--color-ink-20); font-family: var(--font-display); font-size: 30px; text-anchor: middle; }
.town-map__pin { fill: var(--color-ink-20); }
.town-map__pin.is-here { fill: var(--tone); stroke: #fff; stroke-width: 3; }
.town-map__label { font-family: var(--font-body); font-size: 30px; font-weight: 600; fill: var(--color-ink); paint-order: stroke; stroke: var(--color-warm-white); stroke-width: 6px; }

.town-nearby { background: var(--color-warm-white); border-top: 1px solid var(--color-rule); }
.town-nearby h2 { margin-bottom: 1.5rem; }
.town-nearby__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; list-style: none; padding: 0; }
.town-nearby__list a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3rem; padding: 1.1rem; aspect-ratio: 4 / 3.2; border-radius: var(--radius-lg); overflow: hidden; color: #fff; isolation: isolate; }
.town-nearby__list img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease-out-expo); }
.town-nearby__list a::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(16,30,28,0.85)); }
.town-nearby__list a:hover img { transform: scale(1.07); }
.town-nearby__list b { font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; line-height: 1.05; }
.town-nearby__list span { font-size: 0.82rem; line-height: 1.45; color: rgba(255,255,255,0.88); }
.town-nearby__other a { color: var(--tone); border-bottom: 1px solid currentColor; }

@media (max-width: 860px) { .town-intro { grid-template-columns: 1fr; } }

@media (max-width: 760px) { .town-hero__bg { background-image: var(--hero-sm, var(--hero)); } }

/* Homes for sale here, dealt into the hero (listings.js fills it) */
.town-hero__inner { position: relative; }
.town-peek { position: absolute; right: var(--gutter, 1.5rem); bottom: 0; display: flex; align-items: flex-end; gap: 0.75rem; perspective: 900px; }
@media (min-width: 861px) { .town-hero__inner:has(.town-peek:not([hidden])) .town-hero__title { max-width: calc(100% - 25rem); } }
.town-peek__home { --color-ink: #1e1c18; --color-ink-70: #3a372f; width: 12.5rem; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.96); color: var(--color-ink); box-shadow: 0 24px 50px -20px rgba(0,0,0,0.6); animation: peekDeal 0.9s var(--ease-out-expo) both; animation-delay: calc(0.6s + var(--i) * 0.14s); transform-origin: 50% 120%; transition: transform 0.4s var(--ease-out-expo); }
.town-peek__home:hover { transform: translateY(-6px); }
.town-peek__home img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.town-peek__home span { display: block; padding: 0.55rem 0.75rem 0.7rem; font-size: 0.8rem; color: var(--color-ink-70); line-height: 1.35; }
.town-peek__home b { display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--color-ink); }
.town-peek__all { align-self: center; color: #fff; font-size: 0.95rem; border-bottom: 1px solid rgba(255,255,255,0.5); white-space: nowrap; animation: fadeUp 0.6s var(--ease) both; animation-delay: 1.2s; }
.town-peek__note { position: absolute; right: 0; top: -1.9rem; font-size: 0.78rem; color: rgba(255,255,255,0.85); white-space: nowrap; }
@keyframes peekDeal { from { opacity: 0; transform: translateY(60px) rotateX(-30deg) rotate(calc((var(--i) - 1) * 7deg)); } }
@media (max-width: 1100px) { .town-peek__home:nth-child(n+3) { display: none; } }
@media (max-width: 860px) {
  .town-peek { position: relative; right: auto; margin-top: 3rem; overflow-x: auto; overflow-y: visible; padding-bottom: 0.25rem; scrollbar-width: none; }
  .town-peek__home { flex: 0 0 10.5rem; width: 10.5rem; }
  .town-peek__home:nth-child(n+3) { display: block; }
  .town-peek__note { position: absolute; left: 0; right: auto; top: -1.6rem; }
  .town-peek { overflow: visible; flex-wrap: wrap; }
  .town-peek__all { flex-basis: 100%; align-self: flex-start; margin-top: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) { .town-peek__home, .town-peek__all { animation: none; } }

/* Amanda's answers about this town (tools/build-towns.mjs QA). On the public
   site the whole block hides until she has written at least one (main.js). */
.town-qa { margin: 0.4rem 0 2.2rem; }
.town-qa[hidden] { display: none; }
.town-qa__kicker { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246,239,220,0.7); margin: 0 0 0.6rem; }
.town-qa__list { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem clamp(1.5rem, 3vw, 3rem); }
.town-qa__item { border-top: 1px solid rgba(246,239,220,0.3); padding-top: 1rem; }
.town-qa__item dt { font-family: var(--font-display); font-style: italic; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.2; color: #fff; }
.town-qa__item dd { margin: 0.6rem 0 0; font-size: 0.98rem; line-height: 1.65; color: rgba(246,239,220,0.88); }
.town-qa__item dd .todo--draft { display: inline-block; margin: 0 0.4rem 0.3rem 0; color: #f6efdc; background: rgba(246,239,220,0.12); border-color: rgba(246,239,220,0.6); }
.ask-band__lead { margin: 0 0 0.9rem; color: rgba(246,239,220,0.85); }
@media (max-width: 900px) { .town-qa__list { grid-template-columns: 1fr; gap: 0.6rem; } }

/* What a weekend here looks like: the region's scenes in a rail that runs off
   the right edge (tools/build-towns.mjs SCENES) */
.scenes { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); background: var(--color-warm-white); }
.scenes__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.scenes__head h2 { max-width: 16ch; }
.scenes__note { font-size: 0.85rem; color: var(--color-ink-40); max-width: 24rem; margin: 0; }
.scenes__rail { --rail-inset: max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter))); display: flex; gap: 0.9rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-inset); padding: 0.25rem var(--rail-inset) 1rem; scrollbar-width: none; }
.scenes__rail::-webkit-scrollbar { display: none; }
.scenes__rail:focus-visible { outline: 3px solid var(--color-ocean); outline-offset: -3px; }
.scenes__tile { flex: 0 0 clamp(240px, 26vw, 360px); aspect-ratio: 4 / 3; margin: 0; scroll-snap-align: start; border-radius: 10px; overflow: hidden; background: var(--color-sage-pale); position: relative; }
.scenes__tile:first-child { flex-basis: clamp(300px, 38vw, 540px); }
.scenes__link { display: block; height: 100%; }
.scenes__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.scenes__tile:hover img { transform: scale(1.04); }
.scenes__link:focus-visible { outline: 3px solid var(--color-brand); outline-offset: -3px; border-radius: 10px; }
/* On a wide screen the scenes sit in a mosaic that fits the page, as on the guides (owner,
   2026-11-01: the rail running off the right edge read as a fault); the rail stays on phones,
   where a thumb expects to scroll sideways. */
@media (min-width: 761px) {
  .scenes__rail { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-auto-rows: clamp(150px, 16vw, 230px); overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
  .scenes__tile, .scenes__tile:first-child { flex: none; aspect-ratio: auto; min-width: 0; }
  .scenes__tile:first-child { grid-row: span 2; }
  .scenes__tile:nth-child(4):last-child { grid-column: 2 / span 2; }
  .scenes__tile:nth-child(6) { grid-column: 1 / -1; } /* a sixth scene runs the full width under the mosaic */
}
@media (max-width: 640px) { .scenes__tile, .scenes__tile:first-child { flex-basis: 76vw; } }
@media (prefers-reduced-motion: reduce) { .scenes__tile img { transition: none; } }

/* Friday after work, under the drive (Listings.From.friday) */
.town-hero__friday { font-size: 0.92rem; color: rgba(255,255,255,0.88); max-width: 36rem; margin: -0.9rem 0 1.6rem; text-shadow: 0 1px 10px rgba(0,0,0,0.45); }
.town-hero__friday[hidden] { display: none; }

/* THE TOWN'S OWN SKY (round three): listings.js paintSkyOn puts the town's
   sky on the hero from the town's own sunrise and sunset; the wash over the
   photo follows it, the stars come out after dark, and the kicker says what
   the light is doing there now. */
.town-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); }
.town-hero[data-sky="dawn"]::after { opacity: 1; mix-blend-mode: soft-light; background: linear-gradient(180deg, rgba(255, 196, 160, 0.6), rgba(255, 220, 200, 0.15) 55%, transparent); }
.town-hero[data-sky="golden"]::after { opacity: 1; mix-blend-mode: soft-light; background: linear-gradient(180deg, rgba(255, 176, 90, 0.6), rgba(255, 150, 70, 0.3) 50%, rgba(140, 70, 20, 0.35)); }
.town-hero[data-sky="dusk"]::after { opacity: 1; mix-blend-mode: multiply; background: linear-gradient(180deg, rgba(60, 56, 110, 0.5), rgba(30, 36, 70, 0.52)); }
.town-hero[data-sky="night"]::after { opacity: 1; mix-blend-mode: multiply; background: linear-gradient(180deg, rgba(12, 24, 48, 0.62), rgba(10, 26, 38, 0.56)); }
.town-hero__bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); background-image: radial-gradient(1.5px 1.5px at 80% 18%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 95% 24%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 89% 43%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 68% 3%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 60% 17%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 84% 5%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 21% 9%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 48% 32%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 32% 26%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 70% 8%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 74% 17%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 2% 48%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 28% 28%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 36% 13%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 99% 26%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 21% 6%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 18% 41%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 17% 10%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 1% 2%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 27% 15%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 22% 12%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 38% 22%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 26% 36%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 87% 42%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 27% 13%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 89% 14%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 50% 21%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 3% 25%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 54% 12%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 19% 18%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 9% 23%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 39% 40%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 76% 2%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 77% 45%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 91% 23%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 9% 21%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 46% 21%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 62% 46%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 41% 13%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1.5px 1.5px at 62% 32%, rgba(255,255,255,0.95) 50%, transparent 52%), radial-gradient(1px 1px at 91% 13%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 8% 18%, rgba(255,255,255,0.7) 50%, transparent 52%), radial-gradient(1px 1px at 3% 24%, rgba(255,255,255,0.7) 50%, transparent 52%); }
.town-hero[data-sky="night"] .town-hero__bg::after { opacity: 1; }
.town-hero[data-sky="dusk"] .town-hero__bg::after { opacity: 0.4; }
.town-hero[data-sky="night"] .town-hero__title, .town-hero[data-sky="dusk"] .town-hero__title { text-shadow: 0 0 34px rgba(255, 222, 170, 0.45), 0 2px 30px rgba(0, 0, 0, 0.4); }
.town-hero__now { color: rgba(255, 255, 255, 0.78); }

/* the town's hero photograph drifts, slowly, the whole time the page is open */
.town-hero__bg { animation: townDrift 32s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes townDrift { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .town-hero__bg { animation: none; } }