/* =========================================================
   Verdandi Weaver — Components
   Reusable UI primitives. Pair with tokens.css.
   ========================================================= */

/* Cross-document view transitions — keeps the nav visually locked while
   only the page content fades between pages (Chrome 111+, progressive enhancement) */
@view-transition { navigation: auto; }

/* Old page disappears instantly so the two snapshots never overlap —
   overlapping at fractional opacity causes a darker composite flash */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vw-page-in 0.18s ease both; }
@keyframes vw-page-in { from { opacity: 0; } to { opacity: 1; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* transition only when theme is toggled, not on every page load */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
strong, b { font-weight: 600; }

/* ------------------ Type ------------------ */
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.t-h1 { font-size: var(--fs-3xl); font-family: var(--font-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; margin: 0; }
.t-h2 { font-size: var(--fs-2xl); font-family: var(--font-display); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.t-h3 { font-size: var(--fs-xl);  font-family: var(--font-body); font-weight: 600; letter-spacing: 0.005em; line-height: 1.25; margin: 0; }
.t-h4 { font-size: var(--fs-lg);  font-family: var(--font-body);    font-weight: 500; line-height: 1.3; margin: 0; }
.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.t-lead { font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--c-ink-soft); }
.t-body { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--c-ink); }
.t-meta { font-size: var(--fs-sm); color: var(--c-ink-mute); }
.t-quote { font-family: var(--font-display); font-style: italic; font-size: var(--fs-xl); line-height: 1.35; color: var(--c-ink); }

.t-balance { text-wrap: balance; }
.t-pretty  { text-wrap: pretty; }

/* ------------------ Layout ------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container.narrow { max-width: var(--container-narrow); }

.section {
  padding-block: var(--sp-9);
}
.section.compact { padding-block: var(--sp-7); }
.section.tall    { padding-block: var(--sp-10); }
.section--sunk   { background: var(--c-bg-sunk); }
.section--elev   { background: var(--c-bg-elev); }

.stack > * + *  { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.stack-xl > * + * { margin-top: var(--sp-7); }

.grid { display: grid; gap: var(--sp-6); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.center-text { text-align: center; }
.divider {
  height: 1px;
  background: var(--c-line);
  border: 0;
  margin: 0;
}
.rule {
  width: 56px;
  height: 1px;
  background: var(--c-ink-mute);
  display: block;
  margin: var(--sp-4) auto;
}

/* ------------------ Nav ------------------ */
/* =====================================================
   Navigation
   ===================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in oklab, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid color-mix(in oklab, var(--c-line) 60%, transparent);
  view-transition-name: nav;
}
/* Freeze the nav snapshot — no animation, it just stays put */
::view-transition-old(nav),
::view-transition-new(nav) {
  animation: none;
  mix-blend-mode: normal;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-3);
}
.nav__brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--c-ink);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.nav__brand-mark {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--c-accent-soft), var(--c-accent) 80%);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.nav__links {
  display: flex;
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  text-decoration: none;
  color: var(--c-ink-soft);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  position: relative;
  padding-block: var(--sp-2);
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--c-ink); }
.nav__links a.active { color: var(--c-ink); }
.nav__links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--c-accent);
}
.nav__tools { display: flex; gap: var(--sp-3); align-items: center; }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  cursor: pointer;
}
@media (max-width: 720px) {
  .nav__toggle { display: inline-flex; }

  /* Mobile menu — hidden by default via clip-path so it can animate */
  .nav__links {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--c-bg-elev);
    padding: var(--sp-5);
    border-bottom: 1px solid var(--c-line);
    /* Animate open/close without toggling display */
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    pointer-events: none;
    transition: clip-path 0.25s ease, opacity 0.25s ease;
  }
  .nav.is-open .nav__links {
    clip-path: inset(0 0 0% 0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* ------------------ Buttons ------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  background: var(--c-ink);
  color: var(--c-bg);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.btn--ghost:hover { border-color: var(--c-ink); background: transparent; }
.btn--accent { background: var(--c-accent); color: var(--c-accent-ink); }
.btn--link {
  background: transparent;
  color: var(--c-ink);
  padding: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 4px;
}
.btn--link:hover { border-color: var(--c-ink); transform: none; box-shadow: none; }

.btn--icon {
  width: 40px; height: 40px; padding: 0;
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  border-radius: 50%;
  justify-content: center;
}
.btn--icon:hover { background: var(--c-bg-elev); }

/* Soft chevron link */
.link-chev {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: all 0.2s;
}
.link-chev:hover { border-color: var(--c-ink); }
.link-chev::before { content: "→"; color: var(--c-accent); }
.link-chev--after::before { content: none; }
.link-chev--after::after { content: "→"; color: var(--c-accent); }

/* ------------------ Card ------------------ */
.card {
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card--quiet { background: transparent; border-color: transparent; }
.card--quiet:hover { transform: none; box-shadow: none; }
.card__media {
  aspect-ratio: 4 / 3;
  background: var(--c-bg-sunk);
  position: relative;
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card__foot { padding: 0 var(--sp-5) var(--sp-5); margin-top: auto; }

/* ------------------ Image / placeholder ------------------ */
.figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-bg-sunk);
  border: 1px solid var(--c-line-soft);
}
.figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.placeholder {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--c-ink) 4%, transparent) 0 1px,
      transparent 1px 12px),
    var(--c-bg-sunk);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-lg);
  display: grid; place-items: center;
  color: var(--c-ink-mute);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-align: center;
  padding: var(--sp-5);
  min-height: 200px;
}

