/* ==========================================================================
   HOME (all NC arts): "The Mosaic"  (round 3)
   Object world: North Carolina's outline (public-domain Census-derived path)
   cut into a tile mosaic in the eight section colors, eight doors that each
   hold their section's own object (45, program, footprints, frame, jug,
   spines, slate, roadside marker), and tiles everywhere as the unit of the
   site. Ground is longleaf night green; the section colors are accents.
   Loads after shell.css. Never restyles shared components (cards, .ev,
   chips, header, footer, search). Prefix: hm-
   ========================================================================== */

.sec-home {
  --hm-night: #0E1A14;     /* = --sec-deep */
  --hm-night-2: #17291F;
  --hm-ridge: #A6E3B0;     /* ridge light (dark grounds only) */
  --hm-pine: #2F6B45;      /* = --sec-ink */
  --hm-paper: #F6F3EA;
  --f-serif: "Instrument Serif", Georgia, serif;
}
.hm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* heading flourish: Instrument Serif italic */
.sec-home .block-title em { font-style: italic; color: var(--hm-pine); }
.sec-home .block--deep .block-title em { color: var(--hm-ridge); }
.sec-home .list-cta .block-title em { color: var(--sec-tint); }
.sec-home .block-title { font-size: clamp(2.1rem, 3.8vw, 3.2rem); }

/* ==========================================================================
   [1] HERO
   ========================================================================== */
