/* NovaTechRay blog layer. Consumes the tokens already defined in css/brand.css
   so light and dark themes stay in sync with the rest of the site. */

.post-container { max-width: 780px; }

/* ---------- breadcrumbs ---------- */
.crumbs {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .02em;
  color: var(--text-muted); padding-top: 8.5rem; margin-bottom: 2.25rem;
}
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-strong); }
.crumbs span[aria-hidden] { opacity: .45; }

/* ---------- post header ---------- */
.post-head { margin-bottom: 2.5rem; }
.post-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.05rem, 5vw, 3.05rem); line-height: 1.08;
  letter-spacing: -.025em; color: var(--text-signal);
  margin: 1rem 0 1.1rem;
}
.post-standfirst {
  font-size: 1.16rem; line-height: 1.6; color: var(--text-muted);
  max-width: 62ch; margin-bottom: 1.5rem;
}
.post-meta {
  font-family: var(--font-mono); font-size: .8rem; color: var(--text-dim);
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
  padding-top: 1.25rem; border-top: 1px solid var(--border-line);
}

/* ---------- the answer block AI engines lift ---------- */
.post-answer {
  position: relative; background: var(--bg-panel);
  border: 1px solid var(--border-line); border-left: 3px solid var(--accent-blue);
  border-radius: var(--radius-md); padding: 1.5rem 1.6rem; margin-bottom: 2.75rem;
}
.post-answer-label {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-light); margin-bottom: .6rem;
}
.post-answer-body {
  font-size: 1.1rem; line-height: 1.62; color: var(--text-signal); margin: 0;
}

/* ---------- table of contents ---------- */
.post-toc {
  border: 1px solid var(--border-line); border-radius: var(--radius-md);
  padding: 1.35rem 1.5rem; margin-bottom: 2.75rem; background: var(--sheen);
}
.post-toc-title {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: .85rem;
}
.post-toc ol { list-style: none; counter-reset: toc; display: grid; gap: .5rem; margin: 0; padding: 0; }
.post-toc li { counter-increment: toc; display: flex; gap: .7rem; font-size: .95rem; }
.post-toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .75rem; color: var(--accent-light);
  padding-top: .15rem; flex: none;
}
.post-toc a { color: var(--text-muted); text-decoration: none; }
.post-toc a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- article body ---------- */
.post-body { font-size: 1.06rem; line-height: 1.75; color: var(--text-muted); }
.post-body > * + * { margin-top: 1.35rem; }
.post-body p { max-width: 68ch; }
.post-body strong { color: var(--text-signal); font-weight: 600; }
.post-body a {
  color: var(--accent-strong); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.post-body a:hover { color: var(--accent-strong-hover); }

.post-body h2 {
  font-family: var(--font-display); font-weight: 700; color: var(--text-signal);
  font-size: clamp(1.5rem, 3.2vw, 1.95rem); line-height: 1.2; letter-spacing: -.018em;
  margin-top: 3.25rem; padding-top: 1.75rem; border-top: 1px solid var(--border-line);
  scroll-margin-top: 6rem;
}
.post-body h3 {
  font-family: var(--font-display); font-weight: 600; color: var(--text-signal);
  font-size: 1.22rem; line-height: 1.32; margin-top: 2.25rem; scroll-margin-top: 6rem;
}
.post-body h4 {
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-light); margin-top: 2rem;
}

.post-body ul, .post-body ol { padding-left: 1.3rem; max-width: 68ch; display: grid; gap: .6rem; }
.post-body li::marker { color: var(--accent-light); }
.post-body li > ul, .post-body li > ol { margin-top: .6rem; }

.post-body blockquote {
  border-left: 2px solid var(--accent-dim); padding: .2rem 0 .2rem 1.4rem;
  color: var(--text-signal); font-size: 1.1rem;
}
.post-body blockquote p { margin: 0; }

.post-body code {
  font-family: var(--font-mono); font-size: .875em; background: var(--bg-panel);
  border: 1px solid var(--border-line); border-radius: 4px; padding: .12em .38em;
  color: var(--accent-light);
}
.post-code {
  background: var(--bg-panel); border: 1px solid var(--border-line);
  border-radius: var(--radius-md); padding: 1.15rem 1.25rem; overflow-x: auto;
  font-size: .85rem; line-height: 1.65;
}
.post-code code { background: none; border: 0; padding: 0; color: var(--text-signal); }

.post-body hr { border: 0; border-top: 1px solid var(--border-line); margin: 2.5rem 0; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border-line); border-radius: var(--radius-md); }
.post-body table { border-collapse: collapse; width: 100%; font-size: .94rem; min-width: 460px; }
.post-body th, .post-body td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--border-line); }
.post-body th {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-signal); background: var(--sheen);
}
.post-body tbody tr:last-child td { border-bottom: 0; }

