/* ============================================================================
   StrikeList AI — homepage-only styles
   Loaded only by src/pages/index.html through its `head:` frontmatter field.
   Tokens, header/footer and the shared wr- components (buttons, tags, bands,
   headings, cards, ledger, Q&A, ruling, final CTA, buy bar) live in warroom.css,
   which every public page loads.
   ========================================================================== */

/* ---- hero ------------------------------------------------------------------- */
.wr-hero { position: relative; padding: clamp(32px, 4.4vw, 64px) 0 clamp(40px, 5vw, 64px); overflow: hidden; border-bottom: 1px solid var(--wr-rule); }
.wr-hero::after { content: ""; position: absolute; inset: -20% -10% auto auto; width: 70%; height: 120%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(201,169,110,.13), rgba(201,169,110,0) 70%); }
.wr-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.wr-hero-grid > * { min-width: 0; }
.wr-hero h1 { font-family: var(--wr-display); font-weight: 900; text-transform: uppercase; font-size: clamp(52px, 6.3vw, 96px); line-height: .86; letter-spacing: .005em; margin: 0 0 24px; }
.wr-hero h1 .wr-row { display: block; }
@media (max-width: 620px) { .wr-hero h1 { font-size: 14.2vw; } .wr-hero .wr-cta-row .wr-btn { width: 100%; } }

/* video exhibit + written overview */
.wr-exhibit { position: relative; margin: 0; padding-top: 14px; }
.wr-exhibit-tab { position: absolute; top: 0; left: 22px; z-index: 3; background: var(--wr-gold); color: #141414; font-family: var(--wr-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; }
.wr-video { position: relative; aspect-ratio: 16 / 9; width: 100%; border: 1px solid var(--wr-rule-2); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 8px rgba(239,233,221,.02);
  /* poster shown while the player loads (or if it is blocked) */
  background: linear-gradient(transparent 60%, rgba(0,0,0,.55)), radial-gradient(80% 90% at 30% 20%, #3a3022, #15161a 55%, #0a0b0c); }
.wr-video::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(201,169,110,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(201,169,110,.08) 1px, transparent 1px); background-size: 40px 40px; }
.wr-video .video { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.wr-vlabel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 16px 0 0; font-family: var(--wr-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--wr-gold); }
.wr-vlabel span:last-child { color: var(--wr-mute); text-transform: none; letter-spacing: .02em; }
@media (max-width: 480px) { .wr-vlabel { flex-direction: column; gap: 4px; } }
.wr-overview { margin-top: 12px; border-top: 1px solid var(--wr-rule); }
.wr-overview .wr-sum { font-size: 15.5px; color: var(--wr-bone); margin: 14px 0 6px; line-height: 1.5; }
.wr-chapters { list-style: none; margin: 0; padding: 0; counter-reset: ch; }
.wr-chapters li { counter-increment: ch; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--wr-rule); font-size: 14.5px; color: var(--wr-bone-2); line-height: 1.45; }
.wr-chapters li::before { content: "Ch." counter(ch); font-family: var(--wr-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--wr-gold); padding-top: 2px; }
.wr-chapters b { color: var(--wr-bone); font-weight: 600; }

/* key facts band */
.wr-facts { margin: clamp(32px, 3.6vw, 48px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--wr-rule-2); background: rgba(15,16,18,.86); }
.wr-facts > div { padding: 20px 22px 22px; border-right: 1px solid var(--wr-rule); }
.wr-facts > div:last-child { border-right: 0; }
.wr-facts dt { font-family: var(--wr-mono); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--wr-mute); margin-bottom: 10px; }
.wr-facts dd { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--wr-bone-2); }
.wr-facts dd strong { display: block; font-family: var(--wr-display); font-weight: 800; text-transform: uppercase; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; color: var(--wr-bone); margin-bottom: 6px; letter-spacing: .02em; }
.wr-facts .wr-vs strong { color: var(--wr-mute); }
.wr-facts .wr-vs s { position: relative; display: inline-block; text-decoration: none; }
.wr-facts .wr-vs s::after { content: ""; position: absolute; left: -4%; right: -4%; top: 50%; height: 3px; background: var(--wr-gold); transform: rotate(-3deg); }
.wr-facts .wr-ours { background: linear-gradient(160deg, #2a2519, #16171a 80%); box-shadow: inset 0 0 0 1px var(--wr-gold-dim); }
.wr-facts .wr-ours dt { color: var(--wr-gold); }
.wr-facts .wr-ours strong { color: var(--wr-gold-hi); }
@media (max-width: 920px) {
  .wr-hero-grid { grid-template-columns: 1fr; }
  .wr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wr-facts > div:nth-child(2) { border-right: 0; }
  .wr-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--wr-rule); }
}
@media (max-width: 420px) { .wr-facts > div { padding: 16px 14px 18px; } .wr-facts dd { font-size: 13.5px; } }

