/* =========================================================================
   The Fix List: the sample deliverable (2026-10-27)
   16:9 sheets, so the same file prints, exports to PDF and screenshots for
   the offer page. Consumes tokens.css only. The cover reuses the split KC;
   the timeline reuses the homepage record's line-and-dot language, so the
   deliverable reads as the same practice as the site.
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body.doc{background:var(--color-mat);color:var(--color-ink);font:400 15px/1.5 var(--font-sans);-webkit-font-smoothing:antialiased;
  --soft:var(--color-soft);--psoft:var(--color-paper-soft);padding:32px 0;overflow-x:auto}
.doc .serif{font-family:var(--font-serif);font-weight:var(--weight-serif);letter-spacing:-.025em;margin:0}
.doc .serif em{font-weight:var(--weight-serif-italic)}
.doc h1.serif{font-weight:var(--weight-display)}
.doc .lbl{margin:0;font:400 9.5px/1.7 var(--font-mark);letter-spacing:.04em;text-transform:uppercase;color:var(--soft)}
.doc .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.sheet{position:relative;width:1280px;height:720px;margin:0 auto 32px;padding:56px 64px;background:var(--color-paper);overflow:hidden;
  box-shadow:0 1px 0 rgba(28,26,22,.08)}
.sh{max-width:900px}
.sh h2{margin-top:10px;font-size:46px;line-height:1.02}
.sh .note{margin:12px 0 0;font-size:13.5px;color:var(--soft)}
.sample{position:absolute;left:64px;bottom:26px;margin:0;font-size:11.5px;color:var(--soft)}
.pg{position:absolute;right:64px;bottom:26px;margin:0;font:400 18px var(--font-serif);color:var(--soft)}

/* 1. cover: the split mark, the client, what is inside */
.cover{padding:0;display:grid;grid-template-rows:1fr 1fr;background:linear-gradient(var(--color-paper) 50%,var(--color-ink) 50%)}
.cover-top,.cover-bot{position:relative;z-index:2;padding:52px 64px}
.cover-top h1{margin-top:16px;font-size:76px;line-height:.94;letter-spacing:-.025em}
.cover-top h1 em{font-style:italic}
.cover-top .for{margin:18px 0 0;max-width:40ch;font-size:16px;color:var(--soft)}
.cover-bot{color:var(--color-paper);padding-top:44px}
.cover-bot .lbl{color:var(--psoft)}
.toc{margin:14px 0 0;padding:0 0 0 20px;font:400 26px/1.35 var(--font-serif)}
.toc li::marker{font-family:var(--font-sans);font-size:13px;color:var(--psoft)}
.cover-bot .by{position:absolute;left:64px;bottom:56px;margin:0;font:600 14px var(--font-sans)}
.cover .kcwrap{position:absolute;right:64px;top:50%;width:440px;aspect-ratio:1743/1210;transform:translateY(-50%);z-index:1}
.cover .kcwrap>div{position:absolute;inset:0}
.cover .kcmark{display:block;width:100%;height:100%}
.cover .kcwrap .top{color:var(--color-ink);clip-path:inset(0 0 50% 0)}
.cover .kcwrap .bot{color:var(--color-paper);clip-path:inset(50% 0 0 0)}
.cover .sample{z-index:2;color:var(--psoft)}

/* 2. the board: three columns, three surfaces */
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;height:440px}
.col{padding:26px 26px 20px}
.col h3{font-size:30px;line-height:1}
.col ul{list-style:none;margin:20px 0 0;padding:0}
.col li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-top:1px solid var(--color-line);font-size:15px;line-height:1.35}
.col li b{font:400 24px/1 var(--font-serif);flex:none}
.working{background:var(--color-paper-2)}
.challenge{background:var(--color-ink);color:var(--color-paper)}
.challenge li{border-color:var(--color-paper-line)}
.opportunity{background:var(--color-stone)}

/* 3. the fix list */
.fixes{width:100%;margin-top:18px;border-collapse:collapse;font-size:14.5px}
.fixes th{padding:0 12px 10px 0;text-align:left;font:500 11px/1.4 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--soft);border-bottom:1.5px solid var(--color-ink)}
.fixes td{padding:7px 12px 7px 0;border-bottom:1px solid var(--color-line);vertical-align:baseline}
.fixes .rk{width:56px;font-size:26px;line-height:1}
.fixes .fx{width:300px;font-weight:700}
.fixes td:nth-child(6){max-width:260px;color:var(--soft)}
.g{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--color-ink);color:var(--color-paper);font:600 12px/1.3 var(--font-sans)}
.g.none{background:transparent;color:var(--soft);border:1px dashed var(--color-line-strong)}
.fixes .parked td{color:var(--soft)}
.fixes .parked .fx{font-weight:500;text-decoration:line-through;text-decoration-thickness:1px}
.fixes .grp th{padding:10px 0 4px;border-bottom:1px solid var(--color-line);font:600 12px/1.3 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink)}
.fixes .grp th span{margin-left:10px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--soft)}
.fixes .inv .rk{color:var(--soft)}
.fixes .risk{display:inline-block;margin-left:6px;padding:2px 7px;border:1px solid var(--color-ink);border-radius:3px;font:600 10.5px/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}

