/* ============================================================
   The Susky
   Design: Pennsylvania roadside almanac.
   Fair-poster display type, hand-painted signboards, hard
   letterpress shadows, topographic contour texture. Square
   corners. No soft shadows, no pill buttons, no emoji.
   ============================================================ */

:root {
  /* --- light: bone paper, black rules, fair-light accents --- */
  --bone:      #EDE6D6;
  --bone-2:    #E3DAC6;
  --bone-3:    #F5F0E4;
  --surface:   #F7F3E8;
  --ink:       #14161C;
  --ink-2:     #3E434F;
  --ink-3:     #6E7484;
  --rule:      #14161C;
  --rule-soft: #C7BCA3;

  --midnight:  #182A44;
  --marigold:  #E29215;
  --signal:    #C0392B;
  --river:     #2F6B63;
  --plum:      #6B3A5B;

  --on-dark:   #F2EBDC;
  --shadow:    4px 4px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);

  --wrap: 1240px;
  --display: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* --- reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bone); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }

/* Any component that sets its own `display` silently outranks the browser's
   [hidden] { display: none }, so filtering marks things hidden and nothing
   disappears while the counts insist it worked. This one line covers every
   component instead of remembering to guard each new one. */
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1,h2,h3,h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { max-width: 780px; }

/* --- topographic contour texture, fixed behind everything --- */
.topo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5; color: var(--rule-soft);
}

/* --- display type --- */
.d {
  font-family: var(--display); font-weight: 400; line-height: .88;
  letter-spacing: .005em; text-transform: uppercase;
}
.label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}

/* ============================================================ NOTICE */
.notice {
  background: var(--marigold); color: #1A1206;
  border-bottom: 2px solid var(--ink); font-size: 13.5px; padding: 10px 0; line-height: 1.4;
}
.notice__inner { display: flex; gap: 12px; align-items: baseline; }
.notice b { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.notice code { font-family: var(--mono); font-size: 12.5px; background: rgba(0,0,0,.12); padding: 1px 5px; }

/* ============================================================ MASTHEAD */
.masthead { background: var(--bone); border-bottom: 3px solid var(--rule); position: sticky; top: 0; z-index: 60; }
/* Anchors sit on the inner .wrap, past the section's own top padding, so a
   jump scrolls straight past the break line to the content itself instead
   of stopping short and leaving a gap of bare paper above it. */
#this-week, #map, #new-to-valley, #board { scroll-margin-top: 78px; }
.masthead__inner { display: flex; align-items: stretch; gap: 0; min-height: 72px; position: relative; }
.brand {
  display: flex; flex-direction: column; justify-content: center;
  text-decoration: none; padding-right: 24px; margin-right: auto;
  border-right: 2px solid var(--rule);
}
.brand__name { font-family: var(--display); font-size: 30px; line-height: .86; text-transform: uppercase; letter-spacing: .01em; }
.brand__name span { color: var(--signal); }
/* A spoken aside, not a label — so it drops the uppercase and the wide
   tracking the other mono bits use. It's the only lowercase type in the
   masthead, which is what makes it read as someone talking. */
.brand__sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .005em;
  color: var(--ink-3); margin-top: 5px; white-space: nowrap; }

.nav { display: none; align-items: stretch; }
/* Raised from 940: the subtitle widened the brand block, so the horizontal
   nav needs more room before it stops overflowing the masthead. */
@media (min-width: 1060px) { .nav { display: flex; } }
.nav a {
  display: flex; align-items: center; padding: 0 20px; text-decoration: none;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  border-right: 1px solid var(--rule-soft); transition: background .12s, color .12s;
}
.nav a:first-child { border-left: 1px solid var(--rule-soft); }
.nav a:hover { background: var(--ink); color: var(--bone); }
.nav a[aria-current="page"] { background: var(--signal); color: #fff; }

.mast__actions { display: flex; align-items: center; gap: 10px; padding-left: 18px; }

/* ============================================================ BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border: 2px solid var(--ink); background: var(--bone-3); color: var(--ink);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border-radius: 0;
  box-shadow: var(--shadow-sm); transition: transform .1s, box-shadow .1s, background .12s;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
.btn--solid { background: var(--signal); color: #fff; border-color: var(--ink); }
.btn--dark { background: var(--midnight); color: var(--on-dark); }
.btn--gold { background: var(--marigold); color: #1A1206; }
.btn--sm { padding: 8px 14px; font-size: 11px; box-shadow: 2px 2px 0 var(--ink); }
.btn--lg { padding: 16px 30px; font-size: 14px; }
.btn--flat { box-shadow: none; }
.btn--flat:hover { transform: none; box-shadow: none; background: var(--ink); color: var(--bone); }

.icon-btn {
  width: 42px; height: 42px; border: 2px solid var(--ink); background: transparent;
  display: grid; place-items: center; cursor: pointer; border-radius: 0; flex: none;
}
.icon-btn:hover { background: var(--ink); color: var(--bone); }
.menu-btn { display: grid; }
@media (min-width: 1060px) { .menu-btn { display: none; } }
.mobile-nav { display: none; border-top: 2px solid var(--rule); }
.mobile-nav.is-open { display: block; padding-bottom: 10px; }
@media (min-width: 1060px) { .mobile-nav.is-open { display: none; } }
.mobile-nav a {
  display: block; padding: 14px 4px; text-decoration: none;
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--rule-soft);
}

/* ============================================================ MARQUEE */
.marquee {
  background: var(--midnight); color: var(--on-dark); border-bottom: 3px solid var(--rule);
  overflow: hidden; padding: 5px 0; white-space: nowrap;
}
.marquee__track { display: inline-block; animation: slide 46s linear infinite; }
.marquee__track span {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  padding: 0 11px; opacity: .85;
}
.marquee__track span::after { content: "◆"; margin-left: 11px; color: var(--marigold); opacity: .8; font-size: 8px; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================ HERO */
.hero { padding: 60px 0 48px; border-bottom: 3px solid var(--rule); }
.hero__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.hero__kicker .label { color: var(--signal); }
.hero__title {
  font-family: var(--display); text-transform: uppercase; line-height: .94;
  font-size: clamp(2.2rem, 5.6vw, 4.3rem); letter-spacing: -.005em; margin-bottom: 26px;
  max-width: 20ch;
}
/* the homepage headline is short by design, so it can go full poster scale */
.hero__title--xl { font-size: clamp(3rem, 10.5vw, 8rem); line-height: .92; max-width: none; }
.hero__title .out {
  color: transparent; -webkit-text-stroke: 2px var(--ink);
}
.hero__title .gold { color: var(--marigold); -webkit-text-stroke: 2px var(--ink); }
.hero__lede { font-size: clamp(1.05rem, 1.8vw, 1.3rem); max-width: 54ch; color: var(--ink-2); margin-bottom: 30px; }
/* Header doodle: floats in the empty right side of the header, centred on
   the header's full height. Sized against that height too, so it always
   keeps clear of the rule above and below however tall the header runs. */
.hero--doodle { position: relative; }
.doodle {
  position: absolute; top: 0; bottom: 0;
  right: calc(max(0px, (100% - var(--wrap)) / 2) + 64px);
  display: flex; align-items: center; pointer-events: none;
}
/* A fixed box the drawing scales into (object-fit), so small doodles grow to
   match big ones instead of sitting at their pixel size. */
.doodle img {
  display: block; width: 240px; height: min(180px, calc(100% - 84px)); object-fit: contain;
  transform: rotate(-8deg); animation: doodle-float 6.5s ease-in-out infinite;
}
@keyframes doodle-float {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-10px) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) { .doodle img { animation: none; } }
/* A wide doodle (the field-trip route) needs more room and less tilt, or a
   few degrees swing its ends well above and below its middle. */
.doodle--wide img {
  width: 400px; height: min(130px, calc(100% - 84px)); transform: rotate(-3deg);
  animation-name: doodle-float-wide;
}
@keyframes doodle-float-wide {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-8px) rotate(-1.5deg); }
}
/* The homepage's sits beside the intro and buttons rather than centred on
   the whole header: the oversized headline runs nearly edge to edge above. */
