/* blog.css — long-form layer over design.css.
 *
 * design.css sets the ground, the palette and the two rules. This file adds
 * only what a ten-minute read needs and the rest of the site does not: a
 * reading measure, a heading rank, and a way for figures, code and tables to
 * sit in the flow without shouting.
 *
 * THE MEASURE. Measured, not copied. design.css sets --measure:64ch, which is
 * right for a page a reader scans. But `ch` is the width of "0", and in this
 * sans "0" is 10.58px where the AVERAGE character of these articles' actual
 * prose is 7.85px at 17.5px -- a factor of 1.35. So 64ch is really 86
 * characters per line here, well past the 45-75 band, and it is a page a
 * reader sits inside for ten minutes.
 *
 * Measuring the real prose of all nine articles on a canvas at the rendered
 * font gives 7.852px average advance. 34.5rem = 552px therefore lands at 70.3
 * characters. 70 rather than the textbook 66 because this vocabulary is
 * unusually long-worded -- "Infective Evolutionary Intelligence Theory",
 * "GenomeShardAssembler", "differentially-private" -- and a tighter column
 * breaks those badly. The extra width is paid for with a taller line (1.7),
 * so the eye still finds the start of the next one.
 *
 * RANK. Heading rank here comes from space and a rule, not from size alone.
 * An article's ninth h2 must not be as loud as the page's one h1, so h2 is
 * modest and buys its authority with a hairline above it and a lot of air.
 * h3 is nearly body-size and sits TIGHT against the paragraph it introduces:
 * the coupling is what says "subordinate", and it costs no scale.
 *
 * COLOUR. Nothing in the prose is coloured. The only colour on these pages is
 * the .state--* chip in the verification rail, and that is true.
 */

:root{
  --measure-read:34.5rem; /* 552px = 70 chars of THIS prose, measured */
  --rail:15rem;
}

/* ---- Masthead -------------------------------------------------------- */
.masthead{
  border-bottom:1px solid var(--rule);
  padding:18px var(--pad-x);background:var(--st-0);
}
.masthead__in{
  max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:14px 26px;
  align-items:baseline;justify-content:space-between;
}
.brand{
  font-family:var(--code);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone);border-bottom:0;font-weight:500;
}
.brand:hover{color:var(--flux)}
.brand span{color:var(--bone-3)}
.masthead nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.masthead nav a{
  font-family:var(--code);font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--bone-3);border-bottom:0;
}
.masthead nav a:hover,.masthead nav a[aria-current]{color:var(--flux)}
.masthead nav a[aria-current]{border-bottom:1px solid var(--flux)}

/* ---- Page shell ------------------------------------------------------ */
.sheet{padding:clamp(44px,7vh,84px) var(--pad-x) clamp(56px,9vh,110px)}
.sheet__in{max-width:1200px;margin:0 auto}

.backlink{
  display:inline-block;font-family:var(--code);font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--bone-3);
  border-bottom:0;margin-bottom:clamp(30px,5vh,52px);
}
.backlink:hover{color:var(--flux)}

/* ---- Article: two columns, argument left, verification right ---------
   Three siblings, in reading order: head, verification, prose. On a phone
   that IS the order -- you learn what the piece is, then how far it has been
   taken, then read it. On a wide screen the third column does not exist, so
   the rail lifts into the margin and stays there while the prose scrolls. */
.post__body{
  display:grid;column-gap:clamp(30px,4vw,64px);row-gap:clamp(26px,3.5vh,36px);
  grid-template-columns:minmax(0,1fr);
}
.post__head,.post__prose{min-width:0;max-width:var(--measure-read)}

@media (min-width:1000px){
  .post__body{
    grid-template-columns:minmax(0,var(--measure-read)) minmax(13rem,var(--rail));
    align-items:start;row-gap:0;
  }
  .post__head{grid-column:1;grid-row:1}
  .post__prose{grid-column:1;grid-row:2}
  .post__rail{grid-column:2;grid-row:1/span 2;position:sticky;top:26px;align-self:start}
}

/* ---- Article head ---------------------------------------------------- */
.post h1{
  font-size:clamp(31px,4.2vw,50px);max-width:19ch;line-height:1.04;
  margin:0 0 20px;
}
.post__dek{
  font-size:clamp(16.5px,1.3vw,19px);line-height:1.6;color:var(--bone-2);
  max-width:46ch;margin:0 0 26px;
}
.post__meta{
  font-family:var(--code);font-size:12px;color:var(--bone-3);
  letter-spacing:.04em;margin:0 0 26px;max-width:none;
}
.post__meta span+span::before{content:" · ";color:var(--rule-2)}
.post__pdf{margin:0 0 8px;max-width:none}

/* ---- The verification rail ------------------------------------------
   gl/preview.html puts a live readout beside the instrument. An article
   argues, so the readout beside it says how far the argument has actually
   been taken -- visible at paragraph thirty, not only in a banner at the
   top that the reader has long since scrolled past. */
