/* Blog styles. Every colour here resolves to a token defined in site.css, so the
   light/dark toggle drives this file too and nothing needs a second definition. */

/* ---- Listing ---------------------------------------------------------- */
.blog-intro{font-size:15px;color:var(--ink-soft);margin:0 0 18px;}

.post-list{list-style:none;padding:0;margin:0;}
.post-item{padding:18px 0;border-bottom:1px solid var(--line);}
.post-item:last-child{border-bottom:none;padding-bottom:0;}
.post-item:first-child{padding-top:0;}
.post-meta{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);letter-spacing:.04em;display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.post-item h3{margin:6px 0 0;font-size:16.5px;font-weight:650;line-height:1.4;}
.post-item h3 a{color:var(--ink);font-weight:650;}
.post-item h3 a:hover{color:var(--accent-ink);}
.post-excerpt{font-size:14px;color:var(--ink-soft);margin:6px 0 0;}
.post-tags{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px;}
.post-tags a{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--accent-ink);background:var(--accent-soft);padding:2px 8px;border-radius:6px;}
.post-tags a:hover{text-decoration:none;filter:brightness(.95);}

/* One row under a listing card: this site's claps and comment count, then the
   tags. The row owns the margin so the tags can drop to a second line on a
   narrow screen without the counts moving with them. */
.post-card-foot{margin-top:9px;display:flex;align-items:center;flex-wrap:wrap;gap:11px;}
.post-card-foot .post-tags{margin-top:0;}
.post-stats{display:inline-flex;align-items:center;gap:11px;}
/* Medium's pair, set apart by a rule rather than a gap so it cannot be read as
   a continuation of ours. The label carries the attribution: 45 claps earned on
   Medium is not 45 claps earned here. */
.post-stats-medium{gap:7px;padding-left:11px;border-left:1px solid var(--line);}
.post-stats-label{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);opacity:.75;}
/* A post with no claps or comments of its own hides that group, which would
   otherwise leave Medium's rule dividing it from nothing. */
.post-stats[hidden] + .post-stats-medium{padding-left:0;border-left:none;}
.post-stat{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);line-height:1;}
.post-stat svg{width:13px;height:13px;}
/* [hidden] is a UA rule, and any author display wins over it whatever the
   specificity. Both of the above set one, so both have to opt back out. */
.post-stats[hidden],.post-stat[hidden]{display:none;}


.pager{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px;}
.pager a{color:var(--ink-soft);border:1px solid var(--line);border-radius:8px;padding:5px 12px;}
.pager a:hover{border-color:var(--accent);color:var(--accent-ink);text-decoration:none;}
.pager .pos{color:var(--ink-soft);}

.empty{color:var(--ink-soft);font-size:14px;padding:8px 0;}

/* ---- Post page -------------------------------------------------------- */
.post-head{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:22px;}
.post-head h1{font-size:27px;line-height:1.25;margin:8px 0 10px;}
.post-head .post-meta{font-size:11px;}
.post-head .lede{font-size:16px;color:var(--ink-soft);margin:0;}

.post-body{font-size:15.5px;line-height:1.75;}
.post-body h2{font-size:18px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--ink);margin:34px 0 12px;display:block;scroll-margin-top:24px;}
.post-body h3{font-size:15.5px;font-weight:650;color:var(--ink);margin:26px 0 9px;scroll-margin-top:24px;}
.post-body p{margin:0 0 16px;}
.post-body ul,.post-body ol{margin:0 0 16px;padding-left:22px;}
.post-body li{margin-bottom:7px;}
.post-body blockquote{margin:0 0 16px;padding:2px 0 2px 16px;border-left:3px solid var(--accent);color:var(--ink-soft);}
.post-body blockquote p:last-child{margin-bottom:0;}
.post-body img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line);}
.post-body hr{border:none;border-top:1px solid var(--line);margin:28px 0;}
.post-body table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 16px;display:block;overflow-x:auto;}
.post-body th,.post-body td{border:1px solid var(--line);padding:8px 11px;text-align:left;}
.post-body th{background:var(--bg);font-weight:650;color:var(--ink);}
.post-body :not(pre) > code{font-family:var(--mono);font-size:.86em;background:var(--chip-bg);border:1px solid var(--line-soft);border-radius:5px;padding:1px 5px;color:var(--accent-ink);}

