/* Blocks page vocabulary.

   The shared grammar every page is built from: section heads, numeral
   strips, ledger rows, bordered mosaics, the type map, and the outro band.
   The chrome (top bar, block band, footer) lives in base.njk; page-specific
   exceptions live in home.css / work.css.

   Rules are structural and hard: 4px closes a major band, 3px draws the
   mosaic grid, 2px separates ledger rows, 1px is a hairline inside black.
   Nothing here is rounded and nothing glows.

   Colour discipline: small text never sits on the raw accent or on bone in
   the raw accent. Accent surfaces read --accent-fg; accent text on bone
   reads --accent-ink. Both flip with the accent (see tokens.css). */

/* ---------- column counts ----------
   Never set --cols with an inline style: inline declarations beat media
   queries, so a mosaic pinned that way stays five columns at 320px and
   pushes the page sideways. These classes lose to the breakpoint rules
   below, which is the whole point. */
.cols-2{--cols:2}.cols-3{--cols:3}.cols-4{--cols:4}.cols-5{--cols:5}

/* ---------- section head ---------- */
.bk-shead{padding:56px var(--gut) 0;display:flex;justify-content:space-between;
  align-items:flex-end;gap:32px}
/* Long words may wrap to a new line, never split down the middle. The two
   display lines set from front matter (the band headline and the outro line)
   are excluded: they shrink to fit instead, so they never need to break. */
.bk-shead h2,.bk-shead .h,.bk-tile .t,.bk-tile h3,.bk-row .t,
.bk-item .t,.bk-notes .t,.bk-statement,.bk-typemap .w,.bk-tile h2,
.bk-posthead h1{overflow-wrap:break-word;word-break:normal;hyphens:none}
.bk-shead h2,.bk-shead .h{font-family:var(--disp);font-weight:400;
  font-size:clamp(34px,5vw,64px);line-height:.95;text-transform:uppercase;color:var(--black)}
.bk-shead .note{font-weight:700;font-size:13px;letter-spacing:var(--label-track);
  text-transform:uppercase;color:var(--mut);padding-bottom:8px;text-align:right}
.bk-shead .note a{color:var(--accent-ink)}
.bk-shead .note a:hover{color:var(--black)}

/* ---------- prose block on bone ---------- */
.bk-prose{padding:56px var(--gut) 0;max-width:1100px}
.bk-prose .kicker{font-weight:700;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mut);margin-bottom:16px}
.bk-prose .claim{font-family:var(--disp);font-weight:400;font-size:clamp(24px,3.4vw,40px);
  line-height:1.1;text-transform:uppercase;color:var(--black)}
.bk-prose .claim em{font-style:normal;color:var(--accent-ink)}
.bk-prose p{font-size:16px;line-height:1.65;color:var(--mut-2);margin-top:20px;max-width:80ch}
.bk-prose p + p{margin-top:14px}

/* ---------- numeral strip ---------- */
.bk-stats{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  border-top:var(--rule) solid var(--black);border-bottom:var(--rule) solid var(--black)}
.bk-stats .stat{padding:36px 44px;border-right:var(--rule-2) solid var(--black);
  display:flex;flex-direction:column;gap:10px}
.bk-stats .stat:last-child{border-right:none}
.bk-stats .n{font-family:var(--disp);font-size:clamp(38px,4.5vw,56px);line-height:1;color:var(--black)}
.bk-stats .stat:first-child .n{color:var(--accent-ink)}
.bk-stats .k{font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--black)}
.bk-stats.is-black{background:var(--black);color:var(--on-black);border-color:var(--black)}
.bk-stats.is-black .stat{border-right-width:1px;border-right-color:var(--hair)}
.bk-stats.is-black .n{color:var(--on-black)}
.bk-stats.is-black .stat:first-child .n{color:var(--accent)}
.bk-stats.is-black .k{color:var(--on-black)}

/* ---------- ledger rows ---------- */
.bk-ledger{margin:24px var(--gut) 0;border-top:var(--rule-2) solid var(--black)}
.bk-row{display:grid;grid-template-columns:60px minmax(0,300px) minmax(0,220px) minmax(0,1fr);
  gap:28px;align-items:baseline;padding:24px 0;border-bottom:2px solid var(--black);
  color:inherit}
