/* Margin Study — a terracotta reading desk. Custom CSS, system fonts. */
:root {
  --x99a8-paper: #fbf9f5;
  --x99a8-clay: #a4432e;
  --x99a8-clay-dark: #81321f;
  --x99a8-text: #342d29;
  --x99a8-muted: #6c6058;
  --x99a8-edge: #dacfc3;
  --x99a8-rail: #f0e8dc;
  --x99a8-wash: #f6eee7;
  --x99a8-type: Georgia, 'Times New Roman', Times, serif;
  --x99a8-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--x99a8-paper); color: var(--x99a8-text); font-family: var(--x99a8-type); font-size: 18px; line-height: 1.75; }
a { color: var(--x99a8-clay-dark); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--x99a8-clay); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--x99a8-clay); outline-offset: 5px; }
::selection { color: #fff; background: var(--x99a8-clay); }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--x99a8-type); font-weight: 400; line-height: 1.16; text-wrap: pretty; }
h1 { margin: 0 0 26px; font-size: clamp(2.6rem, 4.4vw, 4.5rem); letter-spacing: -.045em; max-width: 860px; }
h2 { margin: 0 0 22px; font-size: clamp(1.8rem, 2.5vw, 2.5rem); letter-spacing: -.025em; }
h3 { font-size: 1.4rem; margin: 30px 0 12px; letter-spacing: -.015em; }
p { margin: 0 0 1.2em; }
[id] { scroll-margin-top: 30px; }
.x99a8-skip { position: fixed; top: -100px; left: 16px; z-index: 20; background: var(--x99a8-clay-dark); color: #fff; padding: 10px 18px; font-family: var(--x99a8-ui); }
.x99a8-skip:focus { top: 12px; }
/* Persistent left-hand resource index */
.x99a8-sidebar { position: fixed; inset: 0 auto 0 0; width: 252px; background: var(--x99a8-rail); border-right: 1px solid var(--x99a8-edge); padding: 46px 28px 28px; display: flex; flex-direction: column; overflow-y: auto; }
.x99a8-sidebar::before { content: ''; position: absolute; inset: 0 0 auto; height: 7px; background: var(--x99a8-clay); }
.x99a8-brand { text-decoration: none; color: var(--x99a8-text); font-size: 2.7rem; letter-spacing: -.055em; line-height: .99; display: block; }
.x99a8-sidebar .x99a8-brand span { display: block; color: var(--x99a8-clay); font-style: italic; }
.x99a8-brand-icon { display: none; }
.x99a8-sidebar-note { color: var(--x99a8-muted); font-size: .9rem; line-height: 1.5; margin: 22px 0 48px; max-width: 165px; }
.x99a8-nav-label { font: 600 .63rem/1.5 var(--x99a8-ui); text-transform: uppercase; letter-spacing: .18em; margin-bottom: 14px; color: var(--x99a8-muted); }
.x99a8-navigation { display: grid; counter-reset: resource; }
.x99a8-navigation a { counter-increment: resource; position: relative; font: 400 .84rem/1.5 var(--x99a8-ui); text-decoration: none; padding: 13px 8px 13px 30px; border-top: 1px solid var(--x99a8-edge); color: var(--x99a8-text); }
.x99a8-navigation a:last-child { border-bottom: 1px solid var(--x99a8-edge); }
.x99a8-navigation a::before { content: '0' counter(resource); position: absolute; left: 0; top: 15px; font-size: .61rem; color: var(--x99a8-muted); }
.x99a8-navigation a:hover { background: #e6d9cb; }
.x99a8-navigation .x99a8-active { color: var(--x99a8-clay-dark); font-weight: 650; }
.x99a8-navigation .x99a8-active::after { content: ''; position: absolute; right: 0; top: 21px; width: 5px; height: 5px; border-radius: 50%; background: var(--x99a8-clay); }
.x99a8-sidebar-end { white-space: pre-line; font-size: .84rem; font-style: italic; color: var(--x99a8-muted); border-top: 3px double var(--x99a8-edge); padding-top: 20px; margin: auto 0 0; }
/* Document title, reading column and local section navigation */
.x99a8-main { margin-left: 252px; max-width: 1450px; padding: 0 56px; }
.x99a8-breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; font: .7rem/1.5 var(--x99a8-ui); color: var(--x99a8-muted); padding-top: 29px; }
.x99a8-breadcrumbs a { color: inherit; }
.x99a8-page-header { padding: 54px 0 45px; border-bottom: 3px double var(--x99a8-edge); }
.x99a8-main > .x99a8-page-header:first-child { padding-top: 75px; }
.x99a8-kicker { font: 600 .65rem/1.5 var(--x99a8-ui); text-transform: uppercase; letter-spacing: .16em; color: var(--x99a8-clay-dark); margin: 0 0 18px; }
.x99a8-lede { max-width: 730px; color: var(--x99a8-muted); font-size: 1.15rem; line-height: 1.7; margin-bottom: 0; }
.x99a8-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.x99a8-button { display: inline-block; text-decoration: none; background: var(--x99a8-clay); color: #fff; border: 1px solid var(--x99a8-clay); padding: 11px 20px; font: 500 .76rem/1.5 var(--x99a8-ui); }
.x99a8-button:hover { background: var(--x99a8-clay-dark); color: #fff; }
.x99a8-secondary { background: transparent; color: var(--x99a8-clay-dark); }
.x99a8-reading-layout { display: grid; grid-template-columns: minmax(0, 780px) 165px; gap: 46px; align-items: start; }
.x99a8-article { min-width: 0; counter-reset: section; }
.x99a8-section { padding: 44px 0; border-bottom: 1px solid var(--x99a8-edge); }
.x99a8-section:last-child { border-bottom: 0; }
.x99a8-section > h2::before { counter-increment: section; content: '0' counter(section) ' /'; display: block; color: var(--x99a8-clay); font: .65rem/1.5 var(--x99a8-ui); letter-spacing: .1em; margin-bottom: 13px; }
.x99a8-section > .x99a8-kicker + h2::before { display: none; }
.x99a8-page-index { position: sticky; top: 34px; padding-top: 44px; font: .72rem/1.5 var(--x99a8-ui); }
.x99a8-page-index > p { font-size: .63rem; letter-spacing: .12em; font-weight: 650; text-transform: uppercase; color: var(--x99a8-muted); margin-bottom: 15px; }
.x99a8-page-index ol { list-style: none; padding: 0 0 0 13px; margin: 0; border-left: 1px solid var(--x99a8-edge); }
.x99a8-page-index li { margin: 0 0 14px; }
.x99a8-page-index a { text-decoration: none; color: var(--x99a8-muted); }
.x99a8-page-index a:hover { color: var(--x99a8-clay-dark); text-decoration: underline; }
/* Resources reflow as annotated document entries rather than cards. */
.x99a8-entries { display: grid; margin-top: 30px; counter-reset: entry; }
.x99a8-entry { position: relative; padding: 26px 0 26px 45px; border-top: 1px solid var(--x99a8-edge); counter-increment: entry; }
.x99a8-entry::before { content: counter(entry, decimal-leading-zero); position: absolute; left: 0; top: 31px; color: var(--x99a8-clay); font: .69rem/1.5 var(--x99a8-ui); }
.x99a8-entry h3 { margin-top: 0; font-size: 1.5rem; }
.x99a8-entry .x99a8-kicker { margin-bottom: 8px; font-size: .6rem; }
.x99a8-entry p { font-size: 1rem; margin-bottom: 14px; }
.x99a8-entry p:last-child { margin-bottom: 0; }
.x99a8-link { font: 600 .73rem/1.6 var(--x99a8-ui); }
.x99a8-resources { margin-top: 28px; border-top: 1px solid var(--x99a8-edge); }
.x99a8-resource { display: block; position: relative; padding: 24px 30px 24px 20px; text-decoration: none; border-bottom: 1px solid var(--x99a8-edge); border-left: 3px solid var(--x99a8-clay); }
.x99a8-resource::after { content: '↗'; position: absolute; top: 24px; right: 5px; font-size: 1.2rem; }
.x99a8-resource:hover { background: var(--x99a8-wash); }
.x99a8-resource small { font: .62rem/1.5 var(--x99a8-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--x99a8-muted); }
.x99a8-resource h3 { margin: 10px 0; font-size: 1.55rem; }
.x99a8-resource p { color: var(--x99a8-muted); font-size: .98rem; margin: 0; }
.x99a8-entry ol { padding-left: 20px; font-size: .9rem; }
.x99a8-entry li { margin-bottom: 7px; }
.x99a8-steps { counter-reset: pass; margin-top: 30px; }
.x99a8-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--x99a8-edge); counter-increment: pass; }
.x99a8-step-number { color: var(--x99a8-clay); font-size: 1.6rem; line-height: 1.2; font-style: italic; }
.x99a8-step-number::before { content: counter(pass); }
.x99a8-step h3 { margin-top: 0; }
.x99a8-step p { margin-bottom: 0; }
.x99a8-example { background: var(--x99a8-wash); padding: 28px; margin: 28px 0; border-top: 3px solid var(--x99a8-clay); }
dl { margin: 0; }
dt { font-weight: 700; margin-bottom: 3px; }
dd { margin: 0 0 17px; color: var(--x99a8-muted); }
dd:last-child { margin-bottom: 0; }
.x99a8-notice { background: var(--x99a8-wash); border-left: 3px solid var(--x99a8-clay); font-size: .95rem; padding: 20px 24px; }
.x99a8-intro-note { padding-bottom: 30px; }
.x99a8-guide-index { display: flex; flex-wrap: wrap; gap: 10px 20px; font: .74rem/1.5 var(--x99a8-ui); }
.x99a8-guide-index span { flex-basis: 100%; font-weight: 650; }
.x99a8-checklist { padding-left: 23px; }
.x99a8-checklist li { margin: 0 0 18px; padding-left: 6px; }
.x99a8-checklist li::marker { color: var(--x99a8-clay); }
.x99a8-questions { margin-top: 30px; }
details { border-top: 1px solid var(--x99a8-edge); }
details:last-child { border-bottom: 1px solid var(--x99a8-edge); }
summary { cursor: pointer; padding: 20px 24px 20px 0; font-size: 1.18rem; line-height: 1.4; }
summary::marker { color: var(--x99a8-clay); font-size: .75rem; }
details[open] summary { color: var(--x99a8-clay-dark); }
details > div { padding: 0 0 15px 20px; font-size: 1rem; }
/* Compact colophon */
.x99a8-footer { border-top: 3px double var(--x99a8-edge); margin-top: 25px; padding: 36px 0 30px; }
.x99a8-footer-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; }
.x99a8-footer .x99a8-brand { font-size: 1.6rem; }
.x99a8-footer-intro { margin-top: 14px; font-size: .85rem; line-height: 1.65; color: var(--x99a8-muted); }
.x99a8-footer-nav { display: flex; align-content: start; flex-wrap: wrap; gap: 12px 22px; font: .7rem/1.5 var(--x99a8-ui); }
.x99a8-footer > small { display: block; margin-top: 22px; font: .62rem/1.5 var(--x99a8-ui); color: var(--x99a8-muted); }
@media (min-width: 1700px) { .x99a8-main { padding-left: 85px; padding-right: 85px; } }
@media (max-width: 1190px) {
  .x99a8-main { padding-left: 38px; padding-right: 38px; }
  .x99a8-reading-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .x99a8-page-index { position: static; grid-row: 1; padding: 24px 0; border-bottom: 1px solid var(--x99a8-edge); }
  .x99a8-page-index > p { margin-bottom: 10px; }
  .x99a8-page-index ol { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 0; border: 0; }
  .x99a8-page-index li { margin: 0; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .x99a8-sidebar { position: relative; width: auto; padding: 27px 24px 20px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--x99a8-edge); }
  .x99a8-sidebar .x99a8-brand { font-size: 2rem; line-height: 1; }
  .x99a8-sidebar .x99a8-brand span { display: inline; }
  .x99a8-sidebar-note { font-size: .76rem; max-width: none; margin: 10px 0 21px; }
  .x99a8-nav-label, .x99a8-sidebar-end { display: none; }
  .x99a8-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .x99a8-navigation a { padding-top: 10px; padding-bottom: 10px; font-size: .75rem; }
  .x99a8-navigation a::before { top: 12px; }
  .x99a8-navigation a:nth-last-child(2) { border-bottom: 1px solid var(--x99a8-edge); }
  .x99a8-navigation .x99a8-active::after { top: 17px; }
  .x99a8-main { margin-left: 0; padding: 0 24px; }
  .x99a8-page-header, .x99a8-main > .x99a8-page-header:first-child { padding: 36px 0 32px; }
  h1 { font-size: clamp(2.35rem, 7.7vw, 3.5rem); }
  h2 { font-size: 1.8rem; }
  .x99a8-lede { font-size: 1.05rem; }
  .x99a8-section { padding: 34px 0; }
  .x99a8-footer-columns { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .x99a8-actions { gap: 10px; }
  .x99a8-button { padding: 10px 14px; font-size: .71rem; }
  .x99a8-entry { padding-left: 32px; }
  .x99a8-entry h3 { font-size: 1.35rem; }
  .x99a8-example { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }