/* ═══════════════════════════════════════════════════════════════
   ATLAS — nebriv.com / benvirgilio.com
   Warm palette · IBM Plex type system · topo-grid background
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #0f1813;
  --text: #d8d2bf;
  --text-bright: #f1ebd5;
  --text-mid: #c9c4ad;
  --text-dim: #b8b59c;
  --text-muted: #8a9882;
  --text-faint: #6e7a68;
  --accent: #d4b876;
  --accent-hover: #e0c887;
  --olive: #c2d4a8;
  --blue: #87b5c0;
  --mauve: #c4a4b8;
  --border: rgba(200, 180, 130, 0.18);
  --border-dim: rgba(200, 180, 130, 0.10);
  --border-faint: rgba(200, 180, 130, 0.08);
  --border-accent: rgba(212, 184, 118, 0.35);
  --border-accent-dim: rgba(212, 184, 118, 0.22);
  --tint: rgba(212, 184, 118, 0.025);
  --tint-hover: rgba(212, 184, 118, 0.06);
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
}

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

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
}

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

/* ───────── Background layers ───────── */

.at-root {
  width: 100%;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.at-bg-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(200, 180, 130, 0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 180, 130, 0.030) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.9));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.9));
}

.at-bg-contour {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.at-frame {
  position: relative;
  z-index: 2;
}

/* ───────── Toolbar ───────── */

.at-toolbar {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: rgba(15, 24, 19, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 100;
}

.at-toolbar > * {
  padding: 11px 18px;
  border-right: 1px solid var(--border-dim);
}

.at-toolbar > *:last-child { border-right: 0; }

.at-toolbar .brand {
  color: var(--accent);
  text-decoration: none;
}

.at-toolbar .brand:hover { color: var(--accent-hover); }

.at-toolbar .meta { color: var(--text-muted); }

.at-toolbar a.meta {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}

.at-toolbar a.meta:hover { color: var(--text-bright); }

.at-toolbar .nav-links {
  display: flex;
  margin-left: auto;
}

.at-toolbar .nav-links a {
  padding: 11px 14px;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 1px solid var(--border-dim);
  transition: color 0.15s;
}

.at-toolbar .nav-links a:hover { color: var(--accent); }

.at-toolbar .live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--olive);
}

.at-toolbar .pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--olive);
  box-shadow: 0 0 8px var(--olive);
  animation: at-blink 1.7s ease-in-out infinite;
}

@keyframes at-blink { 50% { opacity: 0.35; transform: scale(0.85); } }

/* ───────── Section container ───────── */

.at-section { padding: 0 72px; }

/* ───────── Hero ───────── */

.at-hero {
  position: relative; /* anchors the Atlas emblem */
  padding: 36px 0 28px 0;
  border-bottom: 1px solid rgba(200, 180, 130, 0.15);
}

/* Atlas emblem — a small spinning globe that links to /atlas/. Floats in the
   empty space beside the hero on desktop; drops into the flow on narrow
   screens (where the toolbar's nav links are hidden, so it doubles as the
   Atlas entry point there). */
.at-atlas-emblem {
  position: absolute;
  top: 18px;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  opacity: 0.92;
  transition: opacity 0.2s ease;
}
.at-atlas-emblem:hover {
  opacity: 1;
}
.at-globe-mini {
  width: 156px;
  height: 156px;
  display: block;
}
.at-atlas-emblem-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: color 0.2s ease;
}
.at-atlas-emblem:hover .at-atlas-emblem-cap {
  color: var(--accent);
}

@media (max-width: 1024px) {
  /* in-flow beside the hero text rather than floating, to clear the name */
  .at-atlas-emblem {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    gap: 13px;
    margin: 26px 0 2px;
    opacity: 1;
  }
  .at-globe-mini {
    width: 92px;
    height: 92px;
  }
}

.at-hero-pre {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.at-hero-pre::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
}

.at-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 92px;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--text-bright);
  margin: 0 0 18px 0;
}

.at-name.lowercase { text-transform: lowercase; }

.at-dek {
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 620px;
  font-weight: 300;
}

.at-dek b { color: var(--text-bright); font-weight: 500; }
.at-dek .amber { color: var(--accent); }

/* "Currently" line */

.at-currently {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.55;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  max-width: 820px;
}