/* ------------------ Section header ------------------ */
.section-header {
  display: flex; flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--sp-7);
}

/* ------------------ Pillar (icon + title + body) ------------------ */
.pillar {
  display: flex; flex-direction: column;
  gap: var(--sp-4);
  text-align: center;
  align-items: center;
}
.pillar__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-bg-sunk);
}
.pillar__media img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------ Quote / pull ------------------ */
.pull {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
  font-weight: 400;
}
.pull em { font-style: italic; color: var(--c-accent); }

/* ------------------ Form ------------------ */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin-top: var(--sp-2);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.field label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.field__hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--c-ink-mute);
}
.field__required {
  color: var(--c-accent);
}
.field input,
.field textarea {
  font: inherit;
  font-size: var(--fs-base);
  color: var(--c-ink);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: var(--lh-body);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--c-ink-mute);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-accent) 18%, transparent);
}
.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) {
  border-color: color-mix(in oklab, var(--c-ink) 40%, transparent);
}
.form__submit {
  align-self: flex-start;
  margin-top: var(--sp-2);
}
.form__status {
  min-height: 1.2em;
}
.form__status[data-state="ok"] { color: var(--c-accent); }
.form__status[data-state="error"] { color: var(--c-warm); }

/* Honeypot — hidden from real visitors, present for bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ------------------ Footer ------------------ */
.foot {
  padding-block: var(--sp-7) var(--sp-6);
  border-top: 1px solid var(--c-line);
  background: var(--c-bg-sunk);
}
.foot__inner {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-5);
  justify-content: space-between;
  align-items: flex-end;
}
.foot__brand { font-family: var(--font-display); font-size: 1.4rem; }
.foot__meta { font-size: var(--fs-xs); color: var(--c-ink-mute); letter-spacing: 0.04em; }
.foot__links { display: flex; gap: var(--sp-4); list-style: none; padding: 0; margin: 0; }
.foot__links a { color: var(--c-ink-mute); font-size: var(--fs-sm); text-decoration: none; }
.foot__links a:hover { color: var(--c-ink); }

/* ------------------ Theme toggle ------------------ */
.theme-toggle {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-ink);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.25s;
}
.theme-toggle:hover { background: var(--c-bg-elev); transform: rotate(15deg); }
.theme-toggle svg { width: 18px; height: 18px; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root:not([data-theme="dark"]) .theme-toggle .icon-sun { display: none; }
:root:not([data-theme="dark"]) .theme-toggle .icon-moon { display: block; }

/* ------------------ Breathing orb (hero focal) ------------------ */
.orb {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin-inline: auto;
  display: grid;
  place-items: center;
}
.orb__core {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 35%,
      color-mix(in oklab, var(--c-bg-elev) 85%, var(--c-accent-soft)) 0%,
      color-mix(in oklab, var(--c-accent-soft) 55%, var(--c-bg-sunk)) 50%,
      color-mix(in oklab, var(--c-bg-sunk) 80%, transparent) 85%);
  filter: blur(2px);
  animation: orbBreathe 11s ease-in-out infinite;
  transform-origin: center;
}
@keyframes orbBreathe {
  0%, 100% { transform: scale(0.7);  opacity: 0.75; filter: blur(1.5px); }
  50%      { transform: scale(1.35); opacity: 1;    filter: blur(3px); }
}
.orb__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--c-ink) 12%, transparent);
}
.orb__ring--2 { inset: 8%; border-color: color-mix(in oklab, var(--c-ink) 8%, transparent); animation: drift 11s ease-in-out infinite; }
.orb__ring--3 { inset: 18%; border-color: color-mix(in oklab, var(--c-ink) 5%, transparent); animation: drift 13s ease-in-out infinite reverse; }
.orb__dot {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  animation: shimmer 4s ease-in-out infinite;
}

