/* jaron's hub: pastel isometric diorama.
   Flat iso shapes (three tones per material, no gradients), pastel map colours,
   chunky "slab" tiles and buttons. Mobile-first. */

:root {
  --bg: #f3eee2;
  --surface: #fbf8f1;
  --ink: #34403b;
  --muted: #6f7a73;
  --line: #e2dccd;
  --slab: #d9d1bf;
  --accent: #e3a54e;
  --accent-soft: #f6dfb6;
  --accent-ink: #34403b;
  --focus: #7e97ad;

  /* Materials: t = top face, l = left face, r = right face. */
  --cream-t: #fbf6ea; --cream-l: #ebe2cf; --cream-r: #d8ccb4;
  --sage-t: #b9cbb0;  --sage-l: #9db494;  --sage-r: #839c7b;
  --leaf-t: #8fb08a;  --leaf-l: #739870;  --leaf-r: #5d7f5b;
  --blue-t: #b8cad8;  --blue-l: #98b0c4;  --blue-r: #7e97ad;
  --amber-t: #f2c27a; --amber-l: #e3a54e; --amber-r: #c98a35;
  --stone-t: #dcd6cb; --stone-l: #c4bdb0; --stone-r: #aba395;
  --ground-t: #dfe6d3; --ground-l: #c9d3bb; --ground-r: #b3bfa4;
  --cloud-t: #ffffff; --cloud-l: #f1eee6; --cloud-r: #e4dfd3;
  --cream-f: #e2d8c2; --stone-f: #b8b1a3; --leaf-f: #688b65;
  --sand-t: #f1e3c6;  --sand-l: #e3cfa8;  --sand-r: #cfb78d;  --sand-f: #d9c39a;
  --brick-t: #eeb08a; --brick-l: #dd9269; --brick-r: #c27a54;
  --red-t: #e58b7c;   --red-l: #d4705f;   --red-r: #b85a4b;
  --metro-t: #fbfaf6; --metro-l: #e8e6de; --metro-r: #d3d0c6;
  --mud-t: #b59a76;   --mud-l: #9d825f;   --mud-r: #846a4b;   --mud-spot: #6f573c;
  --cloud-wet-t: #d7dadb; --cloud-wet-l: #c6cacb; --cloud-wet-r: #b3b8b9;
  --logo-t: #f3ead8;  --logo-l: #d3c08f;  --logo-r: #e7d8ab;
  --park-t: #d6e6d0;  --park-l: #b9cdb1;  --park-r: #a3b99b;  --park-alt: #c9dcc2; --park-dot: #9fb597;
  --silver-t: #eef0f1; --silver-l: #d9dcde; --silver-r: #c3c7ca;
  --glass: #39403f;
  --eu: #4d6bb3;
  --eu-star: #f2c94c;
  --stripe-y: #e9c43c;
  --stripe-g: #5c9a5a;
  --window-off: #c3d0da;
  --lattice: #fbfaf6;
  --water: #a9c2d3;
  --foam: #d3e1ea;
  --road: #ece5d4;
  --window: #8ea6ba;
  --rail: #a39b8c;
  --rain: #7e97ad;
  --snow: #ffffff;
  --sky-dot: transparent;
}

