/* ==========================================================================
   blogidx.css — page-only rules for the three alternative writing indexes:
   blog-featured.html · blog-magazine.html · blog-timeline.html
   Layers on styles.css + css/vc.css. Nothing here is used by blog.html or
   writing.html.
   ========================================================================== */

/* ---------- Control bar: filters + search + count ---------- */
.ctrl{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.ctrl .filters{margin-bottom:0}
.ctrl .search{margin-bottom:0}
.ctrl-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.count{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--muted-2);white-space:nowrap}
.filters .filter.yr{font-family:var(--font-mono);letter-spacing:.02em}

/* ---------- Byline (shared by featured + magazine cards) ---------- */
.byline{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:20px}
.byline img{width:28px;height:28px;border-radius:0;object-fit:cover;flex:none}
.byline .who{font-size:14px;line-height:20px;color:var(--text)}
.byline .who:hover{text-decoration:underline;text-underline-offset:3px}
.byline .when{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--muted-2);
  margin-left:auto;text-align:right;white-space:nowrap}

/* ---------- Two or more authors ----------
   A piece written by more than one person takes .faces for the portraits and
   .whos for the names, in place of the single img + .who. Both are plain
   containers, so a one-author byline needs no change and the two forms sit at
   the same height in a row of cards.

   The portraits are side by side, not overlapped: everything on this site is
   square, and squares that overlap read as one smudged block rather than a
   stack of coins. 4px between them, the same gap the portfolio cards use for
   founder faces, so a cluster reads as one object against the 10px the byline
   puts between its parts.

   Each name is its own link to that person on the team page; the "and" between
   them is a text node in .whos, which is why it takes the word-space either
   side rather than the flex gap. */
.byline .faces{display:flex;gap:4px;flex:none}
.byline .whos{font-size:14px;line-height:20px;color:var(--muted-2);min-width:0}
.byline .whos .who{color:var(--text)}

/* The author's title, under the name. A block child of .whos rather than another
   item in the byline row: beside the name it competes with the date at the other
   end of the row, and in a three-up column there is no width for both. .whos is
   a flex item and so already a block container, which is why one line does it —
   the two-author form takes the same rule, with the shared line under both names.
   --muted-2 and 12px is the same voice the date is in, a step under the name. */
.byline .whos .rl{display:block;font-size:12px;line-height:16px;color:var(--muted-2)}

/* ==========================================================================
   Subscribe module — used on all three pages
   ========================================================================== */
.sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:48px;align-items:start}
.sub .blurb h2{font-size:28px;line-height:32px;letter-spacing:-.01em}
.sub .blurb p{color:var(--muted);font-size:16px;line-height:24px;margin-top:14px;max-width:46ch}
.sub .blurb ul{margin-top:18px;display:flex;flex-direction:column;gap:8px}
.sub .blurb li{color:var(--muted);font-size:14px;line-height:20px;list-style:none;padding-left:18px;position:relative}
.sub .blurb li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:0;background:var(--accent)}
.sub-box{border:1px solid var(--border);border-radius:0;padding:24px;background:var(--card);min-width:0}
.sub-box .form{gap:18px}
.sub-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.sub-actions .btn{flex:none;min-width:132px;justify-content:center}
.sub-note{color:var(--muted-2);font-size:12px;line-height:18px;margin:0;max-width:52ch}
.sub-note a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.sub-err{display:none;color:var(--accent);font-size:13px;line-height:18px}
.sub-err.on{display:block}
.sub-ok{display:none;align-items:flex-start;gap:10px;border-top:1px solid var(--border);
  padding-top:16px;color:var(--accent);font-size:14px;line-height:20px}
.sub-ok.on{display:flex}
.sub-ok svg{width:16px;height:16px;flex:none;margin-top:2px}
.sub-ok .sub-ok-sub{display:block;color:var(--muted-2);font-size:12px;line-height:18px;margin-top:4px}

/* Writing index: subscribe runs as the third cell of the post row, so it takes the
   card's rhythm rather than .k-sub.block's box — the .ruled cell is already the frame. */
.srow .sub-cell{display:flex;flex-direction:column;gap:14px;min-width:0}
.srow .sub-cell .k-sub{max-width:none;margin-top:4px}
.srow .sub-cell .sub-note{margin:0}

/* ==========================================================================
   1 — blog-featured.html
   ========================================================================== */
.ed-head{padding:64px var(--pad) 44px;border-bottom:1px solid var(--border)}
.ed-head .pg-eyebrow{margin-bottom:22px}
.ed-head h1{font-family:var(--font-head);font-weight:700;font-size:60px;line-height:52px;
  letter-spacing:0;text-transform:uppercase}