.hero__foot { position: relative; }
.doodle--hero { top: 20px; bottom: -20px; }
.doodle--hero img {
  width: 300px; height: min(210px, calc(100% - 30px)); transform: rotate(-4deg);
  animation-name: doodle-float-hero;
}
@keyframes doodle-float-hero {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-10px) rotate(-2deg); }
}
@media (max-width: 1199px) {
  .doodle img { width: 180px; height: min(140px, calc(100% - 84px)); }
  .doodle--hero { display: none; }
  .doodle--wide img { width: 260px; height: min(84px, calc(100% - 84px)); }
}
@media (max-width: 899px) { .doodle { display: none; } }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
/* All three the same white box with a hard shadow, turning signal red on
   hover rather than the site's usual ink-invert — these are the one place
   that reaction should read as "go" rather than just "active". */
.hero__cta .btn {
  background: var(--bone-3); color: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-sm);
}
.hero__cta .btn:hover {
  background: var(--signal); color: #fff; border-color: var(--ink);
  transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink);
}
.hero__cta .btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }

.stat-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 3px solid var(--rule); margin-top: 46px; background: var(--surface);
}
.stat { padding: 20px 22px; border-right: 2px solid var(--rule); }
.stat:last-child { border-right: 0; }
@media (max-width: 640px) { .stat { border-right: 0; border-bottom: 2px solid var(--rule); } .stat:last-child { border-bottom: 0; } }
.stat__n { font-family: var(--display); font-size: 2.8rem; line-height: .85; }
.stat__l { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-top: 9px; }

/* ============================================================ SECTIONS */
.section { padding: 56px 0; border-bottom: 3px solid var(--rule); }
.section--dark { background: var(--midnight); color: var(--on-dark); }
.section--dark .label { color: var(--marigold); }
.section--dark .sect__head p { color: rgba(242,235,220,.72); }
.section--gold { background: var(--marigold); color: #1A1206; }
.section--gold .label { color: #5C3D06; }

.sect__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 18px; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 2px solid currentColor;
}
.sect__head h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.4rem); line-height: .88; }
.sect__head p { margin: 10px 0 0; color: var(--ink-2); max-width: 56ch; font-size: 15.5px; }
.sect__more {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 3px; white-space: nowrap;
}

/* ============================================================ EVENT STRIP
   The homepage's "this week" row — one tall, narrow column per day so a
   busy day shows everything on it, not just whatever fit under a flat
   top-N cutoff. Columns share the row's width by flex-grow rather than
   scrolling; Mon–Wed carry less weight than Thu–Sun, where the actual
   plans are. Stacks to a single column on narrow viewports instead of
   scrolling sideways. */
.ev-strip {
  display: flex; align-items: stretch; gap: 0; border-top: 2px solid var(--rule);
  border-left: 2px solid var(--rule);
}
.ev-day {
  flex: 1 1 0; min-width: 0; border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
  padding: 16px 14px; background: var(--surface);
}
.ev-day--minor { flex-grow: .7; padding: 13px 11px; opacity: .82; }
.ev-day--major { flex-grow: 1.5; }
.ev-day__date { margin-bottom: 14px; }
.ev-day__dow {
  display: block; font-family: var(--display); text-transform: uppercase; font-size: 1.05rem;
  line-height: .95; color: var(--signal);
}
.ev-day--minor .ev-day__dow { font-size: .85rem; color: var(--ink-2); }
.ev-day__mo {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.ev-day__d { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--ink-3); margin-left: 3px; }
.ev-day__list { display: flex; flex-direction: column; gap: 12px; }
.ev-day__item {
  display: block; padding-top: 10px; border-top: 1px solid var(--rule-soft);
}
.ev-day__item:first-child { padding-top: 0; border-top: 0; }
a.ev-day__item { color: inherit; text-decoration: none; }
a.ev-day__item:hover .ev-day__title { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
a.ev-day__item:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.ev-day__time {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  color: var(--ink-3); margin-bottom: 3px;
}
.ev-day__title {
  display: block; font-family: var(--display); text-transform: uppercase; font-size: 1.02rem;
  line-height: 1.05; margin-bottom: 3px;
}
.ev-day--minor .ev-day__title { font-size: .88rem; }
.ev-day__where { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); }
.ev-day__none { margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-3); }
@media (max-width: 760px) {
  .ev-strip { flex-direction: column; }
  .ev-day, .ev-day--minor, .ev-day--major { flex-grow: 1; border-right: 2px solid var(--rule); }
}

/* ============================================================ CARDS */
.grid { display: grid; gap: 0; border-top: 2px solid var(--rule); border-left: 2px solid var(--rule); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.card {
  background: var(--surface); border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: inherit; position: relative;
  transition: background .14s, color .14s;
}
a.card:hover { background: var(--ink); color: var(--bone); }
a.card:hover .card__meta, a.card:hover .card__body { color: rgba(237,230,214,.78); }
a.card:hover .stamp { border-color: var(--bone); color: var(--bone); }
.card__name { font-family: var(--display); text-transform: uppercase; font-size: 1.35rem; line-height: .95; }
.card__meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.card__body { color: var(--ink-2); font-size: 15px; margin: 0; }
.card__foot { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.card--sponsored { background: var(--bone-3); }
.card--sponsored::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--marigold);
}

/* --- stamps (badges) --- */
.stamp {
  display: inline-flex; align-items: center; font-family: var(--mono); font-size: 9.5px;
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase; padding: 4px 8px;
  border: 1.5px solid var(--ink-3); color: var(--ink-3); white-space: nowrap; border-radius: 0;
}
.stamp--pick { border-color: var(--signal); color: var(--signal); }
.stamp--sponsored { background: var(--marigold); border-color: var(--ink); color: #1A1206; }
.stamp--unverified { border-style: dashed; border-color: var(--signal); color: var(--signal); }
.stamp--sample { background: var(--signal); border-color: var(--signal); color: #fff; }
.stamp--price { font-family: var(--display); letter-spacing: .08em; font-size: 12px; padding: 2px 8px; }
.stamp--amenity { border-color: var(--river); color: var(--river); }

/* ============================================================ EVENTS */
/* The events list lives inside a bounded box under the calendar rather than
   running the length of the page — pick a day and the answer is right there,
   not a scroll away. The list itself scrolls internally past a handful of
   events; the page doesn't have to. */
.evpanel { border: 3px solid var(--ink); background: var(--surface); box-shadow: var(--shadow); margin-bottom: 30px; }
.evpanel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 2px solid var(--rule); background: var(--bone-3);
}
.evpanel__head h2 { font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; line-height: .95; }
.evpanel .evlist { max-height: 620px; overflow-y: auto; border-top: 0; }
.annual__empty { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--ink-3); margin: 0; }
.evlist { border-top: 2px solid var(--rule); }
.ev { border-bottom: 2px solid var(--rule); }
.ev__summary {
  display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start;
  padding: 22px 0; text-decoration: none; color: inherit; list-style: none;
  transition: background .14s, padding .14s;
}
.ev__summary::-webkit-details-marker { display: none; }
.ev__summary:hover { background: var(--surface); padding-inline: 14px; }
/* Only an actual <details> row gets the click affordance — a row with
   nothing more to show stays a plain, honest summary. */