.hm-hero {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--hm-paper);
  background:
    radial-gradient(ellipse 50% 60% at 12% 0%, rgba(166,227,176,.12), transparent 70%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(242,193,78,.07), transparent 70%),
    var(--hm-night);
  padding: clamp(36px, 5vw, 60px) 0 clamp(28px, 4vw, 48px);
}
.hm-hero::before {                          /* faint contour lines: mountains to coast */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(ellipse 140% 90% at 0% 30%, transparent 0 34px, rgba(166,227,176,.05) 34px 35px);
}
.hm-impact { padding: clamp(20px, 3vw, 34px) 0; color: var(--hm-paper); background: linear-gradient(100deg, #193b2a, #27563b 52%, #193b2a); border-block: 1px solid rgba(166,227,176,.34); }
.hm-impact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hm-impact-item { min-width: 0; padding-inline: clamp(10px, 2vw, 24px); border-left: 1px solid rgba(255,255,255,.25); }
.hm-impact-item:first-child { border-left: 0; }
.hm-impact-value { display: block; font: 400 clamp(2rem, 4vw, 3.2rem)/1 var(--f-serif); color: #fff; font-variant-numeric: tabular-nums; }
.hm-impact-label { display: block; margin-top: 8px; font: 600 12px/1.35 var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: #d6ebdb; }
.hm-impact-source { margin-top: 12px; font-size: 11px; color: rgba(255,255,255,.72); }
.hm-impact-source a { color: inherit; }
.hm-hero-top {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(20px, 3vw, 36px);
}
.hm-hero .eyebrow { color: var(--hm-ridge); }
.hm-hero-title {
  font: 400 var(--hero-size)/1 var(--f-serif); letter-spacing: -.012em; margin: 4px 0 16px;
  color: var(--hm-paper); text-wrap: balance;
}
.hm-hero-title em { display: block; font-style: italic; color: var(--hm-ridge); }
.hm-hero-sub { max-width: 32em; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.55; color: var(--sec-mist); }
.hm-hero .search { max-width: none; box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 18px 40px rgba(0,0,0,.4); }

.hm-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.hm-ways a {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 14px 11px;
  border: 1px solid rgba(166,227,176,.32); border-radius: var(--r-ctl);
  color: var(--hm-paper); text-decoration: none; background: rgba(23,41,31,.6);
  transition: background-color .15s, border-color .15s;
}
.hm-ways b { font: 700 15.5px/1.2 var(--font-ui); }
.hm-ways b::after { content: " \2192"; color: var(--hm-ridge); }
.hm-ways span { font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .04em; color: var(--sec-mist); }
.hm-ways a:hover { background: var(--hm-night-2); border-color: var(--hm-ridge); }
.hm-ways a:hover b { text-decoration: underline; text-underline-offset: .15em; }

/* the mosaic map */
.hm-map { margin: 0; }
.hm-map svg { width: 100%; height: auto; overflow: visible; }
.hm-map-shadow { fill: #040A07; }
.hm-map-grout { fill: #07100B; }
.hm-map-edge { fill: none; stroke: var(--hm-ridge); stroke-width: 2; stroke-linejoin: round; opacity: .55; }
.hm-map-towns circle { fill: var(--hm-paper); stroke: var(--hm-night); stroke-width: 2.5; }
.hm-map-towns text {
  font: 500 13px var(--font-mono); letter-spacing: .12em; fill: var(--hm-paper);
  paint-order: stroke; stroke: var(--hm-night); stroke-width: 5px; stroke-linejoin: round;
}
/* dawn: a band of light crosses from the coast to the mountains every 12 s */
.hm-dawn { mix-blend-mode: screen; animation: hm-dawn 8s linear infinite; }
@keyframes hm-dawn { from { transform: translateX(1000px); } to { transform: translateX(-260px); } }

.hm-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(166,227,176,.18); }
.hm-legend-note { font-size: 14.5px; color: var(--sec-mist); max-width: 40ch; }
.hm-legend ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hm-legend a { display: inline-flex; align-items: center; gap: 8px; color: var(--hm-paper); text-decoration: none; font: 600 14.5px/1.2 var(--font-ui); padding: 4px 0; }
.hm-legend a:hover { text-decoration: underline; text-underline-offset: .2em; }
.hm-legend i { width: 13px; height: 13px; border-radius: 2px; background: var(--sec-sig); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }

/* ==========================================================================
   [2] THE EIGHT DOORS
   ========================================================================== */
.hm-doors { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.hm-doors li { display: flex; }
.hm-door {
  position: relative; flex: 1; display: flex; flex-direction: column;
  padding: 16px 18px 26px; min-height: 100%;
  background: var(--sec-deep); color: var(--night-text); text-decoration: none;
  border-radius: 12px 12px 3px 3px;
  box-shadow: 0 2px 4px rgba(14,26,20,.12), 0 14px 30px rgba(14,26,20,.16);
  transition: transform .25s ease, box-shadow .25s ease;
}
.hm-door::before {                          /* door frame bead */
  content: ""; position: absolute; inset: 7px 7px 13px; pointer-events: none;
  border: 1px solid rgba(255,255,255,.11); border-radius: 8px 8px 1px 1px;
}
.hm-door::after {                           /* threshold in the section's color */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: var(--sec-sig); border-radius: 0 0 3px 3px;
}
.hm-door-no { font: 500 11px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--sec-mist); text-align: center; }
.hm-door-niche {
  display: grid; place-items: center; margin: 12px 2px 18px; aspect-ratio: 1 / 1.04; overflow: hidden;
  border-radius: 999px 999px 6px 6px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 35%, rgba(255,255,255,.08), transparent 70%),
    var(--sec-deep-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), inset 0 14px 26px rgba(0,0,0,.35);
  transition: box-shadow .25s;
}
.hm-obj { width: 86%; height: auto; aspect-ratio: 1; transition: transform .35s ease; }
.hm-door-name { font: 400 clamp(26px, 2.3vw, 32px)/1.04 var(--f-serif); color: var(--night-text); text-wrap: balance; }
.hm-door-desc { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--sec-mist); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.hm-door-go { margin-top: auto; padding-top: 16px; font: 500 12px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sec-accent); }
.hm-door-go::after { content: " \2192"; }
.hm-door:hover, .hm-door:focus-visible { transform: translateY(-5px); box-shadow: 0 4px 8px rgba(14,26,20,.14), 0 22px 40px rgba(14,26,20,.24); }
.hm-door:focus-visible { box-shadow: 0 0 0 6px rgba(17,18,20,.85), 0 22px 40px rgba(14,26,20,.24) !important; }   /* keep the focus halo (shell.css) and the lift */
.hm-door:hover .hm-door-niche, .hm-door:focus-visible .hm-door-niche { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 14px 26px rgba(0,0,0,.25), 0 0 0 3px var(--sec-sig); }
.hm-door:hover .hm-obj, .hm-door:focus-visible .hm-obj { transform: scale(1.05); }
/* The record spins on touch devices; desktop motion stays user-triggered. */
@media (hover: none) { .hm-obj--spin { animation: hm-spin 6s linear infinite; } }
.hm-door:hover .hm-door-name, .hm-door:focus-visible .hm-door-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .12em; }
@keyframes hm-spin { to { rotate: 360deg; } }

/* Door objects move on hover / keyboard focus. Each moving part is a <use>
   with class hm-m; its pivot is in the object's 200x200 drawing units. The
   resting pose is the SVG as drawn (no CSS needed to look finished).
   One-shot keyframes end at rest; two-state moves use transitions. */
.hm-m { transform-box: view-box; }
/* Theater: the curtains draw back to the wings and the stage warms */
.hm-m-cl { transform-origin: 0 0; transition: transform .9s cubic-bezier(.3,.7,.2,1); }
.hm-m-cr { transform-origin: 200px 0; transition: transform .9s cubic-bezier(.3,.7,.2,1); }
.hm-m-glow { transition: opacity .9s ease; }
.hm-door:hover .hm-m-cl, .hm-door:focus-visible .hm-m-cl,
.hm-door:hover .hm-m-cr, .hm-door:focus-visible .hm-m-cr { transform: scaleX(.6); }
.hm-door:hover .hm-m-glow, .hm-door:focus-visible .hm-m-glow { opacity: 1; }
/* Dance: the feet step 1, 2, 3 while the tape path marches */
.hm-m-f1 { transform-origin: 74px 132px; }
.hm-m-f2 { transform-origin: 140px 70px; }
.hm-m-f3 { transform-origin: 150px 140px; }
.hm-door:hover .hm-m-f1, .hm-door:focus-visible .hm-m-f1 { animation: hm-step .5s ease-out both; }
.hm-door:hover .hm-m-f2, .hm-door:focus-visible .hm-m-f2 { animation: hm-step .5s .3s ease-out both; }
.hm-door:hover .hm-m-f3, .hm-door:focus-visible .hm-m-f3 { animation: hm-step .5s .6s ease-out both; }
.hm-door:hover .hm-m-path, .hm-door:focus-visible .hm-m-path { animation: hm-march 1.1s linear both; }
@keyframes hm-step { 0%, 100% { transform: none; } 40% { transform: translateY(-7px) scale(1.12); } 70% { transform: translateY(1px) scale(.97); } }
@keyframes hm-march { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -20; } }
/* Visual arts: the frame swings on its nail and settles */
.hm-m-frame { transform-origin: 100px 20px; }
.hm-door:hover .hm-m-frame, .hm-door:focus-visible .hm-m-frame { animation: hm-rock 1.2s ease-in-out both; }
@keyframes hm-rock { 0%, 100% { transform: none; } 18% { transform: rotate(3.5deg); } 40% { transform: rotate(-2.6deg); } 60% { transform: rotate(1.5deg); } 80% { transform: rotate(-.6deg); } }
/* Craft: the jug wobbles on its foot and settles */
.hm-m-jug { transform-origin: 100px 170px; }
.hm-door:hover .hm-m-jug, .hm-door:focus-visible .hm-m-jug { animation: hm-wobble 1.1s ease-out both; }
@keyframes hm-wobble { 0%, 100% { transform: none; } 15% { transform: rotate(-4deg); } 35% { transform: rotate(3deg); } 55% { transform: rotate(-1.8deg); } 72% { transform: rotate(.9deg); } 86% { transform: rotate(-.3deg); } }
/* Literary: the third spine stands upright, then leans on hover */
.hm-m-lean { transform-origin: 150px 172px; transition: transform .8s cubic-bezier(.34,1.4,.55,1); }
.hm-door:hover .hm-m-lean, .hm-door:focus-visible .hm-m-lean { transform: rotate(16deg); }
/* Film: the clapstick claps shut and lifts again */
.hm-m-stick { transform-origin: 38px 74px; }
.hm-door:hover .hm-m-stick, .hm-door:focus-visible .hm-m-stick { animation: hm-clap 1s ease-in-out both; }
@keyframes hm-clap { 0%, 100% { transform: none; } 22% { transform: rotate(16deg); animation-timing-function: ease-out; } 28% { transform: rotate(13deg); } 34% { transform: rotate(16deg); } 55% { transform: rotate(16deg); } }
/* Museums: the front doors swing open and lamplight spills onto the steps */
.hm-m-leaf-l { transform-origin: 86.6px 0; transition: transform .9s cubic-bezier(.3,.7,.2,1); }
.hm-m-leaf-r { transform-origin: 113.4px 0; transition: transform .9s cubic-bezier(.3,.7,.2,1); }
.hm-m-spill { transition: opacity .7s ease .2s; }
.hm-door:hover .hm-m-leaf-l, .hm-door:focus-visible .hm-m-leaf-l,
.hm-door:hover .hm-m-leaf-r, .hm-door:focus-visible .hm-m-leaf-r { transform: scaleX(.18); }
.hm-door:hover .hm-m-spill, .hm-door:focus-visible .hm-m-spill { opacity: 1; }
/* Phones and tablets (no hover): every door plays its move on a loop, the way
   the record always spins (user, 2026-10-11). Staggered so the doors take turns. */
@media (hover: none) {
  .hm-door .hm-m-cl, .hm-door .hm-m-cr { animation: hm-curtain 7s cubic-bezier(.3,.7,.2,1) infinite; }
  .hm-door .hm-m-glow { animation: hm-glow 7s ease infinite; }
  .hm-door .hm-m-f1 { animation: hm-step-loop 5s ease-out .6s infinite; }
  .hm-door .hm-m-f2 { animation: hm-step-loop 5s ease-out .9s infinite; }
  .hm-door .hm-m-f3 { animation: hm-step-loop 5s ease-out 1.2s infinite; }
  .hm-door .hm-m-path { animation: hm-march 1.1s linear infinite; }
  .hm-door .hm-m-frame { animation: hm-rock-loop 6s ease-in-out 1.5s infinite; }
  .hm-door .hm-m-jug { animation: hm-wobble-loop 6s ease-out 2.5s infinite; }
  .hm-door .hm-m-lean { animation: hm-lean 6s cubic-bezier(.34,1.4,.55,1) 3s infinite; }
  .hm-door .hm-m-stick { animation: hm-clap-loop 5s ease-in-out 3.5s infinite; }
  .hm-door .hm-m-leaf-l, .hm-door .hm-m-leaf-r { animation: hm-curtain 8s cubic-bezier(.3,.7,.2,1) 4s infinite; }
  .hm-door .hm-m-leaf-l, .hm-door .hm-m-leaf-r { --hm-open: scaleX(.18); }
  .hm-door .hm-m-spill { animation: hm-glow 8s ease 4s infinite; }
}
@keyframes hm-curtain { 0%, 12% { transform: none; } 32%, 62% { transform: var(--hm-open, scaleX(.6)); } 84%, 100% { transform: none; } }
@keyframes hm-glow { 0%, 12% { opacity: 0; } 32%, 62% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes hm-step-loop { 0%, 100% { transform: none; } 4% { transform: translateY(-7px) scale(1.12); } 7% { transform: translateY(1px) scale(.97); } 10% { transform: none; } }
@keyframes hm-rock-loop { 0%, 100% { transform: none; } 4% { transform: rotate(3.5deg); } 8% { transform: rotate(-2.6deg); } 12% { transform: rotate(1.5deg); } 16% { transform: rotate(-.6deg); } 20% { transform: none; } }
@keyframes hm-wobble-loop { 0%, 100% { transform: none; } 3% { transform: rotate(-4deg); } 7% { transform: rotate(3deg); } 11% { transform: rotate(-1.8deg); } 14% { transform: rotate(.9deg); } 17% { transform: rotate(-.3deg); } 19% { transform: none; } }
@keyframes hm-lean { 0%, 10% { transform: none; } 22%, 55% { transform: rotate(16deg); } 70%, 100% { transform: none; } }
@keyframes hm-clap-loop { 0%, 100% { transform: none; } 4% { transform: rotate(16deg); } 6% { transform: rotate(13deg); } 7% { transform: rotate(16deg); } 11% { transform: rotate(16deg); } 15% { transform: none; } }
/* "Pause motion" (no-JS checkbox): doors stay put, objects stay at rest */
.motion-toggle:checked ~ * .hm-door,
.motion-toggle:checked ~ * .hm-door-niche,
.motion-toggle:checked ~ * .hm-obj { transition: none; }
.motion-toggle:checked ~ * .hm-door .hm-m { animation: none !important; transition: none !important; transform: none !important; }
.motion-toggle:checked ~ * .hm-door .hm-m-glow,
.motion-toggle:checked ~ * .hm-door .hm-m-spill { opacity: 0 !important; }

/* ==========================================================================
   [3] EVENTS ACROSS EVERY ART FORM
   ========================================================================== */
.hm-evfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-5); }
.hm-evfilter .chip { padding: 7px 13px; font-size: 13.5px; }
.hm-evgrid { gap: 12px clamp(14px, 2vw, 24px); }
.hm-evgrid > .ev { min-height: 122px; }
.hm-evgrid .ev-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.5em; }