.at-currently .lbl {
  color: var(--accent);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.at-currently .txt {
  color: var(--text);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.55;
}

.at-currently .more {
  color: var(--accent);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-accent);
  padding-bottom: 1px;
  flex-shrink: 0;
  margin-left: auto;
}

.at-currently .more:hover {
  color: var(--text-bright);
  border-color: var(--text-bright);
}

/* Profile data line */

.at-profileline {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-mid);
  letter-spacing: 0.02em;
}

.at-profileline span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.at-profileline span i {
  font-style: normal;
  color: var(--text-faint);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.at-profileline .status {
  color: var(--olive);
  margin-left: auto;
}

.at-profileline .status .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--olive);
  box-shadow: 0 0 5px rgba(194, 212, 168, 0.6);
  margin-right: 8px;
  vertical-align: middle;
  animation: at-blink 2.4s ease-in-out infinite;
}

/* Icon buttons */

.at-btnrow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.at-iconbtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid var(--border-accent-dim);
  background: rgba(15, 24, 19, 0.4);
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.005em;
  transition: border-color .15s, background .15s, color .15s;
}

.at-iconbtn svg { color: var(--accent); flex-shrink: 0; }

.at-iconbtn .sub {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-left: 4px;
}

.at-iconbtn:hover {
  border-color: rgba(212, 184, 118, 0.55);
  background: var(--tint-hover);
  color: var(--text-bright);
}

.at-iconbtn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.at-iconbtn.primary svg { color: var(--bg); }
.at-iconbtn.primary .sub { color: rgba(15, 24, 19, 0.55); }

.at-iconbtn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* ───────── Section headers ───────── */

.at-shead {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 16px;
  align-items: baseline;
  margin: 28px 0 4px 0;
}

.at-shead .num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.25em;
}

.at-shead .label {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 600;
  color: var(--text-bright);
  letter-spacing: -0.015em;
}

.at-shead .rule {
  height: 1px;
  background: linear-gradient(to right, var(--border-accent-dim), transparent);
  margin-left: 4px;
}

.at-shead .right {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.at-skicker {
  font-family: var(--sans);
  font-size: 13px;
  font-style: italic;
  color: var(--text-dim);
  margin-bottom: 14px;
  max-width: 720px;
}

/* ───────── Filter chips ───────── */

.at-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0 22px 0;
}

.at-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border-accent-dim);
  background: transparent;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.at-chip .ct {
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.05em;
}

.at-chip:hover {
  border-color: rgba(212, 184, 118, 0.5);
  color: var(--text-bright);
}

.at-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.at-chip.active .ct { color: rgba(15, 24, 19, 0.6); }

/* ───────── Chapter rows (light variant) ───────── */

.at-chapter-row {
  display: grid;
  grid-template-columns: 110px 1fr 110px;
  gap: 26px;
  align-items: baseline;
  padding: 22px 0 20px 0;
  margin: 14px 0;
  background: transparent;
  border-top: 1px solid rgba(212, 184, 118, 0.30);
  border-bottom: 1px solid rgba(212, 184, 118, 0.30);
}

.at-chapter-row .chnum {
  font-family: var(--mono);
  color: var(--accent);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.3em;
}