details.ev > .ev__summary { cursor: pointer; padding-right: 34px; position: relative; }
details.ev > .ev__summary::after {
  content: "+"; position: absolute; right: 6px; top: 22px; font-family: var(--display);
  font-size: 1.5rem; line-height: 1; color: var(--ink-3);
}
details.ev[open] > .ev__summary::after { content: "\2212"; color: var(--signal); }
.ev__date { text-align: center; border-right: 2px solid var(--rule); padding-right: 18px; }
.ev__mo { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--signal); }
.ev__d { font-family: var(--display); font-size: 3rem; line-height: .82; margin: 2px 0; }
.ev__dow { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.ev__title { font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; line-height: .95; margin-bottom: 7px; }
.ev__where { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ev__blurb { font-size: 15.5px; color: var(--ink-2); margin: 9px 0 0; max-width: 62ch; }
.ev__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.ev__more { margin-left: 120px; padding: 0 14px 22px; display: flex; flex-direction: column; gap: 10px; }
.ev__link {
  align-self: flex-start; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--signal); text-decoration: none; border-bottom: 1px solid currentColor;
}
.ev__link:hover { color: var(--ink); }
.ev__addr {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
}
@media (max-width: 640px) {
  .ev__summary { grid-template-columns: 66px 1fr; gap: 14px; }
  .ev__d { font-size: 2.1rem; }
  .ev__more { margin-left: 80px; }
}

.annual {
  background: var(--surface); border: 2px solid var(--rule); padding: 20px;
  box-shadow: var(--shadow-sm);
}
.annual__when { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--signal); }
.annual__title { font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; line-height: .95; margin: 8px 0 10px; }
.annual__note { font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--ink-3); margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--rule-soft); }

/* ============================================================ FILTERS */
.filterbar { background: var(--bone); border-bottom: 3px solid var(--rule); padding: 18px 0; position: sticky; top: 72px; z-index: 40; }
.filterbar__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.search { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 2px solid var(--ink); padding: 0 14px; }
.search:focus-within { background: var(--bone-3); box-shadow: var(--shadow-sm); }
.search input { flex: 1; border: 0; background: transparent; color: var(--ink); padding: 12px 0; outline: none; font-family: var(--mono); font-size: 14px; }
.search input::placeholder { color: var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 7px 13px; border: 1.5px solid var(--ink-3); background: transparent; color: var(--ink-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; border-radius: 0; text-decoration: none; transition: all .12s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.result-count { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-left: auto; }
.empty { text-align: center; padding: 70px 20px; border: 2px dashed var(--rule-soft); }
.empty h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.8rem; margin-bottom: 10px; }
.empty p { color: var(--ink-2); margin: 0; }

/* ============================================================ SIGNBOARDS (ads) */
.signboard {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px; text-decoration: none; color: inherit;
  background: var(--surface); border: 3px solid var(--ink); padding: 24px 26px; box-shadow: var(--shadow);
}
.signboard__mark {
  width: 62px; height: 62px; flex: none; display: grid; place-items: center;
  background: var(--marigold); border: 2px solid var(--ink); color: #1A1206;
  font-family: var(--display); font-size: 1.9rem;
}
.signboard__name { font-family: var(--display); text-transform: uppercase; font-size: 1.4rem; line-height: .95; }
.signboard__line { font-size: 14.5px; color: var(--ink-2); margin-top: 4px; }
.slot-label { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 9px; }

.slot-open {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  border: 3px dashed var(--ink); padding: 24px 26px; background: transparent;
}
.slot-open__t { font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; line-height: .95; }
.slot-open__s { font-size: 14.5px; color: var(--ink-2); margin-top: 6px; max-width: 46ch; }

/* ============================================================ TILES */
.tile {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit;
  background: var(--surface); border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
  padding: 22px; transition: background .14s, color .14s;
}
.tile:hover { background: var(--ink); color: var(--bone); }
.tile:hover .tile__sub, .tile:hover .tile__count { color: rgba(237,230,214,.75); }
.tile:hover .tile__glyph { color: var(--marigold); }
.tile__glyph { color: var(--signal); margin-bottom: 4px; }
.tile__name { font-family: var(--display); text-transform: uppercase; font-size: 1.25rem; line-height: .95; }
.tile__sub { font-size: 14px; color: var(--ink-2); }
.tile__count { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: auto; padding-top: 12px; }

/* ============================================================ PROSE */
.prose { font-size: 17.5px; line-height: 1.7; color: var(--ink-2); }
.prose h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.7rem,3.6vw,2.5rem); line-height: .9; color: var(--ink); margin: 2em 0 .6em; padding-bottom: 12px; border-bottom: 2px solid var(--rule); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.3rem; color: var(--ink); margin: 1.8em 0 .5em; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1.4em; }
.prose li { margin-bottom: .6em; }
.prose li::marker { color: var(--signal); font-family: var(--mono); font-size: .85em; }
.prose a { color: var(--ink); text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote {
  margin: 1.8em 0; padding: 20px 24px; border: 3px solid var(--ink); background: var(--marigold);
  color: #1A1206; font-family: var(--display); text-transform: uppercase; font-size: 1.35rem;
  line-height: 1.05; box-shadow: var(--shadow);
}
.callout { border: 2px solid var(--ink); background: var(--surface); padding: 20px 24px; margin: 1.8em 0; font-size: 15.5px; }
.callout h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--signal); margin-bottom: 10px; }
.callout p:last-child { margin-bottom: 0; }
/* A warmer, more editorial box than the neutral "Been here?" callouts on the
   same page — marigold instead of signal red, so a recommendation reads as
   a little different in kind from a request or a warning. */
