/* ============================================================
   Blog-only stylesheet — Apple-inspired.
   No relation to the main site's CSS.
   Tune the variables at the top to retune palette / spacing.
   ============================================================ */

:root,
[data-theme="light"] {
  --bg:         #fbfbfd;
  --bg-elev:    #ffffff;
  --bg-soft:    #f5f5f7;
  --text:       #1d1d1f;
  --text-soft:  #515154;
  --muted:      #86868b;
  --rule:       #d2d2d7;
  --rule-soft:  #e8e8ed;
  --accent:     #0071e3;
  --accent-h:   #0077ed;
  --live:       #ff453a;        /* live-dot red */
  --code-bg:    #1d1d1f;
  --code-fg:    #f5f5f7;
  --glass:      rgba(251, 251, 253, 0.72);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 20px 60px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] {
  --bg:         #000000;
  --bg-elev:    #1d1d1f;
  --bg-soft:    #161617;
  --text:       #f5f5f7;
  --text-soft:  #c9c9ce;
  --muted:      #86868b;
  --rule:       #2a2a2c;
  --rule-soft:  #1f1f21;
  --accent:     #2997ff;
  --accent-h:   #5cb1ff;
  --live:       #ff6961;
  --code-bg:    #0a0a0a;
  --code-fg:    #f5f5f7;
  --glass:      rgba(0, 0, 0, 0.72);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 20px 60px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body.blog-body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover { color: var(--accent-h); }

img { max-width: 100%; height: auto; }

/* ============================================================
   Sticky translucent header (Apple-style)
   ============================================================ */

.blog-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.25rem;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule-soft);
}

.blog-back {
  justify-self: start;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-soft);
  letter-spacing: -0.01em;
}

.blog-back:hover { color: var(--accent); }

.blog-title {
  justify-self: center;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.blog-title a {
  color: var(--text);
}

.blog-title a:hover { color: var(--text-soft); }

.blog-tagline { display: none; }  /* Apple-style header is minimal */

.blog-toggle {
  justify-self: end;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text-soft);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.blog-toggle:hover {
  background: var(--bg-soft);
  border-color: var(--text-soft);
}

.blog-toggle .glyph-dark  { display: none; }
.blog-toggle .glyph-light { display: inline; }
[data-theme="dark"] .blog-toggle .glyph-light { display: none; }
[data-theme="dark"] .blog-toggle .glyph-dark  { display: inline; }

/* ============================================================
   Layout
   ============================================================ */

.blog-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}

/* "Wide" posts can break the column for full-bleed elements. */
.blog-main.wide {
  max-width: 1080px;
}

.blog-footer {
  max-width: 720px;
  margin: 0 auto 4rem;
  padding: 2rem 1.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
  border-top: 1px solid var(--rule-soft);
}

.blog-footer a { color: var(--text-soft); }
.blog-footer a:hover { color: var(--accent); }

/* ============================================================
   Hero (used on listing + posts)
   ============================================================ */

.hero {
  text-align: center;
  padding: 1rem 0 3.5rem;
}

/* Portrait hero (blog landing only).
   Knight on the left, the painting bleeds into the page on its
   right edge via mask-image. The composition reads as a figure
   contemplating the writing. */
.hero-with-portrait {
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  gap: clamp(1rem, 4vw, 3rem);
  text-align: left;
  align-items: center;
  padding-top: 1.5rem;
  padding-bottom: 4rem;
  max-width: 900px;
  margin: 0 auto;
}

.hero-with-portrait .hero-text {
  min-width: 0;
}

.hero-with-portrait .hero-sub {
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 760px) {
  .hero-with-portrait .hero-sub {
    margin-left: auto;
    margin-right: auto;
  }
}

.hero-portrait {
  margin: 0;
  position: relative;
  width: 100%;
  max-width: 360px;
  justify-self: end;
}

/* --- Slider stage: two stacked images, a vertical wipe ----------- */
.portrait-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  --split: 50%;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  isolation: isolate;
}

