/* ── VARIABLES ───────────────────────────────────────────────── */
:root {
  --ratio: 1.333; /*Perfect Fourth*/
  --base: 1rem; /* 16px */

  --ts9: calc(var(--base) * (9 / 16));
  --ts95: calc(var(--base) * (9.5 / 16));
  --ts10: calc(var(--base) * (10 / 16));
  --ts11: calc(var(--base) * (11 / 16));
  --ts13: calc(var(--base) * (13 / 16));
  --ts135: calc(var(--base) * (13.5 / 16));
  --ts14: calc(var(--base) * (14 / 16));
  --ts15: calc(var(--base) * (15 / 16));
  --ts16: var(--base);
  --ts17: calc(var(--base) * (17 / 16));
  --ts18: calc(var(--base) * (18 / 16));
  --ts22: calc(var(--base) * (22 / 16));
  --ts24: calc(var(--base) * (24 / 16));
  --ts28: calc(var(--base) * (28 / 16));
  --ts30: calc(var(--base) * (30 / 16));
  --ts32: calc(var(--base) * (32 / 16));
  --ts36: calc(var(--base) * (36 / 16));
  --ts48: calc(var(--base) * (48 / 16));
  --ts50: calc(var(--base) * (50 / 16));
  --ts56: calc(var(--base) * (56 / 16));
  --ts64: calc(var(--base) * (64 / 16));
  --ts72: calc(var(--base) * (72 / 16));
  --ts88: calc(var(--base) * (88 / 16));
  --ts96: calc(var(--base) * (96 / 16));;

  /* --r0: var(--base); */
  --r1: var(--ratio);
  --r2: calc(var(--r1) * var(--ratio));
  --r3: calc(var(--r2) * var(--ratio));
  --r4: calc(var(--r3) * var(--ratio));
  --r5: calc(var(--r4) * var(--ratio));
  --r6: calc(var(--r5) * var(--ratio));
  --r7: calc(var(--r6) * var(--ratio));
  --r8: calc(var(--r7) * var(--ratio));
  --r9: calc(var(--r8) * var(--ratio));
  --r10: calc(var(--r9) * var(--ratio));
  --r11: calc(var(--r10) * var(--ratio));
  --r12: calc(var(--r11) * var(--ratio));
  --r13: calc(var(--r12) * var(--ratio));
  --r14: calc(var(--r13) * var(--ratio));
  --r15: calc(var(--r14) * var(--ratio));
  --r16: calc(var(--r15) * var(--ratio));

  /* modular scaling */
  --ms-7: calc(var(--base) / var(--r7));  /* 0.134rem  2.1px */
  --ms-6: calc(var(--base) / var(--r6));  /* 0.179rem  2.9px */
  --ms-5: calc(var(--base) / var(--r5));  /* 0.238rem  3.8px */
  --ms-4: calc(var(--base) / var(--r4));  /* 0.317rem  5.1px */
  --ms-3: calc(var(--base) / var(--r3));  /* 0.422rem  6.8px */
  --ms-2: calc(var(--base) / var(--r2));  /* 0.563rem  9.0px */
  --ms-1: calc(var(--base) / var(--r1));  /* 0.750rem 12.0px */
  --ms0: var(--base);                     /* 1.000rem 16.0px */
  --ms1: calc(var(--base) * var(--r1));   /* 1.333rem 21.3px */
  --ms2: calc(var(--base) * var(--r2));   /* 1.777rem 28.4px */
  --ms3: calc(var(--base) * var(--r3));   /* 2.369rem 37.9px */
  --ms4: calc(var(--base) * var(--r4));   /* 3.157rem  50.5px */
  --ms5: calc(var(--base) * var(--r5));   /* 4.209rem  67.3px */
  --ms6: calc(var(--base) * var(--r6));   /* 5.610rem  89.8px */
  --ms7: calc(var(--base) * var(--r7));   /* 7.478rem 119.6px */
}

/* ── GENERAL (shared base; almanac + cosmos inherit from here) ── */
@keyframes ringsBreath {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.008); }
}

html { font-size: 21px; }
html { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }
body { margin: 0; padding: 0; width: 100%; font-family: 'Inter', system-ui, sans-serif; background: #f0eee9; }

#live-wrapper { display: grid; }
#alm-layer, #cos-layer { grid-row: 1; grid-column: 1; transition: opacity 0.6s linear; }
#cos-layer { pointer-events: none; }

/* ── Sun panel ────────────────────────────────────────────────── */
#sun-panel {
  display: none;
  position: fixed; top: var(--ms1); right: var(--ms1); width: calc(3 * var(--ms6));
  padding: var(--ms0) var(--ms1) var(--ms0);
  backdrop-filter: saturate(180%) blur(var(--ms-1));
  -webkit-backdrop-filter: saturate(180%) blur(var(--ms-1));
  border-radius: var(--ms-1);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--ts11); letter-spacing: 0.3px; z-index: 200;
  transition: background 0.4s, color 0.4s, border-color 0.4s, box-shadow 0.4s;
}
#sun-panel.day  { background: rgba(243,236,217,0.82); border: 1px solid rgba(28,22,16,0.18); color: rgba(28,22,16,0.92); box-shadow: 0 var(--ms-2) var(--ms2) rgba(28,22,16,0.08); }
#sun-panel.night{ background: rgba(7,8,13,0.78); border: 1px solid rgba(214,171,94,0.28); color: rgba(236,226,200,0.92); box-shadow: 0 var(--ms-2) var(--ms2) rgba(0,0,0,0.4); }
#sp-restore, #scroll-top {
  position: fixed; top: var(--ms1); right: var(--ms1);
  display: flex; align-items: center; justify-content: center;
  width: var(--ms3); height: var(--ms3); border-radius: 50%;
  font-size: var(--ts15); cursor: pointer;
  backdrop-filter: saturate(180%) blur(var(--ms-1));
  -webkit-backdrop-filter: saturate(180%) blur(var(--ms-1));
  transition: background 0.4s, border-color 0.4s, opacity 0.2s;
  z-index: 200;
}
#sp-restore.day, #scroll-top.day     { background: rgba(243,236,217,0.82); border: 1px solid rgba(28,22,16,0.18); color: rgba(28,22,16,0.7); box-shadow: 0 var(--ms-5) var(--ms0) rgba(28,22,16,0.08); }
#sp-restore.night, #scroll-top.night { background: rgba(7,8,13,0.78); border: 1px solid rgba(214,171,94,0.28); color: rgba(214,171,94,0.8); box-shadow: 0 var(--ms-5) var(--ms0) rgba(0,0,0,0.4); }
#sp-restore:hover { opacity: 0.8; }

