/* /places/map — fullscreen vintage atlas of Martha-orbit places.
 *
 * Mobile-first: viewport-locked, no page scroll. Layout is a three-row
 * stack: thin app bar at top → big map fills the rest → chip strip at
 * bottom. Pin taps open a bottom-sheet drawer with the place's bio +
 * top recent episodes. Desktop reuses the same layout (centered, framed).
 */

/* ── Body lock ─────────────────────────────────────────────────────────── */
body.body--bare {
  margin: 0;
  height: 100dvh;
  height: 100vh;
  overflow: hidden;
  /* Warmer parchment with a subtle radial vignette so the flash before
   * tiles load looks like aged paper rather than flat sand. */
  background:
    radial-gradient(ellipse at 50% 35%, #f5ecd4 0%, #efe1b8 60%, #e8d6a4 100%);
}
body.body--bare main#main { height: 100%; }

/* ── Atlas container ──────────────────────────────────────────────────── */
.atlas {
  --bar-h: 52px;
  --chips-h: 56px;
  --tabbar-h: 64px;
  --terracotta: #c4632a;
  --terracotta-deep: #9c4a1d;
  --sage: #6b7f3a;
  --moss: #4f7a30;
  --ochre: #b8841f;
  --aubergine: #7a4a8a;
  --rust: #9a4030;
  --indigo: #3f4a78;
  --umber: #4a3a26;
  --parchment: #f8f1de;
  --parchment-deep: #ebdfb8;
  --ink: #2a2018;

  position: relative;
  width: 100%;
  height: 100dvh;
  height: 100vh;
  display: grid;
  grid-template-rows: var(--bar-h) 1fr var(--chips-h) calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  background: var(--parchment);
  color: var(--ink);
  overflow: hidden;
  font-family: var(--font-body), serif;
}

/* ── Top app bar ──────────────────────────────────────────────────────── */
.atlas-bar {
  display: grid;
  grid-template-columns: 44px 1fr 56px;
  align-items: center;
  padding: 0 var(--space-2);
  /* Gentle warm gradient + dotted base — feels like the edge of a torn
   * paper strip pasted to the top of the map. Lighter than a flat fill, so
   * the bar reads as part of the page, not a heavy chrome strip. */
  background:
    linear-gradient(180deg, #faf2da 0%, #f4e8c5 100%);
  color: var(--ink);
  border-bottom: 1px dotted rgba(74, 58, 38, 0.32);
  box-shadow: 0 1px 0 rgba(248, 241, 222, 0.6);  /* hairline inner highlight */
  z-index: 30;
  animation: atlasFadeDown 480ms ease-out both;
}
@keyframes atlasFadeDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes atlasFadeUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.atlas-bar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 4px;
  transition: background 120ms ease;
}
.atlas-bar__back:hover, .atlas-bar__back:focus-visible {
  background: rgba(42, 32, 24, 0.08);
  outline: none;
}
.atlas-bar__title {
  font-family: var(--font-display, "Cormorant Garamond"), serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.22rem;
  letter-spacing: 0.012em;
  text-align: center;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Tiny terracotta swash under the title — three short ticks, hand-drawn
   * feel without an external SVG. The single linear gradient is sized as a
   * 22px bar centered horizontally just below the baseline. */
  background:
    linear-gradient(90deg,
      transparent 0%, transparent 32%,
      var(--terracotta) 32%, var(--terracotta) 38%,
      transparent 38%, transparent 47%,
      var(--terracotta) 47%, var(--terracotta) 53%,
      transparent 53%, transparent 62%,
      var(--terracotta) 62%, var(--terracotta) 68%,
      transparent 68%, transparent 100%) center bottom / 56px 1.2px no-repeat;
  padding-bottom: 6px;
}
.atlas-bar__count {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--umber);
  text-align: right;
  padding-right: 6px;
  font-variant-numeric: tabular-nums;
}

/* ── Map ──────────────────────────────────────────────────────────────── */
#atlas-map {
  width: 100%;
  height: 100%;
  background: #f3ead0;
  border-top: 0;
  border-bottom: 0;
  position: relative;
  /* Explicit z-index establishes a stacking context so the paper-grain
   * ::after (z-index 350) and the compass rose ::before (z-index 1500) stay
   * contained within the map — without this their high z-indexes painted
   * over the bottom sheet (z-index 40) and atlas bar. */
  z-index: 1;
  isolation: isolate;
}