.portrait-base,
.portrait-top {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  display: block;
  pointer-events: none;
  /* Bleed the painting into the page on the right edge so it doesn't
     sit in a hard rectangle next to the type. */
  -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%);
          mask-image: linear-gradient(to right, #000 80%, transparent 100%);
}

/* Top layer = painted. --split is the cursor's X position as %.
   We clip the top from its RIGHT side by (100% - split), so the
   visible edge of the painted version sits exactly at the cursor.
   No CSS transition — the divide should be where the cursor is RIGHT
   NOW, not 120ms behind it. will-change hints the compositor. */
.portrait-top {
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
  z-index: 2;
  will-change: clip-path;
}
.portrait-base { z-index: 1; }

/* Canvas overlay that draws drifting particles sampled from the cubic
   image, with constellation lines between near neighbors. Sits above
   the cubic base but BELOW the painted top so the painted side stays
   clean and the cubic side gains a quiet mystical layer. The mask
   fade is applied programmatically in portrait-particles.js (per-
   particle), so we don't stack a CSS mask on top — that would fade
   twice and the right-edge fall-off would be steeper than the mask
   on the painted/cubic images. */
.portrait-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Theme-aware constellation line color. Read from JS via
   getComputedStyle so a theme toggle updates the next frame's strokes. */
.portrait-stage {
  --particle-line: rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .portrait-stage {
  --particle-line: rgba(235, 235, 240, 0.80);
}

[data-theme="dark"] .portrait-base,
[data-theme="dark"] .portrait-top { filter: brightness(0.95); }

/* Cubist version has a transparent background (PNG-encoded WebP), so
   it sits against the page directly with no white halo. */

/* The transparent range input sits on top to capture pointer/keyboard
   events; styling is invisible. */
.portrait-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
  z-index: 3;
}