/* ---- what is ---------------------------------------------------------------- */
.wr-whatis { padding: clamp(48px, 6vw, 80px) 0; border-bottom: 1px solid var(--wr-rule); }
.wr-whatis-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 24px clamp(32px, 5vw, 72px); align-items: start; }
.wr-whatis h2 { font-family: var(--wr-display); font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 3.6vw, 50px); line-height: .95; letter-spacing: .01em; }
.wr-answer { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--wr-bone); max-width: 64ch; margin: 0; }
.wr-updated { margin: 16px 0 0; font-family: var(--wr-mono); font-size: 12.5px; color: var(--wr-mute); letter-spacing: .03em; }
@media (max-width: 860px) { .wr-whatis-grid { grid-template-columns: 1fr; } }

/* ---- problem ---------------------------------------------------------------- */
.wr-problem-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.wr-problem-grid > * { min-width: 0; }
@media (max-width: 860px) { .wr-problem-grid { grid-template-columns: 1fr; } }
.wr-clock { border: 1px solid var(--wr-rule); padding: 28px; background: var(--wr-slate); position: relative; margin: 0; }
.wr-clock .wr-label { font-family: var(--wr-mono); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--wr-mute); margin-bottom: 18px; display: block; }
.wr-clock-row { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--wr-rule); }
.wr-clock-row span:first-child { font-family: var(--wr-mono); font-size: 15px; color: var(--wr-bone); font-variant-numeric: tabular-nums; }
.wr-attn { height: 10px; background: var(--wr-slate-2); position: relative; }
.wr-attn i { position: absolute; inset: 0 auto 0 0; background: var(--wr-gold); }
.wr-clock .wr-foot { font-size: 14px; color: var(--wr-bone-2); margin: 16px 0 0; border-top: 1px solid var(--wr-rule); padding-top: 14px; }
.wr-clock figcaption { font-family: var(--wr-mono); font-size: 12px; color: var(--wr-mute); margin-top: 10px; }
.wr-oldway { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: clamp(48px, 6vw, 72px); background: var(--wr-rule); border: 1px solid var(--wr-rule); }
.wr-oldway article { background: var(--wr-ink); padding: 30px 28px 32px; }
.wr-oldway .wr-k { font-family: var(--wr-mono); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--wr-strike); display: flex; gap: 10px; align-items: center; margin: 0 0 16px; }
.wr-oldway .wr-k svg { width: 14px; height: 14px; }
.wr-oldway h3 { font-family: var(--wr-body); font-weight: 700; font-size: 21px; line-height: 1.25; margin-bottom: 12px; }
.wr-oldway p:not(.wr-k) { color: var(--wr-bone-2); font-size: 16px; margin: 0; }
@media (max-width: 860px) { .wr-oldway { grid-template-columns: 1fr; } }
.wr-bridge { margin-top: 2px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: 32px clamp(24px, 4vw, 40px); background: var(--wr-gold); color: #141414; }
.wr-bridge b { font-family: var(--wr-display); font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 44px); line-height: .95; display: block; max-width: 12ch; letter-spacing: .01em; }
.wr-bridge p { margin: 0; font-size: 17px; line-height: 1.5; color: #1d1a14; max-width: 62ch; }
@media (max-width: 760px) { .wr-bridge { grid-template-columns: 1fr; gap: 14px; } }

/* ---- how it works ----------------------------------------------------------- */
.wr-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--wr-rule); }
.wr-steps li { padding: 32px 32px 36px 0; border-bottom: 1px solid var(--wr-rule); display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; align-content: start; }
.wr-steps li:not(:nth-child(3n+1)) { padding-left: 32px; border-left: 1px solid var(--wr-rule); }
.wr-steps .wr-n { font-family: var(--wr-display); font-weight: 900; font-size: 76px; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--wr-gold); grid-row: span 2; }
.wr-steps h3 { font-family: var(--wr-body); font-weight: 700; font-size: 20px; line-height: 1.25; margin: 2px 0 8px; }
.wr-steps p { grid-column: 2; margin: 0; color: var(--wr-bone-2); font-size: 16px; }
.wr-steps li:last-child .wr-n { color: var(--wr-gold); -webkit-text-stroke: 0; }
@media (max-width: 980px) { .wr-steps { grid-template-columns: 1fr 1fr; } .wr-steps li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; } .wr-steps li:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--wr-rule); } }
@media (max-width: 640px) { .wr-steps { grid-template-columns: 1fr; } .wr-steps li, .wr-steps li:nth-child(even) { padding: 26px 0; border-left: 0; } .wr-steps .wr-n { font-size: 58px; } }

