/* =========================================================
   ALGOMARK · The Vault — V2 (Light Premium)
   Design system inspired by Linear, Stripe, Aesop, Apple,
   Stratechery, Every. Editorial typography on warm off-white.
   ========================================================= */

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

/* =========================================================
   TOKENS
   ========================================================= */
:root {
  /* ---------- Color: warm institutional ---------- */
  --paper:        #FAF9F6;   /* page bg — warm off-white, reads as paper */
  --paper-sunk:   #F4F2EC;   /* recessed surfaces, code blocks */
  --paper-raised: #FFFFFF;   /* elevated surfaces (cards, search) */

  --ink:          #16161A;   /* primary text — near-black, never pure */
  --ink-soft:     #2E2E33;   /* secondary headings */
  --ink-body:     #4A4A52;   /* body copy — readable but not loud */
  --ink-muted:    #787B81;   /* meta, captions */
  --ink-faint:    #A8AAAE;   /* placeholder, dividers */

  --line:         #E8E7E2;   /* default borders — warm hairline */
  --line-strong:  #D0CFC8;   /* emphasized borders */
  --line-soft:    #F0EEE8;   /* whisper rules */

  --accent:       #7B1F1F;   /* oxblood — brand DNA preserved */
  --accent-deep:  #5C1717;   /* hover for the accent itself */
  --accent-soft:  #9A3535;   /* secondary accent uses */
  --accent-tint:  #FBF0F0;   /* accent backgrounds, faint wash */
  --accent-line:  #E8C9C9;   /* accent borders, soft */

  --selection-bg: rgba(123, 31, 31, 0.12);

  /* ---------- Typography ---------- */
  --serif: 'Fraunces', 'Times New Roman', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid type scale (clamp: min, preferred, max) */
  --text-micro:    0.6875rem;                                /* 11px */
  --text-xs:       0.75rem;                                  /* 12px */
  --text-sm:       0.8125rem;                                /* 13px */
  --text-base:     clamp(0.9375rem, 0.91rem + 0.13vw, 1rem); /* 15-16px */
  --text-md:       clamp(1rem, 0.96rem + 0.2vw, 1.125rem);   /* 16-18px */
  --text-lg:       clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --text-xl:       clamp(1.375rem, 1.26rem + 0.55vw, 1.75rem);
  --text-2xl:      clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --text-3xl:      clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
  --text-display:  clamp(2.75rem, 1.9rem + 4vw, 5.5rem);

  /* Line-height */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-base:    1.5;
  --lh-prose:   1.7;
  --lh-loose:   1.85;

  /* Letter-spacing */
  --ls-display: -0.022em;   /* tighter on huge serif */
  --ls-tight:   -0.012em;
  --ls-base:    -0.005em;
  --ls-wide:    0.04em;
  --ls-loose:   0.18em;
  --ls-eyebrow: 0.32em;     /* uppercase eyebrow labels */

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 5rem;      /* 80 */
  --space-11: 6rem;      /* 96 */
  --space-12: 8rem;      /* 128 */

  /* Section pacing — fluid */
  --space-section: clamp(3rem, 2rem + 5vw, 6rem);
  --space-page:    clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ---------- Layout ---------- */
  --max-w:        1240px;       /* outer shell */
  --content-w:    720px;        /* prose measure (60-70 chars) */
  --content-w-lg: 840px;        /* category list, slightly wider */

  /* ---------- Motion ---------- */
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:  140ms;
  --t-norm:  200ms;
  --t-slow:  360ms;

  /* ---------- Shadows (almost imperceptible) ---------- */
  --shadow-hairline: 0 1px 0 rgba(22, 22, 26, 0.04);
  --shadow-sm:       0 1px 2px rgba(22, 22, 26, 0.04), 0 0 0 1px rgba(22, 22, 26, 0.03);
  --shadow-md:       0 4px 16px -4px rgba(22, 22, 26, 0.06), 0 0 0 1px rgba(22, 22, 26, 0.04);
  --shadow-focus:    0 0 0 3px rgba(123, 31, 31, 0.12);

  /* ---------- Radii (institutional: small/none) ---------- */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   3px;
  --r-md:   4px;
}

/* =========================================================
   BASE
   ========================================================= */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1;
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

::selection {
  background: var(--selection-bg);
  color: var(--ink);
}

/* =========================================================
   GLOBAL — `hidden` attribute must always hide
   `.loading-state { display: flex }` would otherwise override
   the user-agent default `[hidden] { display: none }` and keep
   the loader visible after boot.
   ========================================================= */