.ed-head .lead{color:var(--muted);font-size:20px;line-height:28px;margin-top:22px;max-width:58ch}
.ed-head .actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.ed-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  margin-top:40px;padding-top:26px;border-top:1px solid var(--border)}
.ed-stats .k{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
.ed-stats .v{font-size:16px;line-height:22px;color:var(--text);margin-top:6px}

/* ---- Hero feature ---- */
.hero-feat{border-bottom:1px solid var(--border)}
.hf-cover{display:block;border-bottom:1px solid var(--border);background:#141210}
.hf-cover svg{display:block;width:100%;height:auto}
.hf-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:48px;padding:32px var(--pad) 38px}
.hf-l .badge-pill{margin-bottom:16px}
.hf-l h2{font-size:40px;line-height:42px;letter-spacing:0}
.hf-l h2 a:hover{opacity:.75}
.hf-flag{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.hf-r .excerpt{color:var(--muted);font-size:16px;line-height:26px}
.hf-r .byline{padding-top:24px;margin-top:20px;border-top:1px solid var(--hairline)}
.hf-r .more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:14px;
  line-height:20px;font-weight:500;color:var(--text)}
.hf-r .more svg{width:14px;height:14px}
.hf-r .more:hover{opacity:.75}

/* ---- Secondary row ---- */
.srow .post-card{display:flex;flex-direction:column;min-width:0;transition:background .2s}
.srow .post-card:hover{background:rgba(250,250,249,.02)}
.srow .cover{border-radius:0;overflow:hidden;border:1px solid var(--border);background:#141210;margin-bottom:18px}
.srow .cover svg{display:block;width:100%;height:auto}
.srow .badge-pill{align-self:flex-start;margin-bottom:12px}
.srow h3{font-size:18px;line-height:24px;font-weight:600}
.srow h3 a:hover{opacity:.75}
.srow .excerpt{color:var(--muted);font-size:15px;line-height:23px;margin-top:10px;
  /* Floor the space under the synopsis. The byline uses margin-top:auto to sit on
     the card's baseline, and that resolves to 0 on a card whose excerpt runs long,
     which left the three-line synopsis butting into the byline. */
  margin-bottom:24px}

/* ---- Featured series module ---- */
.fseries{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px;align-items:start}
.fseries .fs-l h3{font-size:26px;line-height:30px}
.fseries .fs-l p{color:var(--muted);font-size:16px;line-height:24px;margin-top:14px;max-width:44ch}
.fseries .fs-l .kv{margin-top:22px}
.fseries .fs-l .actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.fparts{border-top:1px solid var(--border)}
.fpart{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:16px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--hairline);transition:background .2s}
.fpart:last-child{border-bottom:none}
.fpart:hover{background:rgba(250,250,249,.02)}
.fpart .no{font-family:var(--font-mono);font-size:12px;line-height:20px;color:var(--faint)}
.fpart .tt{font-size:15px;line-height:22px;font-weight:600;min-width:0}
.fpart .tt a:hover{text-decoration:underline;text-underline-offset:3px}
.fpart .tt .sm{display:block;font-weight:400;font-size:13px;line-height:19px;color:var(--muted-2);margin-top:4px}
.fpart .mt{font-family:var(--font-mono);font-size:11px;line-height:20px;color:var(--muted-2);white-space:nowrap}

/* ---- Compact list ---- */
.clist{border-top:1px solid var(--border)}
.crow{display:grid;grid-template-columns:96px 148px minmax(0,1fr) 190px;gap:20px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--hairline);transition:background .2s}
.crow:hover{background:rgba(250,250,249,.02)}
.crow .dt{font-family:var(--font-mono);font-size:12px;line-height:22px;color:var(--muted-2);white-space:nowrap}
.crow .sr .badge-pill{vertical-align:middle}
.crow .tt{font-size:15px;line-height:22px;font-weight:600;min-width:0}
.crow .tt a:hover{text-decoration:underline;text-underline-offset:3px}
.crow .tt .ex{display:block;font-weight:400;font-size:13px;line-height:19px;color:var(--muted-2);margin-top:4px}
.crow .au{display:flex;align-items:center;gap:8px;justify-content:flex-end;min-width:0}
.crow .au img{width:22px;height:22px;border-radius:0;object-fit:cover;flex:none}
.crow .au a{font-size:13px;line-height:20px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .au a:hover{color:var(--text)}
.crow .au .rt{font-family:var(--font-mono);font-size:11px;color:var(--faint);white-space:nowrap}

/* ==========================================================================
   2 — blog-magazine.html
   ========================================================================== */
.mag{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:0;align-items:start}
.mag-main{min-width:0;padding-right:36px}
.mag-side{min-width:0;border-left:1px solid var(--border);padding-left:32px}
.mag-side .stick{position:sticky;top:calc(var(--nav-h) + 24px)}

.topic-div{display:flex;align-items:center;gap:16px;margin:0 0 20px}
.mag-sec + .mag-sec .topic-div{margin-top:40px}
.topic-div h3{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);white-space:nowrap}
.topic-div .ln{flex:1;height:1px;background:var(--border);min-width:12px}
.topic-div .n{font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--faint);white-space:nowrap}

.mgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;grid-auto-flow:dense;align-items:start}
.m-card{grid-column:span 2;min-width:0;border:1px solid var(--border);border-radius:0;background:var(--card);
  padding:18px;display:flex;flex-direction:column;transition:border-color .2s,background .2s}
.m-card:hover{border-color:var(--border-2);background:#191512}
.m-card.w3{grid-column:span 3}
.m-card.w4{grid-column:span 4}
.m-card.w6{grid-column:span 6}
.m-card .cover{border-radius:0;overflow:hidden;border:1px solid var(--border);background:#141210;margin-bottom:14px}
.m-card .cover svg{display:block;width:100%;height:auto}
.m-card .badge-pill{align-self:flex-start;margin-bottom:12px}
.m-card h3{font-size:16px;line-height:22px;font-weight:600}
.m-card h3 a:hover{opacity:.75}
.m-card.w4 h3,.m-card.w6 h3{font-size:20px;line-height:26px;letter-spacing:-.01em}
.m-card .excerpt{color:var(--muted);font-size:14px;line-height:21px;margin-top:8px}
.m-card .byline{padding-top:16px;gap:8px}
.m-card .byline img{width:22px;height:22px}
.m-card .byline .who{font-size:13px}
.m-card .byline .when{font-size:11px}
.m-card.row{flex-direction:row;gap:20px;align-items:stretch}
.m-card.row .cover{margin:0;width:38%;flex:none;min-height:132px}
.m-card.row .cover svg{width:100%;height:100%}
.m-card.row .mc-body{display:flex;flex-direction:column;min-width:0;flex:1}
.m-card.plain{background:transparent}
.m-card.plain:hover{background:var(--card)}
.m-card .kicker{font-family:var(--font-mono);font-size:11px;line-height:16px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin-bottom:10px}

/* ---- Sidebar modules ---- */
.side-mod{margin-bottom:34px}
.side-mod:last-child{margin-bottom:0}
.side-mod h4{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:14px}
.mr{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;padding:12px 0;border-bottom:1px solid var(--hairline)}
.mr:last-child{border-bottom:none}
.mr .rk{font-family:var(--font-mono);font-size:12px;line-height:19px;color:var(--faint)}
.mr a{font-size:14px;line-height:19px;color:var(--text)}
.mr a:hover{text-decoration:underline;text-underline-offset:3px}
.mr .mt{font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--muted-2);margin-top:5px}
.topic-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;
  padding:10px 0;border-bottom:1px solid var(--hairline);font-size:14px;line-height:20px;color:var(--muted);
  transition:color .18s}
.topic-btn:last-child{border-bottom:none}
.topic-btn:hover{color:var(--text)}
.topic-btn.on{color:var(--text);font-weight:600}
.topic-btn .n{font-family:var(--font-mono);font-size:12px;color:var(--faint);flex:none}
.author-row{display:flex;align-items:center;gap:10px;padding:8px 0;min-width:0}
.author-row img{width:30px;height:30px;border-radius:0;object-fit:cover;flex:none}
.author-row .tx{min-width:0;display:flex;flex-direction:column}
.author-row .nm{display:block;font-size:14px;line-height:18px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.author-row:hover .nm{text-decoration:underline;text-underline-offset:3px}
.author-row .rl{display:block;font-size:12px;line-height:16px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.author-row .n{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--faint);flex:none}
.side-links{display:flex;flex-direction:column;gap:2px}
.side-links a{font-size:14px;line-height:20px;color:var(--muted);padding:6px 0;transition:color .18s}
.side-links a:hover{color:var(--text)}

/* ==========================================================================
   3 — blog-timeline.html
   ========================================================================== */
.tlx{display:flex;flex-direction:column}
.mgroup{display:grid;grid-template-columns:132px minmax(0,1fr);gap:0;border-top:1px solid var(--border)}
.mgroup:first-child{border-top:none}
.mlabel{position:sticky;top:calc(var(--nav-h) + 20px);align-self:start;padding:22px 20px 22px 0;z-index:1}
.mlabel .mo{font-family:var(--font-head);font-weight:700;font-size:24px;line-height:24px;
  letter-spacing:0;text-transform:uppercase;color:var(--text)}
.mlabel .yr{font-family:var(--font-mono);font-size:12px;line-height:16px;color:var(--muted-2);margin-top:6px}
.mlabel .ct{font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--faint);margin-top:10px}
.mrows{border-left:1px solid var(--border);min-width:0}
.entry{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);gap:20px;padding:15px 0 16px 28px;
  border-bottom:1px solid var(--hairline);transition:background .2s}
