/* Figures drawn in HTML for the project pages.
   A box is a step or a thing, a hairline arrow is what passes between them.
   They reflow into one column on a phone and print as they are. */

.fig{ margin:2.4em 0 3em; }
.fig > figcaption{ grid-column:1 / -1; font-family:var(--ui); font-size:.8rem; line-height:1.7; color:var(--mist-dim); margin-top:18px; max-width:76ch; }

.nd{ position:relative; border:1px solid var(--line); background:var(--ink); padding:11px 13px 12px; min-width:0; }
.nd b{ display:block; font-family:var(--ui); font-weight:600; font-size:.9rem; line-height:1.25; letter-spacing:-.005em; color:var(--bone); }
.nd span{ display:block; font-family:var(--ui); font-size:.8rem; line-height:1.45; color:var(--mist-dim); margin-top:5px; }
.nd.em{ border-color:var(--bone); }
.nd.on{ border-color:var(--amber); }
.nd.on b{ color:var(--amber); }
.nd.dash{ border-style:dashed; }

/* who does a step: a small square before its name, repeated in the key */
.nd.mdl b::before, .nd.arc b::before, .nd.aut b::before, .k::before{ content:""; display:inline-block; width:8px; height:8px; margin-right:7px; vertical-align:.06em; box-sizing:border-box; }
.nd.mdl b::before, .k.mdl::before{ background:var(--amber); }
.nd.arc b::before, .k.arc::before{ border:1px solid var(--mist); }
.nd.aut b::before, .k.aut::before{ background:var(--mist-dim); opacity:.45; }
.fig__key{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px 24px; margin:18px 0 0; font-family:var(--ui); font-size:.8rem; color:var(--mist-dim); }

/* arrows: a hairline with an open head */
.ar{ position:relative; display:block; align-self:center; height:1px; background:var(--mist-dim); }
.ar::after{ content:""; position:absolute; right:0; top:-3px; width:7px; height:7px; box-sizing:border-box; border:solid var(--mist-dim); border-width:0 1px 1px 0; transform:rotate(-45deg); }
.ar.v{ width:1px; height:28px; justify-self:center; align-self:auto; }
.ar.v::after{ right:auto; top:auto; bottom:0; left:-3px; transform:rotate(45deg); }

/* a row of steps, any number of them */
.seq{ display:flex; flex-wrap:wrap; align-items:stretch; }
.seq > .nd{ flex:1 1 0; }
.seq > figcaption{ flex:0 0 100%; max-width:none; box-sizing:border-box; padding-right:max(0px, calc(100% - 76ch)); }
.seq > .ar{ flex:0 0 26px; margin:0 6px; }

/* a row of three where the middle one also receives something from above */
.tee{ display:grid; grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr); }
.tee > .ar:not(.v){ margin:0 7px; }
.tee__top{ grid-row:1; grid-column:3; } .tee__down{ grid-row:2; grid-column:3; }
.tee__in{ grid-row:3; grid-column:1; } .tee__a1{ grid-row:3; grid-column:2; }
.tee__mid{ grid-row:3; grid-column:3; } .tee__a2{ grid-row:3; grid-column:4; }
.tee__out{ grid-row:3; grid-column:5; }

/* rows divided by hairlines: a name on the left, what it means on the right */
.rows{ margin:1.4em 0 2em; max-width:68ch; border-top:1px solid var(--line); }
.rows__r{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:24px; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.rows__r p{ margin:0; font-size:1rem; line-height:1.5; }
.rows__r b{ display:block; font-family:var(--ui); font-weight:600; font-size:.9rem; color:var(--bone); }
.rows__r p span{ display:block; font-family:var(--ui); font-size:.8rem; line-height:1.5; color:var(--mist-dim); margin-top:3px; }
.rows__h{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:24px; padding-bottom:9px; font-family:var(--ui); font-size:.8rem; color:var(--mist-dim); }
.rows--3 .rows__r, .rows--3 .rows__h{ grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr); }
.rows--3 .rows__h{ border-bottom:1px solid var(--line); }
.rows--3{ border-top:0; }