/* ------------------ Living-system tree ------------------ */
.tree {
  display: block;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  height: auto;
  filter: drop-shadow(0 30px 60px color-mix(in oklab, var(--c-moss, var(--c-accent)) 18%, transparent));
}
.tree__label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--c-ink-mute);
}
.tree__label--on-trunk {
  fill: color-mix(in oklab, var(--c-bg) 92%, transparent);
  letter-spacing: 0.22em;
}
.tree__leaf {
  transform-box: fill-box;
  transform-origin: center;
  animation: drift 11s ease-in-out infinite;
}
.tree__leaf--b { animation-duration: 13s; animation-delay: -2s; }
.tree__leaf--c { animation-duration: 15s; animation-delay: -5s; }
.tree__mote {
  animation: shimmer 5s ease-in-out infinite;
}

/* Atmospheric forest clearing around the tree */
.clearing {
  position: relative;
  isolation: isolate;
  padding-block: var(--sp-7);
}
.clearing::before {
  content: "";
  position: absolute;
  inset: -10% -2% 0;
  background:
    radial-gradient(60% 50% at 50% 30%,
      color-mix(in oklab, var(--c-accent-soft) 25%, transparent) 0%,
      transparent 70%),
    radial-gradient(70% 60% at 50% 85%,
      color-mix(in oklab, var(--c-bg-sunk) 80%, transparent) 0%,
      transparent 75%);
  z-index: -1;
  pointer-events: none;
}

/* Legacy system styles kept for any other usage (small footprint) */
.system {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin-inline: auto;
}

/* ------------------ Book card ------------------ */
.book {
  display: flex; flex-direction: column;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
}
.book__cover {
  aspect-ratio: 2 / 3;
  border-radius: 4px;
  overflow: hidden;
  background:
    linear-gradient(160deg,
      color-mix(in oklab, var(--c-accent-soft) 70%, var(--c-bg-sunk)) 0%,
      color-mix(in oklab, var(--c-warm) 35%, var(--c-bg-sunk)) 100%);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-align: center;
  line-height: 1.2;
  color: var(--c-ink);
  box-shadow: var(--shadow-md);
  position: relative;
  transition: transform 0.4s ease;
  border: 1px solid color-mix(in oklab, var(--c-ink) 8%, transparent);
}
.book:hover .book__cover { transform: translateY(-3px) rotate(-0.5deg); }
.book__cover--img { padding: 0; background: none; border: none; }
.book__cover--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book__cover--2 { background: linear-gradient(160deg, color-mix(in oklab, var(--c-blue) 35%, var(--c-bg-sunk)), color-mix(in oklab, var(--c-accent) 30%, var(--c-bg-sunk))); }
.book__cover--3 { background: linear-gradient(160deg, color-mix(in oklab, var(--c-gold) 40%, var(--c-bg-sunk)), color-mix(in oklab, var(--c-warm) 35%, var(--c-bg-sunk))); }
.book__cover--4 { background: linear-gradient(160deg, color-mix(in oklab, var(--c-warm) 35%, var(--c-bg-sunk)), color-mix(in oklab, var(--c-accent-soft) 70%, var(--c-bg-sunk))); }
.book__cover--5 { background: linear-gradient(160deg, color-mix(in oklab, var(--c-bg-sunk) 70%, transparent), color-mix(in oklab, var(--c-blue) 35%, var(--c-bg-sunk))); }
.book__cover--6 { background: linear-gradient(160deg, color-mix(in oklab, var(--c-accent) 35%, var(--c-bg-sunk)), color-mix(in oklab, var(--c-bg-sunk) 70%, transparent)); }
.book__title { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-md); line-height: 1.3; }
.book__meta  { font-size: var(--fs-xs); color: var(--c-ink-mute); letter-spacing: 0.06em; text-transform: uppercase; }
.book__desc  { font-size: var(--fs-sm); color: var(--c-ink-soft); line-height: 1.55; }

/* ------------------ Self-scan ------------------ */
.scan {
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-7) var(--sp-6);
  max-width: 640px;
  margin-inline: auto;
  box-shadow: var(--shadow-md);
}
.scan__progress {
  height: 2px;
  background: var(--c-line-soft);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--sp-6);
}
.scan__progress > span {
  display: block;
  height: 100%;
  background: var(--c-accent);
  width: 0%;
  transition: width 1.2s ease;
}
.scan__step { animation: fadeIn 0.7s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.scan__q { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-xl); line-height: 1.3; margin-bottom: var(--sp-3); }
.scan__hint { color: var(--c-ink-mute); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.scan__opts { display: flex; flex-direction: column; gap: var(--sp-3); }
.scan__opt {
  text-align: left;
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-md);
  font: inherit;
  cursor: pointer;
  transition: all 0.25s ease;
}
.scan__opt:hover { border-color: var(--c-accent); background: color-mix(in oklab, var(--c-accent-soft) 30%, transparent); }
.scan__opt[aria-pressed="true"] { border-color: var(--c-accent); background: color-mix(in oklab, var(--c-accent-soft) 50%, transparent); }
.scan__nav { display: flex; justify-content: space-between; margin-top: var(--sp-6); align-items: center; }
.scan__count { color: var(--c-ink-mute); font-size: var(--fs-sm); }

