/* Landing layout — all color/space/radius values come from Meridian tokens
   (vendor/meridian/styles.css). The stage carries data-theme so tokens
   re-derive for everything inside it. Hover / spotlight effects are gated by
   classes the app adds from the per-site animation settings. */

html, body { min-height: 100%; }
body { overflow-x: hidden; }

.stage {
  position: relative;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;

  /* Soft, tightly-focused button lift shadows (replaces the heavy dark blob).
     Neutral for plain pills, gently tinted for accent/colored ones. */
  --btn-lift: 0 4px 12px -8px color-mix(in srgb, #000 28%, transparent);
  --btn-lift-accent: 0 5px 14px -8px color-mix(in srgb, var(--action) 42%, transparent);
}

.stage__scrim {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% -10%, transparent 42%, color-mix(in srgb, var(--paper) 60%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--paper) 30%, transparent), transparent 22%, transparent 60%, color-mix(in srgb, var(--paper) 55%, transparent));
}

/* Dither overlay — a faint grayscale grain over the whole viewport that breaks
   up 8-bit gradient/shadow banding on large dark surfaces (most visible with an
   animated background of "none"). Grayscale + overlay blend so it adds only
   micro-variation, not a brightness or color shift. Sits above the card but
   below the nav bar (z-index 20), and never intercepts input. */
.stage::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  mix-blend-mode: overlay;
  opacity: 0.4;
}

.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--s-7) + 3.5rem) var(--s-5) var(--s-7);
  perspective: 1400px; /* gives the "flip" card transition real depth */
}

/* ---- Floating top menu bar ------------------------------------------------ */
.nav-bar-wrap {
  position: fixed;
  top: var(--s-4);
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  padding: 0 var(--s-4);
  pointer-events: none; /* only the bar itself is interactive */
}
/* The bar is just a flex row — each item is its own separate frosted pill. */
.nav-bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 100%;
  padding: var(--s-1) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-bar::-webkit-scrollbar { display: none; }

.nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
  min-height: 2.75rem;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  border: var(--border-hairline) solid color-mix(in srgb, var(--line-strong) 60%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 26%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 62%, transparent);
  box-shadow:
    var(--shadow-1),
    inset 0 1px 0 color-mix(in srgb, var(--surface-raised) 70%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}
.nav-item:hover {
  transform: translateY(-1px);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--action) 55%, var(--line-strong));
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
  box-shadow: var(--btn-lift), inset 0 1px 0 color-mix(in srgb, var(--surface-raised) 70%, transparent);
  text-decoration: none;
}
/* Search is the accent *action* — an outline pill (accent border + text over the
   frosted base) so it reads as accent without colliding with the solid
   "selected" state below. The icon follows currentColor, so it tints too. */
.nav-item--search {
  border-color: color-mix(in srgb, var(--action) 60%, transparent);
  color: var(--action);
}
.nav-item--search:hover {
  border-color: var(--action);
  background: color-mix(in srgb, var(--action) 12%, var(--surface-raised));
  color: var(--action);
  box-shadow: var(--btn-lift), inset 0 1px 0 color-mix(in srgb, var(--surface-raised) 70%, transparent);
}
/* On dark backgrounds a saturated accent reads as dim — brighten the label/icon
   (mix toward white) and add a faint accent wash so the outline pill stays
   legible without becoming a solid fill (which is reserved for the active item). */
