@layer reset, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-block-start: 6rem; }
  body, figure, h1, h2, h3, h4, h5, p { margin: 0; }
  button, input { font: inherit; }
  a, button { color: inherit; }
  svg { display: block; max-inline-size: 100%; }
  [hidden] { display: none !important; }
}

@layer base {
  :root { font-size: 100%; --paper: #f7f4ec; --ink: #263e32; --body: #3c423b; --muted: #696c61; --rule: #dcdcd0; --rust: #a34c33; --wash: #efeee3; --serif: Georgia, 'Times New Roman', serif; --sans: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
  body { background: var(--paper); color: var(--body); font-family: var(--serif); font-size: 1.125rem; line-height: 1.75; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
  ::selection { background: #dce3cd; color: var(--ink); }
  h1, h2, h3, h4, h5 { color: var(--ink); font-weight: 400; text-wrap: balance; overflow-wrap: anywhere; }
  h2 { font-size: 2.5rem; letter-spacing: -.035em; line-height: 1.15; }
  h3 { font-size: 1.65rem; line-height: 1.3; margin: 2em 0 .7em; letter-spacing: -.02em; }
  h4 { font-size: 1.4rem; line-height: 1.35; }
  h5 { font-size: 1.25rem; line-height: 1.4; }
  p + p { margin-block-start: 1em; }
  p { text-wrap: pretty; }
  strong { font-weight: 600; }
  :focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; }
  a, button, summary, input { -webkit-tap-highlight-color: #dce3cd; }
  a { text-underline-offset: .2em; }
  button, summary { cursor: pointer; }
  button:active, .primary-link:active { transform: translateY(1px); }
  .eyebrow, .diagram-tag { font: 500 1rem/1.6 var(--sans); letter-spacing: .08em; color: var(--muted); }
}

@layer layout {
  .masthead, main, .site-footer { max-inline-size: 90rem; margin-inline: auto; }
  .masthead { padding: 1.5rem 5%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; border-bottom: 1px solid var(--rule); }
  .hero { display: flex; flex-wrap: wrap; padding: 4rem 5%; gap: 2rem; align-items: center; }
  .hero-copy { flex: 1 1 24rem; min-inline-size: 0; }
  .hero h1 { font-size: 3.5rem; max-inline-size: 11ch; letter-spacing: -.045em; line-height: 1.06; margin-block-start: .5em; }
  .hero h1 em { color: var(--rust); font-weight: 400; }
  .hero-deck { font-size: 1.5rem; color: var(--ink); line-height: 1.4; margin-block-start: 1.25em; }
  .hero-description { font: 1rem/1.85 var(--sans); color: var(--muted); max-inline-size: 40ch; margin-block-start: 1rem; }
  .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; margin-block-start: 2rem; }
  .hero-art { flex: 1 1 24rem; min-inline-size: 0; max-inline-size: 34rem; margin-inline: auto; color: var(--ink); }
  .hero-art svg { inline-size: 100%; }
  .opening-note { margin-inline: 5%; border-block: 1px solid var(--rule); padding-block: 2rem; display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: center; }
  .opening-note > * { flex: 1 1 17rem; }
  .opening-note > p:nth-child(2) { flex-grow: 2; font-size: 1.5rem; line-height: 1.55; color: var(--ink); margin: 0; }
  .opening-note > p:nth-child(2) em { font-style: normal; }
  .opening-note > span { font: 1rem/1.85 var(--sans); color: var(--muted); }
  .reading-layout { padding: 3rem 5% 0; }
  .contents { font-family: var(--sans); margin-block-end: 2rem; }
  .essay { min-inline-size: 0; max-inline-size: 64ch; margin-inline: auto; }
  .chapter { margin-block-start: 3.5rem; padding-block-end: 3.5rem; border-bottom: 1px solid var(--rule); scroll-margin-block-start: 1rem; }
  .chapter-heading { margin-block-end: 2rem; }
  .chapter-heading .eyebrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1.5rem; margin-block-end: 1rem; text-transform: uppercase; }
  .chapter-heading .video-time { letter-spacing: 0; }
  .chapter-summary { font-size: 1.3rem; line-height: 1.6; color: var(--muted); margin-block-start: 1em; }
  .chapter-body > p, .source > p { margin-block-end: 1em; }
  .chapter-body > ul, .chapter-body > ol { padding-inline-start: 1.5em; }
  .chapter-body li + li { margin-block-start: .75em; }
  .site-footer { padding: 2rem 5%; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; border-top: 1px solid var(--rule); font: 1rem/1.7 var(--sans); }
  .site-footer p { max-inline-size: 42ch; color: var(--muted); }
}

@layer components {
  .skip-link { position: fixed; inset-block-start: -10rem; inset-inline-start: 1rem; z-index: 20; padding: .5em 1em; background: var(--ink); color: var(--paper); }
  .skip-link:focus { inset-block-start: .5rem; }
  .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .reading-progress { position: fixed; inset: 0 0 auto; block-size: 3px; z-index: 15; pointer-events: none; }
  .reading-progress span { display: block; inline-size: 100%; block-size: 100%; background: var(--rust); transform: scaleX(0); transform-origin: left; }
  .wordmark { display: flex; gap: .6em; align-items: center; font: 600 1rem/1.4 var(--sans); letter-spacing: .08em; color: var(--ink); text-decoration: none; }
  .wordmark svg { flex: 0 0 1.6rem; inline-size: 1.6rem; block-size: 1.9rem; stroke: currentColor; fill: none; stroke-width: 1.3; }
  .masthead-note { font: italic 1rem var(--serif); color: var(--muted); }
  .search-trigger { display: flex; align-items: center; gap: .6em; padding: .6em 0; background: none; border: 0; font: 1rem var(--sans); }
  .search-trigger svg { inline-size: 1.2em; block-size: 1.2em; stroke: currentColor; stroke-width: 1.5; fill: none; }
  .search-trigger kbd { padding: .2em .5em; border: 1px solid var(--rule); border-radius: .2em; font: inherit; color: var(--muted); }
  .small-rule { display: inline-block; inline-size: 1.5em; block-size: 1px; background: var(--rust); vertical-align: middle; margin-inline-end: .5em; }
  .primary-link { display: inline-flex; gap: 1.5em; align-items: center; background: var(--ink); color: var(--paper); padding: .85em 1.1em; text-decoration: none; font: 1rem/1.6 var(--sans); }
  .primary-link > span[aria-hidden] { font-size: 1.25em; }
  .reading-estimate { color: var(--muted); font: 1rem/1.6 var(--sans); }
  .reading-estimate span { padding-inline: .3em; }
  .art-orbit { stroke: #a8ae97; stroke-width: .7; }
  .art-sun { stroke: var(--rust); stroke-width: .9; }
  .art-clouds { stroke: #9ba28e; stroke-width: .6; }
  .art-city { stroke: #7c8572; stroke-width: .8; }
  .art-stair-fill { color: #a9ad97; }
  .art-stairs, .art-earth { stroke: var(--ink); stroke-width: .9; }
  .art-person { fill: var(--ink); stroke: var(--ink); }
  .art-axis { stroke: var(--rust); stroke-width: .9; }
  .hero-art figcaption { font: 1rem/1.6 var(--sans); color: var(--muted); text-align: center; }
  .contents summary { font-size: 1rem; letter-spacing: .08em; color: var(--ink); padding-block-end: 1rem; border-bottom: 1px solid var(--rule); }
  .chapter-links { padding-block: 1rem; }
  .chapter-links a { display: grid; grid-template-columns: 2ch 1fr; gap: 1em; padding: .75em .5em; color: var(--muted); text-decoration: none; font: 1rem/1.6 var(--sans); }
  .chapter-links a[aria-current="location"] { color: var(--ink); background: var(--wash); box-shadow: inset 3px 0 var(--rust); }
  .nav-number { color: var(--rust); font-variant-numeric: tabular-nums; }
  .contents-foot { padding-block-start: 1rem; border-top: 1px solid var(--rule); display: grid; gap: .5rem; }
  .contents-foot a { font: 1rem/1.6 var(--sans); color: var(--muted); padding-block: .5em; }
  .reading-position { font: italic 1rem/1.8 var(--serif); color: var(--muted); margin-block-start: 2rem; }
  .reader-toolbar { position: sticky; inset-block-start: 0; z-index: 10; background: var(--paper); padding-block: .65rem; border-block-end: 1px solid var(--rule); margin-block-end: 1.5rem; }
  .chapter-trigger { display: flex; align-items: center; justify-content: space-between; gap: 1rem; inline-size: 100%; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); padding: .7em 1em; font: 1rem/1.5 var(--sans); }
  .chapter-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-block-start: 2.5rem; padding-block-start: 1.5rem; border-top: 1px solid var(--rule); }
  .chapter-pagination a { flex: 1 1 13rem; color: var(--ink); font: 1rem/1.6 var(--sans); padding-block: .5em; text-decoration: none; }
  .chapter-pagination a[rel="next"] { text-align: end; }
  .chapter-pagination span { display: block; color: var(--rust); margin-block-end: .3em; }
  .editor-note { display: flex; gap: 1rem; align-items: start; padding-block-end: 2rem; border-bottom: 1px solid var(--rule); font: 1rem/1.85 var(--sans); color: var(--muted); }
  .editor-note strong { color: var(--ink); font-weight: 500; }
  .note-symbol { flex: 0 0 1.4em; border: 1px solid #adb29f; text-align: center; border-radius: 50%; font-style: italic; line-height: 1.4; }
  .story { padding: 1.5rem; background: var(--wash); margin-block: 2rem; }
  .story-label { font: 1rem/1.5 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--rust); margin-block-end: .75rem; }
  .story h4 { margin-block-end: .75em; }
  .story p:not(.story-label) { font-size: 1.125rem; }
  .definition { font: 1rem/1.9 var(--sans); color: var(--muted); margin-block: 1.5rem !important; padding-block: 1rem; border-block: 1px solid var(--rule); }
  .definition strong { color: var(--ink); }
  .audience-question { padding-block: 2rem; border-bottom: 1px solid var(--rule); scroll-margin-block-start: 1rem; }
  .audience-question:last-child { border-bottom: 0; padding-block-end: 0; }
  .audience-question h3 { margin-block-start: .75em; }
  .audience-question > .eyebrow { color: var(--rust); }
  .audience-question > p { margin-block-end: 1em; }
  .diagram { margin-block: 2.5rem; padding-block: 1.5rem; border-block: 1px solid #bfc6b2; }
  .diagram-heading { margin-block-end: 1.5rem; }
  .diagram-heading .eyebrow { color: var(--rust); margin-block-end: .75em; }
  .diagram figcaption { font: 1rem/1.85 var(--sans); color: var(--muted); margin-block-start: 1.5rem; }
  .two-directions, .paired-notes, .wisdom-comparison { display: flex; flex-wrap: wrap; gap: 1.5rem; }
  .two-directions > *, .paired-notes > *, .wisdom-comparison > * { flex: 1 1 16rem; min-inline-size: 0; }
  .direction { padding: 1.5rem; border: 1px solid var(--rule); background: var(--wash); }
  .direction h5 { margin-block-end: .75em; }
  .direction p { font: 1rem/1.8 var(--sans); }
  .direction .example-question { color: var(--rust); font: italic 1.25rem/1.5 var(--serif); margin-block-end: 1em; }
  .direction .example-label { font: 1rem/1.6 var(--sans); color: var(--muted); margin-block: 1.5em .5em; }
  .flow { display: grid; grid-template-columns: 1fr; list-style: none; padding: 0; gap: 2rem; margin-block: 2rem; font: 1rem/1.6 var(--sans); }
  .flow li { min-inline-size: 0; margin: 0 !important; position: relative; padding: 1rem; border: 1px solid var(--rule); }
  .flow li:not(:last-child)::after { content: '↓'; position: absolute; inset-inline-start: 1rem; inset-block-end: -1.9rem; color: var(--rust); }
  .flow strong, .flow li > span { display: block; }
  .flow strong { font-size: 1.125rem; color: var(--ink); margin-block: .5em .3em; font-weight: 500; }
  .flow li > span { color: var(--muted); }
  .flow .node-index { color: var(--rust); font: italic 1.65rem var(--serif); }
  .paired-notes { border-top: 1px solid var(--rule); padding-block-start: 1rem; }
  .paired-notes p { font: 1rem/1.8 var(--sans); margin-block-start: .5em; }
  .authority-row { display: grid; grid-template-columns: 1fr; gap: .5rem; padding-block: 1.5rem; font-family: var(--sans); }
  .authority-row + .authority-row { border-top: 1px solid var(--rule); }
  .authority-row strong { color: var(--ink); font-size: 1.125rem; font-weight: 500; display: block; }
  .authority-row div span { color: var(--muted); font-size: 1rem; }
  .connector { font-size: 1.4rem; color: var(--rust); transform: rotate(90deg); inline-size: 1em; }
  .reversed strong { color: var(--rust); }
  .flow .ripple-circle { display: grid; place-items: center; inline-size: 2.5em; block-size: 2.5em; border: 1px solid #a2ad94; border-radius: 50%; color: var(--ink); font: italic 1.25rem var(--serif); }
  .loop-return { font: italic 1.125rem/1.7 var(--serif); color: var(--rust); }
  .loop-return > span { margin-inline-end: .5em; }
  .wisdom-comparison > div { border-top: 1px solid var(--rule); padding-block-start: 1rem; }
  .wisdom-comparison .diagram-tag { margin-block-end: 1em; }
  .comparison-formula { font-size: 1.25rem; color: var(--ink); }
  .comparison-formula span { display: block; color: var(--muted); }
  .outcome-arrow { color: var(--rust); display: block; margin-block: .75em; }
  .wisdom-comparison strong { font: 1rem/1.7 var(--sans); color: var(--ink); }
  .diagram.is-visible .node-index, .diagram.is-visible .ripple-circle { animation: appear .6s ease-out both; }
  @keyframes appear { from { opacity: .25; transform: translateY(.3rem); } to { opacity: 1; transform: none; } }
  dl { margin-block: 0; }
  dl > div { padding-block: 1.25rem; border-bottom: 1px solid var(--rule); }
  dl > div:last-child { border: 0; }
  dt { font-size: 1.25rem; color: var(--ink); }
  dd { margin: .5em 0 0; font: 1rem/1.9 var(--sans); color: var(--muted); }
  .video-time { display: inline-block; color: var(--rust); text-decoration: underline; padding-block: .35em; font-variant-numeric: tabular-nums; }
  .video-source { margin-block-start: .75em; }
  .closing-note { text-align: center; padding-block: 4rem; }
  .closing-mark { font-size: 1.75rem; color: var(--rust); }
  .closing-note p { margin-block: 1em .5em; font-size: 2rem; line-height: 1.35; color: var(--ink); letter-spacing: -.025em; }
  .closing-note > span:not(.closing-mark) { color: var(--muted); font: italic 1rem/1.7 var(--serif); }
  .closing-note a { display: block; margin-block-start: 2rem; font: 1rem/1.7 var(--sans); color: var(--muted); }
  .search-dialog { inline-size: min(42rem, calc(100% - 2rem)); max-block-size: calc(100dvh - 2rem); background: var(--paper); border: 1px solid #bfc6b2; padding: 1.5rem; color: var(--body); margin: auto; }
  dialog::backdrop { background: #17281cd1; }
  html:has(dialog[open]) { overflow: hidden; }
  .search-header, .chapters-header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
  .search-header h2, .chapters-header h2 { font-size: 2rem; }
  .search-header button, .chapters-header button { border: 1px solid var(--rule); background: transparent; font: 1rem/1.5 var(--sans); padding: .7em; }
  .search-dialog label { font: 1rem/1.6 var(--sans); color: var(--muted); display: block; margin-block-start: 1.5rem; }
  #search-input { inline-size: 100%; border: 0; border-bottom: 1px solid #a2ad94; border-radius: 0; background: transparent; padding-block: 1em; font: 1.125rem var(--serif); color: var(--ink); margin-block-start: .5em; }
  #search-status { font: 1rem/1.8 var(--sans); color: var(--muted); margin-block-start: 1em; }
  #search-results { list-style: none; padding: 0; margin-block: 1rem; }
  #search-results li + li { border-top: 1px solid var(--rule); }
  #search-results a { display: block; padding-block: 1em; text-decoration: none; }
  #search-results strong { display: block; color: var(--ink); font-size: 1.25rem; font-weight: 400; }
  #search-results p { margin-block-start: .5em; color: var(--muted); font: 1rem/1.7 var(--sans); }
  #search-results mark { background: #e0e4d0; color: var(--ink); }
  .search-hint { color: var(--muted); font: 1rem/1.6 var(--sans); border-top: 1px solid var(--rule); padding-block-start: 1em; }
  .search-hint span { padding-inline: .5em; }
  .chapters-dialog { inset: 0; margin: 0; inline-size: 100%; max-inline-size: none; block-size: 100dvh; max-block-size: none; padding: 0; border: 0; background: var(--paper); color: var(--ink); }
  .chapters-dialog[open] { display: flex; flex-direction: column; }
  .chapters-header { flex-wrap: wrap; align-items: center; gap: .5rem; padding: 1rem 5%; border-bottom: 1px solid var(--rule); }
  .chapters-header h2 { font-size: 1.5rem; }
  .chapters-header button { flex-shrink: 0; white-space: nowrap; padding: .5em .75em; }
  .chapters-scroll { overflow-y: auto; min-block-size: 0; padding: 0 5% 2rem; }
  .chapters-dialog .chapter-links { max-inline-size: 50rem; margin-inline: auto; }
  .chapters-dialog .contents-foot { max-inline-size: 50rem; margin-inline: auto; }
  @media (hover: hover) {
    .chapter-links a:hover, .chapter-trigger:hover, .chapter-pagination a:hover { background: var(--wash); color: var(--rust); }
    .contents-foot a:hover, .site-footer a:hover, .search-trigger:hover { color: var(--rust); }
    .primary-link:hover { background: #405d49; }
    #search-results a:hover { background: var(--wash); }
    .video-time:hover { color: var(--ink); }
  }
}

@layer responsive {
  .js .contents { display: none; }
  @media (min-width: 75em) {
    html { scroll-padding-block-start: 1rem; }
    .reading-layout { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: 4rem; align-items: start; }
    .contents, .js .contents { display: block; }
    .reader-toolbar { display: none; }
  }
  @media (min-width: 75em) and (min-height: 40em) {
    .contents { position: sticky; inset-block-start: 1rem; max-block-size: calc(100dvh - 2rem); overflow-y: auto; padding: .25rem; }
  }
  @media (max-height: 30em) {
    html { scroll-padding-block-start: 0; }
    .reader-toolbar { position: static; }
  }
  @media (min-width: 42em) {
    .flow.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .flow.three li:not(:last-child)::after { content: '→'; inset-inline-start: auto; inset-inline-end: -1.7rem; inset-block-end: 45%; }
    .authority-row { grid-template-columns: 1fr auto 1fr; gap: 1rem; }
    .authority-row .diagram-tag { grid-column: 1/-1; }
    .connector { transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
  @media print {
    :root { font-size: 11pt; }
    body { background: white; color: black; }
    .masthead, .contents, .reader-toolbar, dialog, .reading-progress, .hero-actions, .hero-art, .site-footer, .closing-note a, .chapter-pagination { display: none !important; }
    .hero, .reading-layout, .opening-note { display: block; padding: 0; }
    .hero h1 { font-size: 3rem; }
    .hero { margin-block-end: 2rem; }
    .hero-deck { font-size: 1.5rem; }
    .opening-note { margin: 0 0 2rem; padding-block: 1rem; }
    .chapter { padding-block: 1.5rem; }
    .chapter-heading { break-inside: avoid; }
    .essay h2, .essay h3, .essay h4 { break-after: avoid; }
  }
}