:root[data-theme="dark"] {
  --bg: #1d2427;
  --surface: #262f33;
  --ink: #ece6d9;
  --muted: #9aa39d;
  --line: #354045;
  --slab: #12181a;
  --accent: #e6a24c;
  --accent-soft: #4a3d2a;
  --accent-ink: #1d2427;
  --focus: #b8cad8;

  --cream-t: #5d6461; --cream-l: #4a514e; --cream-r: #3c4240;
  --sage-t: #5b6e5a;  --sage-l: #4b5c4a;  --sage-r: #3e4d3d;
  --leaf-t: #4d6a4f;  --leaf-l: #3f5841;  --leaf-r: #334836;
  --blue-t: #4f6475;  --blue-l: #415362;  --blue-r: #364552;
  --amber-t: #f0b664; --amber-l: #d08e3e; --amber-r: #ab7230;
  --stone-t: #555b5a; --stone-l: #474c4b; --stone-r: #3b3f3e;
  --ground-t: #34443a; --ground-l: #2a372f; --ground-r: #222d26;
  --cloud-t: #3d474b; --cloud-l: #343d41; --cloud-r: #2c3437;
  --cream-f: #535a57; --stone-f: #4e5453; --leaf-f: #46604a;
  --sand-t: #6e6553;  --sand-l: #5c5445;  --sand-r: #4d4639;  --sand-f: #554e40;
  --brick-t: #a9674a; --brick-l: #8d543b; --brick-r: #744430;
  --red-t: #c8604f;   --red-l: #a84f41;   --red-r: #8b4135;
  --metro-t: #c9c9c2; --metro-l: #aeaea7; --metro-r: #94948d;
  --mud-t: #6d5a43;   --mud-l: #5a4a37;   --mud-r: #4a3c2d;   --mud-spot: #3a2f22;
  --cloud-wet-t: #3a4245; --cloud-wet-l: #30373a; --cloud-wet-r: #282e30;
  --logo-t: #8a8270;  --logo-l: #6d6553;  --logo-r: #7b7361;
  --park-t: #405447;  --park-l: #33453a;  --park-r: #2a3a30;  --park-alt: #3a4d40; --park-dot: #2c3b31;
  --silver-t: #b9bec1; --silver-l: #9da2a5; --silver-r: #858a8d;
  --glass: #1d2224;
  --eu: #3d5694;
  --eu-star: #e9c043;
  --stripe-y: #d4b136;
  --stripe-g: #4f8a4d;
  --window-off: #3a4549;
  --lattice: #c9c9c2;
  --water: #2c4251;
  --foam: #3c566a;
  --road: #434a45;
  --window: #f2c27a;
  --rail: #6b6f6a;
  --rain: #8fa9bd;
  --snow: #dfe6ea;
  --sky-dot: #ece6d9;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  transition: background-color .3s, color .3s;
}

a { color: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }

