/* ==========================================================================
   BLOG — index filter + article page prose (shared by blog.html & blog/*.html)
   ========================================================================== */

/* ---------- filter chips (index) ---------- */
.blog-filter{
  display:flex;gap:10px;flex-wrap:wrap;margin:0 0 42px;
}
.chip{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--grey);border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  background:transparent;cursor:pointer;transition:all .25s var(--ease);
}
.chip:hover{color:var(--gold);border-color:var(--line-gold);}
.chip.active{color:#141008;background:var(--gold);border-color:var(--gold);font-weight:600;}
.chip .c-n{opacity:.55;margin-left:6px;}
.blog-grid{transition:opacity .25s var(--ease);}
.blog-grid.filtering .mcard{display:none;}
.blog-grid.filtering .mcard.show{display:flex;}
.mcard.is-hidden{display:none !important;}

/* ---------- article hero ---------- */
.post-hero{padding:150px 0 66px;border-bottom:1px solid var(--line);position:relative;}
.post-hero .ph-kicker{
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px;
}
.post-hero .ph-kicker .sep{color:var(--grey);opacity:.6;}
.post-hero h1{
  font-family:var(--ff-display);font-weight:400;font-size:clamp(30px,4.6vw,52px);
  line-height:1.12;max-width:900px;
}
.post-hero h1 em{font-style:italic;font-weight:300;color:var(--gold);}
.post-hero .ph-meta{
  display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--grey);
}
.post-hero .ph-meta b{color:var(--ivory-dim);font-weight:500;}

/* ---------- cover plate ---------- */
.post-cover{max-width:920px;margin:56px auto 0;border:1px solid var(--line-gold);padding:10px;background:var(--charcoal);}
/* height:auto matters: a cover that carries width/height attributes (worth
   having, they reserve the space and stop the page jumping as it loads) would
   otherwise be drawn at its literal pixel height and stretched. */
.post-cover img{width:100%;height:auto;display:block;}
.post-cover figcaption{
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--grey);padding:12px 6px 2px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.post-cover figcaption i{font-style:normal;color:var(--gold-deep);}

/* ---------- prose ---------- */
.prose{max-width:808px;margin:0 auto;padding:70px 24px 30px;}
.prose > *{margin:0 0 30px;}
.prose p{font-size:16.5px;line-height:1.9;color:var(--ivory-dim);}
/* Direct children only. Scoped, a blockquote or a card that happens to lead
   with a paragraph would take the opening drop cap for itself.
   A post that opens with a download button has its real first paragraph one
   step further down, so the opening treatment follows it there. */
.prose > p:first-of-type:not(:has(> .button:only-child)),
.prose > p:first-of-type:has(> .button:only-child) + p{
  font-size:18.5px;line-height:1.8;color:var(--ivory);
}
.prose > p:first-of-type:not(:has(> .button:only-child))::first-letter,
.prose > p:first-of-type:has(> .button:only-child) + p::first-letter{
  font-family:var(--ff-display);font-size:52px;line-height:.9;color:var(--gold);
  float:left;padding:6px 12px 0 0;
}
/* Links inside body copy have to be visible without shouting. Buttons are
   excluded: they carry their own colours, and gold text on a gold fill is
   an invisible label. */
