/* Palmetto Business Park
   ------------------------------------------------------------------
   Dark green ground, warm bone paper, golden-hour imagery. Two faces
   with one hard rule: the serif is only ever large (display, headings,
   figures), the sans is only ever small (body, labels, UI). They never
   meet at the same size, which is what made the earlier build read as a
   document instead of a place. */

:root {
  /* greens, from the monument sign */
  --ink:        #08211a;
  --ink-2:      #0d2c22;
  --forest:     #12402f;
  --olive:      #5a6648;
  --olive-lit:  #93a276;   /* olive, lifted enough to read on dark */

  /* warm neutrals, from the renderings */
  --bone:       #faf7f1;
  --sand:       #f2ede3;
  --sand-2:     #e6ddcd;
  --amber:      #d8b482;   /* golden hour, used as the single accent */

  --body:       #2b332e;
  --muted:      #6d786f;
  --on-dark:    #ece7dc;
  --on-dark-mut:#9aa79c;

  --rule:       rgba(8, 33, 26, 0.14);
  --rule-faint: rgba(8, 33, 26, 0.07);
  --rule-dark:  rgba(236, 231, 220, 0.16);

  --display: "Newsreader", "Iowan Old Style", Charter, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: clamp(1.25rem, 5vw, 3rem);
  --wide: 76rem;
  --measure: 33rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

picture { display: block; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--pad); }
.measure { max-width: var(--measure); }

/* =================================================================
   Type scale. Serif is display only. Sans is everything small.
   ================================================================= */

.d2, .d3 {
  font-family: var(--display);
  font-variant-numeric: lining-nums;
  font-weight: 500;
  font-style: normal;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}

.d2 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); line-height: 1.06; }
.d3 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); line-height: 1.12; }

h1, h2, h3 { font-family: var(--display); font-variant-numeric: lining-nums; font-weight: 500; letter-spacing: -0.02em; margin: 0; }

.label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--olive);
}

.on-dark .label { color: var(--olive-lit); }

.lede {
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  line-height: 1.5;
  color: var(--body);
}

p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

/* =================================================================
   Wordmark
   ================================================================= */

.wordmark { display: inline-block; text-decoration: none; line-height: 1; }

.wordmark .name {
  display: block;
  font-family: var(--display);
  font-variant-numeric: lining-nums;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wordmark .sub {
  display: block;
  margin-top: 0.5em;
  padding-top: 0.5em;
  border-top: 1px solid currentColor;
  opacity: 0.75;
  font-family: var(--sans);
  font-size: 0.34em;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* =================================================================
   Header. Dark, translucent, sticky. Reads as one bar over both the
   photograph and the paper sections.
   ================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--on-dark);
  background: rgba(8, 33, 26, 0.7);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid rgba(236, 231, 220, 0.1);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.9rem;
}

.site-header .wordmark { color: var(--on-dark); }
.site-header .wordmark .name { font-size: 1.22rem; }

.nav { display: flex; align-items: center; gap: clamp(0.9rem, 2.6vw, 2.1rem); font-size: 0.88rem; }

.nav a {
  text-decoration: none;
  color: var(--on-dark-mut);
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.nav a:hover, .nav a[aria-current="page"] { color: var(--on-dark); border-bottom-color: var(--amber); }
.nav a:active, .wordmark:active { color: var(--amber); }
.nav .tel { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--on-dark); }

@media (max-width: 36rem) {
  .site-header .wrap { flex-wrap: wrap; gap: 0.7rem 1rem; padding-block: 0.75rem; }
  .site-header .wordmark .name { font-size: 1rem; }
  .nav { width: 100%; justify-content: space-between; gap: 0.6rem; font-size: 0.82rem; }
}

/* =================================================================
   Hero. Full frame, type sitting on the photograph.
   ================================================================= */

.hero {
  position: relative;
  /* The renderings are 2.24:1. Letting the frame get much taller than that
     crops into a blank stretch of wall, so the height tracks the width and
     only falls back to a viewport height on a narrow phone. */
  min-height: max(30rem, min(88svh, 58vw));
  display: flex;
  align-items: flex-end;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  margin-top: -1px;
}

.hero-media { position: absolute; inset: 0; }