.at-chapter-row .chnum .yr {
  display: block;
  color: var(--text-dim);
  font-family: var(--mono);
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.at-chapter-row h3 {
  font-family: var(--sans);
  color: var(--text-bright);
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 6px 0;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.at-chapter-row .meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.at-chapter-row p {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.55;
  max-width: 620px;
}

.at-chapter-row .kindcol {
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.at-chapter-row .kindcol .k { display: block; }
.at-chapter-row .kindcol .span {
  display: block;
  color: var(--text-muted);
  margin-top: 6px;
  letter-spacing: 0.1em;
}

/* ───────── Regular registry rows ───────── */

.at-reg-row {
  display: grid;
  grid-template-columns: 60px 60px 1fr 100px;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-faint);
  align-items: baseline;
}

.at-reg-row .id {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.at-reg-row .id::before { content: '◇ '; }

.at-reg-row .yr {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}

.at-reg-row .body .ttl {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--text-bright);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.at-reg-row .body .ttl a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.at-reg-row .body .ttl a:hover {
  border-bottom-color: var(--accent);
}

.at-reg-row .body .ttl small {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 10px;
  letter-spacing: 0.04em;
}

.at-reg-row .body .b {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text-dim);
  margin-top: 3px;
  line-height: 1.45;
}

.at-reg-row .kindcol {
  text-align: right;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.at-reg-row .kindcol .k { display: block; }
.at-reg-row .kindcol .span {
  display: block;
  color: var(--text-faint);
  margin-top: 2px;
  font-size: 10px;
}

/* Kind colors — shared by chapter + regular rows */
.k.work { color: var(--olive); }
.k.built { color: var(--blue); }
.k.trail { color: var(--accent); }
.k.travel { color: var(--accent); }
.k.wrote { color: var(--mauve); }

/* Registry link at bottom */

.at-registry-more {
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 14px;
}

.at-registry-more a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--border-accent);
  padding-bottom: 2px;
}

.at-registry-more a:hover {
  color: var(--text-bright);
  border-color: var(--text-bright);
}

/* ───────── Footer ───────── */

.at-foot {
  margin-top: 44px;
  padding: 18px 72px 28px 72px;
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
}

.at-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.at-foot a {
  color: var(--text-dim);
  text-decoration: none;
  margin-right: 22px;
  border-bottom: 1px solid rgba(184, 181, 156, 0.25);
  padding-bottom: 2px;
}

.at-foot a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.at-foot-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}

.at-foot-disclosure {
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   /now page
   ═══════════════════════════════════════════════════════════════ */

.at-now-frame {
  padding: 56px 80px 64px 80px;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.at-back {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 36px;
}

.at-back::before {
  content: '← ';
  color: var(--accent);
  margin-right: 4px;
}

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

.at-now-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.at-now-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 64px;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text-bright);
  margin: 0 0 10px 0;
}

.at-now-updated {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 36px 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.at-now-lede {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 36px;
  font-weight: 300;
}

.at-now-lede b { color: var(--text-bright); font-weight: 500; }

.at-now-sec { margin-bottom: 28px; }

.at-now-sec h3 {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0 0 10px 0;
  font-weight: 500;
}

.at-now-sec p {
  margin: 0 0 8px 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mid);
}

.at-now-sec p b { color: var(--text-bright); font-weight: 500; }
.at-now-sec p i { color: var(--accent); font-style: italic; }

.at-now-foot {
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.12em;
}

.at-now-foot a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--border-accent);
  padding-bottom: 1px;
}

.at-now-foot a:hover {
  color: var(--text-bright);
  border-color: var(--text-bright);
}

/* ═══════════════════════════════════════════════════════════════
   Inner / note page
   ═══════════════════════════════════════════════════════════════ */

/* Entry + trail pages read as one centred column. Without this the meta
   strip and hero span the full viewport while the title and prose sit in a
   ~720px column on the left, leaving a lopsided gap down the right side.
   Mirrors the centred frames used by the /now and standalone pages. */
.at-entry-frame {
  max-width: 864px;   /* 720px reading measure + the 72px section gutters */
  margin-left: auto;
  margin-right: auto;
}

/* Top row of an entry, standalone page, or /now page: the "back" link, and —
   only for a logged-in CMS user — a right-aligned "edit" link into Sveltia (see
   js/cms-edit-link.js). The margins that used to sit on .at-back here now live
   on the row so the spacing is unchanged for visitors, who only see the back
   link. Entries sit just under the toolbar and keep the 56px top gap the back
   link used to carry inline; page and /now frames get their top spacing from
   their own padding, so those rows add none. */
.at-entry-top,
.at-page-top,
.at-now-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}

.at-entry-top {
  margin-top: 56px;
}

.at-entry-top .at-back,
.at-page-top .at-back,
.at-now-top .at-back {
  margin: 0;
}

/* Hidden until cms-edit-link.js confirms a CMS session and adds .cms-authed. */
.at-edit-link {
  display: none;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 10px;
  border: 1px solid var(--border-accent);
  border-radius: 2px;
}

.cms-authed .at-edit-link {
  display: inline-block;
}

.at-edit-link:hover {
  color: var(--text-bright);
  border-color: var(--text-bright);
}

.at-entry-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.at-entry-meta b { color: var(--accent); }