@media (max-width: 760px) {
  .hero-with-portrait {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 0.75rem;
  }
  .hero-portrait {
    justify-self: center;
    max-width: 260px;
  }
  /* On mobile, fade radially so all edges dissolve into the page.
     The particle canvas handles its own fade in JS so it isn't masked
     here — same reasoning as the desktop block above. */
  .hero-portrait .portrait-base,
  .hero-portrait .portrait-top {
    -webkit-mask-image: radial-gradient(closest-side at 55% 50%, #000 62%, transparent 96%);
            mask-image: radial-gradient(closest-side at 55% 50%, #000 62%, transparent 96%);
  }
}

.hero-eyebrow {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.hero-title {
  margin: 0 0 0.75rem;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--text);
  background: linear-gradient(180deg, var(--text) 0%, var(--text-soft) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  margin: 0 auto;
  max-width: 38ch;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-soft);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ============================================================
   Post listing
   ============================================================ */

.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.post-list-item {
  background: var(--bg-elev);
  border: 1px solid var(--rule-soft);
  border-radius: 18px;
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.post-list-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--rule);
}

.post-list-title {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
}

.post-list-title:hover { color: var(--accent); }

.post-list-date {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.post-list-summary {
  margin: 0.6rem 0 0;
  color: var(--text-soft);
  font-size: 0.98rem;
  line-height: 1.5;
}

.post-list-empty {
  color: var(--muted);
  text-align: center;
  padding: 3rem 0;
  font-size: 1.05rem;
}

.blog-intro {
  text-align: center;
  color: var(--text-soft);
  font-size: 1.05rem;
  margin: 0 0 2.5rem;
}

/* ============================================================
   Single post
   ============================================================ */

.post-title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin: 0 0 0.5rem;
  color: var(--text);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 2.5rem;
  font-variant-numeric: tabular-nums;
}

.post-meta .meta-sep { color: var(--rule); }
.post-meta .reading-time { color: var(--text-soft); }

a.tag,
.tag {
  display: inline-block;
  padding: 2px 10px;
  background: var(--bg-soft);
  color: var(--text-soft);
  border-radius: 999px;
  font-size: 0.78rem;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

a.tag:hover { background: var(--accent); color: #fff; }

/* Draft eyebrow distinguishes preview pages without shouting. */
.draft-eyebrow {
  display: inline-block;
  color: var(--text-soft) !important;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
}

/* Copy-link button */
.copy-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px 10px;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-soft);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.copy-link:hover {
  background: var(--bg-soft);
  border-color: var(--text-soft);
  color: var(--text);
}

.copy-link .copy-link-icon {
  font-size: 0.9em;
  line-height: 1;
}

.copy-link.is-copied {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.copy-link.is-copied:hover { color: #fff; }

.post-body {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--text);
}

.post-body > * + * { margin-top: 1rem; }

.post-body h1,
.post-body h2,
.post-body h3 {
  letter-spacing: -0.025em;
  font-weight: 600;
  margin-top: 2.5rem;
  line-height: 1.2;
  color: var(--text);
}

.post-body h2 { font-size: 1.7rem; }
.post-body h3 { font-size: 1.3rem; }

.post-body p { margin: 0.9rem 0; }

.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body li { margin: 0.3rem 0; }

.post-body blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.5rem 0;
  padding: 0.25rem 1.25rem;
  color: var(--text-soft);
  background: var(--bg-soft);
  border-radius: 0 12px 12px 0;
}

.post-body code {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--bg-soft);
  border: 1px solid var(--rule-soft);
  padding: 1px 6px;
  border-radius: 6px;
}

.post-body pre {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 1.1rem 1.25rem;
  border-radius: 14px;
  overflow-x: auto;
  line-height: 1.55;
  font-size: 0.92rem;
}

.post-body pre code {
  background: none; border: none; padding: 0; color: inherit;
}

/* Full-bleed embeds inside posts. */
.post-body .full-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

/* ============================================================
   Scroll-reveal animation (driven by JS .is-visible class)
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   "Where I'm from" post — interactive map + city cards
   ============================================================ */

.wim {
  --card-radius: 22px;
}

.wim-mapwrap {
  position: relative;
  margin: 2rem 0 3rem;
  border-radius: var(--card-radius);
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--rule-soft);
  box-shadow: var(--shadow-md);
}

#wim-map {
  width: 100%;
  height: 60vh;
  min-height: 420px;
  max-height: 620px;
  background: var(--bg-soft);
}

/* Strip Leaflet's default white pop-in for dark mode. */
[data-theme="dark"] .leaflet-container { background: #0c0c0e; }

.leaflet-control-attribution {
  background: var(--glass) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.leaflet-control-attribution a { color: var(--accent) !important; }

/* Pulsing "live" dot for current location. */
.live-pin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px var(--bg-elev), 0 2px 8px rgba(0,0,0,0.3);
  position: relative;
}

.live-pin::before,
.live-pin::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--live);
  animation: live-ping 2.2s ease-out infinite;
  pointer-events: none;
}

.live-pin::after { animation-delay: 1.1s; }

@keyframes live-ping {
  0%   { transform: scale(0.6); opacity: 0.9; }
  80%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Past-location pin: solid, no pulse. */
.past-pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg-elev), 0 2px 8px rgba(0,0,0,0.3);
}

/* Pin label tooltip styling */
.leaflet-tooltip.wim-tooltip {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}

.leaflet-tooltip.wim-tooltip::before { display: none; }  /* hide the little arrow */

/* Live-clock chip (overlay on the map) */
.wim-live-chip {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 500;
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
          backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 10px;
}

.wim-live-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 var(--live);
  animation: pulse-dot 2s ease-out infinite;
}

@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.5); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 69, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0); }
}

.wim-live-chip .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.wim-live-chip .city  { font-weight: 600; }
.wim-live-chip .clock {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--text-soft);
}

/* City cards */
.wim-cities {
  display: grid;
  gap: 1.25rem;
  margin: 2.5rem 0;
}

.wim-card {
  background: var(--bg-elev);
  border: 1px solid var(--rule-soft);
  border-radius: var(--card-radius);
  padding: 1.75rem 1.75rem;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 90px;
}