/* <picture> is only a wrapper, so it has to be told to fill before the image
   inside it can. Without this the hero photograph sits at its own aspect ratio
   and the type falls off the bottom of it. */
.hero-media picture,
.feature-media picture { display: block; width: 100%; height: 100%; }

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 44% 56%;
}

/* Two scrims: one along the bottom to seat the type, one overall to
   pull the whole frame green so the photograph belongs to the brand. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6, 26, 20, 0.92) 0%, rgba(6, 26, 20, 0.55) 26%, rgba(6, 26, 20, 0) 62%),
    linear-gradient(to bottom, rgba(8, 33, 26, 0.5) 0%, rgba(8, 33, 26, 0) 34%),
    radial-gradient(120% 90% at 50% 40%, rgba(18, 64, 47, 0) 40%, rgba(8, 33, 26, 0.45) 100%);
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(3rem, 8vw, 6rem); }

.hero .wordmark { color: var(--on-dark); }
.hero .wordmark .name { font-size: clamp(2.9rem, 11.5vw, 8.5rem); letter-spacing: 0.035em; }
.hero .wordmark .sub { letter-spacing: 0.4em; opacity: 0.85; }

/* On a phone the 2.24:1 rendering is cropped to near-square. Aim the crop at
   the entrance corner rather than the long wall, and keep the frame shorter. */
@media (max-width: 40rem) {
  .hero { min-height: max(24rem, 54svh); }
  .hero-media img { object-position: 62% 55%; }
  .hero-meta .btn { width: 100%; justify-content: center; }
}

.hero-line {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  max-width: 30rem;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.45;
  color: var(--on-dark);
  opacity: 0.92;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1rem 0.5rem 0.85rem;
  border: 1px solid rgba(236, 231, 220, 0.3);
  border-radius: 999px;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--on-dark);
}

.tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(216, 180, 130, 0.22);
}

.hero-addr { font-size: 0.9rem; color: var(--on-dark-mut); letter-spacing: 0.02em; }

/* second tag, no dot, so only the live status carries the amber point */
.tag--quiet::before { display: none; }
.tag--quiet { color: var(--on-dark-mut); }

@media (prefers-reduced-motion: no-preference) {
  .hero-inner > * { animation: rise 0.9s var(--ease) both; }
  .hero-inner > *:nth-child(2) { animation-delay: 0.08s; }
  .hero-inner > *:nth-child(3) { animation-delay: 0.16s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* =================================================================
   Sections
   ================================================================= */

.section { padding-block: clamp(3.5rem, 9vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4rem); }
.on-dark { background: var(--ink); color: var(--on-dark); }
.on-sand { background: var(--sand); }

.on-dark .d2, .on-dark .d3, .on-dark h1, .on-dark h2 { color: var(--bone); font-weight: 600; letter-spacing: -0.012em; }
.on-dark p { color: var(--on-dark); opacity: 0.92; }
.on-dark .lede { color: var(--bone); opacity: 1; }

/* ---------- the numbers ---------- */

.figures { background: var(--ink-2); color: var(--on-dark); }
.figures .wrap { padding-block: clamp(2.5rem, 5vw, 3.75rem); }

/* Explicit column counts rather than auto-fit, because the dividers have to
   know which item starts a row. Auto-fit left a stray rule hanging at the
   left edge whenever the row wrapped. */
.figs { display: grid; grid-template-columns: 1fr; margin: 0; }

@media (min-width: 40rem) { .figs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .figs { grid-template-columns: repeat(4, 1fr); } }

.fig-item { padding: 1.25rem clamp(1rem, 2.5vw, 2rem); }

@media (min-width: 40rem) {
  .fig-item { border-left: 1px solid var(--rule-dark); }
  .fig-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fig-item:nth-child(n + 3) { border-top: 1px solid var(--rule-dark); margin-top: 1.25rem; }
}

@media (min-width: 68rem) {
  .fig-item:nth-child(odd) { border-left: 1px solid var(--rule-dark); padding-left: clamp(1rem, 2.5vw, 2rem); }
  .fig-item:first-child { border-left: 0; padding-left: 0; }
  .fig-item:nth-child(n + 3) { border-top: 0; margin-top: 0; }
}

.fig-item dt {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--olive-lit);
}

.fig-item dd {
  margin: 0.7rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.85rem, 3.4vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bone);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.fig-item .unit {
  display: block;
  white-space: normal;
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: 0.83rem;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--on-dark-mut);
}