/* CARTO Voyager isn't painted, but with a warm sepia + a faint blur the
 * tiles read as "old illustrated map page". The paper-grain overlay
 * (below) does the rest. Slightly higher contrast than before so city
 * labels and coastlines read clearly through the paper grain. */
.leaflet-tile-pane {
  filter:
    sepia(0.36)
    saturate(0.74)
    hue-rotate(-4deg)
    contrast(0.98)
    brightness(1.02);
}
/* Tiles fade in instead of popping — masks any flicker during the first
 * paint while pages of the atlas "turn open". */
.leaflet-tile {
  animation: atlasTileIn 420ms ease-out both;
}
@keyframes atlasTileIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* Two-layer paper texture — coarser fiber speckle and a finer noise on top.
 * SVG noise via feTurbulence, inlined as data-URIs so they add 0 network
 * requests. Multiply blend keeps the colours below intact. */
#atlas-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 0.34  0 0 0 0 0.26  0 0 0 0 0.18  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.22  0 0 0 0 0.16  0 0 0 0 0.10  0 0 0 0.3 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px, 160px 160px;
  opacity: 0.55;
  mix-blend-mode: multiply;
  z-index: 350;
}

/* Decorative compass rose — italic-serif "N" anchored in a parchment disc
 * with a fine ink hairline + a tiny cardinal tick at each quadrant. A small
 * atlas flourish that the painted tiles deserve. */
#atlas-map::before {
  content: "N";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-family: var(--font-display, "Cormorant Garamond"), serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: 0.02em;
  color: var(--ink, #2a2018);
  background:
    radial-gradient(circle at 40% 35%, #fdf5dc 0%, #ecdfb5 100%);
  border: 1px solid rgba(74, 58, 38, 0.55);
  border-radius: 50%;
  box-shadow:
    0 3px 8px rgba(42, 32, 24, 0.32),
    inset 0 0 0 1px rgba(255, 251, 230, 0.7),
    inset 0 0 14px rgba(74, 58, 38, 0.12);
  z-index: 1500;
  pointer-events: none;
  animation: atlasFadeDown 700ms 200ms ease-out both;
}
/* Hand-pressed cardinal ticks — tiny ink marks at S/E/W (N is the letter).
 * Drawn as a pseudo-image via inline SVG so we don't need a second element. */
#atlas-map::before {
  background-image:
    /* tick marks at four cardinals + a faint cross-hatch */
    radial-gradient(circle at 50% 92%, rgba(74,58,38,0.55) 0 0.6px, transparent 1.1px),
    radial-gradient(circle at 92% 50%, rgba(74,58,38,0.55) 0 0.6px, transparent 1.1px),
    radial-gradient(circle at 8% 50%, rgba(74,58,38,0.55) 0 0.6px, transparent 1.1px),
    radial-gradient(circle at 40% 35%, #fdf5dc 0%, #ecdfb5 100%);
}

.leaflet-control-attribution { display: none; }
.leaflet-control-zoom {
  margin: var(--space-2) !important;
}
.leaflet-control-zoom a {
  background: var(--parchment) !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  font-family: var(--font-display) !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 1.2rem !important;
}
.leaflet-control-zoom a:hover { background: var(--parchment-deep) !important; }

/* ── Pins ─────────────────────────────────────────────────────────────── */
/* Higher-specificity selector (.leaflet-marker-icon.atlas-pin) is required
 * because leaflet.css ships `.leaflet-marker-icon { pointer-events: auto }`
 * and our wide 120px label icon would otherwise swallow clicks intended for
 * adjacent pins or cluster markers. Inner __dot / __hit re-enable hits where
 * we actually want them. */
.atlas-pin,
.leaflet-marker-icon.atlas-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
/* Invisible hit zone wrapping the dot. Gives the pin a real touch target
 * (44×44) without growing the visible dot. */
.atlas-pin__hit {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 28px;
  pointer-events: auto;
  z-index: 1;
}
.atlas-pin__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--terracotta);
  border: 2px solid var(--parchment);
  box-shadow:
    0 1px 3px rgba(60, 50, 30, 0.5),
    0 0 0 1px rgba(42, 32, 24, 0.4);
  margin-bottom: 2px;
  pointer-events: auto;
  position: relative;
  z-index: 2;
  transition: transform 120ms ease, box-shadow 200ms ease;
}
.atlas-pin:hover .atlas-pin__dot {
  transform: scale(1.4);
}
.atlas-pin--active .atlas-pin__dot {
  transform: scale(1.6);
  box-shadow:
    0 2px 6px rgba(60, 50, 30, 0.55),
    0 0 0 1px rgba(42, 32, 24, 0.55),
    0 0 0 5px rgba(196, 99, 42, 0.18);  /* terracotta halo */
}
.atlas-pin--active { z-index: 1000 !important; }

