/* The Operator's Library — shared series stylesheet */
:root{
  --paper: oklch(0.97 0.018 78);
  --paper-2: oklch(0.93 0.028 72);
  --paper-3: oklch(0.89 0.04 70);
  --ink: oklch(0.24 0.028 50);
  --ink-soft: oklch(0.45 0.025 55);
  --ink-mute: oklch(0.62 0.02 60);
  --rule: oklch(0.82 0.03 65);
  --accent: oklch(0.46 0.09 245);
  --accent-deep: oklch(0.34 0.09 250);
  --accent-soft: oklch(0.9 0.04 240);
  --amber: oklch(0.55 0.13 60);
  --amber-deep: oklch(0.4 0.12 55);
  --honey: oklch(0.72 0.13 75);
  --sage: oklch(0.56 0.07 150);
  --rust: oklch(0.55 0.13 30);
  --display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --body: "Outfit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
@page{ size: Letter; margin: 0; }
html, body{ background: oklch(0.86 0.025 70); margin: 0; padding: 0; }
body{ font-family: var(--body); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.page{ width: 8.5in; height: 11in; background: var(--paper); position: relative; overflow: hidden; margin: 24px auto; box-shadow: 0 20px 60px -20px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.06); padding: 0.75in 0.85in 0.55in; box-sizing: border-box; page-break-after: always; break-after: page; }
.page:last-child{ page-break-after: auto; break-after: auto; }
@media print{ html, body{ background: white; } .page{ margin: 0; box-shadow: none; } }
.page:not(.cover){ display: flex; flex-direction: column; }
.page:not(.cover) .practice{ margin-top: auto; padding-top: 14px; flex-shrink: 0; }
.page:not(.cover) .running.bot{ position: static; margin-top: 14px; flex-shrink: 0; }

h1, h2, h3, h4, .display{ font-family: var(--display); color: var(--ink); }
h2{ font-size: 28px; line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 12px; font-weight: 500; }
h3{ font-size: 18px; line-height: 1.2; margin: 0 0 6px; font-weight: 600; }
h4{ font-size: 14px; line-height: 1.2; margin: 0; font-weight: 600; }
p{ font-size: 13px; line-height: 1.5; margin: 0 0 9px; text-wrap: pretty; }
p.lede{ font-family: var(--display); font-size: 18px; line-height: 1.3; font-weight: 400; margin: 0 0 12px; }
em{ font-style: italic; }
strong{ font-weight: 600; color: var(--ink); }

.eyebrow{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-deep); font-weight: 500; }
.meta{ font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.running{ display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.running.top{ margin-bottom: 12px; }
.rule{ height: 1px; background: var(--rule); border: 0; margin: 12px 0; }
.rule.accent{ background: var(--accent); height: 3px; width: 56px; margin: 0 0 14px; border-radius: 2px; }

.two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.three-col{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
.pullquote{ font-family: var(--display); font-size: 20px; line-height: 1.22; font-style: italic; padding: 10px 0 10px 18px; border-left: 3px solid var(--accent); margin: 12px 0; text-wrap: balance; font-weight: 400; }
.card{ background: var(--paper-2); padding: 12px 14px; border-radius: 6px; }
.card.accent{ background: var(--accent-soft); }

.code-box{ background: oklch(0.21 0.02 245); color: oklch(0.92 0.02 80); border-radius: 4px; padding: 10px 12px; margin: 8px 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.55; white-space: pre-wrap; }
.code-box .c-key{ color: oklch(0.78 0.13 75); }
.code-box .c-str{ color: oklch(0.78 0.1 150); }
.code-box .c-com{ color: oklch(0.58 0.02 60); font-style: italic; }
.code-box .c-hl{ color: oklch(0.82 0.09 30); }

.watchout{ background: oklch(0.96 0.04 60); border-left: 3px solid var(--honey); padding: 9px 12px; margin: 9px 0; border-radius: 0 4px 4px 0; }
.watchout .label{ font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: oklch(0.5 0.13 70); margin-bottom: 4px; font-weight: 500; }
.watchout p{ margin: 0; font-size: 12.5px; line-height: 1.45; }
.dothis{ background: oklch(0.95 0.05 145); border-left: 3px solid var(--sage); padding: 9px 12px; margin: 9px 0; border-radius: 0 4px 4px 0; }
.dothis .label{ font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); margin-bottom: 4px; font-weight: 500; }
.dothis p{ margin: 0; font-size: 12.5px; line-height: 1.45; }

ol.numbered, ul.bullet{ padding-left: 0; list-style: none; margin: 0 0 8px; }
ol.numbered li, ul.bullet li{ font-size: 13px; line-height: 1.5; padding-left: 24px; position: relative; margin-bottom: 5px; }
ol.numbered{ counter-reset: n; }
ol.numbered li::before{ counter-increment: n; content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--accent-deep); font-weight: 600; }
ul.bullet li::before{ content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }

.cover{ padding: 0; display: flex; flex-direction: column; background: var(--paper); }
.cover-inner{ padding: 0.9in 0.9in 0.75in; height: 100%; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 2; box-sizing: border-box; }
.cover-art{ position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.cover-title{ font-family: var(--display); font-size: 88px; line-height: 0.9; letter-spacing: -0.03em; font-weight: 500; }
.cover-title em{ font-style: italic; color: var(--accent); }

.toc-row{ display: grid; grid-template-columns: 22px 1fr auto; align-items: baseline; gap: 10px; padding: 1px 0; border-bottom: 1px solid var(--rule); }
.toc-num{ font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: var(--accent-deep); font-weight: 600; }
.toc-title{ font-family: var(--display); font-size: 13px; line-height: 1.12; color: var(--ink); }
.toc-title .sub{ display: block; font-family: var(--body); font-size: 9px; color: var(--ink-mute); letter-spacing: 0.01em; margin-top: 1px; }
.toc-page{ font-family: var(--mono); font-size: 9px; color: var(--ink-soft); }
.part-divider{ display: flex; align-items: baseline; gap: 10px; padding: 3px 0 0; border-top: 1.5px solid var(--ink); margin-top: 2px; }
.part-divider .part-tag{ font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; color: var(--accent-deep); font-weight: 600; }
.part-divider .part-name{ font-family: var(--display); font-size: 12px; color: var(--ink); font-style: italic; }

.ch-opener{ display: grid; grid-template-columns: 100px 1fr; gap: 24px; align-items: end; margin-bottom: 10px; }
.ch-big{ font-family: var(--display); font-size: 84px; line-height: 0.82; letter-spacing: -0.04em; color: var(--accent); font-weight: 400; }

.face-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; margin-top: 6px; }
.face-card{ border-top: 2px solid var(--accent); padding-top: 8px; }
.face-card .tag{ font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: var(--accent-deep); font-weight: 600; }
.face-card h4{ font-family: var(--display); font-size: 16px; margin: 3px 0 5px; font-weight: 600; line-height: 1.18; }
.face-card p{ font-size: 11.5px; line-height: 1.4; margin: 0 0 4px; }
.face-card p.fix{ font-size: 11px; color: var(--accent-deep); font-weight: 500; }

.day-grid{ display: grid; grid-template-columns: 48px 1fr 1.05fr; gap: 6px 12px; align-items: baseline; padding: 2.5px 0; border-bottom: 1px solid var(--rule); }
.day-grid .d{ font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--accent-deep); font-weight: 600; }
.day-grid .t{ font-family: var(--display); font-size: 12px; line-height: 1.15; }
.day-grid .n{ font-size: 10px; line-height: 1.3; color: var(--ink-soft); }

.beat-row{ display: grid; grid-template-columns: 80px 1fr; gap: 16px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.beat-row .b{ font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--accent-deep); font-weight: 600; }
.beat-row .desc{ font-size: 12.5px; line-height: 1.45; }

.diagram{ margin: 4px 0 10px; padding: 10px 12px 6px; background: oklch(0.99 0.005 80); border: 1px solid var(--rule); border-radius: 4px; }
.diagram .cap{ font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); font-weight: 600; margin-bottom: 4px; }
.diagram svg{ display: block; width: 100%; height: auto; }
.diagram text{ font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 8.5px; letter-spacing: 0.12em; fill: var(--ink-soft); }
.diagram text.k{ fill: var(--accent-deep); font-weight: 600; }
.series-mark{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--accent-deep); }
.series-mark .swatch{ width: 12px; height: 12px; border-radius: 3px; background: var(--accent); display: inline-block; }