/* ==========================================================================
   MUSEUMS & HERITAGE: "The Roadside Marker"  (round 3)
   Object world: our own cast-aluminum roadside marker (silver plate, raised
   black border, black caps; no seal, no agency text, no marker number),
   a wooden specimen/archive drawer cabinet with brass label holders,
   manila accession tags on string, a hanging exhibition banner, tabbed
   archival folders, an exhibit vitrine and a museum object label.
   Loads after shell.css. Adds the object world only; never restyles shared
   components (cards, .ev, chips, header, footer, search).
   Prefix: h-
   ========================================================================== */

.sec-museums {
  --h-umber: #2A2320;      /* archive umber (= --sec-deep) */
  --h-umber-2: #3A302B;
  --h-ink: #6E4526;        /* umber ink on light (= --sec-ink) */
  --h-silver: #D3D6D8;     /* cast silver */
  --h-black: #151515;      /* marker black */
  --h-manila: #E9DDBF;     /* folder / tag stock */
  --h-manila-2: #E2D3AC;   /* folder tab */
  --h-cream: #F3EAD3;      /* label card stock */
  --h-brass: #B8914A;
  --h-wood: #4D3828;
  --h-text-2: #3D342E;     /* secondary text on manila/cream: 9.9:1 on manila */
  --f-road: "Overpass", "Roboto Condensed", "Liberation Sans Narrow", "Arial Narrow", sans-serif;
  --sec-display: "Overpass", "Roboto Condensed", "Liberation Sans Narrow", "Arial Narrow", sans-serif;
  --f-label: "Cormorant Garamond", Georgia, serif;
  /* cast plate: brushed aluminium */
  --h-cast:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px),
    linear-gradient(165deg, #E6E8EA 0%, #CDD0D3 38%, #DDE0E2 56%, #BEC2C6 100%);
}

/* icon sprite holder (symbols only; nothing visible) */
.h-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* heading flourish: one Cormorant italic word per headline */
.sec-museums .block-title em {
  font-family: var(--f-label); font-style: italic; font-weight: 600;
  text-transform: none; letter-spacing: 0; font-size: 1.12em; line-height: .8;
  color: var(--h-ink); padding: 0 .06em;
}
.sec-museums .block--deep .block-title em { color: var(--h-silver); }
.sec-museums .list-cta .block-title em { color: var(--h-manila); }
.sec-museums .block-title { letter-spacing: .01em; }

/* ==========================================================================
   [0] THE CAST PLATE (shared by the hero marker and the heritage marker)
   ========================================================================== */
.h-plate {
  position: relative; overflow: hidden;
  background: var(--h-cast);
  color: var(--h-black);
  border: 8px solid var(--h-black); border-radius: 7px;
  box-shadow:
    inset 0 0 0 3px #C3C7CA,          /* silver gap inside the raised border */
    inset 0 0 0 5px #1E1E1E,          /* fine inner bead */
    inset 0 2px 0 6px rgba(255,255,255,.35),
    0 1px 0 1px #000, 0 26px 50px rgba(0,0,0,.5);
  text-align: center;
}
/* letters read as cast: light catch below, shade above */
.h-plate p, .h-plate h1, .h-plate h2 { text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 -1px 0 rgba(0,0,0,.18); }

/* ==========================================================================
   [1] HERO: headline left; the marker stands by the road at dusk
   ========================================================================== */
