/* RAVN — brutalist design system. The single stylesheet for the whole site:
   marketing subpages and the blog. Replaced /site.css, which is deleted.
   It is built against the class names those pages already used, so adopting it
   needed no markup changes. (The homepage carries its own copy inline.) */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/dm-sans.woff2") format("woff2");
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/ibm-plex-mono-500.woff2") format("woff2");
}

:root{
  --void:#0A0A0A;
  --obsidian:#151515;
  --carbon:#1E1E1E;
  --orange:#F7931A;
  --gold:#C9A84C;
  --cream:#F0EDE6;
  --ash:#888480;
  --confirmed:#00D68F;
  --hairline:rgba(240,237,230,0.10);
  --hairline-b:rgba(240,237,230,0.18);
  --glass-bg:rgba(21,21,21,0.55);
  --pad:clamp(20px,5vw,72px);
  --max:1320px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
/* no scroll-behavior:smooth — site-motion.js runs Lenis, and the two fight */
body{
  background:var(--void); color:var(--cream);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; }
::selection{ background:var(--orange); color:var(--void); }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
.mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; }

/* ── blueprint grid: fixed backdrop, no markup needed ── */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(240,237,230,0.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(240,237,230,0.038) 1px, transparent 1px);
  background-size:clamp(64px,7vw,112px) clamp(64px,7vw,112px);
  -webkit-mask-image:radial-gradient(ellipse 92% 72% at 50% 30%, #000 18%, rgba(0,0,0,0) 80%);
  mask-image:radial-gradient(ellipse 92% 72% at 50% 30%, #000 18%, rgba(0,0,0,0) 80%);
}
html.lenis, html.lenis body{ height:auto; }

/* ── read progress (injected by site-motion.js) ── */
.read-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:transparent; pointer-events:none;
}
.read-progress-fill{
  height:100%; background:var(--orange);
  transform:scaleX(0); transform-origin:0 50%;
}

/* ── header ── */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; height:64px; padding:0 var(--pad);
  border-bottom:1px solid transparent; transition:background .3s ease, border-color .3s ease;
}
.site-header.is-scrolled{
  background:rgba(10,10,10,0.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--hairline);
}
.site-header .logo{ display:flex; align-items:center; gap:10px; flex:none; }
.site-header .logo img{ width:26px; height:26px; display:block; }
.site-header .logo span{ font-weight:800; font-size:19px; letter-spacing:.06em; }
.site-nav{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); }
.site-nav a{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ash); transition:color .2s ease;
}
.site-nav a:hover, .site-nav a.is-active{ color:var(--cream); }
.site-nav a.is-active{ color:var(--orange); }
.site-nav a.nav-cta{
  position:relative; border:1px solid var(--hairline-b); padding:9px 15px; color:var(--cream);
  transition:border-color .2s ease, color .2s ease;
}
.site-nav a.nav-cta:hover{ border-color:var(--orange); color:var(--orange); }

/* corner brackets: reveal on hover/focus, a viewfinder-locking-on accent shared
   by every bordered CTA (homepage buttons already carry this; subpages didn't) */
.nav-cta::before, .cta-link::before{
  content:''; position:absolute; inset:-5px; pointer-events:none; opacity:0;
  transition:opacity .18s ease-out;
  background:
    linear-gradient(var(--orange),var(--orange)) top left/8px 1.5px no-repeat,
    linear-gradient(var(--orange),var(--orange)) top left/1.5px 8px no-repeat,
    linear-gradient(var(--orange),var(--orange)) top right/8px 1.5px no-repeat,
    linear-gradient(var(--orange),var(--orange)) top right/1.5px 8px no-repeat,
    linear-gradient(var(--orange),var(--orange)) bottom left/8px 1.5px no-repeat,
    linear-gradient(var(--orange),var(--orange)) bottom left/1.5px 8px no-repeat,
    linear-gradient(var(--orange),var(--orange)) bottom right/8px 1.5px no-repeat,
    linear-gradient(var(--orange),var(--orange)) bottom right/1.5px 8px no-repeat;
}
.nav-cta:hover::before, .nav-cta:focus-visible::before,
.cta-link:hover::before, .cta-link:focus-visible::before{ opacity:1; }

.nav-toggle{
  display:none; background:transparent; border:1px solid var(--hairline-b);
  width:38px; height:34px; padding:0 9px; cursor:pointer;
  flex-direction:column; justify-content:center; gap:4px;
}
.nav-toggle-bar{ display:block; width:100%; height:1px; background:var(--cream); }