/* Scroll-to-top button (articles) — shares the sun-panel button look,
   pinned bottom-right one button-height up, revealed past 20% scroll. */
#scroll-top {
  top: auto; bottom: var(--ms3);
  opacity: 0; visibility: hidden;
  transition: background 0.4s, border-color 0.4s, opacity 0.3s, visibility 0.3s;
}
#scroll-top.visible { opacity: 1; visibility: visible; }
#scroll-top.visible:hover { opacity: 0.8; }

#sp-hide-btn {
  background: transparent; border: none; cursor: pointer; padding: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--ts16); line-height: 1; color: inherit; opacity: 0.4;
  margin-left: var(--ms-2);
}
#sp-hide-btn:hover { opacity: 1; }

.sp-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--ms-1); }
.sp-label { text-transform: uppercase; letter-spacing: var(--ms-7); font-size: var(--ts95); }
.sp-phase { font-size: var(--ts95); text-transform: uppercase; letter-spacing: 1.6px; }
.sp-row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--ms-5) 0; font-variant-numeric: tabular-nums; }
.sp-row-label { text-transform: uppercase; letter-spacing: 1.4px; font-size: var(--ts95); }
.sp-row-val { font-size: var(--ts11); }
.sp-scrub { margin-top: var(--ms-1); padding-top: var(--ms-1); border-top: 1px solid rgba(28,22,16,0.18); }
.sp-scrub-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--ms-2); }
.sp-scrub-label { text-transform: uppercase; letter-spacing: 1.8px; font-size: var(--ts95); }
.sp-scrub-btn { background: transparent; border-radius: var(--ms-3); padding: var(--ms-7) var(--ms-2); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--ts9); letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; }
#sun-panel input[type=range] { width: 100%; cursor: pointer; }
.sp-ticks { display: flex; justify-content: space-between; font-size: var(--ts9); margin-top: var(--ms-7); }
.sp-mode-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--ms-2); padding-top: var(--ms-2); border-top: 1px solid rgba(28,22,16,0.18); }

/* ── Auth widget (shared by almanac + cosmos footers) ──────────── */
.site-auth {
  width: 100%;
  margin-top: 0.8rem;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  opacity: 0.6;
}
.site-auth-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-auth-link:hover { opacity: 0.8; }
.site-auth-form { display: flex; align-items: baseline; gap: 0.6rem; }
.site-auth-input {
  background: none;
  border: none;
  border-bottom: 1px solid currentColor;
  padding: 0 0 1px;
  color: inherit;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  width: 13rem;
  outline: none;
  opacity: 0.8;
}
.site-auth-input::placeholder { opacity: 0.5; }
.site-auth-input:focus { opacity: 1; }

/* ── Reactions widget (shared by almanac + cosmos footers) ─────── */
.reactions {
  display: flex;
  gap: var(--ms0);
  justify-content: left;
  padding: 0 var(--ms6) var(--ms3);
}
.react-btn {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ms-2);
  background: none;
  border: 1px solid currentColor;
  border-radius: var(--ms-2);
  padding: var(--ms-3) var(--ms1);
  cursor: pointer;
  color: inherit;
  font: inherit;
  font-size: var(--ts13);
  letter-spacing: 0.04em;
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.react-btn:hover { opacity: 1; }
.react-count {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ts11);
  opacity: 0.75;
}

.almanac {
  --paper: #f3ecd9;
  --ink: #1c1610;
  --ink-muted: #5b4e3b;
  --ink-faint: #8a7c64;
  --rule: rgba(28,22,16,0.16);
  --rule-gloss: rgba(28,22,16,0.06);
  --accent: #8a3a13;
  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  position: relative;
}
.almanac::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(255,240,200,0.5), transparent 60%),
    radial-gradient(ellipse at 90% 100%, rgba(180,140,80,0.06), transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.almanac > * { position: relative; z-index: 1; }

.almanac section { padding: var(--ms6) var(--ms6); border-top: 1px solid var(--rule); }
.almanac section .title {
  font-family: var(--serif); font-weight: 400; font-size: var(--ts48); line-height: 1; letter-spacing: -0.01em;
  margin: 0;
}
.almanac section .title em { font-style: italic; color: var(--accent); }

.almanac article h2 { font-family: var(--serif); font-weight: 400; color: var(--ink); }
.almanac article h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); }
.almanac article p { color: var(--ink-muted); }
.almanac article a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(138,58,19,0.3); }
.almanac article a:hover { border-bottom-color: var(--accent); }
.almanac article ul { font-size: var(--ts15); line-height: 1.75; color: var(--ink-muted); max-width: 66ch; margin: 0 0 var(--ms0); padding-left: 1.6em; }
/* .numbering { margin-right: 0.4ch; } */

