/* ==========================================================================
   Grain by Grain: design tokens + chassis.
   Cinematic-family skin (pattern inherited from auraofintelligence.github.io
   and right-place-right-time): deep ink base, self-hosted variable fonts,
   glass cards, reveal-on-scroll. Palette and voice are the sand ladder's own:
   sun-gold lantern light, bay teal, dusk violet for the Screen lane.
   ========================================================================== */

@font-face {
  font-family: "Archivo Var";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono Var";
  src: url("../fonts/jetbrains-mono-var.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --void: #05070b;
  --deep: #0b1220;
  --ink: #0e1826;
  --sun: #ffcf6e;
  --sun-soft: #ffe6b0;
  --bay: #2be3c2;
  --bay-deep: #0c4a45;
  --dusk: #8a63ff;
  --amethyst: #c9a6ff;
  --ochre: #ff8a3d;
  --text: #f7f4ec;
  --muted: #bfc5d2;
  --line: rgba(255, 207, 110, 0.24);
  --glass: rgba(22, 26, 40, 0.55);
  --known: #4cc38a;
  --modelled: #6ea8fe;
  --disputed: #e6c229;
  --speculative: #ff7eb6;
  --fictional: #b197fc;
  --max: 1240px;
  --radius: 18px;
  --radius-sm: 10px;
  --font-display: "Archivo Var", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Archivo Var", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Var", Consolas, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .2s;
  --dur-med: .5s;
  --dur-slow: .9s;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; width: 100%; max-width: 100%; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 440;
  line-height: 1.65;
  background:
    radial-gradient(ellipse 60rem 34rem at 12% -6%, rgba(43, 227, 194, .12), transparent),
    radial-gradient(ellipse 64rem 38rem at 92% 2%, rgba(138, 99, 255, .13), transparent),
    radial-gradient(ellipse 84rem 52rem at 50% 116%, rgba(255, 178, 90, .17), transparent),
    linear-gradient(180deg, #0c1322 0%, #080d18 40%, var(--void) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(255, 207, 110, .045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 207, 110, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(0deg, rgba(0,0,0,.8), rgba(0,0,0,.05) 70%);
}
::selection { background: var(--sun); color: #201200; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
main, section, article, div, p, h1, h2, h3, span, a { min-width: 0; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 100; background: var(--sun); color: #201200; padding: .7rem 1rem; border-radius: 4px; font-weight: 900; text-decoration: none; }
.skip-link:focus { top: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.25rem;
  padding: .8rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid transparent;
  background: linear-gradient(180deg, rgba(5, 7, 11, .6), rgba(5, 7, 11, 0));
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out);
}
.site-header.is-condensed {
  padding-top: .55rem;
  padding-bottom: .55rem;
  border-bottom-color: var(--line);
  background: rgba(8, 11, 18, .84);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
}
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
  border: 1px solid rgba(255, 207, 110, .55);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, var(--sun-soft) 0%, var(--ochre) 46%, #4a2a10 84%);
  box-shadow: 0 0 30px rgba(255, 178, 90, .45), inset 0 0 14px rgba(255, 255, 255, .25);
}
.brand-text { display: grid; font-size: .74rem; line-height: 1.25; color: var(--muted); font-family: var(--font-mono); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.brand-text strong { color: white; font-family: var(--font-display); font-size: .95rem; font-weight: 850; letter-spacing: .01em; text-transform: none; }
.site-nav { display: flex; align-items: center; justify-content: flex-end; gap: .15rem; color: var(--muted); font-size: .86rem; font-weight: 620; line-height: 1.15; min-width: 0; }
.site-nav a { position: relative; padding: .55rem .72rem; border-radius: 999px; text-decoration: none; cursor: pointer; white-space: nowrap; letter-spacing: .015em; transition: color var(--dur-fast), background var(--dur-fast); }
.site-nav a:hover { color: white; background: rgba(255, 178, 90, .16); }
.site-nav a[aria-current="page"] { color: white; background: rgba(255, 178, 90, .24); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- Buttons ---------- */
.button { display: inline-flex; justify-content: center; align-items: center; gap: .55rem; min-height: 2.85rem; padding: .8rem 1.45rem; border-radius: 999px; text-decoration: none; border: 1px solid transparent; font-weight: 760; cursor: pointer; letter-spacing: .015em; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast); }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button-primary { background: linear-gradient(135deg, var(--sun), var(--ochre) 60%, var(--dusk)); color: #1a0e05; box-shadow: 0 8px 32px rgba(255, 207, 110, .3); }
.button-primary:hover { box-shadow: 0 14px 44px rgba(255, 207, 110, .42); }
.button-secondary { border-color: var(--line); background: rgba(255,255,255,.06); color: white; backdrop-filter: blur(8px); }
.button-secondary:hover { border-color: rgba(43, 227, 194, .6); background: rgba(43, 227, 194, .1); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: calc(100vh - 5rem); display: grid; align-items: center; padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem); overflow: hidden; }
.hero-image { position: absolute; inset: 0; z-index: -2; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: saturate(1.15) contrast(1.05); }
.hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,11,.94) 0%, rgba(11,18,32,.7) 48%, rgba(11,18,32,.34) 100%), linear-gradient(0deg, rgba(5,7,11,.96), transparent 48%); }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
/* Solar system hero animation, by Codex, lifted from GAJRA-earth-infinity.
   Honours prefers-reduced-motion and the --motion custom property. */