.at-entry-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 64px;
  color: var(--text-bright);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 16px 0;
  max-width: 880px;
}

.at-entry-dek {
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 300;
  color: var(--text-dim);
  max-width: 720px;
  line-height: 1.45;
  margin: 0 0 36px 0;
}

.at-entry-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  border: 1px solid var(--border);
  background: var(--tint);
  margin-bottom: 40px;
}

.at-entry-strip > div {
  padding: 14px 18px;
  border-right: 1px solid rgba(200, 180, 130, 0.12);
}

.at-entry-strip > div:last-child { border-right: 0; }

.at-entry-strip .k {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.at-entry-strip .v {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-bright);
}

.at-entry-strip .v.amber { color: var(--accent); }

/* Series mini-collection — links the parts of a multi-entry trip together */

.at-series {
  border: 1px solid var(--border);
  background: var(--tint);
  padding: 14px 18px;
  margin-bottom: 40px;
}

.at-series-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.at-series-head .k {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.at-series-head .name {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-bright);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

a.at-series-head .name,
.at-series-head a.name:hover { border-bottom-color: var(--accent); }

.at-series-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  counter-reset: part;
}

.at-series-list li {
  font-family: var(--mono);
  font-size: 12px;
  counter-increment: part;
}

.at-series-list li::before {
  content: counter(part, decimal-leading-zero) " ";
  color: var(--text-faint);
  margin-right: 6px;
}

