/* blog.css — the front page's skin for a post (AO 2026-10-05, Brendan: "it should look like a nice blog, borders,
   same fonts as the main page, same black and white toggle ... tune the line breaks ... even blocks").
   Loads AFTER style.css on pages build.py marks as blog posts (body.blog). Tokens are the front page's own:
   black by default, parchment on the toggle; Cinzel for the monumental lines, EB Garamond to read, JetBrains Mono
   for the machine's voice (meta, code, the loop). Paragraphs are justified and hyphenated so they sit as even blocks. */

body.blog{ --measure:37rem; }

/* ---- the frame ---- */
body.blog main{ padding:4.5rem 0 3rem; }
body.blog article{
  border:1px solid var(--rule);
  padding:clamp(1.6rem,1rem + 3vw,3.4rem) clamp(1.3rem,.6rem + 3.2vw,3.2rem) clamp(1.8rem,1rem + 3vw,3rem);
}
body.blog main .wrap{ max-width:calc(var(--measure) + 7rem); }

/* ---- head of the post ---- */
body.blog article > header{ text-align:center; margin-bottom:2.6rem; padding-bottom:2rem; border-bottom:1px solid var(--rule); }
body.blog .eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:1.4rem;
}
body.blog article h1{
  font-family:'Cinzel',serif; font-weight:500; font-style:normal;
  text-transform:uppercase; letter-spacing:.14em; line-height:1.45;
  font-size:clamp(1.2rem,1rem + 1.1vw,1.7rem);
  color:var(--ink-bright); text-wrap:balance;
}
body.blog .byline{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-dim); margin-top:1.2rem;
}

/* ---- even blocks ---- */
body.blog article p{
  text-align:justify; text-justify:inter-word;
  -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:7 3 3;
  text-wrap:pretty; orphans:2; widows:2;
  margin:0 0 1.15em;
}
body.blog article strong{ color:var(--ink-bright); font-weight:500; }
body.blog article em{ font-style:italic; }

/* section heads: Cinzel capitals between hairlines, like the front page's doors */
body.blog article h2{
  font-family:'Cinzel',serif; font-weight:500; font-style:normal;
  text-transform:uppercase; letter-spacing:.2em; text-align:center;
  font-size:clamp(.92rem,.85rem + .3vw,1.05rem); color:var(--ink);
  margin:3.2em 0 1.6em; padding:1.05rem 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}

/* the loop and the set theory: centred, the machine's voice, between hairlines */
body.blog article blockquote{
  border:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  margin:1.9em 0; padding:1.1rem .5rem; text-align:center;
  font-style:normal; color:var(--ink-bright);
}
body.blog article blockquote p{
  text-align:center; -webkit-hyphens:none; hyphens:none; margin:0;
  font-family:'JetBrains Mono',monospace; font-size:clamp(.85rem,.8rem + .25vw,.98rem); line-height:1.7;
}

/* the lyrics: a bordered box, wrapping on a phone rather than scrolling */
body.blog article pre{
  border:1px solid var(--rule); background:transparent; border-radius:0;
  margin:1.7em 0; padding:1.1rem 1.3rem;
  font-family:'JetBrains Mono',monospace; font-size:clamp(.78rem,.74rem + .2vw,.88rem); line-height:1.8;
  color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere;
}
body.blog article pre code{ background:none; padding:0; font:inherit; color:inherit; }

body.blog article hr{ border:0; border-top:1px solid var(--rule); margin:2.6em 0 1.6em; }
body.blog article a{ color:var(--ink-bright); text-decoration:none; border-bottom:1px solid var(--caret); }
body.blog article a:hover,body.blog article a:focus-visible{ border-bottom-color:var(--ink-bright); outline:none; }
/* the closing notes (poem link, lyrics credit) sit small and centred */
body.blog article hr ~ p, body.blog article p:last-of-type em:only-child{ font-size:.86em; color:var(--ink-dim); }
body.blog article hr ~ p{ text-align:center; -webkit-hyphens:none; hyphens:none; }

/* ---- the chrome: the front page's wordmark and colophon ---- */
body.blog .site-head{ border-bottom:1px solid var(--rule); }
body.blog .site-title{ font-family:'Cinzel',serif; text-transform:uppercase; letter-spacing:.22em; }
body.blog .site-foot{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-dim); }

@media (max-width:560px){
  body.blog main{ padding-top:2.4rem; }
  body.blog article{ border-left:0; border-right:0; padding-left:0; padding-right:0; }
  body.blog article p{ text-align:left; }          /* justified text on a phone opens rivers; ragged reads better there */
}

/* fixes after the first screenshot (AO 23:5x) */
body.blog article > header p{ text-align:center; -webkit-hyphens:none; hyphens:none; }
body.blog .site-head .wrap{ padding-right:3.6rem; }          /* clear of the fixed toggle */
@media (min-width:561px){
  body.blog article pre{ white-space:pre; overflow-x:auto; font-size:.74rem; padding:1.1rem; }   /* a lyric line stays one line (69 chars fit) */
}
@media (max-width:560px){
  body.blog .breadcrumb{ display:none; }                      /* the wordmark is the way home on a phone */
}
body.blog article hr{ width:40%; margin-left:auto; margin-right:auto; }   /* the closing rule, centred */