/* ==========================================================================
   Varaxa — varaxa.io
   Direction: Instrument. Navy ground from the mark (#061D35), red slash accent.
   Single-theme by design: the identity is dark. Every colour is painted
   explicitly so the page holds on any host background.
   ========================================================================== */

/* Self-hosted: no third-party font request, no render-blocking round trip.
   Latin subsets, woff2 only. Archivo (SIL OFL 1.1), IBM Plex Mono (SIL OFL 1.1). */
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/plexmono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --ground:#050F1C;
  --surface:#08182B;
  --surface-2:#0B2138;
  --ink:#DFE8F2;
  --ink-dim:#A8B9CC;
  --muted:#75899F;
  --rule:#12314A;
  --rule-soft:#0D2437;
  --red:#ED0A1B;
  --red-dim:#8C1420;

  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --measure:64ch;
  --pad:clamp(1.25rem,5vw,4.5rem);
  --shell:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,0.96rem + 0.2vw,1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--red);color:#fff;padding:0.75rem 1.15rem;
  font-family:var(--mono);font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;
  text-decoration:none;
}
.skip:focus{left:0.5rem;top:0.5rem}

/* ---------- primitives ---------- */
.wrap{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.label{
  font-family:var(--mono);font-size:0.6875rem;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
}
.label--red{color:var(--red)}
.slash{
  display:inline-block;width:0.62em;height:1.05em;background:var(--red);
  transform:skewX(-24deg);vertical-align:-0.14em;flex:none;
}
.rule{height:1px;background:var(--rule-soft);border:0;margin:0}

.sec{padding-block:clamp(4rem,9vw,8.5rem)}
.sec--tight{padding-block:clamp(3rem,6vw,5rem)}
.sec + .sec--tight{padding-top:0}
.sec-grid{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem)}
.rail{display:flex;flex-direction:column;gap:0.85rem;padding-top:0.55rem}
.rail-num{font-family:var(--mono);font-size:0.75rem;color:var(--red);letter-spacing:0.05em}
.rail-line{width:1px;flex:1;background:linear-gradient(var(--rule),transparent);min-height:3rem}
@media (max-width:720px){
  .sec-grid{grid-template-columns:1fr;gap:1.25rem}
  .rail{flex-direction:row;align-items:center;gap:0.75rem}
  .rail-line{flex:1;min-height:0;height:1px;background:var(--rule)}
}

h1,h2,h3,h4{text-wrap:balance}
h2{
  font-size:clamp(1.75rem,1.2rem + 2.4vw,3.1rem);font-weight:600;line-height:1.06;
  letter-spacing:-0.025em;margin:0 0 1.6rem;
}
h3{font-size:1.0625rem;font-weight:600;letter-spacing:-0.005em;margin:0 0 0.5rem}
p{margin:0 0 1.15rem;max-width:var(--measure)}
.lede{font-size:clamp(1.0625rem,1rem + 0.55vw,1.3125rem);line-height:1.55;color:var(--ink-dim)}
.dot{color:var(--red)}

.btn{
  display:inline-flex;align-items:center;gap:0.7rem;text-decoration:none;
  font-family:var(--mono);font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;
  padding:0.9rem 1.35rem;border:1px solid var(--red);background:var(--red);color:#fff;
  transition:background .16s,color .16s;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;border-color:var(--rule);color:var(--ink-dim)}
.btn--ghost:hover{border-color:var(--ink-dim);color:var(--ink);background:transparent}
.actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:20;background:rgba(5,15,28,0.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule-soft);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:0.95rem}
.nav-in img{width:132px;height:auto}
.nav-links{display:flex;gap:1.75rem;align-items:center}
.nav-links a{
  font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;transition:color .16s;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);border-bottom:1px solid var(--red);padding-bottom:3px}
.nav-cta{
  color:var(--ink)!important;border:1px solid var(--rule)!important;padding:0.55rem 0.95rem;
  transition:border-color .16s,background .16s;
}
.nav-cta:hover{border-color:var(--red)!important;background:rgba(237,10,27,0.09)}
.nav-cta[aria-current="page"]{border-color:var(--red)!important;padding-bottom:0.55rem}
@media (max-width:900px){
  .nav-links a:not(.nav-cta){display:none}
  .nav-cta{white-space:nowrap;font-size:0.625rem;letter-spacing:0.12em;padding:0.55rem 0.8rem}
}
@media (max-width:400px){
  .nav-in img{width:112px}
  .nav-cta{font-size:0.5625rem;padding:0.5rem 0.65rem}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule-soft)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0.7}