.wr-jbox { margin: auto 0 0; padding-top: 24px; }
.wr-bench { display: flex; justify-content: space-between; font-family: var(--wr-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--wr-mute); margin-bottom: 10px; }
.wr-seats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.wr-seat { background: var(--wr-ink); border: 1px solid var(--wr-rule); padding: 8px 7px 9px; position: relative; min-height: 66px; display: flex; flex-direction: column; justify-content: space-between; }
.wr-seat .wr-sn { font-family: var(--wr-mono); font-size: 10.5px; color: var(--wr-mute); }
.wr-seat .wr-sc { font-family: var(--wr-display); font-weight: 800; font-size: 24px; line-height: 1; display: block; }
.wr-seat .wr-bar { height: 3px; margin-top: 5px; display: block; }
.wr-seat.wr-sk .wr-sc { color: var(--wr-keep); } .wr-seat.wr-sk .wr-bar { background: var(--wr-keep); }
.wr-seat.wr-sw .wr-sc { color: var(--wr-watch); } .wr-seat.wr-sw .wr-bar { background: var(--wr-watch); }
.wr-seat.wr-ss .wr-sc { color: var(--wr-strike); } .wr-seat.wr-ss .wr-bar { background: var(--wr-strike); }
.wr-seat.wr-sx { opacity: .62; }
.wr-seat.wr-sx::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: var(--wr-gold); transform: rotate(-24deg); }
.wr-seat .wr-ch { position: absolute; top: 6px; right: 6px; font-family: var(--wr-mono); font-size: 10px; color: var(--wr-gold); }
.wr-seats.wr-alt { margin-top: 6px; }
.wr-seats.wr-alt .wr-seat { border-style: dashed; }
.wr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: 12.5px; color: var(--wr-mute); font-family: var(--wr-mono); }
.wr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wr-legend i { width: 9px; height: 9px; display: inline-block; }
.wr-jbox figcaption, .wr-fig-cap { font-family: var(--wr-mono); font-size: 12.5px; color: var(--wr-mute); margin-top: 10px; line-height: 1.5; }
.wr-fig-cap { margin-top: 14px; }
@media (max-width: 420px) { .wr-seat .wr-sc { font-size: 19px; } .wr-seat { min-height: 58px; padding: 6px 5px; } }