/* Insight block */
.almanac .insight.block { border-left: 2px solid var(--accent); padding: var(--ms1) var(--ms3); margin: var(--ms3) 0; background: var(--rule-gloss); max-width: 66ch; }
.almanac .insight.block h4 { font-family: var(--mono); font-size: var(--ts11); letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--ms-1); font-weight: 500; }
.almanac .insight.block p { font-size: var(--ts14); margin: 0 0 var(--ms-2); }
.almanac .insight.block p:last-child { margin: 0; }

/* Interactions inputs */
.almanac .interactions input[type=number], .almanac .interactions input[type=text] { border-color: var(--rule); background: rgba(28,22,16,0.03); color: var(--ink); }
.almanac .interactions svg { border-color: var(--rule); }

/* Reactions */
.almanac .reactions { color: var(--ink-muted); }
.almanac .react-btn { border-color: var(--rule); }
.almanac .react-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Visits sparkline */
.almanac .art-visits-spark { color: var(--accent); }
.cosmos {
  --ink: #07080d;
  --bone: #ece2c8;
  --bone-muted: rgba(236,226,200,0.65);
  --bone-faint: rgba(236,226,200,0.4);
  --bone-fainter: rgba(236,226,200,0.18);
  --gold: #d6ab5e;
  --gold-soft: rgba(214,171,94,0.6);
  --gold-faint: rgba(214,171,94,0.25);
  --gold-gloss: rgba(214,171,94,0.06);
  --gold-tint: rgba(214,171,94,0.04);
  --sans: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  position: relative;
}
.cosmos::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, var(--gold-gloss), transparent 55%),
    radial-gradient(ellipse at 50% 100%, var(--gold-tint), transparent 60%);
  pointer-events: none; z-index: 0;
}
.cosmos > * { position: relative; z-index: 1; }

.cos-stars { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; z-index: 0; width: 100%; height: 100% }

.cosmos section { padding: var(--ms7) var(--ms6) var(--ms6); }
.cosmos section .title {
  font-family: var(--display); font-weight: 300; font-size: var(--ts56); line-height: 1; letter-spacing: -0.015em;
  margin: 0 0 var(--ms4); max-width: 22ch;
}
.cosmos section .title em { font-style: italic; color: var(--gold); font-weight: 300; }

.cosmos article section { border-top-color: var(--bone-fainter); }
.cosmos article h2 { font-family: var(--display); font-weight: 300; color: var(--bone); }
.cosmos article h3 { font-family: var(--display); font-weight: 300; color: var(--bone); }
.cosmos article p { color: var(--bone-muted); }
.cosmos article ul { color: var(--bone-muted); }
.cosmos article a { color: var(--gold); border-bottom-color: rgba(214,171,94,0.3); }
.cosmos article a:hover { border-bottom-color: var(--gold); }
.cosmos .interactions p { color: var(--bone-muted); }
.cosmos .interactions input[type=number], .cosmos .interactions input[type=text] { border-color: var(--bone-fainter); background: rgba(236,226,200,0.04); color: var(--bone); }
.cosmos .interactions svg { border-color: var(--bone-fainter); }

.cosmos .insight.block { border-left: 2px solid var(--gold); padding: var(--ms1) var(--ms3); margin: var(--ms3) 0; background: var(--gold-gloss); max-width: 66ch; }
.cosmos .insight.block h4 { font-family: var(--mono); font-size: var(--ts11); letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--ms-1); font-weight: 500; }
.cosmos .insight.block p { font-size: var(--ts14); margin: 0 0 var(--ms-2); }
.cosmos .insight.block p:last-child { margin: 0; }

/* Reactions */
.cosmos .reactions { color: var(--bone-muted); }
.cosmos .react-btn { border-color: var(--gold-faint); }
.cosmos .react-btn:hover { border-color: var(--gold); color: var(--gold); }

/* Visits sparkline */
.cosmos .art-visits-spark { color: var(--gold); }


article h2 { font-size: var(--ts36); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 var(--ms3); }
article h3 { font-size: var(--ts24); line-height: 1.2; margin: var(--ms3) 0 var(--ms2); }
article p { font-size: var(--ts15); line-height: 1.75; max-width: 66ch; margin: 0 0 var(--ms3); }
article a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(138,58,19,0.3); }
article a:hover { border-bottom-color: var(--accent); }
article ul { font-size: var(--ts15); line-height: 1.75; color: var(--ink-muted); max-width: 66ch; margin: 0 0 var(--ms3) var(--ms0); padding-left: 1.6em; }
article p:has(+ ul) {
  margin: 0 0 var(--ms-3);
}

/* ── Article nav brand ───────────────────────────────────────── */
a.alm-brand, a.cos-brand { text-decoration: none; color: inherit; }

