/* ══════════════════════════════════════════════════════════════════════════════════════════
   BUILD NOTES — the blog, built out of the site's own components.
   Requires bb-site.css (tokens, nav, shell, foot).

   THE DESIGN BRIEF THIS ANSWERS
   The first pass was a flat list of three rows in a 720px column on black. It read as a
   document, not as a section of Builder Bots: the site speaks in framed panels on a hairline
   grid (.bw-card, .guild, .tile, .rows), with mono eyebrows in green and a letterspaced
   uppercase display face. A list of Helvetica headlines uses none of that vocabulary.

   So the index is built the way the bot wall and the guild grid are built — a LEAD plate, a
   card grid under it, and a mono register at the bottom that keeps working at fifty posts.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── THE GROUND, TURNED DOWN ────────────────────────────────────────────────────────────
   The code-stream is right for a landing page, where copy arrives in short blocks inside
   panels. Behind nine paragraphs it is noise running under every line — measured on the live
   post, the body text was competing with moving glyphs for the same pixels — and the canvas
   carries a 2.6px blur, so every grey caption sitting on it read as smeared. Ground turned
   down, and everything that is TEXT gets an opaque surface under it. */
#fieldCanvas{opacity:.26}

/* The index is all type, so the shell itself carries the surface and the field shows only in
   the page margins — the same relationship the homepage has, where copy lives inside panels. */
.shell{background:rgba(0,0,0,.72)}

/* ── MASTHEAD ───────────────────────────────────────────────────────────────────────────── */
.bl-head{padding:26px 0 30px;border-bottom:1px solid var(--edge);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
.bl-headl{min-width:0}
/* The site states its facts in tiles (.tiles on the homepage). The masthead had a stranded
   half-empty right side; this is the same component doing the same job. */
.bl-stats{display:grid;grid-template-columns:repeat(2,minmax(112px,1fr));gap:1px;
  background:var(--edge);border:1px solid var(--edge)}
.bl-stat{background:var(--bg);padding:12px 14px}
.bl-stat dt{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--t2);
  margin-bottom:5px}
.bl-stat dd{font-family:var(--mono);font-size:17px;color:var(--t1);letter-spacing:-.3px}
.bl-stat dd b{color:var(--green);font-weight:400}
@media(max-width:860px){.bl-head{grid-template-columns:1fr;gap:26px;align-items:start}}
.bl-k{font-family:var(--mono);font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:var(--green);margin-bottom:12px}
/* The gradient display face from the hero, scaled to a section head — this is the site's
   voice for a page title, and the blog was the only page not speaking in it. */
/* display:inline-block is load-bearing. As a block this element is 1120px wide while the
   words end around 560px, so the white and neon stops of the gradient fell off the right edge
   and the title rendered flat royal blue. Shrink-wrapping the box maps the ramp to the type. */