.hero-in{position:relative;padding-block:clamp(4.5rem,13vw,10rem) clamp(3.5rem,8vw,6.5rem)}
.hero--page .hero-in{padding-block:clamp(3.5rem,9vw,6.5rem) clamp(2.5rem,5vw,4rem)}
.kicker{display:flex;align-items:center;gap:0.85rem;margin-bottom:clamp(1.75rem,5vw,3.25rem)}
.hero h1{
  font-size:clamp(2.4rem,1.1rem + 6.2vw,5.4rem);font-weight:600;line-height:0.98;
  letter-spacing:-0.038em;margin:0 0 1.75rem;max-width:16ch;
}
.hero--page h1{font-size:clamp(2.1rem,1.2rem + 4.2vw,4rem);max-width:20ch;margin-bottom:1.35rem}
.hero .lede{max-width:56ch;margin-bottom:2.5rem}
.hero--page .lede{margin-bottom:0}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,5vw,4rem);
  margin-top:clamp(3rem,7vw,5rem);padding-top:1.5rem;border-top:1px solid var(--rule-soft);
}
.hero-meta div{max-width:22ch}
.hero-meta .label{display:block;margin-bottom:0.4rem}
.hero-meta p{margin:0;font-size:0.9375rem;color:var(--ink-dim)}

/* ---------- triad ---------- */
.triad{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft);margin-top:2.5rem}
.triad > div{background:var(--surface);padding:clamp(1.5rem,3vw,2.25rem)}
.triad .label{display:flex;align-items:center;gap:0.55rem;margin-bottom:1.5rem;color:var(--red)}
.triad h3{font-size:clamp(1.25rem,1.1rem + 0.7vw,1.6rem);font-weight:600;letter-spacing:-0.02em;margin-bottom:0.85rem}
.triad p{font-size:0.9375rem;color:var(--ink-dim);margin:0 0 0.9rem}
.triad p:last-child{margin-bottom:0}
.triad h3 a{text-decoration:none;border-bottom:2px solid var(--red-dim);padding-bottom:1px;transition:border-color .16s}
.triad h3 a:hover{border-color:var(--red)}
.triad ul{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:0.4rem;
  padding-top:1rem;border-top:1px solid var(--rule)}
.triad li{font-family:var(--mono);font-size:0.75rem;letter-spacing:0.06em;color:var(--muted);text-transform:uppercase}

/* ---------- ledger (doctrine) ---------- */
.ledger{border-top:1px solid var(--rule-soft)}
.ledger ol{list-style:none;margin:0;padding:0}
.ledger li{
  display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:clamp(0.75rem,2vw,2rem);
  padding-block:1.5rem;border-bottom:1px solid var(--rule-soft);align-items:start;
}
.ledger .n{font-family:var(--mono);font-size:0.75rem;color:var(--red);padding-top:0.3rem;font-variant-numeric:tabular-nums}
.ledger h3{font-size:clamp(1.0625rem,1rem + 0.4vw,1.25rem);letter-spacing:-0.012em}
.ledger p{margin:0;font-size:0.9375rem;color:var(--muted);max-width:58ch}
@media (max-width:520px){.ledger li{grid-template-columns:1fr;gap:0.35rem}}

/* ---------- quote ---------- */
.quote{border-left:2px solid var(--red);padding:0.4rem 0 0.4rem clamp(1.25rem,3vw,2.25rem);margin:0 0 2rem}
.quote p{
  font-size:clamp(1.25rem,1rem + 1.5vw,2.05rem);line-height:1.24;letter-spacing:-0.022em;
  font-weight:500;color:var(--ink);max-width:26ch;margin:0;
}
.quote footer{font-family:var(--mono);font-size:0.6875rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-top:1rem}

/* ---------- split terms ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:clamp(1.75rem,4vw,3.5rem);margin-top:2.5rem}
.split > div{border-top:1px solid var(--rule);padding-top:1.25rem}
.split .label{color:var(--red);display:block;margin-bottom:0.85rem}
.split p{font-size:0.9375rem;color:var(--ink-dim);margin:0}

/* ---------- refusal list ---------- */
.nolist{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1px;background:var(--rule-soft);border-block:1px solid var(--rule-soft)}
.nolist li{background:var(--ground);padding:1.05rem 0 1.05rem 2.25rem;position:relative;font-size:0.9375rem;color:var(--ink-dim)}
.nolist li::before{content:"";position:absolute;left:0.35rem;top:1.45rem;width:0.55rem;height:0.95rem;background:var(--red-dim);transform:skewX(-24deg)}