/* ── Article hero (shared by all articles) ───────────────────── */
.art-hero { padding: var(--ms6) var(--ms6) var(--ms5); border-bottom: 1px solid var(--rule); }
.art-eyebrow { font-family: var(--mono); font-size: var(--ts11); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--ms2); }
.art-h1 { font-family: var(--serif); font-weight: 400; font-size: var(--ts56); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 var(--ms1); max-width: 20ch; }
.art-h1 em { font-style: italic; color: var(--accent); }
.art-lede { font-family: var(--serif); font-size: var(--ts22); line-height: 1.45; color: var(--ink-muted); max-width: 44ch; margin: 0; font-weight: 400; }

/* ── Article meta bar ─────────────────────────────────────────── */
.art-meta-bar { display: flex; gap: var(--ms5); align-items: baseline; padding: var(--ms1) var(--ms6); border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: var(--ts11); letter-spacing: 0.8px; color: var(--ink-faint); text-transform: uppercase; }
.art-meta-item { display: flex; gap: var(--ms-2); align-items: baseline; }
.art-meta-val { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* Visits sparkline — hidden until the edge function returns a series. The
   flex on .art-meta-item overrides the [hidden] attribute, so restate it. */
.art-visits[hidden] { display: none; }
.art-visits { align-items: center; }
.art-visits-spark { display: inline-flex; align-items: center; }
.art-visits-spark .spark-svg { display: block; overflow: visible; }

/* ── Article TOC ──────────────────────────────────────────────── */
.art-toc { padding: var(--ms2) var(--ms6); border-bottom: 1px solid var(--rule); }
.art-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ms-2); }
.art-toc li { font-family: var(--mono); font-size: var(--ts11); letter-spacing: 0.6px; }
.art-toc a { color: var(--ink-faint); text-decoration: none; }
.art-toc a:hover { color: var(--accent); }

/* ── Article cross-references (clickable figure / section numbers) ─ */
/* Colour is inherited from the theme's `article a` rule (accent / gold);
   scoped under .art-body so it overrides that rule's underline. */
.art-body .figure-number a { border-bottom: none; transition: opacity 0.2s; }
.art-body .figure-number a:hover { opacity: 0.7; }

/* ── Article body ─────────────────────────────────────────────── */
/* .art-body section { padding: var(--ms5) var(--ms6); border-top: 1px solid var(--rule); }
.art-body section:first-child { padding-top: var(--ms6); }
.art-body h2 { font-family: var(--serif); font-weight: 400; font-size: var(--ts36); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 var(--ms3); color: var(--ink); }
.art-body h3 { font-family: var(--serif); font-weight: 400; font-size: var(--ts24); line-height: 1.2; margin: var(--ms3) 0 var(--ms2); color: var(--ink); }
.art-body p { font-family: var(--sans); font-size: var(--ts15); line-height: 1.75; color: var(--ink-muted); max-width: 66ch; margin: 0 0 var(--ms0); }
.art-body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(138,58,19,0.3); }
.art-body a:hover { border-bottom-color: var(--accent); }
.art-body ul { font-family: var(--sans); font-size: var(--ts15); line-height: 1.75; color: var(--ink-muted); max-width: 66ch; margin: 0 0 var(--ms0); padding-left: 1.6em; }
.numbering { margin-right: 0.4ch; } */

/* ── Article interactions (shared by articles with interactive widgets) ─ */
.interactions { margin: var(--ms3) 0; }
.interactions.inlim { max-width: 66ch; }
.interactions p { font-family: var(--sans); font-size: var(--ts15); line-height: 1.75; color: var(--ink-muted); margin: 0 0 var(--ms-1); }
.interactions input[type=number], .interactions input[type=text] {
  margin-left: var(--ms1); padding: var(--ms-2) var(--ms-1); border-width: 1px; border-style: solid;
  border-radius: var(--ms-2); font: inherit; font-size: var(--ts14); width: auto;
}
.interactions input[type=text] { max-width: 100%; }
.interactions input[type=number]::-webkit-outer-spin-button,
.interactions input[type=number]::-webkit-inner-spin-button { appearance: none; -webkit-appearance: none; margin: 0; }
.interactions input[type=number] { appearance: textfield; -moz-appearance: textfield; }
.interactions input[type=number] { width: 6ch; }
.interactions svg {
  display: block; margin: var(--ms3) auto;
  width: 100%; height: auto;
  border-width: 1px; border-style: solid; border-radius: var(--ms-7);
}

/* ── Article CTA buttons (primary mirrors the index hero CTA) ─── */
.app-cta-group { display: flex; flex-wrap: wrap; gap: var(--ms2); }
.app-cta-btn {
  display: inline-flex; align-items: center; gap: var(--ms-1);
  font-family: var(--mono); font-size: var(--ts11); letter-spacing: 1.6px;
  text-transform: uppercase; text-decoration: none;
  padding: var(--ms0) var(--ms3); border: 1px solid var(--rule);
  color: var(--ink-muted); transition: background 0.25s, border-color 0.15s, color 0.15s;
}
.app-cta-btn:hover { border-color: var(--accent); color: var(--accent); }
.app-cta-btn.primary { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.app-cta-btn.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* ── ALMANAC ─────────────────────────────────────────────────── */


.alm-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--ms1) var(--ms4);
  padding-right: var(--ms6);
  height: var(--ms3);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--ts11);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.alm-brand { font-family: var(--serif); font-size: var(--ts18); letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 500; }
.alm-brand em { font-style: italic; color: var(--ink-muted); font-weight: 400; }
.alm-edition { display: flex; gap: var(--ms2); font-variant-numeric: tabular-nums; }

