/* module.css — Path of Sitting. Shared by all module and content
   pages. Requires shared.css first. The homepage's two-column layout
   is .band-grid (index.css), named differently from .band here so
   the sheets can't collide. Retired styles live in _dev/_graveyard.css. */

:root {
  /* --pad defined in shared.css */
  --content-max: 1280px;
  --axis-bar-size: 56px;
}

/* ── Body override for module pages ─────────────────────────── */
body {
  line-height: 1.85;
}


/* ── Page wrapper ────────────────────────────────────────────── */
.page {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--pad) 160px;
}
/* Reading pages keep their lines near 65 characters by narrowing the
   whole page — title, rules and text together — to a centred column,
   so no side is left empty: .reading for sections with labels,
   .reading-single for one unlabelled column (a letter). Phones are
   narrower than either, so this is desktop only. */
.page.reading        { max-width: 940px; }
.page.reading-single { max-width: 720px; }
/* The narrower columns take a title a size or two down from the full
   125px, so a title stays on one line on a computer — with room to
   spare, since Safari sets the display face a little wider than
   Chrome. Desktop only: phones keep module.css's own title size. */
@media (min-width: 769px) {
  .page.reading .book-title        { font-size: clamp(64px, 8vw, 100px); }
  .page.reading-single .book-title { font-size: clamp(52px, 7vw, 84px); }
  .page.stage .book-title          { font-size: clamp(52px, 7vw, 92px); }
}

/* ── Stage — a page with one thing to do (contact, newsletter,
   support), laid out like the Sit page: centred, the title and a line,
   then the one act, with no labels or rules between. ────────────── */
/* 840px holds the longest stage title (Meditation retreat) on one
   line on a computer; its text keeps to --measure inside. */
.page.stage {
  max-width: 840px;
  text-align: center;
}
/* A short stage fills the screen and sits centred between nav and
   footer, so the space left over isn't read as footer (as status.css).
   The bottom padding matches the title's 60px top margin. */
body.stage {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.stage .page.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 60px;
}
.page.stage .book-hero {
  align-items: center;
  border-bottom: none;
  padding-bottom: 52px;
}
/* balance: a two-line title splits evenly, not with one word left
   alone on the second line. */
.page.stage .book-title { text-wrap: balance; }
/* A hero with no intro: the body takes the intro's place, the same
   distance under the title. */
.page.stage .book-hero:has(> .book-title:only-child) { padding-bottom: 0; }
.page.stage .book-intro { max-width: 30em; }
.stage-body p + p { margin-top: 1.2em; }
.stage-prose {
  max-width: var(--measure);
  margin-inline: auto;
  font-family: var(--sans);
  font-size: var(--body-size);
  line-height: 1.9;
  color: var(--text);
}
.stage-prose p { text-wrap: pretty; }
/* A closing section: a small gold label, then its lines. */
.stage-end {
  margin-top: 64px;
  font-family: var(--sans);
  font-size: var(--body-size);
  line-height: 1.9;
  color: var(--text);
}
/* The page turns from giving to the real support: a short gold rule
   marks the turn. */
.stage-end::before {
  content: '';
  display: block;
  width: 72px;
  height: 1px;
  margin: 0 auto 56px;
  background: linear-gradient(90deg, transparent, var(--accent-mark), transparent);
  opacity: 0.35;
}
.stage-end p { text-wrap: balance; }
.stage-end p + p { margin-top: 1.2em; }
.stage-end-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-label);
  margin-bottom: 20px;
}
.stage-end em { color: var(--accent-bright); font-style: italic; }

/* Inside .page, book-hero inherits padding from .page — reset its own */
.page .book-hero {
  padding-left: 0;
  padding-right: 0;
}

/* ── Module intro (the threefold-form gloss) ─────────────────── */
.module-intro {
  padding: 52px 0 60px;
  border-bottom: 1px solid var(--border);
}

.module-intro-lead {
  font-family: var(--sans);
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.9;
  color: var(--muted);
  margin-bottom: 40px;
}

/* ── Form parts (3-column descriptor grid) ───────────────────── */
.form-parts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.form-part {
  padding: 28px 32px 28px 28px;
  border-left: 1px solid var(--border);
}
.form-part:first-child {
  border-left: none;
  padding-left: 0;
}

.form-part-label {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-label);
  margin-bottom: 12px;
}

.form-part-desc {
  font-family: var(--sans);
  font-size: clamp(13px, 1.2vw, 14px);
  line-height: 1.85;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 600px) {
  .form-parts { grid-template-columns: 1fr; }
  .form-part {
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 24px 0;
  }
  .form-part:first-child { border-top: none; padding-top: 0; }
}