/* ==========================================================================
   [4] WORTH THE DRIVE: mixed-section card art (object + tile field)
   ========================================================================== */
.hm-art {
  background:
    linear-gradient(90deg, var(--sec-deep) 34%, transparent 80%),
    conic-gradient(from 90deg at 2px 2px, var(--sec-deep) 90deg, color-mix(in srgb, var(--sec-sig) 26%, var(--sec-deep)) 0) 0 0 / 16px 16px,
    var(--sec-deep);
}
.hm-art-obj { position: absolute; left: 14px; top: 50%; width: 86px !important; height: 86px !important; translate: 0 -50%; transition: transform .3s ease; }
.card:hover .hm-art-obj { transform: rotate(-4deg) scale(1.05); }
.hm-art-tag {
  position: absolute; right: 14px; bottom: 12px; padding: 4px 8px; border-radius: 2px;
  background: var(--sec-deep); color: var(--sec-accent);
  font: 500 10.5px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
}
#places .grid--rail { align-items: stretch; }
#places .card { height: 100%; }
#places .card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.5em; }

/* ==========================================================================
   [5] TOWNS: regions + towns with "strong here" tiles
   ========================================================================== */
.hm-regions { align-items: start; }
.hm-region {
  background: var(--hm-night-2); border: 1px solid rgba(166,227,176,.14); border-radius: 8px; overflow: hidden;
}
.hm-region-map { display: block; width: 100%; height: auto; padding: 18px 18px 4px; }
.hm-region-dim { fill: var(--hm-night-2); opacity: .84; }
.hm-region-line { fill: none; stroke: var(--hm-ridge); stroke-width: 3; stroke-dasharray: 8 8; opacity: .55; }
.hm-region-body { padding: 10px 22px 22px; }
.hm-region h3 { font: 400 34px/1 var(--f-serif); color: var(--hm-paper); }
.hm-region-body > p { margin-top: 8px; font-size: 15px; color: var(--sec-mist); }
.hm-townlist { list-style: none; margin-top: 14px; border-top: 1px solid rgba(166,227,176,.16); }
.hm-townlist li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
  padding: 10px 0 9px; border-bottom: 1px solid rgba(166,227,176,.12);
}
.hm-townlist a { font: 700 17px/1.2 var(--font-ui); color: var(--hm-paper); text-decoration: none; }
.hm-townlist a:hover { text-decoration: underline; text-underline-offset: .15em; }
.hm-townlist a::after { content: " \2192"; color: var(--hm-ridge); font-weight: 400; }
.hm-dots { display: flex; gap: 4px; }
.hm-dots i { width: 13px; height: 13px; border-radius: 2px; background: var(--sec-sig); box-shadow: inset 0 -2px 0 rgba(0,0,0,.22); }
.hm-strong { grid-column: 1 / -1; margin-top: 3px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sec-mist); }
.hm-towns-note { margin-top: 22px; font-size: 14px; color: var(--sec-mist); }