.alm-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--ms5);
  align-items: center;
  padding: var(--ms6) var(--ms6) var(--ms7);
  position: relative;
}
.alm-hero-folio {
  position: absolute; top: var(--ms2); left: var(--ms6);
  font-family: var(--mono); font-size: var(--ts10); letter-spacing: var(--ms-7);
  text-transform: uppercase; color: var(--ink-faint);
}
.alm-h1 {
  font-family: var(--serif); font-weight: 400; font-size: var(--ts88);
  line-height: 0.95; letter-spacing: -0.02em; margin: 0;
  text-wrap: balance;
}
.alm-h1 em { font-style: italic; color: var(--accent); }
.alm-h1-amp { font-family: var(--serif); font-style: italic; color: var(--ink-faint); margin: 0 0.12em; }
.alm-lede {
  font-family: var(--serif); font-size: var(--ts22); line-height: 1.45;
  color: var(--ink-muted); margin: var(--ms3) 0 0; max-width: 38ch; font-weight: 400;
}
.alm-lede::first-letter {
  font-size: var(--ts56); float: left; line-height: 0.85; padding: var(--ms-3) var(--ms-2) 0 0; color: var(--ink);
}
.alm-meta {
  margin-top: var(--ms3); display: flex; gap: var(--ms2);
  font-family: var(--mono); font-size: var(--ts11); letter-spacing: 0.8px;
  color: var(--ink-faint); text-transform: uppercase;
}
.alm-rings-wrap {
  display: flex; justify-content: center; align-items: center; position: relative;
}
.alm-rings-wrap svg { animation: ringsBreath 24s ease-in-out infinite; }
/* #alm-rings, #cos-rings { min-width: 0; width: 100%; } */

/* .alm-section { padding: var(--ms6) var(--ms6); border-top: 1px solid var(--rule); } */
.alm-section-head {
  display: grid; grid-template-columns: 200px 1fr;
  gap: var(--ms5); align-items: baseline; margin-bottom: var(--ms4);
}
.alm-section-num { font-family: var(--mono); font-size: var(--ts11); letter-spacing: var(--ms-7); text-transform: uppercase; color: var(--ink-faint); padding-top: var(--ms-1); }
/* .alm-section-title { font-family: var(--serif); font-weight: 400; font-size: var(--ts48); line-height: 1; margin: 0; letter-spacing: -0.01em; }
.alm-section-title em { font-style: italic; color: var(--accent); } */
.alm-section-blurb { font-family: var(--serif); font-size: var(--ts18); line-height: 1.5; color: var(--ink-muted); max-width: 56ch; margin: var(--ms0) 0 0; }

.alm-work { display: flex; flex-direction: column; }
.alm-entry {
  display: grid; grid-template-columns: 200px 1fr 220px var(--ms6);
  gap: var(--ms4); padding: var(--ms2) var(--ms-2); border-top: 1px solid var(--rule);
  align-items: baseline; color: inherit; text-decoration: none; transition: background 0.4s;
}
.alm-entry:last-child { border-bottom: 1px solid var(--rule); }
.alm-entry:hover { background: rgba(28,22,16,0.025); }
.alm-entry-scale { font-family: var(--mono); font-size: var(--ts11); letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-faint); }
.alm-entry-scale strong { display: block; color: var(--ink); font-weight: 500; font-size: var(--ts13); margin-top: var(--ms-5); letter-spacing: 0.5px; }
.alm-entry-title { font-family: var(--serif); font-size: var(--ts32); line-height: 1.05; margin: 0 0 var(--ms-2); font-weight: 400; }
.alm-entry-title em { font-style: italic; }
.alm-entry-desc { font-family: var(--sans); font-size: var(--ts14); line-height: 1.5; color: var(--ink-muted); margin: 0; max-width: 48ch; }
.alm-entry-kind { font-family: var(--mono); font-size: var(--ts10); letter-spacing: var(--ms-7); text-transform: uppercase; color: var(--ink-faint); text-align: right; }
.alm-entry-arrow { font-family: var(--serif); font-size: var(--ts28); color: var(--ink-faint); text-align: right; transition: transform 0.3s, color 0.3s; }
.alm-entry:hover .alm-entry-arrow { color: var(--accent); transform: translateX(var(--ms-3)); }

.alm-disciplines { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ms3); margin-top: var(--ms-2); }
.alm-disc { border-top: 1px solid var(--ink); padding-top: var(--ms0); }
.alm-disc-name { font-family: var(--serif); font-size: var(--ts24); margin: 0 0 var(--ms-1); font-weight: 500; }
.alm-disc-name em { font-style: italic; color: var(--accent); }
.alm-disc-scale { font-family: var(--mono); font-size: var(--ts95); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--ms-1); }
.alm-disc-body { font-family: var(--sans); font-size: var(--ts135); line-height: 1.55; color: var(--ink-muted); margin: 0; }

.alm-about-body { max-width: 72ch; }
.alm-about-body p, .alm-about-body li { font-family: var(--sans); font-size: var(--ts15); line-height: 1.75; color: var(--ink-muted); margin: 0 0 var(--ms0); }
.alm-about-body ul { padding-left: 1.4em; margin: 0 0 var(--ms0); }
.alm-about-body h2 { font-family: var(--serif); font-weight: 400; font-size: var(--ts30); letter-spacing: -0.01em; margin: var(--ms3) 0 var(--ms-1); color: var(--ink); }