[hidden] { display: none !important; }

/* =========================================================
   ACCESSIBILITY HELPERS
   ========================================================= */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-3) var(--space-4);
  font-weight: 500;
  font-size: var(--text-sm);
  z-index: 1000;
  transition: top var(--t-fast) var(--ease);
  border-radius: var(--r-sm);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-4); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-sm);
}

/* =========================================================
   HEADER / TOP NAV
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 249, 246, 0.85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-7));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}

.brand-wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: 0.01em;
  font-feature-settings: 'ss01' 1, 'ss02' 1;
}

.brand-divider {
  width: 1px;
  height: 14px;
  background: var(--line-strong);
  flex-shrink: 0;
}

.brand-edition {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--text-micro);
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  flex-shrink: 0;
}

.header-link {
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
  padding: var(--space-1) 0;
  position: relative;
}
.header-link:hover { color: var(--ink); }
.header-link[aria-current="page"] {
  color: var(--ink);
}
.header-link[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--accent);
}

.header-cta {
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
  background: var(--paper-raised);
}
.header-cta:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

@media (max-width: 720px) {
  .header-link.is-secondary { display: none; }
  .brand-edition { display: none; }
  .brand-divider { display: none; }
}
@media (max-width: 540px) {
  .header-cta { display: none; }
  .header-nav { gap: var(--space-4); }
}

/* =========================================================
   MAIN SHELL
   ========================================================= */
.main-shell {
  flex: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(var(--space-7), 6vw, var(--space-11))
           clamp(var(--space-4), 4vw, var(--space-7))
           var(--space-page);
  position: relative;
}

.view {
  width: 100%;
  animation: viewIn var(--t-slow) var(--ease) both;
}

@keyframes viewIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 60vh;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-loose);
  text-transform: uppercase;
  font-weight: 500;
}

.loading-pulse {
  width: 6px;
  height: 6px;
  background: var(--accent);
  display: inline-block;
  animation: pulse 1.4s var(--ease) infinite;
  border-radius: 50%;
}

@keyframes pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* =========================================================
   HOME / SEARCH
   ========================================================= */
.home {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  padding-top: clamp(var(--space-4), 4vw, var(--space-8));
}

.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--sans);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: var(--space-7);
}
.home-eyebrow::before,
.home-eyebrow::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
}

.home-headline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  margin-bottom: var(--space-5);
  font-feature-settings: 'ss01' 1, 'ss02' 1;
  font-optical-sizing: auto;
}
.home-headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}

.home-sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--text-md);
  color: var(--ink-body);
  max-width: 580px;
  margin: 0 auto clamp(var(--space-7), 5vw, var(--space-9));
  line-height: var(--lh-prose);
}

/* ---------- Search ---------- */
.search-wrap {
  max-width: 720px;
  margin: 0 auto var(--space-3);
  position: relative;
}

.search-form {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 100%;
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--text-md);
  letter-spacing: 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-md);
  transition: border-color var(--t-norm) var(--ease),
              background var(--t-norm) var(--ease),
              box-shadow var(--t-norm) var(--ease);
  box-shadow: var(--shadow-hairline);
}
.search-input::placeholder {
  color: var(--ink-faint);
  font-weight: 400;
}
.search-input:hover:not(:focus) {
  border-color: var(--ink-muted);
}
.search-input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: var(--shadow-focus);
}

.search-hint {
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: var(--ls-loose);
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: var(--space-7);
  font-family: var(--mono);
  font-weight: 400;
}

/* ---------- Search results ---------- */
.search-results {
  max-width: 720px;
  margin: 0 auto var(--space-9);
  border: 1px solid var(--line);
  background: var(--paper-raised);
  border-radius: var(--r-md);
  text-align: left;
  max-height: 65vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  box-shadow: var(--shadow-md);
}
.search-results::-webkit-scrollbar { width: 8px; }
.search-results::-webkit-scrollbar-track { background: transparent; }
.search-results::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

.result-item {
  display: block;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
  position: relative;
}
.result-item:last-child { border-bottom: none; }

.result-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-norm) var(--ease);
}
.result-item:hover,
.result-item.is-active {
  background: var(--paper-sunk);
}
.result-item:hover::before,
.result-item.is-active::before {
  transform: scaleY(1);
}