.atlas-pin__dot[data-kind="residence"]      { background: var(--umber); }
.atlas-pin__dot[data-kind="business"]       { background: var(--terracotta); }
.atlas-pin__dot[data-kind="museum"]         { background: var(--sage); }
.atlas-pin__dot[data-kind="garden"]         { background: var(--moss); }
.atlas-pin__dot[data-kind="farm"]           { background: var(--ochre); }
.atlas-pin__dot[data-kind="zoo"]            { background: var(--aubergine); }
.atlas-pin__dot[data-kind="park"]           { background: var(--moss); }
.atlas-pin__dot[data-kind="location"]       { background: var(--umber); }
.atlas-pin__dot[data-kind="event"]          { background: var(--terracotta-deep); }
.atlas-pin__dot[data-kind="organization"]   { background: var(--indigo); }
.atlas-pin__dot[data-kind="historic-house"] { background: var(--rust); }
.atlas-pin__dot[data-kind="field-trip"]     { background: var(--terracotta); }

.atlas-pin__label {
  font-family: var(--font-display, "Cormorant Garamond"), serif;
  font-style: italic;
  font-size: 0.78rem;
  line-height: 1;
  color: var(--ink);
  text-shadow:
     0  1px 0 var(--parchment),
     1px 0  0 var(--parchment),
     0 -1px 0 var(--parchment),
    -1px 0  0 var(--parchment),
     1px 1px 0 var(--parchment),
    -1px 1px 0 var(--parchment),
     1px -1px 0 var(--parchment),
    -1px -1px 0 var(--parchment);
  white-space: nowrap;
  pointer-events: auto;
  letter-spacing: 0.01em;
  transition: opacity 200ms ease;
}
.atlas-pin:hover .atlas-pin__label { color: var(--terracotta-deep); }

/* Zoom-aware label visibility: JS toggles .atlas--zoomed-out on the page
 * container when zoom < 7. At national/regional zoom labels would just
 * pile on top of each other, so we hide them and let the dots tell the
 * story. Pins on hover/active still reveal their label. */
.atlas--zoomed-out .atlas-pin__label { opacity: 0; pointer-events: none; }
.atlas--zoomed-out .atlas-pin:hover .atlas-pin__label,
.atlas--zoomed-out .atlas-pin--active .atlas-pin__label { opacity: 1; }

/* ── Cluster markers (low-zoom aggregation) ───────────────────────────── */
/* When zoom < 7, pixel-adjacent pins collapse into a single italic-serif
 * count marker. Clicking it flies the map into the cluster's bounds, so
 * the user never has to chase a stack of stamped dots in midtown. */
