/* Atvis Media — blog. Standalone; class names match build.py output. */
:root{
  --bg:#050505; --surface:#0d0d0f; --surface2:#15151a;
  --ink:#ffffff; --ink2:rgba(255,255,255,.74); --ink3:rgba(255,255,255,.5);
  --rule:rgba(255,255,255,.12); --rule2:rgba(255,255,255,.24); --accent:#ff5c35;
}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased}
body *{box-sizing:border-box}
body img{max-width:100%;height:auto}
body a{color:#ff8a66;text-underline-offset:3px}
body a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:var(--ink);color:var(--bg);padding:.6rem 1rem;z-index:100}
.container{max-width:1080px;margin:0 auto;padding:0 2rem;width:100%}

/* ---------- index ---------- */
.blog-hero{padding:5rem 0 2.5rem;border-bottom:1px solid var(--rule)}
.eyebrow-tag{font-family:Outfit,Inter,sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#ff5c35;margin-bottom:1.1rem}
.blog-hero h1{font-family:Outfit,Inter,sans-serif;font-size:clamp(2.1rem,5.6vw,3.7rem);font-weight:800;
  letter-spacing:-.032em;line-height:1.06;margin:0 0 1rem;text-wrap:balance;color:var(--ink)}
.blog-hero p{color:var(--ink2);font-size:1.06rem;max-width:62ch;margin:0}
.section{padding:2.5rem 0 5rem}
.section-header{margin-bottom:1.6rem}
.section-title{font-family:Outfit,Inter,sans-serif;font-size:1.4rem;font-weight:800;margin:0 0 .4rem;color:var(--ink)}
.section-desc{color:var(--ink3);margin:0;font-size:.95rem}
.blog-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 2rem}
.blog-filter{background:transparent;border:1px solid var(--rule2);color:var(--ink3);
  padding:.42rem 1rem;font-size:.8rem;cursor:pointer;font-family:Outfit,Inter,sans-serif;border-radius:2px}