/* ---- Code blocks (Rouge) ---------------------------------------------- */
.post-body div.highlighter-rouge,.post-body figure.highlight{margin:0 0 18px;}
.post-body pre.highlight,.post-body pre{font-family:var(--mono);font-size:12.5px;line-height:1.6;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px;overflow-x:auto;margin:0;color:var(--ink);}
.post-body pre code{background:none;border:none;padding:0;font-size:inherit;color:inherit;}
.highlight .c,.highlight .c1,.highlight .cm,.highlight .cd{color:var(--ink-soft);font-style:italic;}
.highlight .k,.highlight .kd,.highlight .kn,.highlight .kc,.highlight .kr,.highlight .kt{color:var(--accent-ink);font-weight:650;}
.highlight .s,.highlight .s1,.highlight .s2,.highlight .sb,.highlight .sc,.highlight .sd,.highlight .sx,.highlight .sr{color:var(--accent);}
.highlight .nf,.highlight .nd{color:var(--ink);font-weight:650;}
.highlight .nc,.highlight .nn,.highlight .no{color:var(--ink);font-weight:650;}
.highlight .m,.highlight .mi,.highlight .mf,.highlight .mh{color:var(--accent-ink);}
.highlight .nb,.highlight .bp{color:var(--ink-soft);}
.highlight .o,.highlight .ow,.highlight .p{color:var(--ink-soft);}
.highlight .err{color:#e5534b;}
.highlight .gd{color:#e5534b;}
.highlight .gi{color:var(--accent);}

/* ---- Share ------------------------------------------------------------ */
.post-foot{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);}
.share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.share .share-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-right:2px;}
.share a,.share button{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ink-soft);border:1px solid var(--line);border-radius:7px;padding:4px 10px;background:none;cursor:pointer;line-height:inherit;}
.share a:hover,.share button:hover{border-color:var(--accent);color:var(--accent-ink);text-decoration:none;}

.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px;}
.prevnext a{background:var(--bg);border:1px solid var(--line-soft);border-radius:14px;padding:13px 15px;}
.prevnext a:hover{border-color:var(--accent);text-decoration:none;}
.prevnext .dir{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);}
.prevnext .t{display:block;font-size:13.5px;font-weight:650;color:var(--ink);margin-top:5px;line-height:1.4;}
.prevnext .next{text-align:right;}

/* ---- Homepage teaser -------------------------------------------------- */
.teaser .post-item{padding:13px 0;}
.teaser .post-item h3{font-size:15px;}

@media (max-width:820px){
  .prevnext{grid-template-columns:1fr;}
  .prevnext .next{text-align:left;}
}

/* ---- Diagrams ---------------------------------------------------------
   Diagrams are inline SVG rather than images so they inherit the theme
   tokens: every fill and stroke below resolves through var(--ink),
   var(--accent) and friends, which means one drawing works in both light
   and dark instead of shipping two PNGs and picking with a media query. */
.diagram{margin:26px 0;padding:0;}
.diagram svg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:14px;background:var(--card);}
.diagram figcaption{font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--ink-soft);margin-top:9px;padding-left:2px;}
.diagram .d-zone{fill:var(--accent);fill-opacity:.04;stroke:var(--line);}
.diagram .d-box{fill:var(--card);stroke:var(--line);stroke-width:1;}
.diagram .d-box-focal{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1;}
.diagram .d-box-ext{fill:var(--bg);stroke:var(--line);stroke-width:1;}
.diagram .d-name{fill:var(--ink);font-family:var(--sans);font-size:12px;font-weight:650;}
.diagram .d-sub{fill:var(--ink-soft);font-family:var(--mono);font-size:9px;}
.diagram .d-eyebrow{fill:var(--ink-soft);font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.14em;}
.diagram .d-lab{fill:var(--accent-ink);font-family:var(--mono);font-size:8px;font-weight:600;letter-spacing:.07em;}
.diagram .d-mask{fill:var(--card);}
.diagram .d-line{stroke:var(--ink-soft);stroke-width:1;fill:none;}
.diagram .d-line-accent{stroke:var(--accent);stroke-width:1.2;fill:none;}
.diagram .d-rule{stroke:var(--line);stroke-width:.8;}
.diagram .d-cut{stroke:var(--accent);stroke-width:1.2;stroke-dasharray:5 4;}

