/* day-one-after-si, round 4 (2026-10-04): the first Monday as an operations
   log. A ruled ledger on a full-bleed sheet: timestamps in a monospace column,
   the entry and its log lines in the middle, and where each problem went
   (until Friday, from Monday) in a routing column on the right. A horizontal
   day line across the head indexes the six entries. Log lines type in as the
   reader reaches each hour.
   Linked only from article-day-one-after-si.html. */

.do-body{
  --paper:#f7f5f0; --paper2:#efece4; --ink:#16150f; --ink2:#33312a; --muted:#6b6660;
  --navy:#0e1330; --navy2:#16304F; --red:#e5322d; --red2:#A93A3A; --gold:#B8862F; --green:#2E7D5B;
  --hair:#d9d3c6; --rule:#d6d0c2;
  --serif:Newsreader,Georgia,serif; --sans:Inter,system-ui,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --col:37rem; --gut:max(16px,4vw);
  background:var(--paper);
}
.do-body ::selection{background:var(--ink);color:var(--paper);}
.do-body :focus-visible{outline:2px solid var(--red2);outline-offset:3px;}
.do{display:block;}

/* ---------- opener ---------- */
.do .do-hero{padding:0 var(--gut);background:var(--paper);}
.do .do-in{max-width:66rem;margin:0 auto;padding:clamp(1.6rem,4vw,2.6rem) 0 clamp(2.2rem,5vw,3.4rem);}
.do .back-link{display:inline-block;font:500 .85rem/1.4 var(--sans);color:var(--muted);margin-bottom:clamp(2.4rem,6vw,4.4rem);}
.do .back-link:hover{color:var(--ink);}
.do .do-hero h1{font-family:var(--serif);font-weight:400;font-optical-sizing:auto;font-size:clamp(2.7rem,7vw,5.8rem);line-height:.99;letter-spacing:-.03em;color:var(--ink);margin:0 0 1.5rem;max-width:12ch;}
.do .do-hero .dek{font:400 clamp(1.2rem,2vw,1.5rem)/1.42 var(--serif);color:var(--ink2);max-width:34em;margin:0 0 1.6rem;}
.do .article-meta{font:500 .88rem/1.4 var(--sans);color:var(--muted);margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;border:0;padding:0;}
.do .article-meta b{color:var(--ink);font-weight:600;}
.do .article-meta .sep{width:1.1rem;height:1px;background:var(--hair);}

/* ---------- reading column ---------- */
.do .do-col{max-width:var(--col);margin:0 auto;padding:0 var(--gut);box-sizing:content-box;}
.do .do-col p{font:400 clamp(1.1rem,1.55vw,1.21rem)/1.64 var(--serif);color:var(--ink2);margin:0 0 1.3em;}
.do .do-col p.lede{font-size:clamp(1.24rem,2vw,1.42rem);line-height:1.5;color:var(--ink);}
.do .do-col a,.do .log a:not(.go){color:var(--navy2);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px;}
.do .do-col h2{font:400 clamp(1.8rem,3.4vw,2.5rem)/1.1 var(--serif);font-optical-sizing:auto;letter-spacing:-.02em;color:var(--ink);margin:clamp(3.2rem,6vw,4.6rem) 0 1.1rem;}
.do .do-col p.three b{font-weight:600;color:var(--ink);}

