/* ============================================================
   ĀKĀŚA — the open sky
   The Watcher and the Watched · design system
   ------------------------------------------------------------
   In the texts this site introduces, space (ākāśa) is the
   standing metaphor for emptiness: unobstructed, accommodating
   everything, itself nothing. The page is built as sky, not
   paper — structure from distance, not lines; no texture, no
   grain (flatness argued as emptiness); two figures only
   against the ground: robe saffron (the practice voice) and
   twilight indigo (the Skeptic). Dark is the same sky before
   dawn — the sitting hour — re-lit, not inverted.
   House rules: tokens on :root, dark re-declares under .dark;
   ground never pure white, ink never pure black; accents carry
   meaning (Textual = ink-soft · Interpretation = indigo ·
   Practice-report = saffron).
   ============================================================ */

:root {
  /* ground & ink — a luminous, faintly cool morning sky; not cream */
  --ground:      #F4F4F0;  /* morning sky — the site's emptiness */
  --surface:     #ECECE5;  /* a thin cloud layer: instruction & interactive blocks */
  --ink:         #21242B;  /* ash-indigo ink — never pure black */
  --ink-soft:    #5A5F6B;  /* secondary text, metadata */
  --line:        #D9DAD2;  /* hairlines — used rarely; space does the separating */
  --saffron:     #9A5B08;  /* the robe: practice voice, links, current rung (4.9:1 on ground) */
  --indigo:      #4A5490;  /* twilight: the Skeptic margin voice (6.4:1 on ground) */
  /* template aliases — structural selectors below read these */
  --c-bg: var(--ground);
  --c-surface: var(--surface);
  --c-ink: var(--ink);
  --c-muted: var(--ink-soft);
  --c-rule: var(--line);
  --c-accent: var(--saffron);
  --c-accent-soft: var(--indigo);
  /* type trio — display / reading / data; the mono carries the chrome */
  --font-display: "Eczar", Georgia, serif;
  --font-body: "Spectral", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-ui: "JetBrains Mono", ui-monospace, monospace;
  /* layout */
  --measure: 34rem;
  --rail: 16.5rem;
  --page: 72rem;
}