.result-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.result-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--ink);
  letter-spacing: var(--ls-base);
}
.result-cat {
  font-family: var(--sans);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.result-tier {
  font-family: var(--sans);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-loose);
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
.result-snippet {
  font-family: var(--sans);
  color: var(--ink-body);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.result-empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--ink-muted);
  font-style: italic;
  font-family: var(--serif);
  font-size: var(--text-md);
}

/* =========================================================
   FEATURED CONCEPTS GRID
   Six curated entries — three ICT, three metaphysics — surfaced
   on home as the primary "what's in here" preview. Sits BEFORE
   the Ask box because the index is the product; the AI is a
   power-user feature.
   ========================================================= */
.featured-section {
  margin: var(--space-8) 0 var(--space-6);
  text-align: left;
}
.featured-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 var(--space-5);
  text-align: center;
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  overflow: hidden;
  box-shadow: var(--shadow-hairline);
}
.featured-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--paper-raised);
  text-decoration: none;
  color: var(--ink);
  position: relative;
  cursor: pointer;
  transition: background var(--t-norm) var(--ease);
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  min-height: 200px;
}
/* 3 columns wide → strip right border on every 3rd card */
.featured-card:nth-child(3n) { border-right: none; }
@media (max-width: 1100px) {
  .featured-card { border-right: 1px solid var(--line-soft); }
  .featured-card:nth-child(3n) { border-right: 1px solid var(--line-soft); }
  .featured-card:nth-child(2n) { border-right: none; }
}
@media (max-width: 700px) {
  .featured-card { border-right: none !important; }
}
.featured-card:hover {
  background: var(--paper-sunk);
}
.featured-card:hover .featured-card-arrow {
  transform: translateX(4px);
  color: var(--accent);
}
.featured-card-domain {
  font-family: var(--mono);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-loose);
  color: var(--ink-faint);
  text-transform: uppercase;
}
.featured-card-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--ink);
}
.featured-card-alias {
  font-style: italic;
  font-weight: 400;
  font-size: 0.85em;
  color: var(--ink-soft);
  margin-left: 4px;
}
.featured-card-def {
  font-family: var(--serif);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--ink-body);
  margin: 0;
  flex: 1;
}
.featured-card-arrow {
  align-self: flex-end;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-faint);
  font-size: var(--text-md);
  transition: transform var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

/* Browse-all CTA — sits between the category grid and the Ask box.
   Acts as the explicit "the full index lives here" hand-off. */
.featured-browse-all {
  display: block;
  margin: var(--space-7) auto;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: transparent;
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  max-width: 480px;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.featured-browse-all:hover {
  border-color: var(--ink);
  background: var(--paper-raised);
}
.featured-browse-all:hover .featured-browse-arrow {
  transform: translateX(4px);
  color: var(--accent);
}
.featured-browse-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.featured-browse-line {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--serif);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--ink);
}
.featured-browse-arrow {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-faint);
  transition: transform var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

/* =========================================================
   CATEGORY GRID
   ========================================================= */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  margin-top: var(--space-8);
  text-align: left;
  overflow: hidden;
  box-shadow: var(--shadow-hairline);
}

.cat-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--paper-raised);
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-decoration: none;
  color: var(--ink);
  min-height: 180px;
  position: relative;
  cursor: pointer;
  transition: background var(--t-norm) var(--ease);
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

/* remove right border on last col, bottom border on last row */
.cat-tile:nth-child(4n) { border-right: none; }
@media (max-width: 1100px) {
  .cat-tile { border-right: 1px solid var(--line-soft); }
  .cat-tile:nth-child(4n) { border-right: 1px solid var(--line-soft); }
  .cat-tile:nth-child(3n) { border-right: none; }
}
@media (max-width: 820px) {
  .cat-tile:nth-child(3n) { border-right: 1px solid var(--line-soft); }
  .cat-tile:nth-child(2n) { border-right: none; }
}
@media (max-width: 560px) {
  .cat-tile { border-right: none !important; }
}

.cat-tile:hover {
  background: var(--paper-sunk);
}

.cat-tile-head {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cat-tile-num {
  font-family: var(--mono);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-loose);
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  display: block;
}
.cat-tile-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--ink);
  display: block;
}
.cat-tile-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--space-6);
  gap: var(--space-3);
}
.cat-tile-count {
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0;
  color: var(--ink-muted);
  font-weight: 500;
}
.cat-tile-arrow {
  font-family: var(--sans);
  font-size: var(--text-md);
  color: var(--ink-faint);
  transition: transform var(--t-norm) var(--ease),
              color var(--t-norm) var(--ease);
}
.cat-tile:hover .cat-tile-arrow {
  transform: translateX(4px);
  color: var(--accent);
}