.rail{border:1px solid var(--rule-2);background:rgba(255,255,255,.62);padding:16px 18px}
.rail__title{
  font-family:var(--code);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-3);margin:0 0 14px;font-weight:500;
  max-width:none;
}
.rail .state{display:inline-block;margin-bottom:12px}
.rail .row{font-size:11.5px}
.rail .row > :first-child{letter-spacing:.04em}
.rail__note{
  font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--bone-2);
  margin:14px 0 0;max-width:none;
}
.rail__note a{font-size:inherit}

/* ---- Status banner (each article's own empirical-status note) --------- */
.status{
  border-left:2px solid var(--rule-2);padding:2px 0 2px 20px;margin:0;
}
.status--unproven{border-left-color:var(--st-unproven)}
.status--implemented{border-left-color:var(--st-designed)}
.status--measured{border-left-color:var(--st-measured)}
.status--designed,.status--record{border-left-color:var(--rule-2)}
/* A session log makes no engineering claim, so it gets no colour: grey is the
   honest reading of "this asserts nothing you could check". */
.state--record{color:var(--bone-3)}
.status__head{
  font-family:var(--code);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-3);margin:0 0 10px;max-width:none;
}
.status p{font-size:14.5px;line-height:1.62;color:var(--bone-2);margin:0 0 10px}
.status p:last-child{margin-bottom:0}

/* ---- Prose ----------------------------------------------------------- */
.prose{font-size:17.5px;line-height:1.7}
.prose > *{max-width:100%}
.prose p{margin:0 0 1.15em;max-width:none}
.prose > p:first-child{margin-top:0}

/* Every h2 and h3 carries an id, so a link can land on a section rather than
   on the top of a ten-minute page. scroll-margin keeps the target off the very
   edge of the viewport when it does. */
.prose h2,.prose h3{scroll-margin-top:24px}

/* Rank by space and a rule, not by size. */
.prose h2{
  font-size:23px;line-height:1.2;letter-spacing:-.02em;font-weight:640;
  max-width:24ch;margin:2.7em 0 .72em;padding-top:1.15em;
  border-top:1px solid var(--rule);
}
.prose > h2:first-child{margin-top:0;padding-top:0;border-top:0}
/* h3 is exactly body size. It outranks the paragraph by weight and by sitting
   tight against it -- never by being bigger, which would put it in competition
   with h2 four sizes above. */
.prose h3{
  font-size:1em;line-height:1.35;letter-spacing:0;font-weight:700;
  max-width:34ch;margin:2.1em 0 .3em;color:var(--bone);
}

.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.6em}
.prose li{margin:0 0 .5em}
.prose li:last-child{margin-bottom:0}
.prose ol{list-style:decimal}
.prose ol li::marker{font-family:var(--code);font-size:.82em;color:var(--bone-3)}
.prose ul li::marker{color:var(--rule-2)}

.prose strong{font-weight:640}
.prose em{font-style:italic}

.prose a{overflow-wrap:break-word}

/* Measured things: monospace. A number quoted mid-sentence is a measurement,
   so it changes typeface -- that is rule 2, at the scale of one word. */
.prose code,.prose .stat-highlight{
  font-family:var(--code);font-size:.86em;font-variant-numeric:tabular-nums;
  color:var(--bone-2);
}
.prose .stat-highlight{color:var(--bone);letter-spacing:-.01em}

/* Code blocks sit in the flow: no dark slab, one edge, and they scroll. */
.prose pre{
  font-family:var(--code);font-size:13px;line-height:1.62;
  background:rgba(255,255,255,.6);border:1px solid var(--rule);
  border-left:2px solid var(--rule-2);
  padding:15px 18px;margin:0 0 1.35em;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  white-space:pre;tab-size:2;color:var(--bone-2);
}
.prose pre code{font-size:inherit;color:inherit}

.prose blockquote{
  margin:1.5em 0;padding:2px 0 2px 20px;border-left:2px solid var(--rule-2);
  color:var(--bone-2);
}
.prose blockquote p{font-size:16.5px}
.prose blockquote p:last-child{margin-bottom:0}

.prose figure{margin:1.6em 0}
.prose figcaption{
  font-family:var(--code);font-size:11.5px;line-height:1.5;color:var(--bone-3);
  margin-top:9px;
}

.prose table{margin:0;font-size:14px}
.prose .scroll-x{margin:0 0 1.35em;border:1px solid var(--rule)}
.prose .scroll-x table th,.prose .scroll-x table td{padding:9px 14px}

/* An inline aside inside the prose (a caveat, a prerequisite). Quiet: a rule
   and a size step, no tint, no rounded box. */
.prose aside,.note{
  border-left:2px solid var(--rule-2);padding:2px 0 2px 20px;
  margin:1.6em 0;font-size:14.5px;line-height:1.6;color:var(--bone-2);
}
.prose aside p,.note p{font-size:inherit;margin:0 0 .7em}
.prose aside p:last-child,.note p:last-child{margin-bottom:0}
.note__head{
  font-family:var(--code);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-3);display:block;margin-bottom:8px;
}