html.dark {
  /* before dawn — the sitting hour; the same sky re-lit, not inverted */
  --ground:      #15171D;
  --surface:     #1C1F27;
  --ink:         #E3E2DA;  /* moonlit paper */
  --ink-soft:    #9DA1AB;
  --line:        #2C303A;
  --saffron:     #DE9A3C;  /* the robe holds its color under lamplight (7.5:1) */
  --indigo:      #9AA3DC;  /* twilight brightens toward night (7.4:1) */
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  /* Seat the footer at the bottom on short pages — without this, a 404 at
     800px tall ends with the colophon mid-viewport and bare paper below. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

body > main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-ink); text-decoration-thickness: 2px; }

code, pre, .data { font-family: var(--font-mono); font-size: 0.9em; }

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--c-accent); color: var(--c-bg); padding: 0.5rem 1rem;
}
.skip-link:focus { left: 0; z-index: 10; }
.skip-link:hover, .skip-link:focus { color: var(--c-bg); }

/* ---------- masthead ---------- */

.masthead { border-bottom: 1px solid var(--c-rule); }

.masthead__inner {
  max-width: var(--page); margin: 0 auto; padding: 0.9rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.brand { text-decoration: none; color: var(--c-ink); }
.brand__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }

.masthead__right { display: flex; align-items: center; gap: 1.4rem; }
.masthead__links { display: flex; align-items: center; gap: 1.1rem; }
.masthead__actions { display: flex; align-items: center; gap: 0.6rem; }

.navlink {
  font-family: var(--font-ui); font-size: 0.95rem;
  color: var(--c-ink); text-decoration: none;
}
.navlink:hover { color: var(--c-accent); }

.masthead__burger { display: none; }

/* a bare icon in a 44px hit area — no circle: the sky carries no chrome it
   doesn't need, and the tap floor is met without drawing a button */
.theme-toggle {
  background: none; border: none; border-radius: 999px;
  width: 2.75rem; height: 2.75rem; padding: 0.7rem; cursor: pointer; color: var(--c-muted);
  transition: color 0.2s;
}
.theme-toggle:hover { color: var(--c-accent); }
.theme-toggle svg { width: 100%; height: 100%; }
.theme-toggle__moon { display: none; }
html.dark .theme-toggle__sun { display: none; }
html.dark .theme-toggle__moon { display: block; }

@media (max-width: 40rem) {
  .masthead__burger {
    display: flex; flex-direction: column; gap: 4px;
    background: none; border: none; padding: 0.4rem; cursor: pointer;
  }
  .masthead__burger span { width: 20px; height: 2px; background: var(--c-ink); }
  .masthead__links {
    display: none; position: absolute; right: 1rem; top: 3.4rem;
    flex-direction: column; align-items: flex-end; gap: 0.8rem;
    background: var(--c-surface); border: 1px solid var(--c-rule);
    border-radius: 6px; padding: 1rem 1.25rem; z-index: 20;
  }
  .masthead__links.is-open { display: flex; }
  /* the toggle and burger stay side by side and always visible; the brand
     steps down one size so the title holds one line beside them */
  .masthead__right { gap: 0.3rem; }
  .masthead__actions { gap: 0.2rem; }
  .masthead__inner { padding: 0.7rem 1rem; }
  .brand__title { font-size: 1.02rem; }
}

/* ---------- content ---------- */

.hero { max-width: var(--measure); margin: 3.5rem auto 1rem; padding: 0 1.25rem; }
.hero__title { font-size: clamp(2rem, 6vw, 3.2rem); margin: 0 0 0.5rem; }
.hero__dek { color: var(--c-muted); font-size: 1.15rem; margin: 0; }

.prose { max-width: var(--measure); margin: 2rem auto 4rem; padding: 0 1.25rem; }
.prose h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.prose img { max-width: 100%; height: auto; }
.prose blockquote {
  margin: 1.8rem 0; padding: 0 0 0 1.4rem;
  color: var(--c-muted); font-style: italic;
}
.prose table { border-collapse: collapse; width: 100%; }
.prose th, .prose td { border-bottom: 1px solid var(--c-rule); padding: 0.4rem 0.6rem; text-align: left; }
.prose th { font-family: var(--font-ui); font-size: 0.85rem; }

/* ---------- colophon ---------- */

.colophon { border-top: 1px solid var(--c-rule); margin-top: 2rem; }
.colophon__inner {
  max-width: var(--page); margin: 0 auto; padding: 2rem 1.25rem 2.5rem;
  font-family: var(--font-ui); font-size: 0.9rem; color: var(--c-muted);
}
.colophon__title { font-family: var(--font-display); color: var(--c-ink); margin: 0 0 0.5rem; }
.colophon__links { display: flex; flex-wrap: wrap; gap: 1rem; }
.colophon__links a { color: var(--c-muted); }
.colophon__foot { margin-top: 1.25rem; }

/* ---------- motion & print floor (non-negotiable) ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* focus and selection: themed, not browser defaults */
:focus-visible { outline: 2px solid var(--saffron); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--saffron); color: var(--ground); }

@media print {
  .masthead, .colophon, .theme-toggle, .skip-link, .ladder, .ring, .scroll-hint, .term .pop { display: none; }
  body { background: #fff; color: #000; }
  .term { border-bottom: none; }
}

/* ============================================================
   Ākāśa components — the site's apparatus
   ============================================================ */

/* ---------- the ladder rail ---------- */

.ladder {
  position: relative;
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;
  justify-content: center; gap: 0.5rem;
  padding: 1.1rem 1.25rem 1.5rem;
}
.rung { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--ink-soft); }
.rung .dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--ink-soft); background: transparent; flex: none;
  transition: border-color 0.2s, background 0.2s;
}
.rung .lbl {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em;
  white-space: nowrap;
}
.rung[aria-current] { color: var(--saffron); }
.rung[aria-current] .dot { border-color: var(--saffron); background: var(--saffron); }
.rung.done .dot { border-color: var(--saffron); }
.rung:hover, .rung:focus-visible { color: var(--saffron); }