/* =========================================================
   CATEGORY VIEW
   ========================================================= */
.category-view,
.metaphysics-view,
.history-view {
  max-width: var(--content-w-lg);
  margin: 0 auto;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--sans);
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--ink-muted);
  text-decoration: none;
  margin-bottom: var(--space-8);
  padding: var(--space-1) 0;
  transition: color var(--t-fast) var(--ease);
  font-weight: 500;
}
.back-link::before {
  content: '←';
  display: inline-block;
  transition: transform var(--t-fast) var(--ease);
  color: var(--ink-muted);
}
.back-link:hover {
  color: var(--ink);
}
.back-link:hover::before {
  transform: translateX(-3px);
  color: var(--accent);
}

.cat-header {
  margin-bottom: var(--space-9);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}

.cat-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  font-weight: 600;
}

.cat-headline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin-bottom: var(--space-3);
  color: var(--ink);
  font-optical-sizing: auto;
}

.cat-meta {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  letter-spacing: 0;
  font-weight: 500;
}
.cat-meta strong {
  color: var(--ink);
  font-weight: 600;
}

.rule {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}
.rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.rule-dot {
  width: 5px;
  height: 5px;
  background: var(--accent);
  display: inline-block;
  border-radius: 50%;
}

/* ---------- Concept list (in category view) ---------- */
.concept-list {
  list-style: none;
  border-top: 1px solid var(--line);
}
.concept-list-item {
  border-bottom: 1px solid var(--line);
}
.concept-list-item a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  text-decoration: none;
  color: var(--ink);
  align-items: start;
  transition: padding-left var(--t-norm) var(--ease),
              background var(--t-norm) var(--ease);
  position: relative;
}
.concept-list-item a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height var(--t-norm) var(--ease);
}
.concept-list-item a:hover {
  padding-left: var(--space-5);
  background: linear-gradient(90deg, var(--paper-sunk) 0%, transparent 80%);
}
.concept-list-item a:hover::before { height: 60%; }

.list-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.list-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.list-snippet {
  font-family: var(--sans);
  font-size: var(--text-base);
  color: var(--ink-body);
  line-height: var(--lh-base);
  max-width: 60ch;
}
.list-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* =========================================================
   PILLS / CHIPS
   ========================================================= */
.pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  white-space: nowrap;
  background: var(--paper-raised);
}
.pill-cat {
  color: var(--accent);
  border-color: var(--accent-line);
  background: var(--accent-tint);
}
.pill-tier {
  color: var(--ink-muted);
  border-color: var(--line-strong);
  background: var(--paper-raised);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink-soft);
  text-decoration: none;
  background: var(--paper-raised);
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-tint);
}

/* =========================================================
   CONCEPT DETAIL — the editorial moment
   ========================================================= */
.concept-view {
  max-width: var(--content-w);
  margin: 0 auto;
}

.concept-header { margin-bottom: var(--space-7); }

.concept-pills {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.concept-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin-bottom: var(--space-4);
  color: var(--ink);
  font-optical-sizing: auto;
}

.concept-aliases {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-muted);
  font-size: var(--text-md);
  letter-spacing: 0;
  font-weight: 400;
  line-height: var(--lh-base);
}
.concept-aliases:empty { display: none; }
.concept-aliases::before {
  content: 'Also known as ';
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--text-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: var(--space-2);
  font-weight: 600;
}

.concept-section {
  margin-bottom: var(--space-9);
}

.section-label {
  font-family: var(--sans);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line-soft);
}
.label-dot {
  width: 5px;
  height: 5px;
  background: var(--accent);
  display: inline-block;
  border-radius: 50%;
}

.prose {
  font-family: var(--sans);
  font-size: var(--text-md);
  line-height: var(--lh-prose);
  color: var(--ink-body);
  letter-spacing: 0;
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { color: var(--ink); font-family: var(--serif); font-style: italic; font-weight: 400; }

/* The definition leads — slightly heavier voice */
.concept-definition .prose {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--lh-loose);
  color: var(--ink);
  letter-spacing: var(--ls-base);
}

.bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bullet-list li {
  position: relative;
  padding-left: var(--space-5);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: var(--lh-prose);
  color: var(--ink-body);
}
.bullet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

/* =========================================================
   SOURCE QUOTES — pull-quote magazine treatment
   This is THE moment.
   ========================================================= */