.alm-foot {
  padding: var(--ms4) var(--ms6) var(--ms6); border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; font-family: var(--mono); font-size: var(--ts11); letter-spacing: 0.6px; color: var(--ink-faint);
}
.alm-foot-mark { font-family: var(--serif); font-size: var(--ts32); color: var(--ink); font-style: italic; font-weight: 400; line-height: 1; }
.alm-foot-links { display: flex; gap: var(--ms2); text-transform: uppercase; letter-spacing: 1.4px; grid-column: 1 / -1; margin-top: var(--ms2); justify-content: flex-end; }
.alm-foot-links a { color: var(--ink-muted); text-decoration: none; }
.alm-foot-links a:hover { color: var(--accent); }

/* ── Almanac CTA button ───────────────────────────────────────── */
.alm-cta-btn {
  display: inline-flex; align-items: center; gap: var(--ms-1);
  font-family: var(--mono); font-size: var(--ts11); letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--paper); background: var(--ink);
  padding: var(--ms0) var(--ms3); border: none; text-decoration: none;
  margin-top: var(--ms2); transition: background 0.25s;
}
.alm-cta-btn:hover { background: var(--accent); }

/* ── Almanac feature list ─────────────────────────────────────── */
.alm-features { list-style: none; padding: 0; margin: var(--ms2) 0 0; }
.alm-features li {
  font-family: var(--sans); font-size: var(--ts14); line-height: 1.6;
  color: var(--ink-muted); padding: var(--ms-2) 0;
  border-top: 1px solid var(--rule); display: flex; gap: var(--ms-1);
}
.alm-features li::before { content: '—'; color: var(--accent); flex-shrink: 0; }

/* ── COSMOS ──────────────────────────────────────────────────── */

.cos-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--ms1) var(--ms4);
  height: var(--ms3);
  padding-right: var(--ms7);
  font-family: var(--mono); font-size: var(--ts11); letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--bone-faint);
}
.cos-brand { font-family: var(--display); font-size: var(--ts17); letter-spacing: 0; text-transform: none; color: var(--bone); font-weight: 400; font-style: italic; }
.cos-nav-right { display: flex; gap: var(--ms2); font-variant-numeric: tabular-nums; }
.cos-nav-right .dot { color: var(--gold); }

.cos-hero { padding: var(--ms5) var(--ms1) var(--ms6); position: relative; text-align: center; }
.cos-eyebrow {
  font-family: var(--mono); font-size: var(--ts11); letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: var(--ms3); padding: 0 var(--ms1);
}
.cos-h1 {
  font-family: var(--display); font-weight: 300;
  font-size: var(--ms5); line-height: 0.95; letter-spacing: -0.025em;
  margin: 0 auto; max-width: 18ch; text-wrap: balance;
}
.cos-h1 em { font-style: italic; color: var(--gold); font-weight: 300; }
.cos-h1 .slash { color: var(--gold-faint); margin: 0 0.15em; font-weight: 200; }

.cos-rings-stage { margin-top: var(--ms5); position: relative; display: flex; justify-content: center; align-items: center; min-height: 720px; }
.cos-rings-glow {
  position: absolute; width:100%; height: 720px; left: 50%; top: 50%; max-width: 720px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(214,171,94,0.12), transparent 60%);
  pointer-events: none;
}
.cos-rings-side { position: absolute; top: 50%; transform: translateY(-50%); width: 240px; }
.cos-rings-side.left  { left: var(--ms5); text-align: right; }
.cos-rings-side.right { right: var(--ms5); text-align: left; }
.cos-side-h { font-family: var(--mono); font-size: var(--ts10); letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold-soft); margin-bottom: var(--ms0); }
.cos-side-line {
  display: grid; grid-template-columns: 1fr auto; gap: var(--ms-1);
  padding: var(--ms-2) 0; border-top: 1px solid var(--bone-fainter);
  font-family: var(--mono); font-size: var(--ts11); letter-spacing: 0.4px;
}
.cos-rings-side.left .cos-side-line { grid-template-columns: auto 1fr; }
.cos-side-line:last-of-type { border-bottom: 1px solid var(--bone-fainter); }
.cos-side-line-name { text-transform: uppercase; letter-spacing: 1.4px; font-size: var(--ts10); color: var(--bone); }
.cos-side-line-val { color: var(--bone-faint); font-variant-numeric: tabular-nums; }
.cos-rings-side.left .cos-side-line-val { text-align: left; }
.cos-side-foot { margin-top: var(--ms1); font-family: var(--display); font-style: italic; color: var(--bone-muted); font-size: var(--ts15); line-height: 1.5; }
.cos-rings-stage svg { animation: ringsBreath 24s ease-in-out infinite; }

/* .cos-section { padding: var(--ms7) var(--ms6) var(--ms6); } */
.cos-section-eyebrow { font-family: var(--mono); font-size: var(--ts11); letter-spacing: 3px; text-transform: uppercase; color: var(--gold-soft); margin-bottom: var(--ms1); }
/* .cos-section-h { font-family: var(--display); font-weight: 300; font-size: var(--ts56); line-height: 1; letter-spacing: -0.015em; margin: 0 0 var(--ms4); max-width: 22ch; }
.cos-section-h em { font-style: italic; color: var(--gold); font-weight: 300; } */