[data-theme="dark"] .nav-item--search {
  color: color-mix(in srgb, var(--action) 45%, #fff);
  border-color: color-mix(in srgb, var(--action) 75%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 26%, transparent), transparent 60%),
    color-mix(in srgb, var(--action) 20%, color-mix(in srgb, var(--surface) 62%, transparent));
}
[data-theme="dark"] .nav-item--search:hover {
  color: color-mix(in srgb, var(--action) 30%, #fff);
  border-color: var(--action);
  background: color-mix(in srgb, var(--action) 26%, var(--surface-raised));
}
/* The card currently on screen — a solid accent pill so the selected item is
   unmistakable at a glance (icon + label flip to on-action via currentColor). */
.nav-item.is-active {
  border-color: var(--action);
  background: var(--action);
  color: var(--on-action);
  box-shadow: var(--btn-lift-accent), inset 0 1px 0 color-mix(in srgb, var(--surface-raised) 40%, transparent);
}
.nav-item.is-active:hover {
  border-color: var(--action-hover);
  background: var(--action-hover);
  color: var(--on-action);
  box-shadow: var(--btn-lift-accent), inset 0 1px 0 color-mix(in srgb, var(--surface-raised) 40%, transparent);
}
.nav-item__icon { display: inline-flex; flex: none; }

/* ---- Mobile: hamburger button + full-screen sheet ------------------------- */
/* The hamburger is hidden on desktop; the pill row is hidden on phones. */
.nav-toggle {
  pointer-events: auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  border: var(--border-hairline) solid color-mix(in srgb, var(--line-strong) 60%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 26%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 62%, transparent);
  box-shadow: var(--shadow-1), inset 0 1px 0 color-mix(in srgb, var(--surface-raised) 70%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  color: var(--ink);
  cursor: pointer;
}

.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.nav-sheet__panel {
  width: 100%;
  border-radius: 18px;
  border: var(--border-hairline) solid color-mix(in srgb, var(--line-strong) 65%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 24%, transparent), transparent 40%),
    color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: var(--shadow-3), inset 0 1px 0 color-mix(in srgb, var(--surface-raised) 70%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  padding: var(--s-2);
  overflow: hidden;
}
.nav-sheet__head { display: flex; justify-content: flex-end; padding: var(--s-1); }
.nav-sheet__close {
  display: inline-flex; flex: none;
  padding: var(--s-1);
  border: none; background: none;
  color: var(--ink-muted); cursor: pointer;
  border-radius: var(--r-sm, 8px);
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.nav-sheet__close:hover { color: var(--ink); background: color-mix(in srgb, var(--surface-raised) 70%, transparent); }
.nav-sheet__list { list-style: none; margin: 0; padding: var(--s-1) var(--s-1) var(--s-2); display: flex; flex-direction: column; gap: 2px; }
.nav-sheet__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  min-height: 3rem;
  padding: 0 var(--s-3);
  border: none;
  background: none;
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-lead);
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out);
}
.nav-sheet__item:hover, .nav-sheet__item.is-active { background: color-mix(in srgb, var(--action) 14%, transparent); }
.nav-sheet__item--search { color: var(--action); }
.nav-sheet__icon { display: inline-flex; flex: none; color: var(--ink-muted); }
.nav-sheet__item.is-active .nav-sheet__icon,
.nav-sheet__item--search .nav-sheet__icon { color: var(--action); }
.nav-sheet__label { flex: 1; min-width: 0; }
.nav-sheet__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--action); flex: none; }