@media (max-width: 44rem) {
  .fig-item { border-left: 0; border-top: 1px solid var(--rule-dark); padding-inline: 0; }
  .fig-item:first-child { border-top: 0; padding-top: 0; }
}

/* ---------- editorial split ---------- */

.editorial { display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: 1fr; }

@media (min-width: 54rem) {
  .editorial { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .editorial--sticky > :first-child { position: sticky; top: 7rem; }
}

.editorial .label { display: block; margin-bottom: 1.1rem; }

/* ---------- cinematic band, also the video slot ---------- */

.band { position: relative; background: var(--ink); overflow: hidden; }
.band img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.band video { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; display: block; }

@media (max-width: 44rem) { .band img, .band video { aspect-ratio: 4 / 3.4; } }

.band-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(2rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  background: linear-gradient(to top, rgba(6, 26, 20, 0.85), rgba(6, 26, 20, 0));
  color: var(--bone);
}

.band-caption .label { color: var(--amber); display: block; margin-bottom: 0.6rem; }
.band-caption p { margin: 0; max-width: 34rem; font-size: clamp(1rem, 1.9vw, 1.2rem); }

/* ---------- feature: image beside text ---------- */

.feature { display: grid; gap: 0; grid-template-columns: 1fr; align-items: stretch; }

@media (min-width: 54rem) {
  .feature { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.feature-media img { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; }

.feature-body {
  background: var(--forest);
  color: var(--bone);
  padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-body .label { color: var(--amber); display: block; margin-bottom: 1rem; }
.feature-body p { opacity: 0.88; }

.ticks { margin: 1.75rem 0 0; padding: 0; list-style: none; }

.ticks li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.6rem;
  border-top: 1px solid rgba(236, 231, 220, 0.14);
  font-size: 0.97rem;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.28rem;
  width: 8px;
  height: 1px;
  background: var(--amber);
}

/* ---------- spec sheet ---------- */

/* A label/value list, one pair per row. The old version was a multi-column
   grid, so nine items became 4 + 4 + 1 and the last one sat alone next to a
   large void with a stub of a rule under it. One per row cannot orphan. */

.spec-list { margin: 0; border-top: 1px solid var(--rule); }

.spec-list > div {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule-faint);
}

.spec-list dt { color: var(--muted); font-size: 0.95rem; }
.spec-list dd { margin: 0; }

@media (max-width: 40rem) {
  .spec-list > div { grid-template-columns: 1fr; gap: 0.15rem; padding: 0.8rem 0; }
  .spec-list dt { font-size: 0.85rem; letter-spacing: 0.01em; }
}

/* =================================================================
   Location panel and the map (Leaflet, see map.js)
   ================================================================= */

.loc-head { display: grid; gap: 1.5rem 4rem; grid-template-columns: 1fr; align-items: end; margin-bottom: clamp(2rem, 5vw, 3rem); }

@media (min-width: 54rem) { .loc-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }

.map { display: block; width: 100%; min-width: 680px; height: auto; }

/* Each destination is joined to the property by its own route line. Bearings
   are real; the lengths are compressed so the far ones stay on the canvas. */

/* Every label carries a dark halo, so it stays readable where it crosses the
   river or a highway. This is the one trick that separates a real map from a
   diagram with words on it. */

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 1.25rem;
  font-size: 0.84rem;
  color: var(--on-dark-mut);
}

/* drive times, as a table of figures */

.distances { margin: 0; list-style: none; padding: 0; }

.distances li { border-bottom: 1px solid var(--rule-dark); }
.distances li:first-child { border-top: 1px solid var(--rule-dark); }

.distances a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.9rem 0.6rem 0.9rem 0;
  text-decoration: none;
  transition: background-color 0.16s var(--ease), padding-left 0.16s var(--ease);
}

.distances a:hover,
.distances a:focus-visible { background: rgba(216, 180, 130, 0.08); padding-left: 0.6rem; }
.distances a:active { background: rgba(216, 180, 130, 0.16); }