.cos-timeline { position: relative; padding: 0 0 var(--ms7); }
.cos-tl-axis { position: absolute; left: 0; right: 0; bottom: var(--ms6); height: 1px; background: linear-gradient(90deg, transparent, var(--gold-faint) 8%, var(--gold-faint) 92%, transparent); }
.cos-tl-ticks { position: absolute; left: 0; right: 0; bottom: var(--ms4); display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--ts10); letter-spacing: 1.6px; text-transform: uppercase; color: var(--bone-faint); }
.cos-tl-tick { position: relative; text-align: center; flex: 0 0 auto; }
.cos-tl-tick::before { content: ''; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); width: 1px; height: var(--ms0); background: var(--gold-faint); margin-bottom: var(--ms-2); }

.cos-tl-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--ms1); align-items: stretch;
}
.cos-card {
  background: linear-gradient(180deg, rgba(214,171,94,0.04), rgba(214,171,94,0.01));
  border: 1px solid var(--bone-fainter); border-radius: var(--ms-1); padding: var(--ms2) var(--ms2) var(--ms2);
  text-decoration: none; color: inherit; position: relative;
  display: flex; flex-direction: column; gap: var(--ms-1);
  transition: border-color 0.3s, transform 0.3s, background 0.3s; overflow: hidden;
}
.cos-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); opacity: 0.4; }
.cos-card:hover { border-color: var(--gold-faint); transform: translateY(-3px); background: linear-gradient(180deg, rgba(214,171,94,0.07), rgba(214,171,94,0.02)); }
.cos-card-scale { font-family: var(--mono); font-size: var(--ts10); letter-spacing: 2.2px; text-transform: uppercase; color: var(--gold); display: flex; justify-content: space-between; align-items: baseline; }
.cos-card-kind { color: var(--bone-faint); font-size: var(--ts95); }
.cos-card-title { font-family: var(--display); font-weight: 400; font-size: var(--ts28); line-height: 1.05; margin: 0; letter-spacing: -0.01em; }
.cos-card-title em { font-style: italic; color: var(--gold); font-weight: 400; }
.cos-card-desc { font-family: var(--sans); font-size: var(--ts13); line-height: 1.55; color: var(--bone-muted); margin: 0; }
.cos-card-foot { margin-top: auto; padding-top: var(--ms0); font-family: var(--mono); font-size: var(--ts10); letter-spacing: 1.6px; text-transform: uppercase; color: var(--bone-faint); display: flex; justify-content: space-between; }
.cos-card-foot .arrow { color: var(--gold); }

.cos-disc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ms2); }
.cos-disc { display: flex; flex-direction: column; gap: var(--ms0); }
.cos-disc-mark { width: var(--ms6); height: var(--ms6); border: 1px solid var(--gold-faint); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-style: italic; font-size: var(--ts36); color: var(--gold); position: relative; margin-bottom: var(--ms-2); }
.cos-disc-mark::before { content: ''; position: absolute; inset: -8px; border: 1px solid var(--bone-fainter); border-radius: 50%; }
.cos-disc-name { font-family: var(--display); font-size: var(--ts24); margin: 0; font-weight: 400; letter-spacing: -0.005em; }
.cos-disc-scale { font-family: var(--mono); font-size: var(--ts95); letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold-soft); }
.cos-disc-body { font-family: var(--sans); font-size: var(--ts13); line-height: 1.55; color: var(--bone-muted); margin: 0; }

.cos-foot {
  padding: var(--ms6) var(--ms6) var(--ms5); border-top: 1px solid var(--bone-fainter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  font-family: var(--mono); font-size: var(--ts11); letter-spacing: 1px; color: var(--bone-faint); text-transform: uppercase;
}
.cos-about-body { max-width: 72ch; }
.cos-about-body p, .cos-about-body li { font-family: var(--sans); font-size: var(--ts15); line-height: 1.75; color: var(--bone-muted); margin: 0 0 var(--ms0); }
.cos-about-body ul { padding-left: 1.4em; margin: 0 0 var(--ms0); }
.cos-about-body h2 { font-family: var(--display); font-weight: 300; font-size: var(--ts28); letter-spacing: -0.01em; margin: var(--ms3) 0 var(--ms-1); color: var(--bone); }
.cos-about-body h2 em { font-style: italic; color: var(--gold); font-weight: 300; }

.cos-foot-mark { font-family: var(--display); font-style: italic; font-size: var(--ts32); color: var(--gold); text-transform: none; letter-spacing: -0.01em; }
.cos-foot-links { display: flex; gap: var(--ms2); justify-content: flex-end; }
.cos-foot-links a { color: var(--bone-muted); text-decoration: none; }
.cos-foot-links a:hover { color: var(--gold); }

/* ── Cosmos CTA button ────────────────────────────────────────── */
.cos-cta-btn {
  display: inline-flex; align-items: center; gap: var(--ms-1);
  font-family: var(--mono); font-size: var(--ts11); letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink); background: var(--gold);
  padding: var(--ms0) var(--ms3); border: none; text-decoration: none;
  margin-top: var(--ms3); transition: opacity 0.25s;
}
.cos-cta-btn:hover { opacity: 0.82; }

/* ── Cosmos feature list ──────────────────────────────────────── */
.cos-features { list-style: none; padding: 0; margin: var(--ms2) 0 0; }
.cos-features li {
  font-family: var(--sans); font-size: var(--ts14); line-height: 1.6;
  color: var(--bone-muted); padding: var(--ms-2) 0;
  border-top: 1px solid var(--bone-fainter); display: flex; gap: var(--ms-1);
}
.cos-features li::before { content: '·'; color: var(--gold); flex-shrink: 0; }