/* ------------------ Framework constellation hub ------------------ */
.hub {
  position: relative;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 1000 / 620;
  margin: var(--sp-7) auto var(--sp-5);
  isolation: isolate;
}
.hub::before {
  content: "";
  position: absolute; inset: -8% -2%;
  background:
    radial-gradient(55% 50% at 50% 50%,
      color-mix(in oklab, var(--c-accent-soft) 22%, transparent) 0%,
      transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.hub__weave {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hub__weave .thread { transition: stroke-opacity 0.4s ease; }
.hub__node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 180px;
  text-decoration: none;
  color: var(--c-ink);
  display: flex; flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
  padding: var(--sp-3);
  border-radius: var(--radius-lg);
  transition: transform 0.45s ease, background 0.35s ease;
  background: color-mix(in oklab, var(--c-bg) 30%, transparent);
  backdrop-filter: blur(2px);
}
.hub__node:hover { transform: translate(-50%, calc(-50% - 4px)); background: color-mix(in oklab, var(--c-bg-elev) 90%, transparent); }
.hub__node--core { width: 230px; }
.hub__mark {
  width: 78px; height: 78px;
  display: grid; place-items: center;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.hub__node:hover .hub__mark { transform: scale(1.06); border-color: var(--c-accent); box-shadow: var(--shadow-md); }
.hub__node--core .hub__mark {
  width: 132px; height: 132px;
  border-color: var(--c-accent-soft);
  background: radial-gradient(circle at 40% 35%,
    color-mix(in oklab, var(--c-accent-soft) 50%, var(--c-bg-elev)),
    var(--c-bg-elev) 70%);
}
.hub__mark svg { width: 100%; height: 100%; }
.hub__hint {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.hub__title {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-ink);
}
.hub__node--core .hub__title { font-size: 1.35rem; }
.hub__sub {
  font-size: var(--fs-xs);
  color: var(--c-ink-mute);
  line-height: 1.4;
  max-width: 22ch;
}

/* Drifting motes inside the hub */
.hub__mote {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--c-accent);
  opacity: 0.45;
  animation: drift 12s ease-in-out infinite;
}

/* Mobile fallback: stack the constellation as a quiet vertical list */
@media (max-width: 880px) {
  .hub { aspect-ratio: auto; display: grid; gap: var(--sp-4); max-width: 560px; }
  .hub__weave, .hub__mote { display: none; }
  .hub__node { position: static; transform: none; width: auto; flex-direction: row; text-align: left; gap: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--c-line); background: var(--c-bg-elev); }
  .hub__node:hover { transform: none; }
  .hub__node--core .hub__mark { width: 78px; height: 78px; }
  .hub__node--core .hub__title { font-size: 1.1rem; }
  .hub__sub { max-width: none; }
  .hub__node > * { align-items: flex-start; }
  .hub__node > .hub__mark { flex-shrink: 0; }
}

/* ------------------ Framework page chrome ------------------ */
.fw-art {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  max-width: 520px;
  margin-inline: auto;
  display: grid; place-items: center;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.fw-art svg { width: 100%; height: 100%; }

.fw-related {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
@media (max-width: 820px) { .fw-related { grid-template-columns: 1fr; } }
.fw-related .frame { gap: var(--sp-3); }
.fw-related .frame__mark { font-size: var(--fs-xs); color: var(--c-ink-mute); letter-spacing: 0.18em; text-transform: uppercase; }

/* ------------------ Framework grid ------------------ */
.frame {
  display: flex; flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-bg-elev);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  text-decoration: none;
  color: inherit;
}
.frame:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.frame__diagram {
  height: 130px;
  position: relative;
  display: grid; place-items: center;
}
.frame__num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--c-ink-mute);
  letter-spacing: 0.14em;
}

/* ------------------ Ecosystem map ------------------ */
.eco {
  position: relative;
  padding-block: var(--sp-7);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 720px) { .eco { grid-template-columns: 1fr; } }
.eco__node {
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex; flex-direction: column;
  gap: var(--sp-3);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.eco__node:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.eco__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-accent);
  animation: shimmer 3.5s ease-in-out infinite;
}

/* ------------------ Hero ------------------ */
.hero {
  padding-block: var(--sp-10) var(--sp-9);
  text-align: center;
  position: relative;
}
.hero__eyebrow { margin-bottom: var(--sp-5); }
.hero__title { max-width: 16ch; margin-inline: auto; }
.hero__lead { max-width: 540px; margin-inline: auto; margin-top: var(--sp-5); }
.hero__art {
  margin-top: var(--sp-7);
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-bg-sunk);
}