/* ---- Search overlay ------------------------------------------------------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(3rem, 14vh, 9rem) var(--s-5) var(--s-5);
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.search-panel {
  width: min(40rem, 100%);
  border-radius: 18px;
  border: var(--border-hairline) solid color-mix(in srgb, var(--line-strong) 65%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 24%, transparent), transparent 40%),
    color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: var(--shadow-3), inset 0 1px 0 color-mix(in srgb, var(--surface-raised) 70%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  overflow: hidden;
}
.search-box {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4);
  border-bottom: var(--border-hairline) solid color-mix(in srgb, var(--line) 85%, transparent);
}
.search-box__icon { display: inline-flex; flex: none; color: var(--ink-muted); }
.search-box__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-lead);
}
.search-box__input::placeholder { color: var(--ink-subtle, var(--ink-muted)); }
.search-box__close {
  display: inline-flex;
  flex: none;
  padding: var(--s-1);
  border: none;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: var(--r-sm, 8px);
  transition: color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.search-box__close:hover { color: var(--ink); background: color-mix(in srgb, var(--surface-raised) 70%, transparent); }

.search-results { list-style: none; margin: 0; padding: var(--s-2); max-height: 50vh; overflow-y: auto; }
.search-result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: var(--s-3) var(--s-3);
  border: none;
  background: none;
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out);
}
.search-result:hover, .search-result.is-top { background: color-mix(in srgb, var(--action) 14%, transparent); }
.search-result__label { font-size: var(--fs-body); font-weight: 550; }
.search-result__sub { font-size: var(--fs-small); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-results__empty { padding: var(--s-4); color: var(--ink-muted); font-size: var(--fs-small); text-align: center; }

/* ---- Frosted glass card --------------------------------------------------- */
.glass-card {
  position: relative;
  width: 100%;
  max-width: 44rem;
  padding: var(--s-6) var(--s-7);
  display: flex;
  flex-direction: column;

  border-radius: 22px;
  border: var(--border-hairline) solid color-mix(in srgb, var(--line-strong) 65%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-raised) 22%, transparent), transparent 40%),
    color-mix(in srgb, var(--surface) 55%, transparent);
  box-shadow:
    var(--shadow-3),
    inset 0 1px 0 color-mix(in srgb, var(--surface-raised) 70%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  transition: box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease-out);
}
/* cursor spotlight — only when enabled (.has-spotlight) */
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  background: radial-gradient(20rem 20rem at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--action) 22%, transparent), transparent 60%);
}
.glass-card.has-spotlight:hover::before { opacity: 1; }
.stage.hover-on .glass-card:hover { border-color: color-mix(in srgb, var(--action-line) 70%, var(--line-strong)); }
.glass-card > * { position: relative; z-index: 1; }

/* Two columns: id (avatar + name, 1/3) | body (bio + links, 2/3) */
.glass-card__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: center;
}
.glass-card__id {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
  padding-right: var(--s-6);
}
.glass-card__avatar-wrap { display: inline-flex; }
.glass-card__avatar {
  --avatar-size: 6.5rem;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%; /* "round" (default) — square variant below overrides */
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--line-strong) 50%, transparent),
    0 0 0 6px color-mix(in srgb, var(--surface-raised) 35%, transparent),
    var(--shadow-2);
}
.glass-card__avatar--square { border-radius: var(--r-lg); }
.glass-card__avatar .mr-avatar__img,
.glass-card__avatar .mr-avatar__initials { font-size: var(--fs-h3); }

.glass-card__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: calc(clamp(var(--fs-h5), 3.4vw, var(--fs-h3)) * var(--text-title, 1));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-wrap: balance;
}

.glass-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
  padding-left: var(--s-6);
  border-left: var(--border-hairline) solid color-mix(in srgb, var(--line) 80%, transparent);
}
.glass-card__bio {
  color: var(--ink-muted);
  font-size: calc(var(--fs-lead) * var(--text-bio, 1));
  line-height: var(--lh-snug);
  text-wrap: pretty;
}

/* Links: horizontal wrap of pills */
.glass-card__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.link-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.5rem;
  padding: 0 var(--s-4) 0 var(--s-3);
  border-radius: var(--r-pill);
  border: var(--border-hairline) solid color-mix(in srgb, var(--line-strong) 60%, transparent);
  background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 550;
  text-decoration: none;
  transition:
    transform var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.link-pill__icon { display: inline-flex; flex: none; }