.at-series-list a {
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.at-series-list a:hover {
  color: var(--text-bright);
  border-bottom-color: var(--accent);
}

.at-series-list li.is-current span { color: var(--accent); }

/* Compact contextual nav — shown once a series outgrows the inline list (see
   partials/series-nav.njk). Position + previous/next + a link to the full
   series page, so a 26-part quest doesn't wall off the entry it sits above. */

.at-series--compact .at-series-head { flex-wrap: wrap; }

.at-series-head .pos {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.at-series-rail {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.at-series-rail > a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
  text-decoration: none;
}

.at-series-rail > a.next { text-align: right; align-items: flex-end; }
.at-series-rail > .is-empty { flex: 1 1 0; }

.at-series-rail .dir {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.at-series-rail .lbl {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-dim);
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.at-series-rail > a:hover .lbl {
  color: var(--text-bright);
  border-bottom-color: var(--accent);
}

.at-series-all {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.at-series-all:hover {
  color: var(--text-bright);
  border-bottom-color: var(--accent);
}

@media (max-width: 640px) {
  .at-series-rail { flex-direction: column; gap: 14px; }
  .at-series-rail > a.next { text-align: left; align-items: flex-start; }
  .at-series-rail .lbl { white-space: normal; }
  .at-series-rail > .is-empty { display: none; }
}

/* Series landing page — numbered table of contents of all the parts */

.at-series-toc {
  list-style: none;
  margin: 28px 0 0 0;
  padding: 0;
  counter-reset: part;
  border-top: 1px solid var(--border-faint);
}

.at-series-toc > li {
  counter-increment: part;
  border-bottom: 1px solid var(--border-faint);
}

.at-series-toc > li > a {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 14px;
  padding: 16px 4px;
  text-decoration: none;
  color: inherit;
}

.at-series-toc > li > a::before {
  content: counter(part, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
  padding-top: 2px;
}

.at-series-toc .t {
  display: block;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-bright);
  transition: color 0.15s;
}

.at-series-toc > li > a:hover .t { color: var(--accent); }

.at-series-toc .yr {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}

.at-series-toc .d {
  display: block;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.45;
  margin-top: 5px;
}

/* Hero image for notes */

.at-entry-hero {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border: 1px solid var(--border);
  margin-bottom: 36px;
}

/* ───────── Prose (markdown body) ───────── */

.at-prose {
  max-width: 720px;
  font-family: var(--sans);
}

.at-prose > *:first-child.lede,
.at-prose > p:first-child {
  font-size: 21px;
  color: var(--accent);
  line-height: 1.5;
  margin: 0 0 28px 0;
  font-weight: 300;
}

.at-prose p {
  margin: 0 0 18px 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-mid);
}

.at-prose h2 {
  font-family: var(--sans);
  font-size: 26px;
  color: var(--text-bright);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 38px 0 14px 0;
}

.at-prose h3 {
  font-family: var(--sans);
  font-size: 20px;
  color: var(--text-bright);
  font-weight: 600;
  margin: 30px 0 12px 0;
}

.at-prose code {
  font-family: var(--mono);
  font-size: 13.5px;
  background: rgba(212, 184, 118, 0.10);
  padding: 2px 6px;
  color: var(--accent);
  border-radius: 2px;
}

.at-prose pre {
  background: rgba(15, 24, 19, 0.6);
  border: 1px solid var(--border);
  padding: 18px 22px;
  overflow-x: auto;
  margin: 24px 0;
}

.at-prose pre code {
  background: none;
  padding: 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
}

.at-prose blockquote {
  border-left: 3px solid var(--accent);
  margin: 24px 0;
  padding: 14px 18px;
  background: rgba(212, 184, 118, 0.05);
  font-size: 15px;
  color: var(--text);
}

.at-prose blockquote p { margin-bottom: 0; }

.at-prose ul, .at-prose ol {
  margin: 0 0 18px 0;
  padding-left: 24px;
  color: var(--text-mid);
}

.at-prose li {
  margin-bottom: 6px;
  font-size: 16px;
  line-height: 1.6;
}

/* Body images. A standalone image (alone in its paragraph) renders as a
   <figure> and can carry a <figcaption> from its title; inline images stay as
   <img>. Sizing and alignment come from markdown-it-attrs, e.g.
   ![alt](photo.jpg "caption"){.center width=480}. See lib/markdown-figures.js. */
.at-prose img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
}

/* fit-content makes the figure hug the image, so a caption never runs wider
   than the picture it describes (and alignment moves the whole unit). */
.at-prose figure {
  width: fit-content;
  max-width: 100%;
  margin: 24px 0;
}

.at-prose figure img {
  display: block;
}

.at-prose figcaption {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
}

/* Alignment — applies to a standalone image's <figure> and to inline <img>. */
.at-prose figure.center { margin-left: auto; margin-right: auto; }
.at-prose figure.left  { float: left;  margin: 6px 28px 16px 0; }
.at-prose figure.right { float: right; margin: 6px 0 16px 28px; }

.at-prose img.center { display: block; margin-left: auto; margin-right: auto; }
.at-prose img.left  { float: left;  margin: 6px 28px 16px 0; }
.at-prose img.right { float: right; margin: 6px 0 16px 28px; }

/* Start each section below a floated image rather than beside it. */
.at-prose h2, .at-prose h3 { clear: both; }

/* Don't cramp floated images on narrow screens — center them instead. */
@media (max-width: 640px) {
  .at-prose figure.left, .at-prose figure.right,
  .at-prose img.left, .at-prose img.right {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ───────── Click-to-enlarge lightbox (js/lightbox.js) ───────── */

/* Hint that body images open larger (skipped when the figure is .no-zoom). */
.at-prose figure:not(.no-zoom) img { cursor: zoom-in; }

.at-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  background: rgba(8, 11, 9, 0.93);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.at-lightbox.is-open { opacity: 1; }

.at-lightbox-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  max-height: 100%;
}

.at-lightbox img {
  max-width: min(95vw, 1600px);
  max-height: 85vh;
  object-fit: contain;
  border: 1px solid var(--border);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.at-lightbox-cap {
  margin: 0;
  max-width: 70ch;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-dim);
}

.at-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  font-size: 26px;
  line-height: 1;
  color: var(--text-mid);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.at-lightbox-close:hover {
  color: var(--text-bright);
  border-color: var(--border-accent);
}

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

/* ───────── Webmentions (js/webmentions.js) ───────── */

.at-webmentions {
  max-width: 720px;
  margin: 44px 0 0;
}

.at-wm-title {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-bright);
  margin: 0 0 16px;
}

.at-wm-reactions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.at-wm-facepile { display: flex; }

.at-wm-face {
  display: inline-block;
  margin-right: -8px;
}

.at-wm-face img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  object-fit: cover;
  background: var(--border);
}

.at-wm-count {
  font-size: 13.5px;
  color: var(--text-dim);
}

.at-wm-reply {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--border-dim);
}

.at-wm-replyface img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--border);
}

.at-wm-replybody { flex: 1; min-width: 0; }