.callout--why { border-color: var(--marigold); }
.callout--why h4 {
  font-family: var(--display); text-transform: uppercase; font-size: 1.5rem;
  letter-spacing: .01em; color: var(--marigold); margin-bottom: 12px;
}
.todo-note { border: 2px dashed var(--signal); padding: 16px 20px; margin: 1.6em 0; font-size: 14.5px; color: var(--ink-2); }
.todo-note strong { color: var(--signal); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* ============================================================ DETAIL */
.detail__head { padding: 46px 0 28px; border-bottom: 3px solid var(--rule); }
.crumb { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.crumb a { text-decoration: none; border-bottom: 1px solid var(--rule-soft); }
.crumb a:hover { color: var(--signal); border-color: var(--signal); }
.detail__head h1 { font-family: var(--display); text-transform: uppercase; font-size: clamp(2.4rem, 6.5vw, 5rem); line-height: .94; margin-bottom: 18px; }
.detail__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.detail__grid { display: grid; gap: 44px; padding: 40px 0 64px; grid-template-columns: 1fr; }
@media (min-width: 940px) { .detail__grid { grid-template-columns: minmax(0,1fr) 330px; } }
.factbox { border: 3px solid var(--ink); background: var(--surface); padding: 24px; box-shadow: var(--shadow); }
.factbox dt { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-top: 18px; }
.factbox dt:first-of-type { margin-top: 0; }
.factbox dd { margin: 5px 0 0; font-size: 15.5px; }
.factbox dd.is-missing { color: var(--ink-3); font-family: var(--mono); font-size: 12.5px; }

/* ============================================================ PRICING */
.price-grid { display: grid; gap: 0; border-top: 2px solid var(--rule); border-left: 2px solid var(--rule); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.plan { background: var(--surface); border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule); padding: 28px 24px; display: flex; flex-direction: column; position: relative; }
.plan--hi { background: var(--marigold); color: #1A1206; }
.plan--hi .plan__for, .plan--hi .plan__list li { color: #40300E; }
.plan--hi .plan__period { color: #5C3D06; }
.plan__flag { position: absolute; top: 0; right: 0; background: var(--signal); color: #fff; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; padding: 5px 10px; }
.plan__name { font-family: var(--display); text-transform: uppercase; font-size: 1.4rem; line-height: .95; }
.plan__price { font-family: var(--display); font-size: 3.6rem; line-height: .82; margin-top: 14px; }
.plan__period { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
.plan__limit { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); margin-top: 10px; }
.plan__for { font-size: 14.5px; color: var(--ink-2); margin: 18px 0 0; padding-top: 16px; border-top: 2px solid currentColor; }
.plan__list { list-style: none; padding: 0; margin: 16px 0 24px; display: flex; flex-direction: column; gap: 10px; }
.plan__list li { font-size: 14.5px; color: var(--ink-2); padding-left: 22px; position: relative; }
.plan__list li::before { content: "→"; position: absolute; left: 0; color: var(--signal); font-family: var(--mono); }
.plan--hi .plan__list li::before { color: #1A1206; }
.plan .btn { margin-top: auto; }

.faq details { border-bottom: 2px solid var(--rule); padding: 20px 0; }
.faq summary { cursor: pointer; font-family: var(--display); text-transform: uppercase; font-size: 1.25rem; line-height: .98; list-style: none; display: flex; justify-content: space-between; gap: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--signal); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 14px 0 0; color: var(--ink-2); font-size: 15.5px; }

/* ============================================================ CTA / SIGNUP */
.cta { border: 3px solid var(--ink); background: var(--midnight); color: var(--on-dark); padding: clamp(30px,5vw,54px); box-shadow: var(--shadow); }
.cta .label { color: var(--marigold); }
.cta h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.9rem,4.6vw,3.4rem); line-height: .9; margin: 16px 0 14px; max-width: 20ch; }
.cta p { color: rgba(242,235,220,.76); max-width: 54ch; }
.signup { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; max-width: 540px; }
.signup input {
  flex: 1 1 240px; padding: 13px 16px; border: 2px solid var(--on-dark); background: transparent;
  color: var(--on-dark); font-family: var(--mono); font-size: 13.5px; outline: none; border-radius: 0;
}
.signup input::placeholder { color: rgba(242,235,220,.5); }
.signup input:focus { background: rgba(255,255,255,.07); }
.signup .btn { background: var(--marigold); color: #1A1206; border-color: var(--on-dark); box-shadow: 3px 3px 0 var(--on-dark); }
.signup .btn:hover { box-shadow: 5px 5px 0 var(--on-dark); }
.signup__note { font-family: var(--mono); font-size: 11px; margin-top: 14px; color: rgba(242,235,220,.55); }

/* ============================================================ FOOTER */
.footer { background: var(--midnight); color: var(--on-dark); padding: 54px 0 30px; }
.footer__grid { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 40px; }
.footer h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--marigold); margin-bottom: 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer a { color: rgba(242,235,220,.8); text-decoration: none; font-size: 14.5px; }
.footer a:hover { color: var(--marigold); }
.footer__name { font-family: var(--display); text-transform: uppercase; font-size: 2rem; line-height: .9; }
.footer__name span { color: var(--signal); }
.footer__blurb { font-size: 14.5px; color: rgba(242,235,220,.7); max-width: 32ch; margin-top: 14px; }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a, .footer__social span {
  width: 38px; height: 38px; display: grid; place-items: center; border: 2px solid rgba(242,235,220,.4);
  font-family: var(--mono); font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
  color: rgba(242,235,220,.8); text-decoration: none; border-radius: 0;
}
.footer__social a:hover { border-color: var(--marigold); color: var(--marigold); }
.footer__social span { opacity: .35; cursor: default; }
.footer__bottom { border-top: 2px solid rgba(242,235,220,.25); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(242,235,220,.6); }
.footer__bottom a { color: var(--marigold); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--signal); color: #fff; padding: 12px 18px; }

@media (max-width: 620px) {
  .hero { padding: 40px 0 34px; }
  .section { padding: 40px 0; }
  .filterbar { top: 62px; }
  /* keep the masthead to one line: the wordmark must not break */
  .brand { padding-right: 14px; }
  .brand__name { font-size: 23px; white-space: nowrap; }
  .brand__sub { display: none; }
  .mast__actions { padding-left: 12px; gap: 8px; }
  .masthead__inner { min-height: 62px; }
  .notice { font-size: 12.5px; }
}
@media (max-width: 400px) {
  .brand__name { font-size: 20px; }
  .icon-btn { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .marquee__track { animation: none !important; }
}

/* ============================================================ THE MAP */
.mp-wrap { display: grid; gap: 30px; padding-bottom: 64px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .mp-wrap { grid-template-columns: minmax(0,2.15fr) minmax(285px,1fr); align-items: start; } }

.mp-figure { margin: 0; }
.mp-svg { width: 100%; height: auto; display: block; border: 3px solid var(--ink); box-shadow: var(--shadow); }
/* The homepage gets a teaser, not the full working map — same figure,
   capped shorter and centered rather than running the section's full height.
   Fixed to the map's real 1240:820 ratio so it can't stretch oddly. */
.mp-figure--preview .mp-svg { width: 910px; height: 602px; max-width: 100%; margin-inline: auto; }
.mp-bg { fill: var(--bone-3); }
.mp-frame { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: .32; }

/* terrain */
.mp-ridge { fill: none; stroke: var(--ink-3); stroke-width: 30; stroke-linecap: round; opacity: .085; }
.mp-water { fill: none; stroke: var(--river); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: .78; }
.mp-water.is-creek { stroke-width: 3.4; opacity: .5; }

/* towns */
.mp-town { cursor: pointer; }
.mp-hit { fill: transparent; }
.mp-dot { fill: var(--signal); stroke: var(--ink); stroke-width: 2.2; transition: r .15s, fill .15s; }
.mp-town.is-empty .mp-dot { fill: var(--bone); stroke-dasharray: 3 2.5; opacity: .8; }
.mp-label {
  font-family: var(--mono); font-size: 19px; letter-spacing: .08em;
  fill: var(--ink-2); pointer-events: none; paint-order: stroke;
  stroke: var(--bone-3); stroke-width: 5px; stroke-linejoin: round;
}
.mp-town.is-empty .mp-label { font-size: 16px; fill: var(--ink-3); }
.mp-town.is-quiet .mp-label { opacity: 0; transition: opacity .12s; }
.mp-town.is-quiet:hover .mp-label, .mp-town.is-quiet.is-active .mp-label,
.mp-town.is-quiet:focus-visible .mp-label { opacity: 1; }
.mp-town:hover .mp-dot, .mp-town.is-active .mp-dot { fill: var(--marigold); r: 13; }
.mp-town:hover .mp-label, .mp-town.is-active .mp-label { fill: var(--ink); font-weight: 500; }
.mp-town.is-dim { opacity: .22; }
.mp-town:focus-visible .mp-dot { outline: none; fill: var(--marigold); }
.mp-town:focus-visible .mp-label { fill: var(--ink); }

/* furniture */
.mp-scale line { stroke: var(--ink-2); stroke-width: 1.6; }
.mp-scale text, .mp-compass text {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em; fill: var(--ink-2);
}
.mp-compass-ring { fill: none; stroke: var(--ink-2); stroke-width: 1.4; opacity: .5; }
.mp-compass-n { fill: var(--signal); }

.mp-cap {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.65; color: var(--ink-3);
  margin-top: 22px; border: 2px solid var(--rule-soft); padding: 12px 16px;
}
.mp-cap strong { color: var(--ink-2); }

/* side panel */
.mp-side { position: sticky; top: 96px; }
@media (max-width: 999px) { .mp-side { position: static; } }
.mp-empty, .mp-panel {
  border: 3px solid var(--ink); background: var(--surface);
  display: flex; flex-direction: column;
  /* The panel scrolls inside itself. A town with 120 listings must not make
     the page thousands of pixels long. */
  max-height: min(78vh, 760px);
}
/* display:flex above outranks the UA stylesheet's [hidden]{display:none},
   so every town panel would render at once without this. */
.mp-panel[hidden] { display: none; }
.mp-empty[hidden] { display: none; }
.mp-empty { padding: 24px; }
.mp-empty h3, .mp-panel__head h3 {
  font-family: var(--display); text-transform: uppercase; font-size: 1.9rem; line-height: .92; margin: 10px 0 8px;
}
.mp-empty p, .mp-panel__head p { color: var(--ink-2); font-size: 15px; margin: 0; }
.mp-panel__head { padding: 22px 24px 16px; border-bottom: 2px solid var(--rule); flex: none; }

.mp-counts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.mp-count {
  display: flex; align-items: baseline; gap: 6px; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: transparent; border: 1.5px solid var(--rule-soft); color: var(--ink-3);
  padding: 5px 9px; border-radius: 0;
}
.mp-count b { font-family: var(--display); font-size: 15px; color: var(--ink); letter-spacing: 0; }
.mp-count:hover { border-color: var(--ink-3); color: var(--ink); }
.mp-count.is-on { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.mp-count.is-on b { color: var(--marigold); }

.mp-panel__scroll { overflow-y: auto; flex: 1 1 auto; padding: 0 24px; }
.mp-group__head {
  position: sticky; top: 0; z-index: 2; background: var(--surface);
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--signal); padding: 14px 0 8px; border-bottom: 2px solid var(--rule);
}
.mp-group__head span { color: var(--ink-3); }
.mp-group[hidden], .mp-item[hidden] { display: none; }

.mp-item {
  display: block; text-decoration: none; color: inherit;
  padding: 11px 0; border-bottom: 1px solid var(--rule-soft);
}
.mp-item:hover { padding-inline: 9px; background: var(--bone-2); }
.mp-item__name { display: block; font-family: var(--display); text-transform: uppercase; font-size: 1.05rem; line-height: 1.05; }
.mp-item__cat { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.mp-item__blurb { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 5px; }
.mp-none { font-size: 14.5px; color: var(--ink-2); padding: 20px 24px; }

.mp-panel__foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px; border-top: 2px solid var(--rule); background: var(--surface);
}
.mp-panel__n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.mp-panel .btn { margin-top: 0; }

@media (prefers-reduced-motion: reduce) { .mp-dot { transition: none; } }

/* On a phone the map scales down until labels and tap targets are unusable.
   Give it a floor and let it scroll inside its own container instead. */
@media (max-width: 720px) {
  /* The floor is scoped to .mp-figure, which is the only place with a scroll
     container. The homepage embeds the same SVG in a plain link, so an
     unscoped min-width there would push the whole page sideways. There it
     just scales down — it's a teaser, and tapping it opens /map/ properly. */
  .mp-figure { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mp-figure .mp-svg { min-width: 680px; }
  .mp-cap { margin-top: 12px; }
}

/* ============================================================ THE BOARD
   Ads as pinned flyers. Cork texture is a generated SVG turbulence filter —
   no image asset, no request. Rotation comes from --rot, set per card at
   build time from a hash of its id so nothing shuffles between builds. */

.board {
  --cork-base: #C4A070;
  --cork-hi:   #E3CBA4;
  --cork-mid:  #B78C58;
  --cork-lo:   #9C7442;
  --cork-dk:   #74522C;
  position: relative;
  background: var(--cork-base);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow), inset 0 0 70px rgba(60,34,10,.34);
  padding: 34px 26px 40px;
  overflow: hidden;
}
/* the generated granule layer sits behind the pinned cards */
.board__cork { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.board__wall { position: relative; z-index: 1; }

.board__wall { column-count: 3; column-gap: 22px; }
@media (max-width: 1000px) { .board__wall { column-count: 2; } }
@media (max-width: 640px)  { .board__wall { column-count: 1; } }
.board--compact .board__wall { column-count: 4; }
@media (max-width: 1100px) { .board--compact .board__wall { column-count: 2; } }
@media (max-width: 620px)  { .board--compact .board__wall { column-count: 1; } }

.board__note {
  font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--ink-3);
  margin: 20px 0 0; border-left: 3px solid var(--rule-soft); padding-left: 14px;
}
.board__note strong { color: var(--ink-2); }

/* --- a pinned card --- */
.bc {
  --rot: 0deg;
  --pinx: 50%;
  --paper: #FBF7EC;
  --paper-ink: #1B1A16;
  display: block; position: relative; break-inside: avoid; margin: 0 0 24px;
  padding: 26px 22px 20px; text-decoration: none; color: var(--paper-ink);
  background: var(--paper);
  transform: rotate(var(--rot));
  box-shadow: 2px 4px 10px rgba(50,28,6,.34);
  transition: transform .18s ease, box-shadow .18s ease;
}
a.bc:hover, a.bc:focus-visible {
  transform: rotate(0deg) translateY(-4px) scale(1.02);
  box-shadow: 4px 12px 26px rgba(50,28,6,.42);
  z-index: 5;
}

/* the pin */
.bc__fix {
  position: absolute; top: -9px; left: var(--pinx); transform: translateX(-50%);
  width: 17px; height: 17px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FF8A73 0 22%, #D6402A 55%, #8E1F10 100%);
  box-shadow: 0 3px 5px rgba(40,20,4,.5); z-index: 2;
}
.is-community .bc__fix { background: radial-gradient(circle at 34% 30%, #8FD4F5 0 22%, #2C7FB8 55%, #14496B 100%); }
.bc--open .bc__fix { background: radial-gradient(circle at 34% 30%, #EDE6D6 0 22%, #B9AE97 55%, #7C7360 100%); }

/* tape instead of a pin, on some cards, for variety */
.bc.is-taped .bc__fix {
  top: -12px; width: 74px; height: 26px; border-radius: 1px;
  background: rgba(238,230,205,.62); border: 1px solid rgba(150,135,95,.35);
  box-shadow: 0 1px 3px rgba(40,20,4,.22); transform: translateX(-50%) rotate(-4deg);
}

.bc__kind {
  display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: #6B6355; border: 1px solid rgba(0,0,0,.22);
  padding: 3px 7px; margin-bottom: 12px;
}
.is-sponsor .bc__kind { background: rgba(0,0,0,.07); }
.bc__title {
  font-family: var(--display); text-transform: uppercase; font-size: 1.5rem;
  line-height: .94; margin-bottom: 9px; color: var(--paper-ink);
}
.bc__org {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #7A7263; margin-bottom: 11px;
}
.bc__body { font-size: 14.5px; line-height: 1.55; color: #3B382F; margin: 0; }
.bc__foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 15px; }
.bc__cta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  border-bottom: 2px solid currentColor; padding-bottom: 2px; color: #9A2B18;
}

/* --- paper stocks --- */
.bc--flyer { padding: 30px 24px 24px; }
.bc--flyer .bc__title { font-size: 1.9rem; }
.bc--index {
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(80,110,150,.16) 27px 28px);
  background-position: 0 46px;
}
.bc--card { padding: 20px 20px 16px; }
.bc--card .bc__title { font-size: 1.15rem; }
.bc--card .bc__body { font-size: 13.5px; }
.bc--note { padding: 22px 20px 18px; }
.bc--note .bc__title { font-size: 1.2rem; }
.bc--note .bc__body { font-size: 13.5px; }

/* --- paper tints --- */
.bc--marigold { --paper: #F6D592; }
.bc--signal   { --paper: #F2C0B4; }
.bc--river    { --paper: #BFD9CF; }
.bc--plum     { --paper: #DCC6D6; }
.bc--plain    { --paper: #FBF7EC; }

.bc--open {
  --paper: transparent;
  border: 2px dashed rgba(255,255,255,.62);
  box-shadow: none; color: #FFF6E4;
}
.bc--open .bc__title, .bc--open .bc__body { color: #FFF6E4; }
.bc--open .bc__body { opacity: .82; }
.bc--open .bc__kind { color: #FFF6E4; border-color: rgba(255,255,255,.5); }
.bc--open .bc__cta { color: #FFE7A8; }
a.bc--open:hover { background: rgba(255,255,255,.09); box-shadow: none; }

.bc[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bc { transition: none; }
  a.bc:hover { transform: rotate(var(--rot)); }
}

/* ============================================================ FIELD TRIPS */
.trip-grid { display: grid; gap: 0; border-top: 2px solid var(--rule); border-left: 2px solid var(--rule);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.trip-card {
  background: var(--surface); border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: inherit; transition: background .14s, color .14s;
}
.trip-card:hover { background: var(--ink); color: var(--bone); }
.trip-card:hover .trip-card__blurb, .trip-card:hover .trip-card__trail { color: rgba(237,230,214,.78); }
.trip-card:hover .trip-card__kicker { color: var(--marigold); }
.trip-card:hover .trip-card__meta span { border-color: rgba(237,230,214,.4); color: rgba(237,230,214,.85); }
.trip-card__kicker {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--signal);
}
.trip-card__name {
  font-family: var(--display); text-transform: uppercase; font-size: 1.9rem; line-height: .92; margin: 2px 0 4px;
}
.trip-card__blurb { font-size: 15px; color: var(--ink-2); margin: 0; }
.trip-card__meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.trip-card__meta span {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  border: 1.5px solid var(--ink-3); color: var(--ink-3); padding: 3px 8px;
}
.trip-card__trail {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-3);
  margin-top: auto; padding-top: 14px;
}

/* --- the stop list --- */
.stops { border-top: 2px solid var(--rule); }
.stop { display: grid; grid-template-columns: 68px 1fr; gap: 20px; padding: 22px 0; border-bottom: 2px solid var(--rule); }
.stop__n { font-family: var(--display); font-size: 2.4rem; line-height: .8; color: var(--signal); }
.stop__meta { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.stop__name { font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; line-height: .95; margin: 5px 0 9px; }
.stop__name a { text-decoration: none; border-bottom: 3px solid var(--marigold); }
.stop__name a:hover { color: var(--signal); border-color: var(--signal); }
.stop__note { font-size: 15.5px; color: var(--ink-2); margin: 0; }
.stop__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
@media (max-width: 640px) { .stop { grid-template-columns: 44px 1fr; gap: 14px; } .stop__n { font-size: 1.6rem; } }

/* --- route map --- */
.rm-figure { margin: 0; }
.rm-svg { width: 100%; height: auto; display: block; border: 3px solid var(--ink); box-shadow: var(--shadow); }
.rm-bg { fill: var(--bone-3); }
.rm-frame { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: .3; }
.rm-water { fill: none; stroke: var(--river); stroke-width: 7; stroke-linecap: round; opacity: .5; }
.rm-dot { fill: var(--ink-3); opacity: .35; }
.rm-dot.is-on { fill: var(--signal); opacity: 1; stroke: var(--ink); stroke-width: 2.5; }
.rm-num { font-family: var(--display); font-size: 22px; fill: #fff; }
.rm-label {
  font-family: var(--mono); font-size: 25px; letter-spacing: .06em; fill: var(--ink);
  paint-order: stroke; stroke: var(--bone-3); stroke-width: 6px; stroke-linejoin: round;
}
.rm-route {
  fill: none; stroke: var(--signal); stroke-width: 4; stroke-dasharray: 11 8;
  stroke-linecap: round; opacity: .85;
}
.rm-cap {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.6; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 12px;
}

/* ============================================================ FIELD TRIP SPONSOR
   Deliberately reads as a sponsor unit, not as part of the route. The
   disclosure line is not decoration — it is what keeps the field trip credible. */
.trip-spon { border-top: 2px solid var(--rule); padding-top: 18px; }
.trip-spon .signboard { padding: 18px 20px; box-shadow: var(--shadow-sm); }
.trip-spon .signboard__mark { width: 46px; height: 46px; font-size: 1.4rem; }
.trip-spon .signboard__name { font-size: 1.1rem; }
.trip-spon .signboard__line { font-size: 13.5px; }
.trip-spon__note {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.65; color: var(--ink-3);
  margin: 12px 0 0; border-left: 2px solid var(--rule-soft); padding-left: 11px;
}
.trip-spon--open { border: 2px dashed var(--ink-3); border-top: 2px dashed var(--ink-3);
  padding: 18px 20px; }
.trip-spon--open .trip-spon__body p {
  font-size: 13.5px; color: var(--ink-2); margin: 0 0 12px;
}

/* free tier reads as a real offer, not a disabled row */
.plan--free { background: var(--bone-3); }
.plan--free .plan__price { color: var(--river); }
.founding {
  border: 3px solid var(--ink); background: var(--marigold); color: #1A1206;
  padding: 20px 24px; margin-top: 22px; box-shadow: var(--shadow-sm);
}
.founding__label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 8px;
}
.founding p { margin: 0; font-size: 15.5px; }

/* --- the river meander under the wordmark --- */
.brand__river {
  display: block; width: 100%; height: 9px; margin-top: 5px;
  color: var(--river); overflow: visible;
}
.brand__river path {
  fill: none; stroke: currentColor; stroke-width: 5;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.footer__name + .brand__river { height: 11px; margin-top: 7px; max-width: 260px; }
.brand:hover .brand__river { color: var(--signal); }

/* ============================================================ SERVICES
   Inbound only. Styled as a quiet aside, not a second sales pitch — the
   prices are there so the wrong enquiries filter themselves out. */
.svc-grid {
  display: grid; gap: 0; border-top: 2px solid var(--rule); border-left: 2px solid var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.svc {
  background: var(--surface); border-right: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule); padding: 24px 22px;
}
.svc__name { font-family: var(--display); text-transform: uppercase; font-size: 1.25rem; line-height: .95; }
.svc__price {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--signal); margin: 8px 0 12px; padding-bottom: 12px; border-bottom: 2px solid var(--rule-soft);
}
.svc__body { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.svc__limit {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); border: 1.5px dashed var(--ink-3); padding: 7px 12px; white-space: nowrap;
}

/* ============================================================ FORMS */
.subform-wrap { margin-top: 26px; }
.f-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 22px; }
.f { display: flex; flex-direction: column; gap: 7px; }
.f--check { flex-direction: row; align-items: flex-start; gap: 11px; grid-column: 1 / -1; font-size: 14.5px; }
.f--check input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--signal); }
.f__label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.f__req { color: var(--signal); }
.f__opt { color: var(--ink-3); }
.f__hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.f input, .f select, .f textarea {
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--surface); border: 2px solid var(--ink); border-radius: 0;
  padding: 11px 13px; outline: none; width: 100%;
}
.f textarea { resize: vertical; min-height: 96px; }
.f input:focus, .f select:focus, .f textarea:focus { box-shadow: var(--shadow-sm); }
.f textarea, .f--wide { grid-column: 1 / -1; }
.subform { border-top: 2px solid var(--rule); margin-top: 24px; padding-top: 22px; }
.subform[hidden] { display: none; }
.subform__blurb { font-size: 15px; color: var(--ink-2); margin: 0; }
.subform__foot { border-top: 2px solid var(--rule); margin-top: 28px; padding-top: 22px; }
.subform__note { font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: var(--ink-3); margin: 16px 0 0; }

/* ============================================================ BOARD RULES */
.rules { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 2px solid var(--rule); border-left: 2px solid var(--rule); }
.rules__col { background: var(--surface); border-right: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule); padding: 22px 24px; }
.rules__col h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; margin-bottom: 14px; }
.rules__col--yes h3 { color: var(--river); }
.rules__col--no h3 { color: var(--signal); }
.rules__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rules__col li { font-size: 14.5px; color: var(--ink-2); padding-left: 22px; position: relative; }
.rules__col--yes li::before { content: "✓"; position: absolute; left: 0; color: var(--river); font-weight: 700; }
.rules__col--no li::before { content: "✕"; position: absolute; left: 0; color: var(--signal); font-weight: 700; }

/* ============================================================ BROWSE MENU
   Sixteen categories won't fit a horizontal bar, and the bar was already
   overflowing at six items. One trigger, a panel grouped by intent. */
.navmenu { display: flex; }
.navmenu__btn {
  display: flex; align-items: center; gap: 7px; padding: 0 20px; height: 100%;
  background: transparent; border: 0; border-right: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule-soft); cursor: pointer;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
}
.navmenu__btn:hover, .navmenu__btn[aria-expanded="true"] { background: var(--ink); color: var(--bone); }
.navmenu__btn[aria-current="page"] { background: var(--signal); color: #fff; }
.menu {
  position: absolute; top: 100%; right: 0; left: auto; z-index: 70; width: 780px; max-width: 100%;
  background: var(--bone); border: 3px solid var(--ink); border-top: 0;
  box-shadow: var(--shadow); padding: 22px;
}
.menu[hidden] { display: none; }
/* Where holds town names, which run longer than category names. The exact
   track count is set inline per-build (build.py) from however many category
   groups actually render, so a paused group's column never sits empty —
   this rule is only the fallback if that inline style is ever missing. */
.menu__cols { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 20px; }
.menu__head {
  display: block; font-family: var(--display); text-transform: uppercase; font-size: 1.05rem;
  text-decoration: none; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 2px solid var(--rule);
}
.menu__head:hover { color: var(--signal); }
.menu__col a:not(.menu__head) {
  display: flex; align-items: center; gap: 8px; padding: 6px 0; text-decoration: none;
  font-size: 13.5px; color: var(--ink-2);
}
.menu__col a:not(.menu__head):hover { color: var(--ink); }
.menu__col a:not(.menu__head):hover .tile__glyph { color: var(--signal); }
.menu__col .tile__glyph { flex: none; margin: 0; color: var(--ink-3); }
@media (max-width: 1160px) { .menu { width: 660px; }
  .menu__cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .menu { width: 100%; }
  .menu__cols { grid-template-columns: repeat(2, 1fr); } }

/* tags are a paid feature — visually distinct from the free stamps */
.stamp--tag { border-color: var(--river); color: var(--river); text-transform: lowercase; letter-spacing: .08em; }
.tag-locked { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.tag-locked a { color: var(--signal); }

/* tag filter chips read as tags, not categories */
.chip--tag { border-color: var(--river); color: var(--river); text-transform: lowercase; letter-spacing: .06em; }
.chip--tag.is-on { background: var(--river); border-color: var(--river); color: var(--bone-3); }

/* active filter readout — what's applied, and how to drop it */
.active-filters { gap: 8px; align-items: center; }
.active-filters[hidden] { display: none; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  background: var(--ink); color: var(--bone); border: 2px solid var(--ink); border-radius: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; padding: 6px 11px;
}
.pill:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.pill--clear { background: transparent; color: var(--ink-2); border-style: dashed; }
.pill--clear:hover { background: var(--ink); color: var(--bone); border-style: solid; }
/* a filter that would return nothing from here */
.chip.is-void { opacity: .28; }

/* the Where column — town names only */
.menu__more {
  display: block; white-space: nowrap; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--signal); text-decoration: none;
}
.menu__more:hover { text-decoration: underline; }
.menu__head { white-space: nowrap; }

/* ============================================================ REFERENCE ROWS
   For listings we haven't written about. Deliberately not a card: a card
   implies a recommendation, and most of these are just where a business is. */
.lr-list { border-top: 2px solid var(--rule); }
.lr {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1.6fr);
  gap: 18px; align-items: baseline; padding: 13px 0;
  border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: inherit;
}
.lr:hover { background: var(--surface); padding-inline: 12px; }
.lr__name { font-family: var(--display); text-transform: uppercase; font-size: 1.15rem; line-height: 1.05; }
.lr__meta { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lr__facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; color: var(--ink-2); }
.lr__tel { color: var(--river); text-decoration: none; border-bottom: 1px solid currentColor; }
.lr__hrs { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.lr__thin { font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-style: italic; }
@media (max-width: 760px) {
  .lr { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .lr__facts { gap: 2px 12px; }
}

/* the menu says what the site is for, once */
.menu__strap {
  font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--ink-3);
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 2px solid var(--rule);
}
/* the "need" column is a different kind of thing and looks it */
.menu__col--need { border-left: 2px solid var(--rule-soft); padding-left: 18px; }
.menu__col--need .menu__head { color: var(--river); }

/* the reasoning behind each price list, stated before the prices */
.track__logic {
  border-left: 3px solid var(--river); padding: 2px 0 2px 16px; margin: 0 0 24px;
  font-size: 15.5px; color: var(--ink-2); max-width: 68ch;
}

/* ============================================================ THE TIP
   "Get the Reuben." The one thing a search engine can't tell you, so it gets
   the loudest treatment on the page. */
.order {
  background: var(--marigold); color: #1A1206; border: 3px solid var(--ink);
  box-shadow: var(--shadow); padding: 18px 22px; margin: 0 0 30px;
}
.order__label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 8px;
}
.order__tip {
  font-family: var(--display); text-transform: uppercase; font-size: 1.5rem;
  line-height: 1.02; margin: 0;
}
.order__avoid {
  font-size: 14px; margin: 12px 0 0; padding-top: 10px;
  border-top: 2px solid rgba(26,18,6,.28);
}
.order__avoid b { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
/* compact form on cards — a line, not a box */
.order--sm {
  font-size: 13.5px; line-height: 1.45; margin: 2px 0 0; color: var(--ink);
  border-left: 3px solid var(--marigold); padding-left: 10px;
}
.order--sm b {
  display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
a.card:hover .order--sm { color: var(--bone); border-color: var(--marigold); }
a.card:hover .order--sm b { color: var(--marigold); }

/* ============================================================ CALENDAR
   Sparse is the normal state for a local calendar, so an empty week has to
   read as "quiet" rather than "broken". No cell borders, no empty-state
   chrome — just days that are lit and days that aren't. */
.cal { border: 3px solid var(--ink); background: var(--surface); box-shadow: var(--shadow); margin-bottom: 30px; }
.cal__bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 14px 18px; border-bottom: 2px solid var(--rule); background: var(--bone-3);
}
.cal__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.cal__tab {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  border: 1.5px solid var(--ink-3); background: transparent; color: var(--ink-2);
  padding: 6px 11px; cursor: pointer; border-radius: 0;
}
.cal__tab span { color: var(--ink-3); margin-left: 5px; }
.cal__tab:hover { border-color: var(--ink); color: var(--ink); }
.cal__tab.is-on { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.cal__tab.is-on span { color: var(--marigold); }
.cal__clear {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; background: transparent; border: 1.5px dashed var(--signal);
  color: var(--signal); padding: 6px 11px; cursor: pointer;
}
.cal__month[hidden] { display: none; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__dow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); text-align: center; padding: 14px 0 12px; border-bottom: 2px solid var(--rule);
}
.cal__cell {
  min-height: 104px; padding: 13px 14px; border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft); background: none; text-align: left;
  display: flex; flex-direction: column; gap: 10px; font: inherit; color: inherit;
}
.cal__cell:nth-child(7n) { border-right: 0; }
.cal__cell--out { background: var(--bone-2); opacity: .45; }
.cal__num { font-family: var(--display); font-size: 1.4rem; line-height: 1; color: var(--ink-3); }
/* Every real day is a button now, quiet or not — the dots (or lack of them)
   carry the "anything happening" signal, not whether the day responds. */
.cal__cell:not(.cal__cell--out) { cursor: pointer; }
.cal__cell:not(.cal__cell--out) .cal__num { color: var(--ink); }
.cal__cell:not(.cal__cell--out):hover { background: var(--bone-2); }
.cal__cell.is-past .cal__num { opacity: .4; }
.cal__cell.is-today { background: var(--gold-soft); }
.cal__cell.is-today .cal__num { color: var(--signal); }
.cal__cell.is-selected { background: var(--ink); }
.cal__cell.is-selected .cal__num { color: var(--marigold); }
.cal__cell.is-selected .cal__dot { background: var(--bone); }
.cal__dots { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.cal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
/* One color per town named in the site's own tagline; everything smaller
   shares "other" rather than needing a 20-color key. */
.cal__dot--danville { background: var(--signal); }
.cal__dot--bloomsburg { background: var(--marigold); }
.cal__dot--lewisburg { background: var(--river); }
.cal__dot--sunbury { background: var(--midnight); }
.cal__dot--selinsgrove { background: var(--plum); }
.cal__dot--other { background: var(--ink-3); }
.cal__more { font-family: var(--mono); font-size: 9px; color: var(--ink-3); }
.cal__legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 18px;
  border-bottom: 2px solid var(--rule); background: var(--bone-3);
}
.cal__legend-item {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.cal__count {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin: 0; padding: 11px 18px; border-top: 2px solid var(--rule);
}
@media (max-width: 640px) {
  .cal__cell { min-height: 72px; padding: 9px; gap: 7px; }
  .cal__num { font-size: 1.05rem; }
  .cal__dot { width: 6px; height: 6px; }
}

/* --------------------------------------------------------------------------
   the shop
   -------------------------------------------------------------------------- */
.merch-flag {
  background: var(--marigold); color: #1A1206;
  border-bottom: 3px solid var(--rule);
}
.merch-flag__in { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; flex-wrap: wrap; }
.merch-flag b {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  border: 2px solid #1A1206; padding: 3px 9px; flex: none;
}
.merch-flag span { font-size: 14px; max-width: 82ch; }

.merch-grid {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  border-top: 2px solid var(--rule); border-left: 2px solid var(--rule);
}
.mcard {
  border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
  background: var(--surface); display: flex; flex-direction: column;
}
.mcard__art {
  position: relative; background: var(--mbg, var(--bone-2));
  border-bottom: 2px solid var(--rule); padding: 18px;
  display: flex; align-items: center; justify-content: center;
}
/* A tint of the page ground behind the goods so a bone shirt on bone paper
   still reads as an object rather than a hole in the page. */
.mcard__art::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(20,22,28,.05) 0 2px, transparent 2px 9px);
}
.mcard__svg { position: relative; width: 100%; max-width: 250px; height: auto; display: block; }
.mcard__badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--signal); color: #fff; font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: 4px 9px; border: 2px solid var(--ink);
}
.mcard__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.mcard__name {
  font-family: var(--display); text-transform: uppercase; font-size: 1.35rem;
  line-height: .98; margin: 0;
}
.mcard__price {
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
  color: var(--ink); margin: -4px 0 0;
}
.mcard__blurb { margin: 0; font-size: 15px; color: var(--ink-2); }
.mcard__detail { margin: 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.mcard__vars { margin-top: 2px; display: flex; flex-direction: column; gap: 4px; }
.mvar { display: flex; gap: 8px; font-size: 12px; align-items: baseline; }
.mvar__k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); flex: none; min-width: 52px;
}
.mvar__v { color: var(--ink-2); }
.mcard__foot {
  margin-top: auto; padding-top: 14px; display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap;
}
.mcard__soon {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}

.merch-how { padding-top: 0; }
.mhow-grid {
  display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border: 2px solid var(--rule); background: var(--bone-3);
}
.mhow { padding: 22px 24px; border-right: 2px solid var(--rule); }
.mhow:last-child { border-right: 0; }
.mhow h4 {
  font-family: var(--display); text-transform: uppercase; font-size: 1.05rem;
  letter-spacing: .01em; margin: 0 0 7px;
}
.mhow p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }

@media (max-width: 760px) {
  .mhow { border-right: 0; border-bottom: 2px solid var(--rule); }
  .mhow:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   the holding page — one screen, nothing to click but the email box
   -------------------------------------------------------------------------- */
.is-holding { min-height: 100dvh; display: flex; flex-direction: column; }
.hold {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 40px 22px 0; position: relative; z-index: 1;
}
.hold__in { width: 100%; max-width: 680px; margin: 0 auto; padding-bottom: 48px; }
.hold__brand { display: block; text-decoration: none; color: inherit; }
.hold__name {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(3.1rem, 13vw, 7rem); line-height: .82; letter-spacing: -.01em;
  display: block; color: var(--ink);
}
.hold__name span { color: var(--signal); }
.hold__name .brand__river {
  display: block; width: clamp(180px, 52%, 330px); height: 16px;
  margin-top: 6px; overflow: visible;
}
.hold__name .brand__river path { fill: none; stroke: var(--river); stroke-width: 6; stroke-linecap: round; }
.hold__sub {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: lowercase; color: var(--ink-3); margin: 12px 0 42px;
}
.hold__head {
  font-family: var(--display); text-transform: uppercase; font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem); line-height: 1.02;
  margin: 0 0 16px; max-width: 20ch;
}
.hold__lede { font-size: clamp(1rem, 1.7vw, 1.14rem); color: var(--ink-2); margin: 0 0 30px; max-width: 56ch; }
.hold .signup { max-width: 520px; }
.hold__promise {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin: 14px 0 0;
}
.hold__biz {
  margin: 38px 0 0; padding-top: 22px; border-top: 2px solid var(--rule);
  font-size: 15px; color: var(--ink-2); max-width: 56ch;
}
.hold__foot {
  border-top: 2px solid var(--rule); padding: 14px 22px;
  display: flex; gap: 18px; justify-content: space-between; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.hold__warn {
  position: relative; z-index: 2; background: var(--signal); color: #fff;
  padding: 11px 22px; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  font-size: 14px;
}
.hold__warn b {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; border: 2px solid #fff; padding: 3px 9px; flex: none;
}
.hold__warn code { background: rgba(0,0,0,.25); padding: 1px 5px; }
.signup__note--dead { color: var(--signal); font-weight: 600; }
.hold .signup input[disabled], .hold .signup button[disabled] {
  opacity: .45; cursor: not-allowed;
}
.hold__name .brand__river { height: 20px; }
/* .signup was designed against the midnight CTA band; on bone paper its
   on-dark border and text all but disappear. */
.hold .signup input {
  border-color: var(--ink); color: var(--ink); background: var(--surface);
}
.hold .signup input::placeholder { color: var(--ink-3); }
.hold .signup input:focus { background: var(--bone-3); box-shadow: 3px 3px 0 var(--ink); }
.hold .signup .btn { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.hold .signup .btn:hover { box-shadow: 5px 5px 0 var(--ink); }
.hold .signup__note { color: var(--ink-3); }
/* With no email box the mailto is the only action on the page, so it gets to
   look like one. */
.hold__biz {
  margin: 40px 0 0; padding-top: 24px; border-top: 2px solid var(--rule);
  max-width: 56ch;
}
.hold__biz p { margin: 0 0 16px; font-size: 15.5px; color: var(--ink-2); }
.hold__mail {
  display: inline-block; font-family: var(--mono); font-size: 13.5px;
  letter-spacing: .04em; color: var(--ink); text-decoration: none;
  border: 2px solid var(--ink); background: var(--surface);
  padding: 12px 18px; box-shadow: 3px 3px 0 var(--ink);
}
.hold__mail:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.hold__mail:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
.signup__done {
  margin-top: 26px; font-family: var(--mono); font-size: 13.5px; letter-spacing: .04em;
  color: var(--ink); border: 2px solid var(--river); background: var(--surface);
  padding: 14px 18px; box-shadow: 3px 3px 0 var(--river); max-width: 540px;
}
/* A provider-drawn signup (beehiiv) renders inside its own iframe, so its
   styling is out of reach. Frame it instead: give it the page's border and
   shadow so it reads as a deliberate panel rather than something pasted in. */
.signup-embed {
  margin-top: 26px; max-width: 540px;
  border: 2px solid var(--rule); background: var(--surface);
  box-shadow: var(--shadow); padding: 6px;
}
.signup-embed iframe { display: block; width: 100% !important; border: 0; }
.signup-embed form { margin: 0; }
/* beehiiv draws this form in an iframe it sizes itself, by posting a measured
   height back to its loader script. That handshake is not reliable: observed
   settling at 207px sometimes and stranded at its 2000px default other times,
   with no error either way. Both failures are silent and both wreck the page —
   a height:0 wrapper hides the only call to action, a 2000px one buries the
   rest of the page under blank space.

   So bound it rather than trusting it. min-height keeps the form visible if
   nothing is ever reported; max-height clips the empty default. A correct
   measurement lands between the two and passes through untouched. Never set a
   fixed height here — that clips the form when the handshake does work. */
.signup-embed > div,
.signup-embed > div > div {
  height: auto !important;
  overflow: hidden !important;
}
.signup-embed iframe { min-height: 96px; max-height: 220px; }
@media (max-width: 560px) {
  .signup-embed iframe { max-height: 320px; }
}
.signup-embed__fallback {
  margin-top: 26px; max-width: 540px; font-size: 15px; color: var(--ink-2);
  border-left: 3px solid var(--signal); padding-left: 14px;
}
.signup-embed__fallback a { color: var(--ink); }
.hold__notify { margin-top: 26px; }