/* ------------------ Layered text image (pillar variation) ------------------ */
.tile {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: var(--c-bg-elev);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tile__media { aspect-ratio: 4 / 3; background: var(--c-bg-sunk); overflow: hidden; }
.tile__media img { width: 100%; height: 100%; object-fit: cover; }
.tile__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.tile__cta { margin-top: auto; padding-top: var(--sp-4); }

/* ------------------ Tweaks panel chrome ------------------ */
.tweaks {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 280px;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-5);
  z-index: 50;
  display: none;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
}
.tweaks.is-open { display: block; }
.tweaks h4 { margin: 0 0 var(--sp-2); font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; }
.tweaks__group { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.tweaks__group > label { font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-ink-mute); }
.tweaks__row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.tweaks__chip {
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
}
.tweaks__chip[aria-pressed="true"] { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.tweaks__close { position: absolute; right: 10px; top: 10px; background: none; border: 0; color: var(--c-ink-mute); cursor: pointer; font-size: 18px; }

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

/* =========================================================
   Living Archive — relational content ecosystem
   ========================================================= */

/* Theme lens (chips of relational themes) */
.lens {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-7);
}
.lens__chip {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--c-ink-soft);
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.lens__chip:hover { color: var(--c-ink); border-color: var(--c-ink-mute); }
.lens__chip[aria-pressed="true"] {
  color: var(--c-bg);
  background: var(--c-accent);
  border-color: var(--c-accent);
}
.lens__chip--all { font-style: italic; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-md); padding: 8px 18px; }

.lens-meta {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-ink-mute);
  margin-bottom: var(--sp-6);
  font-family: var(--font-body);
  font-style: italic;
}

/* Mixed-content stream — entries of every type live together */
.stream {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-5);
}
.stream > * { grid-column: span 4; }
.stream > .ent--wide { grid-column: span 6; }
.stream > .ent--full { grid-column: span 8; }
.stream > .ent--narrow { grid-column: span 4; }
.stream > .ent--tall { grid-column: span 4; grid-row: span 2; }
@media (max-width: 980px) {
  .stream { grid-template-columns: repeat(6, 1fr); }
  .stream > * { grid-column: span 3 !important; grid-row: auto !important; }
}
@media (max-width: 620px) {
  .stream { grid-template-columns: 1fr; }
  .stream > * { grid-column: 1 / -1 !important; }
}

/* Universal entry card — one shape, many content types */
.ent {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-bg-elev);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.ent:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in oklab, var(--c-accent) 50%, var(--c-line)); }
.ent[hidden] { display: none !important; }

.ent__type {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  font-family: var(--font-body);
}
.ent__type::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent); opacity: 0.7;
}
.ent--video    .ent__type::before { background: var(--c-blue); }
.ent--read     .ent__type::before { background: var(--c-warm); }
.ent--guide    .ent__type::before { background: var(--c-gold); }
.ent--frame    .ent__type::before { background: var(--c-accent); }
.ent--event    .ent__type::before { background: var(--c-moss); }
.ent--reflect  .ent__type::before { background: var(--c-accent-soft); }

.ent__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.3;
  color: var(--c-ink);
  margin: 0;
}
.ent--tall .ent__title { font-size: var(--fs-xl); }
.ent--full .ent__title, .ent--wide .ent__title { font-size: var(--fs-xl); }

.ent__body {
  color: var(--c-ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.ent__foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-ink-mute);
  padding-top: var(--sp-3);
  letter-spacing: 0.06em;
}
.ent__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ent__tags span { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-mute); }
.ent__tags span + span::before { content: "·"; margin-right: 4px; color: var(--c-line); }

/* Visual variants per content type */
.ent--video .ent__media,
.ent--reflect .ent__media,
.ent--read .ent__media,
.ent--guide .ent__media,
.ent--frame .ent__media,
.ent--event .ent__media {
  margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) 0;
  aspect-ratio: 16 / 9;
  background: var(--c-bg-sunk);
  position: relative;
  overflow: hidden;
}
.ent--tall .ent__media { aspect-ratio: 3 / 4; }
.ent__media--portrait { aspect-ratio: 9 / 16; }

/* Cinematic video poster — full-bleed, quiet, with subtle play glyph */
.cine {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 30% 30%, color-mix(in oklab, var(--c-accent) 35%, transparent), transparent 70%),
    linear-gradient(135deg,
      color-mix(in oklab, var(--c-accent) 25%, var(--c-bg-sunk)) 0%,
      color-mix(in oklab, var(--c-warm) 30%, var(--c-bg-sunk)) 100%);
  display: grid; place-items: center;
  overflow: hidden;
}
.cine::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    color-mix(in oklab, var(--c-ink) 6%, transparent) 0 1px,
    transparent 1px 4px);
  mix-blend-mode: multiply;
  opacity: 0.35;
}
.cine--2 { background:
    radial-gradient(60% 80% at 70% 40%, color-mix(in oklab, var(--c-blue) 35%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in oklab, var(--c-moss) 30%, var(--c-bg-sunk)) 0%, color-mix(in oklab, var(--c-blue) 25%, var(--c-bg-sunk)) 100%); }
