/* Case log · quiet production layout. White page, Georgia headings, system body. Components carry the color:
   one pastel per flow step on the hero tiles and the matching step headings, rose for the recommendation,
   goldenrod for drills. Hairline cards, 6px radius, 44px tap targets, single column under 600px. */
:root{--ink:#302B29;--muted:#5C544E;--line:#D9D9D9;--soft:#EFEDE8;--accent:#800000;--deep:#4B1020;--focus:#315873}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--harper-header-height,90px) + 24px);scroll-snap-type:y proximity}
body{margin:0;background:#fff;color:var(--ink);font:15px/1.6 system-ui,-apple-system,sans-serif}
main{max-width:1264px;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(--muted)}
h1,h2,h3,h4{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}
h4{font-size:17px;line-height:1.35;margin:0 0 6px;color:var(--deep)}
.lede{max-width:760px;margin:0 0 12px}
.note{font-size:13px;color:var(--muted);max-width:760px;margin:0}
p,li,dt,dd,code,a,span{overflow-wrap:anywhere}
.setup,.case,.emulate,.corrections,.watch,.log-own{margin-top:44px}

/* Step hues, shared by the hero tiles and the step headings inside the case. */
.flow-tile[data-step=prompt],.step[data-step=prompt]{--wash:#EEEEEE;--tint-ink:#302B29;--tint-line:#CFCFCF}
.flow-tile[data-step=clarify],.step[data-step=clarify]{--wash:#FBF0D1;--tint-ink:#5C4300;--tint-line:#E9D28A}
.flow-tile[data-step=hypothesis],.step[data-step=hypothesis]{--wash:#D6E9EE;--tint-ink:#002A3A;--tint-line:#9CC7D3}
.flow-tile[data-step=framework],.step[data-step=framework]{--wash:#E7EDDE;--tint-ink:#284734;--tint-line:#B9CDA0}
.flow-tile[data-step=numbers],.step[data-step=numbers]{--wash:#E6DCE8;--tint-ink:#41273B;--tint-line:#BFAEC3}
.flow-tile[data-step=brainstorm],.step[data-step=brainstorm]{--wash:#FAEAD6;--tint-ink:#A9431E;--tint-line:#EFC39B}
.flow-tile[data-step=recommend],.step[data-step=recommend]{--wash:#F3E3E4;--tint-ink:#643335;--tint-line:#D9AEB0}

/* Visual hero: the seven steps as tiles, doubling as the anchor nav. */
.flow-hero{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:24px 0 8px}
.flow-tile{display:flex;flex-direction:column;gap:6px;min-height:156px;padding:14px 14px 12px;background:var(--wash);border:1px solid var(--tint-line);border-top:4px solid var(--tint-ink);border-radius:6px;color:var(--ink);text-decoration:none;transition:box-shadow .15s}
.flow-tile:hover{box-shadow:0 6px 18px rgba(48,43,41,.12)}
.flow-tile:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.flow-n{font:700 12px/1 system-ui,-apple-system,sans-serif;letter-spacing:.06em;color:var(--tint-ink)}
.flow-name{font:400 20px/1.2 Georgia,serif;color:var(--deep)}
.flow-note{font-size:13px;line-height:1.45;color:var(--tint-ink)}

/* The one-page setup: a CSS sheet beside the caser's own notes about it. */
.setup h2{border-left-color:#284734}
.setup-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:28px;align-items:start;margin-top:16px}
.sheet{display:grid;grid-template-columns:2fr 3fr;grid-template-rows:auto minmax(0,1fr);gap:10px;aspect-ratio:5/4;padding:12px;border:1px solid var(--ink);border-radius:3px;background:#fff;box-shadow:4px 4px 0 var(--soft)}
.sheet-hyp{grid-column:1/-1;padding:8px 10px;background:#D6E9EE;border:1px dashed #9CC7D3;color:#002A3A;font:600 13px/1.3 system-ui,-apple-system,sans-serif}
.sheet-notes{display:flex;flex-direction:column;gap:6px;min-height:0;padding:8px 10px;background:#F7F7F7;border:1px dashed #CFCFCF}
.sheet-notes ul{margin:auto 0 0;padding:0;list-style:none;font-size:12px;line-height:1.5;color:var(--muted)}
.sheet-notes li::before{content:'·';margin-right:6px;color:var(--accent);font-weight:700}
.sheet-fw{display:flex;flex-direction:column;gap:8px;min-height:0;padding:8px 10px;background:#E7EDDE;border:1px dashed #B9CDA0}
.sheet-bucket{flex:1 1 0;min-height:0;background:#fff;border:1px solid #B9CDA0;border-radius:2px}
.sheet-label{font:700 11px/1 system-ui,-apple-system,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sheet-fw .sheet-label{color:#284734}
.setup-notes{margin:0;padding:0;list-style:none}
.setup-notes li{padding:10px 0;border-top:1px solid var(--line)}
.setup-notes li:first-child{padding-top:0;border-top:0}

/* The case itself. */
.case{border-top:1px solid var(--line);padding-top:32px}
.case-head .eyebrow{color:var(--accent)}
.case-head h2{border-left:0;padding-left:0;font-size:30px;margin:8px 0 10px}
.case-meta{margin:0 0 6px;font-size:14px;color:var(--muted)}
.setting{max-width:760px;margin:0}
.step{margin-top:32px;scroll-margin-top:0;scroll-snap-align:start}
.step h3{display:flex;align-items:center;gap:10px;padding-left:12px;border-left:4px solid var(--tint-ink)}
.step .n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--tint-ink);color:#fff;font:700 12px/1 system-ui,-apple-system,sans-serif}
.step-note{margin:0 0 12px;font-size:14px;color:var(--muted);max-width:760px}
.prompt-text{max-width:760px;margin:0;padding:16px 20px;background:#F7F7F7;border:1px solid var(--line);border-radius:6px;font-size:16px;line-height:1.65}
.qa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;margin:0}
.qa-row{display:contents}
.qa dt,.qa dd{margin:0;padding:12px 0;border-top:1px solid var(--line)}
.qa dt{font-weight:600;color:var(--deep)}
.qa dt::before,.qa dd::before{display:inline-block;margin-right:8px;padding:0 6px;border-radius:3px;font:700 11px/18px system-ui,-apple-system,sans-serif;vertical-align:1px}
.qa dt::before{content:'Q';background:#FBF0D1;color:#5C4300}
.qa dd::before{content:'A';background:#fff;border:1px solid #E9D28A;color:#5C4300}
.hyp{max-width:760px;margin:0;padding:16px 20px;background:#D6E9EE;border-left:4px solid #002A3A;border-radius:0 6px 6px 0;color:#002A3A}
.buckets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bucket{padding:14px 16px;background:#fff;border:1px solid var(--line);border-top:4px solid #284734;border-radius:6px}
.bucket h4{color:#284734}
.bucket-note{margin:0 0 8px;font-size:13px;color:var(--muted)}
.bucket ul{margin:0;padding-left:18px}
.bucket li{margin:4px 0}
.bucket strong{color:#284734;font-weight:650}
.exhibits{display:grid;gap:14px}
.exhibit{padding:14px 18px;background:#fff;border:1px solid var(--line);border-left:4px solid #41273B;border-radius:0 6px 6px 0}
.exhibit h4{color:#41273B}
.exhibit p{margin:0 0 8px}
.exhibit p:last-child{margin-bottom:0}
.calc code{display:block;padding:10px 12px;background:#F5F1F6;border:1px solid #BFAEC3;border-radius:4px;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);white-space:normal}
.takeaway{font-size:14px;color:var(--muted)}
.method{max-width:760px;margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chips li{flex:1 1 260px;max-width:420px;padding:10px 14px;background:#FAEAD6;border:1px solid #EFC39B;border-radius:8px;font-size:14px;line-height:1.5}
.chips strong{color:#A9431E;font-weight:650}
.rec{max-width:820px;padding:18px 22px;background:#F3E3E4;border:1px solid #D9AEB0;border-left:5px solid #643335;border-radius:0 6px 6px 0;color:#643335;font-size:16px;line-height:1.65}
.rec p{margin:0}

/* How to sound like that in the room. */
.emulate h2{border-left-color:#41273B}
.vibe{max-width:880px;margin:12px 0 28px;font:400 clamp(24px,2.6vw,32px)/1.3 Georgia,serif;color:var(--deep)}
.em-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
.em-block{min-width:0}
.small-caps{margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);font:600 15px/1.3 system-ui,-apple-system,sans-serif;font-variant:small-caps;letter-spacing:.08em;color:#41273B}
.em-block ul{margin:0;padding-left:18px}
.em-block li{margin:6px 0;font-size:14px;line-height:1.55}
.em-block ul.signposts{padding:0;list-style:none}
.signposts li{margin:4px 0;padding:6px 0 6px 14px;border-left:2px solid #D9AEB0;font:400 17px/1.4 Georgia,serif;color:var(--deep)}
.pacing-label{margin-top:28px;max-width:760px}
.pacing{max-width:760px;margin:0 0 24px}
.drills{max-width:880px;padding:18px 22px;background:#FBF0D1;border:1px solid #E9D28A;border-radius:6px}
.drills h3{margin:0 0 4px;color:#5C4300}
.drills-note{margin:0 0 10px;font-size:14px;color:#5C4300}
.drills ol{margin:0;padding-left:22px}
.drills li{margin:8px 0}

/* What the facilitator corrected, and what to watch. */
.corrections h2{border-left-color:#5C4300}
.corrections-list{max-width:880px;margin:12px 0 0;padding:0;list-style:none}
.corrections-list li{position:relative;padding:10px 0 10px 20px;border-top:1px solid var(--line)}
.corrections-list li::before{content:'';position:absolute;left:0;top:19px;width:8px;height:8px;border-radius:50%;background:#5C4300}
.watch h2{border-left-color:#002A3A}
.watch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:12px}
.watch-card{padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:6px}
.watch-card p{margin:0;font-size:14px;line-height:1.55}
.watch-card[data-key=flow]{background:#D6E9EE;border-color:#9CC7D3}.watch-card[data-key=flow] h3{color:#002A3A}
.watch-card[data-key=structure]{background:#E7EDDE;border-color:#B9CDA0}.watch-card[data-key=structure] h3{color:#284734}
.watch-card[data-key=presence]{background:#E6DCE8;border-color:#BFAEC3}.watch-card[data-key=presence] h3{color:#41273B}

/* Log your own. */
.log-own h2{border-left-color:#643335}
.log-own p{max-width:760px}
.action{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;background:#fff;border:1px solid var(--line);border-radius:4px;color:var(--accent);font-weight:600;text-decoration:none}
.action:hover{border-color:#A4343A;background:#FAF4F4}

@media(max-width:1100px){.flow-hero{grid-template-columns:repeat(4,minmax(0,1fr))}.flow-tile{min-height:0}}
@media(max-width:899px){main{padding:16px 16px 48px}h1{font-size:26px}.setup-layout{grid-template-columns:1fr}.sheet{max-width:360px}.buckets,.watch-grid,.em-grid{grid-template-columns:1fr}.qa{grid-template-columns:1fr}.qa dd{border-top:0;padding-top:0}}
@media(max-width:600px){.flow-hero{grid-template-columns:1fr;gap:8px}.flow-tile{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 10px;padding:12px 14px;border-top-width:1px;border-left:4px solid var(--tint-ink)}.flow-n{grid-row:1/3;align-self:start;padding-top:4px}.flow-name{font-size:18px}.chips li{flex-basis:100%;max-width:none}.case-head h2{font-size:24px}.vibe{font-size:22px}.rec,.hyp,.prompt-text{padding:14px 16px}.action{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.flow-tile{transition:none}}
@media print{.skip,.recruiting-nav{display:none!important}.flow-hero{grid-template-columns:repeat(7,minmax(0,1fr))}}

/* October 12: reading rails and distinct chapter surfaces. */
body main:has(.case){max-width:1160px;padding-top:32px}
main .case>.step{padding:28px;border:1px solid var(--tint-line);border-radius:10px;background:color-mix(in srgb,var(--wash) 48%,#fff)}
main>header{padding:32px;background:#243843;color:#f5f1e9;border-radius:10px}
main>header .eyebrow,main>header .note{color:#c8dce4}
main .case-head{padding:28px;background:#332e3d;color:#f5f1e9;border-radius:10px}
main .case-head .eyebrow,main .case-head .case-meta{color:#d9cedf}
.scan-route{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.scan-route>div{padding:16px;border:1px solid #68818c;border-radius:6px;background:#304a56}
.scan-route strong{display:block;font-size:16px;color:#fff}.scan-route p{margin:8px 0 0;font-size:14px;color:#e1e9ed}
.scan-icon{font-size:22px;margin-right:8px;color:#b6dacf}
.step:target{outline:2px solid var(--tint-ink);outline-offset:4px}
@media(max-width:600px){main>header,main .case-head{padding:22px}main .case>.step{padding:18px}.scan-route{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-snap-type:none;scroll-behavior:auto}}
@media print{html{scroll-snap-type:none}main>header,main .case-head,main .case>.step{background:#fff;color:#222}main>header .eyebrow,main>header .note,main .case-head .eyebrow,main .case-head .case-meta{color:#444}}

main>header .scan-route+.note{margin-top:18px}

.profit-path{margin:20px 0;padding:24px;background:#fff;border:1px solid #bfaec3;border-radius:8px}
.profit-path figcaption{font-weight:650;color:#41273b;margin-bottom:16px}.profit-equation{display:flex;align-items:center;gap:16px}.profit-equation>span{flex:1;padding:16px;background:#ece5f0;border-radius:6px}.profit-equation small,.profit-equation strong{display:block}.profit-equation strong{font:28px Georgia,serif}.profit-equation>span:last-child{background:#dce9df}.profit-path p{max-width:72ch}.profit-path p:last-child{margin-bottom:0}
@media(max-width:600px){.profit-path{padding:16px}.profit-equation{gap:6px;flex-wrap:wrap}.profit-equation>span{padding:10px;flex-basis:100%}.profit-equation strong{font-size:24px}.profit-equation>b{margin:auto}}

/* Casing studio: one row of tiles to the subpages. Pastel wash, dark text, hairline. */
.studio-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:18px 0 10px}
.studio-tile{--wash:#F4F3EF;--ink:#302B29;--line:#D9D9D9;display:flex;flex-direction:column;gap:3px;min-height:44px;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--ink);border-radius:6px;background:var(--wash);color:var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.studio-tile:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(48,43,41,.12)}
.studio-tile:focus-visible{outline:2px solid #800000;outline-offset:2px}
.studio-tile strong{font:600 14px/1.3 system-ui,-apple-system,sans-serif}
.studio-tile strong::after{content:" →";font-weight:400}
.studio-tile span{font-size:12px;line-height:1.4;color:#5C544E}
.studio-tile[data-hue=goldenrod]{--wash:#FBF0D1;--ink:#5C4300;--line:#E9D28A}
.studio-tile[data-hue=lake]{--wash:#D6E9EE;--ink:#002A3A;--line:#9CC7D3}
.studio-tile[data-hue=violet]{--wash:#E6DCE8;--ink:#41273B;--line:#C9B7CE}
.studio-tile[data-hue=ivy]{--wash:#E7EDDE;--ink:#284734;--line:#BFD0A8}
.studio-tile[data-hue=terracotta]{--wash:#FAEAD6;--ink:#A9431E;--line:#EFC39B}
.studio-tile[data-hue=rose]{--wash:#F3E3E4;--ink:#643335;--line:#D9AEB0}
@media(max-width:600px){.studio-tiles{grid-template-columns:1fr 1fr;gap:8px}.studio-tile{padding:10px 12px}.studio-tile span{display:none}}
@media(prefers-reduced-motion:reduce){.studio-tile{transition:none}}