/* ============================================================================
   Rapid Impact · blog.css
   The log: one post page for rapidimpactlabs.com, built on the site's kit
   (Kallisto slab + General Sans body + mono labels, ink on cream, lime and
   mint, thin line work, kanji as furniture) with the scroll-craft engine
   underneath. Light by default; the pull quotes are the dark "brief" beat.
   Everything continuous moves by transform, opacity or clip-path.
   ========================================================================== */

@font-face{font-family:"Kallisto";src:url("../fonts/Kallisto-Heavy.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Kallisto";src:url("../fonts/Kallisto-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Kallisto";src:url("../fonts/Kallisto-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"General Sans";src:url("../fonts/GeneralSans-Medium.woff2") format("woff2");font-weight:500;font-display:swap}

:root {
  --ink:#18171C; --ink-2:#1E1D23; --ink-3:#121116;
  --paper:#FCFEED; --paper-2:#F4F6E4;
  --lime:#E3F850; --mint:#8DEA9A; --moss:#53B160; --moss-deep:#2d8a4e; --hud:#6EFF82;
  --ash:#8A8A93; --ash-dim:#5A5A63; --ash-paper:#5b5b52;
  --line-lime:rgba(110,255,130,.30); --line-dim:rgba(255,255,255,.10); --line-paper:rgba(24,23,28,.16); --line-paper-soft:rgba(24,23,28,.08);
  --font-display:"Kallisto","Arial Narrow",system-ui,sans-serif;
  --font-body:"General Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,"Cascadia Mono",monospace;
  --maxw:1240px;
  --e-out:cubic-bezier(0,0,.2,1); --e-io:cubic-bezier(.4,0,.2,1);

  /* the engine's tokens, rebranded */
  --sc-canvas: var(--paper); --sc-surface: #fff; --sc-ink: var(--ink); --sc-ink-soft: var(--ash-paper);
  --sc-accent: var(--lime); --sc-accent-ink: var(--ink);
  --sc-hairline: var(--line-paper-soft); --sc-hairline-strong: var(--line-paper);
  --sc-font-display: var(--font-display); --sc-font-text: var(--font-body); --sc-font-mono: var(--font-mono);
  --sc-r-sm: 0; --sc-r-md: 0; --sc-r-lg: 0;
  --sc-gutter: clamp(1.25rem, 4vw, 3rem); --sc-maxw: var(--maxw);
  --sc-measure: 64ch;
}
html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-weight: 500; line-height: 1.55; -webkit-font-smoothing: antialiased; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 2px solid var(--moss-deep); outline-offset: 3px; border-radius: 0; }
.dark :focus-visible, .nav :focus-visible, .brief :focus-visible { outline-color: var(--lime); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------------------------------------------------------- primitives -- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .22em; font-size: .68rem; font-weight: 400; }
.slab { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: -.02em; text-wrap: balance; }
.grn { background: linear-gradient(93deg, var(--lime) 20%, var(--mint) 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* on cream the gradient word is a fill behind the glyphs; lime text alone fails contrast, so it is never used small */
.paper .grn { background: linear-gradient(93deg, var(--moss) 0%, var(--moss-deep) 100%); -webkit-background-clip: text; background-clip: text; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; color: var(--moss-deep); margin-bottom: 1.4rem; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--moss-deep); }
.lede { max-width: 54ch; color: var(--ash-paper); font-size: clamp(1.02rem, 1.4vw, 1.22rem); line-height: 1.5; }
.paper { background: var(--paper); color: var(--ink); }
.dark { background: var(--ink); color: #F4F4F0; }
.kanji { position: absolute; font-family: var(--font-display); font-weight: 900; color: var(--ink); opacity: .05; z-index: 0; pointer-events: none; user-select: none; line-height: .8; }
.reg { position: absolute; z-index: 2; color: var(--ash-paper); }
.hair { position: absolute; background: var(--line-paper-soft); z-index: 1; }
.telem { position: absolute; top: 1.1rem; right: clamp(1.25rem, 4vw, 3rem); z-index: 3; color: var(--ash-paper); }
.tick { position: absolute; width: 10px; height: 10px; border: 1px solid var(--hud); z-index: 3; }
.tick.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.tick.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.tick.bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
.tick.br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.screen { position: relative; overflow: hidden; background: var(--ink-2); }
.screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.12) 2px 3px), linear-gradient(180deg, rgba(24,23,28,.06), rgba(24,23,28,.28)); }
.screen-lbl { position: absolute; left: 10px; bottom: 9px; z-index: 3; color: var(--lime); background: rgba(9,9,12,.72); padding: .24rem .5rem; font-size: .58rem; }
.stripes { display: flex; flex-direction: column; gap: 6px; }
.stripes span { display: block; height: 5px; background: var(--lime); transform-origin: left; }
.stripes span:nth-child(3) { opacity: .5; }
.btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--lime); color: var(--ink); padding: .95rem 1.6rem; font-weight: 700; border: 1px solid var(--lime); transition: transform .15s, background-color .2s, color .2s; }
.btn .arw { transition: transform .2s var(--e-io); }
.btn:hover { background: transparent; color: var(--lime); }
.btn:hover .arw { transform: translate(3px, -3px); }
.btn.ghost { background: transparent; color: #F4F4F0; border-color: var(--line-dim); }
.btn.ghost:hover { border-color: var(--lime); color: var(--lime); }
.skip { position: fixed; top: .75rem; left: .75rem; z-index: 70; padding: .7rem 1rem; background: var(--lime); color: var(--ink); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; transform: translateY(-160%); }
.skip:focus-visible { transform: none; }

/* ----------------------------------------------------------------- nav -- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(20,19,25,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-dim); color: #F4F4F0; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 1rem; }
.nav .logo img { height: 26px; width: auto; }
.navlinks { display: flex; gap: 1.6rem; align-items: center; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.navlinks a { color: var(--ash); transition: color .15s; min-height: 44px; display: inline-flex; align-items: center; }
.navlinks a:hover, .navlinks a.active { color: #fff; }
.navlinks .navcta { color: var(--lime); }
@media (max-width: 820px) { .navlinks a:not(.navcta):not(.active) { display: none; } }

/* ----------------------------------------------------------------- hud -- */
/* The opener: a pinned stage. Title, lede and telemetry left; the cover in a
   screen right, assembling from horizontal slats behind a read head. */
.hud { position: relative; padding: 0; }
.hud--flow { overflow: hidden; }
.hud__stage { display: grid; align-items: center; padding-top: 62px; overflow: clip; }
.hud--flow .hud__stage { overflow: visible; padding-bottom: 2rem; }
.hud .kanji { font-size: min(40vw, 560px); right: -3vw; top: 46%; transform: translateY(-50%); }
.hud .hair--v { top: 0; left: 12%; width: 1px; height: 100%; }
.hud .reg--tl { top: 1rem; left: clamp(1.25rem, 4vw, 3rem); }
.hud .reg--br { bottom: 1rem; right: clamp(1.25rem, 4vw, 3rem); }
.hud__grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; width: 100%; padding-block: clamp(1.5rem, 4svh, 3rem); }
.hud__h { font-size: clamp(2rem, 3.9vw, 3.6rem); margin: 0 0 0 -.03em; max-width: 16ch; }
.hud__copy .lede { margin-top: 1.2rem; font-size: clamp(1rem, 1.2vw, 1.12rem); }
.hud__screen { max-height: min(60svh, 34rem); margin-inline: auto; }
.hud__back { display: inline-flex; align-items: center; min-height: 44px; margin: -.6rem 0 .2rem; color: var(--ash-paper); }
.hud__back:hover { color: var(--moss-deep); }
.telem-row { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 2.2rem; margin: 1.6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line-paper); }
.telem-row dt { color: var(--ash-paper); }
.telem-row dd { margin: .35rem 0 0; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: .9; color: var(--ink); font-variant-numeric: tabular-nums; }
.telem-row dd small { font-family: var(--font-mono); font-weight: 400; font-size: .62rem; letter-spacing: .16em; color: var(--ash-paper); margin-left: .35rem; }
.hud__stripes { margin-top: 1.4rem; max-width: 380px; }
.hud__stripes span { will-change: transform; }
.hud__fig { position: relative; margin: 0; }
.hud__screen { aspect-ratio: 1; width: 100%; box-shadow: 0 30px 80px -30px rgba(24,23,28,.45); }
.slats { position: absolute; inset: 0; z-index: 1; }
.slat { position: absolute; left: 0; width: 100%; background-repeat: no-repeat; will-change: transform, opacity; backface-visibility: hidden; }
/* the read head: a hairline of HUD green riding down the screen with progress */
.hud__head { position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 3; background: var(--hud); box-shadow: 0 0 12px rgba(110,255,130,.9); will-change: transform; }
.hud__head::after { content: ""; position: absolute; right: 8px; top: -3px; width: 7px; height: 7px; background: var(--hud); }
.hud__cap { margin-top: .8rem; color: var(--ash-paper); letter-spacing: .12em; font-size: .62rem; max-width: 44ch; line-height: 1.7; }
.hud__cap .n { color: var(--moss-deep); margin-right: .6rem; }