.wim-card h3 {
  margin: 0 0 0.25rem;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.wim-card .city-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 1rem;
  font-variant-numeric: tabular-nums;
}

.wim-card .city-meta .chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-soft);
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--text-soft);
}

.wim-card .city-meta .chip.live {
  background: rgba(255, 69, 58, 0.12);
  color: var(--live);
}

.wim-card .city-meta .chip.live .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--live);
  animation: pulse-dot 2s ease-out infinite;
}

.wim-card p { color: var(--text-soft); margin: 0.6rem 0; line-height: 1.65; }

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 640px) {
  .blog-header {
    grid-template-columns: auto 1fr auto;
    padding: 0.6rem 1rem;
  }
  .blog-title { font-size: 0.95rem; }
  .blog-main  { padding: 2.5rem 1.15rem 4rem; }
  .hero       { padding: 0.5rem 0 2.5rem; }
  #wim-map    { height: 50vh; min-height: 320px; }
  .wim-live-chip { top: 10px; right: 10px; padding: 8px 10px; font-size: 0.78rem; }
}

/* ============================================================
   Table of contents (sticky sidebar, scrollspy)
   ============================================================ */

.post-toc-wrap[hidden] { display: none; }

.toc {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-soft);
}

.toc-label {
  margin: 0 0 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 1px solid var(--rule-soft);
  position: relative;
}

.toc-item { padding: 4px 0; }
.toc-item.toc-l3 { padding-left: 14px; font-size: 0.88rem; }

.toc-item a {
  display: block;
  color: var(--text-soft);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
  position: relative;
}

.toc-item a:hover { color: var(--text); background: var(--bg-soft); }

.toc-item a.is-active {
  color: var(--accent);
  font-weight: 500;
}

/* The animated active-section indicator: a colored segment that slides
   along the left rule as the active link changes. Implemented per-item
   via a ::before; the parent border becomes the track. */
.toc-item a.is-active::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* Grid layout: TOC sidebar at right on wide screens. */
@media (min-width: 1180px) {
  .blog-main.has-toc {
    max-width: calc(720px + 220px + 64px + 3rem);
    display: grid;
    grid-template-columns: minmax(0, 720px) 220px;
    column-gap: 64px;
    justify-content: center;
    align-items: start;
  }
  .blog-main.has-toc .post { grid-column: 1; }
  .blog-main.has-toc .post-toc-wrap {
    grid-column: 2;
    position: sticky;
    top: 88px;
    padding-top: 6.2rem;     /* aligns roughly with the hero baseline */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
}

@media (max-width: 1179px) {
  .post-toc-wrap {
    margin: 1rem 0 2rem;
    padding: 1rem 1.1rem;
    background: var(--bg-soft);
    border-radius: 14px;
  }
  .toc-list { padding-left: 1rem; }
}

/* ============================================================
   Tag page (clustered listing by tag)
   ============================================================ */

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 2.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.tag-cloud .tag {
  font-size: 0.92rem;
  padding: 4px 14px;
}

.tag-section { margin: 2.5rem 0 3rem; scroll-margin-top: 90px; }

.tag-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule-soft);
}

.tag-section-name {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--text);
}

.tag-section-name::before {
  content: "#";
  color: var(--muted);
  margin-right: 2px;
  font-weight: 400;
}

.tag-section-count {
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 640px) {
  .blog-header {
    grid-template-columns: auto 1fr auto;
    padding: 0.6rem 1rem;
  }
  .blog-title { font-size: 0.95rem; }
  .blog-main  { padding: 2.5rem 1.15rem 4rem; }
  .hero       { padding: 0.5rem 0 2.5rem; }
  #wim-map    { height: 50vh; min-height: 320px; }
  .wim-live-chip { top: 10px; right: 10px; padding: 8px 10px; font-size: 0.78rem; }
  .post-meta  { font-size: 0.85rem; }
}

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