.prose a:not(.btn):not(.button){
  color:var(--gold);border-bottom:1px solid var(--line-gold);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.prose a:not(.btn):not(.button):hover{color:var(--gold-bright);border-bottom-color:var(--gold);}
.prose h2{
  font-family:var(--ff-display);font-weight:400;font-size:clamp(24px,3vw,31px);line-height:1.25;
  color:var(--ivory);margin:58px 0 22px;padding-top:34px;border-top:1px solid var(--line);
}
.prose h3{
  font-family:var(--ff-display);font-weight:500;font-size:clamp(19px,2.3vw,23px);line-height:1.35;
  color:var(--ivory);margin:46px 0 18px;
}
.prose h4{
  font-family:var(--ff-display);font-weight:500;font-style:italic;font-size:19px;
  color:var(--gold-bright);margin:40px 0 16px;
}
.prose h5,.prose h6{
  font-family:var(--ff-mono);font-weight:600;font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--gold);margin:36px 0 14px;display:flex;align-items:center;gap:12px;
}
.prose h5::before,.prose h6::before{content:'';width:22px;height:1px;background:var(--gold);display:inline-block;opacity:.7;}
.prose ul{margin:0 0 30px;display:flex;flex-direction:column;gap:12px;}
.prose li{
  position:relative;padding-left:28px;font-size:15.5px;line-height:1.75;color:var(--ivory-dim);
}
.prose li::before{
  content:'—';position:absolute;left:0;color:var(--gold);font-family:var(--ff-mono);font-size:12px;top:2px;
}
.prose blockquote{
  position:relative;margin:48px 0;padding:34px 40px;
  border-left:2px solid var(--gold);background:linear-gradient(to right,var(--gold-glow),transparent 65%);
}
.prose blockquote p{
  font-family:var(--ff-display);font-style:italic;font-weight:300;font-size:clamp(19px,2.4vw,24px);
  line-height:1.55;color:var(--ivory);
}
.prose figure{margin:44px 0;}
.prose figure img{width:100%;height:auto;display:block;border:1px solid var(--line);}
.prose figcaption{
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--grey);padding-top:12px;
}
.prose .note{
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:0.06em;color:var(--grey);
  border:1px dashed var(--line-gold);padding:18px 22px;border-radius:4px;
}

/* A short, plain-language definition at the top of a post. Kept deliberately
   quotable: search engines lift the first tight answer they find, and a
   reader who only reads one paragraph should still leave with the idea. */
.prose .keydef{
  margin:0 0 40px;padding:26px 30px;
  border:1px solid var(--line-gold);border-left:2px solid var(--gold);background:var(--charcoal);
}
.prose .keydef b{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
  font-family:var(--ff-mono);font-weight:600;font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);
}
.prose .keydef b::before{content:'';width:22px;height:1px;background:var(--gold);opacity:.7;}
.prose .keydef p{margin:0;color:var(--ivory);}

/* Where a post hands the reader on to the work itself. */
.prose .cta-box{
  margin:54px 0;padding:36px 38px;text-align:center;
  border:1px solid var(--line-gold);background:linear-gradient(to bottom,var(--gold-glow),transparent);
}
.prose .cta-box > span{
  display:block;margin-bottom:14px;
  font-family:var(--ff-mono);font-weight:600;font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--gold);
}
.prose .cta-box p{margin:0 auto 24px;max-width:52ch;color:var(--ivory);}
.prose .cta-box .arr{display:inline-block;transition:transform .3s var(--ease);}
.prose .cta-box .btn:hover .arr{transform:translateX(4px);}

/* Three classes that arrived with the restraining-orders pieces: .button,
   .pull-quote and .callout. Kept to those names so the supplied body could be
   dropped in untouched, and dressed in the journal's gold rather than the
   red of the source package, so they belong to the page they sit on. */