/* ----------------------------------------------------------------- log -- */
/* The copy: an index rail on the left that tracks the chapter being read, the
   article on the right in the measure, headings as slabs with mono numbers. */
.log { position: relative; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 9vw, 7rem); }
.log__grid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.log__stick { position: sticky; top: 90px; }
.log__k { margin: 0 0 1rem; color: var(--ash-paper); }
.log__index { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-paper); }
.log__index li { margin: 0; }
.log__index a { display: flex; gap: .8rem; align-items: baseline; padding: .55rem 0 .55rem 1rem; color: var(--ash-paper); letter-spacing: .14em; font-size: .64rem; line-height: 1.5; text-transform: uppercase; position: relative; transition: color .2s; }
.log__index a span { color: var(--moss-deep); flex: 0 0 auto; }
.log__index a::before { content: ""; position: absolute; left: -1px; top: .55rem; bottom: .55rem; width: 2px; background: var(--moss-deep); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--e-out); }
.log__index a:hover { color: var(--ink); }
.log__index a.is-active { color: var(--ink); }
.log__index a.is-active::before { transform: scaleY(1); }
.log__meter { position: relative; margin-top: 1.6rem; height: 120px; width: 1px; background: var(--line-paper); overflow: hidden; }
.log__meter-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--moss); transform: scaleY(0); transform-origin: top; will-change: transform; }
.log__meter-lbl { margin-top: .6rem; color: var(--ash-paper); font-size: .6rem; letter-spacing: .16em; font-variant-numeric: tabular-nums; }

