@layer foundation, frame, reading, graphics, navigation, adjustments;
@layer foundation {
  @font-face { font-family: "STIX Two Text"; src: url("stix-two-text-variable.ttf") format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; }
  :root { color-scheme: dark; --steel: #161a22; --card: #1d2430; --paper: #f5f3ed; --muted: #c1cbd4; --teal: #2bd6b4; --violet: #6f7bf2; --pale-violet: #c3c9ff; --edge: #485466; }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-padding-bottom: 7rem; }
  body { margin: 0; background: var(--steel); color: var(--paper); font-family: "STIX Two Text", Georgia, serif; font-size: 20px; line-height: 1.6; font-weight: 400; }
  a { color: var(--teal); text-underline-offset: .2em; text-decoration-thickness: 1px; }
  a:hover { color: var(--paper); }
  a:focus-visible { outline: 3px solid var(--teal); outline-offset: 5px; border-radius: 2px; }
  h1, h2, h3, p, ul, figure { margin: 0; }
  h1, h2, h3 { font-weight: 500; text-wrap: balance; }
  h1 { font-size: clamp(2.6rem, 4.4vw, 4.8rem); line-height: 1.07; letter-spacing: -.025em; max-width: 16ch; }
  h2 { font-size: clamp(1.65rem, 2.3vw, 2.1rem); line-height: 1.2; letter-spacing: -.015em; }
  h3 { font-size: 1.5rem; line-height: 1.25; }
  p { max-width: 64ch; }
  strong { font-weight: 650; }
}
@layer frame {
  .masthead { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: 1320px; padding: 1.65rem 3rem; margin: auto; }
  .desk-name { display: flex; flex-direction: column; justify-content: center; min-height: 44px; color: var(--paper); text-decoration: none; line-height: 1.2; font-size: 16px; text-transform: uppercase; letter-spacing: .14em; }
  .desk-name span:first-child { color: var(--teal); }
  .guide-label { font-size: 18px; color: var(--muted); }
  main, article { min-width: 0; }
  .aurora-band { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 310px); gap: 4rem; padding: 4rem max(3rem, calc((100vw - 1224px) / 2)) 4.4rem; background: #253743; border-block: 1px solid #52677a; }
  .chapter-heading { max-width: 820px; }
  .eyebrow { font-size: 16px; color: var(--paper); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1.3rem; }
  .chapter-lead { color: var(--paper); font-size: 23px; line-height: 1.5; margin-top: 1.5rem; max-width: 48ch; }
  .question-slip { align-self: end; padding: 1.7rem 0 0 1.6rem; border-left: 2px solid var(--teal); }
  .slip-label { color: #8aefdb; font-size: 16px; letter-spacing: .07em; text-transform: uppercase; }
  .slip-question { font-size: 28px; line-height: 1.25; margin-block: .9rem; text-wrap: balance; }
  .question-slip > p:last-child { font-size: 18px; color: #d9dfe8; line-height: 1.5; }
  .chapter-content { max-width: 1016px; margin: auto; padding: 3.5rem 3rem 1rem; }
  .site-footer { max-width: 1016px; margin: auto; padding: 3rem 3rem 9rem; font-size: 18px; color: var(--muted); }
  .footer-links { display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin-top: 1rem; }
}
@layer reading {
  .answer-card { padding: 2.4rem; background: var(--card); border: 1px solid var(--edge); border-radius: 4px 24px 4px 4px; }
  .answer-card + .answer-card, .answer-card + figure, figure + .answer-card { margin-top: 2.2rem; }
  .answer-card h2 { margin-bottom: 1rem; }
  .answer-card p + p, .answer-card ul { margin-top: 1rem; }
  .dateline { color: var(--pale-violet); font-size: 18px; }
  .ask-list { list-style: none; padding: 0; max-width: 64ch; }
  .ask-list li { padding: .85rem 0 .85rem 1.5rem; border-top: 1px solid var(--edge); position: relative; }
  .ask-list li::before { content: ""; position: absolute; left: 0; top: 1.55rem; width: .4rem; height: .4rem; border: 1px solid var(--teal); border-radius: 50%; }
  .page-notes { margin-top: 3.5rem; padding-top: 2rem; position: relative; }
  .page-notes::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 1px; background: linear-gradient(90deg, var(--teal), var(--violet), transparent); box-shadow: 0 0 12px #2bd6b44a; }
  .page-notes h2 { font-size: 1.55rem; }
  .page-notes ul { list-style: none; padding: 0; margin-top: 1.3rem; }
  .page-notes li { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 1rem; margin-top: 1.1rem; scroll-margin-top: 1rem; }
  .page-notes p { font-size: 18px; color: var(--muted); line-height: 1.5; }
  .note-letter { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--edge); font-size: 18px; color: var(--pale-violet); }
  .note-ref { display: inline-flex; justify-content: center; align-items: center; min-width: 44px; min-height: 44px; font-size: 16px; vertical-align: baseline; }
  .source-link, .footer-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: 18px; }
}
@layer graphics {
  figure { padding: 2rem; border: 1px solid var(--edge); background: #18202b; border-radius: 4px; }
  figcaption { font-size: 1.5rem; line-height: 1.3; margin-bottom: 1.7rem; }
  .graphic-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.6rem; }
  .graphic-cell { border-top: 3px solid var(--teal); padding-top: 1rem; }
  .graphic-cell:nth-child(2) { border-color: #65c0d6; }
  .graphic-cell:nth-child(3) { border-color: var(--violet); }
  .graphic-label { color: var(--muted); font-size: 16px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .7rem; }
  .graphic-cell p:last-child { font-size: 21px; line-height: 1.4; }
  .graphic-caption { font-size: 18px; color: var(--muted); margin-top: 1.5rem; }
  .cost-map .graphic-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@layer navigation {
  .bottom-dock { position: fixed; z-index: 10; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(730px, calc(100% - 28px)); display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; padding: 7px; background: #202733; border: 1px solid #718093; border-radius: 10px; box-shadow: 0 8px 36px #080b11c7, 0 0 20px #2bd6b410; }
  .bottom-dock a { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: .3rem; border-radius: 4px; color: var(--paper); text-decoration: none; font-size: 16px; line-height: 1.2; text-transform: uppercase; letter-spacing: .12em; }
  .bottom-dock a[aria-current="page"] { background: var(--teal); color: var(--steel); font-weight: 600; }
  .bottom-dock a.dock-section { box-shadow: inset 0 -2px 0 var(--teal); }
  .bottom-dock a:hover { background: #394359; color: var(--paper); }
  .bottom-dock a[aria-current="page"]:hover { background: #68e6cf; color: var(--steel); }
  .skip-link { position: absolute; z-index: 30; top: .6rem; left: 1rem; padding: .6rem 1rem; background: var(--paper); color: var(--steel); min-height: 44px; transform: translateY(-180%); font-size: 18px; }
  .skip-link:focus { transform: none; }
  .chapter-link, .next-chapter { display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: center; gap: .1rem 1rem; min-height: 72px; text-decoration: none; border-top: 1px solid var(--edge); padding: 1.15rem 0; }
  .link-label { font-size: 24px; line-height: 1.3; }
  .link-detail { grid-column: 1; font-size: 18px; color: var(--muted); line-height: 1.5; }
  .link-arrow { grid-column: 2; grid-row: 1 / 3; font-size: 26px; text-align: center; }
  .next-chapter { margin-top: 2.5rem; border-bottom: 1px solid var(--edge); }
  .next-chapter .link-label { font-size: 26px; }
}
@layer adjustments {
  @media (max-width: 760px) {
    .masthead { padding: 1.2rem 1.25rem; gap: 1.1rem; }
    .guide-label { font-size: 16px; max-width: 12ch; line-height: 1.3; }
    .desk-name { font-size: 16px; letter-spacing: .08em; }
    .aurora-band { grid-template-columns: minmax(0,1fr); gap: 2rem; padding: 2.6rem 1.25rem 2.6rem; }
    .chapter-lead { font-size: 21px; }
    .question-slip { padding: 1.2rem 0 0 1.2rem; max-width: 34ch; }
    .slip-question { font-size: 25px; }
    .chapter-content { padding: 2rem 1.25rem 1rem; }
    .answer-card { padding: 1.4rem; }
    .answer-card + .answer-card, .answer-card + figure, figure + .answer-card { margin-top: 1.4rem; }
    .graphic-grid, .cost-map .graphic-grid { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
    figure { padding: 1.4rem; }
    .site-footer { padding: 2rem 1.25rem 9rem; }
    .footer-links { flex-direction: column; align-items: flex-start; }
    .bottom-dock { width: calc(100% - 20px); padding: 5px; gap: 1px; bottom: max(10px, env(safe-area-inset-bottom)); }
    .bottom-dock a { font-size: 16px; letter-spacing: .08em; min-height: 50px; }
    .page-notes li { gap: .7rem; }
    .link-label { font-size: 22px; }
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  @media print {
    body { background: white; color: black; font-size: 16px; }
    .bottom-dock, .skip-link, .hero-links, .footer-links { display: none; }
    .aurora-band, .answer-card, figure { background: white; color: black; border-color: #777; }
    .chapter-lead, .eyebrow, .question-slip p, .page-notes p, .graphic-label, .graphic-caption, .site-footer, .dateline, a { color: black; }
    .site-footer { padding-bottom: 1rem; }
    .answer-card, figure { break-inside: avoid; }
  }
}
@layer reading { .question-group { padding-block: 1.5rem 2.5rem; } .question-group h2 { margin-bottom: 1.5rem; } .question-group + .question-group { border-top: 1px solid var(--edge); } }