/* =========================================================
   The Work page (work.html). Editorial on purpose: paper, one serif,
   hairlines, one photo. It is the opposite of the desk — nothing to
   discover, everything readable at once — and it stays paper in both
   themes, because it is a page you hand to someone, not a room.
   System fonts only: no download stands between the link and the words.

   One spacing scale, so the rhythm reads as deliberate: 8 inside a row,
   16 between a label and its list, 64 between sections (48 on a phone).
   Every list hangs from the same hairline, so the sections line up as
   one column from the header down.
   ========================================================= */
:root{
  --paper:#f6f4ef; --ink:#1a1a1a; --ink-2:#3a3936; --ink-3:#55534e; --mute:#6f6d67; --rule:#cfccc4;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --sec:64px;
}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
  -webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}

.wk{max-width:760px;margin:0 auto;
  padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(64px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}

.wk-top{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--sans);font-size:13px;color:var(--mute);margin-bottom:48px}
.wk-top a{text-decoration:none}
.wk-top a:hover{color:var(--ink)}
.wk-lang button{font:inherit;color:inherit;background:none;border:0;padding:4px 2px;cursor:pointer}
.wk-lang button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* the header: photo and name side by side, the text sitting on the
   photo's baseline so the two read as one block */
.wk-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:end}
.wk-photo{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;
  background:var(--rule)}
.wk-name{font-weight:400;font-size:clamp(44px,7vw,60px);line-height:1;letter-spacing:-.01em;margin:0}
.wk-lede{font-size:19px;line-height:1.5;color:var(--ink-2);margin:16px 0 0}
.wk-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:24px;font-family:var(--sans);font-size:14px}
.wk-links a{color:var(--ink-3);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px}
.wk-links a:hover{color:var(--ink);text-decoration-color:var(--ink)}

.wk-sec{margin-top:var(--sec)}
.wk-h{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin:0 0 16px}
.wk-list{list-style:none;margin:0;padding:0;border-top:.5px solid var(--rule)}
.wk-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline;
  padding:16px 0;border-bottom:.5px solid var(--rule)}
.wk-t{font-size:22px;line-height:1.25}
.wk-t a{text-decoration:none}
.wk-t a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.wk-arr{font-family:var(--sans);font-size:13px;color:var(--mute)}
.wk-d{margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--ink-3)}
.wk-y{font-family:var(--sans);font-size:12px;color:var(--mute);white-space:nowrap}
.wk-line{padding:12px 0;font-size:17px;line-height:1.45}
.wk-where{color:var(--mute)}

/* What I do: two across, so the longest name never wraps and every row
   is the same height; each sits on the same hairline as the lists */
.wk-do{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:40px;border-top:.5px solid var(--rule)}
.wk-do li{padding:14px 0;border-bottom:.5px solid var(--rule);font-size:19px;line-height:1.3}

/* the ask: two ways in, side by side, then the address */
.wk-foot{margin-top:80px;padding-top:24px;border-top:1px solid var(--ink);
  display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;align-items:baseline}
.wk-cta{font-size:26px;line-height:1.2;text-decoration:none}
.wk-cta:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.wk-mail{grid-column:1/-1;font-family:var(--sans);font-size:14px;color:var(--ink-3)}

a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

@media (max-width:640px){
  :root{--sec:48px}
  .wk{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  .wk-top{margin-bottom:24px}
  .wk-head{grid-template-columns:1fr;gap:24px}
  .wk-name{font-size:44px}
  .wk-lede{font-size:18px}
  .wk-t{font-size:20px}
  .wk-row{gap:12px}
  .wk-do{grid-template-columns:1fr}
  .wk-do li{padding:12px 0;font-size:18px}
  .wk-foot{grid-template-columns:1fr;margin-top:64px}
  .wk-cta{font-size:24px}
}