/* ── Cosmos article overrides ─────────────────────────────────── */
.cosmos .art-hero { border-bottom-color: var(--bone-fainter); }
.cosmos .art-eyebrow { color: var(--gold-soft); }
.cosmos .art-h1 { font-family: var(--display); font-weight: 300; color: var(--bone); }
.cosmos .art-h1 em { color: var(--gold); }
.cosmos .art-lede { color: var(--bone-muted); font-family: var(--display); }
.cosmos .art-meta-bar { border-bottom-color: var(--bone-fainter); color: var(--bone-faint); }
.cosmos .art-meta-val { color: var(--bone-muted); }
.cosmos .art-toc { border-bottom-color: var(--bone-fainter); }
.cosmos .art-toc a { color: var(--bone-faint); }
.cosmos .art-toc a:hover { color: var(--gold); }
/* .cosmos .art-body section { border-top-color: var(--bone-fainter); }
.cosmos .art-body h2 { font-family: var(--display); font-weight: 300; color: var(--bone); }
.cosmos .art-body h3 { font-family: var(--display); font-weight: 300; color: var(--bone); }
.cosmos .art-body p { color: var(--bone-muted); }
.cosmos .art-body ul { color: var(--bone-muted); }
.cosmos .art-body a { color: var(--gold); border-bottom-color: rgba(214,171,94,0.3); }
.cosmos .art-body a:hover { border-bottom-color: var(--gold); } */
.cosmos .app-cta-btn { border-color: var(--bone-fainter); color: var(--bone-muted); }
.cosmos .app-cta-btn:hover { border-color: var(--gold); color: var(--gold); }
.cosmos .app-cta-btn.primary { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.cosmos .app-cta-btn.primary:hover { background: var(--gold); border-color: var(--gold); opacity: 0.82; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  html { font-size: 20px; }
  .almanac section { padding: var(--ms4) var(--ms4); }
  .cosmos section { padding: var(--ms5) var(--ms4) var(--ms4); }
  .alm-h1 { font-size: var(--ts64); }
  .cos-h1 { font-size: var(--ts72); }
  .alm-hero { padding: var(--ms5) var(--ms4) var(--ms6); gap: var(--ms4); }
  .cos-rings-side { display: none; }
  .alm-entry {
    grid-template-columns: 150px 1fr 160px var(--ms5);
    gap: var(--ms1);
  }
}

@media (max-width: 800px) {
  html { font-size: 18px; }
  .alm-nav { padding: var(--ms1) var(--ms1); flex-direction: column; align-items: baseline; }
  .cos-nav { padding: var(--ms1) var(--ms1); }
  .alm-hero { grid-template-columns: 1fr; padding: var(--ms3) var(--ms1) var(--ms6); }
  .alm-rings-wrap { margin-top: var(--ms3); }
  .alm-h1 { font-size: var(--ts48); }
  .almanac section { padding: var(--ms4) var(--ms3) var(--ms3); }
  .cosmos section { padding: var(--ms4) var(--ms3) var(--ms3); }
  .alm-section-head { grid-template-columns: 1fr; gap: var(--ms0); }
  .alm-entry { grid-template-columns: 1fr; gap: var(--ms-2); padding: var(--ms1) var(--ms-2); }
  .alm-entry-kind, .alm-entry-arrow { text-align: left; }
  .alm-disciplines { grid-template-columns: 1fr 1fr; }
  .alm-foot { padding: var(--ms2) var(--ms1) var(--ms4); }
  .cos-hero { padding: var(--ms3) 0 var(--ms5) 0; }
  .cos-h1 { font-size: var(--ts48); }
  .cos-rings-stage { min-height: 400px; }
  .cos-disc-grid { grid-template-columns: 1fr 1fr; }
  .cos-foot { padding: var(--ms3) var(--ms1) var(--ms4); grid-template-columns: 1fr 1fr; }
  .cos-foot-mark { grid-column: 1 / -1; margin-bottom: var(--ms0); }
  #sun-panel { display: none; }
  .art-hero { padding: var(--ms4) var(--ms1) var(--ms3); }
  .art-h1 { font-size: var(--ts36); }
  .art-lede { font-size: var(--ts18); }
  .art-meta-bar { padding: var(--ms1) var(--ms1); flex-wrap: wrap; gap: var(--ms2); }
  .art-toc { padding: var(--ms2) var(--ms1); }
  .art-body section { padding: var(--ms3) var(--ms1); }
}

@media (max-width: 500px) {
  html { font-size: 14px; }
  .cos-nav { flex-direction: column; align-items: baseline; }
  .alm-h1 { font-size: var(--ts36); }
  .cos-h1 { font-size: var(--ts36); }
  .alm-lede { font-size: var(--ts18); }
  .almanac section { padding: var(--ms4) var(--ms3) var(--ms3); }
  .cosmos section { padding: var(--ms4) var(--ms3) var(--ms3); }
  .almanac section .title { font-size: var(--ms3); }
  .cosmos section .title { font-size: var(--ms3); }
  .alm-disciplines { grid-template-columns: 1fr; }
  .cos-disc-grid { grid-template-columns: 1fr; }
  .alm-foot { grid-template-columns: 1fr; }
  .alm-foot-links { justify-content: flex-start; }
  .cos-foot { grid-template-columns: 1fr; }
  .cos-foot-links { justify-content: flex-start; }
}