.hero { position: relative; isolation: isolate; }
.hero-content { width: min(100%, var(--max)); margin: 0 auto; }
.eyebrow { margin: 0 0 .85rem; color: var(--sun); font-family: var(--font-mono); font-size: .8rem; font-weight: 640; letter-spacing: .22em; text-transform: uppercase; }
h1, h2, h3 { letter-spacing: -.005em; }
h1, h2 { margin: 0; font-family: var(--font-display); font-weight: 860; line-height: .96; text-wrap: balance; text-shadow: 0 0 44px rgba(255, 178, 90, .3); }
h1 { max-width: 16ch; font-size: clamp(2.6rem, 7vw, 6.2rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.8rem); }
h3 { margin: 0 0 .6rem; font-size: 1.15rem; line-height: 1.25; font-weight: 740; }
p { margin-top: 0; }
.hero-copy { max-width: 54rem; margin: 1.25rem 0 0; color: #efe9dd; font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 4vw, 3rem); }
.section > * { width: min(100%, var(--max)); margin-left: auto; margin-right: auto; }
.section-heading { display: grid; grid-template-columns: minmax(0, .85fr) minmax(16rem, 1fr); gap: 2rem; align-items: start; margin-bottom: 2rem; }
.section-heading p:not(.eyebrow) { color: var(--muted); font-size: 1.02rem; }

/* ---------- Register chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  padding: .22rem .6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.chip.known { color: var(--known); }
.chip.modelled { color: var(--modelled); }
.chip.disputed { color: var(--disputed); }
.chip.speculative { color: var(--speculative); }
.chip.fictional { color: var(--fictional); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: 1rem 1.6rem; padding: 0; margin: 1.4rem 0 0; list-style: none; }
.legend li { display: flex; align-items: flex-start; gap: .55rem; color: var(--muted); font-size: .92rem; }
.legend li .chip { flex-shrink: 0; margin-top: .1rem; }

/* ---------- Lane cards ---------- */
.lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .9rem; }
.lane { position: relative; padding: 1.3rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg, rgba(255, 178, 90, .10), rgba(10, 12, 22, .72)); box-shadow: 0 20px 60px rgba(0,0,0,.32); }
.lane.screen { border-color: rgba(138, 99, 255, .4); background: linear-gradient(150deg, rgba(138, 99, 255, .14), rgba(10, 10, 22, .72)); }
.lane h3 { color: #fff; }
.lane.build h3 { color: var(--sun-soft); }
.lane.screen h3 { color: var(--amethyst); }
.lane p { color: var(--muted); margin-bottom: 0; }

/* ---------- Rung feature blocks ---------- */
.rung-block { display: grid; grid-template-columns: minmax(18rem, .8fr) minmax(0, 1fr); gap: 1.6rem; align-items: center; padding: 1.6rem 0; }
.rung-block img { width: 100%; max-height: 26rem; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.rung-block h3 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 840; margin-bottom: .6rem; }
.rung-block .rung-copy p { color: var(--muted); }
.rung-block .rung-copy p a { color: var(--sun-soft); }
.rung-block:nth-of-type(even) { direction: rtl; }
.rung-block:nth-of-type(even) > * { direction: ltr; }
@media (max-width: 900px) {
  .rung-block { grid-template-columns: 1fr; direction: ltr !important; }
}
.rung-eyebrow { margin: 0 0 .5rem; color: var(--bay); font-family: var(--font-mono); font-size: .76rem; font-weight: 640; letter-spacing: .2em; text-transform: uppercase; }

/* ---------- Walls ---------- */
.walls { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.walls li { padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-left: 3px solid var(--sun); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .04); color: var(--muted); }
.walls strong { color: #fff; }
.walls .to-screen { color: var(--amethyst); font-weight: 640; }

/* ---------- Footer ---------- */
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.2rem; padding: 2rem clamp(1rem, 4vw, 3rem); border-top: 1px solid var(--line); background: rgba(6, 8, 13, .78); }
.site-footer > div { display: grid; gap: .3rem; max-width: 40rem; }
.site-footer p { margin: 0; font-size: .88rem; color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.footer-links a { display: inline-grid; place-items: center; min-height: 2.35rem; padding: .45rem .72rem; border: 1px solid rgba(255, 207, 110, .35); border-radius: 999px; background: rgba(255, 207, 110, .08); color: var(--sun-soft); font-weight: 800; font-size: .84rem; text-decoration: none; }
.footer-links a:hover { border-color: rgba(255, 207, 110, .7); background: rgba(255, 207, 110, .16); color: #fff; }

/* ---------- Inner-page hero ---------- */
.page-hero { min-height: min(56vh, 32rem); }
.page-hero h1 { max-width: 15ch; font-size: clamp(2.3rem, 5.6vw, 4.6rem); }

/* ---------- Kintsugi seams (animated) ----------
   Pattern shared with the P4A Native Nations chapter: each seam is a unique
   inline-SVG crack. Paths carry pathLength="1" so the draw is a plain
   dashoffset transition; once drawn, a small light keeps flowing along the
   seam. Fully drawn and static without JS or under reduced motion. The gold
   is decoration, never a gate. */
.kintsugi-seam { position: relative; width: min(100%, var(--max)); height: 2.6rem; margin: clamp(1.2rem, 3.4vw, 2.2rem) auto; border: 0; background: none; }
.kintsugi-seam svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(255, 207, 110, .45)); }
.kintsugi-seam .seam-path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease-out); }
.kintsugi-seam .seam-branch { stroke-width: 1.4; opacity: .68; transition-duration: .9s; transition-delay: 1.1s; }
.kintsugi-seam.is-drawn .seam-path { stroke-dashoffset: 0; }
.kintsugi-seam .seam-light { fill: none; stroke: #fff7e6; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .05 .95; stroke-dashoffset: 1; opacity: 0; transition: opacity .8s ease 1.8s; }
.kintsugi-seam.is-drawn .seam-light { opacity: .75; animation: seam-flow 8s linear infinite; animation-delay: 2s; }
@keyframes seam-flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: -1; } }
html:not(.js) .kintsugi-seam .seam-path { stroke-dashoffset: 0; transition: none; }
html:not(.js) .kintsugi-seam .seam-light { display: none; }
@media (prefers-reduced-motion: reduce) {
  .kintsugi-seam .seam-path { stroke-dashoffset: 0; transition: none; }
  .kintsugi-seam .seam-light { display: none; }
}