/* ==========================================================================
   [6] FOR ARTISTS
   ========================================================================== */
.hm-practice { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hm-practice a {
  position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 14px; align-items: center;
  height: 100%; padding: 14px 16px 14px 14px;
  background: var(--card); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-bottom: 4px solid var(--sec-sig); border-radius: var(--r-card);
  box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease;
}
.hm-pr-obj { grid-row: 1 / span 2; width: 54px; height: 54px; padding: 4px; border-radius: 4px; background: var(--sec-deep); }
.hm-practice b { font: 700 16.5px/1.25 var(--font-ui); color: var(--sec-ink); }
.hm-practice b::after { content: " \2192"; }
.hm-practice span { font-size: 13.5px; line-height: 1.4; color: var(--muted); margin-top: 3px; }
.hm-practice a:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.hm-practice a:hover b { text-decoration: underline; text-underline-offset: .15em; }

/* ==========================================================================
   [7] EDDIE RAY LEGACY BAND (facts only)
   ========================================================================== */
.hm-legacy-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.hm-portrait { margin: 0; padding: 10px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.hm-portrait-ph { min-height: 0; aspect-ratio: 4 / 5; }
.hm-portrait-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.hm-portrait-cap { margin-top: 8px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.hm-legacy .block-title { font-size: clamp(2.6rem, 4.6vw, 3.8rem); }
.hm-facts { margin: 18px 0 0; max-width: 640px; border-top: 1px solid var(--line); }
.hm-facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.hm-facts dt { font: 500 12px/1.6 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.hm-facts dd { margin: 0; font-size: 18.5px; line-height: 1.4; color: var(--ink); }
.hm-legacy-lede { margin-top: 14px; max-width: 34em; font: 400 clamp(22px, 2.1vw, 28px)/1.3 var(--f-serif); color: var(--ink); }
.hm-legacy-note { margin-top: 14px; max-width: 40em; color: var(--ink); font-size: 17px; line-height: 1.6; }
.hm-legacy-more { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.hm-legacy-bar { grid-column: 1 / -1; display: flex; height: 6px; margin-top: 8px; }
.hm-legacy-bar i { flex: 1; background: var(--sec-sig); }

/* ==========================================================================
   [8] LIST YOUR PLACE: a new tile set into the mosaic
   ========================================================================== */
.hm-cta-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hm-set { justify-self: center; display: grid; grid-template-columns: repeat(4, 60px); gap: 7px; padding: 14px; border-radius: 6px; background: rgba(14,26,20,.35); }
.hm-set i { aspect-ratio: 1; border-radius: 3px; background: var(--sec-sig); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.hm-set .hm-set-gap { grid-area: 2 / 3; background: transparent; box-shadow: none; border: 2px dashed rgba(255,255,255,.7); }
.hm-set .hm-set-new {
  grid-area: 2 / 3; position: relative; z-index: 1;
  background: var(--hm-paper); box-shadow: 0 10px 18px rgba(0,0,0,.3);
  animation: hm-drop 5s ease-in-out infinite;
}
.hm-set-new::before, .hm-set-new::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; background: var(--hm-pine); border-radius: 1px; }
.hm-set-new::before { width: 22px; height: 4px; } .hm-set-new::after { width: 4px; height: 22px; }
@keyframes hm-drop {
  0%, 15% { transform: translate(18px, -62px) rotate(-10deg); }
  45%, 100% { transform: none; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .hm-practice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-regions { grid-template-columns: minmax(0, 1fr); }
  .hm-region { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .hm-region-map { padding: 18px; }
}
@media (max-width: 900px) {
  .hm-hero-top { grid-template-columns: minmax(0, 1fr); }
  .hm-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-cta-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-set { justify-self: start; }
}
@media (max-width: 640px) {
  .hm-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px; }
  .hm-impact-item:nth-child(3) { border-left: 0; }
  .hm-impact-item { padding-inline: 8px; }
}
@media (max-width: 760px) {
  .hm-hero > .wrap { display: flex; flex-direction: column; }
  .hm-hero-top { display: contents; }
  .hm-hero-copy { order: 1; }
  .hm-map { order: 2; margin: 4px calc(-1 * var(--gutter) + 6px) 22px; }
  .hm-legend { margin-inline: 10px; }
  .hm-hero-find { order: 3; }
  .hm-map-towns text { display: none; }
  .hm-map-towns circle { r: 9px; stroke-width: 4; }
  .hm-legend { flex-direction: column; align-items: flex-start; }
  .hm-legend ul { gap: 4px 16px; }
  .hm-ways a { padding: 9px 11px; }
  .hm-ways span { display: none; }
  .hm-doors { gap: 12px; }
  .hm-door { padding: 12px 12px 22px; border-radius: 10px 10px 3px 3px; }
  .hm-door::before { inset: 5px 5px 11px; }
  .hm-door-niche { margin: 8px 0 12px; }
  .hm-door-name { font-size: 22px; }
  .hm-door-desc { font-size: 13.5px; }
  .hm-door-go { font-size: 10.5px; letter-spacing: .1em; }
  .hm-evfilter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; }
  .hm-evfilter .chip { flex: none; }
  .hm-region { display: block; }
  .hm-practice { grid-template-columns: minmax(0, 1fr); }
  .hm-legacy-grid { grid-template-columns: minmax(0, 1fr); }
  .hm-portrait { max-width: 220px; }
  .hm-facts div { grid-template-columns: minmax(0, 1fr); }
  .hm-set { grid-template-columns: repeat(4, 52px); }
}
@media (max-width: 420px) {
  .hm-ways { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hm-ways b { font-size: 14.5px; }
}

/* reduced motion: the mosaic fully lit, tiles set */
@media (prefers-reduced-motion: reduce) {
  .hm-dawn { display: none; }
  .hm-set .hm-set-new { animation: none; transform: none; }
  .hm-obj--spin { animation: none; }
  .hm-door .hm-m { animation: none !important; transition: none !important; transform: none !important; }
  .hm-door .hm-m-glow, .hm-door .hm-m-spill { opacity: 0 !important; }
}

/* Mission band (Foundation: Preserve + Promote), after the hero */
.hm-mission-sides { gap: clamp(16px, 3vw, 32px); margin-top: var(--s-6); }
.hm-mission-side { padding: clamp(20px, 3vw, 32px); border: 1px solid rgba(255,255,255,.18); border-top: 3px solid var(--sec-accent); border-radius: var(--r-card); background: var(--sec-deep-2); }
/* mission card icons (tools/icons.py; same drawings as the Foundation pages, dark-card colours) */
.hm-ico { display: block; width: 56px; height: 56px; margin-bottom: 14px; padding: 7px; border-radius: 16px; background: var(--sec-tint); }
.hm-ico .i-s { stroke: var(--sec-deep); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hm-ico .i-s:not(.i-p):not(.i-a):not(.i-g) { fill: none; }
.hm-ico .i-thick { stroke-width: 5; }
.hm-ico .i-p { fill: #FFFDF7; }
.hm-ico .i-a { fill: #C9A557; }
.hm-ico .i-g { fill: var(--sec-sig); }
.hm-mission-k { font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sec-accent); }
.hm-mission-side h3 { margin-top: 10px; font: var(--sec-display-weight) clamp(1.9rem, 3.4vw, 2.6rem)/1 var(--sec-display); color: #fff; }
.hm-mission-side p:not(.hm-mission-k) { margin-top: 10px; color: var(--sec-mist); max-width: 46ch; }
.hm-mission-side .link-arrow { display: inline-block; margin-top: 14px; color: var(--sec-accent); }

/* hero search: WHERE always shows "Town or region" (same rule as the section heroes) */
@media (min-width: 1201px) { .hm-hero .search { grid-template-columns: minmax(0, 1.6fr) minmax(170px, 1fr) auto; } }
@media (min-width: 761px) and (max-width: 1200px) {
  .hm-hero .search { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .hm-hero .search-go { grid-column: 1 / -1; min-height: 52px; }
}