/* ── Content bands — label left, content right, matching the
   homepage's band-grid. ──────────────────────────────────────── */
.band {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 0 clamp(32px, 5vw, 60px);
  align-items: start;
  padding: 64px 0;
  border-bottom: 1px solid var(--border);
}

.band[id] { scroll-margin-top: 0; }
.band:last-child { border-bottom: none; }
/* A band with no label — its content spans the full width. */
.band > .band-content:first-child { grid-column: 1 / -1; }

.band-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-label);
  padding-top: 6px;
  position: sticky;
  top: 40px;
}

.band-content {
  min-width: 0;  /* a fixed-width child (the tldr) may not widen the grid column */
  max-width: var(--measure);
  font-family: var(--sans);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.9;
  color: var(--text);
}
.band-content p + p                       { margin-top: 1.5em; }
.band-content p + .form-parts             { margin-top: 1.5em; }
.band-content .form-parts + p             { margin-top: 1.5em; }
.band-content .form-parts + .form-parts   { margin-top: 1.5em; }
.band-content em     { font-style: italic; color: var(--accent-bright); }

/* ── Koan blocks ─────────────────────────────────────────────── */
.koan[id] { scroll-margin-top: 110px; }

.koan {
  padding: 64px 0 60px;
  border-bottom: 1px solid var(--border);
}
.koan:last-child { border-bottom: none; }

.koan-header {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 40px;
}

.koan-num {
  font-family: var(--display);
  font-style: italic;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--accent-label);
  line-height: 1;
  flex-shrink: 0;
}

.koan-title {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}

.koan-rule {
  flex: 1;
  height: 1px;
  background: var(--border);
  position: relative;
  top: -3px;
}

.koan-statement {
  max-width: var(--measure);
  font-family: var(--sans);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 56px;
}

.koan-record,
.koan-commentary {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 0 32px;
}

.koan-record {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px dashed var(--border);
}

.koan-record-label,
.koan-commentary-label {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: var(--dim-text);
  padding-top: 4px;
  line-height: 1.5;
}

.koan-record-body,
.koan-commentary-body {
  max-width: var(--measure);
  font-family: var(--sans);
  font-size: clamp(13px, 1.2vw, 14px);
  line-height: 1.9;
  color: var(--muted);
}

.koan-record-body cite {
  display: block;
  margin-top: 12px;
  font-family: var(--read);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.04em;
  /* No dim: --accent2 carries its own contrast (see shared.css). The
     citation is the Record's source — it has to stay readable. */
  color: var(--accent2);
}

.koan-commentary-body p + p {
  margin-top: 1.2em;
}
.koan-record-body p + p {
  margin-top: 1.2em;
}

/* The named line — where the comment lands on what the thinker named
   ("The Forms. The Good.") — rises in bright gold. */
.koan-record-body em,
.koan-commentary-body em {
  font-style: italic;
  color: var(--accent-bright);
}

@media (max-width: 600px) {
  .koan-record,
  .koan-commentary    { grid-template-columns: 1fr; gap: 8px 0; }
  .koan-record-label,
  .koan-commentary-label { padding-top: 0; margin-bottom: 6px; }
  .koan-record        { padding-bottom: 24px; margin-bottom: 24px; }
}

/* ── Reflection questions ────────────────────────────────────── */
.questions {
  padding: 90px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid var(--border);
}

.questions-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-label);
  margin-bottom: 40px;
}

.questions-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.question {
  font-family: var(--sans);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.question:last-child { border-bottom: none; }

/* ── TLDR timeline ───────────────────────────────────────────────
   Numbered rings on one thread, the words beside them. Where the
   steps from 4 on repeat (.tldr-loop), a bracket on the left runs from
   the last ring back up to ring 4. Each step draws its own piece of
   thread and bracket, so both hold when words wrap.
   --tl-ring: the ring's left edge. The thread's x is its centre. */
.tldr-steps,
.tldr-repeat {
  --tl-ring: 40px;
  --tl-words: calc(var(--tl-ring) + 28px + 12px);  /* ring, then its gap */
  --tl-gap: 24px;
  box-sizing: border-box;
  width: 400px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.tldr-steps {
  --ring-bg: var(--bg);
  list-style: none;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  counter-reset: step;
}
.tldr-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: var(--tl-gap);
  font-family: var(--sans);
  font-size: clamp(15px, 4vw, 17px);  /* each step holds one line from 375px */
  font-weight: 400;
  line-height: 1.35;
  color: var(--text);
  text-wrap: balance;
  counter-increment: step;
  background:
    linear-gradient(var(--thread), var(--thread))
    calc(var(--tl-ring) + 13.5px) 0 / 1px 100% no-repeat;
}
/* The thread runs from ring 1's centre to the last ring's. */
.tldr-steps li:first-child {
  background-position: calc(var(--tl-ring) + 13.5px) 100%;
  background-size: 1px calc(50% + var(--tl-gap) / 2);
}
/* The last step's thread and bracket end at its ring's centre: 14px
   down, however its words wrap. */
.tldr-steps li:last-child {
  flex-wrap: wrap;
  row-gap: 2px;
  padding-bottom: 0;
  background-size: 1px 14px;
}
.tldr-steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-left: var(--tl-ring);
  border: 1px solid var(--thread);
  border-radius: 50%;
  background: var(--ring-bg);
  font-size: 13.5px;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  /* Newsreader's digits ride 2.2px above the middle of their line box
     (measured); the padding brings the ink to the ring's centre. */
  padding-top: 4.4px;
  color: var(--accent);
}