.bk-row:last-child{border-bottom-width:var(--rule-2)}
a.bk-row:hover{background:var(--bone-2)}
.bk-row .n{font-family:var(--disp);font-size:22px;color:var(--accent-ink)}
.bk-row .t{font-family:var(--disp);font-size:clamp(22px,2.4vw,30px);text-transform:uppercase;color:var(--black)}
.bk-row .m{font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.bk-row .d{font-size:15px;line-height:1.55;color:var(--mut-2)}

/* ---------- bordered mosaic ---------- */
.bk-grid{margin:24px var(--gut) 0;display:grid;
  grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
  border-top:var(--rule-2) solid var(--black);border-left:var(--rule-2) solid var(--black)}
.bk-tile{border-right:var(--rule-2) solid var(--black);border-bottom:var(--rule-2) solid var(--black);
  padding:32px;display:flex;flex-direction:column;gap:12px;color:var(--black)}
.bk-tile.span-2{grid-column:span 2}
.bk-tile.span-3{grid-column:span 3}
.bk-tile .n{font-family:var(--disp);font-size:clamp(30px,3.4vw,44px);line-height:1;
  -webkit-text-stroke:2px var(--black);color:transparent}
.bk-tile .k{font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
/* A project wordmark replaces the Archivo Black name inside the heading. It
   inherits the tile's foreground through currentColor, so one file serves the
   bone, black and accent grounds. Height is capped and width is free, so a
   long mark shrinks rather than pushing the tile wide. */
.bk-wm{display:block;height:clamp(22px,2.6vw,32px);width:auto;max-width:100%;
  margin:2px 0 4px}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bk-tile h3:has(.bk-wm){line-height:0}

.bk-tile h2,.bk-tile h3,.bk-tile .t{font-family:var(--disp);font-weight:400;
  font-size:clamp(22px,2.6vw,34px);line-height:1.05;text-transform:uppercase;color:inherit}
.bk-tile p{font-size:14px;line-height:1.55;color:var(--mut-2)}
.bk-tile .foot{margin-top:auto;padding-top:14px}

.bk-tile.is-accent{background:var(--accent);color:var(--accent-fg)}
.bk-tile.is-accent .n{-webkit-text-stroke:0;color:var(--accent-fg-display)}
.bk-tile.is-accent .k,.bk-tile.is-accent p{color:var(--accent-fg)}

.bk-tile.is-black{background:var(--black);color:var(--on-black)}
.bk-tile.is-black .n{-webkit-text-stroke:0;color:var(--accent)}
.bk-tile.is-black .k{color:var(--accent)}
.bk-tile.is-black p{color:var(--on-black-body)}

/* tags and links inside a tile */
.bk-tags{display:flex;flex-wrap:wrap;gap:6px}
.bk-tags span{font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  border:2px solid var(--black);color:var(--black);padding:3px 8px}
.bk-tile.is-black .bk-tags span{border-color:var(--on-black-mut);color:var(--on-black-mut)}
.bk-tile.is-accent .bk-tags span{border-color:var(--accent-fg);color:var(--accent-fg)}
.bk-links{display:flex;flex-wrap:wrap;gap:8px}
.bk-links a{font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border:2px solid var(--black);color:var(--black);padding:8px 14px}
.bk-links a:hover{background:var(--black);color:var(--on-black)}
.bk-links a.primary{background:var(--black);color:var(--on-black)}
.bk-links a.primary:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.bk-tile.is-black .bk-links a{border-color:var(--on-black);color:var(--on-black)}
.bk-tile.is-black .bk-links a:hover{background:var(--on-black);color:var(--black)}
.bk-tile.is-black .bk-links a.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.bk-tile.is-accent .bk-links a{border-color:var(--accent-fg);color:var(--accent-fg)}
.bk-tile.is-accent .bk-links a:hover{background:var(--accent-fg);color:var(--accent)}
.bk-tile.is-accent .bk-links a.primary{background:var(--black);border-color:var(--black);color:var(--on-black)}

/* ---------- black note band ---------- */
.bk-notes{background:var(--black);color:var(--on-black);margin-top:44px;display:grid;
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.bk-notes .cell{padding:36px 44px;border-right:1px solid var(--hair);
  display:flex;flex-direction:column;gap:10px}
.bk-notes .cell:last-child{border-right:none}
.bk-notes .t{font-family:var(--disp);font-size:clamp(22px,2.4vw,30px);line-height:1.05;
  text-transform:uppercase;color:var(--on-black)}
.bk-notes .cell:first-child .t{color:var(--accent)}
.bk-notes p{font-size:14px;line-height:1.55;color:var(--on-black-body)}
.bk-notes a{color:var(--on-black);border-bottom:2px solid var(--accent)}

/* ---------- post list ---------- */
.bk-list{margin:24px var(--gut) 0;border-top:var(--rule-2) solid var(--black)}
.bk-item{display:grid;grid-template-columns:minmax(0,110px) minmax(0,1fr);gap:28px;
  align-items:baseline;padding:22px 0;border-bottom:2px solid var(--black)}
.bk-item:last-child{border-bottom-width:var(--rule-2)}
.bk-item:hover{background:var(--bone-2)}
.bk-item .when{font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.bk-item .t{font-family:var(--disp);font-weight:400;font-size:clamp(19px,2vw,25px);
  line-height:1.15;text-transform:uppercase;color:var(--black)}
.bk-item .d{font-size:14.5px;line-height:1.55;color:var(--mut-2);margin-top:8px}
.bk-item .bk-tags{margin-top:10px}

/* ---------- type-scale topic map ---------- */
.bk-typemap{padding:44px var(--gut) 0;display:flex;flex-wrap:wrap;align-items:baseline;
  column-gap:44px;row-gap:26px}
.bk-typemap a{display:inline-flex;align-items:baseline;gap:8px;color:var(--black)}
.bk-typemap .w{font-family:var(--disp);line-height:1;text-transform:uppercase;
  font-size:var(--s,24px)}
.bk-typemap a:nth-child(7n+1) .w{color:var(--accent-ink)}
.bk-typemap a:hover .w{color:var(--accent-ink)}
.bk-typemap .n{font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--mut);
  font-variant-numeric:tabular-nums}

/* ---------- outro band (rendered inside the footer) ---------- */
.bk-outro{display:flex;flex-direction:column;gap:14px}
.bk-outro .kicker{font-weight:700;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--on-black-mut)}
.bk-outro .line{font-family:var(--disp);font-weight:400;
  font-size:min(clamp(40px,7vw,104px),calc((100vw - var(--outro-inset,110px)) / var(--w,6)));
  line-height:.95;text-transform:uppercase;color:var(--on-black);
  overflow-wrap:normal;word-break:normal;hyphens:none}
.bk-outro .line .dot{color:var(--accent)}
.bk-outro p{font-size:15px;line-height:1.55;color:var(--on-black-body);max-width:70ch}
.bk-outro.has-cta{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:40px}
/* An outro carrying a CTA and a body paragraph is a signpost, not a sign-off:
   the display line steps down so the button is not shouted over. */
.bk-outro.has-cta .line{font-size:min(clamp(28px,4.2vw,46px),
  calc((100vw - var(--outro-inset,110px)) / var(--w,6)));line-height:1.05}
.bk-outro.has-cta .body{display:flex;flex-direction:column;gap:14px;max-width:900px}
.bk-outro .cta{white-space:nowrap;margin-bottom:8px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .bk-row{grid-template-columns:48px minmax(0,1fr);gap:8px 20px}
  .bk-row .n{grid-row:1 / span 3}
  .bk-row .m{grid-column:2}
  .bk-row .d{grid-column:2}
  .bk-grid,.bk-grid.cols-3,.bk-grid.cols-4,.bk-grid.cols-5{--cols:2}
  .bk-tile.span-3{grid-column:span 2}
}
@media (max-width:860px){
  .bk-shead{padding:40px var(--gut-sm) 0;flex-direction:column;align-items:flex-start;gap:10px}
  .bk-shead .note{padding-bottom:0;text-align:left}
  .bk-prose{padding:40px var(--gut-sm) 0}
  .bk-stats,.bk-stats.cols-2,.bk-stats.cols-3,.bk-stats.cols-4,.bk-stats.cols-5{--cols:1}
  .bk-stats .stat{padding:22px var(--gut-sm);border-right:none;
    border-bottom:var(--rule-2) solid var(--black);flex-direction:row;align-items:baseline;gap:16px}
  .bk-stats .stat:last-child{border-bottom:none}
  .bk-stats .n{min-width:76px;font-size:44px}
  .bk-stats.is-black .stat{border-bottom-width:1px;border-bottom-color:var(--hair)}
  .bk-ledger,.bk-grid,.bk-list{margin-left:var(--gut-sm);margin-right:var(--gut-sm)}
  .bk-grid,.bk-grid.cols-2,.bk-grid.cols-3,.bk-grid.cols-4,.bk-grid.cols-5{--cols:1}
  .bk-grid{border-right:var(--rule-2) solid var(--black)}
  .bk-tile{padding:24px 20px}
  .bk-tile.span-2,.bk-tile.span-3{grid-column:span 1}
  .bk-item{grid-template-columns:minmax(0,1fr);gap:6px}
  .bk-notes,.bk-notes.cols-2,.bk-notes.cols-3{--cols:1}
  .bk-notes .cell{padding:24px var(--gut-sm);border-right:none;border-bottom:1px solid var(--hair)}
  .bk-notes .cell:last-child{border-bottom:none}
  .bk-quote{margin:32px var(--gut-sm) 0;padding-left:18px;border-left-width:var(--rule-2)}
  .bk-chips{margin:20px var(--gut-sm) 0}
  .bk-posthead{padding:28px var(--gut-sm) 24px}
  .bk-postmeta{padding:14px var(--gut-sm);border-bottom-width:var(--rule-2)}
  .bk-typemap{padding:32px var(--gut-sm) 0;column-gap:28px;row-gap:18px}
  .bk-typemap .w{font-size:min(calc(var(--s,24px) * .42),9vw)}
  .bk-outro .line{--outro-inset:52px}
  .bk-outro.has-cta{flex-direction:column;align-items:flex-start;gap:22px}
  .bk-outro .cta{margin-bottom:0;align-self:stretch}
}

/* ---------- links inside prose and tiles ---------- */
.bk-tile p a,.bk-prose p a{color:var(--accent-ink);border-bottom:2px solid var(--accent)}
.bk-tile p a:hover,.bk-prose p a:hover{background:var(--accent);color:var(--accent-fg);border-bottom-color:var(--accent)}
.bk-tile.is-black p a{color:var(--on-black);border-bottom-color:var(--accent)}
.bk-tile.is-black p a:hover{background:var(--accent);color:var(--accent-fg)}
.bk-tile.is-accent p a{color:var(--accent-fg);border-bottom-color:var(--accent-fg)}
.bk-tile.is-accent p a:hover{background:var(--accent-fg);color:var(--accent)}

/* ---------- pull quote ---------- */
.bk-quote{margin:44px var(--gut) 0;border-left:var(--rule) solid var(--accent);
  padding:4px 0 4px 28px;font-family:var(--disp);font-weight:400;
  font-size:clamp(19px,2.2vw,26px);line-height:1.25;color:var(--black);max-width:72ch}

/* ---------- topic chips ---------- */
.bk-chips{margin:24px var(--gut) 0;display:flex;flex-wrap:wrap;gap:8px}
.bk-chips a{font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  border:2px solid var(--black);color:var(--black);padding:7px 12px;
  display:inline-flex;align-items:baseline;gap:8px}
.bk-chips a b{font-weight:700;color:var(--mut)}
.bk-chips a:hover{background:var(--black);color:var(--on-black)}
.bk-chips a:hover b{color:var(--on-black-mut)}
.bk-chips a.all{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.bk-chips a.all:hover{background:var(--black);border-color:var(--black);color:var(--on-black)}

/* ---------- contact row (resume meta band) ---------- */
.bk-contact{flex-wrap:wrap;gap:14px 32px;align-items:baseline;
  font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.bk-contact a{color:var(--black);border-bottom:var(--rule-3) solid var(--black);padding-bottom:3px;overflow-wrap:anywhere}
.bk-contact a.lit{border-bottom-color:var(--accent)}
.bk-contact a:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}
.bk-contact .mut{color:var(--mut)}

/* ---------- post header band ---------- */
/* Posts get a compact band rather than the display hero: their titles are
   sentences, and Archivo Black at hero size would run off the page. */
.bk-posthead{background:var(--black);color:var(--on-black);padding:40px var(--gut) 34px}
.bk-posthead .back{font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-black-mut);display:inline-block;margin-bottom:22px}
.bk-posthead .back:hover{color:var(--accent)}
.bk-posthead .when{font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px}
.bk-posthead h1{font-family:var(--disp);font-weight:400;font-size:clamp(28px,4.2vw,52px);
  line-height:1.02;text-transform:uppercase;color:var(--on-black);max-width:24ch}
.bk-postmeta{border-bottom:var(--rule) solid var(--black);padding:18px var(--gut)}
.bk-postmeta .bk-chips{margin:0}