:root {
  --ink: #0e1419;
  --paper: #f5ede2;
  --copper: #ef9873;
  --muted: #c2c6c7;
  --line: #657078;
  --pad-side: max(22px, calc((100vw - 1160px) / 2));
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
* {box-sizing: border-box;}
html {font-size: 18px; color-scheme: dark; scroll-padding-top: 1.5rem;}
body {margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); line-height: 1.65;}
button, input, textarea {font: inherit;}
button, a, input, textarea {touch-action: manipulation;}
button, a { -webkit-tap-highlight-color: transparent; }
a {color: inherit; text-underline-offset: .23em;}
a:hover {color: var(--copper);}
button {cursor: pointer; border: 1px solid transparent; border-radius: 3px; padding: .8rem 1.1rem; background: var(--paper); color: var(--ink); font-weight: 600; line-height: 1.4;}
button:hover {background: var(--copper);}
button:disabled {cursor: default; opacity: .6;}
:focus-visible {outline: 3px solid var(--copper); outline-offset: 5px;}
[hidden] {display: none !important;}
h1, h2, h3, h4, p {margin: 0;}
h1, h2, h3 {font-family: var(--serif); font-weight: 400; line-height: 1.08; text-wrap: balance;}
p, li, dd {text-wrap: pretty;}
p + p {margin-top: .9rem;}
ul, ol {padding-left: 1.25rem;}
li + li {margin-top: .8rem;}
.site-header, main, .site-footer {padding-inline: var(--pad-side);}
.site-header {display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.25rem 2rem;}
.wordmark {font-family: var(--serif); font-size: 1.8rem; line-height: 1; text-decoration: none; flex-shrink: 0;}
.wordmark span {display: block; margin-top: .6rem; font-family: var(--sans); font-size: .57rem; letter-spacing: .15em;}
.back-link {font-size: .8rem; text-align: right;}
.introduction {padding-block: clamp(1.5rem, 6vw, 4.5rem) 2.7rem;}
.eyebrow {font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500;}
h1 {font-size: clamp(3.7rem, 8.5vw, 6.7rem); letter-spacing: -.04em; margin-block: 1rem 1.5rem;}
h1 em {color: var(--copper); font-weight: 400;}
.lead {font-size: clamp(1.1rem, 2.2vw, 1.3rem); max-width: 47em;}
.intro-note {font-size: .87rem; color: var(--muted);}
.practice-navigation {margin-block: 1rem 3.6rem;}
.progress-line {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .7rem; margin-bottom: 1.1rem; font-size: .84rem;}
.text-button {padding: .55rem 0; background: transparent; border: 0; color: var(--paper); text-decoration: underline; text-underline-offset: .25em; font-size: .83rem;}
.text-button:hover {color: var(--copper); background: transparent;}
#case-nav {display: grid; grid-template-columns: 1fr; gap: .65rem;}
.case-link {background: transparent; border: 1px solid var(--line); color: var(--paper); display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 1rem; padding: .85rem 1rem;}
.case-link:hover {background: #202a30;}
.case-link[aria-current="step"] {border-color: var(--copper); box-shadow: inset 3px 0 var(--copper);}
.case-link small {display: block; font-weight: 400; color: var(--muted); font-size: .72rem;}
.case-index {color: var(--copper); font-size: .85rem; font-weight: 400;}
.save-note {margin-top: .85rem; font-size: .76rem; color: var(--muted);}
.case-heading {font-size: clamp(2.4rem, 5.3vw, 4rem); margin-block: .8rem 1.25rem;}
.role {font-weight: 500; margin-top: 1rem;}
.brief {color: var(--muted); margin-top: 1rem;}
.facts {margin: 2.3rem 0 3rem; display: grid; grid-template-columns: 1fr; gap: 1.2rem;}
.facts dt {color: var(--copper); font-size: .78rem; font-weight: 600; margin-bottom: .3rem;}
.facts dd {margin: 0;}
.decision-form {margin-top: 2.5rem;}
fieldset {margin: 1.5rem 0; padding: 0; border: 0; min-width: 0;}
legend {padding: 0; margin-bottom: 1rem; font-size: 1rem; font-weight: 600;}
.stage-title {font-size: clamp(1.9rem, 4vw, 2.6rem); margin-block: .75rem 1rem;}
.option {display: grid; grid-template-columns: 1.3rem 1fr; gap: .8rem; align-items: start; padding: .95rem 1rem; margin-bottom: .6rem; border: 1px solid var(--line); border-radius: 3px; cursor: pointer;}
.option:has(input:checked) {border-color: var(--copper); background: #202a30;}
.option input {accent-color: var(--copper); inline-size: 1.1rem; block-size: 1.1rem; margin: .25rem 0 0;}
.option strong {font-size: 1rem; font-weight: 600;}
.option small {display: block; color: var(--muted); font-size: .86rem; line-height: 1.55; margin-top: .15rem;}
.field {display: block; margin-top: 1.5rem; font-size: 1rem; font-weight: 500;}
textarea {display: block; width: 100%; padding: .8rem; margin-top: .55rem; color: var(--paper); background: transparent; border: 1px solid var(--line); border-radius: 3px; line-height: 1.55; resize: vertical; min-height: 7rem;}
.field-help {font-size: .79rem; color: var(--muted); margin-top: .35rem;}
.button-row {display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: 1.5rem;}
.secondary {background: transparent; border-color: var(--line); color: var(--paper);}
.secondary:hover {color: var(--ink);}
.form-error {color: #ffbda6; margin-top: 1rem; font-weight: 500;}
.saved-answer {margin-block: 2rem;}
.saved-answer summary {cursor: pointer; color: var(--copper); padding-block: .6rem; font-weight: 500;}
.answer-lines {margin-block: .8rem 1.8rem;}
.answer-lines dt {font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 1rem;}
.answer-lines dd {margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere;}
.changed-fact {margin-block: 2rem 1.5rem;}
.changed-fact .eyebrow {color: var(--copper);}
.changed-fact p:last-child {font-size: 1.14rem; margin-top: .75rem;}
.expert {margin-top: 2rem;}
.expert > h3 {font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem;}
.expert h4 {font-size: 1rem; font-weight: 600; margin-top: 2rem;}
.expert li {color: var(--muted);}
.math {margin-block: 2rem;}
.math h4 {margin-bottom: .9rem;}
.table-scroll {overflow-x: auto;}
table {width: 100%; border-collapse: collapse; text-align: left; font-size: .85rem; font-variant-numeric: tabular-nums;}
th {color: var(--muted); font-size: .73rem; font-weight: 500; padding: .55rem .6rem .7rem 0;}
td {vertical-align: top; padding: .65rem .6rem .65rem 0; border-top: 1px solid #39464e;}
td:last-child, th:last-child {text-align: right; padding-right: 0; white-space: nowrap;}
.calculation {font-size: .9rem; color: var(--muted); margin-top: 1rem;}
.completion {margin-top: 2.5rem;}
.completion h3 {font-size: 2.2rem; margin-bottom: 1rem;}
.site-footer {padding-block: 4rem 2rem; font-size: .78rem; color: var(--muted);}
.site-footer a {display: inline-block; margin-top: 1rem;}
.skip-link {position: absolute; top: -100px; left: 1rem; z-index: 5; background: var(--paper); color: var(--ink); padding: .7rem;}
.skip-link:focus {top: .7rem;}
dialog {color: var(--paper); background: var(--ink); border: 1px solid var(--line); border-radius: 3px; width: min(38rem, calc(100% - 2rem)); padding: clamp(1.2rem, 4vw, 2.5rem);}
dialog::backdrop {background: rgb(0 0 0 / .72);}
dialog h2 {font-size: 2.4rem; margin-bottom: 1rem;}
@media (min-width: 961px) {
  #case-nav {grid-template-columns: repeat(3, 1fr);}
  .facts {grid-template-columns: 1fr 1fr; gap: 1.6rem 3rem;}
  #case-area {padding-right: 14%;}
}
@media (max-width: 440px) {
  .site-header {gap: 1rem;}
  .back-link {max-width: 8rem;}
  .button-row > button {width: 100%;}
  .option {padding: .8rem;}
}
@media (prefers-reduced-motion: reduce) {html {scroll-behavior: auto;}}
@media print {
  :root {--ink: #fff; --paper: #141414; --muted: #333; --copper: #753c25;}
  .site-header, .practice-navigation, button, .decision-form, .skip-link, dialog {display: none !important;}
  body {font-size: 12pt;}
  main, .site-footer {padding-inline: 0;}
}