/* ── page shell ── */
main.page{
  position:relative; z-index:1;
  width:100%; max-width:var(--max); margin:0 auto;
  padding:calc(64px + clamp(40px,7vw,96px)) var(--pad) clamp(60px,9vw,120px);
  counter-reset:sect;
}

/* ── hero ── */
.page-hero{ padding-bottom:clamp(34px,5vw,66px); }
.page-hero .eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.2em; color:var(--ash);
  text-transform:uppercase; margin-bottom:22px;
}
.page-hero h1{
  font-size:clamp(38px,5.6vw,74px); font-weight:800;
  letter-spacing:-.038em; line-height:.94; margin:0;
}
.page-hero .lead{
  font-size:clamp(15px,1.35vw,18px); line-height:1.66; color:var(--ash);
  max-width:64ch; margin:22px 0 0;
}
.page-hero .lead strong, .page-hero .lead b{ color:var(--cream); font-weight:500; }

/* ── stat row ── */
.stat-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px; background:var(--hairline); border:1px solid var(--hairline);
  margin:clamp(22px,3.5vw,44px) 0;
}
.stat-chip{ background:var(--void); padding:clamp(18px,2.4vw,26px) clamp(16px,2vw,22px); }
.stat-val{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:clamp(15px,1.5vw,19px); font-weight:500; letter-spacing:-.01em; color:var(--cream);
}
.stat-label{ font-size:12.5px; line-height:1.6; color:var(--ash); margin-top:9px; }

/* ── diagram ── */
.page-diagram{
  margin:clamp(24px,4vw,52px) 0; padding:clamp(20px,3vw,36px);
  border:1px solid var(--hairline); background:var(--obsidian);
}
.page-diagram img{ display:block; width:100%; height:auto; }
.page-diagram figcaption{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ash); text-align:center; margin-top:16px;
}

/* ── sections: CSS counter reproduces the homepage's //01 markers ── */
.page-section{
  counter-increment:sect;
  border-top:1px solid var(--hairline);
  padding:clamp(38px,5.5vw,72px) 0 0;
  margin-top:clamp(30px,4.5vw,58px);
  scroll-margin-top:96px;
}
.page-section::before{
  content:'//' counter(sect,decimal-leading-zero);
  display:block; font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.16em; color:var(--orange); margin-bottom:16px;
}
.page-section h2{
  font-size:clamp(24px,3vw,40px); font-weight:800;
  letter-spacing:-.03em; line-height:1.04; margin:0 0 20px;
}
.page-section p{ font-size:clamp(14px,1.15vw,16px); line-height:1.7; color:var(--ash); max-width:68ch; margin:0 0 16px; }
.page-section p strong, .page-section li strong{ color:var(--cream); font-weight:600; }
/* :not([class]) so this prose styling never outranks .feature-list / .doc-list /
   .faq-list, which are classed lists that manage their own layout */
.page-section > ul:not([class]){ margin:0 0 16px; padding-left:18px; }
.page-section > ul:not([class]) li{ font-size:clamp(14px,1.15vw,16px); line-height:1.7; color:var(--ash); max-width:68ch; margin-bottom:9px; }
.page-section > ul:not([class]) li::marker{ color:var(--orange); }
.page-section a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.page-section a:hover{ color:var(--orange); }

/* ── code ── */
code{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.9em;
  background:var(--carbon); border:1px solid var(--hairline); padding:2px 6px; color:var(--cream);
}
pre{
  background:var(--obsidian); border:1px solid var(--hairline);
  padding:clamp(14px,2vw,20px); overflow-x:auto; margin:0 0 18px;
}
pre code{ background:none; border:0; padding:0; font-size:12.5px; line-height:1.7; }

/* ── tables ── */
table{ width:100%; border-collapse:collapse; margin:0 0 18px; display:block; overflow-x:auto; }
th, td{
  border:1px solid var(--hairline); padding:11px 13px; text-align:left;
  font-size:12.5px; line-height:1.6; color:var(--ash); vertical-align:top;
}
th{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--cream); background:var(--obsidian);
  white-space:nowrap;
}
td code{ white-space:nowrap; }

/* ── chips ── */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; }
.chip{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  border:1px solid var(--hairline); padding:8px 12px; color:var(--ash);
}
.chip.is-accent{ border-color:rgba(247,147,26,.45); color:var(--orange); }

/* ── feature list: mono label + description, homepage node rhythm ── */
.feature-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline); }
.feature-list li{
  display:grid; grid-template-columns:84px minmax(0,1fr); gap:16px;
  padding:15px 0; border-bottom:1px solid var(--hairline); align-items:baseline;
}
.feature-list .label{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:12px;
  letter-spacing:.13em; color:var(--orange); font-weight:500;
}
.feature-list .text{ font-size:13.5px; line-height:1.62; color:var(--ash); }
.feature-list .text strong{ color:var(--cream); }