.distances .place { color: var(--on-dark); }
.distances a:hover .place { color: var(--bone); }

/* the arrow only shows the row is a link; it is decorative */
.distances .place::after {
  content: " \2197";
  color: var(--amber);
  opacity: 0;
  transition: opacity 0.16s var(--ease);
}

.distances a:hover .place::after,
.distances a:focus-visible .place::after { opacity: 1; }

.distances .miles {
  font-family: var(--display);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
  color: var(--amber);
  letter-spacing: -0.01em;
}

.distances .miles small { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-mut); margin-left: 0.35rem; }

/* =================================================================
   Buttons and contact
   ================================================================= */

.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.9rem; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.6rem;
  border-radius: 1px;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}

.btn--solid { background: var(--amber); color: #23180a; border-color: var(--amber); font-variant-numeric: tabular-nums; }
.btn--solid:hover { background: #e5c496; border-color: #e5c496; }

.btn--outline { color: inherit; border-color: currentColor; opacity: 0.85; }
.btn--outline:hover { opacity: 1; background: rgba(236, 231, 220, 0.08); }

.on-sand .btn--outline { border-color: var(--rule); color: var(--body); }
.on-sand .btn--outline:hover { background: rgba(8, 33, 26, 0.05); border-color: var(--olive); }

/* feedback on pointer-down, not release */
.btn:active { transform: translateY(1px); }
.btn--solid:active { background: #c9a06d; border-color: #c9a06d; }

.tel-display {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(2.4rem, 7.5vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--bone);
  text-decoration: none;
  font-variant-numeric: tabular-nums lining-nums;
  border-bottom: 1px solid rgba(236, 231, 220, 0.25);
  padding-bottom: 0.08em;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.tel-display:hover { color: var(--amber); border-bottom-color: var(--amber); }
.tel-display:active { color: #c9a06d; }

.contact-card { border: 1px solid var(--rule-dark); padding: clamp(1.5rem, 4vw, 2.25rem); }
.contact-card .role { display: block; margin-bottom: 0.75rem; }
.contact-card .person { font-family: var(--display); font-variant-numeric: lining-nums; font-size: 1.7rem; color: var(--bone); margin: 0 0 0.2rem; letter-spacing: -0.01em; }
.contact-card .company { margin: 0 0 1.25rem; color: var(--on-dark-mut); font-size: 0.95rem; }
.contact-card a { color: var(--on-dark); text-decoration: none; border-bottom: 1px solid var(--rule-dark); }
.contact-card a:hover { color: var(--amber); border-bottom-color: var(--amber); }

.checklist { margin: 1.1rem 0 0; padding: 0; list-style: none; }
.checklist li { position: relative; padding: 0.6rem 0 0.6rem 1.5rem; border-top: 1px solid var(--rule-faint); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 1.15rem; width: 8px; height: 1px; background: var(--olive); }

.address { font-style: normal; font-size: 1.08rem; line-height: 1.55; }

/* =================================================================
   Footer
   ================================================================= */

.site-footer { background: var(--ink); color: var(--on-dark-mut); padding-block: clamp(3rem, 7vw, 4.5rem); font-size: 0.9rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }

@media (min-width: 50rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.site-footer .wordmark { color: var(--bone); }
.site-footer .wordmark .name { font-size: 1.35rem; }
.site-footer h2 { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--olive-lit); margin: 0 0 0.9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.55rem; }
.site-footer a { color: var(--on-dark); text-decoration: none; border-bottom: 1px solid var(--rule-dark); }
.site-footer a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.colophon { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-dark); font-size: 0.8rem; opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- email menu (progressive enhancement, see email-menu.js) ---------- */

.mailmenu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 13rem;
  padding: 0.4rem;
  background: var(--ink-2);
  border: 1px solid var(--rule-dark);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.on-sand .mailmenu { background: var(--bone); border-color: var(--rule); }

.mailmenu a {
  display: block;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--on-dark);
  transition: background-color 0.14s var(--ease), color 0.14s var(--ease);
}

.on-sand .mailmenu a { color: var(--body); }

.mailmenu a:hover,
.mailmenu a:focus-visible { background: rgba(216, 180, 130, 0.14); color: var(--bone); outline: none; }
.on-sand .mailmenu a:hover,
.on-sand .mailmenu a:focus-visible { background: rgba(8, 33, 26, 0.06); color: var(--ink); }
.mailmenu a:active { background: rgba(216, 180, 130, 0.24); }

@media (prefers-reduced-motion: no-preference) {
  .mailmenu { animation: menuIn 0.14s var(--ease) both; }
  @keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* =================================================================
   Location panel and the map (Leaflet, see map.js)
   ================================================================= */

/* ---------- section bar (see section-nav.js) ----------
   A second row inside the sticky header, homepage only. It sits inside the
   header rather than under it so there is only ever one sticky element and no
   offset to keep in sync. */

.section-nav { border-top: 1px solid rgba(236, 231, 220, 0.1); }

.section-nav .wrap {
  display: flex;
  align-items: center;
  /* .site-header .wrap also matches this element and would otherwise leak its
     space-between in, spreading the links to the edges by accident. Left
     aligned lines the first link up with the wordmark above it. */
  justify-content: flex-start;
  /* Same leak: the mobile rule on .site-header .wrap sets flex-wrap: wrap,
     which stacked this bar onto two rows instead of letting it scroll. */
  flex-wrap: nowrap;
  gap: clamp(0.9rem, 2.6vw, 2.25rem);
  padding-block: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.section-nav .wrap::-webkit-scrollbar { display: none; }

.section-nav a {
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--on-dark-mut);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.3rem;
  border-bottom: 1px solid transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.section-nav a:hover { color: var(--on-dark); }
.section-nav a:active { color: var(--amber); }

.section-nav a[aria-current="true"] {
  color: var(--bone);
  border-bottom-color: var(--amber);
}

/* Anchors have to clear the sticky header. section-nav.js replaces --chrome
   with the header's measured height; this is the fallback if it never runs. */
main section[id] { scroll-margin-top: var(--chrome, 8.5rem); }

@media (max-width: 36rem) {
  .section-nav .wrap { gap: 1.1rem; padding-block: 0.4rem; }
  .section-nav a { font-size: 0.78rem; }
  main section[id] { scroll-margin-top: var(--chrome, 10.5rem); }
}

/* ---------- the map: Leaflet over Esri satellite (see map.js) ---------- */

.map-frame {
  position: relative;
  height: clamp(26rem, 62vh, 40rem);
  border: 1px solid var(--rule-dark);
  background: var(--ink-2);
  overflow: hidden;
  isolation: isolate;
  color: var(--on-dark);
}

/* vignette so the imagery sits inside the page instead of floating on it */
.map-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 450;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(236, 231, 220, 0.06), inset 0 0 90px rgba(6, 26, 20, 0.55);
}

.map-nojs, .map-frame--failed::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
  color: var(--on-dark-mut);
  font-size: 0.95rem;
}
.map-frame--failed::before { content: "The map could not load. Every place is listed below with a link to directions."; }

[hidden] { display: none !important; }

.map-frame.leaflet-container { font-family: var(--sans); background: var(--ink-2); outline: none; }
.map-frame.leaflet-container a { color: inherit; }
.map-frame.leaflet-container:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

/* pins. The icon box is 0 by 0, everything hangs off that point. */
.map-frame .leaflet-marker-icon.pin-wrap { background: none; border: 0; overflow: visible; outline: none; }
.pin { position: relative; display: block; width: 0; height: 0; cursor: pointer; }

.pin-dot {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bone);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 2px rgba(236, 231, 220, 0.55), 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease);
}
.pin--home .pin-dot { left: -8px; top: -8px; width: 16px; height: 16px; background: var(--amber); }

.pin-halo {
  position: absolute; left: -18px; top: -18px; width: 36px; height: 36px;
  border-radius: 50%; border: 2px solid var(--amber); opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  .pin-halo { animation: pinpulse 2.8s var(--ease) infinite; }
  @keyframes pinpulse { 0% { transform: scale(0.5); opacity: 0.7; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
}

.pin-label {
  position: absolute;
  white-space: nowrap;
  padding: 0.42rem 0.62rem 0.46rem;
  background: rgba(8, 33, 26, 0.84);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(236, 231, 220, 0.18);
  border-radius: 2px;
  color: var(--on-dark);
  font-size: 0.8rem;
  line-height: 1.15;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.pin-label strong { display: block; font-weight: 500; }
.pin-label small { display: block; margin-top: 0.15rem; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--amber); }
.pin-arrow { opacity: 0.7; }

.pin-label[data-dir="top"]    { left: 0; bottom: 14px; transform: translateX(-50%); }
.pin-label[data-dir="bottom"] { left: 0; top: 14px;    transform: translateX(-50%); }
.pin-label[data-dir="left"]   { right: 14px; top: 0;   transform: translateY(-50%); }
.pin-label[data-dir="right"]  { left: 14px;  top: 0;   transform: translateY(-50%); }

.pin-label--home { background: rgba(216, 180, 130, 0.96); border-color: rgba(216, 180, 130, 1); color: #23180a; }
.pin-label--home small { color: #5a4520; }

.pin-wrap:hover .pin-dot, .pin-wrap.is-hot .pin-dot, .pin-wrap:focus-visible .pin-dot { background: var(--amber); transform: scale(1.25); }
.pin-wrap:hover .pin-label, .pin-wrap.is-hot .pin-label, .pin-wrap:focus-visible .pin-label { background: rgba(18, 64, 47, 0.96); border-color: var(--amber); }
.pin-wrap:hover, .pin-wrap.is-hot { z-index: 900 !important; }

/* controls, restyled to the site */
.map-frame .leaflet-control { margin: 0.75rem !important; }
.map-frame .leaflet-bar { border: 1px solid rgba(236, 231, 220, 0.2) !important; border-radius: 2px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); overflow: hidden; }
.map-frame .leaflet-bar a {
  border-radius: 0;
  background: rgba(8, 33, 26, 0.86); color: var(--on-dark);
  border-bottom: 1px solid rgba(236, 231, 220, 0.12) !important;
  width: 34px; height: 34px; line-height: 34px; font-size: 1.1rem;
}
.map-frame .leaflet-bar a:hover { background: rgba(18, 64, 47, 0.96); color: var(--bone); }
.map-frame .leaflet-bar a.leaflet-disabled { opacity: 0.4; }

.map-view { display: flex; }
.map-view button {
  font: inherit; font-size: 0.8rem; letter-spacing: 0.01em;
  padding: 0.55rem 0.95rem; border: 0; cursor: pointer;
  background: rgba(8, 33, 26, 0.86); color: var(--on-dark);
  border-right: 1px solid rgba(236, 231, 220, 0.12);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.map-view button:last-child { border-right: 0; }
.map-view button:hover { background: rgba(18, 64, 47, 0.96); color: var(--bone); }
.map-view button.is-active { background: rgba(216, 180, 130, 0.92); color: #23180a; }
.map-view button:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }

.map-frame .leaflet-control-attribution {
  background: rgba(8, 33, 26, 0.6) !important;
  color: rgba(236, 231, 220, 0.55) !important;
  font-size: 0.62rem; padding: 0.15rem 0.45rem;
}
.map-frame .leaflet-control-attribution a { color: inherit !important; }

/* a row in the list lights its pin, and a pin lights its row */
.distances a.is-hot { background: rgba(216, 180, 130, 0.1); padding-left: 0.6rem; }
.distances a.is-hot .place::after { opacity: 1; }

/* On a phone seven labelled pins cannot share a 375px map at region zoom, so
   only the property keeps its label. The other dots are larger tap targets and
   the drive-times list directly under the map is the legend: touching a row
   lights its dot, and one tap on any dot still goes straight to directions. */
@media (max-width: 40rem) {
  .map-frame { height: clamp(22rem, 70vh, 30rem); }
  .pin-label { font-size: 0.74rem; padding: 0.34rem 0.5rem 0.38rem; }
  .pin-label:not(.pin-label--home) { display: none; }
  .pin-wrap.is-hot .pin-label, .pin-wrap:focus-visible .pin-label { display: block; }
  .pin-dot { left: -9px; top: -9px; width: 18px; height: 18px; }
  .pin--home .pin-dot { left: -10px; top: -10px; width: 20px; height: 20px; }
  .map-view button { padding: 0.5rem 0.75rem; font-size: 0.76rem; }
}