.atlas-cluster {
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
}
.atlas-cluster__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%, #fdf5dc 0%, #ecdfb5 100%);
  border: 1.5px solid var(--terracotta-deep);
  box-shadow:
    0 2px 6px rgba(42, 32, 24, 0.35),
    inset 0 0 0 1px rgba(255, 251, 230, 0.65);
  transition: transform 140ms ease, box-shadow 200ms ease;
}
.atlas-cluster:hover .atlas-cluster__ring {
  transform: scale(1.08);
  box-shadow:
    0 3px 10px rgba(42, 32, 24, 0.45),
    inset 0 0 0 1px rgba(255, 251, 230, 0.75),
    0 0 0 4px rgba(156, 74, 29, 0.18);
}
.atlas-cluster__count {
  position: relative;
  z-index: 1;
  font-family: var(--font-display, "Cormorant Garamond"), serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1rem;
  color: var(--terracotta-deep);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
/* Modifier classes set by JS so larger clusters get larger numerals. */
.atlas-cluster--sm .atlas-cluster__count { font-size: 0.92rem; }
.atlas-cluster--md .atlas-cluster__count { font-size: 1.08rem; }
.atlas-cluster--lg .atlas-cluster__count { font-size: 1.24rem; }

/* ── Filter chips (bottom strip) ──────────────────────────────────────── */
.atlas-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 12px;
  /* Same warm gradient as the top bar, mirrored — the rail feels like a
   * second strip of pasted paper. The dotted top edge keeps the boundary
   * visible without a hard line. */
  background:
    linear-gradient(0deg, #faf2da 0%, #f4e8c5 100%);
  border-top: 1px dotted rgba(74, 58, 38, 0.32);
  box-shadow: 0 -1px 0 rgba(248, 241, 222, 0.6) inset;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  align-items: center;
  z-index: 25;
  animation: atlasFadeUp 520ms 80ms ease-out both;
}
.atlas-chips::-webkit-scrollbar { display: none; }

.atlas-chip {
  flex-shrink: 0;
  font-family: var(--font-display, "Cormorant Garamond"), serif;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.01em;
  background: var(--parchment);
  color: var(--ink);
  border: 1px solid rgba(42, 32, 24, 0.4);
  border-radius: 999px;       /* pill */
  padding: 9px 18px;
  min-height: 40px;       /* up from 36 — closer to WCAG 44 with rail padding above/below */
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
  font-feature-settings: "kern";
}
.atlas-chip:active { transform: scale(0.97); }
.atlas-chip:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}
.atlas-chip:hover { background: var(--parchment-deep); }
/* Default active state uses warm umber rather than pure ink — the charcoal
 * pill was reading as a hard slab against the cream chip rail. Per-kind
 * overrides below take over for the typed filter chips. */
.atlas-chip.is-active {
  background: var(--umber);
  color: var(--parchment);
  border-color: var(--umber);
}
.atlas-chip[data-kind="residence"].is-active   { background: var(--umber);          border-color: var(--umber); }
.atlas-chip[data-kind="business"].is-active    { background: var(--terracotta);     border-color: var(--terracotta); }
.atlas-chip[data-kind="museum"].is-active      { background: var(--sage);           border-color: var(--sage); }
.atlas-chip[data-kind="garden"].is-active      { background: var(--moss);           border-color: var(--moss); }
.atlas-chip[data-kind="farm"].is-active        { background: var(--ochre);          border-color: var(--ochre); }
.atlas-chip[data-kind="historic-house"].is-active { background: var(--rust);        border-color: var(--rust); }
.atlas-chip[data-kind="event"].is-active       { background: var(--terracotta-deep); border-color: var(--terracotta-deep); }

/* ── Bottom sheet (pin tap → drawer) ──────────────────────────────────── */
.atlas-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--chips-h) + var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  background: var(--parchment);
  border-top: 1px solid rgba(42, 32, 24, 0.25);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow: 0 -20px 40px -16px rgba(42, 32, 24, 0.5);
  /* Closed: pushed offscreen AND invisible. Without visibility:hidden a sheet
   * with only the close button inside is barely 60px tall, so translateY(100%)
   * only slides it down ~60px — the × button stays peeking above the chips. */
  transform: translateY(110%);
  visibility: hidden;
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 280ms;
  z-index: 40;
  max-height: min(62dvh, 540px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 20px 26px;
  overscroll-behavior: contain;
}
.atlas-sheet.is-open {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

/* Grab handle — small visual signal that this is a dismissible sheet,
 * like a native bottom sheet. We don't implement drag-to-dismiss; this is
 * a familiar affordance that maps to the × button + tap-outside dismiss. */
.atlas-sheet::before {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin: -10px auto 14px;
  background: rgba(42, 32, 24, 0.28);
  border-radius: 2px;
}

.atlas-sheet__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--umber);
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  transition: background 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.atlas-sheet__close:hover, .atlas-sheet__close:focus-visible {
  background: rgba(42, 32, 24, 0.08);
  outline: none;
}