/* The loop (.tldr-loop, How to Sit's steps): up the left from the
   last ring to ring 4, ending in a chevron that points into ring 4.
   Corners are 24px. The last step's piece starts a gap above itself,
   overlapping the one before, so a corner never outgrows its run. */
.tldr-loop li:nth-child(n+4)::after {
  content: "";
  position: absolute;
  left: 0;
  width: var(--tl-ring);
  border-left: 1px solid var(--thread);
  box-sizing: border-box;
}
.tldr-loop li:nth-child(4)::after {   /* from ring 4's centre, down */
  top: calc(50% - var(--tl-gap) / 2);
  bottom: 0;
  border-top: 1px solid var(--thread);
  border-top-left-radius: 24px;
}
.tldr-loop li:nth-child(n+5):not(:last-child)::after {   /* straight */
  top: 0;
  bottom: var(--tl-gap);
  width: 0;
}
.tldr-loop li:nth-child(n+5):last-child::after {   /* up from its ring */
  top: calc(-1 * var(--tl-gap));
  height: calc(var(--tl-gap) + 14px);
  border-bottom: 1px solid var(--thread);
  border-bottom-left-radius: 24px;
}
.tldr-loop li:nth-child(4) {
  background-image:
    linear-gradient(to top right, transparent calc(50% - 0.7px), var(--accent) calc(50% - 0.7px), var(--accent) calc(50% + 0.7px), transparent calc(50% + 0.7px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.7px), var(--accent) calc(50% - 0.7px), var(--accent) calc(50% + 0.7px), transparent calc(50% + 0.7px)),
    linear-gradient(var(--thread), var(--thread));
  background-position:
    calc(var(--tl-ring) - 9px) calc(50% - 14.5px),
    calc(var(--tl-ring) - 9px) calc(50% - 9.5px),
    calc(var(--tl-ring) + 13.5px) 0;
  background-size: 5px 5px, 5px 5px, 1px 100%;
  background-repeat: no-repeat;
}

.tldr-repeat {
  font-family: var(--sans);
  font-size: clamp(13px, 1.15vw, 14px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--accent);
  padding-left: var(--tl-words);
  margin-top: 38px;
  margin-bottom: 0;
}


/* ── Posture sub-list (floor seating options) ────────────────── */
.positions-sub {
  padding-left: 28px;
  border-left: 1px solid var(--border);
  margin: 6px 0 10px;
}
.positions-sub p + p { margin-top: 0.85em; }

/* ── Care note (path.html) — said beside the practice, not as
   part of it. Muted, never dimmed: it has to stay easy to read. ── */
.care-note {
  font-family: var(--sans);
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.9;
  color: var(--muted);
  border-left: 1px solid var(--border);
  padding-left: 20px;
  margin: 2.2em 0;
}
.care-note p + p { margin-top: 1em; }

/* ── Sources — back-matter for a synthesis page woven from whole
   books, not single passages, so it names them once at the foot
   rather than per-Record like a koan. ────────────────────────── */
.book-sources {
  margin-top: 96px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.book-sources-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-label);
  margin: 0 0 20px;
}

.book-sources cite {
  display: block;
  max-width: var(--measure);
  font-family: var(--read);
  font-style: italic;
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--accent2);
}

/* ── Vertical border lines ───────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--content-max), 100%);
  border-left:  1px solid var(--border);
  border-right: 1px solid var(--border);
  pointer-events: none;
  z-index: 85;
}

/* footer, .footer-updated, .footer-links → shared.css */

