/* ============================================================================
   Home page. Tokens and chrome live in site.css.

   Rewritten rather than patched: 46% of the previous version was unreachable
   -- a .rail2/.pane component whose markup was deleted, a .who card block, a
   .cv row, and 69 lines of reveal CSS gated on a `.js` class that nothing ever
   added. .chips was defined twice, verbatim, with different margins.
   ==========================================================================*/

/* ------------------------------------------------------------ claim / proof
   The layout is the argument. Left states a claim in a human voice; right
   shows the artifact behind it. A reader skims the left column in ten seconds
   and goes right only where a claim earns it.

   The proof column was --rail:clamp(120px,15vw,196px), which reached its
   maximum only above 1307px and fitted its widest row ("Live at first deploy /
   4 pools") with zero pixels to spare. Below that it wrapped and the row
   alignment -- the entire point of the component -- collapsed. It is a third
   of the measure now, with its own ground. */
.works{display:grid;gap:0;margin:0}

.item{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);
  border-top:1px solid var(--rule-soft);
}
.item:first-child{border-top:0}

.claim{padding:clamp(30px,3.6vw,52px) clamp(28px,3.2vw,48px) clamp(30px,3.6vw,52px) 0}
.claim > .said{
  font-family:var(--serif);
  font-size:clamp(25px,2.6vw,34px);
  line-height:1.2;letter-spacing:-.018em;
  margin:0 0 18px;text-wrap:balance;max-width:20ch;
}
.claim h3{
  font-family:var(--sans);font-size:var(--t-label);font-weight:600;
  letter-spacing:.02em;color:var(--ink-faint);margin:0 0 12px;
}
.claim h3 a{text-decoration:none}
.claim h3 a:hover{color:var(--red)}
.claim p{
  margin:0 0 14px;color:var(--ink-soft);
  font-size:var(--t-body);line-height:1.6;max-width:52ch;
}

.go{display:flex;flex-wrap:wrap;gap:10px 20px;margin:20px 0 0;font-family:var(--sans)}
/* One accent, spent once per row. The previous design gave "Break the chain
   yourself" -- an interactive demo -- exactly the treatment it gave "Code",
   nine identical red underlined fragments on one page. */
.go a{font-size:var(--t-label);text-decoration:none;color:var(--ink-soft);border-bottom:1px solid var(--rule)}
.go a:hover{color:var(--ink);border-color:var(--ink)}
.go a.lead{color:var(--red);border-color:var(--red);font-weight:600}

/* ------------------------------------------------------------------- proof */
.proof{
  background:var(--proof);
  padding:clamp(30px,3.6vw,52px) clamp(24px,2.6vw,40px);
  display:grid;align-content:start;gap:clamp(20px,2vw,28px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.fig{margin:0}
.fig b{
  display:block;font-family:var(--mono);font-weight:600;
  font-size:var(--t-figure);line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.fig span{
  display:block;font-family:var(--sans);font-size:var(--t-label);
  color:var(--ink-soft);margin:7px 0 0;
}
/* The signature. Every figure names the command that produced it, so the
   site's claim about evidence is checkable in the same glance that makes it. */
.fig cite{
  display:block;font-family:var(--mono);font-size:var(--t-stamp);
  font-style:normal;color:var(--ink-faint);margin:5px 0 0;line-height:1.4;
}
/* A zero someone chose to publish is the most persuasive number here. */
.fig.zero b{color:var(--red)}
.proof .wide{grid-column:1/-1}

@media (max-width:860px){
  .item{grid-template-columns:1fr}
  .claim{padding:clamp(28px,6vw,40px) 0 24px}
  .proof{margin:0 calc(var(--gut) * -1);padding-left:var(--gut);padding-right:var(--gut)}
}

/* -------------------------------------------------------------- about, etc */
.abt{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(32px,4vw,64px)}
.abt h3{
  font-family:var(--sans);font-size:var(--t-label);font-weight:600;
  letter-spacing:.02em;color:var(--ink-faint);margin:0 0 18px;
}
.abt p{margin:0 0 16px;color:var(--ink-soft);max-width:56ch}

/* A record: year on the left, the thing on the right. The heading used to be
   10px/400/faint while the entry beneath it was 16px/700/ink, so a scanning
   reader parsed the entries before the category that contained them. */
.rec{display:grid;grid-template-columns:6.5rem 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--rule-soft)}
.rec:first-of-type{border-top:0;padding-top:0}
.rec .yr{font-family:var(--mono);font-size:var(--t-stamp);color:var(--ink-faint);font-variant-numeric:tabular-nums;padding-top:5px}
.rec b{display:block;font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.25}
.rec i{display:block;font-style:normal;font-family:var(--sans);font-size:var(--t-label);color:var(--ink-faint);margin:4px 0 0}
.rec span{display:block;color:var(--ink-soft);font-size:17px;margin:9px 0 0;max-width:48ch}

/* Three rules, given the room to be read as rules. */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(28px,3vw,48px)}
.cell h4{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.2;margin:0 0 10px;text-wrap:balance}
.cell p{margin:0;color:var(--ink-soft);font-size:17px;max-width:44ch}

.prior{display:grid;grid-template-columns:14rem 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--rule-soft)}
.prior:first-of-type{border-top:0}
.prior dt{font-family:var(--sans);font-size:var(--t-label);font-weight:600;color:var(--ink)}
.prior dd{margin:0;color:var(--ink-soft);font-size:17px;max-width:60ch}
.prior .kind{display:block;font-family:var(--mono);font-size:var(--t-stamp);color:var(--ink-faint);margin:6px 0 0}

.idcard{display:flex;align-items:center;gap:20px}
/* Square, on the grid. A circular photograph in a page built entirely from
   orthogonal rules was the most template-shaped element on the screen. */
.avatar{width:84px;height:84px;object-fit:cover;background:var(--proof);filter:grayscale(1)}

@media (max-width:640px){
  .rec{grid-template-columns:1fr;gap:6px}
  .prior{grid-template-columns:1fr;gap:8px}
  .idcard{gap:16px}
  .avatar{width:64px;height:64px}
}

/* ------------------------------------------------------------ masthead proof
   The h1 is capped at 18ch, which left roughly 40% of the masthead empty with
   a particle canvas as the answer. This is a better answer: the four numbers a
   reader needs if they never scroll, each naming where it came from. */
header.top .wrap,
header.top{position:relative}
.topline{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 32px;margin:36px 0 0;max-width:520px;
}
@media (min-width:1080px){
  header.top .masthead{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:clamp(40px,5vw,88px);align-items:start}
  .topline{margin:8px 0 0;max-width:none;padding-left:clamp(24px,2.4vw,40px);border-left:1px solid var(--rule)}
  .topline .fig:nth-child(n){grid-column:auto}
}