/* ==========================================================================
   Lever Dynamis — inner pages
   Bridges the v1 class vocabulary onto the v3 system so the six inner pages
   inherit the homepage aesthetic without their content being rewritten.
   Load order: tokens.css → v2.css → pages.css
   ========================================================================== */

/* inner pages sit below the floating nav bar */
body.page{ padding-top:calc(var(--nav-h) + 58px) }

/* ── Page hero: same inset card language as the homepage ───────────── */
.hero{ padding:0 var(--pad) }
.hero-card{
  position:relative; overflow:hidden; border-radius:var(--r-card);
  background:var(--sea-deep); display:flex; align-items:flex-end;
  min-height:clamp(340px,46vh,500px);
}
.hero-card .bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 45%;
}
.hero-card::after{      /* full-card scrim — hero copy can sit high or low */
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(1,16,31,.62) 0%, rgba(1,16,31,.34) 34%,
                            rgba(1,16,31,.80) 78%, rgba(1,16,31,.94) 100%),
    linear-gradient(90deg, rgba(1,16,31,.55) 0%, rgba(1,16,31,.12) 58%, rgba(1,16,31,0) 100%);
  pointer-events:none;
}
.hero-body{
  position:relative; z-index:1; color:#fff;
  padding:clamp(34px,4vw,56px) clamp(24px,5vw,88px) clamp(34px,5vw,64px);
  max-width:900px;
}
.hero-body h1{
  font-family:var(--f-display); font-weight:800; line-height:1.0;
  letter-spacing:-.025em; text-transform:uppercase; color:#fff;
  text-wrap:balance; margin:14px 0 18px;
}
.hero-body .lede{ color:rgba(255,255,255,.86) }
.hero-body h1 em,.hero-body h1 i,
h1 em,h1 i,h2 em,h2 i{ font-style:normal; color:var(--orange) }
.dark h1 em,.dark h2 em{ color:var(--orange-soft) }
.hero-body .eyebrow{ color:var(--orange-soft) }

/* ── Typography ────────────────────────────────────────────────────── */
h1,h2,h3,h4{ font-family:var(--f-display); letter-spacing:-.02em; color:var(--ink) }
h1{ font-weight:800; font-size:clamp(32px,4.2vw,60px); line-height:1.0;
    letter-spacing:-.028em; text-transform:uppercase; text-wrap:balance; margin:0 0 18px }
h2{ font-weight:800; font-size:clamp(26px,2.5vw,44px); line-height:1.06;
    text-transform:uppercase; text-wrap:balance; margin:0 0 14px }
h3{ font-weight:800; font-size:clamp(19px,1.5vw,25px); line-height:1.15;
    text-transform:uppercase; margin:0 0 10px }
h4{ font-weight:700; font-size:17px; line-height:1.3; margin:0 0 8px }
p{ margin:0 0 14px }
p:last-child{ margin-bottom:0 }

/* ── One source of spacing per container ───────────────────────────────
   The v1 markup spaces things with flex `gap` on .stack-N / .sec-head,
   while prose relies on p{margin-bottom}. Inside a gapped container both
   applied and compounded — the uneven paragraph spacing across the site.
   Inside a gapped container the gap wins; outside it, margins do. ── */
.stack > *,.stack-6 > *,.stack-10 > *,.stack-14 > *,
.stack-20 > *,.stack-24 > *,.stack-40 > *,
.sec-head > *,.field > *{
  margin-block:0;
}

.eyebrow{
  align-self:flex-start; display:inline-flex; align-items:center; height:26px; padding:0 11px;
  border-radius:60px; background:var(--ink); color:#fff;
  font-family:var(--f-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}
.eyebrow.on-dark, .dark .eyebrow, .hero-body .eyebrow{
  background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.3);
}
.lede{ font-size:clamp(16.5px,1.3vw,20px); line-height:1.6; color:var(--ink-muted) }
.small{ font-size:14.5px; line-height:1.62; color:var(--ink-muted) }
.caption{ font-family:var(--f-mono); font-size:11px; letter-spacing:.05em;
  color:var(--ink-muted); margin-top:10px; line-height:1.5 }