/* ── Axis timeline (self.html only) — tracks position across the
   story. Below 1700px (see the breakpoint further down): a dots-only
   bar along the bottom, reserving its own height via body.has-axis-bar
   rather than asking .page for space. Past 1700px it becomes a right
   rail that lives inside .page's existing margin beyond --content-max,
   so normal page margins stay untouched at every width. Populated and
   scroll-spied by js/axis-timeline.js from the page's own .band
   elements (short name from [data-axis-label] or .band-label-name,
   full text otherwise), so the eras can't drift out of sync. One gold
   thread: hollow = ahead, filled = passed, filled + bright + bold =
   here. */
body.has-axis-bar { padding-bottom: calc(var(--axis-bar-size) + var(--bar-h)); }

.axis-bar {
  position: fixed;
  left: 0; right: 0; bottom: var(--bar-h);
  z-index: 900;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 10px var(--pad, clamp(24px, 5vw, 80px)) calc(10px + env(safe-area-inset-bottom));
  /* iOS Safari's bottom toolbar collapses/expands as you scroll; mid-
     animation a strip opens between the bar's edge and the true screen
     edge, showing scrolled page text through it and the toolbar's own
     translucency. A solid, blurless shadow extends the bar's own
     background past its box to pre-paint that strip. */
  box-shadow: 0 100px 0 0 var(--bg);
}

.axis-current {
  display: block;
  max-width: var(--content-max);
  margin: 0 auto 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.axis-track {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

.axis-track::before,
.axis-fill {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  height: 1px;
  transform: translateY(-50%);
}
.axis-track::before { right: 0; background: var(--border); }
.axis-fill { width: calc(var(--axis-progress, 0) * 1%); background: var(--accent-mark); }

.axis-link {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  text-decoration: none;
}
.axis-link::before {
  content: '';
  justify-self: center;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--muted);
  opacity: 0.6;
  transition: background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.axis-link.is-past::before,
.axis-link.is-current::before {
  background: var(--accent-mark);
  border-color: var(--accent-mark);
  opacity: 1;
}
.axis-link.is-current::before { background: var(--accent-bright); border-color: var(--accent-bright); }

.axis-label { display: none; }
.axis-link.is-past .axis-label    { color: var(--accent2); opacity: 1; }
.axis-link.is-current .axis-label { color: var(--accent-bright); opacity: 1; font-weight: 700; }

@media (hover: hover) {
  .axis-link:hover::before { border-color: var(--accent-mark); }
  .axis-link:hover .axis-label { color: var(--accent-label); opacity: 1; }
}

/* Wide desktop: the side rail. 1700px is where .page's existing
   margin beyond --content-max — (100vw - content-max) / 2 — first
   reaches the rail's minimum width (210px); below that the bottom bar
   stays put rather than squeezing .page. Above it the rail's width
   tracks that same margin (capped at 270px on very wide monitors), so
   it sits flush against the reading column without taking space from
   it. */
@media (min-width: 1700px) {
  :root { --axis-bar-size: clamp(210px, calc((100vw - var(--content-max)) / 2), 270px); }
  body.has-axis-bar { padding-bottom: 0; }

  .axis-bar {
    top: 0; left: auto; right: 0; bottom: 0;
    width: var(--axis-bar-size);
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-top: none;
    border-left: 1px solid var(--border);
    padding: 40px 26px;
  }

  .axis-current { display: none; }

  .axis-track {
    flex-direction: column;
    max-width: none;
    max-height: 620px;
    margin: 0;
  }
  .axis-track::before,
  .axis-fill {
    top: 0; left: 10px; right: auto;
    width: 1px; height: auto;
    transform: none;
  }
  .axis-track::before { bottom: 0; }
  .axis-fill { height: calc(var(--axis-progress, 0) * 1%); }

  .axis-link {
    display: grid;
    grid-template-columns: 20px 1fr;
    justify-content: normal;
    column-gap: 12px;
    height: auto;
    min-height: 40px;
  }

  .axis-label {
    display: block;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: var(--dim-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease, opacity 0.3s ease;
  }
}

/* ── Band title panel (Matter/Life/Body/Mind/History only) — label
   plus a single anchoring date, big enough to read while the band's
   content scrolls past beside it (sticky on desktop). The 8 named
   eras keep the plain text label since their date is a range, which
   doesn't reduce to one figure. */
.band-label-name { display: block; }
.band-label-number {
  display: block;
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  line-height: 1.1;
  margin-top: 14px;
}
.band-label-unit {
  display: block;
  font-family: var(--read);
  font-style: italic;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--accent-bright);
  margin-top: 2px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --pad: 24px; }
  .book-title { font-size: clamp(52px, 14vw, 80px); }
  /* Bands close to a single column — label on top, content below. */
  .band { grid-template-columns: 1fr; gap: 14px 0; }
  .band-label { position: static; top: auto; padding-top: 0; }
}