.quote-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.quote-card {
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  transition: border-color var(--t-norm) var(--ease),
              background var(--t-norm) var(--ease);
}
.quote-card::before {
  content: '\201C';
  position: absolute;
  top: -16px;
  left: var(--space-5);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 4rem;
  line-height: 1;
  color: var(--accent);
  background: var(--paper);
  padding: 0 var(--space-2);
  font-feature-settings: 'ss01' 1;
}
.quote-card:hover {
  background: var(--paper-sunk);
  border-color: var(--line-strong);
  border-left-color: var(--accent);
}

.quote-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--lh-prose);
  color: var(--ink);
  margin-bottom: var(--space-5);
  letter-spacing: var(--ls-base);
  font-feature-settings: 'ss01' 1, 'kern' 1;
  font-optical-sizing: auto;
}

.quote-cite {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  letter-spacing: 0;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-3);
}
.cite-source {
  color: var(--ink-soft);
  word-break: break-word;
  font-weight: 500;
}
.cite-sep {
  color: var(--ink-faint);
}
.cite-time {
  color: var(--accent);
  font-weight: 500;
}

/* ---------- Source files list ---------- */
.source-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.source-list li {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  background: var(--paper-raised);
  border-radius: var(--r-sm);
  word-break: break-word;
  letter-spacing: 0;
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.source-list li:hover {
  border-color: var(--line-strong);
  color: var(--ink-soft);
  background: var(--paper-sunk);
}

/* =========================================================
   METAPHYSICS VIEW (Transurfing / Tufti landing)
   ========================================================= */
.metaphysics-hero {
  text-align: center;
  margin-bottom: var(--space-11);
  padding-top: var(--space-6);
  padding-bottom: var(--space-9);
  border-bottom: 1px solid var(--line);
}
.metaphysics-hero .cat-eyebrow {
  margin-bottom: var(--space-5);
}
.metaphysics-hero .cat-headline {
  margin-bottom: var(--space-4);
  font-size: var(--text-display);
}
.metaphysics-hero .cat-headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}
.metaphysics-lede {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--lh-prose);
  color: var(--ink-body);
  max-width: 56ch;
  margin: var(--space-5) auto 0;
}

.metaphysics-tracks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-9);
}
.track-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-6) var(--space-5);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--t-norm) var(--ease),
              background var(--t-norm) var(--ease);
}
.track-card:hover {
  border-color: var(--ink-muted);
  background: var(--paper-raised);
}
.track-card-eyebrow {
  font-family: var(--sans);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.track-card-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}
.track-card-desc {
  font-family: var(--sans);
  font-size: var(--text-base);
  color: var(--ink-body);
  line-height: var(--lh-base);
}
.track-card-meta {
  margin-top: var(--space-3);
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  letter-spacing: 0;
}

.placeholder-note {
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--paper-sunk);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  text-align: center;
}

/* =========================================================
   VERSION HISTORY VIEW
   ========================================================= */