.cine--3 { background:
    radial-gradient(50% 70% at 40% 60%, color-mix(in oklab, var(--c-gold) 30%, transparent), transparent 75%),
    linear-gradient(135deg, color-mix(in oklab, var(--c-accent-soft) 35%, var(--c-bg-sunk)) 0%, color-mix(in oklab, var(--c-warm) 25%, var(--c-bg-sunk)) 100%); }
.cine--4 { background:
    radial-gradient(60% 60% at 50% 30%, color-mix(in oklab, var(--c-accent-soft) 35%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in oklab, var(--c-bg-sunk) 80%, transparent), color-mix(in oklab, var(--c-accent) 30%, var(--c-bg-sunk))); }
.cine--5 { background:
    radial-gradient(50% 60% at 60% 70%, color-mix(in oklab, var(--c-warm) 30%, transparent), transparent 75%),
    linear-gradient(135deg, color-mix(in oklab, var(--c-blue) 25%, var(--c-bg-sunk)), color-mix(in oklab, var(--c-accent-soft) 35%, var(--c-bg-sunk))); }
.cine--6 { background:
    radial-gradient(60% 70% at 30% 50%, color-mix(in oklab, var(--c-moss) 35%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in oklab, var(--c-accent) 30%, var(--c-bg-sunk)), color-mix(in oklab, var(--c-bg-sunk) 80%, transparent)); }

.cine__play {
  position: relative; z-index: 1;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--c-bg) 80%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in oklab, var(--c-ink) 12%, transparent);
  display: grid; place-items: center;
  color: var(--c-ink);
  transition: transform 0.35s ease;
}
.cine__play::after {
  content: "";
  width: 0; height: 0;
  border-left: 11px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}
.ent:hover .cine__play { transform: scale(1.1); }
.cine__dur {
  position: absolute; bottom: 12px; right: 14px; z-index: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  color: color-mix(in oklab, var(--c-bg) 85%, transparent);
  letter-spacing: 0.08em;
}

/* Reflection poster — paper-like with quote glyph */
.paper {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in oklab, var(--c-accent-soft) 25%, transparent), transparent 70%),
    color-mix(in oklab, var(--c-bg-elev) 50%, var(--c-bg-sunk));
  display: grid; place-items: center;
  padding: var(--sp-5);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.25;
  color: color-mix(in oklab, var(--c-ink) 70%, var(--c-bg));
  text-align: center;
  text-wrap: balance;
}
.paper::before {
  content: "";
  position: absolute; inset: 16px;
  border: 1px solid color-mix(in oklab, var(--c-line) 70%, transparent);
  border-radius: calc(var(--radius-lg) - 4px);
  pointer-events: none;
}

/* Guide / PDF — folded-paper feel with small icon */
.folio {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--c-bg-elev) 60%, var(--c-bg-sunk));
  display: grid; place-items: center;
  overflow: hidden;
}
.folio::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 56%; aspect-ratio: 4/5;
  transform: translate(-50%, -50%);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm), 4px 4px 0 -1px var(--c-bg-elev), 4px 4px 0 var(--c-line);
}
.folio::after {
  content: attr(data-label);
  position: relative; z-index: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}

/* Framework — abstract geometry */
.geo {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--c-bg-elev) 70%, var(--c-bg-sunk));
  display: grid; place-items: center;
}
.geo svg { width: 60%; height: 60%; }

/* Event poster — date-forward */
.date-tile {
  position: absolute; inset: 0;
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--c-accent) 18%, var(--c-bg-sunk)),
    color-mix(in oklab, var(--c-moss) 25%, var(--c-bg-sunk)));
  display: grid; place-items: center;
  color: color-mix(in oklab, var(--c-bg) 90%, var(--c-ink));
  font-family: var(--font-body);
  text-align: center;
  letter-spacing: 0.04em;
}
.date-tile__d { font-size: 3.4rem; font-weight: 600; line-height: 1; }
.date-tile__m { font-size: 0.8rem; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.8; margin-top: 4px; }

/* ============== Reading template ============== */
.read {
  max-width: 680px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.read__hd {
  text-align: center;
  padding-block: var(--sp-9) var(--sp-7);
  border-bottom: 1px solid var(--c-line-soft);
}
.read__type {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-bottom: var(--sp-4);
  display: inline-flex; gap: 8px; align-items: center;
}
.read__type::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent);
}
.read__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 var(--sp-4);
}
.read__sub {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--c-ink-soft);
  text-wrap: pretty;
  margin: 0 auto;
  max-width: 32ch;
}
.read__meta {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-top: var(--sp-5);
}