/* ── Layout primitives ─────────────────────────────────────────────── */
.site{ display:block }
/* ── Section rhythm ────────────────────────────────────────────────
   Every section uses the same token. The pairs below stop two adjacent
   sections from stacking their padding into an empty band — the main
   cause of the gaps: a hero, then a small pill row, then 110px + 110px
   of nothing before the first real content. ── */
section{ padding:var(--sp-8) 0 }
section.tight{ padding:var(--sp-5) 0 var(--sp-2) }
section.tight + section{ padding-top:var(--sp-6) }
.hero + section{ padding-top:var(--sp-6) }
section + section.dark, section.dark + section{ margin-top:var(--sp-2) }
section:last-of-type{ padding-bottom:var(--sp-9) }
.wrap{ max-width:1360px; margin:0 auto; padding:0 clamp(20px,3.4vw,48px) }
.full{ padding-left:0; padding-right:0 }
.anchor{ scroll-margin-top:calc(var(--nav-h) + 70px) }

.stack{ display:flex; flex-direction:column }
/* the v1 markup uses .stack-N without .stack — make them work either way */
.stack-6,.stack-10,.stack-14,.stack-20,.stack-24,.stack-40{
  display:flex; flex-direction:column }
.stack-6{gap:var(--sp-1)}.stack-10{gap:10px}.stack-14{gap:14px}
.stack-20{gap:var(--sp-4)}.stack-24{gap:var(--sp-4)}.stack-40{gap:var(--sp-6)}
.grid{ display:grid; gap:var(--sp-4); align-items:stretch }
.g-2{ grid-template-columns:repeat(auto-fit,minmax(340px,1fr)) }
.g-3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.split{ display:grid; gap:clamp(28px,4vw,60px);
  grid-template-columns:1fr 1fr; align-items:start }
.split.v-center{ align-items:center }
.split.wide-left{ grid-template-columns:1.25fr 1fr }
.sec-head{ display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--sp-2); max-width:70ch; margin-bottom:var(--sp-6) }
.rule{ height:1px; background:var(--line-soft); border:0; margin:0 }

/* ── Cards ─────────────────────────────────────────────────────────── */
.card{
  background:#fff; border:1px solid var(--line-soft); border-radius:var(--r-card);
  padding:30px 28px; display:flex; flex-direction:column;
  transition:border-color .22s ease, transform .22s var(--ease);
}
a.card:hover{ border-color:var(--blue); transform:translateY(-2px) }
.card .more{ margin-top:auto; padding-top:12px; font-family:var(--f-mono);
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--blue) }
.dark .card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16) }

.glass{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-panel); backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%); padding:22px 20px;
}

.figure{ border-radius:var(--r-card); overflow:hidden; background:var(--g-10);
  border:1px solid var(--line-soft) }
.figure img{ width:100%; height:100%; object-fit:cover; display:block }
.thumb{ border-radius:10px; overflow:hidden; background:var(--g-10) }
.thumb img{ width:100%; height:190px; object-fit:cover; display:block }

/* ── Pills, chips, key/value ───────────────────────────────────────── */
.pill-row{ display:flex; gap:8px; flex-wrap:wrap }
.pill{
  display:inline-flex; align-items:center; height:32px; padding:0 14px;
  border:1px solid var(--line); border-radius:60px; text-decoration:none;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-muted);
  transition:border-color .2s, color .2s, background .2s;
}
a.pill:hover{ border-color:var(--blue); color:var(--blue) }
.pill.hot{ border-color:var(--orange); color:var(--orange) }
.dark .pill{ border-color:rgba(255,255,255,.26); color:rgba(255,255,255,.7) }
.dark a.pill:hover{ border-color:#fff; color:#fff }

.chip{ display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 11px;
  border:1px solid var(--line); border-radius:60px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-muted) }
.chip b{ color:var(--blue); font-weight:600 }
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); flex:0 0 auto }
.dark .chip{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.84) }

/* key/value blocks (was .stat in v1 — renamed to avoid the homepage collision) */
.kvs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  border:1px solid var(--line) }
.kv{ padding:20px 22px; border-right:1px solid var(--line) }
.kv:last-child{ border-right:none }
.kv .k{ display:block; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted);
  margin-bottom:8px }
