/* TGSIDD — blog. Standalone; class names match build.py output. */
/* DERIVED from valoraecast-site/app/globals.css by sync_blog_tokens.py.
   Do not hand-edit these nine values; change globals.css and re-run the script. */
:root{
  --bg:#02040a; --surface:#101724; --surface2:#18202f;
  --ink:#eef2f8; --ink2:#9fadc2; --ink3:#8091a9;
  --rule:#26334a; --rule2:#35455f; --accent:#79a9e0;
}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);margin:0;
  font-family:Jost,"Avenir Next","Century Gothic",system-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:#9cc0eb;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:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;font-size:.7rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#71717a;margin-bottom:1.1rem}
.blog-hero h1{font-family:Jost,"Avenir Next",system-ui,sans-serif;font-size:clamp(2.1rem,5.6vw,3.7rem);font-weight:700;
  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:Jost,"Avenir Next",system-ui,sans-serif;font-size:1.4rem;font-weight:700;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:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;border-radius:0}
.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:1px}
.post-card{display:flex;flex-direction:column;gap:.65rem;text-decoration:none;color:inherit;
  background:#000000;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:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;font-size:.66rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#71717a}
.post-card-title{display:block;font-family:Jost,"Avenir Next",system-ui,sans-serif;font-size:1.14rem;font-weight:600;
  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:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;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:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;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:Jost,"Avenir Next",system-ui,sans-serif;font-size:clamp(1.9rem,4.8vw,2.9rem);font-weight:700;
  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:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;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:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;font-size:.66rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#71717a;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:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;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:Jost,"Avenir Next",system-ui,sans-serif;font-size:1.58rem;font-weight:700;letter-spacing:-.024em;
  margin:2.8rem 0 .9rem;line-height:1.24;text-wrap:balance;color:var(--ink)}
.post-body h3{font-family:Jost,"Avenir Next",system-ui,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:"JetBrains Mono",ui-monospace,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:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;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:Jost,"Avenir Next",system-ui,sans-serif;font-size:1.45rem;font-weight:700;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:Jost,"Avenir Next",system-ui,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:0;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:Jost,"Avenir Next",system-ui,sans-serif;margin:0 0 .6rem;font-size:1.32rem;font-weight:700;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:0;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace}
.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:Jost,"Avenir Next",system-ui,sans-serif;font-size:1.28rem;margin:0 0 1.1rem;
  font-weight:700;color:var(--ink)}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px}
.rel-card{display:flex;flex-direction:column;gap:.5rem;text-decoration:none;color:inherit;
  background:#000000;border:1px solid var(--rule);padding:1.25rem;transition:border-color .18s}
.rel-card:hover{border-color:var(--rule2)}
.rel-cat{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;font-size:.62rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#71717a}
.rel-title{font-family:Jost,"Avenir Next",system-ui,sans-serif;font-size:.98rem;font-weight:600;line-height:1.35;color:var(--ink)}
.rel-meta{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;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}}


/* Cast: hairline grid */
/* Hairlines are drawn by each card, NOT by the container background showing
   through the 1px gaps. With the old approach any unfilled grid cell painted
   itself --rule and read as a card that failed to load. */
.blog-grid,.rel-grid{background:var(--bg)}
.post-card,.rel-card{border:0;box-shadow:0 0 0 1px var(--rule)}
.post-card--feature{background:var(--surface)}

/* VALORAE Cast nav + footer */
.vc-nav{display:flex;align-items:center;gap:2rem;padding:1.1rem 2rem;border-bottom:1px solid var(--rule);
  position:sticky;top:0;background:rgba(2,4,10,.92);backdrop-filter:blur(10px);z-index:50;flex-wrap:wrap}
.vc-brand{font-weight:700;letter-spacing:.14em;font-size:.9rem;text-decoration:none;color:var(--ink)}
.vc-brand span{color:var(--accent)}
.vc-nav-links{display:flex;gap:1.35rem;flex:1;flex-wrap:wrap}
.vc-nav-links a{color:var(--ink2);text-decoration:none;font-size:.88rem}
.vc-nav-links a:hover{color:var(--ink)}
.vc-nav-cta{background:var(--accent);color:#02040a;padding:.55rem 1.25rem;border-radius:3px;
  text-decoration:none;font-weight:600;font-size:.85rem;white-space:nowrap}
.vc-footer{border-top:1px solid var(--rule);margin-top:4rem;background:#05070c}
.vc-footer-inner{max-width:1080px;margin:0 auto;padding:3rem 2rem;display:flex;
  justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
.vc-footer-brand{font-weight:700;letter-spacing:.14em;margin-bottom:.7rem;color:var(--ink)}
.vc-footer-inner p{color:var(--ink3);font-size:.88rem;max-width:40ch;margin:0}
.vc-footer-links{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:flex-start}
.vc-footer-links a{color:var(--ink2);text-decoration:none;font-size:.86rem}
.vc-footer-links a:hover{color:var(--accent)}
.vc-footer-base{border-top:1px solid var(--rule);padding:1.15rem 2rem;text-align:center;
  color:var(--ink3);font-size:.75rem}

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

/* Nav at narrow widths. .vc-nav-links carries its own flex:1;flex-wrap:wrap, so
   dropping wrap on .vc-nav alone still broke the links onto extra rows. Two tidy
   rows instead: brand and CTA on the first, links scrolling horizontally on the
   second. Targets stay at 44px. */
@media(max-width:640px){
  .vc-nav{gap:.75rem;padding:.85rem 1.25rem;flex-wrap:wrap}
  .vc-nav-links{order:3;width:100%;flex:0 0 100%;flex-wrap:nowrap;gap:1.1rem;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .vc-nav-links::-webkit-scrollbar{display:none}
  .vc-nav-links a{white-space:nowrap;padding:.5rem 0;min-height:44px;display:flex;align-items:center}
  .vc-nav-cta{margin-left:auto}
}