.log__body { max-width: var(--sc-measure); }
.log__sec { position: relative; padding-top: .5rem; }
.log__sec + .log__sec { margin-top: clamp(2.5rem, 5vw, 4rem); }
.sec-n { margin: 0 0 .8rem; color: var(--moss-deep); }
.sec-head { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: .96; letter-spacing: -.01em; margin: 0 0 1.2rem; max-width: 22ch; text-wrap: balance; }
.log__body p { margin: 0; max-width: var(--sc-measure); font-size: clamp(1rem, 1.05vw, 1.1rem); line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.log__body p + p { margin-top: 1.1rem; }
.log__body h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.15rem; margin: 2rem 0 .7rem; line-height: 1.05; }
.log__body ul, .log__body ol { margin: 1.1rem 0 0; padding-left: 1.2rem; }
.log__body li + li { margin-top: .5rem; }
.log__body a { color: var(--moss-deep); text-decoration: underline; text-underline-offset: .2em; }
.log__body code { font-family: var(--font-mono); font-size: .88em; background: rgba(24,23,28,.06); padding: .1em .3em; }
.log__body pre { overflow-x: auto; padding: 1rem; margin: 1.2rem 0 0; background: var(--ink); color: #F4F4F0; font-size: .85rem; }
.log__body hr { border: 0; border-top: 1px solid var(--line-paper); margin: 2.2rem 0; }
.log__body .fig { margin: 2rem 0; }
.log__body .fig .screen { aspect-ratio: 16 / 10; }
.log__body .fig figcaption { margin-top: .7rem; color: var(--ash-paper); font-size: .62rem; letter-spacing: .12em; line-height: 1.7; max-width: 48ch; }
.log__body .fig figcaption .n { color: var(--moss-deep); margin-right: .6rem; }
/* the brief: a dark panel, the one dark beat on a cream page */
.brief { position: relative; margin: 2.4rem 0; padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.4rem) calc(clamp(1.4rem, 3vw, 2.4rem) + 6px); background: var(--ink); color: #F4F4F0; overflow: hidden; }
.brief::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--lime), var(--mint)); }
.brief .brief__k { position: absolute; top: .9rem; right: 1rem; color: var(--ash-dim); }
.brief p { color: #F4F4F0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.25; max-width: 30ch; }
.brief p + p { margin-top: .9rem; }
.brief .kanji { color: #fff; opacity: .05; font-size: 9rem; right: -1rem; bottom: -2.4rem; }
.log__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2.5rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line-paper); }
.log__tags span { border: 1px solid var(--line-paper); padding: .35rem .6rem; color: var(--ash-paper); font-size: .6rem; letter-spacing: .14em; }