/* ---------- Stat panels ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem; margin: 1.4rem 0; }
.stat { padding: 1.15rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(255, 178, 90, .08), rgba(10, 12, 22, .7)); }
.stat strong { display: block; color: var(--sun-soft); font-family: var(--font-mono); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 760; letter-spacing: -.01em; }
.stat span { color: var(--muted); font-size: .9rem; }
.stat.contrast { border-color: rgba(43, 227, 194, .4); background: linear-gradient(160deg, rgba(43, 227, 194, .1), rgba(10, 12, 22, .7)); }
.stat.contrast strong { color: var(--bay); }

/* ---------- Receipts (source trail) ---------- */
.receipts { margin: 1.2rem 0 0; padding: 1rem 1.3rem; border: 1px dashed var(--line); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); }
.receipts h3 { color: var(--sun-soft); font-size: .92rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; }
.receipts ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .9rem; display: grid; gap: .3rem; }
.receipts a { color: var(--sun-soft); }

/* ---------- Comparison table ---------- */
.table-scroll { overflow-x: auto; margin: 1.2rem 0; }
.data-table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: .92rem; }
.data-table th { text-align: left; padding: .6rem .8rem; color: var(--sun-soft); font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; border-bottom: 1px solid var(--line); }
.data-table td { padding: .6rem .8rem; color: var(--muted); border-bottom: 1px solid rgba(255, 207, 110, .12); vertical-align: top; }
.data-table td:first-child { color: var(--text); font-weight: 620; }