.history-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}
.history-entry {
  border-bottom: 1px solid var(--line);
  padding: var(--space-6) 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 640px) {
  .history-entry {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}
.history-meta {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.history-version {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0;
}
.history-date {
  color: var(--ink-muted);
}
.history-body h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-3);
  color: var(--ink);
}
.history-body p {
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink-body);
  margin-bottom: var(--space-3);
}
.history-body ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.history-body li {
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--ink-body);
  padding-left: var(--space-4);
  position: relative;
}
.history-body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: auto;
  background: var(--paper);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-6) clamp(var(--space-4), 4vw, var(--space-7));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0;
  color: var(--ink-muted);
}
.footer-mark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink);
  letter-spacing: 0.01em;
}
.footer-meta {
  flex: 1;
  text-align: center;
  min-width: 0;
  color: var(--ink-muted);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  font-family: var(--sans);
  font-size: var(--text-xs);
  flex: 1;
  justify-content: center;
}
.footer-links a {
  color: var(--ink-muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.footer-links a:hover { color: var(--accent); }
.footer-copy {
  font-family: var(--mono);
  font-size: var(--text-micro);
  color: var(--ink-faint);
  letter-spacing: 0;
}

@media (max-width: 640px) {
  .footer-inner { justify-content: center; }
  .footer-meta { flex-basis: 100%; order: 2; text-align: center; }
}

/* =========================================================
   404
   ========================================================= */
.notfound {
  max-width: var(--content-w);
  margin: 0 auto;
  text-align: center;
  padding: var(--space-9) 0;
}
.notfound .cat-headline {
  font-size: clamp(4rem, 8vw, 6rem);
  margin-bottom: var(--space-3);
}
.notfound .cat-meta {
  margin-bottom: var(--space-6);
}
.notfound a.return-link {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 2px;
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.notfound a.return-link:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}

/* =========================================================
   PRINT
   ========================================================= */
@media print {
  .site-header,
  .site-footer,
  .back-link,
  .search-wrap,
  .category-grid,
  .placeholder-note { display: none !important; }
  body { background: white; color: black; }
  .prose,
  .bullet-list li,
  .quote-text { color: black; }
  .quote-card { border: 1px solid #ccc; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   V0.2 ADDITIONS — Domain rail · Ask The Vault · Gems ·
   Metaphysics data view · Version History data view
   ========================================================= */

/* ---------- Domain rail (under search on home) ---------- */
.domain-rail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  margin: var(--space-5) 0 var(--space-6);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.rail-label {
  font-family: var(--mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
  color: var(--ink-muted);
  margin-right: var(--space-2);
}
.rail-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: var(--text-sm);
  color: var(--ink);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
}
.rail-chip:hover {
  background: var(--accent-tint);
  border-color: var(--accent-line);
  color: var(--accent-deep);
}
.rail-chip-name {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: var(--ls-base);
}
.rail-chip-count {
  font-family: var(--mono);
  font-size: var(--text-micro);
  color: var(--ink-muted);
}
.rail-chip:hover .rail-chip-count { color: var(--accent); }

/* ---------- Ask The Vault — inline on home ---------- */
.ask-box {
  margin: var(--space-section) 0;
  padding: var(--space-7) var(--space-6);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  position: relative;
}
.ask-head {
  margin-bottom: var(--space-5);
}
.ask-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.ask-headline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.ask-sub {
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--ink-muted);
  max-width: 60ch;
}

.ask-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ask-input {
  width: 100%;
  padding: var(--space-4);
  font-family: var(--sans);
  font-size: var(--text-md);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  resize: vertical;
  min-height: 96px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.ask-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper-raised);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.ask-input::placeholder {
  color: var(--ink-faint);
  font-style: italic;
  font-family: var(--serif);
}
.ask-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ask-meter {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  letter-spacing: var(--ls-base);
}
.ask-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--ls-base);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.ask-submit:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.ask-submit:hover .ask-submit-arrow {
  transform: translateX(3px);
}
.ask-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ask-submit-arrow {
  font-family: var(--mono);
  transition: transform var(--t-fast) var(--ease);
}

/* Ask response panel */
.ask-response {
  margin-top: var(--space-5);
}
.ask-loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  background: var(--paper-sunk);
  border-left: 2px solid var(--accent);
}
.ask-loading-pulse {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: askPulse 1.4s var(--ease) infinite;
}
@keyframes askPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.8); }
}
.ask-loading-text {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-loose);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ask-answer {
  padding: var(--space-6) var(--space-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  position: relative;
}
.ask-answer-eyebrow {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-loose);
  color: var(--accent);
  margin-bottom: var(--space-4);
}
.ask-answer-body {
  font-family: var(--serif);
  font-size: var(--text-md);
  line-height: var(--lh-prose);
  color: var(--ink);
}
.ask-answer-body p {
  margin-bottom: var(--space-4);
}
.ask-answer-body p:last-child { margin-bottom: 0; }
.ask-answer-body strong {
  font-weight: 600;
  color: var(--ink);
}
.ask-answer-body em {
  font-style: italic;
  color: var(--ink-soft);
}
.ask-answer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-4);
  margin-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.ask-answer-meta {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  letter-spacing: var(--ls-base);
}
.ask-reset {
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--accent);
  cursor: pointer;
  letter-spacing: var(--ls-base);
  padding: 0;
  transition: color var(--t-fast) var(--ease);
}
.ask-reset:hover { color: var(--accent-deep); }

/* Rate limit / error */
.ask-rate-limit, .ask-error {
  padding: var(--space-5) var(--space-5);
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  border-left: 3px solid var(--accent);
}
.ask-rate-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.ask-rate-body {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink-body);
  line-height: var(--lh-base);
  margin-bottom: var(--space-3);
}
.ask-rate-cta {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  letter-spacing: var(--ls-base);
  border-radius: 2px;
  transition: background var(--t-fast) var(--ease);
}
.ask-rate-cta:hover { background: var(--accent-deep); }
.ask-error {
  background: var(--paper-sunk);
  border-color: var(--line);
  border-left-color: var(--accent);
}
.ask-error strong {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--ink);
  display: block;
  margin-bottom: var(--space-2);
}
.ask-error p {
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink-body);
  margin-bottom: var(--space-2);
}
.ask-error-hint {
  color: var(--ink-muted) !important;
  font-style: italic;
}