/* ---------- promise ---------- */
.promise{background:var(--surface);border-block:1px solid var(--rule-soft)}
.promise ul{list-style:none;margin:2.25rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:0.9rem clamp(2rem,5vw,4rem)}
.promise li{display:flex;gap:0.85rem;font-size:0.9375rem;color:var(--ink-dim);line-height:1.5}
.promise li::before{content:"";flex:none;width:0.5rem;height:0.9rem;background:var(--red);transform:skewX(-24deg);margin-top:0.32rem}

/* ---------- journal ---------- */
.posts{display:grid;gap:0;margin-top:2.5rem;border-top:1px solid var(--rule-soft)}
.post{
  display:grid;grid-template-columns:9rem minmax(0,1fr) auto;gap:clamp(1rem,3vw,2.5rem);
  align-items:baseline;padding-block:1.5rem;border-bottom:1px solid var(--rule-soft);
  text-decoration:none;transition:background .16s;
}
.post:hover{background:var(--surface)}
.post:hover .post-t{color:var(--ink)}
.post:hover .post-arrow{transform:translateX(3px)}
.post-t{font-size:clamp(1.0625rem,1rem + 0.55vw,1.35rem);font-weight:500;letter-spacing:-0.018em;color:var(--ink-dim);transition:color .16s;margin:0 0 0.3rem;max-width:none}
.post-d{font-size:0.9375rem;color:var(--muted);margin:0;max-width:60ch}
.post-arrow{font-family:var(--mono);font-size:0.8rem;color:var(--red);transition:transform .16s}
.post[aria-disabled="true"]{pointer-events:none;opacity:0.55}
@media (max-width:720px){.post{grid-template-columns:1fr auto;gap:0.4rem 1rem}.post .label{grid-column:1/-1}}

/* ---------- prose (journal article) ---------- */
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem);margin:3rem 0 1rem;letter-spacing:-0.02em}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-dim);margin-bottom:1.4rem;max-width:none}
.prose ul{margin:0 0 1.6rem;padding-left:0;list-style:none;display:grid;gap:0.7rem}
.prose li{position:relative;padding-left:1.75rem;color:var(--ink-dim);font-size:0.9875rem;line-height:1.6}
.prose li::before{content:"";position:absolute;left:0.1rem;top:0.52rem;width:0.45rem;height:0.8rem;background:var(--red-dim);transform:skewX(-24deg)}
.prose blockquote{
  margin:2rem 0;padding:0.3rem 0 0.3rem 1.5rem;border-left:2px solid var(--red);
}
.prose blockquote p{font-size:clamp(1.125rem,1.05rem + 0.5vw,1.4rem);line-height:1.35;color:var(--ink);font-weight:500;margin:0;letter-spacing:-0.015em}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--red-dim)}
.prose a:hover{border-color:var(--red)}
.byline{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;padding-bottom:1.5rem;border-bottom:1px solid var(--rule-soft);margin-bottom:2.5rem}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:2rem clamp(2rem,5vw,4rem);margin-top:3rem;padding-top:2rem;border-top:1px solid var(--rule)}
.contact-grid .label{display:block;margin-bottom:0.5rem}
.contact-grid a{font-size:1.0625rem;text-decoration:none;border-bottom:1px solid var(--red-dim);padding-bottom:2px}
.contact-grid a:hover{border-color:var(--red)}
.contact-grid p{margin:0;color:var(--ink-dim)}
.vanity{font-family:var(--mono);font-size:0.6875rem!important;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--muted)!important;margin-top:0.6rem!important}

/* ---------- next / prev pager ---------- */
.pager{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  border-top:1px solid var(--rule);padding-top:1.5rem;margin-top:clamp(3rem,7vw,5rem)}
.pager a{font-family:var(--mono);font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-dim)}
.pager a:hover{color:var(--ink)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--rule-soft);padding-block:3rem}
.foot-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:2rem clamp(2rem,5vw,4rem);padding-bottom:2.5rem;border-bottom:1px solid var(--rule-soft)}
.foot-top img{width:132px;height:auto;opacity:0.9}
.foot-col .label{display:block;margin-bottom:0.85rem}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:0.5rem}
.foot-col a{font-size:0.9375rem;color:var(--ink-dim);text-decoration:none}
.foot-col a:hover{color:var(--ink)}
.foot-bot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;padding-top:1.5rem}
.foot-bot .label{font-size:0.625rem}

/* ---------- 404 ---------- */
.oops{min-height:70vh;display:flex;align-items:center}