/* ---------- Rung prev/next nav ---------- */
.rung-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; width: min(100%, var(--max)); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem) 2.6rem; }
.rung-nav a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .6rem 1.1rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--sun-soft); text-decoration: none; font-weight: 700; font-size: .9rem; transition: border-color var(--dur-fast), background var(--dur-fast); }
.rung-nav a:hover { border-color: rgba(255, 207, 110, .7); background: rgba(255, 207, 110, .12); color: #fff; }

/* ---------- Evidence-tiered periodic table ---------- */
.periodic { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 3px; min-width: 46rem; padding: .2rem; }
.el { aspect-ratio: 1; display: grid; place-content: center; gap: 1px; padding: 0; border: 1px solid transparent; border-radius: 4px; font-family: var(--font-mono); line-height: 1; text-align: center; transition: transform var(--dur-fast) var(--ease-out); }
.el .el-z { font-size: .42rem; opacity: .65; }
.el .el-sym { font-size: .74rem; font-weight: 700; }
.el-local { background: linear-gradient(160deg, var(--sun), var(--ochre)); color: #1a0e05; cursor: pointer; box-shadow: 0 0 12px rgba(255, 207, 110, .3); }
.el-reachable { background: rgba(43, 227, 194, .1); border-color: rgba(43, 227, 194, .5); color: var(--bay); cursor: pointer; }
.el-context { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .06); color: var(--muted); opacity: .42; }
.el-pointer .el-sym { font-size: .46rem; }
.el-local:hover, .el-reachable:hover { transform: translateY(-2px); }
.el.is-picked { outline: 2px solid #fff; outline-offset: 1px; }
.el-detail { margin-top: 1.2rem; padding: 1.2rem 1.4rem; min-height: 9rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg, rgba(255, 178, 90, .08), rgba(10, 12, 22, .72)); }
.el-detail h3 { color: #fff; margin-bottom: .5rem; }
.el-detail p:last-child { margin-bottom: 0; color: var(--muted); }
.el-key { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.el-key li { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .9rem; }
.el-swatch { width: 1rem; height: 1rem; border-radius: 3px; border: 1px solid transparent; flex: 0 0 auto; }
.el-swatch.local { background: linear-gradient(160deg, var(--sun), var(--ochre)); }
.el-swatch.reachable { background: rgba(43, 227, 194, .12); border-color: rgba(43, 227, 194, .6); }
.el-swatch.context { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }

/* ---------- To-top button ---------- */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(255, 207, 110, .5);
  border-radius: 50%;
  background: rgba(14, 24, 38, .82);
  color: var(--sun);
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .4);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast);
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: rgba(255, 207, 110, .16); border-color: var(--sun); }

/* ---------- Site map: the growth tree ---------- */
.map-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.map-legend li { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .88rem; }
.map-dot { width: .8rem; height: .8rem; border-radius: 50%; flex: 0 0 auto; }
.map-dot.live { background: var(--bay); box-shadow: 0 0 10px rgba(43, 227, 194, .6); }
.map-dot.building { background: var(--sun); box-shadow: 0 0 10px rgba(255, 207, 110, .6); }
.map-dot.surveyed { background: var(--dusk); }
.map-dot.chapter { background: transparent; border: 1.5px solid var(--muted); }