/* Handoff to /chat — shown briefly while the redirect fires */
.ask-handoff {
  padding: var(--space-5) var(--space-5);
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
}
.ask-handoff-eyebrow {
  font-family: var(--sans);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.ask-handoff-body {
  font-family: var(--serif);
  font-size: var(--text-md);
  color: var(--ink-body);
  line-height: var(--lh-base);
  margin: 0;
}

/* Result-empty CTA into Ask */
.result-empty-cta {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--sans);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.result-empty-cta a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.result-empty-cta a:hover {
  color: var(--accent-deep);
  text-decoration: underline;
}

/* ---------- Ask page (dedicated /ask route) ---------- */
.ask-view {
  max-width: var(--content-w-lg);
  margin: 0 auto;
  padding: var(--space-section) 0;
}
.ask-page-hero {
  margin-bottom: var(--space-7);
}
.ask-page-lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-md);
  line-height: var(--lh-prose);
  color: var(--ink-body);
  max-width: 60ch;
  margin-top: var(--space-3);
}
.ask-form-large .ask-input {
  font-size: var(--text-md);
  min-height: 140px;
}

/* ---------- Gems ---------- */
.gem-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.gem-card {
  padding: var(--space-4) var(--space-5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  position: relative;
  transition: all var(--t-fast) var(--ease);
}
.gem-card:hover {
  border-left-width: 4px;
  padding-left: calc(var(--space-5) - 2px);
}
.gem-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--accent);
  margin-bottom: var(--space-2);
  letter-spacing: var(--ls-base);
}
.gem-insight {
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--ink-body);
}

/* Pill — domain variant */
.pill-domain {
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  color: var(--accent-deep);
}

/* Bridge chip variant */
.chip-bridge {
  border-style: dashed;
  border-color: var(--accent-line);
  color: var(--accent-deep);
}
.chip-bridge:hover {
  background: var(--accent-tint);
  border-style: solid;
}

/* Accent dot for high-attention sections */
.label-dot-accent {
  background: var(--accent) !important;
}

/* ---------- Metaphysics — data view ---------- */
.metaphysics-view {
  max-width: var(--content-w-lg);
  margin: 0 auto;
  padding: var(--space-section) 0;
}
.metaphysics-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--lh-prose);
  color: var(--ink-body);
  margin-top: var(--space-3);
  max-width: 60ch;
}
.metaphysics-intro {
  margin: var(--space-7) 0 var(--space-8);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.prose-lg {
  font-family: var(--serif);
  font-size: var(--text-md);
  line-height: var(--lh-prose);
  color: var(--ink);
  max-width: 65ch;
}
.prose-lg p {
  margin-bottom: var(--space-5);
}
.prose-lg p:last-child { margin-bottom: 0; }
.prose-lg em {
  font-style: italic;
  color: var(--ink-soft);
}
.prose-lg strong {
  font-weight: 600;
}

.metaphysics-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.meta-section-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 2px;
  text-decoration: none;
  color: inherit;
  transition: all var(--t-fast) var(--ease);
  position: relative;
}
.meta-section-card:hover {
  background: var(--paper);
  border-color: var(--accent-line);
  transform: translateY(-1px);
}
.meta-section-num {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-loose);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.meta-section-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}
.meta-section-preview {
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--ink-body);
}
.meta-section-arrow {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-loose);
  color: var(--accent);
  margin-top: auto;
  transition: transform var(--t-fast) var(--ease);
}
.meta-section-card:hover .meta-section-arrow {
  transform: translateX(3px);
}

/* Metaphysics section detail */
.metaphysics-section-view {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: var(--space-section) 0;
}
.meta-section-header { margin-bottom: var(--space-7); }
.meta-section-body { margin-bottom: var(--space-9); }

.meta-quotes-section {
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.quote-card-meta {
  position: relative;
}
.quote-lineage {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  font-family: var(--mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
  color: var(--accent);
  background: var(--paper-raised);
  padding: var(--space-1) var(--space-2);
  border-radius: 2px;
}

.meta-section-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}
.meta-nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: inherit;
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: all var(--t-fast) var(--ease);
}
.meta-nav-link:hover {
  background: var(--paper-sunk);
  border-color: var(--accent-line);
}
.meta-nav-prev { text-align: left; }
.meta-nav-next { text-align: right; }
.meta-nav-dir {
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-loose);
  text-transform: uppercase;
  color: var(--accent);
}
.meta-nav-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--text-md);
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}