.callout {
  border: 1px solid var(--border-line); border-left: 3px solid var(--accent-blue);
  border-radius: var(--radius-md); padding: 1.2rem 1.35rem; background: var(--sheen);
  font-size: 1rem;
}
.callout p { max-width: none; }
.callout > * + * { margin-top: .75rem; }
.callout-title {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-light);
}
.callout-warn { border-left-color: #E0A63C; }
.callout-warn .callout-title { color: #E0A63C; }

/* ---------- FAQ ---------- */
.post-faq { margin-top: 3.5rem; }
.post-faq h2 {
  font-family: var(--font-display); font-weight: 700; color: var(--text-signal);
  font-size: 1.65rem; margin-bottom: 1.25rem;
}
.post-faq-item {
  border: 1px solid var(--border-line); border-radius: var(--radius-md);
  padding: 1rem 1.2rem; margin-bottom: .7rem; background: var(--bg-panel);
}
.post-faq-item summary {
  cursor: pointer; font-weight: 600; color: var(--text-signal); list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.post-faq-item summary::-webkit-details-marker { display: none; }
.post-faq-item summary::after {
  content: "+"; font-family: var(--font-mono); color: var(--accent-light); flex: none;
}
.post-faq-item[open] summary::after { content: "\2212"; }
.post-faq-a { color: var(--text-muted); padding-top: .85rem; line-height: 1.7; }
.post-faq-a p { margin: 0; }

/* ---------- tags ---------- */
.post-tags {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem;
  padding: 0; margin: 2.5rem 0 0;
}
.post-tags li {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--text-dim); border: 1px solid var(--border-line);
  border-radius: var(--radius-full); padding: .3rem .75rem;
}

/* ---------- CTA ---------- */
.post-cta {
  margin-top: 3.5rem; padding: 2.25rem; border-radius: var(--radius-lg);
  border: 1px solid var(--border-line); background: var(--bg-panel);
  box-shadow: var(--shadow-card);
}
.post-cta h2 {
  font-family: var(--font-display); font-weight: 700; color: var(--text-signal);
  font-size: 1.45rem; line-height: 1.25; margin-bottom: .7rem;
}
.post-cta p { color: var(--text-muted); margin-bottom: 1.4rem; max-width: 56ch; }

/* ---------- related ---------- */
.post-related { margin-top: 4rem; }
.post-related h2 {
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.1rem;
}
.rel-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rel-card {
  display: grid; gap: .5rem; padding: 1.15rem; text-decoration: none;
  border: 1px solid var(--border-line); border-radius: var(--radius-md);
  background: var(--bg-panel); transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.rel-card:hover { border-color: var(--border-line-light); transform: translateY(-2px); }
.rel-cat { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-light); }
.rel-title { font-weight: 600; color: var(--text-signal); line-height: 1.35; font-size: .98rem; }
.rel-meta { font-family: var(--font-mono); font-size: .72rem; color: var(--text-dim); }

/* ---------- index ---------- */
.blog-hero { padding-top: 9.5rem; padding-bottom: 3rem; }
.blog-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.25rem; }
.blog-filter {
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .04em;
  color: var(--text-muted); background: transparent; cursor: pointer;
  border: 1px solid var(--border-line); border-radius: var(--radius-full);
  padding: .45rem .95rem; transition: all var(--transition-fast);
}
.blog-filter:hover { border-color: var(--border-line-light); color: var(--text-signal); }
.blog-filter.is-active { background: var(--accent-blue); border-color: var(--accent-strong); color: var(--accent-on-fill); }

.blog-feature { margin-bottom: 1.1rem; }
.blog-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.post-card {
  display: grid; gap: .65rem; align-content: start; text-decoration: none;
  padding: 1.6rem; border: 1px solid var(--border-line);
  border-radius: var(--radius-lg); background: var(--bg-panel);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.post-card:hover { border-color: var(--border-line-light); transform: translateY(-3px); }
.post-card[hidden] { display: none; }
.post-card-cat { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-light); }
.post-card-title {
  /* h2 for the outline; the card grid owns the spacing, so drop the UA margin. */
  margin: 0;
  font-family: var(--font-display); font-weight: 700; color: var(--text-signal);
  font-size: 1.2rem; line-height: 1.28; letter-spacing: -.01em;
}
.post-card-desc { color: var(--text-muted); font-size: .95rem; line-height: 1.6; }
.post-card-meta { font-family: var(--font-mono); font-size: .72rem; color: var(--text-dim); margin-top: .2rem; }

.post-card--feature { padding: 2.25rem; border-color: var(--border-line-light); }
.post-card--feature .post-card-title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.post-card--feature .post-card-desc { font-size: 1.05rem; max-width: 62ch; }

@media (max-width: 640px) {
  .crumbs { padding-top: 6.5rem; }
  .blog-hero { padding-top: 7.5rem; }
  .post-answer, .post-toc, .post-cta { padding: 1.25rem; }
  .post-cta { padding: 1.6rem; }
  .post-body { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
  .post-card, .rel-card { transition: none; }
  .post-card:hover, .rel-card:hover { transform: none; }
}

/* Index headings (added 2026-09-11): the list has structure a crawler can read. */
.blog-list-h{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin:32px 0 14px}
/* The title is an <h2> since 2026-09-11 so the index has crawlable structure.
   Reset ONLY the browser's heading margin. The previous `font:inherit;
   font-weight:inherit` here also wiped this site's own .post-card-title rule
   above, which is why every card headline rendered at body weight and size. */
.post-card-title{margin:0;display:block}

/* Aliases consumed by the shared blog layout appended at build time. */
:root{
  --bl-bg:var(--bg-void); --bl-surface:var(--bg-panel);
  --bl-ink:var(--text-signal); --bl-ink2:var(--text-muted); --bl-ink3:var(--text-dim);
  --bl-rule:var(--border-line); --bl-accent:var(--accent-strong);
  --bl-display:var(--font-display); --bl-body:var(--font-body);
}


/* ==========================================================================
   Shared blog layout — modelled on atomikgrowth.com/blog (captured in a real
   browser at 1440px on 2026-09-17, not inferred from a fetch).

   What was copied is the STRUCTURE: a two-column masthead with the title left
   and the standfirst right, plain text category filters with a dot on the
   active one, and an image-led three-column grid whose cards carry a cover,
   an accent category label beside the date, a tight display title and a muted
   excerpt. Reference measurements: card title 18px/1.3 display 600, excerpt
   13px/1.5 at 60% ink, filters 15px/500, cover ~16:10 object-fit cover.

   What was NOT copied is the palette. Every colour below resolves through the
   --bl-* aliases each site declares above this block, so all six blogs share
   one layout and keep their own brand.

   This file is appended to every <site>.blog.css at build time by build.py.
   Because it is appended, it wins the cascade over the older card rules, and
   any media query added here must stay at the end of the file.
   ========================================================================== */

.blog-masthead{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:2rem 3rem;align-items:start;
  padding:9rem 0 3.25rem;
}
.blog-masthead-title{margin:0;font-family:var(--bl-display);font-weight:600;
  font-size:clamp(2.4rem,5.2vw,3.5rem);line-height:1.06;letter-spacing:-.022em;color:var(--bl-ink)}
.blog-masthead-title .l2{display:block;color:var(--bl-ink3)}
.blog-masthead-intro{margin:.5rem 0 0;font-family:var(--bl-body);
  font-size:1rem;line-height:1.62;color:var(--bl-ink2);max-width:46ch;justify-self:end}

.blog-filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem 1.65rem;
  padding:0 0 2.5rem;border:0;margin:0;
}
.blog-filter{
  appearance:none;background:none;border:0;border-radius:4px;cursor:pointer;
  font-family:var(--bl-body);font-size:.9375rem;font-weight:500;letter-spacing:0;
  color:var(--bl-ink3);padding:.4rem 0;min-height:44px;
  display:inline-flex;align-items:center;gap:.45rem;
  transition:color .18s ease;
}
.blog-filter:hover{color:var(--bl-ink2)}
/* Every site's older stylesheet carries a `.blog-filter.is-active` pill rule
   (solid --ink background, inverted text). That has the same specificity as
   this one, so overriding only `color` left white text on a white pill. Reset
   every property the old rule sets, not just the one that looks wrong. */
.blog-filter.is-active{color:var(--bl-ink);background:none;background-color:transparent;
  border:0;border-color:transparent;padding:.4rem 0;font-weight:500}
.blog-filter::before{
  content:"";width:5px;height:5px;border-radius:50%;background:currentColor;
  opacity:0;transform:scale(.4);transition:opacity .18s ease,transform .18s ease;
}
.blog-filter.is-active::before{opacity:1;transform:scale(1)}

.blog-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:3rem 1.75rem;padding-bottom:2rem;background:transparent;
}
.post-card{
  display:flex;flex-direction:column;gap:0;
  background:none;border:0;box-shadow:none;border-radius:0;padding:0;
  text-decoration:none;color:inherit;min-width:0;
}
.post-card-cover{
  display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:10px;background:var(--bl-surface);
  border:1px solid var(--bl-rule);
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s ease;
}
.post-card:hover .post-card-cover{transform:translateY(-3px)}
.post-card-meta{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  font-family:var(--bl-body);font-size:.8125rem;line-height:1.5;
  color:var(--bl-ink3);padding:1rem 0 .55rem;
}
.post-card-cat{
  display:inline;font-family:var(--bl-body);font-size:.8125rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--bl-accent);
}
.post-card-meta .dot{opacity:.5}
.post-card-title{
  margin:0;display:block;font-family:var(--bl-display);font-weight:600;
  font-size:1.125rem;line-height:1.3;letter-spacing:-.005em;color:var(--bl-ink);
  text-wrap:balance;
}
.post-card:hover .post-card-title{color:var(--bl-accent)}
.post-card-desc{
  display:block;margin-top:.55rem;font-family:var(--bl-body);
  font-size:.8125rem;line-height:1.5;color:var(--bl-ink2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* The first post reads as the lead story: wider cover, larger title. */
.post-card--feature{grid-column:1 / -1;display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0 2.25rem;align-items:center}
.post-card--feature .post-card-cover{aspect-ratio:16/9}
.post-card--feature .post-card-title{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.16}
.post-card--feature .post-card-desc{font-size:.9375rem;-webkit-line-clamp:4}
.post-card--feature .post-card-meta{padding-top:0}

.blog-list-h{
  font-family:var(--bl-body);font-size:.75rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bl-ink3);
  margin:0 0 1.25rem;padding-top:.5rem;
}
.blog-feature{margin-bottom:3.5rem}

@media(max-width:1024px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 1.5rem}
  .post-card--feature{grid-template-columns:1fr;gap:1rem}
  .post-card--feature .post-card-meta{padding-top:1rem}
}
@media(max-width:700px){
  .blog-masthead{grid-template-columns:1fr;gap:1.25rem;padding:7rem 0 2.25rem}
  .blog-masthead-intro{justify-self:start;max-width:none}
  .blog-grid{grid-template-columns:1fr;gap:2.25rem}
  .blog-filters{gap:.35rem 1.15rem;padding-bottom:1.75rem;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .blog-filters::-webkit-scrollbar{display:none}
  .blog-filter{white-space:nowrap}
}

/* Topic hubs. The row sits above the post grid on the index and is the only
   route into a cluster for a reader arriving at /blog. */
.hub-row{display:flex;flex-wrap:wrap;gap:.6rem;padding:0 0 2.5rem}
.hub-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--bl-body);font-size:.875rem;font-weight:500;
  color:var(--bl-ink2);text-decoration:none;
  padding:.55rem .9rem;border:1px solid var(--bl-rule);border-radius:999px;
  transition:color .18s ease,border-color .18s ease;
}
.hub-chip:hover{color:var(--bl-ink);border-color:var(--bl-ink3)}
.hub-chip-n{font-size:.75rem;color:var(--bl-ink3);font-variant-numeric:tabular-nums}
.hub-siblings{padding-top:2.5rem}
.hub-sib-links{display:flex;flex-wrap:wrap;gap:.6rem}
.hub-sib-links a{
  font-family:var(--bl-body);font-size:.875rem;color:var(--bl-ink2);text-decoration:none;
  padding:.55rem .9rem;border:1px solid var(--bl-rule);border-radius:999px;
}
.hub-sib-links a:hover{color:var(--bl-ink);border-color:var(--bl-ink3)}