.link-pill--primary { background: var(--action); border-color: var(--action); color: var(--on-action); }
/* Per-link custom color: --pill drives fill + border, --pill-ink the text. */
.link-pill--tinted { background: var(--pill); border-color: var(--pill); color: var(--pill-ink); }
/* hover lift — only when enabled (.hover-on) */
.stage.hover-on .link-pill:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--action) 55%, var(--line-strong));
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
  box-shadow: var(--btn-lift);
  text-decoration: none;
}
.stage.hover-on .link-pill--primary:hover {
  background: var(--action-hover);
  border-color: var(--action-hover);
  box-shadow: var(--btn-lift-accent);
}
.stage.hover-on .link-pill--tinted:hover {
  /* darken the custom color a touch and tint the lift shadow to match */
  background: color-mix(in srgb, var(--pill) 88%, #000);
  border-color: color-mix(in srgb, var(--pill) 88%, #000);
  box-shadow: 0 5px 14px -8px color-mix(in srgb, var(--pill) 45%, transparent);
}

/* Optional prose under the profile (home card "content") */
.glass-card__prose {
  width: 100%;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: var(--border-hairline) solid color-mix(in srgb, var(--line) 85%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* Content card — heading + centered prose column */
.glass-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-4);
}
.glass-card__content .glass-card__title { text-align: center; }
.glass-card__content .about-p { max-width: 42rem; }

.about-p { color: var(--ink-muted); font-size: calc(var(--fs-body) * var(--text-body, 1)); line-height: var(--lh-normal); text-wrap: pretty; }
.about-p--lead { color: var(--ink); font-size: calc(var(--fs-lead) * var(--text-body, 1)); line-height: var(--lh-snug); }
.about-p strong { color: var(--ink); font-weight: 600; }

/* ---- Blog card (index + single post) ------------------------------------- */
/* A normal centered card that simply grows taller as posts are added — it is a
   touch wider than the profile card to give the list / an article room. */
.glass-card--blog { max-width: 50rem; }
.glass-card__blog { display: flex; flex-direction: column; gap: var(--s-4); width: 100%; }
.glass-card__blog .glass-card__title { text-align: left; }

/* Tags — shared pill look for display chips and filter buttons. */
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tag {
  display: inline-flex; align-items: center;
  padding: 2px var(--s-2); border-radius: var(--r-pill);
  font-size: var(--fs-caption); font-weight: 550; line-height: 1.5; white-space: nowrap;
  color: color-mix(in srgb, var(--action) 30%, var(--ink));
  border: var(--border-hairline) solid color-mix(in srgb, var(--action) 40%, transparent);
  background: color-mix(in srgb, var(--action) 12%, transparent);
}
.blog-filter { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tag--btn { cursor: pointer; font: inherit; font-size: var(--fs-caption); font-weight: 550; color: var(--ink-muted);
  border-color: color-mix(in srgb, var(--line-strong) 55%, transparent); background: transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.tag--btn:hover { color: var(--ink); border-color: var(--line-strong); }
.tag--btn.is-active { color: var(--on-action); background: var(--action); border-color: var(--action); }

.blog-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.blog-list__item { display: block; }
.blog-card {
  display: flex; flex-direction: column; gap: var(--s-2); width: 100%;
  text-align: left; cursor: pointer;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  border: var(--border-hairline) solid color-mix(in srgb, var(--line-strong) 55%, transparent);
  background: color-mix(in srgb, var(--surface-raised) 30%, transparent);
  color: inherit; font: inherit;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
/* With a cover, the card becomes a thumbnail + text row. */
.blog-card--cover { flex-direction: row; align-items: stretch; gap: var(--s-4); padding: var(--s-3) var(--s-4); }
.blog-card__thumb { flex: none; width: 7.5rem; border-radius: var(--r-md); overflow: hidden; background: var(--surface-sunken); }
.blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__text { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.stage.hover-on .blog-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--action) 55%, var(--line-strong));
  background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
  box-shadow: var(--shadow-2);
}
.blog-card:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.blog-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.blog-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lead); color: var(--ink); text-wrap: balance; }
.blog-card__date { flex: none; font-size: var(--fs-caption); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.blog-card__excerpt { color: var(--ink-muted); font-size: var(--fs-small); line-height: var(--lh-snug); }

/* Single post — header image, meta, then a comfortable reading measure. */
.glass-card__blog--post { gap: var(--s-3); }
.blog-post__cover-wrap { width: 100%; border-radius: var(--r-lg); overflow: hidden; border: var(--border-hairline) solid color-mix(in srgb, var(--line) 80%, transparent); }
.blog-post__cover { display: block; width: 100%; max-height: 20rem; object-fit: cover; }
.blog-post__head { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); }
.glass-card__blog--post .prose {
  margin-top: var(--s-2);
  font-size: var(--fs-lead);
  line-height: 1.75;
}
.glass-card__blog--post .prose p,
.glass-card__blog--post .prose li { margin-bottom: var(--s-4); }
.blog-back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-2) var(--s-1) var(--s-1); margin-bottom: var(--s-1);
  border: none; border-radius: var(--r-pill); background: transparent; cursor: pointer;
  color: var(--ink-muted); font: inherit; font-size: var(--fs-small); font-weight: 550;
  transition: color var(--dur-fast) var(--ease-out);
}
.blog-back:hover { color: var(--ink); }
.blog-post__title { font-family: var(--font-display); font-weight: 650; font-size: var(--fs-h3); line-height: var(--lh-tight); color: var(--ink); text-wrap: balance; }
.blog-post__date { display: block; font-size: var(--fs-small); color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---- Rendered markdown (prose) ------------------------------------------- */
.prose { color: var(--ink-muted); font-size: calc(var(--fs-body) * var(--text-body, 1)); line-height: var(--lh-normal); text-wrap: pretty; max-width: 42rem; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--ink); font-family: var(--font-display); line-height: var(--lh-tight); margin: var(--s-5) 0 var(--s-2); text-wrap: balance; }
.prose h1 { font-size: var(--fs-h4); }
.prose h2 { font-size: var(--fs-h5); }
.prose h3 { font-size: var(--fs-lead); }
.prose h4 { font-size: var(--fs-body); letter-spacing: 0.01em; }
.prose p { margin: 0 0 var(--s-3); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--action); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { margin: 0 0 var(--s-3); padding-left: var(--s-5); display: flex; flex-direction: column; gap: var(--s-1); }
.prose li { padding-left: var(--s-1); }
.prose blockquote {
  margin: 0 0 var(--s-3); padding: var(--s-1) var(--s-4);
  border-left: 3px solid color-mix(in srgb, var(--action) 60%, var(--line-strong));
  color: var(--ink-muted); font-style: italic;
}
.prose code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: color-mix(in srgb, var(--surface-sunken) 70%, transparent);
  border: var(--border-hairline) solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: var(--r-sm); padding: 0.1em 0.35em;
}
.prose pre {
  margin: 0 0 var(--s-3); padding: var(--s-4);
  background: color-mix(in srgb, var(--surface-sunken) 80%, transparent);
  border: var(--border-hairline) solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: var(--r-md); overflow-x: auto;
}
.prose pre code { background: none; border: none; padding: 0; font-size: var(--fs-small); }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: var(--s-2) 0; }
.prose hr { border: none; height: var(--border-hairline); background: var(--line); margin: var(--s-5) 0; }