.read__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--c-ink);
  padding-block: var(--sp-8);
}
.read__body > * + * { margin-top: 1.4em; }
.read__body p { text-wrap: pretty; }
.read__body p.lead { font-size: 1.45rem; line-height: 1.55; color: var(--c-ink-soft); font-style: italic; }
.read__body p.lead + p::first-letter {
  font-family: var(--font-display);
  font-size: 3.6em;
  line-height: 0.85;
  float: left;
  padding: 0.1em 0.08em 0 0;
  color: var(--c-accent);
}
.read__body h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-top: 2em;
}
.read__body blockquote {
  border: 0;
  padding: 0;
  margin: 1.8em 0 1.8em -1em;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-accent);
  font-size: 1.45rem;
  line-height: 1.45;
  padding-left: 1em;
  border-left: 1px solid color-mix(in oklab, var(--c-accent) 50%, transparent);
}
.read__body em { color: var(--c-accent); font-style: italic; }
.read__body a { color: var(--c-ink); text-decoration: none; background-image: linear-gradient(transparent calc(100% - 1px), color-mix(in oklab, var(--c-accent) 60%, transparent) 1px); background-repeat: no-repeat; background-size: 100% 100%; transition: background-size 0.3s; padding-bottom: 1px; }
.read__body a:hover { background-image: linear-gradient(color-mix(in oklab, var(--c-accent-soft) 35%, transparent), color-mix(in oklab, var(--c-accent-soft) 35%, transparent)); }
.read__body hr { border: 0; height: 1px; background: var(--c-line); width: 56px; margin: 2.4em auto; }

.read__close {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-ink-mute);
  padding-block: var(--sp-4) var(--sp-7);
}

/* Threads — relational footer of related content (every type) */
.threads {
  padding-block: var(--sp-9);
  background: var(--c-bg-sunk);
  border-top: 1px solid var(--c-line-soft);
}
.threads__hd {
  text-align: center;
  margin-bottom: var(--sp-7);
}
.threads__hd .t-eyebrow { display: block; margin-bottom: var(--sp-3); }
.threads__hd h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.threads__grid {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 820px) { .threads__grid { grid-template-columns: 1fr; } }
.thread-card {
  display: flex; flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.thread-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--c-accent) 50%, var(--c-line)); }
.thread-card__type {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
}
.thread-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.3;
}
.thread-card__why {
  font-style: italic;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  line-height: 1.5;
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line-soft);
}

/* ============== Stay Near (newsletter) ============== */
.stay {
  background: var(--c-bg-sunk);
  border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
  padding-block: var(--sp-9);
}
.stay__inner {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: flex; flex-direction: column;
  gap: var(--sp-4);
  align-items: center;
}
.stay__mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--c-accent-soft), var(--c-accent) 75%);
  opacity: 0.75;
  animation: orbBreathe 9s ease-in-out infinite;
}
.stay__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.stay__sub {
  color: var(--c-ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  max-width: 36ch;
  text-wrap: pretty;
  margin: 0;
}
.stay__form {
  display: flex;
  gap: var(--sp-2);
  width: 100%;
  max-width: 460px;
  margin-top: var(--sp-3);
  border-bottom: 1px solid var(--c-ink-mute);
  padding-bottom: var(--sp-2);
}
.stay__form input {
  flex: 1;
  background: transparent;
  border: 0;
  font: inherit;
  color: var(--c-ink);
  padding: var(--sp-3) 0;
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  text-align: left;
}
.stay__form input:focus { outline: none; }
.stay__form input::placeholder { color: var(--c-ink-mute); font-style: italic; }
.stay__form button {
  background: transparent;
  border: 0;
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  transition: color 0.25s;
}
.stay__form button:hover { color: var(--c-accent); }
.stay__note { font-size: var(--fs-xs); color: var(--c-ink-mute); margin-top: var(--sp-3); }

/* ============== Events list ============== */
.events { display: flex; flex-direction: column; }
.event-row {
  display: grid;
  grid-template-columns: 120px 1fr 160px;
  gap: var(--sp-5);
  align-items: center;
  padding-block: var(--sp-6);
  border-top: 1px solid var(--c-line-soft);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.3s ease, background 0.3s ease;
}
.event-row:hover { padding-left: var(--sp-3); background: color-mix(in oklab, var(--c-accent-soft) 8%, transparent); }
.event-row:last-child { border-bottom: 1px solid var(--c-line-soft); }
.event-row__date {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--c-ink);
}
.event-row__date small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink-mute);
  margin-top: 6px;
}
.event-row__body { display: flex; flex-direction: column; gap: 6px; }
.event-row__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: 1.3;
  margin: 0;
}
.event-row__meta { font-size: var(--fs-sm); color: var(--c-ink-mute); }
.event-row__cta { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--c-ink-soft); text-align: right; letter-spacing: 0.04em; }
.event-row__cta::after { content: " →"; color: var(--c-accent); }
@media (max-width: 720px) {
  .event-row { grid-template-columns: 1fr; gap: var(--sp-3); }
  .event-row__cta { text-align: left; }
}

