/* dfirswarm.ai: the blog. The index, a post, and the record of earlier runs.
   Same tokens as site.css; a post reads as a lab notebook: paper, ink, one accent per meaning. */

/* ---- the index ---- */
.post-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.post-card{display:flex;flex-direction:column;gap:10px;color:inherit;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:0 0 20px;overflow:hidden}
.post-card:hover{border-color:var(--line-2);color:inherit}
.post-card img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line);background:var(--paper-2)}
.post-card .kicker,.post-card-title,.post-card-desc{padding:0 20px}
.post-card .kicker{margin-top:6px}
.post-card-title{font-family:var(--serif);font-style:italic;font-size:28px;line-height:1.08}
.post-card-desc{font-size:14px;color:var(--ink-2)}
.post-card:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

.record-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.record-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,2fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.record-name{display:block;font-weight:500}
.record-meta{display:block;font-size:12px;color:var(--ink-3)}
.record-row p{font-size:14px;color:var(--ink-2)}
.record-links{display:flex;flex-direction:column;gap:0;font-size:13px}
/* each link a full tap target, like the site's other standalone links */
.record-links a{display:inline-flex;align-items:center;min-height:44px}

/* ---- a post ---- */
.post-hero{padding:clamp(48px,6vw,80px) 0 clamp(36px,4vw,48px)}
.post-hero h1{font-size:clamp(36px,5.2vw,68px);max-width:22ch}
.post-crumb{text-decoration:none;color:var(--band-ink-2);display:inline-flex;align-items:center;min-height:44px;align-self:flex-start}
.post-crumb:hover{color:var(--band-ink)}
.post-by{font-size:14px;color:var(--band-ink-2)}
.post-by a{display:inline-block;padding:13px 0;margin:-13px 0}

.post-section{padding-top:clamp(36px,4vw,56px)}
.post-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px;align-items:start}
.post-grid .prose{grid-column:1/span 8;grid-row:1}
.post-facts{grid-column:9/span 4;grid-row:1;position:sticky;top:24px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px 20px}
.post-facts[open]{padding-bottom:20px}
.post-facts>summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:44px;padding:6px 28px 6px 0;position:relative}
.post-facts>summary::-webkit-details-marker{display:none}
.post-facts>summary::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.post-facts[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.post-facts-case{font-size:14px;color:var(--ink)}
.post-facts[open] .post-facts-case{display:none}
.post-facts dl{margin-top:12px}
.post-facts-links{margin-top:12px}
.post-facts>summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:4px}
.post-facts dl{margin:0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 12px;font-size:13px}
.post-facts dt{color:var(--ink-3)}
.post-facts dd{margin:0;color:var(--ink)}
.post-facts-links{display:flex;flex-direction:column;gap:0;padding-top:6px;border-top:1px solid var(--line)}
.post-facts-links a{display:inline-flex;align-items:center;min-height:44px}

/* the prose itself */
.prose{max-width:72ch;font-size:17px;line-height:1.65}
.prose>*+*{margin-top:1.05em}
.prose h2{font-size:clamp(28px,2.8vw,38px);margin-top:1.7em;line-height:1.08}
.prose h3{font-size:clamp(22px,2vw,26px);margin-top:1.4em}
.prose h2+*,.prose h3+*{margin-top:.6em}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:.35em}
.prose strong{font-weight:600}
.prose code{background:var(--paper-3);border-radius:4px;padding:1px 5px;font-size:.86em}
.prose pre{background:var(--band);color:var(--band-ink);border-radius:var(--r-sm);padding:14px 16px;overflow-x:auto;font-size:13px;line-height:1.5}
.prose pre code{background:none;padding:0;font-size:inherit;color:inherit}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}

/* a board post, quoted: who said it and when, then what they said */
.prose blockquote{margin:1.3em 0;padding:14px 18px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--kelp);border-radius:var(--r-sm);font-size:15px;line-height:1.6}
.prose blockquote>*+*{margin-top:.5em}
.prose blockquote p:first-child strong{font-family:var(--mono);font-weight:500;font-size:12.5px;color:var(--kelp-ink)}

.prose table{width:100%;border-collapse:collapse;font-size:14px;margin:1.3em 0}
.prose th,.prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.prose-table{margin:1.3em 0}
.prose-table table{margin:0;min-width:560px}
.prose tbody th{font-weight:600;font-size:14px;color:var(--ink);text-transform:none;letter-spacing:0;white-space:nowrap}
.prose-table:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

.post-figure{margin:1.8em 0}
.post-figure figcaption{font-size:13px}

.post-card-sm{padding:18px}
.post-card-sm .name{font-size:22px}

@media (max-width:1000px){
  .post-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  /* one card per row, as site.css does for every table on a phone; the question is the card's heading */
  .prose-table table{min-width:0}
  .prose tbody th{font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;white-space:normal}
  .prose tbody td{border-bottom:0}
}
@media (max-width:860px){
  .post-grid .prose,.post-facts{grid-column:1/-1;grid-row:auto}
  .post-facts{position:static}
  .prose{font-size:16px}
  .post-list{grid-template-columns:minmax(0,1fr)}
  .record-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .record-links{flex-direction:row;flex-wrap:wrap;gap:4px 16px}
}