/* ---------- material classes (shared by the town and icons) ---------- */
.m-cream-t { fill: var(--cream-t); } .m-cream-l { fill: var(--cream-l); } .m-cream-r { fill: var(--cream-r); }
.m-sage-t  { fill: var(--sage-t); }  .m-sage-l  { fill: var(--sage-l); }  .m-sage-r  { fill: var(--sage-r); }
.m-leaf-t  { fill: var(--leaf-t); }  .m-leaf-l  { fill: var(--leaf-l); }  .m-leaf-r  { fill: var(--leaf-r); }
.m-blue-t  { fill: var(--blue-t); }  .m-blue-l  { fill: var(--blue-l); }  .m-blue-r  { fill: var(--blue-r); }
.m-amber-t { fill: var(--amber-t); } .m-amber-l { fill: var(--amber-l); } .m-amber-r { fill: var(--amber-r); }
.m-stone-t { fill: var(--stone-t); } .m-stone-l { fill: var(--stone-l); } .m-stone-r { fill: var(--stone-r); }
.m-ground-t{ fill: var(--ground-t);} .m-ground-l{ fill: var(--ground-l);} .m-ground-r{ fill: var(--ground-r);}
.m-cloud-t { fill: var(--cloud-t); } .m-cloud-l { fill: var(--cloud-l); } .m-cloud-r { fill: var(--cloud-r); }
.m-cream-f { fill: var(--cream-f); } .m-stone-f { fill: var(--stone-f); } .m-leaf-f { fill: var(--leaf-f); }
.m-sand-t  { fill: var(--sand-t); }  .m-sand-l  { fill: var(--sand-l); }  .m-sand-r  { fill: var(--sand-r); }  .m-sand-f { fill: var(--sand-f); }
.m-brick-t { fill: var(--brick-t); } .m-brick-l { fill: var(--brick-l); } .m-brick-r { fill: var(--brick-r); }
.m-red-t   { fill: var(--red-t); }   .m-red-l   { fill: var(--red-l); }   .m-red-r   { fill: var(--red-r); }
.m-metro-t { fill: var(--metro-t); } .m-metro-l { fill: var(--metro-l); } .m-metro-r { fill: var(--metro-r); }
.m-mud-t   { fill: var(--mud-t); }   .m-mud-l   { fill: var(--mud-l); }   .m-mud-r   { fill: var(--mud-r); }
.m-mud-spot { fill: var(--mud-spot); }
.is-wet .m-cloud-t { fill: var(--cloud-wet-t); } .is-wet .m-cloud-l { fill: var(--cloud-wet-l); } .is-wet .m-cloud-r { fill: var(--cloud-wet-r); }
.m-logo-t { fill: var(--logo-t); } .m-logo-l { fill: var(--logo-l); } .m-logo-r { fill: var(--logo-r); }
.m-park-t { fill: var(--park-t); } .m-park-l { fill: var(--park-l); } .m-park-r { fill: var(--park-r); }
.m-park-alt { fill: var(--park-alt); } .m-park-dot { fill: var(--park-dot); }
.m-silver-t { fill: var(--silver-t); } .m-silver-l { fill: var(--silver-l); } .m-silver-r { fill: var(--silver-r); }
.m-glass { fill: var(--glass); }
.m-eu { fill: var(--eu); }
.m-eu-star { fill: var(--eu-star); }
.m-stripe-y { fill: var(--stripe-y); } .m-stripe-g { fill: var(--stripe-g); }
.m-win.is-off { fill: var(--window-off); }
.m-lattice { fill: none; stroke: var(--lattice); stroke-width: 1.2; }
.m-court { fill: none; stroke: var(--blue-r); stroke-width: 1.4; }
.m-net { fill: var(--muted); opacity: .45; }
.m-logo { fill: var(--ink); font: 700 21px "Fredoka", system-ui, sans-serif; }
.m-beta { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.m-beta-text { fill: var(--ink); font: 700 7px "Fredoka", system-ui, sans-serif; text-anchor: middle; }
.m-water { fill: var(--water); }
.m-foam  { fill: var(--foam); }
.m-rail  { fill: none; stroke: var(--rail); stroke-width: 1.6; stroke-linejoin: round; }
.m-cable { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.m-mouth { fill: var(--slab); }
.m-ink   { fill: var(--ink); }
.m-pin-blue { fill: var(--blue-r); }
.m-pin-red  { fill: var(--red-l); }
.m-pin-shadow { fill: var(--sage-r); }
.m-sign { fill: #fff; font: 600 15px "Fredoka", system-ui, sans-serif; text-anchor: middle; }
.m-moon-dim { fill: var(--line); }
.m-road  { fill: var(--road); }
.m-win   { fill: var(--window); }
.m-wire  { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.m-pin   { fill: var(--accent); }
.m-pin-dot { fill: var(--surface); }
.m-star  { fill: var(--sky-dot); }
.m-solid { stroke-dasharray: none; }
.m-sun   { fill: var(--amber-t); }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  font-size: 20px;
  text-decoration: none;
  margin-right: auto;
}
.logo-cube { width: 28px; height: 28px; }

.nav-links { display: none; gap: 4px; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 500;
}

/* Chunky icon button with a flat slab edge that presses down. */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--slab);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--slab); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn .icon-moon { fill: currentColor; stroke: none; }
.icon-btn .icon-sun { display: none; }
:root[data-theme="dark"] .icon-btn .icon-moon { display: none; }
:root[data-theme="dark"] .icon-btn .icon-sun { display: block; }

/* ---------- greeting ---------- */
main { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.hello { padding: 20px 0 4px; }
.hello-date {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}
.hello-title {
  margin: 4px 0 6px;
  font-size: clamp(30px, 8vw, 54px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.hello-row { display: flex; align-items: center; gap: 12px; }
.hello-sub { margin: 0; color: var(--muted); font-size: 18px; flex: 1; text-wrap: pretty; }
.icon-btn-small { flex: none; }
.hello-title, .hello-sub { transition: opacity .25s; }
.is-fading { opacity: 0; }

/* ---------- town ---------- */
.town-wrap { margin: 8px -16px 0; overflow: hidden; }
.town { position: relative; width: 100%; max-width: 980px; margin: 0 auto; }
.town-svg { display: block; width: 100%; height: auto; overflow: visible; }
.town-hint {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.bld { cursor: pointer; outline: none; }
.bld > g { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.bld.is-hot > g { transform: translateY(-8px); }
.bld.is-soon { cursor: default; }

.cloud { animation: drift 40s ease-in-out infinite alternate; }
.cloud-2 { animation-duration: 55s; animation-direction: alternate-reverse; }
@keyframes drift { from { transform: translateX(-40px); } to { transform: translateX(40px); } }
.rain { fill: var(--rain); animation: fall .7s linear infinite; }
@keyframes fall { from { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } to { transform: translateY(110px); opacity: 0; } }
.snow { fill: var(--snow); animation: snowfall 4s linear infinite; }
@keyframes snowfall { from { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(8px, 55px); } to { transform: translate(0, 110px); opacity: 0; } }
.flash { fill: var(--surface); opacity: 0; animation: flash 7s steps(1) infinite; pointer-events: none; }
@keyframes flash { 0%, 93%, 96% { opacity: 0; } 94%, 97% { opacity: .45; } }
.float { animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-7px); } }
.spin { transform-box: fill-box; transform-origin: center; animation: spin 1.6s steps(8) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.brush { animation: brush .5s steps(2) infinite; }
@keyframes brush { 50% { transform: translateY(-5px); } }
.bubble { animation: bubble 2.4s ease-out infinite; }
@keyframes bubble { from { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-30px); opacity: 0; } }
.gondola { animation: gondola 9s ease-in-out infinite alternate; }
.wb-block { animation: wb 3.2s ease-in-out infinite alternate; }
@keyframes wb { from { transform: translateY(0); } to { transform: translateY(-4px); } }
.wave { transform-box: fill-box; transform-origin: left center; animation: wave 2.4s ease-in-out infinite alternate; }
@keyframes wave { from { transform: skewY(-3deg); } to { transform: skewY(3deg); } }
.waves { animation: waves 6s ease-in-out infinite alternate; }
@keyframes waves { to { transform: translate(var(--wx), var(--wy)); } }
.shore { animation: shore 4s ease-in-out infinite alternate; }
@keyframes shore { to { transform: translate(var(--sx), var(--sy)); } }
.trolley { animation: trolley 7s ease-in-out infinite alternate; }
@keyframes trolley { to { transform: translate(var(--dx), var(--dy)); } }
.blink { animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ball { animation: ball .9s ease-in-out infinite alternate; }
@keyframes ball { to { transform: translateY(var(--by)); } }
@keyframes gondola { to { transform: translate(var(--dx), var(--dy)); } }
.sky-night { display: none; }
.sky-day, .sky-night { transition: opacity .4s; }
.is-overcast .sky-day, .is-overcast .sky-night { opacity: .15; }
:root[data-theme="dark"] .sky-day { display: none; }
:root[data-theme="dark"] .sky-night { display: inline; }
.stars { opacity: 0; transition: opacity .4s; }
:root[data-theme="dark"] .stars { opacity: .8; }
.twinkle { animation: twinkle 3s steps(2) infinite; }
@keyframes twinkle { 50% { opacity: .2; } }

/* Labels float over the town (HTML, so they stay readable on small screens). */
.town-labels { position: absolute; inset: 0; pointer-events: none; }
.pin {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 3px 10px;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: var(--surface);
  box-shadow: 0 3px 0 var(--slab);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  transition: translate .2s cubic-bezier(.3, 1.6, .5, 1), background-color .2s;
}
/* Bigger invisible hit area so the pin is easy to tap. */
.pin::before { content: ""; position: absolute; inset: -8px -4px; }
.pin.is-hot { translate: 0 -8px; }
.pin-left { transform: translate(-100%, -50%); }
.pin-right { transform: translate(0, -50%); }
.pin-below { transform: translate(-50%, 6px); }
.pin-main { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 0 var(--amber-r); }
.pin-soon { color: var(--muted); border-style: dashed; box-shadow: none; }
.pin-full { display: none; }
/* Small phones: zoom the town a little (only empty plate edges are cut) and use compact labels. */
@media (max-width: 639px) {
  .town { width: 114%; margin-left: -7%; }
  .pin { min-height: 24px; padding: 2px 7px; font-size: 11px; border-radius: 8px; box-shadow: 0 2px 0 var(--slab); }
}

/* ---------- sections ---------- */
.section { padding: 36px 0 8px; scroll-margin-top: 70px; }
.section-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: .08em;
  color: var(--muted);
}

/* Thick tile: rounded card with a flat slab edge. */
.tile {
  display: block;
  position: relative;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 6px 0 var(--slab);
  color: var(--ink);
  text-decoration: none;
  transition: transform .12s, box-shadow .12s, border-color .2s;
}
a.tile:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--slab); }

/* Featured project */
.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 20px;
  margin-bottom: 22px;
  overflow: hidden;
}
.feature-art { width: 100%; max-width: 260px; height: auto; justify-self: center; overflow: visible; }
.feature-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}
.feature-name { margin: 10px 0 4px; font-size: clamp(28px, 7vw, 40px); line-height: 1.1; font-weight: 600; }
.feature-text { margin: 0 0 16px; color: var(--muted); font-size: 17px; }

