/* Assay blog — scaffold styles.
   Layers on top of ../../assets/site.css: reuses its theme tokens (--paper, --ink,
   --accent, --line, --mono, --serif …) so the blog inherits the landing page's
   "Control Surface" identity. Nothing here redefines a color token; the dark set
   comes for free from site.css. Self-contained, no external assets, no scripts. */

/* ---------- category chips ---------- */
.chip {
  display:inline-block;
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:3px 8px;
  border:1px solid var(--line-strong);
  color:var(--muted);
  white-space:nowrap;
}
.chip-thought-leadership { color:var(--accent); border-color:var(--accent); }
.chip-how-assay-works    { color:var(--ink);    border-color:var(--line-strong); }
.chip-tooling-updates    { color:var(--muted);  border-color:var(--line-strong); }
.chip-learnings          { color:var(--ink);    border-color:var(--ink); }

/* ---------- category nav strip ---------- */
.cat-nav {
  display:flex;
  gap:.6rem 1rem;
  flex-wrap:wrap;
  margin-top:6px;
  padding:14px 0 2px;
  border-top:1px solid var(--line);
}
.cat-nav a {
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  padding:6px 0;
  border-bottom:2px solid transparent;
}
.cat-nav a:hover { border-bottom-color:var(--accent); }
.cat-nav a.active { border-bottom-color:var(--accent); color:var(--accent); }

/* ---------- gallery of article cards ---------- */
.gallery {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:20px;
  margin:26px 0 8px;
}
.card {
  display:flex;
  flex-direction:column;
  border:1px solid var(--line-strong);
  border-top:3px solid var(--ink);
  background:var(--panel);
  min-width:0;
}
.card a.card-link { text-decoration:none; color:inherit; display:block; }
.card a.card-link:hover .card-title { color:var(--accent); }

.card .thumb {
  aspect-ratio:16 / 9;
  background:
    repeating-linear-gradient(-45deg, var(--panel-2) 0 12px, var(--panel) 12px 24px);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
}
.card .thumb span {
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
/* real thumbnail: the article's thumb.png is set inline as --thumb and layered
   OVER the placeholder gradient. If the file is ever missing at request time the
   top layer is simply empty and the gradient shows through — never a broken image. */
.card .thumb.has-thumb {
  background-image:var(--thumb),
    repeating-linear-gradient(-45deg, var(--panel-2) 0 12px, var(--panel) 12px 24px);
  background-size:cover, auto;
  background-position:center, 0 0;
  background-repeat:no-repeat, repeat;
}
.card .card-body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; }
.card .card-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.card .card-date { font-family:var(--mono); font-size:.7rem; color:var(--muted); }
.card .card-title { font-family:var(--serif); font-size:1.15rem; font-weight:600; line-height:1.25; margin:2px 0; }
.card .card-teaser { font-size:.9rem; color:var(--muted); line-height:1.5; max-width:none; }

/* draft marker — muted/dashed, never the reserved red */
.badge-draft {
  display:inline-block;
  font-family:var(--mono);
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:2px 7px;
  border:1px dashed var(--line-strong);
  color:var(--muted);
}
.card.is-draft { border-top-color:var(--line-strong); }
.card.is-draft .thumb span::after { content:" · draft"; }

.gallery-empty {
  font-style:italic;
  color:var(--muted);
  padding:22px 0;
}

/* ---------- article page parts ---------- */
.article-byline { margin-top:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.draft-banner {
  margin:22px 0 0;
  max-width:60ch;
  border-left:4px solid var(--line-strong);
  background:var(--panel);
  padding:14px 20px 16px;
}
.draft-banner .rk {
  display:block;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:7px;
}
.draft-banner p { font-size:.95rem; margin:0; max-width:none; }

.article-cover { margin:26px 0 10px; }
.article-cover .cover-placeholder {
  aspect-ratio:16 / 6;
  background:
    repeating-linear-gradient(-45deg, var(--panel-2) 0 16px, var(--panel) 16px 32px);
  border:1px solid var(--line-strong);
  border-top:4px double var(--line-strong);
  display:flex;
  align-items:center;
  justify-content:center;
}
.article-cover .cover-placeholder span {
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
/* real cover: the bundle's cover.png is set inline as --cover and layered OVER the
   placeholder gradient. A missing file at request time falls back to the gradient
   rather than a broken image. The cover is 16:9 art, so the slot switches ratio. */
.article-cover .cover-placeholder.has-cover {
  aspect-ratio:16 / 9;
  background-image:var(--cover),
    repeating-linear-gradient(-45deg, var(--panel-2) 0 16px, var(--panel) 16px 32px);
  background-size:cover, auto;
  background-position:center, 0 0;
  background-repeat:no-repeat, repeat;
}
.article-cover figcaption { margin-top:8px; }

.video-leg {
  margin:28px 0 0;
  border-top:1px solid var(--line);
  padding-top:18px;
  max-width:60ch;
}
.video-leg .rk {
  display:block;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.video-leg p { font-size:.95rem; margin:0; }
.video-leg .video-none { color:var(--muted); font-style:italic; }
/* inline explainer player: responsive 16:9 frame (privacy-mode YouTube iframe),
   generated from the article's `video` metadata. The padding-top:56.25% box keeps
   the 16:9 ratio on every browser; the iframe is absolutely filled inside it. */
.video-embed {
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  margin:0 0 12px;
  border:1px solid var(--line-strong);
  background:var(--panel);
}
/* padding-box fallback for engines without aspect-ratio support */
@supports not (aspect-ratio:16 / 9) {
  .video-embed { height:0; padding-top:56.25%; }
}
.video-embed iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* ---------- email signup embed (mail leg) ---------- */
.signup {
  margin:34px 0 8px;
  border:1px solid var(--line-strong);
  border-top:3px solid var(--accent);
  background:var(--panel);
  padding:20px 22px 22px;
  max-width:60ch;
}
.signup .rk {
  display:block;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.signup .signup-lede { font-size:.95rem; margin:0 0 16px; max-width:none; }
.signup-form { display:flex; flex-direction:column; gap:9px; }
.signup-label {
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.signup-input {
  font-family:var(--serif);
  font-size:1rem;
  padding:9px 11px;
  border:1px solid var(--line-strong);
  background:var(--paper);
  color:var(--ink);
}
.signup-input:focus { outline:2px solid var(--accent); outline-offset:1px; }
.signup-groups { font-size:.9rem; color:var(--muted); margin:2px 0 0; max-width:none; }
.signup-btn {
  align-self:flex-start;
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:9px 18px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:var(--paper);
  cursor:pointer;
}
.signup-btn:hover { background:transparent; color:var(--accent); }
/* bot honeypot fields — off-screen, never display:none (bots check for that) */
.signup .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.signup-note {
  font-family:var(--mono);
  font-size:.66rem;
  line-height:1.5;
  color:var(--muted);
  font-style:italic;
  margin:4px 0 0;
  max-width:none;
}