.blog-filter:hover{color:var(--ink);border-color:var(--ink3)}
.blog-filter.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.25rem}
.post-card{display:flex;flex-direction:column;gap:.65rem;text-decoration:none;color:inherit;
  background:#0a0a0c;border:1px solid var(--rule);padding:1.7rem;transition:border-color .18s,background .18s}
.post-card:hover{border-color:var(--rule2);background:var(--surface)}
.post-card[hidden]{display:none!important}
.post-card-cat{display:block;font-family:Outfit,Inter,sans-serif;font-size:.66rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#ff5c35}
.post-card-title{display:block;font-family:Outfit,Inter,sans-serif;font-size:1.14rem;font-weight:700;
  line-height:1.34;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.post-card-desc{display:block;color:var(--ink3);font-size:.91rem;line-height:1.6}
.post-card-meta{display:block;font-family:Outfit,Inter,sans-serif;color:var(--ink3);font-size:.75rem;
  margin-top:auto;padding-top:.6rem}
.blog-feature .post-card--feature,.post-card--feature{grid-column:1/-1;background:var(--surface)}
.post-card--feature .post-card-title{font-size:clamp(1.4rem,3.4vw,2rem);line-height:1.18}
.post-card--feature .post-card-desc{font-size:1rem;max-width:66ch}

/* ---------- post ---------- */
.post{display:block}
.post-container{max-width:720px}
.crumbs{font-family:Outfit,Inter,sans-serif;font-size:.75rem;color:var(--ink3);padding-top:2rem}
.crumbs a{color:var(--ink3);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.post-head{padding:2.2rem 0 1.4rem;position:static;background:none;border:0}
.post-title{font-family:Outfit,Inter,sans-serif;font-size:clamp(1.9rem,4.8vw,2.9rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.1;margin:0 0 1rem;text-wrap:balance;color:var(--ink)}
.post-standfirst{color:var(--ink2);font-size:1.08rem;margin:0 0 1.2rem;line-height:1.6}
.post-meta{font-family:Outfit,Inter,sans-serif;color:var(--ink3);font-size:.78rem;display:flex;
  gap:1.1rem;flex-wrap:wrap;margin:0}
.post-answer{background:var(--surface);border-left:3px solid var(--accent);padding:1.35rem 1.6rem;margin:2rem 0}
.post-answer-label{display:block;font-family:Outfit,Inter,sans-serif;font-size:.66rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#ff5c35;margin-bottom:.55rem}
.post-answer-body{margin:0;color:var(--ink);font-size:1.02rem;line-height:1.62}
.post-toc{background:var(--surface);border:1px solid var(--rule);padding:1.25rem 1.55rem;margin:2rem 0}
.post-toc-title{display:block;font-family:Outfit,Inter,sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:.65rem}
.post-toc ol,.post-toc ul{margin:0;padding-left:1.15rem;color:var(--ink3)}
.post-toc li{margin-bottom:.35rem}
.post-toc a{color:var(--ink2);text-decoration:none}
.post-toc a:hover{color:var(--accent)}
.post-body h2{font-family:Outfit,Inter,sans-serif;font-size:1.58rem;font-weight:800;letter-spacing:-.024em;
  margin:2.8rem 0 .9rem;line-height:1.24;text-wrap:balance;color:var(--ink)}
.post-body h3{font-family:Outfit,Inter,sans-serif;font-size:1.15rem;font-weight:600;margin:1.9rem 0 .6rem;
  text-wrap:balance;color:var(--ink)}
.post-body p{margin:0 0 1.2rem;color:var(--ink2)}
.post-body strong{color:var(--ink);font-weight:600}
.post-body ul,.post-body ol{color:var(--ink2);padding-left:1.3rem;margin:0 0 1.2rem}
.post-body li{margin-bottom:.5rem}
.post-body blockquote{border-left:2px solid var(--rule2);padding-left:1.15rem;margin:1.5rem 0;color:var(--ink3)}
.post-body code{background:var(--surface2);padding:.14em .4em;font-size:.88em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.post-body pre{background:var(--surface);border:1px solid var(--rule);padding:1rem;overflow-x:auto}
.post-body pre code{background:none;padding:0}
.table-wrap{overflow-x:auto;margin:1.6rem 0;border:1px solid var(--rule)}
.post-body table{border-collapse:collapse;width:100%;font-size:.89rem;min-width:420px}
.post-body th{background:var(--surface);text-align:left;padding:.68rem .9rem;
  border-bottom:1px solid var(--rule2);font-family:Outfit,Inter,sans-serif;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);font-weight:600;white-space:nowrap}
.post-body td{padding:.68rem .9rem;border-bottom:1px solid var(--rule);color:var(--ink2)}
.post-body tr:last-child td{border-bottom:0}
.post-faq{margin:3rem 0}
.post-faq h2{font-family:Outfit,Inter,sans-serif;font-size:1.45rem;font-weight:800;margin:0 0 1rem;color:var(--ink)}
.post-faq-item{border-bottom:1px solid var(--rule);padding:.95rem 0}
.post-faq-item summary{cursor:pointer;font-weight:600;color:var(--ink);
  font-family:Outfit,Inter,sans-serif;font-size:1.01rem;list-style:none}
.post-faq-item summary::-webkit-details-marker{display:none}
.post-faq-item summary::before{content:"+ ";color:var(--accent);font-weight:700}
.post-faq-item[open] summary::before{content:"\2212 "}
.post-faq-a{margin:.75rem 0 0;color:var(--ink2)}
.post-faq-a p{margin:0}
.post-tags{display:flex;gap:.45rem;flex-wrap:wrap;margin:2rem 0}
.post-tags span,.post-tags li{border:1px solid var(--rule);color:var(--ink3);
  padding:.28rem .8rem;font-size:.73rem;border-radius:2px;list-style:none}
.post-tags ul{display:flex;gap:.45rem;flex-wrap:wrap;padding:0;margin:0}
.post-cta{background:var(--surface);border:1px solid var(--rule2);padding:2.1rem;margin:3rem 0}
.post-cta h2{font-family:Outfit,Inter,sans-serif;margin:0 0 .6rem;font-size:1.32rem;font-weight:800;color:var(--ink)}
.post-cta p{color:var(--ink2);margin:0 0 1.3rem}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:.9rem;
  padding:.72rem 1.6rem;border-radius:2px;font-family:Outfit,Inter,sans-serif}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{opacity:.88}
.btn-lg{padding:.85rem 1.9rem;font-size:.95rem}
.post-related{margin:3rem 0 5rem}
.post-related h2{font-family:Outfit,Inter,sans-serif;font-size:1.28rem;margin:0 0 1.1rem;
  font-weight:800;color:var(--ink)}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem}
.rel-card{display:flex;flex-direction:column;gap:.5rem;text-decoration:none;color:inherit;
  background:#0a0a0c;border:1px solid var(--rule);padding:1.25rem;transition:border-color .18s}
.rel-card:hover{border-color:var(--rule2)}
.rel-cat{font-family:Outfit,Inter,sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#ff5c35}
.rel-title{font-family:Outfit,Inter,sans-serif;font-size:.98rem;font-weight:700;line-height:1.35;color:var(--ink)}
.rel-meta{font-family:Outfit,Inter,sans-serif;font-size:.72rem;color:var(--ink3);margin-top:auto}

@media(max-width:640px){
  .container{padding:0 1.25rem}
  .blog-hero{padding:3rem 0 2rem}
  .post-card{padding:1.35rem}
  .post-cta{padding:1.5rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Atvis nav + footer */
.blog-nav{display:flex;align-items:center;gap:2rem;padding:1.1rem 2rem;border-bottom:1px solid var(--rule);
  background:rgba(5,5,5,.93);position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);flex-wrap:wrap}
.blog-nav .premium-logo-container{display:flex;text-decoration:none;color:var(--ink);align-items:center;gap:12px}
.blog-nav .premium-logo-img{width:34px;height:34px;object-fit:contain;filter:invert(1);mix-blend-mode:screen}
.blog-nav .brand-text{font-family:Outfit,sans-serif;font-weight:900;letter-spacing:.1em;font-size:.9rem}
.blog-nav .nav-links{display:flex;gap:1.4rem;flex:1;justify-content:center;flex-wrap:wrap}
.blog-nav .nav-links a{color:var(--ink2);text-decoration:none;font-size:.88rem;font-weight:500}
.blog-nav .nav-links a:hover{color:var(--ink)}
.blog-nav .premium-btn{background:var(--ink);color:#050505;padding:.55rem 1.15rem;border-radius:2px;
  text-decoration:none;font-weight:700;font-size:.82rem;white-space:nowrap}
@media(max-width:860px){.blog-nav .nav-links{order:3;width:100%;justify-content:flex-start;gap:1rem}}
.blog-footer{border-top:1px solid var(--rule);background:#030303;margin-top:4rem}
.blog-footer-inner{max-width:1080px;margin:0 auto;padding:3rem 2rem;display:grid;
  grid-template-columns:2fr 1fr 1fr;gap:2.5rem}
.blog-footer-brand{font-family:Outfit,sans-serif;font-weight:900;letter-spacing:.1em;margin-bottom:.8rem}
.blog-footer-inner p{color:var(--ink3);font-size:.88rem;max-width:38ch;margin:0}
.blog-footer-links,.blog-footer-social{display:flex;flex-direction:column;gap:.55rem}
.blog-footer-links a,.blog-footer-social a{color:var(--ink2);text-decoration:none;font-size:.86rem}
.blog-footer-links a:hover,.blog-footer-social a:hover{color:var(--accent)}
.blog-footer-base{border-top:1px solid var(--rule);padding:1.15rem 2rem;text-align:center;
  color:var(--ink3);font-size:.78rem}
@media(max-width:760px){.blog-footer-inner{grid-template-columns:1fr;gap:1.8rem}}

/* 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); --bl-surface:var(--surface);
  --bl-ink:var(--ink); --bl-ink2:var(--ink2); --bl-ink3:var(--ink3);
  --bl-rule:var(--rule); --bl-accent:var(--accent);
  --bl-display:'Outfit','Inter',sans-serif; --bl-body:'Inter',sans-serif;
}


/* ==========================================================================
   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}}