/* Section: work log */
/* ---------- WORK LOG (section 4): stacked sticky rows, the previous ones fold into header strips ---------- */
.wl{--wt:calc(118 * var(--p));--strip:calc(86 * var(--p));padding:calc(160 * var(--u) + 40 * var(--p)) 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:calc(16 * var(--p));font-family:var(--xh);font-weight:var(--fw);font-size:var(--fs-display);line-height:1.02;letter-spacing:var(--ls);max-width:16em;text-wrap:balance}
.wl-list{position:relative;margin-top:calc(90 * var(--u) + 24 * var(--p))}
.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:calc(20 * var(--p));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:var(--ls)}
.wrow h3{font-family:var(--xh);font-weight:var(--fw);font-size:var(--fs-h3);line-height:1.05;letter-spacing:var(--ls)}
.wrow .tg{margin-top:calc(120 * var(--u) + 24 * var(--p));font:var(--eb-font);letter-spacing:-.01em;text-transform:none}
.wrow ul{list-style:none;margin-top:calc(22 * var(--p))}
.wrow li{font-size:var(--fs-body-l);line-height:1.4;letter-spacing:-.01em}
.wrow .ds{padding-top:calc(10 * var(--p));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}
/* Figma 468:3085: title left, green note at the bottom of the right half, rows under */
.wl[data-w="2"]{--strip:calc(96 * var(--p));--bg:var(--night);--ink-2:var(--mist);--line:rgba(255,255,255,.1);display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);align-items:end;
  margin-top:calc(-1 * var(--r-sheet));padding-top:calc(120 * var(--u) + var(--r-sheet));background:var(--bg);color:var(--paper)}
.wl[data-w="2"] h2{grid-column:1;grid-row:1;margin:0;max-width:calc(648 * var(--u) + 2em);font-size:var(--fs-display);line-height:1.1;letter-spacing:var(--ls)}
.wl[data-w="2"] h2 s{color:rgba(244,244,244,.3);text-decoration-thickness:from-font}
.wl[data-w="2"] h2::before{content:"•  Work log";display:block;margin-bottom:max(20px, calc(32 * var(--u)));font:var(--eb-font);letter-spacing:-.01em;color:var(--paper)}
.wl[data-w="2"] .kick{grid-column:2;grid-row:1;margin:0;font-family:var(--xh);font-weight:var(--fw-r);font-size:var(--fs-lead);line-height:1.32;letter-spacing:-.018em;text-transform:none;color:var(--green)}
.wl[data-w="2"] .kick .note-arr{display:none;width:calc(56 * var(--u) + 20 * var(--p));height:auto;margin:calc(14 * var(--p)) 0 0 calc(60 * var(--u) + 40 * var(--p))}
.wl[data-w="2"] .wl-list{grid-column:1 / -1;grid-row:2;margin-top:max(56px, calc(120 * var(--u)))}
/* --rows: how many rows. Row i is (rows - 1 - i) strips taller than the last one, so every row's bottom edge lines up
   and the sticky stack leaves as one block at the end of the list (from main, 921bc06) */
.wl[data-w="2"] .wl-list{--rows:6}
.wl[data-w="2"] .wrow{grid-template-columns:35% minmax(0, 1fr);grid-template-rows:auto auto auto;align-content:start;column-gap:0;border-top:0;padding-top:calc((var(--strip) - var(--fs-h4) * 1.32) / 2);min-height:calc(max(460px, 52vh) + (var(--rows) - 1 - var(--i)) * var(--strip))}
.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;padding-top:.5em;font-family:var(--mono);font-size:var(--fs-caption);line-height:1.4;letter-spacing:0;opacity:.5}
.wl[data-w="2"] .wrow h3{grid-column:2;grid-row:1;display:flex;flex-wrap:nowrap;align-items:flex-start;column-gap:calc(20 * var(--p));font-size:var(--fs-h4);line-height:1.32;letter-spacing:0}
.wrow .chip{display:none}
.wl[data-w="2"] .wrow .chip{display:none;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:none;grid-column:3;grid-row:1;justify-self:end;width:calc(28 * var(--p));height:calc(28 * var(--p));margin-top:calc(6 * var(--p))}
.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:max(16px, calc(32 * var(--u)), calc(var(--strip) / 2 - var(--fs-h4) * .66 + 12px));   /* the last term keeps the text under the next strip */
  padding-top:0;max-width:calc(566 * var(--u) + 4em);line-height:1.4;color:rgba(244,244,244,.6)}
.wl[data-w="2"] .wrow ul{grid-column:2;grid-row:3;margin-top:max(16px, calc(32 * var(--u)));counter-reset:wl}
.wl[data-w="2"] .wrow li{counter-increment:wl;display:grid;grid-template-columns:calc(28 * var(--p)) 1fr;align-items:baseline;padding:max(calc(12px * var(--f)), calc(16 * var(--u))) 0;border-bottom:1px solid rgba(255,255,255,.15);font-family:var(--xh);font-size:var(--fs-body);line-height:1.4}
.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;padding:96px 20px 64px}
  .wl[data-w="2"]{--strip:88px}   /* two-line titles in the folded strip; must out-specify the desktop 108px rule above */
  .wrow{grid-template-columns:52px minmax(0, 1fr);min-height:520px}
  .wrow .ds{grid-column:2;padding-top:16px}
  .wrow .tg{margin-top:28px}
  /* Figma 468:3558 */
  /* mobile: no strips, every case sticks at the same place and the next one slides over it completely */
  .wl[data-w="2"]{--strip:0px;grid-template-columns:minmax(0, 1fr);padding:calc(64px + var(--r-sheet)) 16px 64px}
  .wl[data-w="2"] h2{max-width:none}
  .wl[data-w="2"] h2::before{margin-bottom:24px}
  .wl[data-w="2"] .kick{grid-column:1;grid-row:2;justify-self:start;position:relative;margin-top:40px;font-size:var(--fs-lead)}
  /* hand-drawn arrow from the note down to the cases */
  .wl[data-w="2"] .kick .note-arr{display:block;position:absolute;left:calc(100% + 16px);top:.3em;width:56px;height:56px;margin:0}
  .wl[data-w="2"] .wl-list{grid-row:3;margin-top:40px}
  .wl[data-w="2"] .wrow{grid-template-columns:minmax(0, 1fr);grid-template-rows:auto auto auto auto;padding-top:20px;min-height:calc(100svh - var(--wt))}
  .wl[data-w="2"] .wrow .n{grid-column:1;grid-row:1;padding:0}
  .wl[data-w="2"] .wrow h3{grid-column:1;grid-row:2;margin-top:24px}
  .wl[data-w="2"] .wrow .ds{grid-column:1;grid-row:3;margin-top:16px;max-width:none;font-weight:var(--fw-r)}
  .wl[data-w="2"] .wrow ul{grid-column:1;grid-row:4;margin-top:16px}
  .wl[data-w="2"] .wrow li{grid-template-columns:16px 1fr;padding:9px 0;font-weight:var(--fw-r)}
  .wl[data-w="2"] .wrow:last-child{padding-bottom:20px}
  .wl[data-w="2"] .wl-list::after{height:100svh}   /* the last case stays stuck for a screen while the process sheet rises over it */
  .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}
}