.at-wm-meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 4px;
}

.at-wm-author {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  font-size: 14.5px;
}

.at-wm-author:hover { color: var(--text-bright); }

.at-wm-when {
  color: var(--text-faint);
  font-size: 12px;
  text-decoration: none;
}

.at-wm-text {
  color: var(--text-mid);
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.at-prose a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--border-accent);
  padding-bottom: 1px;
}

.at-prose a:hover {
  color: var(--text-bright);
  border-color: var(--text-bright);
}

.at-prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 36px 0;
}

.at-prose strong { color: var(--text-bright); font-weight: 500; }

/* Note callout */

.at-callout {
  border: 1px solid var(--border-accent);
  background: rgba(212, 184, 118, 0.05);
  padding: 14px 18px;
  margin: 24px 0;
  font-size: 15px;
  color: var(--text);
}

.at-callout::before {
  content: 'NOTE';
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.25em;
  margin-bottom: 6px;
}

/* Prev/next nav */

.at-prevnext {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.at-prevnext a {
  color: var(--text-muted);
  text-decoration: none;
}

.at-prevnext a:hover { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   Generic page (tools, uses, colophon)
   ═══════════════════════════════════════════════════════════════ */

.at-page-frame {
  padding: 56px 80px 64px 80px;
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.at-page-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text-bright);
  margin: 0 0 10px 0;
}

.at-page-subtitle {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 36px 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   Previously (/now archive list)
   ═══════════════════════════════════════════════════════════════ */

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

.at-archive-list li {
  border-bottom: 1px solid var(--border-faint);
  padding: 12px 0;
}

.at-archive-list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  text-decoration: none;
  color: var(--text-bright);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
}

.at-archive-list a:hover { color: var(--accent); }

.at-archive-list .date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
}

/* ═══════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .at-section { padding: 0 40px; }
  .at-foot { padding: 18px 40px 28px 40px; }
  .at-name { font-size: 64px; }
  .at-entry-title { font-size: 48px; }
  .at-now-title { font-size: 48px; }
}

@media (max-width: 768px) {
  .at-section { padding: 0 20px; }
  .at-foot { padding: 18px 20px 28px 20px; }

  .at-toolbar { font-size: 10px; }
  .at-toolbar .meta,
  .at-toolbar .nav-links { display: none; }
  .at-toolbar > .brand { border-right: 0; }

  .at-hero { display: flex; flex-direction: column; }
  .at-hero-pre { display: none; }
  .at-profileline { display: none; }

  .at-name { font-size: 42px; letter-spacing: -0.03em; order: 1; }
  .at-dek { font-size: 16px; order: 2; }
  .at-btnrow { order: 3; }
  .at-currently { order: 4; }
  .at-atlas-emblem { order: 5; } /* send-off at the end of the hero */

  .at-btnrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 24px;
  }

  .at-iconbtn {
    justify-content: center;
    padding: 14px 12px;
  }

  .at-btnrow .at-iconbtn:last-child { grid-column: 1 / -1; }

  .at-chips { display: none; }

  .at-chapter-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .at-chapter-row .kindcol {
    text-align: left;
    display: flex;
    gap: 12px;
  }

  .at-chapter-row .kindcol .span { margin-top: 0; }

  .at-reg-row {
    grid-template-columns: 40px 1fr;
    gap: 8px;
  }

  .at-reg-row .id { display: none; }
  .at-reg-row .kindcol {
    grid-column: 2;
    text-align: left;
    display: flex;
    gap: 12px;
    margin-top: 4px;
  }
  .at-reg-row .kindcol .span { margin-top: 0; }

  .at-shead {
    grid-template-columns: auto 1fr;
    gap: 10px;
  }

  .at-shead .rule { display: none; }

  .at-entry-title { font-size: 36px; }
  .at-now-title { font-size: 36px; }
  .at-page-title { font-size: 36px; }

  .at-entry-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .at-now-frame,
  .at-page-frame {
    padding: 36px 20px 48px 20px;
  }

  .at-foot {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .at-foot-meta {
    align-items: flex-start;
    text-align: left;
  }

  .at-prevnext {
    flex-direction: column;
    gap: 10px;
  }

  .at-now-foot {
    flex-direction: column;
    gap: 10px;
  }
}