/* 4. alignment: the goal map beside the breaks chart */
.align{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;margin-top:26px;align-items:start}
.map table{width:100%;border-collapse:collapse;font-size:13px}
.map thead th{height:96px;padding:0 4px 10px;vertical-align:bottom;font:600 12px/1.25 var(--font-sans);text-align:center;border-bottom:1.5px solid var(--color-ink)}
.map tbody th{width:220px;padding:14px 12px 14px 0;text-align:left;font-weight:400;line-height:1.35;border-bottom:1px solid var(--color-line)}
.map tbody th b{display:block;font:400 22px/1 var(--font-serif);margin-bottom:2px}
.map td{text-align:center;border-bottom:1px solid var(--color-line)}
.map .pk{background:repeating-linear-gradient(135deg,rgba(28,26,22,.05) 0 6px,transparent 6px 12px);color:var(--soft)}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--color-ink);vertical-align:middle}
.dot.soft{background:transparent;border:1.5px solid var(--color-ink)}
.map figcaption,.breaks figcaption{margin-top:14px;font-size:12.5px;color:var(--soft)}
.map figcaption .dot{width:10px;height:10px}
.breaks{margin:0}
.breaks svg{display:block;width:100%;height:auto;font-family:var(--font-sans)}
.breaks .grid line{stroke:var(--color-line);stroke-width:1}
.breaks .axis{stroke:var(--color-ink);stroke-width:1.5}
.breaks .tick text{font-size:11.5px;fill:var(--soft);text-anchor:middle}
.breaks .tick text[text-anchor="end"]{text-anchor:end}
.breaks .ax{font-size:11px;letter-spacing:.16em;text-transform:uppercase;fill:var(--soft);text-anchor:middle}
.breaks .pt circle{fill:var(--color-ink)}
.breaks .pt text{font-size:12.5px;font-weight:600;fill:var(--color-ink)}
.breaks .pt.pk circle{fill:var(--color-paper);stroke:var(--color-ink);stroke-width:1.5}
.breaks .pt.pk text{font-weight:400;fill:var(--soft)}

/* 5. the quarter: twelve weeks, bars owned by a role */
.quarter{margin-top:30px}
.months{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1.5px solid var(--color-ink);padding-bottom:10px}
.months span{font:400 24px/1 var(--font-serif)}
.track{position:relative;padding:14px 0 6px;background:linear-gradient(90deg,transparent calc(33.333% - .5px),var(--color-line) calc(33.333% - .5px) calc(33.333% + .5px),transparent calc(33.333% + .5px) calc(66.666% - .5px),var(--color-line) calc(66.666% - .5px) calc(66.666% + .5px),transparent calc(66.666% + .5px))}
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:8px 0 0 calc(var(--s) / 12 * 100%);width:calc((var(--e) - var(--s)) / 12 * 100%);
  padding:9px 12px;border-radius:3px;background:var(--color-ink);color:var(--color-paper);font-size:13.5px;white-space:nowrap}
.bar span{font-size:12px;color:var(--psoft);overflow:hidden;text-overflow:ellipsis}
.bar.opt{background:var(--color-paper-2);color:var(--color-ink);border:1.5px dashed var(--color-ink)}
.bar.opt span{color:var(--soft)}
.after{display:grid;grid-template-columns:240px 1fr;gap:24px;margin-top:22px;padding-top:16px;border-top:1px solid var(--color-line)}
.after p:last-child{margin:0;max-width:62ch;font-size:14px;color:var(--soft)}

/* on-screen bar above the sheets */
.docbar{display:flex;justify-content:space-between;align-items:center;gap:24px;width:min(1280px,calc(100vw - 24px));flex-wrap:wrap;margin:0 auto 20px;font-size:14px}
.docbar a{font-weight:600;color:var(--color-ink);text-decoration:underline;text-underline-offset:5px}
.docbar span{color:var(--soft)}

@media print{
  .fit{width:auto;height:auto;margin:0}
  .fit>.sheet{transform:none}
  .docbar{display:none}
  @page{size:1280px 720px;margin:0}
  body.doc{background:none;padding:0}
  .sheet{margin:0;box-shadow:none;break-after:page}
}

/* fit to the screen (2026-10-27): each 1280x720 sheet is scaled as a whole
   inside a box of the scaled size, so nothing reflows. Safari's text
   autosizing is off, or it enlarges the text inside the scaled sheet. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.fit{width:calc(1280px * var(--fit,1));height:calc(720px * var(--fit,1));margin:0 auto calc(32px * var(--fit,1))}
.fit>.sheet{margin:0;transform:scale(var(--fit,1));transform-origin:0 0}
@media print{.fit{width:auto;height:auto;margin:0}.fit>.sheet{transform:none}}