/* ── doc list ── */
.doc-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline); }
.doc-list li{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:18px;
  padding:15px 0; border-bottom:1px solid var(--hairline); align-items:baseline;
  transition:background .2s ease, padding-left .2s ease;
}
.doc-list li:hover{ background:rgba(240,237,230,0.028); padding-left:12px; }
.doc-list li a{ font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--cream); text-decoration:none; }
.doc-list li a:hover{ color:var(--orange); }
.doc-list li span{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11.5px; line-height:1.55; color:var(--ash); }

/* ── faq ── */
.faq-list{ list-style:none; margin:0; padding:0; }
.faq-item{ border-bottom:1px solid var(--hairline); }
.faq-item:first-child{ border-top:1px solid var(--hairline); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  cursor:pointer; list-style:none; padding:20px 0;
  font-size:clamp(15px,1.35vw,18px); font-weight:600; letter-spacing:-.015em;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; font-family:'IBM Plex Mono',ui-monospace,monospace;
  color:var(--orange); font-weight:400; flex:none;
}
.faq-item[open] summary::after{ content:'\2212'; }
.faq-a{ font-size:14px; line-height:1.72; color:var(--ash); margin:0 0 20px; max-width:72ch; }
.faq-a a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.faq-a a:hover{ color:var(--orange); }

/* ── meta note (privacy / terms) ── */
.meta-note{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ash);
  border:1px solid var(--hairline); padding:12px 14px; margin:0 0 clamp(20px,3vw,34px);
}

/* ── cta row ── */
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(36px,5vw,66px); }
.cta-link{
  position:relative;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--hairline-b); padding:14px 20px; color:var(--cream);
  transition:border-color .2s ease, color .2s ease;
}
.cta-link:hover{ border-color:var(--orange); color:var(--orange); }
.cta-link:first-child{ background:var(--cream); color:var(--void); border-color:var(--cream); }
.cta-link:first-child:hover{ background:var(--orange); border-color:var(--orange); color:var(--void); }

/* ── footer ── */
.site-footer{
  position:relative; z-index:1;
  border-top:1px solid var(--hairline);
  padding:30px var(--pad); display:flex; flex-wrap:wrap; gap:16px;
  align-items:center; justify-content:space-between;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ash);
  max-width:var(--max); margin:0 auto;
}
.foot-links{ display:flex; flex-wrap:wrap; gap:16px; }
.site-footer a:hover{ color:var(--cream); }

/* ═══ blog ═══════════════════════════════════════════════════════════════ */

/* main.page-* to outrank main.page above — a bare .page-blog loses on specificity */
main.page-blog{ max-width:1060px; }        /* narrower measure for long-form reading */
main.page-blog-index{ max-width:var(--max); }

/* ── post header ── */
.post-header h1{ font-size:clamp(29px,4.1vw,56px); line-height:1.06; letter-spacing:-.03em; }
.post-back{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ash);
}
.post-back:hover{ color:var(--orange); }
.post-sep{ color:var(--hairline-b); margin:0 9px; }
.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:0;
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ash); margin-top:22px;
}
.blog-tag{
  border:1px solid rgba(247,147,26,.4); color:var(--orange);
  padding:5px 10px; letter-spacing:.13em; text-transform:uppercase; font-size:9.5px;
}

/* ── post body: prose, so no //NN counters here ── */
.post-body{ margin-top:clamp(8px,1.5vw,18px); }
.post-body .page-section::before{ content:none; }
.post-body p{ font-size:clamp(15px,1.2vw,17px); line-height:1.75; color:var(--ash); max-width:70ch; margin:0 0 18px; }
.post-body h3{ font-size:clamp(17px,1.7vw,22px); font-weight:700; letter-spacing:-.02em; margin:28px 0 12px; }
.post-body ol{ margin:0 0 18px; padding-left:20px; }
.post-body ol li{ font-size:clamp(15px,1.2vw,17px); line-height:1.75; color:var(--ash); max-width:70ch; margin-bottom:9px; }
.post-body ol li::marker{ color:var(--orange); font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.85em; }
.post-body em{ color:var(--cream); font-style:italic; }
.post-body time{ font-family:'IBM Plex Mono',ui-monospace,monospace; }

.blog-inline-cta{
  border-left:2px solid var(--orange); background:var(--obsidian);
  padding:18px 20px; margin:26px 0; font-size:14.5px; line-height:1.7; color:var(--ash);
}
.blog-inline-cta a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }
.blog-inline-cta a:hover{ color:var(--orange); }