.atlas-sheet__eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 6px;
  font-weight: 500;
}
.atlas-sheet__eyebrow[data-kind="residence"]   { color: var(--umber); }
.atlas-sheet__eyebrow[data-kind="business"]    { color: var(--terracotta-deep); }
.atlas-sheet__eyebrow[data-kind="museum"]      { color: var(--sage); }
.atlas-sheet__eyebrow[data-kind="garden"]      { color: var(--moss); }
.atlas-sheet__eyebrow[data-kind="farm"]        { color: var(--ochre); }
.atlas-sheet__eyebrow[data-kind="historic-house"] { color: var(--rust); }

.atlas-sheet__name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.1;
  margin: 0 36px 8px 0;
  color: var(--ink);
}
.atlas-sheet__role {
  font-size: 0.92rem;
  color: var(--umber);
  line-height: 1.45;
  margin: 0 0 14px;
}

.atlas-sheet__divider {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(42, 32, 24, 0.55);
  margin: 14px 0 8px;
  border-top: 1px dotted rgba(42, 32, 24, 0.35);
  padding-top: 10px;
}

.atlas-sheet__episodes {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}
.atlas-sheet__ep {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: start;
  text-decoration: none;
  color: var(--ink);
  transition: opacity 120ms ease;
}
.atlas-sheet__ep:hover { opacity: 0.78; }
.atlas-sheet__ep-photo {
  width: 76px;
  height: 44px;
  object-fit: cover;
  background: var(--parchment-deep);
  border-radius: 2px;
  display: block;
  box-shadow: 0 1px 2px rgba(42, 32, 24, 0.18);
}
.atlas-sheet__ep-photo--placeholder {
  background: var(--parchment-deep);
}
.atlas-sheet__ep-title {
  font-size: 0.88rem;
  line-height: 1.25;
  margin: 0;
}
.atlas-sheet__ep-meta {
  font-size: 0.75rem;
  color: var(--umber);
  margin: 2px 0 0;
}

.atlas-sheet__cta {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--terracotta-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--terracotta-deep);
  padding-bottom: 1px;
}

.atlas-sheet__loading {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--umber);
  margin: 8px 0;
}

.atlas-sheet__empty {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--umber);
  line-height: 1.5;
  margin: 0 0 14px;
}

/* Loading state — small pulse */
@keyframes atlasPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.atlas-sheet__loading { animation: atlasPulse 1.4s ease-in-out infinite; }

/* ── Desktop polish (≥ 721px) ─────────────────────────────────────────── */
@media (min-width: 721px) {
  .atlas {
    --bar-h: 56px;
    --chips-h: 60px;
  }
  .atlas-bar__title { font-size: 1.3rem; }
  .atlas-chips { padding: 12px 20px; }
  .atlas-chip { font-size: 1rem; padding: 7px 16px; }
  .atlas-pin__dot { width: 11px; height: 11px; }
  .atlas-sheet { max-width: 440px; left: auto; right: 16px; bottom: calc(var(--chips-h) + var(--tabbar-h) + 16px); border: 1px solid var(--ink); }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .atlas-sheet { transition: none; }
  .atlas-pin__dot { transition: none; }
  .atlas-sheet__loading { animation: none; }
}

/* ── Bottom tab bar (mirrors /m/ SPA nav) ─────────────────────────────── */
.atlas-tabbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 8px 10px env(safe-area-inset-bottom, 8px);
  background: rgba(251, 248, 240, 0.96);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-top: 1px solid rgba(42, 32, 24, 0.16);
  z-index: 50;
  animation: atlasFadeUp 560ms 140ms ease-out both;
}

.atlas-tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 0;
  font-family: var(--font-body, system-ui), serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.55;
  background: transparent;
  border: none;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 120ms ease;
}
.atlas-tabbar__item:hover { opacity: 0.8; }
.atlas-tabbar__item:active { opacity: 0.75; }
.atlas-tabbar__item.is-active {
  color: var(--terracotta-deep);
  opacity: 1;
}
.atlas-tabbar__item svg { width: 22px; height: 22px; }
.atlas-tabbar__item span { font-size: 10px; }