@media (max-width:760px){
  .seq{ flex-direction:column; flex-wrap:nowrap; }
  .seq > .ar{ flex:0 0 24px; width:1px; height:24px; margin:0 auto; }
  .seq > .ar::after, .tee > .ar:not(.v)::after{ right:auto; top:auto; bottom:0; left:-3px; transform:rotate(45deg); }
  /* on a phone the two inputs sit side by side above the middle */
  .tee{ grid-template-columns:1fr 1fr; column-gap:10px; }
  .tee > .ar:not(.v){ width:1px; height:24px; margin:0; justify-self:center; align-self:auto; }
  .tee__in{ grid-row:1; grid-column:1; } .tee__top{ grid-row:1; grid-column:2; }
  .tee__a1{ grid-row:2; grid-column:1; } .tee__down{ grid-row:2; grid-column:2; height:24px; }
  .tee__mid{ grid-row:3; grid-column:1 / -1; } .tee__a2{ grid-row:4; grid-column:1 / -1; }
  .tee__out{ grid-row:5; grid-column:1 / -1; }
  .rows__r, .rows__h, .rows--3 .rows__r, .rows--3 .rows__h{ grid-template-columns:1fr; gap:6px; }
  .rows__h{ display:none; }
}

/* ---------- reading rhythm on the project pages ---------- */

/* one sentence, set large, that says why the project matters */
.state{ font-family:var(--body); font-size:clamp(1.35rem,2.3vw,1.9rem); line-height:1.36; letter-spacing:-.005em; color:var(--bone); max-width:36ch; margin:0 0 1.2em; }

/* text with a picture beside it; the picture drops below on a phone */
.split{ display:grid; grid-template-columns:minmax(0,62ch) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:start; margin:0 0 1.6em; }
.split > .prose{ max-width:none; }
.prose + .split, .fig + .split, .split + .split, .rows + .split{ margin-top:2.4em; }
.split + .prose > h3:first-child{ margin-top:1.6em; }
.split > .prose > :last-child{ margin-bottom:0; }
.split__fig{ margin:.35em 0 0; }
.split__fig img{ width:100%; display:block; border:1px solid var(--line); }
.split__fig figcaption{ font-family:var(--ui); font-size:.8rem; line-height:1.65; color:var(--mist-dim); margin-top:9px; }
@media (max-width:980px){ .split{ grid-template-columns:1fr; } .split__fig{ max-width:560px; } }

/* a few real numbers, set large */
.nums{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:1.6em 0 2em; max-width:68ch; border-top:1px solid var(--line); }
.nums > div{ padding:16px 18px 18px 0; border-bottom:1px solid var(--line-soft); }
.nums dd{ margin:0; font-family:var(--display); font-weight:600; font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.05; letter-spacing:-.03em; color:var(--bone); }
.nums dt{ font-family:var(--ui); font-size:.8rem; line-height:1.45; color:var(--mist-dim); margin-top:8px; }
.nums{ display:grid; }
.nums > div{ display:flex; flex-direction:column-reverse; justify-content:flex-end; }
@media (max-width:640px){ .nums{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* a picture across the whole column: left edge with the text, right edge with the rules */
.wide{ margin:2.2em 0 2.6em; }
.wide img{ width:100%; height:auto; display:block; border:1px solid var(--line); }
.wide figcaption{ font-family:var(--ui); font-size:.8rem; line-height:1.65; color:var(--mist); margin-top:12px; max-width:76ch; }
.wide__credit{ display:block; margin-top:3px; color:var(--mist-dim); }
/* two pictures side by side at the same height; each takes width in proportion to its shape (--ar) */
.wide__row{ display:flex; gap:12px; align-items:flex-start; }
.wide__row img{ flex:var(--ar, 1) 1 0; width:0; min-width:0; }
@media (max-width:640px){ .wide__row{ gap:6px; } }
.wide--narrow{ max-width:560px; }   /* a square picture stays at the width of the text */