/* "2035" article. Shares the homepage sky, street, type scale and rhythm (home.css):
   h1 as .identity h1, h2 as .projects h2, body text 20/18px, secondary text 18/17px,
   spacing 12px inside a block, 24px between blocks, 48px between sections. */
:root {
  --ink: #171714; --muted: #4b4a46; --blue: #0060a0; --hover: #d04000;
  --track: #ece0d1; --line: #dccbb6; --card: #fffaf3;
  --chartA: #0060a0; --chartB: #b3261e; --g1: #7d7c77; --accent: #0060a0; --b1: #0060a0; --b4: #0060a0;
  --b2: #0060a0; --b3: #0060a0; --r1: #b3261e; --r2: #b3261e; --r3: #b3261e; --g2: #7d7c77; --g3: #7d7c77; --lab: #ffffff;
  --f: 'Helvetica Neue', Helvetica, Arial, 'PT Sans', sans-serif;
  --text: 20px; --small: 18px;
  --gap-in: 12px; --gap-block: 24px; --gap-section: 48px;
}
body.home.article { display: block; font-family: var(--f); font-size: var(--text); line-height: 1.4; }
.article *, .article *::before, .article *::after { box-sizing: border-box; }
.article .wrap { position: relative; z-index: 2; width: min(1000px, calc(100% - 48px)); margin-left: max(24px, calc((100% - 1000px) / 2)); padding: 40px 0 var(--gap-section); }

/* Type */
.article h1, .article h2 { color: var(--ink); margin: 0; font-weight: bold; }
.article h1 { font-size: clamp(48px, 5.2vw, 76px); line-height: 1.04; letter-spacing: -2px; max-width: 760px; }
.article h2 { font-size: 28px; line-height: 1.2; margin-bottom: var(--gap-in); max-width: 760px; }
.article p { font-size: var(--text); line-height: 1.4; margin: 0; max-width: 760px; color: var(--ink); }
.article p + p { margin-top: var(--gap-in); }
.article b { font-weight: bold; }
.article a:focus-visible, .article button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Rhythm */
.sec { scroll-margin-top: 24px; }
.wrap > header + .sec { margin-top: var(--gap-block); }
.sec + .sec { margin-top: var(--gap-section); }
.sec > p + .fig, .sec > .fig + p, .sec > .fig + .fig, .sec > p + .skwrap, .sec > p + .cards { margin-top: var(--gap-block); }

/* Figures: secondary text size, no extra rules */
.fig { display: grid; gap: var(--gap-in); }
.fig, .legend, .bar, .bar2, .d1, .d2, .vv, .v, #tip, .d { font-size: var(--small); line-height: 1.4; color: var(--ink); }
.fig p { font-size: var(--small); }
.d2h { color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.bars, .div { display: grid; gap: 9px; }
.bar { display: grid; grid-template-columns: minmax(130px, 250px) 1fr minmax(54px, max-content); gap: 12px; align-items: center; }
.bar .t, .bar2 .t { height: 12px; background: var(--track); border-radius: 2px; position: relative; }
.bar .f, .bar2 .f { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 4px 4px 0; }
.bar .v, .bar2 .v { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#c2 { gap: 16px; }
.bar2 { display: grid; grid-template-columns: minmax(130px, 250px) 1fr minmax(54px, max-content); gap: 6px 12px; align-items: center; }
.bar2 .l { grid-row: span 2; }
.d1 { display: grid; grid-template-columns: minmax(150px, 250px) 1fr; gap: 16px; align-items: center; }
.d2 { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 1fr; gap: 16px; align-items: center; }
.cellb { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.cellb .tr { position: relative; height: 14px; background: var(--track); border-radius: 2px; }
.cellb .f { position: absolute; top: 0; bottom: 0; }
.cellb .zero { position: absolute; top: -4px; bottom: -4px; width: 1px; background: var(--muted); }
.cellb .brk { position: absolute; top: -3px; bottom: -3px; width: 8px; background: repeating-linear-gradient(90deg, var(--track) 0 2px, transparent 2px 4px); }
.cellb .vv { min-width: 5.5em; text-align: right; font-variant-numeric: tabular-nums; }
#c6 .vv { min-width: 10.5em; }

/* Path from task to delivery */
.skwrap { overflow-x: auto; }
.skinner { min-width: 760px; }
#sankey path:hover, #sankey rect[data-tip]:hover { opacity: .85; }
.skcards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
.skpeople { margin-top: var(--gap-block); }
.pstack { display: grid; gap: 8px; }
.d { all: unset; box-sizing: border-box; cursor: pointer; display: grid; align-content: start; gap: 4px; min-height: 72px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; font-family: var(--f); font-size: var(--small); line-height: 1.3; color: var(--ink); }
.d:hover { border-color: var(--hover); }
.d:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.pstack .d { min-height: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; border-left: 3px solid var(--b1); padding: 11px 14px; }

/* Cards */
.cards { display: grid; gap: var(--gap-block); }
.card { display: grid; gap: var(--gap-in); scroll-margin-top: 24px; border-radius: 6px; }
.card.flash { animation: flash 1.4s ease; }
@keyframes flash { from { background: var(--card); } to { background: transparent; } }

#tip { position: fixed; z-index: 20; pointer-events: none; background: var(--ink); color: #fff; padding: 6px 9px; border-radius: 4px; max-width: 280px; opacity: 0; transition: opacity .1s; }

/* The street from the homepage closes the page; its sky overlaps the last section. */
.article .street { margin-top: calc(var(--scene-width) * -0.12); }

@media (max-width: 767px) {
  :root { --text: 18px; --small: 17px; --gap-section: 40px; }
  .article .wrap { width: calc(100% - 40px); margin-left: 20px; padding-top: 32px; }
  .article h1 { font-size: clamp(31px, 7.6vw, 52px); letter-spacing: -1px; }
  .article h2 { font-size: 26px; }
  .wrap > header + .sec { margin-top: 22px; }
  .article .street { margin-top: calc(var(--scene-width) * -0.1); }
}
@media (max-width: 640px) {
  /* Phone: label on its own line, bars directly under it; c3 keeps both columns side by side. */
  .div { gap: 14px; }
  .d1 { grid-template-columns: 1fr; gap: 4px; }
  .d2 { grid-template-columns: 1fr 1fr; gap: 4px 16px; }
  .d2 > span:first-child { grid-column: 1 / -1; }
  .d2h { align-items: start; }
  .d2h span:first-child { display: none; }
  .cellb { gap: 8px; }
  .cellb .vv, #c6 .vv { min-width: 0; }
  #c3 { gap: 20px; }
  .d2 .cellb { grid-template-columns: 1fr; gap: 0; }
  .d2 .cellb .vv { order: -1; text-align: left; }
}
@media (max-width: 560px) {
  .bars { gap: 14px; }
  .bar { grid-template-columns: minmax(0, 1fr) max-content; gap: 4px 12px; }
  .bar .t { grid-column: 1 / -1; grid-row: 2; }
  .bar2 { grid-template-columns: 1fr max-content; gap: 4px 12px; }
  .bar2 .l { grid-row: auto; grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .card.flash { animation: none; } #tip { transition: none; } }