/* ---- Claps and comments -----------------------------------------------
   Its own card below the post: the thread is a different kind of thing from
   the writing, and the 18px gap here is the same gap .wrap puts between the
   three columns. Everything here is our own DOM rather than an embedded
   widget, so it themes off the tokens in site.css with no iframe to repaint.
   The heading is left to the global h2 label style so it reads as the same
   kind of section marker as CONTENTS in the rail. */
.comments{margin-top:18px;}
.comments-fallback{font-size:14px;color:var(--ink-soft);margin:0;}

/* The two glyphs in _includes/icon-*.html, wherever they are used. Size and
   colour stay with the owning element; only the paint model is fixed here,
   because it is a property of how each path is drawn. */
.icon-clap{fill:currentColor;}
.icon-comment{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;}

.claps{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line);}
.clap-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);border-radius:999px;padding:7px 15px;cursor:pointer;color:var(--ink-soft);font-family:var(--mono);font-size:12px;font-weight:600;line-height:1;}
.clap-btn:hover{border-color:var(--accent);color:var(--accent-ink);}
.clap-btn svg{width:17px;height:17px;fill:currentColor;}
.clap-btn.clapped{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);}
.clap-btn.pop svg{animation:clap-pop .28s ease;}
@keyframes clap-pop{0%{transform:scale(1)}45%{transform:scale(1.3)}100%{transform:scale(1)}}
.clap-hint{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-soft);}
/* Medium's tally, when the post has one. margin-left:auto parks it on the
   right of the clap row on a wide screen and lets it drop to its own line
   once .claps wraps, so it never squeezes the button. */
.medium-tally{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px;}
.medium-tally:hover{color:var(--accent-ink);border-bottom-color:var(--accent);}
@media (max-width:520px){.medium-tally{margin-left:0;}}

.comment-list{list-style:none;padding:0;margin:0 0 18px;}
.comment-list li{padding:14px 0;border-bottom:1px solid var(--line-soft);}
.comment-list li:last-child{border-bottom:none;}
.comment-head{display:flex;align-items:baseline;gap:9px;}
.comment-name{font-size:13.5px;font-weight:650;color:var(--ink);}
.comment-head time{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);}
/* pre-wrap because the body is plain text: a reader's own line breaks are the
   only formatting they have, so they must survive the render. */
.comment-body{font-size:14.5px;line-height:1.65;margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;}
.comment-empty{font-size:14px;color:var(--ink-soft);margin:0 0 18px;}

.comment-form{border-top:1px solid var(--line);padding-top:18px;}
.comment-form label{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px;}
.comment-form .opt{text-transform:none;letter-spacing:.02em;font-weight:400;}
.comment-form input,.comment-form textarea{display:block;width:100%;margin-top:6px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-family:var(--sans);font-size:14px;color:var(--ink);}
.comment-form textarea{resize:vertical;line-height:1.6;}
.comment-form input:focus,.comment-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.cf-turnstile{margin-bottom:12px;}
.cf-actions{display:flex;align-items:center;gap:12px;}
.comment-form button[type=submit]{background:var(--accent);color:#fff;border:none;border-radius:999px;padding:9px 20px;font-size:13px;font-weight:650;cursor:pointer;}
.comment-form button[type=submit]:hover{filter:brightness(1.06);}
.comment-form button[type=submit]:disabled{opacity:.55;cursor:default;}
.comment-status{font-family:var(--mono);font-size:11px;color:var(--ink-soft);}

@media (max-width:820px){.cf-row{grid-template-columns:1fr;}}