.kv .v{ font-family:var(--f-display); font-weight:800; font-size:24px;
  line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums }
.kv .v small{ font-size:12px; font-weight:600; color:var(--ink-muted) }
.dark .kvs,.dark .kv{ border-color:rgba(255,255,255,.16) }
.dark .kv .k{ color:rgba(255,255,255,.55) }
.dark .kv .v{ color:#fff }

.idx{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em;
  color:var(--blue); display:block; margin-bottom:14px }
.dark .idx{ color:var(--orange-soft) }

/* ── Tables ────────────────────────────────────────────────────────── */
.specs{ width:100%; border-collapse:collapse; margin-top:10px; font-size:14.5px }
.specs th,.specs td{ text-align:left; padding:13px 0;
  border-bottom:1px solid var(--line-soft); vertical-align:top }
.specs th{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-muted); font-weight:500; width:40% }
.specs td{ color:var(--ink) }
.dark .specs th,.dark .specs td{ border-color:rgba(255,255,255,.14) }
.dark .specs th{ color:rgba(255,255,255,.55) }
.dark .specs td{ color:rgba(255,255,255,.9) }

/* ── Dark sections ─────────────────────────────────────────────────── */
.dark{ background:var(--dark-card); color:rgba(255,255,255,.78);
  border-radius:var(--r-card); margin-left:var(--pad); margin-right:var(--pad) }
.dark h1,.dark h2,.dark h3,.dark h4{ color:#fff }
.dark .lede{ color:rgba(255,255,255,.78) }
.dark .small,.dark .caption{ color:rgba(255,255,255,.6) }
.dark .rule{ background:rgba(255,255,255,.16) }
.dark.round{ border-radius:var(--r-card); margin:0 var(--pad) }

/* ── Buttons: ghost adapts to its ground ───────────────────────────── */
.btn-primary{ background:var(--blue); color:#fff }
.btn-primary:hover{ background:var(--blue-deep) }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line) }
.btn-ghost:hover{ background:rgba(10,12,18,.05); border-color:var(--ink) }
.dark .btn-ghost, .card-dark .btn-ghost,
.hero-body .btn-ghost, .hero-open .btn-ghost, .hero-chapter .btn-ghost{
  color:#fff; border-color:rgba(255,255,255,.85); background:transparent;
}
.dark .btn-ghost:hover, .card-dark .btn-ghost:hover,
.hero-body .btn-ghost:hover, .hero-open .btn-ghost:hover, .hero-chapter .btn-ghost:hover{
  background:rgba(255,255,255,.14);
}
.btn-glass{ background:rgba(255,255,255,.16); color:#fff;
  border-color:rgba(255,255,255,.4); backdrop-filter:blur(10px) }
.btn-glass:hover{ background:rgba(255,255,255,.28) }

/* ── News list ─────────────────────────────────────────────────────── */
.post{ display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:28px; padding:30px 0; border-bottom:1px solid var(--line-soft);
  text-decoration:none; align-items:start }
.post:hover h3{ color:var(--blue) }
.post .meta{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-muted) }

/* ── Forms ─────────────────────────────────────────────────────────── */
.field{ display:flex; flex-direction:column; gap:7px }
.field label{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-muted) }
.field input,.field textarea,.field select{
  font-family:var(--f-body); font-size:15px; color:var(--ink);
  padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-btn);
  background:#fff; width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue) }
.cbox{ display:flex; gap:10px; align-items:flex-start; font-size:14px;
  color:var(--ink-muted) }

/* ── Focus visibility everywhere ───────────────────────────────────── */
a:focus-visible,button:focus-visible{ outline:2px solid var(--blue);
  outline-offset:2px; border-radius:4px }

@media (max-width:768px){
  body.page{ padding-top:calc(var(--nav-h) + 34px) }
  .split,.split.wide-left{ grid-template-columns:1fr }
  .post{ grid-template-columns:1fr; gap:14px }
  .kvs{ grid-template-columns:1fr 1fr }
}