@media (max-width: 68.75rem) {
  /* the strip: eight dots in one row that never wraps, and the current rung's
     name centered beneath them (from data-label). The .lbl text stays in the
     accessibility tree at every width (clip pattern, not display:none) so
     every rung keeps its name; each dot sits in a 44px-tall hit area. */
  .rung { position: static; padding: 1.1rem 0.7rem; margin: -1.1rem 0; }
  .rung .lbl {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .rung[aria-current]::after {
    content: attr(data-label);
    position: absolute; left: 0; right: 0; top: 2.35rem; text-align: center;
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em;
    color: var(--saffron); pointer-events: none;
  }
}
@media (min-width: 68.75rem) {
  /* the rail: the reader always sees their rung — and the rungs ahead, by
     name, quietly. Labels are present, not hidden behind hover. */
  .ladder {
    position: fixed; left: 1.5rem; top: 50%; transform: translateY(-50%);
    flex-direction: column; align-items: flex-start; gap: 1.3rem; padding: 0; z-index: 5;
  }
  .rung .lbl { opacity: 0.72; transition: opacity 0.2s; }
  .rung:hover .lbl, .rung:focus-visible .lbl, .rung[aria-current] .lbl { opacity: 1; }
}

/* ---------- step pages ---------- */

.pg { padding: 3.5rem 1.25rem 3rem; }
.pg__head { max-width: var(--measure); margin: 0 auto; }
.pg__head h1 { font-size: clamp(2rem, 5vw, 2.9rem); margin: 0; }
.pg__meta {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em;
  color: var(--ink-soft); margin: 1rem 0 0;
}
.pg__meta b { color: var(--saffron); font-weight: 500; }
.prose--step { margin-top: 2.6rem; }
.prose > h2 { font-size: 1.35rem; margin: 2.6rem 0 0.9rem; clear: right; }
.prose > p { margin: 0 0 1.4rem; }
.prose > p:first-child { font-size: 1.06rem; }

/* ---------- term glosses ---------- */

.term {
  border-bottom: 1px dotted var(--saffron); cursor: help;
  position: relative; font-style: normal;
}
.term .pop {
  /* display:none, not visibility:hidden — a hidden-but-laid-out popover near
     the measure's right edge widens the document past a phone viewport */
  display: none;
  position: absolute; left: 0; top: 1.9em; z-index: 15; width: min(19rem, 78vw);
  background: var(--surface); border-radius: 6px;
  padding: 0.85rem 1rem; font-size: 0.85rem; line-height: 1.55; color: var(--ink);
  font-style: normal; font-weight: 400;
  box-shadow: 0 6px 18px -8px rgba(20, 22, 28, 0.35);
}
.term:hover .pop, .term:focus-within .pop, .term.is-open .pop {
  display: block;
}
.term .pop .hw { font-family: var(--font-display); font-weight: 600; }
.term .pop .gr { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0.04em; }
.term .pop.flip { left: auto; right: 0; }

/* ---------- the Skeptic (margin voice) ---------- */

.skeptic {
  color: var(--indigo); font-size: 0.86rem; line-height: 1.55; font-style: italic;
  margin: 1.6rem 0; padding-left: 1.1rem; border-left: 1px solid var(--indigo);
}
.skeptic .sig {
  font-family: var(--font-mono); font-style: normal; font-size: 0.7rem;
  letter-spacing: 0.06em; display: block; margin-bottom: 0.35rem;
}
@media (min-width: 68.75rem) {
  .prose--rail .skeptic, .prose .skeptic {
    float: right; clear: right; width: var(--rail);
    margin: 0.3rem calc(-1 * var(--rail) - 2.4rem) 1.2rem 1.6rem;
    padding-left: 0; border-left: none;
  }
}

/* ---------- claim labels ---------- */

.claim-tag {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em;
  padding: 0.12rem 0.5rem; border-radius: 999px; border: 1px solid currentColor;
  vertical-align: 0.18em; margin-left: 0.45rem; white-space: nowrap;
}
.claim-tag--textual { color: var(--ink-soft); }
.claim-tag--interp { color: var(--indigo); }
.claim-tag--practice { color: var(--saffron); }

/* ---------- surface blocks: instruction & find-the-observer ---------- */

.cloud {
  max-width: var(--measure); margin: 2.8rem auto; background: var(--surface);
  border-radius: 10px; padding: 1.9rem 2rem 2rem; clear: right;
}
.cloud__title { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin: 0; }
.cloud__note { color: var(--ink-soft); font-size: 0.88rem; margin: 0.4rem 0 0; }
.cloud p { margin: 1rem 0 0; }
.cloud ol { margin: 1rem 0 0; padding-left: 1.3rem; }
.cloud ol li { margin: 0.5rem 0; }

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.4rem 0 0; }
.chip {
  font-family: var(--font-mono); font-size: 0.74rem;
  border: 1px solid var(--ink-soft); border-radius: 999px; background: none; color: var(--ink);
  padding: 0.5rem 1rem; cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.chip:hover, .chip:focus-visible { border-color: var(--saffron); color: var(--saffron); }
.chip[aria-pressed="true"] { border-color: var(--saffron); color: var(--saffron); }
.observer-answer { margin-top: 1.5rem; font-size: 0.95rem; }
.observer-answer em { color: var(--saffron); font-style: normal; }

/* ---------- pager ---------- */

.pager {
  display: flex; justify-content: space-between; gap: 2rem;
  max-width: var(--measure); margin: 4rem auto 0; clear: both;
}
.pager a { text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; }
.pager .dir {
  display: block; font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 0.3rem;
}
.pager__next { text-align: right; }
.pager a:hover .t { text-decoration: underline; }

/* ---------- diagrams ---------- */

.diagram { max-width: var(--measure); margin: 2.8rem auto; clear: right; }
.diagram__scroll { overflow-x: auto; scrollbar-width: none; }
.diagram__scroll::-webkit-scrollbar { display: none; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram .scroll-hint {
  display: none;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em;
  color: var(--ink-soft); margin-top: 0.5rem;
}
@media (max-width: 40rem) {
  /* keep diagram labels legible on phones: the figure scrolls in its own
     container instead of scaling its type below readability. The drawing's
     right edge fades into the sky while there is more to the right (JS marks
     .can-scroll / .at-end); the mono hint says so in words for everyone. */
  .diagram svg { min-width: 620px; }
  .diagram .scroll-hint { display: block; }
  .diagram__scroll.can-scroll:not(.at-end) {
    -webkit-mask-image: linear-gradient(to right, #000 78%, transparent);
    mask-image: linear-gradient(to right, #000 78%, transparent);
  }
  .diagram__scroll.can-scroll.at-end:not(.at-start) {
    -webkit-mask-image: linear-gradient(to left, #000 78%, transparent);
    mask-image: linear-gradient(to left, #000 78%, transparent);
  }
}
.diagram figcaption {
  font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.9rem;
  font-family: var(--font-body);
}

/* ---------- four assumptions grid ---------- */

.assumptions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; max-width: var(--measure); margin: 2.4rem auto; clear: right;
}
.assumptions > div { background: var(--ground); padding: 1.2rem 1.3rem; }
.assumptions .a-name { font-family: var(--font-display); font-weight: 600; display: block; }
.assumptions .a-body { font-size: 0.9rem; color: var(--ink-soft); display: block; margin-top: 0.3rem; }
@media (max-width: 40rem) { .assumptions { grid-template-columns: 1fr; } }

/* ---------- book records ---------- */

.record {
  max-width: var(--measure); margin: 0 auto; border-top: 1px solid var(--line);
  padding: 2rem 0 2.4rem; clear: right;
}
.record:last-of-type { border-bottom: 1px solid var(--line); }
.record .t { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin: 0; }
.record .bib {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft);
  letter-spacing: 0.04em; margin: 0.5rem 0 0;
}
.record p { margin: 1.1rem 0 0; }
/* "open first" is the record's one act of guidance: the label wears the robe,
   the chapter itself stays in ink — a whole sentence in saffron shouts */
.record .open { margin-top: 1.4rem; }
.record .open .k {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--saffron); display: block; margin-bottom: 0.25rem;
}
.record .open b { font-weight: 600; }

/* home: the books as a reading list */
.booklist { max-width: var(--measure); margin: 3.5rem auto 0; padding: 0 1.25rem; }
.booklist h2 { font-size: 1.15rem; margin: 0 0 1.2rem; }
.book-row { display: flex; gap: 1.1rem; align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--line); }
.book-row:last-child { border-bottom: 1px solid var(--line); }
.book-row .wave { font-family: var(--font-mono); font-size: 0.72rem; color: var(--saffron); flex: none; width: 5.2rem; }
.book-row .t { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.book-row .a { color: var(--ink-soft); font-size: 0.9rem; }

/* ---------- home hero ---------- */

.hero--sky { max-width: var(--measure); margin: 4.5rem auto 0; padding: 0 1.25rem; }
.hero--sky h1 {
  display: flex; flex-direction: column; gap: 0.12em;
  font-size: clamp(2.4rem, 6.5vw, 3.9rem); font-weight: 700; letter-spacing: -0.015em; margin: 0;
}
.hero--sky h1 .and { font-weight: 500; font-size: 0.42em; color: var(--ink-soft); letter-spacing: 0.02em; }
.split-rule {
  height: 2px; width: 9.5ch; background: var(--ink-soft); opacity: 0.55; border: none; margin: 0.1em 0;
  animation: dissolve 2.6s ease-out 1.2s forwards; /* the split dissolves — once */
}
@keyframes dissolve { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .split-rule { animation: none; opacity: 0.12; } }
.hero--sky .sub { margin-top: 2rem; font-size: 1.06rem; }
.hero--sky .claim {
  margin-top: 2.8rem; font-family: var(--font-display); font-weight: 500;
  font-size: 1.3rem; line-height: 1.5;
}
.hero--sky .claim cite {
  display: block; margin-top: 0.6rem; font-family: var(--font-mono); font-style: normal;
  font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-soft);
}
.honest { margin-top: 2.4rem; color: var(--ink-soft); font-size: 0.94rem; }

/* home: the ladder overview */
.ladder-overview { max-width: var(--measure); margin: 3.5rem auto 0; padding: 0 1.25rem; }
.ladder-overview h2 { font-size: 1.15rem; margin: 0 0 1.2rem; }
.ladder-overview ol { list-style: none; margin: 0; padding: 0; counter-reset: rung -1; }
.ladder-overview li { counter-increment: rung; display: flex; gap: 1rem; align-items: baseline; padding: 0.55rem 0; }
.ladder-overview li::before {
  content: counter(rung); font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--saffron); flex: none; width: 1.2rem; text-align: right;
}
.ladder-overview a { font-family: var(--font-display); font-weight: 600; text-decoration: none; color: var(--ink); }
.ladder-overview a:hover { color: var(--saffron); }
.ladder-overview .one-liner { color: var(--ink-soft); font-size: 0.92rem; }

/* ---------- the ring ---------- */

/* an ensō: one brushed stroke, open at the upper right — drawn, never spun */
.ring { display: block; margin: 4.5rem auto 1.5rem; width: 38px; height: 38px; clear: both; }
.ring path { fill: var(--ink-soft); opacity: 0.55; }

/* ---------- scroll reveal (JS-gated; nothing hidden without JS) ---------- */

html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
html.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
}

/* ---------- colophon disclosure ---------- */

.colophon__disclosure {
  margin-top: 0.4rem; font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.02em; color: var(--ink-soft);
}