.prose .button{
  display:inline-block;margin:6px 0;padding:14px 26px;
  font-family:var(--ff-mono);font-weight:600;font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;
  color:#141008;background:var(--gold);
  border:1px solid var(--gold);border-radius:3px;
  transition:background .22s var(--ease),border-color .22s var(--ease);
}
.prose .button:hover{background:var(--gold-bright);border-color:var(--gold-bright);color:#141008;}
/* a paragraph holding only a button should not stack both bottom margins */
.prose p > .button:only-child{margin:0;}

.prose blockquote.pull-quote{
  font-family:var(--ff-display);font-style:normal;font-weight:500;
  font-size:clamp(20px,3.1vw,28px);line-height:1.32;
  color:var(--gold-bright);
  margin:48px 0;padding:0 0 0 22px;
  border-left:3px solid var(--gold);background:none;
}
.prose blockquote.pull-quote p{font-family:inherit;font-style:inherit;font-size:inherit;color:inherit;}

.prose .callout{
  display:block;margin:52px 0;padding:32px 34px;
  background:var(--charcoal);
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:3px;
}
.prose .callout p{margin:0 0 14px;}
.prose .callout p:last-child{margin:0;}
.prose .callout strong{font-family:var(--ff-display);font-size:1.18em;color:var(--ivory);}

/* Questions and answers. Tighter than a run of h3s, because there are many
   and they are scanned rather than read. */
.prose .faq{margin:0 0 30px;display:flex;flex-direction:column;gap:2px;background:var(--line);border:1px solid var(--line);}
.prose .faq h3{
  margin:0;padding:24px 28px 0;background:var(--black);
  font-size:clamp(17px,2vw,19px);
}
.prose .faq p{margin:0;padding:12px 28px 24px;background:var(--black);}

/* youtube embed */
.yt{position:relative;aspect-ratio:16/9;border:1px solid var(--line-gold);background:#000;cursor:pointer;overflow:hidden;}
.yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.72;transition:opacity .3s var(--ease);}
.yt:hover img{opacity:.9;}
.yt .yt-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;
}
.yt .yt-play .ring{
  width:68px;height:68px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(10,9,8,0.55);transition:all .3s var(--ease);
}
.yt:hover .yt-play .ring{background:var(--gold);transform:scale(1.06);}
.yt .yt-play .tri{width:0;height:0;border-left:16px solid var(--gold);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px;transition:border-color .3s var(--ease);}
.yt:hover .yt-play .tri{border-left-color:#141008;}
.yt .yt-play span{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ivory-dim);}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- article footer ---------- */
.post-end{border-top:1px solid var(--line);margin-top:40px;}
.post-end .pe-inner{max-width:760px;margin:0 auto;padding:56px 0;}
.pe-sign{
  display:flex;align-items:center;gap:18px;padding:26px 30px;margin-bottom:44px;
  border:1px solid var(--line);background:var(--charcoal);
}
.pe-sign .sig-star{color:var(--gold);font-family:var(--ff-display);font-size:22px;line-height:1;}
.pe-sign .sig-who b{display:block;font-family:var(--ff-display);font-weight:500;font-size:17px;}
.pe-sign .sig-who span{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--grey);}
.pe-sign .sig-eq{margin-left:auto;font-family:var(--ff-mono);font-size:10px;letter-spacing:0.18em;color:var(--gold-deep);white-space:nowrap;}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
.post-nav a{
  background:var(--black);padding:26px 28px;display:flex;flex-direction:column;gap:10px;
  transition:background .25s var(--ease);
}
.post-nav a:hover{background:var(--charcoal-2);}
.post-nav .pn-dir{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);}
.post-nav .pn-title{font-family:var(--ff-display);font-weight:500;font-size:16.5px;line-height:1.45;color:var(--ivory-dim);}
.post-nav a:hover .pn-title{color:var(--ivory);}
.post-nav .pn-next{align-items:flex-end;text-align:right;}
.post-nav .pn-empty{visibility:hidden;}
@media(max-width:640px){.post-nav{grid-template-columns:1fr;}.post-nav .pn-empty{display:none;}}

/* index hero stats */
.blog-stats{
  display:flex;gap:34px;flex-wrap:wrap;margin-top:30px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--grey);
}
.blog-stats b{color:var(--gold);font-weight:600;font-size:15px;display:block;letter-spacing:0.06em;margin-bottom:4px;}


/* ==========================================================================
   MOBILE
   The blog shipped with a single media query - the two-column post-nav - so
   everything below is new. The article page was the worst of it: .prose is a
   direct child of body rather than living inside .wrap, and carried no
   horizontal padding, so on any screen narrower than its measure the text ran
   flush against both edges of the screen. That is fixed on the rule itself,
   above, since it is wrong at every width below 760px rather than only on
   phones.
   ========================================================================== */