/* ---- whisper mode ----------------------------------------------------------- */
.wr-whisper-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.wr-whisper-grid > * { min-width: 0; }
.wr-console { background: #0b0c0d; border: 1px solid var(--wr-rule-2); box-shadow: 0 50px 100px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(201,169,110,.08), 0 0 80px -20px rgba(201,169,110,.18); }
.wr-console-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--wr-rule); font-family: var(--wr-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--wr-bone-2); }
.wr-live-dot { display: inline-flex; align-items: center; gap: 8px; color: var(--wr-gold); }
.wr-live-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--wr-gold); animation: wr-pulse 2.4s ease-out infinite; }
@keyframes wr-pulse { 0% { box-shadow: 0 0 0 0 rgba(201,169,110,.6); } 80%, 100% { box-shadow: 0 0 0 10px rgba(201,169,110,0); } }
.wr-console-body { padding: 22px; }
.wr-msg-meta { font-family: var(--wr-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--wr-mute); display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.wr-msg-note { background: var(--wr-slate); border-left: 3px solid var(--wr-rule-2); padding: 14px 16px; font-size: 15.5px; color: var(--wr-bone); margin: 0 0 18px; }
.wr-wm { border: 1px solid var(--wr-gold-dim); background: linear-gradient(180deg, rgba(201,169,110,.10), rgba(201,169,110,.03)); padding: 18px; }
.wr-wm-k { font-family: var(--wr-mono); font-size: 12px; letter-spacing: .1em; color: var(--wr-gold); text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.wr-wm p { font-size: 15.5px; margin: 0 0 16px; color: var(--wr-bone); }
.wr-sq { background: #0b0c0d; border: 1px dashed var(--wr-gold-dim); padding: 14px 16px; }
.wr-sq .wr-wm-k { color: var(--wr-bone-2); }
.wr-sq p { margin: 0; font-style: italic; }
.wr-stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.wr-stats3 div { background: var(--wr-slate); padding: 12px 14px; }
.wr-stats3 b { font-family: var(--wr-display); font-weight: 800; font-size: 30px; line-height: 1; display: block; color: var(--wr-bone); font-variant-numeric: tabular-nums; }
.wr-stats3 div:first-child b { color: var(--wr-keep); }
.wr-stats3 small { font-size: 12.5px; color: var(--wr-mute); line-height: 1.3; display: block; margin-top: 4px; }
@media (max-width: 920px) { .wr-whisper-grid { grid-template-columns: 1fr; } }

/* ---- founder ---------------------------------------------------------------- */
.wr-founder-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.wr-founder-grid > * { min-width: 0; }
.wr-dossier { position: relative; margin: 0; border: 1px solid var(--wr-rule-2); background: var(--wr-slate); aspect-ratio: 4 / 5; overflow: hidden; }
.wr-dossier img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.wr-dossier::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,16,18,.55) 0%, rgba(15,16,18,0) 18%, rgba(15,16,18,0) 52%, rgba(15,16,18,.92) 88%); pointer-events: none; }
.wr-dossier .wr-tabline { position: absolute; z-index: 1; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 14px 18px; font-family: var(--wr-mono); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--wr-bone-2); border-bottom: 1px solid var(--wr-rule); }
.wr-dossier .wr-name { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 20px; }
.wr-dossier .wr-name b { font-family: var(--wr-display); font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 3.4vw, 46px); line-height: .95; display: block; max-width: 8ch; letter-spacing: .01em; }
.wr-dossier .wr-name span { display: block; font-size: 14.5px; color: var(--wr-bone-2); margin-top: 8px; }
.wr-founder-body { font-size: 17.5px; color: var(--wr-bone-2); max-width: 62ch; margin-top: 28px; }
.wr-founder-body p:first-child { color: var(--wr-bone); }
.wr-fstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; border-top: 1px solid var(--wr-rule); }
.wr-fstats div { padding: 22px 20px 4px 0; }
.wr-fstats div + div { padding-left: 20px; border-left: 1px solid var(--wr-rule); }
.wr-fstats b { font-family: var(--wr-display); font-weight: 900; font-size: clamp(46px, 5vw, 68px); line-height: .9; color: var(--wr-gold); display: block; }
.wr-fstats span { font-size: 14.5px; color: var(--wr-bone-2); display: block; margin-top: 8px; line-height: 1.4; }
@media (max-width: 920px) { .wr-founder-grid { grid-template-columns: 1fr; } .wr-dossier { max-width: 420px; } }
@media (max-width: 560px) { .wr-fstats { grid-template-columns: 1fr; } .wr-fstats div, .wr-fstats div + div { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--wr-rule); } }

/* ---- blog: the shared article cards ({{resources_latest}}) restyled ---------- */
.wr-blog { padding-top: clamp(64px, 8vw, 104px); padding-bottom: clamp(64px, 8vw, 104px); }
.wr-blog-all { justify-self: end; margin: 0; }
@media (max-width: 860px) { .wr-blog-all { justify-self: start; } }
.wr-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wr-posts .card { background: var(--wr-slate); border: 1px solid var(--wr-rule); border-radius: 0; box-shadow: none; color: var(--wr-bone); display: flex; min-height: 230px; }
.wr-posts a.card:hover { border-color: var(--wr-gold); box-shadow: none; transform: translateY(-3px); }
.wr-posts .card-media, .wr-posts .card-body .eyebrow, .wr-posts .card-body .excerpt { display: none; }
.wr-posts .card-body { padding: 26px 24px 24px; gap: 18px; flex: 1; }
.wr-posts .card-body .meta { order: -1; margin: 0; font-family: var(--wr-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--wr-mute); }
.wr-posts .card-body h3 { font-family: var(--wr-body); font-weight: 700; font-size: 20px; line-height: 1.3; }
.wr-posts .card-body::after { content: "Read article \2192"; margin-top: auto; font-weight: 600; font-size: 14.5px; color: var(--wr-gold); }
@media (max-width: 920px) { .wr-posts { grid-template-columns: 1fr; } .wr-posts .card { min-height: 0; } }

/* homepage reduced motion extras */
@media (prefers-reduced-motion: reduce) { .wr-live-dot i { animation: none; } .wr-posts a.card:hover { transform: none; } }
@media (max-width: 1060px) { html:has(body.page-home) { scroll-padding-bottom: 88px; } }