/* ---------- Version History — data view ---------- */
.history-view {
  max-width: var(--content-w-lg);
  margin: 0 auto;
  padding: var(--space-section) 0;
}
.history-list {
  list-style: none;
  margin-top: var(--space-8);
  padding: 0;
}
.history-entry {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--line);
}
.history-entry:last-child { border-bottom: none; }
.history-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.history-version {
  font-family: var(--mono);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: var(--ls-tight);
}
.history-stage {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
  color: var(--ink-muted);
}
.history-date {
  font-family: var(--mono);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  letter-spacing: var(--ls-base);
}
.history-body h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin-bottom: var(--space-3);
  line-height: var(--lh-snug);
}
.history-body .hist-summary {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-md);
  line-height: var(--lh-prose);
  color: var(--ink-body);
  margin-bottom: var(--space-4);
}
.history-body .hist-sub {
  font-family: var(--mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-loose);
  color: var(--accent);
  margin: var(--space-4) 0 var(--space-2);
}
.history-body .hist-list {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-3);
}
.history-body .hist-list li {
  font-family: var(--sans);
  font-size: var(--text-sm);
  line-height: var(--lh-prose);
  color: var(--ink-body);
  padding-left: var(--space-4);
  position: relative;
  margin-bottom: var(--space-1);
}
.history-body .hist-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 1px;
  background: var(--accent);
}
.history-body .hist-philosophy {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-md);
  line-height: var(--lh-prose);
  color: var(--ink-body);
  padding: var(--space-3) var(--space-4);
  background: var(--paper-raised);
  border-left: 2px solid var(--accent);
  margin-top: var(--space-4);
}
.hist-philosophy-block {
  margin-top: var(--space-9);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.hist-philosophy-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--lh-prose);
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0 auto;
}

/* Mobile */
@media (max-width: 720px) {
  .history-entry {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .ask-box { padding: var(--space-5) var(--space-4); }
  .ask-form-foot {
    flex-direction: column;
    align-items: stretch;
  }
  .ask-submit { width: 100%; justify-content: center; }
  .meta-section-nav { flex-direction: column; }
}

/* =========================================================
   AUTH PILL — top-right, above the search bar
   Lazy-hydrated by vault.js. Tells the user whether the
   system recognizes their signed-in state from /chat.
   ========================================================= */
.auth-pill {
  position: fixed;
  top: clamp(var(--space-3), 1.4vw, var(--space-4));
  right: clamp(var(--space-3), 2.4vw, var(--space-6));
  z-index: 60; /* above .site-header (z=50) so it never gets clipped */
  font-family: var(--sans);
  font-size: var(--text-xs);
  letter-spacing: 0;
  pointer-events: auto;
}

.auth-pill-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  background: var(--paper-raised);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-weight: 500;
  line-height: 1.2;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
  box-shadow: var(--shadow-hairline);
  white-space: nowrap;
  max-width: 360px;
}

.auth-pill-link:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
  background: var(--accent-tint);
}

.auth-pill-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex-shrink: 0;
}

.auth-pill-signed-in .auth-pill-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.auth-pill-signed-out .auth-pill-dot {
  background: var(--ink-faint);
}

.auth-pill-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.auth-pill-status {
  color: var(--ink-muted);
  font-weight: 500;
}

.auth-pill-name {
  color: var(--ink);
  font-weight: 600;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-pill-sep {
  color: var(--ink-faint);
  font-weight: 400;
}

.auth-pill-cta {
  color: var(--accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.auth-pill-arrow {
  display: inline-block;
  font-family: var(--mono);
  transition: transform var(--t-fast) var(--ease);
}

.auth-pill-link:hover .auth-pill-arrow {
  transform: translateX(2px);
}

/* Tablet — drop the "Signed in ·" prefix to save space */
@media (max-width: 720px) {
  .auth-pill-signed-in .auth-pill-status,
  .auth-pill-signed-in .auth-pill-sep:first-of-type {
    display: none;
  }
}

/* Phone — collapse to just the dot indicator */
@media (max-width: 480px) {
  .auth-pill-link {
    padding: 6px;
    gap: 0;
  }
  .auth-pill-text {
    display: none;
  }
  .auth-pill-dot {
    width: 9px;
    height: 9px;
  }
}