.event-row--past { opacity: 0.55; }

/* ============== In-page nav (sub-tabs at top of archive) ============== */
.tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
}
.tabs button {
  background: transparent; border: 0; padding: 0; margin: 0;
  font: inherit; cursor: pointer; color: var(--c-ink-mute);
  letter-spacing: 0.02em;
  transition: color 0.25s;
}
.tabs button:hover { color: var(--c-ink); }
.tabs button[aria-pressed="true"] { color: var(--c-ink); }
.tabs button[aria-pressed="true"]::before { content: "· "; color: var(--c-accent); }

/* =========================================================
   Relational Spaces — one-to-one · circles · live explorations
   Three scales of one conversation.
   ========================================================= */

/* Hub scale tiles */
.scales {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}
@media (max-width: 880px) { .scales { grid-template-columns: 1fr; } }

.scale {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-7) var(--sp-6);
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.scale:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in oklab, var(--c-accent) 50%, var(--c-line)); }

.scale__viz {
  width: 100%;
  aspect-ratio: 5 / 3;
  display: grid; place-items: center;
  margin-bottom: var(--sp-3);
}
.scale__viz svg { width: 100%; height: 100%; }

.scale__num {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--c-ink-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.scale__title {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}
.scale__sub {
  color: var(--c-ink-soft);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  margin: 0;
}
.scale__body { color: var(--c-ink); font-size: var(--fs-sm); line-height: 1.6; }
.scale__more {
  margin-top: auto;
  padding-top: var(--sp-3);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  letter-spacing: 0.02em;
  border-top: 1px solid var(--c-line-soft);
}
.scale__more::after { content: "→"; color: var(--c-accent); margin-left: auto; transition: transform 0.3s; }
.scale:hover .scale__more::after { transform: translateX(4px); }

/* The arc — slow ritual flow (used in circles + events) */
.arc {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-4);
  margin-block: var(--sp-7);
}
.arc--5 { grid-template-columns: repeat(5, 1fr); }
.arc--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .arc, .arc--5, .arc--4 { grid-template-columns: 1fr; } }
.arc__step {
  display: flex; flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--c-bg-elev) 70%, transparent);
  border: 1px solid var(--c-line-soft);
  position: relative;
  min-height: 180px;
}
.arc__n {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--c-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.arc__t {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1.3;
  margin: 0;
  color: var(--c-ink);
}
.arc__d {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--c-ink-soft);
  margin: 0;
}

/* Soft chip lists for themes that arise (one-to-one + circles) */
.themes {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.themes span {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--c-ink-soft);
  padding: 6px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--c-bg-elev) 50%, transparent);
}

/* Soft "access" block — cadence / reciprocity, in human language */
.access {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-7) var(--sp-6);
  background: color-mix(in oklab, var(--c-accent-soft) 18%, var(--c-bg-elev));
  border: 1px solid color-mix(in oklab, var(--c-accent) 25%, var(--c-line));
  border-radius: var(--radius-lg);
}
@media (max-width: 720px) { .access { grid-template-columns: 1fr; } }
.access__cell { display: flex; flex-direction: column; gap: var(--sp-2); }
.access__cell .t-eyebrow { color: color-mix(in oklab, var(--c-ink) 70%, transparent); }
.access__val {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: 1.2;
  margin: 0;
  color: var(--c-ink);
}
.access__note {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-ink-soft);
}

/* "Who arrives here" — quiet two-column with soft glyphs */
.arrivals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 720px) { .arrivals { grid-template-columns: 1fr; } }
.arrival {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-5);
  border-top: 1px solid var(--c-line-soft);
}
.arrival__glyph {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--c-accent-soft) 60%, var(--c-bg-elev));
  border: 1px solid var(--c-line);
  margin-top: 4px;
  animation: shimmer 6s ease-in-out infinite;
}
.arrival__t {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.35;
  color: var(--c-ink);
  margin: 0;
}
.arrival__d { color: var(--c-ink-soft); font-size: var(--fs-sm); line-height: 1.55; margin: 6px 0 0; }

/* Subtle fade-in for sections on load — only armed when the document is actually visible, so a hidden/paused preview never traps content at opacity 0. */
.fade-up { opacity: 1; transform: none; transition: opacity 0.8s ease, transform 0.8s ease; }
html.fade-armed .fade-up { opacity: 0; transform: translateY(12px); }
html.fade-armed .fade-up.is-in { opacity: 1; transform: none; }