/* A quiet reading surface with the content setting the rhythm. */
:root {
  color-scheme: dark;
  --canvas: #553f83;
  --depth: #111111;
  --ink: #ffffff;
  --positive: #16a34a;
  --caution: #d97706;
  --error: #dc2626;
  --line: rgba(255, 255, 255, .48);
  --reading-type: 'Palatino Linotype', 'Book Antiqua', Palatino, 'Iowan Old Style', Georgia, serif;
  --guide-type: Optima, Candara, 'Segoe UI', 'Trebuchet MS', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 2rem; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--reading-type);
  font-size: 20px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}
a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: .45rem .15rem;
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: .24em;
  overflow-wrap: anywhere;
}
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
::selection { background: var(--ink); color: var(--depth); }
.skip-link {
  position: fixed;
  z-index: 5;
  top: 1rem;
  left: 1rem;
  padding: .75rem 1rem;
  background: var(--depth);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }
.guide-header, main, .guide-footer { max-width: 1240px; margin: 0 auto; }
.guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 1.7rem 2rem 1.4rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--guide-type);
}
.guide-name { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; line-height: 1.4; }
.guide-name span:first-child { font-size: 22px; font-weight: 700; }
.guide-name span:last-child { font-size: 16px; }
.page-rail { display: flex; flex-wrap: wrap; column-gap: 1.15rem; font-size: 16px; }
.page-rail a { min-height: 48px; padding: .5rem .4rem; text-decoration: none; border-bottom: 2px solid transparent; }
.page-rail a[aria-current='page'] { border-color: var(--ink); font-weight: 700; }
.page-rail a:hover { border-color: var(--line); }
.opening {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: end;
  gap: 4rem;
  padding: 4.7rem 2rem 4.9rem;
}
.opening-copy { min-width: 0; }
.guide-label, .conversation-label, .date-note {
  font-family: var(--guide-type);
  font-size: 16px;
  line-height: 1.5;
}
.guide-label { margin: 0 0 1.7rem; }
h1, h2, h3 { line-height: 1.12; font-weight: 600; }
h1 { margin: 0; font-size: 68px; letter-spacing: -.042em; }
.home-opening h1 { font-size: 76px; }
h1 em { font-weight: 400; }
.opening-lead { max-width: 46ch; margin: 1.9rem 0 0; }
h2 { font-size: 38px; letter-spacing: -.025em; max-width: 24ch; margin: 0 0 1.5rem; }
h3 { font-size: 27px; margin: 2rem 0 .75rem; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
.conversation {
  background: var(--depth);
  padding: 2rem;
  border-top: 4px solid var(--positive);
  margin: 2rem 0;
  font-size: 20px;
}
.opening > .conversation { margin: 0; }
.conversation-label { margin: 0 0 1.1rem; }
.conversation h3 { font-size: 29px; margin: 0 0 1.1rem; }
.conversation p { max-width: 64ch; }
.conversation.urgent { border-color: var(--error); }
.reading-layout {
  display: grid;
  grid-template-columns: 215px minmax(0, 1fr);
  gap: 4rem;
  padding: 0 2rem 5rem;
  align-items: start;
}
.chapter-rail {
  position: sticky;
  top: 2rem;
  border-left: 1px solid var(--line);
  padding: 0 0 0 1rem;
  font-family: var(--guide-type);
  font-size: 16px;
}
.chapter-rail p { font-weight: 700; margin: 0 0 .9rem; }
.chapter-rail a { display: flex; padding: .6rem 0; text-decoration: none; }
.chapter-rail a:hover { text-decoration: underline; }
.reading { min-width: 0; max-width: 69ch; }
.reading-section { padding: 2.6rem 0 3.7rem; border-top: 1px solid var(--line); scroll-margin-top: 2rem; }
.reading-section p { max-width: 68ch; }
.date-note { margin-bottom: 1.8rem; padding: .7rem 0; border-bottom: 1px dotted var(--line); }
.medicine-notes { padding-left: 1.4rem; border-left: 3px solid var(--caution); }
.medicine-notes h3:first-child { margin-top: 0; }
.reading-link { column-gap: .6rem; max-width: 100%; line-height: 1.45; }
.reading-link span { flex-shrink: 0; }
.next-readings { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.question-list { list-style: none; margin: 1.5rem 0 2rem; padding: 0; }
.question-list li { padding: .7rem 0 .7rem 1.3rem; border-bottom: 1px dotted var(--line); position: relative; }
.question-list li::before { content: '—'; position: absolute; left: 0; }
.starting-path, .check-diagram { margin: 2rem 0; background: var(--depth); padding: 2rem; }
figcaption { font-family: var(--guide-type); font-size: 16px; margin: 0 0 1.6rem; }
.path-origin, .path-destination { margin: 0 auto; width: fit-content; max-width: 100%; padding: .6rem 1rem; border: 1px solid var(--ink); text-align: center; }
.path-origin::after { content: ''; display: block; width: 1px; height: 1.5rem; background: var(--ink); position: absolute; left: 50%; bottom: -1.5rem; }
.path-origin { position: relative; margin-bottom: 2.3rem; }
.path-branches { list-style: none; padding: 0; margin: 0 0 2.3rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; position: relative; }
.path-branches::before { content: ''; position: absolute; top: -.8rem; left: 16.666%; right: 16.666%; height: 1px; background: var(--ink); }
.path-branches li { text-align: center; font-size: 18px; border: 1px solid var(--line); padding: .85rem .4rem; position: relative; line-height: 1.45; }
.path-branches li::before { content: ''; position: absolute; width: 1px; height: .8rem; background: var(--ink); top: -.8rem; left: 50%; }
.path-branches li::after { content: ''; position: absolute; width: 1px; height: .8rem; background: var(--ink); bottom: -.8rem; left: 50%; }
.path-destination { position: relative; }
.path-destination::before { content: ''; position: absolute; width: 1px; height: 1.5rem; background: var(--ink); top: -1.5rem; left: 50%; }
.path-branches::after { content: ''; position: absolute; bottom: -.8rem; left: 16.666%; right: 16.666%; height: 1px; background: var(--ink); }
.check-diagram dl { margin: 0; }
.check-diagram dl > div { display: grid; grid-template-columns: 115px minmax(0, 1fr); gap: 1.4rem; border-top: 1px solid var(--line); padding: 1rem 0; }
.check-diagram dt { font-weight: 700; }
.check-diagram dd { margin: 0; padding-left: 1.2rem; border-left: 3px solid var(--positive); }
.cost-note { padding: 1.3rem 1.7rem 1.8rem; border-left: 4px solid var(--caution); background: var(--depth); margin: 1.5rem 0; }
.cost-note h3 { margin-top: .7rem; }
.price { font-size: 32px; font-weight: 600; line-height: 1.3; margin: 1.1rem 0 1.4rem; }
.source-list { list-style: none; padding: 0; margin: 1.7rem 0 2rem; }
.source-note { padding: 1.5rem 0; border-bottom: 1px dotted var(--line); }
.source-note h3 { margin: 0 0 .8rem; }
.source-note h3 a { gap: .6rem; line-height: 1.35; }
.source-note h3 a span { flex-shrink: 0; font-family: var(--guide-type); }
.guide-footer { border-top: 1px solid var(--line); padding: 2.3rem 2rem 3rem; font-size: 18px; }
.guide-footer p { max-width: 68ch; }
.guide-footer nav { display: flex; flex-wrap: wrap; gap: .7rem 2rem; margin-top: 1.3rem; font-family: var(--guide-type); font-size: 16px; }
.guide-footer a { min-height: 48px; }
@media (max-width: 1080px) {
  .guide-header { gap: 1.5rem; }
  .page-rail { column-gap: .65rem; }
  .opening { gap: 2.2rem; }
  h1, .home-opening h1 { font-size: 58px; }
  .reading-layout { gap: 2.2rem; grid-template-columns: 185px minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .guide-header { align-items: flex-start; flex-direction: column; gap: 1rem; padding: 1.25rem 1.5rem; }
  .page-rail { width: 100%; column-gap: 1rem; }
  .opening { grid-template-columns: 1fr; padding: 3rem 1.5rem; gap: 2rem; }
  h1, .home-opening h1 { font-size: 56px; }
  .reading-layout { grid-template-columns: 1fr; gap: 1.8rem; padding: 0 1.5rem 3rem; }
  .chapter-rail { position: static; display: flex; flex-wrap: wrap; gap: .3rem 1rem; border-left: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0; }
  .chapter-rail p { flex-basis: 100%; margin: 0 0 .35rem; }
  .chapter-rail a { padding: .5rem .15rem; text-decoration: underline; }
  .reading { max-width: 100%; }
  .reading-section { padding: 2.1rem 0 2.7rem; }
  .guide-footer { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (max-width: 480px) {
  body { font-size: 18px; line-height: 1.65; }
  .guide-header { padding-left: 1.25rem; padding-right: 1.25rem; }
  .page-rail { column-gap: .7rem; row-gap: .2rem; }
  .page-rail a { padding-left: .35rem; padding-right: .35rem; }
  .opening { padding: 2.7rem 1.25rem 2.6rem; }
  .guide-label { margin-bottom: 1.3rem; }
  h1, .home-opening h1 { font-size: 43px; letter-spacing: -.045em; }
  h2 { font-size: 31px; }
  h3 { font-size: 25px; }
  .opening-lead { margin-top: 1.5rem; }
  .conversation { padding: 1.5rem; font-size: 18px; }
  .conversation h3 { font-size: 27px; }
  .reading-layout { padding-left: 1.25rem; padding-right: 1.25rem; }
  .medicine-notes { padding-left: 1rem; }
  .starting-path, .check-diagram { padding: 1.5rem 1.2rem; }
  .path-branches { grid-template-columns: 1fr; gap: .85rem; padding: 0 0 0 1.1rem; border-left: 1px solid var(--line); }
  .path-origin::after, .path-destination::before, .path-branches::before, .path-branches::after, .path-branches li::after { display: none; }
  .path-origin { margin: 0 0 1rem; }
  .path-destination { margin: 1rem 0 0; }
  .path-branches { margin: 0; }
  .path-branches li { text-align: left; padding: .7rem; }
  .path-branches li::before { width: 1.1rem; height: 1px; top: 50%; left: -1.1rem; }
  .check-diagram dl > div { grid-template-columns: 1fr; gap: .4rem; }
  .check-diagram dd { padding-left: .9rem; }
  .cost-note { padding: 1.1rem 1.25rem 1.5rem; }
  .price { font-size: 29px; }
  .guide-footer { padding-left: 1.25rem; padding-right: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media print {
  :root { color-scheme: light; --canvas: #ffffff; --depth: #ffffff; --ink: #111111; --line: #777777; }
  body { font-size: 16px; }
  .guide-header, .chapter-rail, .guide-footer nav, .skip-link { display: none; }
  .opening { padding: 1rem 0 2rem; gap: 2rem; }
  h1, .home-opening h1 { font-size: 40px; }
  .reading-layout { display: block; padding: 0; }
  .reading { max-width: 100%; }
  .conversation, .cost-note { border: 1px solid var(--line); }
  .reading-section, .conversation, .source-note, .cost-note { break-inside: avoid; }
}