/* Chunky button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--slab);
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.btn:active, a.tile:active .btn { transform: translateY(3px); box-shadow: 0 1px 0 var(--slab); }
.btn-main { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 0 var(--amber-r); }
.btn-main:active, a.tile:active .btn-main { box-shadow: 0 1px 0 var(--amber-r); }
.btn[aria-disabled="true"] { color: var(--muted); border-style: dashed; box-shadow: none; cursor: default; }
.btn-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Project grid */
.grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.card {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px 14px 12px;
  min-height: 108px;
}
.card-art { width: 84px; height: 84px; overflow: visible; }
.card-name { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.2; }
.card-text { margin: 2px 0 0; color: var(--muted); font-size: 15px; line-height: 1.35; }
.card-soon { border-style: dashed; box-shadow: none; }
.card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.btn-small { min-height: 44px; padding: 0 14px; font-size: 15px; }
.card-soon .card-art { opacity: .75; }
.chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  vertical-align: 2px;
}

/* About */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 20px;
}
.about-avatar { width: 96px; height: 96px; overflow: visible; }
.about-name { margin: 0; font-size: 24px; font-weight: 600; }
.about-text { margin: 4px 0 16px; color: var(--muted); max-width: 60ch; }
.about-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.footer {
  padding: 40px 16px calc(28px + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.footer p { margin: 0; }

/* ---------- bigger screens ---------- */
@media (min-width: 480px) and (max-width: 639px) {
  .pin { font-size: 13px; padding: 3px 10px; }
}

@media (min-width: 640px) {
  .nav-links { display: flex; }
  .nav { padding-left: 24px; padding-right: 24px; }
  main { padding: 0 24px; }
  .town-wrap { margin: 8px 0 0; }
  .grid { grid-template-columns: 1fr 1fr; }
  .pin { font-size: 14px; min-height: 34px; padding: 4px 12px; }
  .pin-short { display: none; }
  .pin-full { display: inline; }
  .about { grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: 28px; }
  .about-avatar { width: 120px; height: 120px; }
}

@media (min-width: 900px) {
  .hello { padding-top: 40px; text-align: center; }
  .hello-row { justify-content: center; }
  .hello-sub { flex: none; }
  .feature { grid-template-columns: 1fr 300px; align-items: center; padding: 32px 40px; gap: 24px; }
  .feature-art { order: 2; max-width: 300px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .card { grid-template-columns: 1fr; justify-items: start; padding: 18px 20px 20px; min-height: 0; }
  .card-art { width: 110px; height: 110px; justify-self: center; margin-bottom: 4px; }
}

@media (min-width: 1500px) {
  main { max-width: 1240px; }
  .town { max-width: 1080px; }
}

/* Hover effects only on devices that can hover. */
@media (hover: hover) {
  .nav-links a:hover { color: var(--ink); background: var(--surface); }
  a.tile:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--slab); border-color: var(--accent); }
  a.tile:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--slab); }
  .tile:hover .card-art .bob { transform: translateY(-6px); }
  .pin:hover { background: var(--accent-soft); }
  .pin-main:hover { background: var(--amber-t); }
  .icon-btn:hover, .btn:hover { border-color: var(--accent); }
  .btn[aria-disabled="true"]:hover { border-color: var(--line); }
}
.card-art .bob, .feature-art .bob { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cloud, .twinkle, .float, .spin, .brush, .bubble, .gondola, .flash, .wb-block, .wave, .waves, .shore, .trolley, .blink, .ball { animation: none; }
  .rain { animation-duration: 2.5s; }
  .snow { animation-duration: 10s; }
  * { transition-duration: 0s !important; }
}