.map-rung { margin: 0 0 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(155deg, rgba(255, 178, 90, .06), rgba(10, 12, 22, .66)); overflow: hidden; }
.map-rung > summary { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; display: grid; grid-template-columns: auto 1fr auto; gap: .4rem 1rem; align-items: center; }
.map-rung > summary::-webkit-details-marker { display: none; }
.map-rung > summary::after { content: "+"; font-family: var(--font-mono); color: var(--sun); font-size: 1.3rem; }
.map-rung[open] > summary::after { content: "\2212"; }
.map-rung > summary h3 { margin: 0; font-size: 1.15rem; color: #fff; }
.map-rung > summary .map-eyebrow { grid-column: 1 / -1; color: var(--bay); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.map-count { color: var(--muted); font-family: var(--font-mono); font-size: .8rem; }
.map-pages { list-style: none; margin: 0; padding: 0 1.3rem 1.2rem; display: grid; gap: .1rem; }
.map-pages li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: baseline; padding: .5rem .2rem; border-top: 1px solid rgba(255, 207, 110, .1); }
.map-pages li a { color: var(--sun-soft); text-decoration: none; font-weight: 620; }
.map-pages li a:hover { color: #fff; }
.map-pages li span.map-desc { color: var(--muted); font-size: .88rem; }
.map-pages li em { font-style: normal; color: var(--text); }
/* Local links stay gold; external links (other repos / outside sites) turn teal with an arrow. */
.map-pages a[href^="http"] { color: var(--bay); }
.map-pages a[href^="http"]:hover { color: #fff; }
.map-pages a[href^="http"]::after { content: " \2197"; font-family: var(--font-mono); font-size: .82em; opacity: .85; }
.map-linknote { max-width: 60ch; margin: -1rem 0 2rem; font-size: .9rem; color: var(--muted); }
.map-linknote .local-key { color: var(--sun-soft); font-weight: 700; }
.map-linknote .ext-key { color: var(--bay); font-weight: 700; }

/* ---------- Full-spectrum alchemy ---------- */
.alchemy-viz { margin: 1.6rem 0 0; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(43, 227, 194, .06), rgba(10, 12, 22, .72)); }
.alchemy-viz svg { width: 100%; height: auto; display: block; }

.spectrum-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 1.2rem; }
.spectrum-filter button { min-height: 2.5rem; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--muted); font: 600 .84rem var(--font-mono); letter-spacing: .04em; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
.spectrum-filter button:hover { color: #fff; border-color: rgba(255, 207, 110, .5); }
.spectrum-filter button[aria-pressed="true"] { color: #1a0e05; background: linear-gradient(135deg, var(--sun), var(--ochre)); border-color: transparent; }

.stream { margin: 0 0 1rem; border: 1px solid var(--line); border-left: 3px solid var(--sun); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .03); overflow: hidden; }
.stream[hidden] { display: none; }
.stream-head { padding: 1rem 1.3rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.stream-head h3 { margin: 0; font-size: 1.15rem; color: #fff; }
.stream-head .formula { font-family: var(--font-mono); font-size: .85rem; color: var(--bay); }
.stream-head p { flex-basis: 100%; margin: .3rem 0 0; color: var(--muted); font-size: .92rem; }
.chain-list { list-style: none; margin: 0; padding: 0 1.3rem 1.1rem; display: grid; gap: .55rem; }
.chain { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; align-items: start; padding: .7rem .9rem; border: 1px solid rgba(255, 207, 110, .14); border-radius: 8px; background: rgba(10, 12, 22, .5); }
.chain .flow { font-size: .95rem; }
.chain .flow .arrow { color: var(--sun); font-family: var(--font-mono); padding: 0 .35rem; }
.chain .flow .product { color: #fff; font-weight: 640; }
.chain .use { grid-column: 1 / -1; color: var(--muted); font-size: .86rem; }
.chain .loopback { grid-column: 1 / -1; margin-top: .2rem; padding-top: .4rem; border-top: 1px dashed rgba(43, 227, 194, .3); color: var(--bay); font-size: .84rem; }
.chain .loopback::before { content: "\21ba  "; font-weight: 800; }

/* ---------- Closed-loop cards ---------- */
.loop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.loop-card { padding: 1.2rem 1.3rem; border: 1px solid rgba(43, 227, 194, .3); border-radius: var(--radius); background: linear-gradient(155deg, rgba(43, 227, 194, .1), rgba(10, 12, 22, .74)); }
.loop-card h3 { color: var(--bay); font-size: 1.05rem; }
.loop-card ol { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .88rem; display: grid; gap: .25rem; }
.loop-card .loop-mark { font-family: var(--font-mono); color: var(--bay); font-size: 1.4rem; float: right; }

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); filter: blur(5px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.is-visible { opacity: 1; transform: none; filter: none; transition: none; } }
html:not(.js) .reveal { opacity: 1; transform: none; filter: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .site-nav { display: none; }
  .section-heading { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .site-header { padding: .65rem 1rem; }
  .hero { min-height: auto; padding: 2.4rem 1rem 2.6rem; }
  h1 { max-width: 100%; font-size: clamp(2.1rem, 9vw, 2.9rem); }
  h2 { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .button { width: 100%; }
  .site-footer { flex-direction: column; }
  .footer-links { justify-content: flex-start; }
}

/* ==========================================================================
   Micronova and Excursions: components added on top of the shared chassis.
   Everything above this line is the Grain by Grain skin, unchanged, so the
   two sites read as one family. Below are the pieces this ledger needs:
   a fifth "unsupported" register colour, the cadence ladder, verdict blocks,
   dismissal cards and layer rows.
   ========================================================================== */

:root {
  --unsupported: #ff6b6b;
  --settled: #4cc38a;
}

.chip.unsupported { color: var(--unsupported); }
.chip.settled { color: var(--settled); }

/* ---------- The cadence ladder ---------- */
.ladder { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ladder li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: .4rem 1rem;
  align-items: baseline;
  padding: .8rem 1rem;
  border: 1px solid rgba(255, 207, 110, .16);
  border-left: 3px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-sm);
  background: rgba(10, 12, 22, .5);
}
.ladder .rung-age { font-family: var(--font-mono); font-size: .84rem; color: var(--sun-soft); letter-spacing: .02em; }
.ladder .rung-name { color: #fff; font-weight: 680; }
.ladder .rung-note { grid-column: 1 / -1; color: var(--muted); font-size: .88rem; }
.ladder li.holds { border-left-color: var(--known); }
.ladder li.holds .rung-name { color: var(--known); }
.ladder li.empty { border-left-color: var(--unsupported); opacity: .92; }
.ladder li.partial { border-left-color: var(--disputed); }
.ladder li.nownow { border-left-color: var(--sun); background: linear-gradient(120deg, rgba(255, 178, 90, .12), rgba(10, 12, 22, .6)); }
@media (max-width: 640px) {
  .ladder li { grid-template-columns: 1fr; }
  .ladder li > .chip { justify-self: start; }
}

/* ---------- Verdict block ---------- */
.verdict {
  margin: 1.6rem 0 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(43, 227, 194, .34);
  border-left: 3px solid var(--bay);
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, rgba(43, 227, 194, .08), rgba(10, 12, 22, .7));
}
.verdict h3 { color: var(--bay); font-family: var(--font-mono); font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; }
.verdict p:last-child { margin-bottom: 0; color: var(--text); }
.verdict.caution { border-color: rgba(255, 207, 110, .34); border-left-color: var(--sun); background: linear-gradient(150deg, rgba(255, 178, 90, .09), rgba(10, 12, 22, .7)); }
.verdict.caution h3 { color: var(--sun-soft); }

/* ---------- Dismissal cards ---------- */
.dismissals { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .9rem; }
.dismissal {
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(155deg, rgba(255, 178, 90, .06), rgba(10, 12, 22, .7));
}
.dismissal .said {
  display: block;
  margin: 0 0 .7rem;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 700;
  font-style: italic;
}
.dismissal .said::before { content: "\201C"; color: var(--sun); }
.dismissal .said::after { content: "\201D"; color: var(--sun); }
.dismissal dl { margin: 0; display: grid; gap: .5rem; }
.dismissal dt {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sun-soft);
}
.dismissal dd { margin: .15rem 0 0; color: var(--muted); font-size: .94rem; }
.dismissal dt.better { color: var(--bay); }
.dismissal dd a { color: var(--sun-soft); }

/* ---------- Layer rows ---------- */
.layers { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .6rem; counter-reset: layer; }
.layers li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .4rem 1rem;
  align-items: center;
  padding: .95rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .035);
}
.layers .layer-id {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 207, 110, .5);
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 700;
  color: var(--sun);
  flex: 0 0 auto;
}
.layers .layer-q { color: #fff; font-weight: 640; }
.layers .layer-note { grid-column: 2 / -1; color: var(--muted); font-size: .88rem; }
@media (max-width: 640px) {
  .layers li { grid-template-columns: auto 1fr; }
  .layers .layer-note { grid-column: 1 / -1; }
}

/* ---------- Pull quote ---------- */
.pull {
  margin: 1.6rem 0;
  padding: 1rem 0 1rem 1.3rem;
  border-left: 3px solid var(--sun);
  color: var(--sun-soft);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 620;
  line-height: 1.4;
}

/* ---------- Watch list ---------- */
.streams { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .9rem; margin-top: 1.4rem; list-style: none; padding: 0; }
.streams li { padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, .035); }
.streams h3 { color: #fff; font-size: 1rem; }
.streams p { margin: 0; color: var(--muted); font-size: .9rem; }
.streams a { color: var(--bay); font-weight: 640; }

/* ---------- Screen-reader-only utility ---------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}