:root {
  --ink: #3f392f;
  --muted: #756e61;
  --paper: #fffaf0;
  --paper-deep: #f7edda;
  --line: #e5d4bb;
  --terracotta: #bd654f;
  --terracotta-dark: #874536;
  --moss: #667b52;
  --moss-dark: #42583b;
  --honey: #e7b75d;
  --wood: #8f654d;
  --shadow: 0 1.2rem 3rem rgba(78, 55, 39, .13);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: #dbe7d2;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

a {
  color: var(--terracotta-dark);
  text-decoration-thickness: .09em;
  text-underline-offset: .18em;
}

a:hover { color: var(--moss-dark); }

a:focus-visible {
  outline: 3px solid var(--honey);
  outline-offset: 3px;
  border-radius: .3rem;
}

/* Bericht- en Gemeentebladlinks zijn bewust nooit onderstreept. */
body .dated-message-list a,
body .publication-list a,
body .dated-message-list a:hover,
body .publication-list a:hover,
body .dated-message-list a:focus,
body .publication-list a:focus {
  text-decoration: none !important;
}

/* Brede schermen: alle titels beginnen in dezelfde kolom. */
body .dated-message-list > article {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  align-items: baseline;
  min-width: 0;
}

body .dated-message-list .message-meta {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: .25em;
  overflow: hidden;
  white-space: nowrap;
}

body .dated-message-list .message-date {
  flex: 0 0 auto;
}

body .dated-message-list .message-source {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .dated-message-list .message-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Gemeenteblad blijft een compacte datum-met-titelregel. */
body .publication-list > article {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: .25em;
  overflow: hidden;
  white-space: nowrap;
}

body .publication-list .message-date { flex: 0 0 auto; }

body .publication-list .message-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.case-law-list {
  display: grid;
  gap: .55rem;
}

.case-law-list > article {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem;
}

.case-law-list .case-message { min-width: 0; }
.case-law-list details { display: inline; }
.case-law-list summary { cursor: pointer; color: var(--terracotta-dark); }
.case-law-list details > a { display: block; margin-top: .35rem; }

.place-scene {
  --orbit-x: 14%;
  --orbit-y: 35%;
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(180deg, #b9dce3 0%, #e8d9bd 59%, #d6c0a2 100%);
  transition: background 1.2s ease;
}

.place-scene.is-night {
  background: linear-gradient(180deg, #1d2942 0%, #465471 58%, #7c7780 100%);
}

body.is-stargazing { overflow: hidden; }
body.is-stargazing .place-scene { background: linear-gradient(180deg, #1d2942 0%, #465471 58%, #7c7780 100%); }

.scene-stars {
  position: absolute;
  inset: 0 0 24%;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.is-night .scene-stars { opacity: 1; }
body.is-stargazing .scene-stars { opacity: 1; }

.scene-stars i {
  position: absolute;
  top: var(--star-y);
  left: var(--star-x);
  width: var(--star-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff8df;
  box-shadow: 0 0 calc(var(--star-size) * 2.2) #fff8df;
  opacity: var(--star-opacity);
  transform: translate(-50%, -50%);
}

.shooting-star {
  position: absolute;
  top: var(--shooting-star-y);
  left: var(--shooting-star-x);
  width: clamp(4rem, 10vw, 8rem);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 223, .25) 35%, #fffdf2 100%);
  box-shadow: 0 0 .4rem rgba(255, 248, 223, .9);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--shooting-star-angle));
  transform-origin: right center;
  animation: shooting-star 1.1s ease-out forwards;
}

@keyframes shooting-star {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--shooting-star-angle)) translateX(0) scaleX(.2);
  }
  12% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--shooting-star-angle)) translateX(var(--shooting-star-travel)) scaleX(.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shooting-star { animation: none; }
}

.scene-sun,
.scene-moon {
  position: absolute;
  left: var(--orbit-x);
  bottom: var(--orbit-y);
  width: clamp(3.4rem, 7vw, 5.8rem);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  transition: left 2s ease-out, bottom 2s ease-out, opacity .8s ease;
}

.scene-sun {
  background: #fff2a8;
  box-shadow: 0 0 3.5rem 1rem rgba(255, 231, 139, .58);
  opacity: 1;
}

.is-night .scene-sun { opacity: 0; }
body.is-stargazing .scene-sun { opacity: 0; }

.scene-moon {
  --moon-shadow: 20%;
  overflow: hidden;
  background: #fff7df;
  box-shadow: 0 0 2.4rem .45rem rgba(255, 247, 223, .34);
  opacity: 0;
}

.scene-moon::after {
  position: absolute;
  inset: -2px;
  content: "";
  border-radius: inherit;
  background: #465471;
  transform: translateX(var(--moon-shadow));
}

.is-night .scene-moon { opacity: 1; }
body.is-stargazing .scene-moon { opacity: 1; }
body.is-stargazing .scene-cloud { opacity: .15; }
body.is-stargazing .scene-hills--far { background: #4e6358; }
body.is-stargazing .scene-hills--near { background: #364e45; }

.scene-cloud {
  position: absolute;
  width: clamp(6rem, 13vw, 10rem);
  height: clamp(1.4rem, 2.7vw, 2.2rem);
  border-radius: 999px;
  background: rgba(255, 252, 240, .76);
  filter: blur(.1px);
  animation: cloud-drift 34s ease-in-out infinite alternate;
}

.scene-cloud::before,
.scene-cloud::after {
  position: absolute;
  bottom: 0;
  content: "";
  aspect-ratio: 1;
  border-radius: 50%;
  background: inherit;
}

.scene-cloud::before { left: 19%; width: 44%; }
.scene-cloud::after { right: 14%; width: 34%; }
.scene-cloud--one { top: 12%; left: 8%; }
.scene-cloud--two { top: 25%; right: 8%; animation-delay: -17s; }
.is-night .scene-cloud { opacity: .15; }

.scene-hills {
  position: absolute;
  right: -8%;
  bottom: 17%;
  left: -8%;
  height: 23%;
  border-radius: 50% 50% 0 0 / 75% 75% 0 0;
}

.scene-hills--far {
  bottom: 20%;
  height: 19%;
  background: #a9c7a0;
  transform: rotate(-2deg);
}

.scene-hills--near {
  left: -19%;
  bottom: 11%;
  height: 25%;
  background: #88aa7b;
  transform: rotate(3deg);
}

.is-night .scene-hills--far { background: #4e6358; }
.is-night .scene-hills--near { background: #364e45; }

.scene-ground {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 20%;
  background: #729664;
  box-shadow: inset 0 .7rem 1.8rem rgba(70, 94, 61, .12);
}

.scene-ground::after {
  position: absolute;
  inset: 34% 0 0;
  content: "";
  opacity: .46;
  background: repeating-linear-gradient(103deg, transparent 0 2.5rem, rgba(255, 247, 220, .13) 2.6rem 2.72rem);
}

.is-night .scene-ground { background: #294339; }

.scene-home {
  position: absolute;
  z-index: 2;
  bottom: 64%;
  left: max(3%, calc(50% - 42rem));
  width: clamp(5.4rem, 10vw, 8rem);
  height: clamp(4rem, 7vw, 5.6rem);
  border-radius: .18rem .18rem .35rem .35rem;
  background: #e1a78a;
  box-shadow: inset -.7rem 0 rgba(143, 101, 77, .08), 0 .65rem 1.2rem rgba(43, 49, 35, .18);
}

.scene-home__roof {
  position: absolute;
  bottom: 100%;
  left: -13%;
  width: 126%;
  height: clamp(2.7rem, 5vw, 4rem);
  background: #875a4b;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.scene-home__chimney {
  position: absolute;
  z-index: 2;
  bottom: 118%;
  right: 18%;
  width: 13%;
  height: 62%;
  border-radius: .15rem .15rem 0 0;
  background: #765044;
}

.scene-home__window {
  position: absolute;
  top: 25%;
  left: 14%;
  width: 24%;
  aspect-ratio: 1;
  border: .18rem solid #8f654d;
  background: #ffe7a3;
  box-shadow: 0 0 1.2rem rgba(255, 218, 120, .5);
}

.scene-home__window::before,
.scene-home__window::after {
  position: absolute;
  content: "";
  background: rgba(143, 101, 77, .62);
}

.scene-home__window::before { top: 48%; right: 0; left: 0; height: 1px; }
.scene-home__window::after { top: 0; bottom: 0; left: 48%; width: 1px; }

.scene-home__door {
  position: absolute;
  right: 17%;
  bottom: 0;
  width: 25%;
  height: 58%;
  border-radius: .5rem .5rem 0 0;
  background: #795448;
}

.scene-home__door::after {
  position: absolute;
  top: 52%;
  left: 16%;
  width: .22rem;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: #efc76b;
}

.scene-smoke {
  position: absolute;
  z-index: 3;
  right: 19%;
  bottom: 151%;
  width: .85rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 250, 238, .5);
  animation: smoke 6s ease-out infinite;
}

.scene-smoke--two { animation-delay: -3s; }

.scene-tree {
  position: absolute;
  z-index: 3;
  right: max(4%, calc(50% - 44rem));
  bottom: 62%;
  width: clamp(4.8rem, 9vw, 7rem);
  height: clamp(7.5rem, 14vw, 10.5rem);
}

.scene-tree::before {
  position: absolute;
  bottom: 0;
  left: 43%;
  width: 16%;
  height: 51%;
  content: "";
  border-radius: .3rem;
  background: #765746;
}

.scene-tree i,
.scene-tree b,
.scene-tree::after {
  position: absolute;
  content: "";
  border-radius: 48% 52% 43% 57%;
  background: #63835b;
}

.scene-tree i { top: 4%; left: 1%; width: 72%; height: 58%; }
.scene-tree b { top: 17%; right: 0; width: 68%; height: 54%; background: #76956a; }
.scene-tree::after { top: 0; left: 29%; width: 59%; height: 55%; background: #6f9165; }
.is-night .scene-tree i,
.is-night .scene-tree b,
.is-night .scene-tree::after { filter: brightness(.55) saturate(.75); }

.scene-dog {
  position: absolute;
  z-index: 4;
  right: max(14%, calc(50% - 34rem));
  bottom: 61%;
  width: clamp(2.8rem, 5vw, 4rem);
  height: clamp(1.1rem, 2vw, 1.55rem);
  border-radius: 999px;
  background: #a77a5f;
}

.scene-dog::before {
  position: absolute;
  bottom: 45%;
  left: -18%;
  width: 42%;
  height: 112%;
  content: "";
  border: .2rem solid #a77a5f;
  border-right: 0;
  border-bottom: 0;
  border-radius: 100% 0 0;
  transform: rotate(-28deg);
}

.scene-dog i {
  position: absolute;
  right: -18%;
  bottom: 15%;
  width: 39%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #a77a5f;
}

.scene-dog b {
  position: absolute;
  right: 0;
  bottom: 62%;
  width: 25%;
  height: 55%;
  border-radius: 90% 10%;
  background: #7e594a;
  transform: rotate(18deg);
}

.scene-lighthouse {
  position: absolute;
  z-index: 1;
  bottom: 64%;
  width: 2.4rem;
  height: 8.5rem;
  clip-path: polygon(35% 0, 65% 0, 83% 100%, 17% 100%);
  background: #f8ead4;
  opacity: .9;
}

.scene-lighthouse::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1.2rem;
  content: "";
  background: #7d554b;
}

.scene-lighthouse i {
  position: absolute;
  top: 28%;
  right: 0;
  left: 0;
  height: 1rem;
  background: #c86658;
}

.scene-lighthouse b {
  position: absolute;
  top: -.75rem;
  right: .2rem;
  left: .2rem;
  height: .9rem;
  background: #8b5c4c;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.scene-lighthouse--red { left: 6%; background: #c86658; }
.scene-lighthouse--red i { background: #f8ead4; }
.scene-lighthouse--white { right: 7%; transform: scale(.78); transform-origin: bottom; }

.site-shell {
  position: relative;
  z-index: 5;
  width: min(1000px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(16px, 2.5vw, 28px) 0 64px;
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 14px;
  align-items: stretch;
}

.place-hero {
  position: relative;
  display: flex;
  min-height: 244px;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(255, 250, 240, .72);
  border-radius: 2rem 2rem 1.35rem 1.35rem;
  background:
    linear-gradient(115deg, rgba(111, 74, 58, .95), rgba(154, 91, 68, .91)),
    var(--wood);
  color: #fffaf0;
  box-shadow: var(--shadow);
}

.place-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .12;
  background: repeating-linear-gradient(8deg, transparent 0 16px, rgba(255, 255, 255, .22) 17px 18px);
}

.place-hero::after {
  position: absolute;
  right: clamp(20px, 7vw, 72px);
  bottom: -2.1rem;
  width: 8rem;
  height: 5rem;
  content: "";
  border-radius: 50% 50% 0 0;
  background: rgba(255, 242, 208, .08);
  box-shadow: 0 0 0 1.1rem rgba(255, 242, 208, .045), 0 0 0 2.2rem rgba(255, 242, 208, .025);
}

.brand,
.welcome,
.place-hero h1,
.place-meta { position: relative; z-index: 1; }

.brand {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: auto;
  color: #fffaf0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
}

.brand span { color: #ffd889; }
.brand:hover { color: #fffaf0; }

.welcome {
  margin: 1rem 0 .2rem;
  color: #f8dcb6;
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.place-hero h1 {
  max-width: 14ch;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.place-meta {
  margin: .65rem 0 0;
  color: rgba(255, 250, 240, .83);
  font-size: 1rem;
}

.place-meta a {
  color: inherit;
  font-weight: 700;
  text-decoration-color: rgba(255, 250, 240, .45);
}

.place-meta a:hover { color: #ffd889; }

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.panel {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid rgba(229, 212, 187, .86);
  border-radius: 1.25rem;
  background: rgba(255, 250, 240, .94);
  box-shadow: 0 .5rem 1.8rem rgba(78, 55, 39, .08);
  backdrop-filter: blur(10px);
}

.panel::after {
  position: absolute;
  right: -1.5rem;
  bottom: -1.8rem;
  width: 5rem;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(189, 101, 79, .09);
  border-radius: 50%;
}

.panel--wide { grid-column: 1 / -1; }

.panel--weather {
  display: flex;
  align-items: center;
  padding-block: 14px;
  background: rgba(248, 238, 217, .95);
}

.panel--iss-current {
  padding-block: 14px;
  background: rgba(238, 244, 250, .95);
}

.panel--iss-current p { margin: 0; }

.panel h2 {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1rem;
  color: #4c4337;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.panel-icon {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: #f2dfc3;
  color: var(--terracotta-dark);
  font-family: Georgia, serif;
  font-size: 1rem;
}

.panel p { margin: 0; }

.place-search {
  display: grid;
  gap: .55rem;
}

.place-search label {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 650;
}

.place-search__controls {
  display: flex;
  gap: .6rem;
}

.place-search input {
  min-width: 0;
  flex: 1;
  padding: .72rem .85rem;
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: #fffdf7;
  color: var(--ink);
  font: inherit;
}

.place-search input:focus-visible {
  outline: 3px solid rgba(231, 183, 93, .55);
  outline-offset: 1px;
  border-color: var(--terracotta);
}

.place-search button {
  padding: .72rem 1rem;
  border: 0;
  border-radius: .65rem;
  background: var(--terracotta);
  color: #fffaf0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.place-search button:hover { background: var(--terracotta-dark); }

.place-search__message {
  min-height: 1.5em;
  color: var(--terracotta-dark);
  font-size: .88rem;
}

.place-search__hint {
  color: var(--muted);
  font-size: .88rem;
}

.bird-radar {
  margin: 1.5rem 0 0;
}

.bird-radar figcaption {
  display: grid;
  gap: .1rem;
  margin-bottom: .65rem;
  color: var(--muted);
  font-size: .9rem;
  text-align: left;
}

.bird-radar figcaption strong { color: var(--ink); }

.bird-radar-update {
  display: block;
  width: 100%;
  height: 1.5em;
  border: 0;
}

.bird-radar img {
  display: block;
  width: min(100%, 700px);
  height: auto;
}

.empty {
  color: var(--muted);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

.weather-reading {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: .55rem;
}

.weather-reading span {
  padding: .45rem .72rem;
  border: 1px solid rgba(143, 101, 77, .12);
  border-radius: 999px;
  background: rgba(255, 250, 240, .72);
  color: #665a49;
  font-size: .9rem;
  font-weight: 650;
}

.weather-reading .temperature {
  border-color: transparent;
  background: var(--terracotta);
  color: #fffaf0;
}
.weather-reading .sun-times {
  flex-basis: 100%;
  margin: 0;
  color: var(--ink);
  font-size: .93rem;
  font-weight: 650;
}

.panel--air-quality { display: flex; align-items: center; padding-block: 14px; background: rgba(242, 247, 239, .96); }
.air-quality-summary { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: .55rem; color: #665a49; font-size: .95rem; }
.air-quality-summary__label { font-weight: 650; }
.air-quality-badge { display: inline-flex; align-items: center; min-height: 2.1rem; padding: .35rem .78rem; border-radius: 999px; color: #263427; font-size: .92rem; }
.air-quality-badge--zeer-goed { background: #a8dfae; }
.air-quality-badge--goed { background: #d8eb9e; }
.air-quality-badge--redelijk { background: #f4dc80; }
.air-quality-badge--matig { background: #f6b86f; }
.air-quality-badge--slecht { background: #e98773; color: #4b201a; }
.air-quality-badge--zeer-slecht { background: #b86991; color: #fffaf0; }
.air-quality-details { min-width: 0; }
.air-quality-details summary { width: fit-content; color: var(--terracotta-dark); cursor: pointer; font-size: .91rem; font-weight: 700; }
.air-quality-details:not([open]) summary::before { margin-right: .55rem; color: var(--muted); content: "|"; font-weight: 400; }
.air-quality-details summary:hover { text-decoration: underline; }
.air-quality-details[open] { width: 100%; flex: 1 0 100%; padding-top: .7rem; border-top: 1px solid rgba(143, 101, 77, .18); }
.air-quality-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .5rem; padding: .8rem 0 .2rem; margin: 0; }
.air-quality-values__row { padding: .55rem .65rem; border: 1px solid rgba(143, 101, 77, .12); border-radius: .65rem; background: rgba(255, 250, 240, .72); }
.air-quality-values dt { color: var(--muted); font-size: .8rem; font-weight: 700; }
.air-quality-values dd { margin: .1rem 0 0; color: #4c4337; font-size: .92rem; font-weight: 700; }
.air-quality-note { margin-top: .7rem !important; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.air-quality-source { color: var(--muted); font-size: .9rem; }
.air-quality-source a { color: var(--terracotta-dark); font-weight: 700; }
.air-quality-subheading { margin: .8rem 0 .25rem; color: #4c4337; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; }
.air-quality-details > .air-quality-subheading:first-of-type { margin-top: .1rem; }
.air-quality-stations { margin-top: 1rem; padding-top: .2rem; border-top: 1px solid rgba(143, 101, 77, .18); }
.air-quality-station-table-wrap { max-width: 100%; overflow-x: auto; margin-top: .65rem; }
.air-quality-station-table { width: 100%; min-width: 46rem; border-collapse: collapse; color: #4c4337; font-size: .84rem; }
.air-quality-station-table th, .air-quality-station-table td { padding: .55rem .6rem; border-bottom: 1px solid rgba(143, 101, 77, .15); text-align: right; white-space: nowrap; }
.air-quality-station-table thead th { color: var(--muted); font-size: .75rem; letter-spacing: .02em; }
.air-quality-station-table th:first-child { width: 42%; text-align: left; white-space: normal; }
.air-quality-station-table tbody th { font-weight: 700; }
.air-quality-station-meta { display: block; margin-top: .1rem; color: var(--muted); font-size: .74rem; font-weight: 400; }

.stargazing-toggle {
  position: fixed;
  z-index: 10;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2rem);
  padding: .65rem 1rem;
  border: 1px solid rgba(255, 250, 240, .75);
  border-radius: 999px;
  background: rgba(29, 41, 66, .82);
  color: #fffaf0;
  box-shadow: 0 .45rem 1.3rem rgba(17, 24, 40, .28);
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
}

.stargazing-toggle:hover { background: rgba(29, 41, 66, .96); }
.stargazing-toggle:focus-visible { outline: 3px solid #fff2a8; outline-offset: 3px; }
.site-shell { transition: opacity .45s ease, transform .45s ease, visibility .45s step-end; }
body.is-stargazing .site-shell { visibility: hidden; opacity: 0; transform: translateY(.75rem); }

.precipitation-radar-panel { overflow: hidden; }

.precipitation-radar-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem 1.5rem;
  margin-bottom: 1rem;
}

.precipitation-radar-heading h2 { margin: 0; }

.precipitation-radar-heading p,
.precipitation-radar-source {
  color: var(--muted);
  font-size: .88rem;
}

.precipitation-radar-now {
  width: min(100%, 620px);
  padding: .8rem;
  margin: 0 auto 1.2rem;
  border: 1px solid rgba(189, 101, 79, .22);
  border-radius: 1rem;
  background: rgba(255, 250, 240, .64);
}

.precipitation-radar-now figcaption,
.precipitation-radar-frame figcaption {
  display: grid;
  gap: .05rem;
  margin: 0 0 .45rem;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
}

.precipitation-radar-now figcaption strong,
.precipitation-radar-frame figcaption strong { color: var(--ink); }

.precipitation-radar-now img,
.precipitation-radar-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .55rem;
  background: var(--paper);
}

.precipitation-radar-forecast {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
}

.precipitation-radar-frame {
  min-width: 0;
  padding: .65rem;
  margin: 0;
  border: 1px solid rgba(143, 101, 77, .14);
  border-radius: .8rem;
  background: rgba(255, 250, 240, .46);
}

.precipitation-radar-source {
  margin-top: 1rem !important;
  text-align: center;
}

.link-list,
.nearby-list {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.link-list li { border-bottom: 1px dashed var(--line); }
.link-list li:last-child { border-bottom: 0; }

.history-list {
  display: grid;
  gap: .55rem;
}

.history-item {
  margin: 0;
  line-height: 1.5;
}

.history-item a {
  color: var(--terracotta-dark);
}

.link-list a,
.plain-item {
  position: relative;
  display: block;
  overflow: hidden;
  padding: .72rem 1.65rem .72rem .1rem;
  color: #50483c;
  font-weight: 640;
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
}

.link-list a::after {
  position: absolute;
  top: .72rem;
  right: .1rem;
  color: #bc8c6f;
  content: "→";
  transition: transform .18s ease;
}

.link-list a:hover { color: var(--terracotta-dark); }
.link-list a:hover::after { transform: translateX(.2rem); }

.link-list small {
  display: block;
  margin-top: .1rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
}

.nearby-list {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: .65rem;
}

.panel--nearby {
  display: flex;
  align-items: center;
  padding: 16px 18px;
}

.panel--nearby .nearby-list {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .38rem .5rem;
}

.panel--nearby .nearby-list a {
  display: flex;
  min-height: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: .45rem;
  padding: .42rem .58rem;
  border-radius: .65rem;
}

.panel--nearby .nearby-list strong {
  overflow: hidden;
  font-size: .91rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel--nearby .nearby-list small {
  flex: 0 0 auto;
  font-size: .7rem;
  white-space: nowrap;
}

.nearby-list a {
  display: block;
  min-height: 100%;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: .8rem;
  background: rgba(247, 237, 218, .7);
  color: var(--ink);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.nearby-list a:hover {
  border-color: #cda98d;
  background: #fff7e8;
  transform: translateY(-2px);
}

.nearby-list strong {
  display: block;
  color: var(--terracotta-dark);
  font-family: Georgia, "Times New Roman", serif;
}

.nearby-list small { color: var(--muted); }

.region-places-panel {
  align-items: flex-start;
}

.region-navigation { width: 100%; }

.region-navigation-title {
  margin: 0 0 .55rem;
  color: var(--terracotta-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: .92rem;
  font-weight: 700;
}

.region-place-list li { min-width: 0; }

.region-navigation-more { margin-top: .5rem; }

.region-navigation-more summary {
  width: max-content;
  padding: .2rem .4rem;
  color: var(--terracotta-dark);
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: .86rem;
  font-weight: 700;
  list-style: none;
}

.region-navigation-more summary::-webkit-details-marker { display: none; }
.region-navigation-more summary:hover { color: var(--terracotta); }

.region-place-list--more { margin-top: .5rem; }

.aggregate-list {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.aggregate-item {
  display: grid;
  grid-template-columns: minmax(6.9rem, .3fr) minmax(8.5rem, .48fr) minmax(0, 1.22fr);
  gap: .65rem;
  align-items: center;
  padding: .42rem 0;
  border-bottom: 1px dashed var(--line);
}

.aggregate-item:last-child { border-bottom: 0; }

.aggregate-date,
.aggregate-place {
  display: block;
  min-width: 0;
  padding: .38rem .58rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .65rem;
  background: rgba(247, 237, 218, .7);
  color: var(--terracotta-dark);
  font-family: Georgia, "Times New Roman", serif;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aggregate-date {
  text-align: center;
}

.aggregate-date--empty {
  color: transparent;
}

.aggregate-place:hover {
  border-color: #cda98d;
  background: #fff7e8;
}

.aggregate-target {
  position: relative;
  display: block;
  min-width: 0;
  padding: .45rem 1.55rem .45rem .1rem;
  overflow: hidden;
  color: #50483c;
  font-weight: 640;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.aggregate-target::after {
  position: absolute;
  top: .45rem;
  right: .1rem;
  color: #bc8c6f;
  content: "→";
}

.aggregate-target small {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 500;
}

.aggregate-target--plain { padding-right: .1rem; }

.site-footer {
  margin-top: 20px;
  padding: 1.5rem clamp(1rem, 3vw, 2rem);
  border: 1px solid rgba(255, 250, 240, .72);
  border-radius: 1.5rem;
  background: rgba(255, 250, 240, .82);
  color: #655d51;
  font-size: .85rem;
  line-height: 1.6;
  backdrop-filter: blur(8px);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.site-footer h2 {
  margin: 0 0 .45rem;
  color: var(--ink);
  font-size: 1rem;
}

.site-footer p { margin: 0 0 .7rem; }

.footer-blog-list { margin: 0; padding: 0; list-style: none; }
.footer-blog-list li + li { margin-top: .45rem; }
.footer-blog-list a { display: block; }
.footer-blog-list time { color: var(--muted); font-size: .78rem; }

.blog-entry { font-size: 1rem; line-height: 1.7; }
.blog-entry p { margin: 0 0 1rem; }
.blog-entry p:last-child { margin-bottom: 0; }
.blog-entry a { color: var(--terracotta-dark); text-underline-offset: .2em; }
.blog-list { margin: 0; padding: 0; list-style: none; }
.blog-list li + li { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(101, 93, 81, .18); }
.blog-list a { color: var(--terracotta-dark); font-weight: 700; }
.blog-list time { display: block; margin-top: .2rem; color: var(--muted); font-size: .85rem; }

.site-footer a {
  color: var(--terracotta-dark);
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}

.site-footer a:focus-visible,
.site-footer summary:focus-visible {
  outline: 2px solid var(--terracotta-dark);
  outline-offset: 4px;
}

.footer-bottom {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(101, 93, 81, .2);
}

.site-footer summary { cursor: pointer; color: var(--ink); }
.site-footer details[open] summary { margin-bottom: .7rem; }
.site-footer .footer-copyright { margin: 1rem 0 0; font-size: .8rem; }
.footer-copyright span { display: block; }

@keyframes cloud-drift {
  from { transform: translateX(-3vw); }
  to { transform: translateX(8vw); }
}

@keyframes smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(.65); }
  25% { opacity: .7; }
  100% { opacity: 0; transform: translate(1.8rem, -3.2rem) scale(1.7); }
}

@media (max-width: 760px) {
  body .dated-message-list > article {
    grid-template-columns: minmax(0, 1fr);
  }

  body .dated-message-list .message-title {
    display: block;
  }

  .site-shell {
    width: min(100% - 22px, 1000px);
    padding-top: 11px;
  }

  .place-hero { border-radius: 1.25rem; }

  .intro-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .place-hero {
    min-height: 210px;
  }

  .aggregate-item {
    grid-template-columns: minmax(6rem, .3fr) minmax(6.5rem, .42fr) minmax(0, 1.28fr);
    gap: .4rem;
  }

  .aggregate-date { font-size: .82rem; }

  .content-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
  }

  .panel,
  .panel--wide {
    grid-column: auto;
    border-radius: 1rem;
  }

  .panel--weather { display: block; }
  .panel--weather h2 { min-width: 0; margin-bottom: 1rem; }
  .precipitation-radar-heading { display: block; }
  .precipitation-radar-heading p { margin-top: .35rem; }
  .precipitation-radar-now { width: 100%; }
  .precipitation-radar-forecast {
    grid-template-columns: none;
    grid-auto-columns: minmax(82%, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
    padding-bottom: .45rem;
    scroll-snap-type: x mandatory;
  }
  .precipitation-radar-frame { scroll-snap-align: start; }
  .brand { margin-bottom: 2rem; }

  .footer-columns { grid-template-columns: 1fr; gap: 1rem; }
  .site-footer { padding: 1.25rem; }

  .panel--nearby .nearby-list {
    grid-template-columns: 1fr;
  }

  .scene-home { left: 2%; transform: scale(.76); transform-origin: bottom left; }
  .scene-tree { right: 2%; transform: scale(.72); transform-origin: bottom right; }
  .scene-dog { right: 22%; transform: scale(.72); transform-origin: bottom; }
  .scene-lighthouse { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-cloud,
  .scene-smoke { animation: none; }

  .scene-sun,
  .scene-moon,
  .place-scene,
  .scene-stars,
  .nearby-list a,
  .link-list a::after { transition: none; }
}