.mrows .entry:last-child{border-bottom:none}
.entry:hover{background:rgba(250,250,249,.02)}
.entry::after{content:"";position:absolute;left:-4px;top:22px;width:7px;height:7px;border-radius:0;
  background:var(--muted-2);box-shadow:0 0 0 3px var(--bg);pointer-events:none}
.entry.is-note::after{background:var(--bg);border:1px solid var(--faint);width:8px;height:8px;left:-4.5px}
.entry .dt{font-family:var(--font-mono);font-size:12px;line-height:20px;color:var(--muted-2);white-space:nowrap;padding-top:2px}
.entry .eb{min-width:0}
.entry .tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.entry .rt{font-family:var(--font-mono);font-size:11px;line-height:16px;color:var(--faint)}
.entry .tt{font-size:16px;line-height:22px;font-weight:600}
.entry .tt a:hover{text-decoration:underline;text-underline-offset:3px}
.entry.is-note .tt{font-weight:400;font-size:15px;line-height:22px;color:var(--muted)}
.entry.is-note .tt a:hover{color:var(--text)}
.entry .one{color:var(--muted);font-size:14px;line-height:20px;margin-top:5px;max-width:74ch}
.entry .who{display:inline-flex;align-items:center;gap:8px;margin-left:auto;min-width:0}
.entry .who img{width:22px;height:22px;border-radius:0;object-fit:cover;flex:none}
.entry .who a{font-size:13px;line-height:18px;color:var(--muted-2);white-space:nowrap}
.entry .who a:hover{color:var(--text)}
.tl-legend{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:28px;
  font-size:13px;line-height:18px;color:var(--muted-2)}
.tl-legend .lg{display:inline-flex;align-items:center;gap:8px}
.tl-legend .pip{width:8px;height:8px;border-radius:0;background:var(--muted-2);flex:none}
.tl-legend .pip.hollow{background:transparent;border:1px solid var(--faint)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .ed-head h1{font-size:44px;line-height:42px}
  .ed-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf-body{grid-template-columns:minmax(0,1fr);gap:24px}
  .hf-l h2{font-size:30px;line-height:34px}
  .hf-r .byline{margin-top:0;border-top:none;padding-top:16px}
  .fseries{grid-template-columns:minmax(0,1fr);gap:32px}
  .crow{grid-template-columns:88px minmax(0,1fr);gap:14px}
  .crow .sr{grid-column:2;margin-bottom:-6px}
  .crow .tt{grid-column:2}
  .crow .au{grid-column:2;justify-content:flex-start;margin-top:8px}
  .mag{grid-template-columns:minmax(0,1fr)}
  .mag-main{padding-right:0}
  .mag-side{border-left:none;border-top:1px solid var(--border);padding-left:0;padding-top:32px;margin-top:40px}
  .mag-side .stick{position:static}
  .mag-side .side-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
  .mgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .m-card,.m-card.w3{grid-column:span 2}
  .m-card.w4,.m-card.w6{grid-column:span 4}
}
@media (max-width:620px){
  .ed-head{padding:44px var(--pad) 32px}
  .ed-head h1{font-size:34px;line-height:34px}
  .ed-head .lead{font-size:17px;line-height:26px}
  .ed-stats{grid-template-columns:minmax(0,1fr);gap:16px}
  .hf-l h2{font-size:24px;line-height:28px}
  .sub{grid-template-columns:minmax(0,1fr);gap:28px}
  .sub-box{padding:18px}
  .sub-actions{align-items:stretch}
  .sub-actions .btn{width:100%;justify-content:center}
  .crow{grid-template-columns:minmax(0,1fr);gap:6px}
  .crow .sr,.crow .tt,.crow .au{grid-column:1}
  .mgrid{grid-template-columns:minmax(0,1fr);gap:12px}
  .m-card,.m-card.w3,.m-card.w4,.m-card.w6{grid-column:span 1}
  .m-card.row{flex-direction:column;gap:0}
  .m-card.row .cover{width:100%;margin-bottom:14px;min-height:0}
  .mag-side .side-grid{grid-template-columns:minmax(0,1fr)}
  .mgroup{grid-template-columns:minmax(0,1fr)}
  .mlabel{position:static;display:flex;align-items:baseline;gap:10px;padding:20px 0 10px}
  .mlabel .yr,.mlabel .ct{margin-top:0}
  .mlabel .ct{margin-left:auto}
  .mrows{border-left:none}
  .entry{grid-template-columns:minmax(0,1fr);gap:8px;padding-left:0}
  .entry::after{display:none}
  .tl-legend{gap:12px}
}
@media (max-width:1100px){
  .sub{grid-template-columns:minmax(0,1fr);gap:32px}
}