/* ---------- the log sheet ---------- */
.do .log{background:var(--paper2);padding:clamp(2.6rem,6vw,4.4rem) var(--gut) clamp(2.4rem,5vw,3.6rem);margin:clamp(2.6rem,6vw,4rem) 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.do .log-in{max-width:66rem;margin:0 auto;}
.do .log-head h2{font:400 clamp(1.8rem,3.4vw,2.5rem)/1.1 var(--serif);letter-spacing:-.02em;color:var(--ink);margin:0 0 .5rem;}
.do .log-meta{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;font:500 .9rem/1.4 var(--sans);color:var(--muted);margin:0 0 2.2rem;}
.do .log-meta span:first-child{color:var(--ink);font-weight:600;}

/* the day line: the six entries placed by time of day */
.do .dayline{position:relative;list-style:none;margin:0 1.4rem 2.6rem;padding:0;height:3.4rem;border-bottom:1px solid var(--ink2);}
.do .dayline li{position:absolute;left:calc(var(--x) * 1%);bottom:-5px;transform:translateX(-50%);}
.do .dayline li::before{content:"";display:block;width:9px;height:9px;margin:0 auto;box-sizing:border-box;border:1.5px solid var(--ink2);background:var(--paper2);border-radius:50% !important;}
.do .dayline li.al::before{border-color:var(--red2);}
.do .dayline li.done::before{background:var(--ink2);}
.do .dayline li.al.done::before{background:var(--red2);}
.do .log .dayline a{position:absolute;bottom:1.15rem;left:50%;transform:translateX(-50%);font:500 .8rem/1 var(--mono);color:var(--ink2);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;}
.do .dayline li.lo a{bottom:auto;top:1.05rem;}
.do .dayline li.al a{color:var(--red2);}
.do .dayline a:hover{text-decoration:underline;}

/* column heads and the ledger rows */
.do .cols,.do .ent{display:grid;grid-template-columns:7.6rem minmax(0,1fr) 15rem;column-gap:clamp(1.2rem,2.6vw,2.4rem);}
.do .cols{font:500 .78rem/1 var(--sans);color:var(--muted);padding:0 0 .7rem;border-bottom:1px solid var(--ink2);}
.do .ent{padding:clamp(1.6rem,3.2vw,2.4rem) 0;border-bottom:1px solid var(--rule);scroll-margin-top:6rem;}
.do .ent.last{border-bottom:1px solid var(--ink2);}
.do .ts{display:block;font:500 clamp(1.15rem,1.9vw,1.45rem)/1.15 var(--mono);color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;}
.do .alarm .ts{color:var(--red2);}
.do .rp{font:500 .8rem/1.3 var(--sans);color:var(--muted);background:none;border:0;padding:.2rem 0;margin-top:.5rem;cursor:pointer;text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px;}
.do .rp:hover{color:var(--ink);}
.do .ec{min-width:0;}
.do .lines{margin:0 0 1.2rem;}
.do .ec h3.ln{font:600 clamp(1.15rem,1.8vw,1.35rem)/1.3 var(--sans);letter-spacing:-.015em;color:var(--ink);margin:0 0 .6rem;}
.do .sub{list-style:none;margin:0;padding:0;}
.do .sub li{position:relative;padding:.12rem 0 .12rem 1.3rem;font:400 .98rem/1.45 var(--sans);color:var(--ink2);}
.do .sub li::before{content:"";position:absolute;left:.2rem;top:.82em;width:.55rem;height:1px;background:var(--muted);}
.do .sub li.hot{color:var(--red2);font-weight:500;}
.do .sub li.hot::before{background:var(--red2);}
.do .chain li{color:var(--ink);}
.do .ec p{font:400 1.08rem/1.62 var(--serif);color:var(--ink2);margin:0 0 1em;max-width:36rem;}
.do .ec p:last-child{margin-bottom:0;}
.do .rc{border-left:1px solid var(--rule);padding-left:1.1rem;align-self:start;}
.do .rc p{margin:0;font:400 .9rem/1.45 var(--sans);}
.do .rl{display:block;font:600 .74rem/1.3 var(--sans);font-variant-caps:all-small-caps;letter-spacing:.08em;font-size:.9rem;margin-bottom:.15rem;}
.do .rc .fri{color:var(--muted);padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px dotted var(--rule);}
.do .rc .fri .rl{color:var(--muted);}
.do .rc .mon{color:var(--ink);}
.do .rc .mon .rl{color:var(--ink);}
.do .alarm .rc .mon,.do .alarm .rc .mon .rl{color:var(--red2);}
.do .log-ctl{margin:1rem 0 0;text-align:right;}
.do .all{font:500 .85rem/1.3 var(--sans);color:var(--muted);background:none;border:0;padding:.2rem 0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px;}
.do .all:hover{color:var(--ink);}

/* typing: the untyped remainder of a line waits as a faint ghost */
@media screen and (prefers-reduced-motion:no-preference){
  .do .ln .gh{opacity:.3;}
  .do .ln.typing .ty::after{content:"";display:inline-block;width:2px;height:1.05em;margin:0 -2px -.16em 0;background:currentColor;animation:do-caret .9s steps(1) infinite;}
}
@keyframes do-caret{50%{opacity:0;}}

/* ---------- after the log ---------- */
.do .rrcheck{margin:1.6rem 0 0;padding:1.4rem 1.5rem 1.5rem;background:#fff;border:1px solid var(--rule);}
.do .do-col .rr-h{font:600 1.05rem/1.3 var(--sans);color:var(--ink);margin:0 0 .6rem;}
.do .rrq{display:flex;align-items:flex-start;gap:.8rem;padding:.75rem 0;border-top:1px solid var(--paper2);font:400 1.02rem/1.5 var(--serif);color:var(--ink2);}
.do .rrq input{margin-top:.3rem;width:1.05rem;height:1.05rem;accent-color:var(--ink);flex:0 0 auto;cursor:pointer;}
.do .rrq label{cursor:pointer;}
.do .rr-go{margin-top:1rem;font:600 .9rem/1 var(--sans);color:var(--paper);background:var(--ink);border:0;padding:.85rem 1.2rem;cursor:pointer;}
.do .rr-go:hover{background:var(--navy2);}
.do .do-col .rrscore{display:none;margin:1rem 0 0;font:500 .98rem/1.5 var(--sans);padding-top:.9rem;border-top:1px solid var(--paper2);}
.do .do-col .rrscore.show{display:block;}
.do .rrscore.ok{color:var(--green);} .do .rrscore.warn{color:#8a5a12;} .do .rrscore.bad{color:var(--red2);}
.do .poster{max-width:52rem;margin:clamp(2.6rem,6vw,4rem) auto;padding:0 var(--gut);}
.do .poster img{width:100%;height:auto;}
.do .poster figcaption{font:400 .95rem/1.45 var(--serif);color:var(--muted);margin-top:.7rem;}
.do .poster figcaption a{color:var(--navy2);}
.do .do-col p.acts{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;margin-top:1.4rem;}
.do .do-col a.go{font:600 .95rem/1.4 var(--sans);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);}
.do .do-col a.go:hover{color:var(--navy2);border-color:var(--navy2);}
.do .cta-sec{padding:clamp(1.6rem,4vw,2.6rem) 0 clamp(3rem,6vw,4.5rem);}

/* ---------- narrow ---------- */
@media (max-width:900px){
  .do .cols{display:none;}
  .do .ent{grid-template-columns:minmax(0,1fr);row-gap:.8rem;}
  .do .tc{display:flex;align-items:baseline;gap:1rem;}
  .do .rp{margin-top:0;}
  .do .rc{border-left:0;padding:1rem 0 0;border-top:1px dotted var(--rule);display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
  .do .rc .fri{padding:0;margin:0;border:0;}
  .do .rc .only{grid-column:1/-1;}
}
@media (max-width:520px){
  .do .rc{grid-template-columns:1fr;gap:.7rem;}
  .do .dayline{margin:0 .9rem 2.4rem;}
  .do .dayline a{font-size:.72rem;}
}
@media print{
  .do .rp,.do .all{display:none !important;}
  .do .ln .gh{opacity:1 !important;}
}

/* ---------- Color 2026-10-09: lead gold (morning light on the log), red stays the alarm ---------- */
.do-body{--gold2:#8A6413;--gtint:#FBF3E0;--gtint2:#efd9a4;}
.do .do-hero,.do .log,.do .rr-h,.do .do-val i,.do .dayline{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
/* opener: a warm wash, as the light comes up on Monday */
.do .do-hero{background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 40%,var(--gtint) 100%);}
.do .do-hero + .do-col{padding-top:clamp(2.6rem,5vw,3.6rem);}

/* the log sheet: gold-tinted ledger paper with faint rules and a gold head rule */
.do .log{background-color:var(--gtint);border-top:5px solid var(--gold);border-bottom:1px solid #e6d3a6;
  background-image:linear-gradient(to right,rgba(184,134,47,.16) 1px,transparent 1px);background-size:calc(100% / 18) 100%;background-position:0 0;}
.do .log-in{position:relative;background:var(--gtint);box-shadow:0 0 0 1.4rem var(--gtint) !important;}
.do .log-meta span:first-child{color:var(--gold2);}
.do .ent{border-bottom-color:#e6d3a6;}
.do .rc{border-left-color:#e6d3a6;}
.do .rc .fri{border-bottom-color:#e0c995;}
.do .ts{color:var(--gold2);}
.do .alarm .ts{color:var(--red2);}
.do .alarm{background:linear-gradient(90deg,rgba(253,243,243,0),#FDF3F3 12%,#FDF3F3 88%,rgba(253,243,243,0));}

/* the day line in gold, the alarm in red */
.do .dayline{border-bottom:2px solid var(--gold);}
.do .dayline li::before{width:11px;height:11px;border:2px solid var(--gold);background:var(--gtint);}
.do .dayline li{bottom:-6.5px;}
.do .dayline li.done::before{background:var(--gold);}
.do .dayline li.al::before{border-color:var(--red);}
.do .dayline li.al.done::before{background:var(--red);}
.do .log .dayline a{color:var(--gold2);font-weight:600;}
.do .log .dayline li.al a{color:var(--red2);}

/* the value gap */
.do .do-val{margin:2rem 0 2.6rem;padding:1.4rem 0 1.2rem;border-top:2px solid var(--gold);border-bottom:1px solid var(--hair);}
.do .do-col .do-val-n{display:flex;align-items:baseline;gap:1rem;margin:0 0 1.2rem;}
.do .do-val-n b{font:400 clamp(3.4rem,8vw,5rem)/.9 var(--serif);letter-spacing:-.035em;color:var(--gold2);font-variant-numeric:lining-nums;flex:0 0 auto;}
.do .do-val-n span{font:500 .95rem/1.4 var(--sans);color:var(--ink2);max-width:17rem;}
.do .do-val-r{display:grid;grid-template-columns:7rem minmax(0,1fr);align-items:center;gap:1rem;padding:.4rem 0;}
.do .do-val-k{font:500 .85rem/1.3 var(--sans);color:var(--muted);}
.do .do-val-t{display:flex;height:22px;}
.do .do-val-t i{display:block;height:100%;transform-origin:0 50%;}
.do .do-val-t .pr{width:100%;background:var(--navy2);}
.do .do-val-t .dl{width:44%;background:var(--gold);}
.do .do-val-t .gp{width:56%;box-sizing:border-box;border:1.5px dashed var(--gold2);border-left:0;display:flex;align-items:center;justify-content:flex-end;padding-right:.5rem;
  background:repeating-linear-gradient(135deg,rgba(184,134,47,.16) 0 1.5px,transparent 1.5px 7px);}
.do .do-val-t .gp em{font:600 .76rem/1 var(--sans);font-style:normal;color:var(--gold2);white-space:nowrap;}
@media screen and (prefers-reduced-motion:no-preference){
  .do .do-val.armed .do-val-t .pr,.do .do-val.armed .do-val-t .dl{opacity:.22;}
  .do .do-val.armed .do-val-t .gp{opacity:0;}
  .do .do-val.armed.on .do-val-t .pr{opacity:1;transition:opacity .5s;}
  .do .do-val.armed.on .do-val-t .dl{opacity:1;transition:opacity .5s .6s;}
  .do .do-val.armed.on .do-val-t .gp{opacity:1;transition:opacity .6s 1.3s;}
}

/* the three things, marked in gold */
.do .do-col p.three b{background:linear-gradient(transparent 58%,var(--gtint2) 58%,var(--gtint2) 92%,transparent 92%);padding:0 .1em;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;}

/* run-ready check: a form with a gold header bar */
.do .rrcheck{padding:0 1.5rem 1.5rem;border-color:#e0c995;}
.do .do-col .rr-h{margin:0 -1.5rem .4rem;padding:.85rem 1.5rem;background:var(--gold2);color:#fff;font-size:1.02rem;}
.do .rrq input{accent-color:var(--gold2);}
.do .rr-go{background:var(--gold2);}
.do .rr-go:hover{background:var(--ink);}
.do .rrscore.warn{color:var(--gold2);}

@media (max-width:520px){
  .do .do-val-r{grid-template-columns:1fr;gap:.3rem;}
  .do .do-col .do-val-n{flex-direction:column;gap:.5rem;}
}

/* QA 2026-10-10 */
/* the hour grid was eighteen gold rules that matched no hour on the day line; they showed only as stubs above and below the sheet and in the side margins, so they read as scaffolding. The ledger keeps its gold paper and head rule. */
.do .log{background-image:none;}
/* the typing caret was an inline-block, which is a line-break opportunity, so a line could wrap mid-word at the caret while typing ("The a / lert"); an empty inline with a right border draws the same caret without a break point */
@media screen and (prefers-reduced-motion:no-preference){
  .do .ln.typing .ty::after{display:inline;width:auto;height:auto;margin:0 -2px 0 0;background:none;border-right:2px solid currentColor;}
}