/* Case log · Numbers. Same quiet production layout as the hub: white page, Georgia headings, system body,
   hairline cards, 6px radius, pastel washes with the dark variant for text. The sheet demo and the
   principle cards carry the color; the page does not. */
:root{--ink:#302B29;--muted:#5C544E;--line:#D9D9D9;--soft:#EFEDE8;--accent:#800000;--deep:#4B1020;--focus:#315873;
  --gold:#FBF0D1;--gold-ink:#5C4300;--gold-line:#E9D28A;--lake:#D6E9EE;--lake-ink:#002A3A;--lake-line:#9CC7D3;
  --ivy:#E7EDDE;--ivy-ink:#284734;--ivy-line:#B9CDA0;--violet:#E6DCE8;--violet-ink:#41273B;--violet-line:#BFAEC3;
  --rose:#F3E3E4;--rose-ink:#643335;--rose-line:#D9AEB0}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--harper-header-height,90px) + 24px)}
body{margin:0;background:#fff;color:var(--ink);font:15px/1.6 system-ui,-apple-system,sans-serif}
main{max-width:1160px;margin:auto;padding:24px 32px 64px}
a{color:var(--accent);text-underline-offset:4px}
a,button,summary{touch-action:manipulation}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.skip{position:absolute;top:-80px;left:16px;padding:12px;background:#fff}.skip:focus{top:0}
.eyebrow{margin:0;font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3{font-family:Georgia,serif;font-weight:400;text-wrap:balance}
h1{font-size:32px;line-height:1.25;margin:8px 0 16px}
h2{font-size:24px;line-height:1.3;margin:0 0 8px;padding-left:12px;border-left:4px solid var(--deep)}
h3{font-size:19px;line-height:1.35;margin:0 0 8px}
.lede{max-width:760px;margin:0 0 12px}
p,li,dt,dd,code,a,span{overflow-wrap:anywhere}
section{margin-top:48px}
.page-nav{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.page-nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--accent);font-weight:600;text-decoration:none}
.page-nav a:hover{border-color:#A4343A;background:#FAF4F4}

/* Buttons: white with hairline and maroon text; primary is the maroon fill. */
.action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 16px;background:#fff;border:1px solid var(--line);border-radius:4px;color:var(--accent);font:600 14px system-ui,-apple-system,sans-serif;text-decoration:none;cursor:pointer}
.action:hover{border-color:#A4343A;background:#FAF4F4}
.action.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.action.primary:hover{background:#641C2D;border-color:#641C2D}
.action[disabled]{color:#A6A6A6;border-color:var(--soft);background:#fff;cursor:default}

/* The hero: the sheet demo beside its rules. Violet is the hub's hue for the numbers step. */
.hero h2{border-left-color:var(--violet-ink)}
.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start;margin-top:16px}
.sheet-demo{margin:0}
.sd-controls{display:none;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px}
.sheet-js .sd-controls{display:flex}
.sd-status{flex:1 1 220px;margin:0;font-size:13px;color:var(--muted)}
.sd-sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.9fr);grid-template-areas:"hyp hyp hyp" "notes fw fw" "table table table" ". . final";gap:12px;padding:14px;border:1px solid var(--ink);border-radius:3px;background:#fff;box-shadow:4px 4px 0 var(--soft)}
.sd-region{min-width:0;padding:10px 12px;border:1px dashed var(--line);border-radius:3px;background:#FAFAFA}
.sd-label{display:block;margin:0 0 6px;font:700 11px/1 system-ui,-apple-system,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sd-hypothesis{grid-area:hyp;background:var(--lake);border-color:var(--lake-line);color:var(--lake-ink)}
.sd-hypothesis .sd-label{color:var(--lake-ink)}
.sd-hypothesis p{margin:0;font:600 14px/1.4 system-ui,-apple-system,sans-serif}
.sd-notes{grid-area:notes;background:#F7F7F7}
.sd-notes dl,.sd-final dl{margin:0;display:grid;gap:4px}
.sd-notes dl div,.sd-final dl div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 8px;font-size:12px;line-height:1.45}
.sd-notes dl div{display:block}
.sd-notes dd{padding-left:14px}
.sd-notes dt,.sd-final dt{margin:0;font-weight:650;color:var(--deep)}
.sd-notes dt::before{content:'·';margin-right:6px;color:var(--accent);font-weight:700}
.sd-notes dd,.sd-final dd{margin:0;color:var(--muted)}
.sd-framework{grid-area:fw;background:var(--ivy);border-color:var(--ivy-line)}
.sd-framework .sd-label{color:var(--ivy-ink)}
.sd-framework ol{margin:0;padding:0;list-style:none;display:grid;gap:6px;counter-reset:bucket}
.sd-framework li{counter-increment:bucket;padding:8px 10px;background:#fff;border:1px solid var(--ivy-line);border-radius:2px;font-size:13px;color:var(--ivy-ink)}
.sd-framework li::before{content:counter(bucket) '.';margin-right:8px;font-weight:700}
.sd-table{grid-area:table;background:var(--violet);border-color:var(--violet-line)}
.sd-table .sd-label{color:var(--violet-ink)}
.sd-table table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--violet-line);font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.sd-table th,.sd-table td{padding:5px 7px;border:1px solid var(--violet-line);text-align:right;white-space:nowrap}
.sd-table thead th{background:#F5F1F6;color:var(--violet-ink);font-weight:700;text-align:right}
.sd-table th[scope=row]{text-align:left;font-weight:700;color:var(--violet-ink)}
.sd-table thead th:first-child{text-align:left}
.sd-total th,.sd-total td{font-weight:700;border-top:2px solid var(--violet-ink)}
.sd-box{display:inline-block;padding:2px 6px;border:2px solid var(--violet-ink);border-radius:2px}
.sd-aside{margin:8px 0 0;font:600 13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--violet-ink);text-align:right}
.sd-final{grid-area:final;background:var(--rose);border-color:var(--rose-line);align-self:end}
.sd-final dl div{grid-template-columns:minmax(0,1fr) auto}
.sd-final dd{text-align:right}
.sd-final .sd-label{color:var(--rose-ink)}
.sd-final dt{color:var(--rose-ink)}
.sd-final dd{color:var(--rose-ink);font-weight:650}
.sheet-demo figcaption{margin:10px 0 0;font-size:13px;color:var(--muted)}
.sd-rules h3{margin:0 0 4px;color:var(--violet-ink)}
.sd-rules ol{margin:0;padding-left:22px}
.sd-rules li{padding:8px 0;border-top:1px solid var(--line)}
.sd-rules li:first-child{border-top:0;padding-top:0}
.sd-rules strong{display:block;font-weight:650;color:var(--deep)}
.sd-rules span{font-size:14px;color:var(--muted)}

/* Motion: each region settles in once per click, staggered by its order; table rows fill in after the grid lands.
   Reduced motion shows the finished sheet. Without JavaScript the sheet is simply drawn. */
@keyframes sd-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sheet-js .sd-sheet:not(.is-built) .sd-region{opacity:0}
.sd-sheet.is-built .sd-region{animation:sd-in .32s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*140ms)}
.sd-sheet.is-built .sd-table tbody tr{animation:sd-in .26s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(540ms + var(--r,0)*70ms)}
@media(prefers-reduced-motion:reduce){.sheet-js .sd-sheet .sd-region,.sd-sheet.is-built .sd-region,.sd-sheet.is-built .sd-table tbody tr{animation:none;opacity:1;transform:none}}

/* Ten principles: numbered goldenrod cards with the micro example in code. */
.principles-section h2{border-left-color:var(--gold-ink)}
.principles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0 0;padding:0;list-style:none}
.principle{position:relative;padding:16px 18px 16px 58px;background:var(--gold);border:1px solid var(--gold-line);border-radius:6px}
.p-n{position:absolute;left:16px;top:16px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gold-ink);color:#fff;font:700 12px/1 system-ui,-apple-system,sans-serif}
.principle h3{margin:3px 0 6px;color:var(--gold-ink)}
.principle p{margin:0 0 10px;font-size:14px;line-height:1.55}
.p-example{margin:0}
.p-example code{display:block;padding:10px 12px;background:#fff;border:1px solid var(--gold-line);border-radius:4px;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);white-space:normal}

/* Six moves as a stepper, traps in a grey wash below. */
.exhibits-section h2{border-left-color:var(--lake-ink)}
.moves{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:16px 0 0;padding:0;list-style:none}
.move{position:relative;padding:14px 14px 12px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--lake-ink);border-radius:6px}
.move-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-bottom:8px;border-radius:50%;background:var(--lake);border:1px solid var(--lake-line);color:var(--lake-ink);font:700 12px/1 system-ui,-apple-system,sans-serif}
.move h3{margin:0 0 6px;font-size:18px;color:var(--lake-ink)}
.move p{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.traps{max-width:880px;margin:24px 0 0;padding:18px 22px;background:#F4F3EF;border:1px solid var(--line);border-radius:6px}
.traps h3{margin:0 0 8px;color:var(--ink)}
.traps ul{margin:0;padding:0;list-style:none}
.traps li{position:relative;padding:8px 0 8px 18px;border-top:1px solid var(--line);font-size:14px;line-height:1.55}
.traps li:first-child{border-top:0;padding-top:0}
.traps li::before{content:'';position:absolute;left:0;top:16px;width:7px;height:7px;border-radius:50%;background:#737373}
.traps li:first-child::before{top:8px}
.traps strong{color:var(--deep);font-weight:650}

/* Where this connects. */
.connect-section h2{border-left-color:var(--accent)}
.connect{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0 0;padding:0;list-style:none}
.connect li{padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:6px}
.connect a{display:inline-block;min-height:44px;font-weight:600;line-height:1.4;padding:10px 0}
.connect p{margin:0;font-size:14px;color:var(--muted)}

@media(max-width:1100px){.moves{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:899px){main{padding:16px 16px 48px}h1{font-size:26px}.hero-layout{grid-template-columns:1fr}.principles,.connect{grid-template-columns:1fr}}
@media(max-width:600px){.sd-sheet{grid-template-columns:1fr;grid-template-areas:"hyp" "notes" "fw" "table" "final";padding:10px;gap:10px}.sd-table{overflow-x:auto}.sd-table table{min-width:420px}.sd-final{align-self:start;justify-self:stretch}.moves{grid-template-columns:1fr}.page-nav a,.action{flex:1 1 auto;justify-content:center}.sd-status{flex-basis:100%}}
@media print{.skip,.recruiting-nav,.sd-controls,.page-nav{display:none!important}.sheet-js .sd-sheet:not(.is-built) .sd-region{opacity:1}}