/* Entity block. A byline says who typed it; this says who stands behind it,
   which is what a model weighs when deciding whether a page is worth citing. */
.post-bio{
  margin:3rem 0 0;padding:1.5rem 1.6rem;
  border:1px solid var(--bl-rule);border-left:3px solid var(--bl-accent);
  border-radius:8px;background:var(--bl-surface);
}
.post-bio-label{
  margin:0 0 .65rem;font-family:var(--bl-body);font-size:.7rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bl-ink3);
}
.post-bio-name{
  margin:0 0 .6rem;font-family:var(--bl-display);font-size:1.0625rem;font-weight:600;
  color:var(--bl-ink);display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;
}
.post-bio-role{font-family:var(--bl-body);font-size:.8125rem;font-weight:400;color:var(--bl-ink3)}
.post-bio-body{
  margin:0;font-family:var(--bl-body);font-size:.9375rem;line-height:1.6;color:var(--bl-ink2);
}
.post-bio-links{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:.9rem}
.post-bio-links a{
  font-family:var(--bl-body);font-size:.8125rem;color:var(--bl-accent);
  text-decoration:none;text-underline-offset:2px;
}
.post-bio-links a:hover{text-decoration:underline}
@media(max-width:700px){.post-bio{padding:1.25rem 1.2rem}}