/* The flow diagram on the T5 post: a row of stages, not a graphic. */
.flow{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;
  font-family:var(--code);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-2);margin:0 0 clamp(30px,4vh,44px);
}
.flow span{border:1px solid var(--rule-2);padding:5px 9px;background:rgba(255,255,255,.5)}
.flow span+span::before{
  content:"→";display:inline-block;margin:0 9px 0 -3px;
  color:var(--bone-3);border:0;
}
.flow span+span{border-left:1px solid var(--rule-2)}

/* ---- Series / next ---------------------------------------------------- */
.series{border-top:1px solid var(--rule)}
.series h2{
  font-family:var(--code);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-3);font-weight:500;margin:0 0 20px;
  max-width:none;line-height:1.4;
}
.series ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.series li{margin:0}
.series a{font-size:17px;letter-spacing:-.01em}

/* ---- The index ------------------------------------------------------- */
.idx{border-top:1px solid var(--rule-2)}
.idx__group{margin:0 0 clamp(38px,6vh,64px)}
.idx__group:last-child{margin-bottom:0}
.idx__grouptitle{
  font-family:var(--code);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-3);font-weight:500;
  margin:0 0 4px;display:flex;align-items:center;gap:14px;max-width:none;
}
.idx__grouptitle::after{content:"";flex:1;height:1px;background:var(--rule-2)}
.idx__groupnote{
  font-size:13.5px;color:var(--bone-3);margin:0 0 6px;max-width:58ch;
}

.entry{
  display:grid;gap:6px 30px;grid-template-columns:minmax(0,1fr);
  padding:22px 0;border-bottom:1px solid var(--rule);
  border-left:0;color:inherit;text-decoration:none;
}
a.entry{border-bottom:1px solid var(--rule)}
.entry:hover{background:rgba(255,255,255,.5)}
.entry:hover .entry__title{color:var(--flux)}
.entry__title{
  font-size:20px;line-height:1.25;letter-spacing:-.022em;font-weight:640;
  color:var(--bone);margin:0;max-width:36ch;
}
.entry__sum{font-size:15px;line-height:1.55;color:var(--bone-2);margin:0;max-width:62ch}
.entry__facts{
  font-family:var(--code);font-size:11.5px;letter-spacing:.05em;
  color:var(--bone-3);display:flex;flex-wrap:wrap;gap:6px 14px;
  align-items:baseline;
}
.entry__facts .state{flex:0 0 auto}
/* The one measured sentence about this post's evidence. Mono, because it is
   checkable; not coloured, because the chip already carries the state. */
.entry__ev{
  font-family:var(--code);font-size:12px;line-height:1.5;color:var(--bone-2);
  margin:0;max-width:62ch;
}

@media (min-width:900px){
  .entry{grid-template-columns:minmax(0,1fr) 13.5rem;align-items:start}
  .entry__title,.entry__sum,.entry__ev{grid-column:1}
  .entry__facts{grid-column:2;grid-row:1/span 3;flex-direction:column;gap:9px;
                padding-top:3px}
}

/* ---- The contrast budget on darker strata ---------------------------
   --bone-3 is the dimmest token the palette allows: 5.1:1, but that number is
   measured on --st-0. The strata get darker as the page descends, and the same
   ink measures 4.60:1 on --st-1 and 4.26:1 on --st-2 -- the second is below
   AA, never mind below budget. Rather than mint a new grey per stratum, the
   dimmest text simply stops at --st-0: below it, secondary text is --bone-2
   (7.66:1 on --st-1, 7.09:1 on --st-2). The tonal step from --bone is still
   plainly visible; it just no longer pays for it with legibility.

   The grey state chip is included on purpose. Grey there means "asserts
   nothing you could check", and that meaning has to survive being readable. */
.idx .idx__grouptitle,
.idx .idx__groupnote,
.idx .entry__facts,
.idx .state--designed,
.idx .state--record,
.series h2{color:var(--bone-2)}
.idx .idx__grouptitle::after{background:var(--rule-2)}

/* ---- Foot ------------------------------------------------------------ */
.foot{
  border-top:1px solid var(--rule-2);padding:34px var(--pad-x);
  background:var(--st-2);
}
.foot__in{max-width:1200px;margin:0 auto;font-size:13px;color:var(--bone-2)}
.foot__in p{max-width:70ch;margin:0 0 8px}
.foot__in p:last-child{margin-bottom:0}
.foot__meta{font-family:var(--code);font-size:11.5px;color:var(--bone-2);
            letter-spacing:.05em}

@media (max-width:640px){
  .prose{font-size:16.5px;line-height:1.66}
  .prose h2{font-size:21px;margin-top:2.3em}
  .rail{padding:14px 16px}
}