@media (max-width: 640px) {
  .glass-card__blog .glass-card__title { text-align: center; }
  .blog-card__head { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
}

body.nav-locked { overflow: hidden; }
/* The sheet is a phone affordance — never show it on wide screens (e.g. if the
   window is widened while the menu is open). */
@media (min-width: 641px) { .nav-sheet { display: none; } }

/* ---- Mobile: skinny window → stacked, centered ---------------------------- */
@media (max-width: 640px) {
  /* swap the pill row for the hamburger */
  .nav-bar-wrap { justify-content: flex-end; }
  .nav-bar-motion { display: none; }
  .nav-toggle { display: inline-flex; }

  /* Blog list cards stack their thumbnail above the text on phones. */
  .blog-card--cover { flex-direction: column; }
  .blog-card__thumb { width: 100%; height: 9rem; }
  .blog-post__cover { max-height: 14rem; }

  .glass-card { padding: var(--s-6) var(--s-5); border-radius: 18px; }
  .glass-card__main { grid-template-columns: 1fr; gap: var(--s-5); }
  .glass-card__id { padding-right: 0; gap: var(--s-3); }
  .glass-card__body {
    padding-left: 0;
    border-left: none;
    border-top: var(--border-hairline) solid color-mix(in srgb, var(--line) 80%, transparent);
    padding-top: var(--s-5);
    align-items: center;
    text-align: center;
  }
  .glass-card__links { justify-content: center; }
  .glass-card__avatar { --avatar-size: 5.5rem; width: 5.5rem; height: 5.5rem; }
}