.bl-title{display:inline-block;font-size:clamp(38px,7vw,74px);font-weight:400;letter-spacing:2px;
  text-transform:uppercase;line-height:.92;margin-bottom:16px;
  background:linear-gradient(120deg,var(--royal) 0%,var(--royal-hi) 30%,#fff 56%,var(--neon) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.bl-lead{color:#9a9aa4;font-size:15px;max-width:58ch}
.bl-lead b{color:var(--t1)}

/* ── LEAD PLATE ─────────────────────────────────────────────────────────────────────────── */
/* The newest note gets the banner at full width. Same frame, hover-lift and green edge as
   .bw-card on the homepage, so it is recognisably the same object family. */
.lead{display:block;margin-top:34px;border:1px solid var(--edge);background:var(--panel);
  overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.lead:hover{border-color:var(--green);transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(0,0,0,.72),0 0 0 1px rgba(57,255,20,.18)}
.lead-art{position:relative;aspect-ratio:1600/600;overflow:hidden;background:
  radial-gradient(120% 90% at 50% 0%,rgba(43,77,255,.20),transparent 60%),
  radial-gradient(90% 80% at 50% 100%,rgba(177,75,255,.16),transparent 62%),#050507}
.lead-art img{width:100%;height:100%;object-fit:cover;display:block}
/* LATEST rides the art, not the caption — it labels the plate, and in the caption it competed
   with the headline for the first read. */
.lead-flag{position:absolute;top:0;left:0;font-family:var(--mono);font-size:9px;letter-spacing:2.5px;
  text-transform:uppercase;color:#06140a;background:var(--green);padding:5px 11px}
.lead-cap{padding:22px 24px 26px;border-top:1px solid var(--edge);
  display:grid;grid-template-columns:1fr auto;gap:10px 26px;align-items:end}
.lead-cap h2{grid-column:1;font-size:clamp(22px,3vw,30px);font-weight:400;letter-spacing:-.01em;
  line-height:1.12;text-wrap:balance}
.lead-cap p{grid-column:1;color:#9a9aa4;font-size:14px;max-width:64ch}
.lead-meta{grid-column:1;font-family:var(--mono);font-size:10.5px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--t2);margin-bottom:2px}
.lead-meta b{color:var(--green);font-weight:400}
.lead-go{grid-column:2;grid-row:2 / span 2;align-self:center;font-family:var(--mono);font-size:10px;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--green);white-space:nowrap;
  border:1px solid var(--green);padding:10px 16px;transition:background .15s,color .15s}
.lead:hover .lead-go{background:var(--green);color:#06140a}
@media(max-width:700px){
  .lead-cap{grid-template-columns:1fr}
  .lead-go{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
}

/* ── CARD GRID ──────────────────────────────────────────────────────────────────────────── */
.grid-k{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--edge);padding-bottom:10px;margin:52px 0 16px;
  font-family:var(--mono);font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:var(--green)}
.grid-k span{color:var(--t2)}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card{display:block;border:1px solid var(--edge);background:var(--panel);overflow:hidden;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.card:hover{border-color:var(--green);transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.72),0 0 0 1px rgba(57,255,20,.18)}
/* 16:9, not the square thumb the art is drawn at — a square cell next to a paragraph made the
   row read as a table. object-fit crops it; the art is composed centre-safe for exactly this. */
.card-art{position:relative;aspect-ratio:1200/560;overflow:hidden;background:
  radial-gradient(120% 90% at 50% 0%,rgba(43,77,255,.18),transparent 60%),#050507}
.card-art img{width:100%;height:100%;object-fit:cover;display:block}
.card-cap{padding:16px 18px 20px;border-top:1px solid var(--edge)}
.card-meta{font-family:var(--mono);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--t2);margin-bottom:9px}
.card-meta b{color:var(--green);font-weight:400}
.card h3{font-size:18px;font-weight:400;line-height:1.2;letter-spacing:-.01em;margin-bottom:7px;
  text-wrap:balance}
.card:hover h3{color:var(--neon)}
.card p{color:#9a9aa4;font-size:13.5px}
@media(max-width:700px){.cards{grid-template-columns:1fr}}

/* ── THE REGISTER ───────────────────────────────────────────────────────────────────────── */
/* Every note, oldest to newest, in the site's .rows shape. The card grid stops scaling at
   about eight posts; this does not, and it is the part that does not need redesigning later. */
.reg{border-top:1px solid var(--edge);margin-top:18px}
.reg a{display:grid;grid-template-columns:26px 116px 1fr auto;gap:14px;padding:13px 4px;
  border-bottom:1px solid var(--edge);font-size:13px;align-items:baseline}
.reg a:hover{background:rgba(43,77,255,.03)}
.reg .idx{color:var(--t2);font-family:var(--mono);font-size:11px}
.reg .dt{color:var(--purple);font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase}
.reg .tl{color:var(--t1)}
.reg a:hover .tl{color:var(--neon)}
.reg .tp{color:var(--t2);font-family:var(--mono);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;justify-self:end}
@media(max-width:700px){
  .reg a{grid-template-columns:22px 1fr;gap:6px 12px}
  .reg .dt{grid-column:2}.reg .tl{grid-column:2}.reg .tp{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   THE ARTICLE
   ══════════════════════════════════════════════════════════════════════════════════════════ */
/* A sticky mono rail carries the date, the topic and the section anchors, so the measure stays
   at a readable 68ch instead of being stretched to fill 1120px. At narrow widths the rail
   folds above the text and the anchors drop — a table of contents you have to scroll past to
   reach the article is furniture, not navigation. */
.art{display:grid;grid-template-columns:184px minmax(0,1fr);gap:56px;margin-top:8px}
/* #3d3d46 mono at 10px over a blurred moving field is not a colour choice, it is an unreadable
   one. The rail now sits on the same sheet as the article and its labels come up to --t2. */
.art-rail{position:sticky;top:26px;align-self:start;font-family:var(--mono);font-size:10.5px;
  letter-spacing:2px;text-transform:uppercase;color:var(--t2);line-height:2;
  background:rgba(3,3,5,.82);border:1px solid var(--edge);padding:22px 20px 24px}
.art-rail dt{color:var(--t2)}
.art-rail dd{color:var(--t1);margin-bottom:15px;letter-spacing:1.6px;font-size:11.5px}
.art-rail dd:last-of-type{margin-bottom:0}
.art-rail dd.on{color:var(--green)}
.art-rail nav{margin-top:22px;padding-top:18px;border-top:1px solid var(--edge)}
.art-rail nav a{display:block;color:var(--t2);padding:5px 0;transition:color .15s;
  text-transform:none;letter-spacing:.2px;font-size:12px;line-height:1.45}
.art-rail nav a:hover{color:var(--green)}
/* A sheet, not a transparent column: 16px type over a moving field is a readability problem
   before it is a taste problem. The panel is the site's own surface, just wide enough to hold
   the measure and nothing more. */
.art-body{min-width:0;font-size:16px;line-height:1.72;max-width:76ch;
  background:rgba(3,3,5,.82);border:1px solid var(--edge);padding:40px 44px 46px}
@media(max-width:620px){.art-body{padding:26px 22px 32px;border-left:0;border-right:0;
  margin-left:-20px;margin-right:-20px}}
@media(max-width:940px){
  .art{grid-template-columns:1fr;gap:0}
  .art-rail{position:static;background:transparent;border:0;padding:0}
  .art-rail nav{display:none}
  .art-rail dl{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:22px}
  .art-rail dd{margin-bottom:0}
}

/* Full-bleed to the sheet's edges — the banner is the top of the page, not a picture inset
   into it. The negative margins mirror .art-body's padding exactly, so a change to one has to
   be a change to both. */
.art-plate{overflow:hidden;margin:-40px -44px 34px;border-bottom:1px solid var(--edge);background:
  radial-gradient(120% 90% at 50% 0%,rgba(43,77,255,.18),transparent 60%),#050507}
.art-plate img{width:100%;height:auto;display:block}
@media(max-width:620px){.art-plate{margin:-26px -22px 26px}}

.art-body .kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green);margin-bottom:16px}
.art-body h1{font-size:clamp(32px,5.2vw,52px);font-weight:400;line-height:1.05;
  letter-spacing:-.02em;text-wrap:balance;margin-bottom:18px}
.art-body .standfirst{font-size:18px;color:#a2a2ac;max-width:58ch;
  padding-bottom:30px;border-bottom:1px solid var(--edge);margin-bottom:34px}
.art-body h2{font-size:24px;font-weight:400;letter-spacing:-.01em;margin:46px 0 14px;
  text-wrap:balance;scroll-margin-top:24px}
.art-body p{margin-bottom:17px;color:var(--t1)}
.art-body p strong,.art-body p b{font-weight:600;color:var(--t1)}
.art-body em{color:var(--t1);font-style:italic}
.art-body a{color:var(--neon)}
.art-body a:hover{text-decoration:underline}
.art-body code{font-family:var(--mono);font-size:.86em;background:var(--panel2);
  border:1px solid var(--edge);padding:1px 5px;color:var(--neon)}
.art-body figure{margin:32px 0}
.art-body figure img{width:100%;height:auto;display:block;border:1px solid var(--edge)}
.art-body figcaption{font-size:13px;color:var(--t2);margin-top:11px;line-height:1.55}

.code-hero{background:var(--panel);border:1px solid var(--edge);padding:26px 22px;margin:26px 0}
.code-big{font-family:var(--mono);font-size:clamp(20px,4.2vw,32px);font-weight:700;
  margin-bottom:18px;word-break:break-all;line-height:1.2}
.code-big .p1{color:var(--t3)} .code-big .p2{color:var(--neon)} .code-big .p3{color:var(--royal)}
.legend{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14px;color:var(--t2)}
.legend dt{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.legend dt.a{color:var(--t3)} .legend dt.b{color:var(--neon)} .legend dt.c{color:var(--royal)}

.barcode{background:#fff;border:1px solid var(--edge);padding:22px 18px;margin:26px 0;text-align:center}
.barcode img{max-width:320px;width:100%;height:auto}
.bc-note{font-size:13px;color:var(--t2);margin-top:14px;text-align:center}

.steps{margin:26px 0;display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge)}
.step{background:var(--panel);padding:19px 20px;display:grid;grid-template-columns:auto 1fr;gap:17px}
.step .n{font-family:var(--mono);font-size:11px;color:var(--neon);padding-top:5px}
.step h3{font-size:16px;font-weight:600;margin-bottom:4px}
.step p{margin:0;font-size:14.5px;color:#9a9aa4}
@media(max-width:520px){.step{grid-template-columns:1fr;gap:7px}}

.pull{border-left:2px solid var(--neon);padding:4px 0 4px 20px;margin:30px 0;
  font-size:19px;line-height:1.5;color:var(--t1)}

/* ── END MATTER ─────────────────────────────────────────────────────────────────────────── */
/* A note about a tool ends AT the tool. This is the blend the blog was missing: a reader who
   finishes the piece is one click from the thing it describes, in the site's own claimband. */
.endcta{margin:52px 0 0;border:1px solid var(--edge);
  background:linear-gradient(180deg,rgba(43,77,255,.05),rgba(0,0,0,0));padding:26px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.endcta h3{font-size:19px;font-weight:400;color:var(--t1);margin-bottom:6px}
.endcta p{font-size:13.5px;color:#9a9aa4;max-width:52ch;margin:0}
.nextnote{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--edge);
  font-family:var(--mono);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--t2)}
.nextnote a{color:var(--t2)}
.nextnote a:hover{color:var(--green)}
.nextnote b{color:var(--t1);font-weight:400;text-transform:none;letter-spacing:.3px;
  font-family:var(--sans);font-size:13px;display:block;margin-top:5px}
.nextnote a:hover b{color:var(--green)}