/* Section: work log */
/* ---------- WORK LOG (section 4): stacked sticky rows, the previous ones fold into header strips ---------- */
.wl{--wt:118px;--strip:86px;padding:calc(160 * var(--u) + 40px) calc(120 * var(--u)) calc(160 * var(--u))}
.wl .kick{font:var(--eb-font);letter-spacing:-.01em;text-transform:none;color:var(--ink-2)}
.wl h2{margin-top:16px;font-family:var(--xh);font-weight:400;font-size:var(--fs-display);line-height:1.02;letter-spacing:-.03em;max-width:16em;text-wrap:balance}
.wl-list{position:relative;margin-top:calc(90 * var(--u) + 24px)}
.wl-list::after{content:"";display:block;height:42vh}   /* lets the last row stick before the stack leaves */
.wrow{position:sticky;top:calc(var(--wt) + var(--i) * var(--strip));display:grid;grid-template-columns:17% minmax(0, 1fr) 26%;column-gap:calc(40 * var(--u));min-height:max(560px, 64vh);padding-top:20px;background:var(--bg);border-top:1px solid rgba(24,24,24,.85)}
.wrow:first-of-type{border-top-color:transparent}
.wrow .n{font-family:var(--xh);font-size:var(--fs-h3);line-height:1;letter-spacing:-.04em}
.wrow h3{font-family:var(--xh);font-weight:400;font-size:var(--fs-h3);line-height:1.05;letter-spacing:-.03em}
.wrow .tg{margin-top:calc(120 * var(--u) + 24px);font:var(--eb-font);letter-spacing:-.01em;text-transform:none}
.wrow ul{list-style:none;margin-top:22px}
.wrow li{font-size:var(--fs-body-l);line-height:1.4;letter-spacing:-.01em}
.wrow .ds{padding-top:10px;font-size:var(--fs-body);line-height:1.45;color:var(--ink)}

/* work log · variant 2: layout of the reference only (page styles kept): title + chip intro, rows "01." · title · ↙,
   description under the title, numbered list with dividers */
.wl .arr{display:none}
.wl[data-w="2"]{--strip:108px;--bg:var(--night);--ink-2:var(--mist);--line:rgba(255,255,255,.24);display:flex;flex-direction:column;
  margin-top:calc(-1 * (40 * var(--u) + 8px));padding-top:calc(200 * var(--u) + 48px);background:var(--bg);color:var(--paper)}
.wl[data-w="2"] h2{order:0;margin:0}
.wl[data-w="2"] h2::before{content:"•  Work log";display:block;margin-bottom:22px;font:var(--eb-font);letter-spacing:-.01em;color:var(--paper)}
.wl[data-w="2"] .kick{order:1;align-self:flex-start;margin:calc(56 * var(--u) + 16px) 0 0 50%;font-family:var(--xh);font-size:var(--fs-body-l);line-height:1.1;letter-spacing:-.01em;text-transform:none;color:var(--red)}
.wl[data-w="2"] .kick .note-arr{display:block;width:calc(56 * var(--u) + 20px);height:auto;margin:14px 0 0 calc(60 * var(--u) + 40px)}
.wl[data-w="2"] .wl-list{order:2;margin-top:calc(24 * var(--u) + 12px)}
.wl[data-w="2"] .wrow{grid-template-columns:35% minmax(0, 1fr) 60px;grid-template-rows:auto auto auto;align-content:start;column-gap:0;border-top:0;padding-top:calc((var(--strip) - var(--fs-h3) * 1.05) / 2);min-height:max(460px, 52vh)}
.wl[data-w="2"] .wrow:first-of-type{border-top-color:transparent}
/* per-row progress: the row's top line fills while that case is being read, then turns back into a plain line */
.wrow .pl{display:none}
.wl[data-w="2"] .wrow .pl{display:block;position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.wl[data-w="2"] .wrow .pl b{position:absolute;left:0;top:-.5px;height:2px;width:100%;background:var(--paper);transform:scaleX(0);transform-origin:left}
.wl[data-w="2"] .mid{display:contents}
.wl[data-w="2"] .wrow .n{grid-column:1;grid-row:1;line-height:1.05}
.wl[data-w="2"] .wrow .n::after{content:"."}
.wl[data-w="2"] .wrow h3{grid-column:2;grid-row:1;display:flex;flex-wrap:nowrap;align-items:flex-start;column-gap:20px}
.wrow .chip{display:none}
.wl[data-w="2"] .wrow .chip{display:inline-block;flex:none;margin-top:.55em;white-space:nowrap;padding:.32em .7em .36em;border-radius:.45em;background:var(--night-3);font-family:var(--sans);font-size:var(--fs-body);line-height:1;letter-spacing:-.01em;color:var(--chip-ink)}
.wl[data-w="2"] .wrow .arr{display:block;grid-column:3;grid-row:1;justify-self:end;width:28px;height:28px;margin-top:6px}
.wl[data-w="2"] .wrow .arr svg{width:100%;height:100%;fill:none;stroke:var(--ink-2);stroke-width:1.5}
.wl[data-w="2"] .wrow .tg{display:none}
.wl[data-w="2"] .wrow .ds{grid-column:2;grid-row:2;margin-top:calc(14 * var(--u) + 10px);padding-top:0;max-width:26em;color:var(--ink-2)}
.wl[data-w="2"] .wrow ul{grid-column:2 / 4;grid-row:3;margin-top:calc(10 * var(--u) + 8px);counter-reset:wl}
.wl[data-w="2"] .wrow li{counter-increment:wl;display:grid;grid-template-columns:28px 1fr;align-items:baseline;padding:calc(10 * var(--u) + 8px) 0;border-bottom:1px solid var(--line);font-family:var(--xh);font-size:var(--fs-body-l);line-height:1.2;letter-spacing:-.015em}
.wl[data-w="2"] .wrow li:last-child{border-bottom:0}
.wl[data-w="2"] .wrow li::before{content:"•";color:var(--ink-2)}



@media (max-width:820px){
  .wl{--wt:104px;--strip:58px;padding:96px 20px 64px}
  .wrow{grid-template-columns:52px minmax(0, 1fr);min-height:520px}
  .wrow .ds{grid-column:2;padding-top:16px}
  .wrow .tg{margin-top:28px}
  .wl[data-w="2"] .wrow{grid-template-columns:52px minmax(0, 1fr) 32px}
  .wl[data-w="2"] .wrow h3{flex-wrap:wrap}   /* the client chip drops under the title instead of pushing past the edge */
  .wl[data-w="2"] .kick{margin-left:0;max-width:none}
  .wl[data-w="2"] .wrow .tg{grid-column:2;grid-row:4;margin-top:20px}
}