.post-footer{ border-top:1px solid var(--hairline); margin-top:clamp(34px,5vw,60px); padding-top:clamp(24px,3.5vw,40px); }

/* ── related ── */
.post-related{ border-top:1px solid var(--hairline); margin-top:clamp(34px,5vw,60px); padding-top:clamp(24px,3.5vw,40px); }
.post-related h2{
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ash); margin:0 0 22px;
}
.related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
.related-card{ background:var(--void); display:block; transition:background .2s ease; }
.related-card:hover{ background:var(--obsidian); }
.related-card-media{ aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--hairline); }
.related-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.related-card-media--plain{ background:linear-gradient(135deg,var(--obsidian),var(--carbon)); }
.related-card-body{ padding:16px 18px 20px; }
.related-card-meta{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:9px; }
.related-card-title{ font-size:15px; font-weight:600; letter-spacing:-.015em; line-height:1.35; margin:0; color:var(--cream); }
.related-card:hover .related-card-title{ color:var(--orange); }

/* ── index: filters ── */
.blog-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:clamp(26px,4vw,44px) 0 10px; }
.blog-filter{
  font-family:inherit; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  background:transparent; border:1px solid var(--hairline); color:var(--ash);
  padding:9px 14px; cursor:pointer; transition:border-color .2s ease, color .2s ease;
}
.blog-filter:hover{ border-color:var(--hairline-b); color:var(--cream); }
.blog-filter.is-on{ border-color:var(--orange); color:var(--orange); }
.blog-filter-status{ font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ash); margin:0 0 clamp(20px,3vw,32px); }
.blog-empty{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ash); padding:40px 0; }

/* ── index: cards ── */
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
.blog-card{ background:var(--void); display:flex; flex-direction:column; transition:background .2s ease; }
/* The category filter toggles .is-hidden and the hidden attribute. Both need to
   beat display:flex above, or clicking a filter hides nothing. */
.blog-card.is-hidden,
.blog-card--visual.is-hidden,
.blog-card[hidden],
.blog-card--visual[hidden]{ display:none !important; }
.blog-card:hover{ background:var(--obsidian); }
.blog-card-media{ aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--hairline); }
.blog-card-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.blog-card:hover .blog-card-media img{ transform:scale(1.035); }
.blog-card-body{ padding:18px 20px 22px; display:flex; flex-direction:column; flex:1; }
.blog-card-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ash); margin-bottom:12px; }
.blog-card-title{ font-size:18px; font-weight:700; letter-spacing:-.02em; line-height:1.28; margin:0 0 10px; color:var(--cream); }
.blog-card:hover .blog-card-title{ color:var(--orange); }
.blog-card-excerpt{ font-size:13.5px; line-height:1.65; color:var(--ash); margin:0 0 18px; }
.blog-card-cta{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin-top:auto; }

/* ── index: band ── */
.blog-band{
  border:1px solid var(--hairline); background:var(--obsidian);
  padding:clamp(26px,4vw,48px); margin-top:clamp(34px,5vw,60px);
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
}
.blog-band-copy h2{ font-size:clamp(21px,2.4vw,32px); font-weight:800; letter-spacing:-.03em; margin:0 0 10px; }
.blog-band-copy p{ font-size:14px; line-height:1.65; color:var(--ash); margin:0; max-width:58ch; }
.blog-band .cta-row{ margin-top:0; }

/* ── reveals ──
   Scoped to html.js-motion so the page renders fully visible without JS.
   Never hide content on a promise JS will show it again. */
html.js-motion .reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
html.js-motion .reveal.reveal-in{ opacity:1; transform:none; }

/* ── responsive ── */
@media (max-width:860px){
  .nav-toggle{ display:flex; }
  .site-nav{
    position:fixed; top:64px; left:0; right:0; height:calc(100vh - 64px); overflow-y:auto;
    flex-direction:column; align-items:flex-start;
    gap:0; padding:8px var(--pad) 20px;
    /* fully solid + full-height so scrolled page content can never bleed through
       above, below, or behind the overlay — same fix as the homepage nav */
    background:var(--void);
    border-bottom:1px solid var(--hairline); display:none;
  }
  .site-header.nav-open .site-nav{ display:flex; }
  .site-nav a{ padding:14px 0; width:100%; border-bottom:1px solid var(--hairline); }
  .site-nav a.nav-cta{ border:1px solid var(--hairline-b); margin-top:14px; padding:13px 18px; width:auto; }
  .doc-list li{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .feature-list li{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .site-footer{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html.js-motion .reveal{ opacity:1; transform:none; }
}