.h-hero {
  position: relative; overflow: hidden; isolation: isolate;
  color: #F5F1E8;
  background:
    radial-gradient(ellipse 55% 30% at 26% 100%, rgba(233,164,106,.30), transparent 70%),
    radial-gradient(ellipse 40% 50% at 85% 0%, rgba(211,214,216,.10), transparent 70%),
    linear-gradient(180deg, #1F1A17 0%, #2A2320 42%, #46342A 78%, #6A4A33 100%);
  padding: clamp(36px, 5vw, 64px) 0 34px;
}
.h-hero::before {                          /* paper grain over the dusk */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(245,241,232,.05) 1px, transparent 1.4px) 0 0 / 6px 6px;
}
.h-land { position: absolute; left: 0; right: 0; bottom: 0; height: 132px; z-index: -1;
  background: linear-gradient(180deg, #1C1714, #120E0C); }
.h-pines { position: absolute; left: 0; bottom: 100%; width: 100%; height: 64px; fill: #1C1714; }
.h-plaza {                                  /* a pale path from the foot of the steps */
  position: absolute; inset: 0; background: #2D2622;
  clip-path: polygon(70% 0, 82% 0, 96% 100%, 56% 100%);
}

.h-hero-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px); align-items: end;
}
.h-hero-copy { align-self: center; padding-bottom: 110px; }
.h-hero .eyebrow { color: var(--h-silver); }
.h-hero-title {
  margin: 4px 0 18px;
  font: 900 clamp(2.15rem, 4vw, 3.4rem)/.98 var(--f-road); text-transform: uppercase; letter-spacing: .005em;
  color: #F5F1E8; text-shadow: 3px 3px 0 var(--h-black);
}
.h-hero-title span { display: block; }
.h-hero-title em {
  display: block; margin-top: -.02em;
  font: italic 600 1.36em/.82 var(--f-label); text-transform: none; letter-spacing: 0;
  color: var(--h-silver); text-shadow: none;
}
.h-hero-sub { max-width: 32em; font-size: clamp(16.5px, 1.45vw, 19px); line-height: 1.55; color: var(--sec-mist); margin-bottom: 22px; }
.h-hero .search { box-shadow: 0 0 0 1px rgba(0,0,0,.2), 7px 7px 0 var(--h-black), 0 18px 40px rgba(0,0,0,.4); }
.h-hero .search-go { font-family: var(--f-road); font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.h-hero .search-alt a { color: #F5F1E8; }
.h-hero-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.h-hero-kinds a {                          /* brass label holders, as on the drawers */
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px;
  background: var(--h-cream); border: 2px solid var(--h-brass); border-radius: 2px;
  box-shadow: 0 2px 0 rgba(0,0,0,.45);
  font: 800 12.5px/1 var(--f-road); letter-spacing: .07em; text-transform: uppercase; color: var(--h-black); text-decoration: none;
}
.h-hero-kinds a:hover { text-decoration: underline; text-underline-offset: .2em; }
.h-hk-icon { width: 20px; height: 20px; color: var(--h-ink); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.h-plate-crest { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
.h-plate-crest::before, .h-plate-crest::after { content: ""; flex: 1; max-width: 80px; height: 2px; background: var(--h-black); }
.h-plate-crest svg { width: 30px; height: 30px; color: var(--h-black); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linejoin: round; }
.h-plate-title { font: 900 clamp(1.9rem, 3.1vw, 2.75rem)/1 var(--f-road); text-transform: uppercase; letter-spacing: .015em; }
.h-plate-title span { font-size: .7em; vertical-align: .12em; }
.h-plate-text {
  max-width: 32ch; margin: 14px auto 0;
  font: 700 clamp(13px, 1.05vw, 15px)/1.42 var(--f-road); text-transform: uppercase; letter-spacing: .05em;
}


/* ==========================================================================
   [2] KINDS: the drawer cabinet
   ========================================================================== */
.h-cabinet {
  position: relative; padding: 42px clamp(14px, 2vw, 24px) clamp(18px, 2vw, 26px);
  border-radius: 6px;
  background:
    repeating-linear-gradient(178deg, rgba(0,0,0,.07) 0 2px, transparent 2px 9px, rgba(255,255,255,.025) 9px 10px, transparent 10px 17px),
    linear-gradient(180deg, #3E2D20, #33251B);
  box-shadow: inset 0 0 0 2px #24180F, inset 0 6px 0 rgba(255,255,255,.04), 0 28px 50px rgba(42,35,32,.28);
}
.h-cabinet-plate {
  position: absolute; top: 11px; left: 50%; translate: -50% 0;
  padding: 3px 14px; border-radius: 2px;
  background: linear-gradient(180deg, #D8B66E, #B48C45);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.15);
  font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--h-umber);
  white-space: nowrap;
}
.h-drawers { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.h-drawers li { position: relative; display: flex; background: #160F0A; border-radius: 3px; }  /* the dark slot behind each drawer */
.h-drawer {
  position: relative; flex: 1; display: flex; flex-direction: column;
  padding: 16px 16px 40px; min-height: 196px; text-decoration: none; color: inherit;
  border-radius: 3px;
  background:
    repeating-linear-gradient(176deg, rgba(0,0,0,.06) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, #5E4632, #4B3727);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.09), inset 0 -4px 0 rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.35);
  transition: transform .28s cubic-bezier(.3,.7,.3,1), box-shadow .28s;
}
.h-drawer:hover, .h-drawer:focus-visible {
  transform: translateY(12px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.09), inset 0 -4px 0 rgba(0,0,0,.28), 0 18px 26px rgba(0,0,0,.5);
}
.h-card {                                   /* brass label holder + card stock */
  display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 10px; align-content: start;
  background: var(--h-cream); color: var(--h-black);
  border: 3px solid var(--h-brass); border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 2px 0 rgba(0,0,0,.35);
  padding: 10px 12px 12px;
}
.h-card-icon { grid-row: 1 / span 3; width: 34px; height: 34px; margin-top: 2px; color: var(--h-ink);
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.h-card-no { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.h-card-title { font: 700 22px/1.04 var(--f-label); margin-top: 2px; }
.h-drawer:hover .h-card-title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .14em; }
.h-card-in { font-size: 13px; line-height: 1.38; color: var(--h-text-2); margin-top: 6px; }
.h-pull {
  position: absolute; left: 50%; bottom: 13px; width: 66px; height: 13px; translate: -50% 0;
  border-radius: 2px 2px 22px 22px;
  background: linear-gradient(180deg, #E2C27A, #A27C3B 70%, #7E5E2A);
  box-shadow: 0 3px 4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.4);
}
.h-pull::before, .h-pull::after { content: ""; position: absolute; top: 3px; width: 5px; height: 5px; border-radius: 50%; background: #5A4220; }
.h-pull::before { left: 6px; } .h-pull::after { right: 6px; }
/* drawer 07 rests half-open: folder tabs show in the gap */
.h-drawer-open .h-drawer { transform: translateY(12px); box-shadow: inset 0 2px 0 rgba(255,255,255,.09), inset 0 -4px 0 rgba(0,0,0,.28), 0 16px 24px rgba(0,0,0,.45); }
.h-drawer-inside { position: absolute; left: 10px; right: 10px; top: -13px; height: 13px; display: flex; gap: 4px; align-items: flex-end; overflow: hidden; }
.h-drawer-inside i { flex: 1; height: 100%; background: var(--h-manila); border-radius: 3px 3px 0 0; box-shadow: inset 0 -1px 0 rgba(0,0,0,.2); }
.h-drawer-inside i:nth-child(2n) { height: 70%; background: #D9C89D; }
.h-drawer-inside i:nth-child(3) { height: 85%; background: #CBB98C; flex: .6; }

/* ==========================================================================
   [3] EVENTS: the exhibition banner (cord, rod, pole pocket, grommets,
   printed graphic, weighted hem)
   ========================================================================== */
.h-events-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.h-banner {
  position: relative; display: block; padding-top: 50px; text-decoration: none; color: #F5F1E8;
  transform-origin: 50% 0; animation: h-sway 7s ease-in-out infinite alternate;
}
@keyframes h-sway { from { rotate: -.45deg; } to { rotate: .45deg; } }
.h-banner-hang { position: absolute; top: 0; left: 10%; right: 10%; height: 46px; }
.h-banner-hang svg { width: 100%; height: 46px; }
.h-banner-hang path { fill: none; stroke: #8A8F93; stroke-width: 2; vector-effect: non-scaling-stroke; }
.h-banner-hang i { position: absolute; left: 50%; top: -6px; width: 14px; height: 14px; translate: -50% 0; border-radius: 50%; border: 3px solid #8A8F93; background: transparent; }
.h-banner-rod {
  position: absolute; z-index: 2; top: 44px; left: -8px; right: -8px; height: 10px; border-radius: 5px;
  background: linear-gradient(180deg, #A2A7AB, #4A4E52 55%, #24272A);
  box-shadow: 0 3px 6px rgba(0,0,0,.35);
}
.h-banner-rod::before, .h-banner-rod::after { content: ""; position: absolute; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #D3D6D8, #4A4E52); }
.h-banner-rod::before { left: -10px; } .h-banner-rod::after { right: -10px; }
.h-banner-cloth {
  position: relative; display: block;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 5px),
    var(--h-ink);
  box-shadow: 0 30px 44px rgba(42,35,32,.32), inset 0 0 0 1px rgba(0,0,0,.2);
  transition: box-shadow .2s;
}
.h-banner:hover .h-banner-cloth { box-shadow: 0 36px 54px rgba(42,35,32,.42); }
.h-banner-pocket {                            /* the pole pocket the rod runs through */
  display: block; height: 26px; background: #5A371B;
  border-bottom: 2px dashed rgba(233,221,191,.45);
  box-shadow: inset 0 6px 8px rgba(0,0,0,.25);
}
.h-banner-grommets::before, .h-banner-grommets::after {
  content: ""; position: absolute; top: 36px; width: 12px; height: 12px; border-radius: 50%;
  background: #2A2320; box-shadow: 0 0 0 3px #B5BABD, 0 0 0 4px rgba(0,0,0,.3);
}
.h-banner-grommets::before { left: 18px; } .h-banner-grommets::after { right: 18px; }
.h-banner-art { display: block; margin: 28px 22px 0; aspect-ratio: 320 / 210; overflow: hidden; }
.h-banner-art svg { width: 100%; height: 100%; }
.h-banner-text { display: flex; flex-direction: column; padding: 22px clamp(22px, 2.6vw, 32px) 30px; }
.h-banner-kicker { font: 500 12px/1 var(--font-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--h-silver); }
.h-banner-title { margin-top: 14px; font: 900 clamp(40px, 4.2vw, 60px)/.92 var(--f-road); text-transform: uppercase; letter-spacing: .005em; color: #F5F1E8; }
.h-banner-sub { margin-top: 8px; font: italic 600 clamp(24px, 2.2vw, 30px)/1.05 var(--f-label); color: var(--h-manila); }
.h-banner-rule { display: block; width: 72px; height: 3px; background: var(--h-silver); margin: 20px 0 16px; }
.h-banner-venue { font: 700 20px/1.25 var(--font-ui); }
.h-banner:hover .h-banner-venue { text-decoration: underline; text-underline-offset: .15em; }
.h-banner-town { margin-top: 6px; font: 500 12.5px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--h-manila); }
.h-banner-date { margin-top: 22px; font: 800 26px/1 var(--f-road); letter-spacing: .06em; text-transform: uppercase; color: var(--h-silver); }
.h-banner-foot { margin-top: 10px; font: 500 11px/1.3 var(--font-mono); letter-spacing: .06em; color: var(--h-manila); }
.h-banner-hem { display: block; height: 12px; margin: 0 -6px; border-radius: 6px; background: linear-gradient(180deg, #8A8F93, #3B3F42 60%, #24272A); box-shadow: 0 6px 10px rgba(0,0,0,.25); }

/* ==========================================================================
   [4] PLACES: card art = object silhouette + manila accession tag on string
   ========================================================================== */
.h-art {
  background:
    linear-gradient(rgba(211,214,216,.06) 1px, transparent 1px) 0 0 / 100% 18px,
    linear-gradient(90deg, rgba(211,214,216,.06) 1px, transparent 1px) 0 0 / 18px 100%,
    var(--sec-deep);
}
.h-art-obj { position: absolute; left: 22px; top: 50%; width: 64px !important; height: 64px !important; translate: 0 -50%;
  color: var(--h-silver); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.h-art::after {                               /* the string from object to tag hole */
  content: ""; position: absolute; left: 82px; right: 132px; top: 45px; height: 1.5px;
  background: #CFC6BA; transform: rotate(-6deg); transform-origin: 100% 50%;
}
.h-tag {
  position: absolute; right: 18px; top: 20px; width: 132px; height: 62px;
  padding: 10px 10px 0 32px;
  background:
    radial-gradient(circle at 15px 50%, var(--sec-deep) 0 5px, #C7B489 5.5px 9px, transparent 9.5px),
    var(--h-manila);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  rotate: 4deg; transition: rotate .3s;
  font: 500 10px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--h-text-2);
}
.h-tag b { display: block; font: 800 16px/1.1 var(--f-road); letter-spacing: .02em; color: var(--h-black); margin-bottom: 4px; }
.card:hover .h-tag { rotate: -2deg; }

/* ==========================================================================
   [5] PEOPLE: mini-marker monograms + the card index drawer
   ========================================================================== */
.h-people { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: start; }
.h-mono { display: grid; place-items: center; align-content: center; padding-bottom: 14px; }
.h-mono b {
  position: relative; display: block; padding: 6px 5px 5px; min-width: 50px; text-align: center;
  background: var(--h-cast); border: 3px solid var(--h-black); border-radius: 3px;
  font: 900 12px/1 var(--f-road); letter-spacing: .04em; color: var(--h-black);
}
.h-mono b::after { content: ""; position: absolute; left: 50%; top: 100%; width: 5px; height: 18px; translate: -50% 3px; background: #0E0E0E; }

.h-index-title { font: 700 30px/1.05 var(--f-label); color: var(--h-black); }
.h-index-note { margin-top: 6px; font-size: 15px; color: var(--h-text-2); }
.h-index-tray {                               /* the open card drawer, seen from the front */
  position: relative; margin-top: 18px; padding: 16px 16px 0;
  border-radius: 6px 6px 4px 4px;
  background:
    repeating-linear-gradient(178deg, rgba(0,0,0,.07) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #2E2117, #3E2D20);
  box-shadow: inset 0 10px 18px rgba(0,0,0,.45), 0 22px 36px rgba(42,35,32,.25);
}
.h-index-cards { list-style: none; display: grid; }
.h-index-cards li { position: relative; }
.h-index-cards li + li { margin-top: -5px; }
.h-index-cards a {
  position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); column-gap: 10px; align-items: baseline;
  padding: 10px 14px 12px; border-radius: 5px 5px 0 0;
  background: #FBF6E9; color: var(--h-black); text-decoration: none;
  box-shadow: 0 -2px 5px rgba(0,0,0,.22), inset 0 1px 0 #FFFFFF;
  transition: transform .2s ease;
}
.h-index-cards li:nth-child(4n+1) a { background: #EFE3C2; }       /* divider cards */
.h-index-cards li:nth-child(4n+1) a::before {                       /* divider tab */
  content: ""; position: absolute; right: 22px; top: -9px; width: 46px; height: 11px; border-radius: 4px 4px 0 0; background: #EFE3C2;
}
.h-index-cards a:hover { transform: translateY(-7px); }
.h-index-cards a:hover b { text-decoration: underline; text-underline-offset: .15em; }
.h-ic-no { grid-row: 1 / span 2; font: 500 11px/1.4 var(--font-mono); letter-spacing: .06em; color: var(--h-ink); }
.h-index-cards b { font: 600 15px/1.3 var(--font-ui); }
.h-ic-town { font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--h-text-2); margin-top: 2px; }
.h-index-front {
  position: relative; display: flex; justify-content: center; margin: 0 -16px; padding: 14px 0 40px;
  border-radius: 0 0 4px 4px;
  background: repeating-linear-gradient(176deg, rgba(0,0,0,.06) 0 2px, transparent 2px 11px), linear-gradient(180deg, #5E4632, #4B3727);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.08), 0 -4px 10px rgba(0,0,0,.35);
}
.h-index-holder {
  padding: 5px 14px; background: var(--h-cream); border: 3px solid var(--h-brass); border-radius: 2px;
  font: 800 11.5px/1.2 var(--f-road); letter-spacing: .1em; text-transform: uppercase; color: var(--h-black);
}
.h-index-more { margin-top: 18px; }

/* ==========================================================================
   [6] TOWNS: a roadside of small markers, pines behind, road in front
   ========================================================================== */
.h-towns { overflow: hidden; }
.h-towns::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 60%; pointer-events: none;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(211,214,216,.07), transparent 70%);
}
.h-roadside { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 24px; }
.h-roadside li { position: relative; display: flex; flex-direction: column; }
.h-roadside li::before {                     /* pines along the verge */
  content: ""; position: absolute; left: -12px; right: -12px; bottom: 26px; height: 30px; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30V22L8 14L14 20L22 6L30 18L38 12L46 22L56 10L64 20L74 16L82 24L92 8L100 20L110 14L120 22V30Z' fill='%231C1714'/%3E%3C/svg%3E") 0 100% / 120px 30px repeat-x;
}
.h-roadside li::after {                      /* the road: shoulder line, asphalt, center dashes */
  content: ""; position: relative; display: block; height: 26px; margin: 0 -12px;
  background:
    repeating-linear-gradient(90deg, rgba(214,182,96,.8) 0 16px, transparent 16px 32px) 0 12px / 100% 2px no-repeat,
    linear-gradient(180deg, #6B5A4E 0 2px, #2D2622 2px);
}
.h-mini { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--h-black); }
.h-mini-crest {
  position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 26px; margin-bottom: -4px;
  background: var(--h-black); border-radius: 24px 24px 0 0;
}
.h-mini-crest svg { width: 18px; height: 18px; margin-top: 4px; color: var(--h-silver); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linejoin: round; }
.h-mini-plate {
  display: block; width: 100%;
  background: var(--h-cast);
  border: 5px solid var(--h-black); border-radius: 5px;
  box-shadow: inset 0 0 0 2px #C3C7CA, inset 0 0 0 3px #1E1E1E, 0 16px 26px rgba(0,0,0,.45);
  padding: 13px 14px 15px; text-align: center;
  transition: transform .2s ease;
}
.h-mini-plate b { display: block; font: 900 21px/1.05 var(--f-road); text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.h-mini-plate span { display: block; margin-top: 7px; font: 700 12.5px/1.38 var(--f-road); text-transform: uppercase; letter-spacing: .03em; }
.h-mini:hover .h-mini-plate { transform: translateY(-4px); }
.h-mini:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.h-mini-post { flex: 1 0 56px; width: 12px; background: linear-gradient(90deg, #0A0A0A, #2C2C2C 45%, #080808); }

/* ==========================================================================
   [7] PRACTICE: three tabbed folders, each with a typed sheet, a stamp
   and a paperclip
   ========================================================================== */
.h-files { align-items: stretch; }
.h-file { position: relative; display: flex; flex-direction: column; padding-top: 32px; min-width: 0; }
.h-file-tab {
  position: absolute; top: 0; padding: 9px 18px 13px;
  background: var(--h-manila-2); border-radius: 8px 8px 0 0;
  font: 800 12px/1 var(--f-road); letter-spacing: .12em; text-transform: uppercase; color: var(--h-black);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.h-file--1 .h-file-tab { left: 18px; }
.h-file--2 .h-file-tab { left: 50%; translate: -50% 0; }
.h-file--3 .h-file-tab { right: 18px; }
.h-file-body {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px;
  background: var(--h-manila); border-radius: 6px;
  padding: 26px 22px 22px;
  box-shadow: 0 1px 0 rgba(0,0,0,.1), 0 14px 26px rgba(42,35,32,.13);
}
.h-file-body::after {                         /* paperclip */
  content: ""; position: absolute; top: -12px; right: 30px; width: 14px; height: 40px; z-index: 2;
  border: 2.5px solid #8E9398; border-radius: 8px; border-bottom-color: transparent;
}
.h-file--2 .h-file-body::after { right: auto; left: 34px; }
.h-file-body h3 { font: 700 28px/1.05 var(--f-label); color: var(--h-black); }
.h-file-body p { font-size: 15px; color: var(--h-text-2); }
.h-sheet {                                     /* the typed sheet in the folder */
  position: relative; margin: 8px -4px 6px; padding: 20px 16px 8px;
  background:
    repeating-linear-gradient(180deg, transparent 0 37px, rgba(110,69,38,.12) 37px 38px) 0 20px / 100% calc(100% - 20px) no-repeat,
    #FFFDF7;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 6px 14px rgba(42,35,32,.14);
  rotate: -.7deg;
}
.h-file--2 .h-sheet { rotate: .6deg; }
.h-file--3 .h-sheet { rotate: -.3deg; }
.h-stamp {
  position: absolute; top: -12px; right: 12px; padding: 3px 8px;
  border: 2px solid var(--h-ink); border-radius: 3px; background: rgba(255,253,247,.9);
  font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--h-ink);
  rotate: -6deg;
}
.h-file-list { list-style: none; margin: 0; }
.h-file-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 8px 0 9px; border-bottom: 1px dotted rgba(61,52,46,.35); }
.h-file-list li:last-child { border-bottom: 0; }
.h-file-list a { font-weight: 600; font-size: 14.5px; line-height: 1.3; color: var(--h-ink); text-decoration: none; }
.h-file-list a:hover { text-decoration: underline; }
.h-file-list span { font: 500 10.5px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--h-text-2); }
.h-file-body .link-arrow { margin-top: auto; }

/* ==========================================================================
   [8] HERITAGE: a vitrine holding an open ledger, with its object label;
   the marker story beside it
   ========================================================================== */
.h-heritage-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.h-vitrine { margin: 0; }
.h-vitrine-case {
  position: relative; display: grid; place-items: center; padding: 34px 26px 0; min-height: 300px; align-content: end;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,250,235,.95), transparent 75%),
    linear-gradient(135deg, rgba(255,255,255,.7), rgba(224,230,233,.45));
  border: 1px solid rgba(110,69,38,.22); border-bottom: 0;
  box-shadow: inset 0 0 0 7px rgba(255,255,255,.45), inset 0 0 0 8px rgba(110,69,38,.12), 0 22px 36px rgba(42,35,32,.14);
}
.h-ledger {
  position: relative; width: min(100%, 460px); aspect-ratio: 460 / 260;
  display: grid; grid-template-columns: 1fr 1fr; padding: 9px 10px 12px;
  transform: perspective(1000px) rotateX(12deg); transform-origin: 50% 100%;
}
.h-ledger-cover { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(180deg, #6A3E1E, #4E2C14); box-shadow: 0 16px 22px rgba(0,0,0,.28); }
.h-ledger-page {
  position: relative; display: flex; flex-direction: column; gap: 0; padding: 12px 14px; min-width: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(110,69,38,.2) 25px 26px) 0 34px / 100% 100% no-repeat,
    #F6EED8;
}
.h-ledger-l { border-radius: 4px 0 0 4px; box-shadow: inset -16px 0 18px -14px rgba(0,0,0,.4); }
.h-ledger-r { padding-right: 30px; border-radius: 0 4px 4px 0; box-shadow: inset 16px 0 18px -14px rgba(0,0,0,.4); }
.h-ledger-head { font: 800 11px/1 var(--f-road); letter-spacing: .22em; text-transform: uppercase; color: var(--h-ink); padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1.5px solid var(--h-ink); }
.h-ledger-line { display: block; font: italic 600 clamp(13.5px, 1.35vw, 17.5px)/26px var(--f-label); color: #2E2620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-ledger-ribbon { position: absolute; right: 4.5%; top: 4px; bottom: -26px; width: 10px; background: #B8914A; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%); }
.h-ledger-tag {
  position: absolute; right: -18px; top: -22px; width: 116px; height: 50px; padding: 8px 8px 0 28px;
  background: radial-gradient(circle at 13px 50%, #EEF1F2 0 4.5px, #C7B489 5px 8px, transparent 8.5px), var(--h-manila);
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  rotate: 9deg; box-shadow: 0 4px 6px rgba(0,0,0,.2);
  font: 500 9.5px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--h-text-2);
}
.h-ledger-tag b { display: block; font: 800 14px/1.1 var(--f-road); color: var(--h-black); margin-bottom: 3px; }
.h-ledger-stand { display: block; width: 74%; height: 18px; margin-top: -2px; background: linear-gradient(180deg, #4A3B32, #3A302B); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.h-vitrine-glass {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.4) 30%, transparent 38%, transparent 62%, rgba(255,255,255,.22) 66%, transparent 70%);
}
.h-vitrine-plinth {
  display: block; height: 64px; margin: 0 14px;
  background: linear-gradient(180deg, #4A3B32 0 8px, #3A302B 8px, #2A2320);
  box-shadow: 0 20px 30px rgba(42,35,32,.2);
}
.h-label {
  display: block; position: relative; margin: -34px 34px 0; padding: 14px 18px 12px;
  background: #FFFFFF; border: 1px solid var(--line); border-left: 4px solid var(--h-ink);
  box-shadow: 0 6px 14px rgba(42,35,32,.16);
}
.h-label span { display: block; }
.h-label-title { font: 700 21px/1.15 var(--f-label); color: var(--h-black); }
.h-label-line { font-size: 14px; color: var(--muted); margin-top: 3px; }
.h-label-src { margin-top: 8px; font: 500 10.5px/1.35 var(--font-mono); letter-spacing: .05em; color: var(--muted); }
.h-plate--story { padding: 18px clamp(16px, 2.4vw, 28px) 20px; margin: 4px 0 22px; box-shadow: inset 0 0 0 3px #C3C7CA, inset 0 0 0 5px #1E1E1E, 0 16px 30px rgba(42,35,32,.28); }
.h-story-title { font: 900 clamp(26px, 2.8vw, 38px)/1.02 var(--f-road); text-transform: uppercase; letter-spacing: .01em; }
.h-story-text { margin: 10px auto 0; max-width: 40ch; font: 700 14.5px/1.42 var(--f-road); text-transform: uppercase; letter-spacing: .04em; }
.h-heritage-lede { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; max-width: 54ch; }
.h-heritage-more { margin-top: 18px; }

/* ==========================================================================
   [9] LIST YOUR PLACE: a big accession tag on its string
   ========================================================================== */
.h-cta-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.h-bigtag { position: relative; justify-self: center; width: min(100%, 330px); margin-top: 40px;
  transform-origin: 28px 50%; rotate: -6deg; animation: h-tag 6s ease-in-out infinite alternate; }
@keyframes h-tag { from { rotate: -7deg; } to { rotate: -3.5deg; } }
.h-bigtag-string { position: absolute; left: 6px; top: calc(50% - 120px); width: 2px; height: 128px; background: var(--h-manila); rotate: -28deg; transform-origin: 50% 100%; }
.h-bigtag-body {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 22px 24px 20px 72px;
  background: var(--h-manila); color: var(--h-black);
  clip-path: polygon(34px 0, 100% 0, 100% 100%, 34px 100%, 0 calc(100% - 34px), 0 34px);
  box-shadow: 0 20px 30px rgba(0,0,0,.25);
}
.h-bigtag-hole { position: absolute; left: 20px; top: 50%; width: 22px; height: 22px; translate: 0 -50%; border-radius: 50%;
  background: var(--sec-ink); box-shadow: 0 0 0 5px #C7B489; }
.h-bigtag-k { font: 500 11px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--h-text-2); }
.h-bigtag-no { font: 900 36px/1 var(--f-road); letter-spacing: .01em; }
.h-bigtag-what { font: italic 600 26px/1.05 var(--f-label); color: var(--h-ink); }
.h-bigtag-row { display: flex; gap: 22px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(61,52,46,.45);
  font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--h-text-2); }
.h-bigtag-row b { display: block; margin-top: 4px; font: 800 15px/1 var(--f-road); letter-spacing: .04em; color: var(--h-black); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .h-drawers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-drawer { min-height: 0; }
  .h-roadside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h-people { grid-template-columns: minmax(0, 1fr); }
  .h-index { max-width: 640px; }
}
@media (max-width: 900px) {
  .h-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .h-hero-copy { padding-bottom: 8px; }
  .h-facade { width: min(80%, 420px); margin: 0 0 18px; order: -1; }   /* picture first, then the words and the search (user, 2026-10-11) */
  .h-events-grid { grid-template-columns: minmax(0, 1fr); }
  .h-banner { max-width: 520px; }
  .h-heritage-grid { grid-template-columns: minmax(0, 1fr); }
  .h-vitrine { max-width: 480px; }
  .h-cta-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .h-hero { padding-top: 28px; padding-bottom: 18px; }
  .h-hero-title { text-shadow: 2px 2px 0 var(--h-black); }
  .h-hero .h-plate { padding: 14px 14px 16px; border-width: 6px; }
  .h-plate-crest { margin-bottom: 6px; }
  .h-plate-crest svg { width: 24px; height: 24px; }
  .h-plate-text { font-size: 12px; margin-top: 8px; }
  .h-land { height: 190px; }
  .h-facade { width: 76%; justify-self: center; }
  .h-pines { height: 44px; }
  .h-plaza { clip-path: polygon(38% 0, 62% 0, 82% 100%, 18% 100%); }
  .h-hero-kinds a { font-size: 11.5px; padding: 6px 10px 6px 7px; }
  .h-cabinet { padding: 40px 10px 12px; }
  .h-drawers { gap: 10px; }
  .h-drawer { padding: 10px 10px 34px; }
  .h-card { grid-template-columns: minmax(0, 1fr); padding: 8px 9px 10px; }
  .h-card-icon { grid-row: auto; width: 26px; height: 26px; margin: 0 0 4px; }
  .h-card-title { font-size: 19px; }
  .h-card-in { font-size: 12px; }
  .h-cabinet-plate { font-size: 9.5px; letter-spacing: .12em; }
  .h-banner-rod { left: 0; right: 0; }
  .h-banner-rod::before { left: -2px; } .h-banner-rod::after { right: -2px; }
  .h-banner-art { margin: 24px 16px 0; }
  .h-banner-text { padding: 18px 18px 24px; }
  .h-roadside {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); column-gap: 24px;
  }
  .h-roadside > li { scroll-snap-align: start; }
  .h-index-cards a { grid-template-columns: 52px minmax(0, 1fr); padding: 9px 12px 11px; }
  .h-index-cards b { font-size: 14.5px; }
  .h-vitrine-case { padding: 34px 18px 0; min-height: 260px; }
  .h-ledger-page { padding: 9px 9px; }
  .h-ledger-tag { right: -6px; }
  .h-label { margin: -26px 14px 0; }
  .h-bigtag { margin-top: 56px; }
  .h-bigtag-no { font-size: 30px; }
}

/* reduced motion: every object at rest */
@media (prefers-reduced-motion: reduce) {
  .h-lamp-glow { animation: none; opacity: 1; }
  .h-banner { animation: none; rotate: 0deg; }
  .h-bigtag { animation: none; rotate: -6deg; }
  .h-drawer { transition: none; }
}

/* ==========================================================================
   HERO MOTION (shared vocabulary across all section heroes)
   - hover / :focus-within moves are one-shot and short: 0.6-1.2 s, eased,
     always ending on the resting pose (the resting pose is unchanged);
   - all of it lives inside prefers-reduced-motion: no-preference AND behind
     .motion-toggle:not(:checked), so reduced motion or the Pause chip means
     no hover motion at all (ambient loops are paused by shell.css);
   - art is aria-hidden and only moves with transform/rotate/translate/opacity:
     no layout shift; nothing moves over a link or input.
   ========================================================================== */
.h-hk-icon { transition: rotate .9s cubic-bezier(.3,.7,.3,1), translate .9s cubic-bezier(.3,.7,.3,1); }
.h-facade { position: relative; justify-self: center; width: min(100%, 460px); margin-bottom: -6px; }
.h-facade svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 18px 26px rgba(0,0,0,.45)); }
.h-leaf { transform-box: view-box; transition: transform .9s cubic-bezier(.3,.7,.2,1); }
.h-leaf--l { transform-origin: 88px 0; }
.h-leaf--r { transform-origin: 112px 0; }
.h-spill { opacity: 0; transition: opacity .9s ease .15s; }
/* ambient: the two lamps breathe, slowly */
.h-lamp-glow { animation: h-lamp 5s ease-in-out infinite alternate; }
.h-lamp + .h-lamp .h-lamp-glow { animation-delay: -2.5s; }
@keyframes h-lamp { from { opacity: .7; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  /* hover the museum (or focus the search / a kind chip): the doors swing open, light spills down the steps */
  .motion-toggle:not(:checked) ~ * .h-facade:hover .h-leaf,
  .motion-toggle:not(:checked) ~ * .h-hero:focus-within .h-leaf { transform: scaleX(.18); }
  .motion-toggle:not(:checked) ~ * .h-facade:hover .h-spill,
  .motion-toggle:not(:checked) ~ * .h-hero:focus-within .h-spill { opacity: 1; }
  /* place-kind icons tip toward their label */
  .motion-toggle:not(:checked) ~ * .h-hero-kinds a:hover .h-hk-icon,
  .motion-toggle:not(:checked) ~ * .h-hero-kinds a:focus-visible .h-hk-icon { rotate: -10deg; translate: 0 -2px; }
}
.motion-toggle:checked ~ * .h-leaf, .motion-toggle:checked ~ * .h-spill { transition: none; }
.motion-toggle:checked ~ * .h-hk-icon { transition: none; }

/* hero search: the WHERE field always shows the whole "Town or region" placeholder
   (>= 190px column); on mid widths the button drops to its own row so neither field is squeezed */
@media (min-width: 1201px) { .h-hero .search { grid-template-columns: minmax(0, 1.4fr) minmax(190px, 1fr) auto; } }
@media (min-width: 761px) and (max-width: 1200px) {
  .h-hero .search { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .h-hero .search-go { grid-column: 1 / -1; min-height: 52px; }
}