/* ------------------------------------------------------------ cta band -- */
.cta-band { position: relative; text-align: center; padding-block: clamp(3.5rem, 8vw, 6rem); border-top: 1px solid var(--line-lime); overflow: hidden; }
.cta-band .kanji { color: #fff; font-size: min(34vw, 420px); right: -2vw; top: 50%; transform: translateY(-50%); opacity: .04; }
.cta-band h2 { font-size: clamp(2rem, 6vw, 4.2rem); margin: 0 0 1.2rem; position: relative; z-index: 1; }
.cta-band p { max-width: 48ch; margin: 0 auto 1.8rem; color: var(--ash); position: relative; z-index: 1; }
.cta-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; }
.cta-band .scar { color: var(--ash-dim); margin-top: 2rem; position: relative; z-index: 1; }
.foot { background: var(--ink-3); border-top: 1px solid var(--line-dim); padding-block: 2.2rem; color: #F4F4F0; }
.foot .wrap { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; align-items: center; }
.foot .logo img { height: 22px; width: auto; }
.foot .mono { color: var(--ash-dim); }
.foot .fk { font-family: var(--font-display); font-weight: 900; color: #fff; opacity: .08; font-size: 2rem; }

/* ---------------------------------------------------- wipes and tracer -- */
@property --wipe { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
.screen[data-wipe] { --wipe: 100%; clip-path: inset(0 var(--wipe) 0 0); transition: --wipe 1100ms var(--e-out); }
.screen[data-wipe].is-wiped { --wipe: 0%; }
.wipe-edge { position: absolute; top: 0; bottom: 0; right: var(--wipe); width: 2px; background: var(--hud); box-shadow: 0 0 10px rgba(110,255,130,.8); z-index: 4; pointer-events: none; transition: opacity 240ms var(--e-out) 1000ms; }
.is-wiped .wipe-edge { opacity: 0; }
/* the offset hairline frame behind every figure */
.log__body .fig { position: relative; }
.log__body .fig::before { content: ""; position: absolute; left: 10px; top: 10px; right: -10px; bottom: auto; height: 100%; max-height: calc(100% - 2.6rem); border: 1px solid var(--line-paper); pointer-events: none; z-index: 0; }
.log__body .fig .screen { z-index: 1; }
/* a short run of HUD light travelling the screen's frame */
.tracer { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--hud); stroke-width: 1.5; pointer-events: none; z-index: 4; opacity: .9; }
.tracer rect { stroke-dasharray: 0.11 0.89; stroke-dashoffset: 0; animation: trace 8s linear infinite; }
@keyframes trace { to { stroke-dashoffset: -1; } }

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .slat { transform: none !important; opacity: 1 !important; }
  .screen[data-wipe] { clip-path: none !important; transition: none; }
  .wipe-edge { display: none; }
  .tracer rect { animation: none; stroke-dasharray: none; opacity: .5; }
  .hud__head { display: none; }
  .hud__stripes span { transform: none !important; }
  .log__index a::before, .log__meter-fill { transition: none; }
}

/* ---------------------------------------------------------------- 1024 -- */
@media (max-width: 1024px) {
  .hud__grid { grid-template-columns: 1fr 1fr; }
  .log__grid { grid-template-columns: 12rem minmax(0, 1fr); }
}

/* ----------------------------------------------------------------- 820 -- */
@media (max-width: 820px) {
  .hud__stage { align-items: start; }
  .hud__grid { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 1.5rem 2rem; }
  .hud__fig { order: -1; }
  .hud__screen { aspect-ratio: 16 / 10; }
  .hud__h { font-size: clamp(2rem, 9vw, 3.2rem); max-width: none; }
  .hud .kanji { font-size: 120vw; right: -30%; top: 40%; }
  .hud .reg--br, .hud .hair--v { display: none; }
  .telem-row { gap: 1.4rem; }
  .log__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .log__stick { position: static; }
  .log__index { display: flex; flex-wrap: wrap; gap: .2rem 1rem; border-left: 0; border-top: 1px solid var(--line-paper); padding-top: .6rem; }
  .log__index a { padding: .4rem 0; }
  .log__index a::before { display: none; }
  .log__meter, .log__meter-lbl { display: none; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { justify-content: center; }
  .foot .wrap { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .foot .fk { display: none; }
}
@media (max-width: 520px) {
  .nav .wrap { height: 56px; }
  .hud__stage { padding-top: 56px; }
  .hud__h { font-size: clamp(1.8rem, 10vw, 2.6rem); }
  .telem-row { grid-template-columns: repeat(3, 1fr); gap: .8rem; }
  .telem-row dd { font-size: 1.4rem; }
  .brief p { font-size: 1.1rem; }
}