@media(max-width:900px){
  .post-hero{padding:118px 0 48px;}
  .post-cover{margin-top:40px;}
}

@media(max-width:640px){
  /* The fixed header is ~98px, so 150px of hero padding pushed the title most
     of a screen down before a word was read. */
  .post-hero{padding:104px 0 40px;}
  .post-hero .ph-kicker{gap:8px;margin-bottom:18px;}
  .post-hero .ph-meta{gap:10px 16px;margin-top:20px;}

  .post-cover{padding:6px;margin-top:32px;}
  .post-cover figcaption{font-size:9px;letter-spacing:0.14em;gap:8px;padding:10px 4px 2px;}

  .prose{padding:48px 22px 24px;}
  .prose > *{margin-bottom:26px;}
  .prose p{font-size:16px;line-height:1.8;}
  .prose p:first-of-type{font-size:17.5px;}
  /* Sized in em so the cap tracks the body text instead of staying at 52px,
     where it swallowed most of the first line on a narrow screen. */
  .prose p:first-of-type::first-letter{font-size:3em;padding:4px 10px 0 0;}
  .prose h2{margin:44px 0 18px;padding-top:26px;}
  .prose h3{margin:36px 0 14px;}
  .prose h4{font-size:18px;margin:32px 0 13px;}
  .prose h5,.prose h6{margin:30px 0 12px;gap:10px;}
  .prose li{font-size:15px;padding-left:22px;}
  /* 40px of side padding is an eighth of a 320px screen. */
  .prose blockquote{margin:34px 0;padding:24px 20px;}
  .prose .note{padding:15px 16px;font-size:11px;}

  /* Three items in one row with the last pushed right by margin-left:auto had
     nowhere to go - the name and the equation collided. */
  .pe-sign{flex-wrap:wrap;gap:14px;padding:22px 20px;margin-bottom:32px;}
  .pe-sign .sig-eq{margin-left:0;width:100%;}
  .post-end .pe-inner{padding:44px 0;}
  .post-nav a{padding:20px 22px;}
  .post-nav .pn-title{font-size:15.5px;}

  /* Index: seven chips at full size wrapped to four rows on a phone. */
  .blog-filter{gap:8px;margin-bottom:32px;}
  .chip{padding:8px 14px;font-size:9.5px;letter-spacing:0.14em;}
  .blog-stats{gap:22px;margin-top:24px;}

  /* Keep the blog grid at 2 columns on mobile — compact cards side by side. */
  .blog-grid.card-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:14px;
  }
  .blog-grid .mcard .m-body{padding:14px 14px 18px;gap:7px;}
  .blog-grid .mcard h3{font-size:14px;line-height:1.3;}
  .blog-grid .mcard .m-date{font-size:9px;letter-spacing:0.12em;}
  /* Clamp description to 3 lines, show a visual hint that there is more. */
  .blog-grid .mcard p{
    font-size:12.5px;line-height:1.55;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .blog-grid .mcard .tlink{font-size:10px;letter-spacing:0.14em;}
}

@media(max-width:420px){
  .prose{padding:40px 18px 20px;}
  .prose blockquote{padding:20px 16px;}
  .prose .keydef{padding:20px 18px;}
  .prose .faq h3{padding:20px 18px 0;}
  .prose .faq p{padding:10px 18px 20px;}
  .prose .cta-box{padding:26px 18px;}
  .prose .button{padding:13px 20px;font-size:10px;letter-spacing:0.14em;}
  .prose .callout{padding:24px 20px;}
  .prose blockquote.pull-quote{padding-left:16px;margin:36px 0;}
  .pe-sign{padding:18px 16px;}
  .post-nav a{padding:18px 18px;}
}