/*
 * DENSHIN Blog — one stylesheet, no build step beyond the content hash in its name.
 *
 * Palette, type and rhythm are the landing's (landing/src/styles/tokens.css): the same
 * navy ground, the same neon accents, Michroma for display, Space Grotesk for reading,
 * JetBrains Mono for labels. The one addition is long-form typography (`.prose`).
 */
:root {
  --bg-base: #0b1130;
  --bg-deep: #0d1538;
  --bg-panel: rgba(13, 19, 46, .78);
  --bg-chip: rgba(16, 22, 52, .72);
  --bg-chip-dark: rgba(9, 12, 28, .94);
  --text-primary: #ffffff;
  --text-base: #eaf2ff;
  --text-read: rgba(234, 242, 255, .84);
  --text-body: rgba(234, 242, 255, .64);
  --text-faint: rgba(234, 242, 255, .42);
  --cyan: #7fe7ff;
  --cyan-deep: #22d3ee;
  --green: #34ffb6;
  --pink: #f472b6;
  --violet: #7c3aed;
  --violet-soft: #c4b5fd;
  --hairline: rgba(140, 180, 255, .16);
  --hairline-strong: rgba(140, 180, 255, .3);
  --grid-line: rgba(130, 160, 255, .035);
  --font-display: 'Michroma', sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --wrap: 1200px;
  --pad-x: clamp(16px, 4vw, 48px);
  --radius: 18px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --gradient: linear-gradient(100deg, #22d3ee, #7c3aed);
  --shadow: 0 40px 90px -50px rgba(0, 0, 0, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-base);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-color: var(--bg-base);
  background-image:
    radial-gradient(90% 40% at 50% 0%, rgba(46, 62, 132, .55), rgba(11, 17, 48, 0) 62%),
    radial-gradient(60% 34% at 10% 40%, rgba(64, 44, 140, .2), rgba(11, 17, 48, 0) 70%),
    radial-gradient(60% 34% at 90% 72%, rgba(30, 80, 150, .16), rgba(11, 17, 48, 0) 70%),
    repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 96px),
    linear-gradient(180deg, var(--bg-deep), var(--bg-base) 46%, var(--bg-deep));
}
a { color: var(--cyan); text-decoration: none; }
a:hover { color: #ffffff; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--violet); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 14px; background: var(--bg-chip-dark); border-radius: 10px; }
.skip:focus { left: 12px; }

.glyph { width: 18px; height: 18px; fill: currentColor; flex: none; }
.glyph--inline { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; animation: blink 1.9s ease-in-out infinite; }
.dot--off { background: var(--pink); animation: none; }
@keyframes blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52, 255, 182, .55); }
  50% { opacity: .35; box-shadow: 0 0 0 7px rgba(52, 255, 182, 0); }
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(127, 231, 255, .78);
}

/* ---------------------------------------------------------------- header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--pad-x);
  background: linear-gradient(180deg, rgba(9, 13, 36, .92), rgba(9, 13, 36, .66));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(140, 180, 255, .08);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
/* The logo PNG is a square tile; rounded and edged here the way the favicon is drawn. */
.brand__mark { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 0 0 1.5px rgba(63, 116, 240, .75), 0 6px 18px -8px rgba(63, 116, 240, .8); }
.brand__word { font-family: var(--font-display); font-size: 16px; letter-spacing: .16em; }
.brand__tag {
  padding: 3px 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .24em;
  color: var(--cyan);
  border: 1px solid rgba(127, 231, 255, .35);
  border-radius: 6px;
}
.topbar__nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.topbar__link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  transition: color .3s ease;
}
.topbar__link:hover, .topbar__link.is-active { color: #fff; }
.topbar__link.is-active { text-shadow: 0 0 14px rgba(127, 231, 255, .6); }

/*
 * Launch App — the same button, with the same motion, as the landing's bar
 * (landing/src/styles/layout.css): the cyan→violet fill drifts, a sheen crosses it every
 * few seconds and the arrow nudges after it. The sheen sits under the text: `isolation`
 * makes the button its own stacking context, so `z-index: -1` lands above the fill.
 */
.launch {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(100deg, #22d3ee 0%, #7c3aed 50%, #22d3ee 100%);
  background-size: 200% 100%;
  border-radius: 10px;
  box-shadow: 0 10px 30px -12px rgba(34, 211, 238, .7);
  animation: launch-flow 6s linear infinite;
  transition: transform .3s var(--ease-out), box-shadow .3s ease;
  white-space: nowrap;
}
.launch::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: translateX(-170%) skewX(-18deg);
  animation: launch-sheen 4s cubic-bezier(.45, 0, .2, 1) infinite;
  pointer-events: none;
}
.launch:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 16px 40px -12px rgba(124, 58, 237, .9), 0 0 0 1px rgba(127, 231, 255, .35); }
.launch__arrow { width: 14px; height: 14px; flex: none; fill: currentColor; animation: launch-nudge 4s ease-in-out infinite; }
.launch:hover .launch__arrow { animation: none; transform: translateX(3px); }
/* A second button on the same screen glints out of step with the header's. */
.launch--big, .launch--big::after, .launch--big .launch__arrow { animation-delay: 1.4s; }
@keyframes launch-flow { to { background-position: 200% 0; } }
@keyframes launch-sheen {
  0% { transform: translateX(-170%) skewX(-18deg); }
  45%, 100% { transform: translateX(290%) skewX(-18deg); }
}
@keyframes launch-nudge {
  0%, 38%, 62%, 100% { transform: translateX(0); }
  48% { transform: translateX(4px); }
}
.launch--big { padding: 15px 22px; font-size: 12px; }
.ghost {
  display: inline-flex;
  align-items: center;
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  transition: border-color .3s ease, color .3s ease;
}
.ghost:hover { color: #fff; border-color: rgba(127, 231, 255, .6); }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--hairline); }
.hero__art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  opacity: .5;
  -webkit-mask-image: radial-gradient(80% 90% at 70% 40%, #000 20%, rgba(0, 0, 0, .4) 55%, transparent 88%);
  mask-image: radial-gradient(80% 90% at 70% 40%, #000 20%, rgba(0, 0, 0, .4) 55%, transparent 88%);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 17, 48, .95) 0%, rgba(11, 17, 48, .6) 45%, rgba(11, 17, 48, .1) 100%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; padding: clamp(70px, 11vw, 140px) var(--pad-x) clamp(60px, 9vw, 110px); }
.hero--compact .hero__inner { padding-top: clamp(50px, 7vw, 80px); padding-bottom: clamp(40px, 6vw, 60px); }
.hero__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 6vw, 76px); line-height: 1.08; letter-spacing: .02em; }
.hero__page { display: block; margin-top: 12px; font-size: .38em; letter-spacing: .2em; color: var(--text-body); }
.hero__lead { max-width: 54ch; margin: 22px 0 0; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; color: var(--text-body); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---------------------------------------------------------------- chips */
.topics, .chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.topics { max-width: var(--wrap); margin: 28px auto 0; padding: 0 var(--pad-x); }
.topics__label { margin-right: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--text-faint); }
.chip {
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(234, 242, 255, .78);
  background: var(--bg-chip);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  transition: border-color .3s ease, color .3s ease;
}
.chip:hover { color: #fff; border-color: rgba(127, 231, 255, .55); }

/* ----------------------------------------------------------------- lists */
.list, .more, .page-head { max-width: var(--wrap); margin: 0 auto; padding: 44px var(--pad-x) 0; }
.list__title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 56px 0 24px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-body);
}
.list__title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--hairline-strong), transparent); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 24px; }

.card, .lead-card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .35s var(--ease-out), border-color .35s ease, box-shadow .35s ease;
}
.card:hover, .lead-card:hover {
  transform: translateY(-3px);
  border-color: rgba(127, 231, 255, .45);
  box-shadow: var(--shadow), 0 0 0 1px rgba(127, 231, 255, .12), 0 20px 60px -30px rgba(34, 211, 238, .55);
}
.card__link, .lead-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.card__link:hover, .lead-card__link:hover { color: inherit; }
.card__media, .lead-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-deep); }
.card__media img, .lead-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.card:hover img, .lead-card:hover img { transform: scale(1.035); }
.card__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 20px 22px; }
.card__section, .lead-card__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); }
.card__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; color: #fff; text-wrap: balance; }
.card__excerpt {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--text-faint); }

.lead-card { margin-top: 8px; border-radius: 24px; }
.lead-card__link { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
/* The poster keeps its 16:9 and sits centred in the row; a crop would cut off the words
   most posters carry on their left side. */
.lead-card__media { aspect-ratio: 16 / 9; align-self: center; }
.lead-card__link { align-items: center; }
.lead-card__body { display: flex; flex-direction: column; gap: 16px; justify-content: center; padding: clamp(24px, 3.4vw, 48px); background: radial-gradient(120% 90% at 100% 0%, rgba(124, 58, 237, .18), transparent 60%); }
.lead-card__eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.lead-card__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.3; color: #fff; text-wrap: balance; }
.lead-card__excerpt { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text-body); }
.lead-card__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.lead-card__cta .glyph { width: 15px; height: 15px; transition: transform .3s var(--ease-out); }
.lead-card:hover .lead-card__cta .glyph { transform: translateX(4px); }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 44px; font-family: var(--font-mono); font-size: 12px; }
.pager__pages { display: flex; gap: 6px; }
.pager__page, .pager__step { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; color: rgba(234, 242, 255, .8); background: var(--bg-chip); border: 1px solid var(--hairline); border-radius: 10px; }
.pager__page:hover, .pager__step:hover { color: #fff; border-color: rgba(127, 231, 255, .55); }
.pager__page.is-current { color: #fff; background: var(--gradient); border-color: transparent; }

.page-head { padding-top: clamp(50px, 8vw, 90px); }
.page-head__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.15; }
.page-head__lead { max-width: 60ch; margin: 18px 0 0; font-size: 17px; line-height: 1.7; color: var(--text-body); }

/* --------------------------------------------------------------- article */
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); }
.post { padding-top: clamp(40px, 6vw, 72px); }
.post__head { max-width: 900px; margin: 0 auto; padding: 0 var(--pad-x); text-align: center; }
.post__head .crumbs, .post__head .chips { justify-content: center; }
.post__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4.4vw, 50px); line-height: 1.22; text-wrap: balance; }
.post__dek { max-width: 62ch; margin: 22px auto 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: var(--text-body); }
.post__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 24px 0 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--text-faint); }
.post__poster { max-width: calc(var(--wrap) + 2 * var(--pad-x)); margin: clamp(32px, 5vw, 56px) auto 0; padding: 0 var(--pad-x); }
.post__poster img { width: 100%; border-radius: 24px; border: 1px solid var(--hairline); box-shadow: var(--shadow), 0 30px 120px -60px rgba(56, 189, 248, .6); }
.post__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 760px; margin: clamp(40px, 6vw, 64px) auto 0; padding: 0 var(--pad-x); }
.post__updated { margin-top: 40px; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }

.toc { padding: 18px 20px; background: var(--bg-panel); border: 1px solid var(--hairline); border-radius: 14px; }
.toc__title { margin: 0 0 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--text-faint); }
.toc ol { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.45; }
.toc li::marker { color: var(--cyan); font-family: var(--font-mono); font-size: 12px; }
.toc a { color: rgba(234, 242, 255, .78); }
.toc a:hover { color: #fff; }

@media (min-width: 1120px) {
  .post__layout { grid-template-columns: 230px minmax(0, 720px); max-width: calc(230px + 720px + 56px + 2 * var(--pad-x)); gap: 56px; }
  .toc { position: sticky; top: 92px; align-self: start; background: transparent; border: 0; border-left: 1px solid var(--hairline); border-radius: 0; padding: 4px 0 4px 18px; }
  .post__layout > .prose:only-child { grid-column: 2; }
}

.prose { min-width: 0; font-size: 18px; line-height: 1.8; color: var(--text-read); }
.prose > p:first-child { font-size: 20px; line-height: 1.75; color: rgba(234, 242, 255, .92); }
.prose p { margin: 0 0 1.25em; }
.prose h2, .prose h3 { position: relative; scroll-margin-top: 90px; color: #fff; text-wrap: balance; }
.prose h2 { margin: 2.1em 0 .75em; font-family: var(--font-display); font-weight: 400; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.35; letter-spacing: .01em; }
.prose h3 { margin: 1.8em 0 .6em; font-size: 21px; font-weight: 600; line-height: 1.4; }
.prose .anchor { margin-left: .45em; font-family: var(--font-mono); font-size: .8em; color: var(--cyan); opacity: 0; transition: opacity .2s ease; }
.prose h2:hover .anchor, .prose h3:hover .anchor, .prose .anchor:focus-visible { opacity: .8; }
.prose strong { color: #fff; font-weight: 600; }
.prose a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(127, 231, 255, .4); text-underline-offset: 3px; }
.prose a:hover { color: #fff; text-decoration-color: currentColor; }
.prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.prose li { margin: .45em 0; padding-left: .2em; }
.prose li::marker { color: var(--cyan); }
.prose blockquote { margin: 1.8em 0; padding: 18px 22px; background: linear-gradient(100deg, rgba(34, 211, 238, .08), rgba(124, 58, 237, .08)); border-left: 3px solid var(--cyan-deep); border-radius: 0 14px 14px 0; color: rgba(234, 242, 255, .9); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { margin: 2.6em 0; border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent); }
.prose code { padding: 2px 6px; font-family: var(--font-mono); font-size: .86em; background: var(--bg-chip); border: 1px solid var(--hairline); border-radius: 6px; }
.prose table { width: 100%; margin: 0 0 1.6em; border-collapse: collapse; font-size: 15.5px; }
.prose th, .prose td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--hairline); }
.prose th { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }

.cta-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: calc(900px + 2 * var(--pad-x));
  margin: clamp(48px, 7vw, 80px) auto 0;
  padding: clamp(24px, 3.5vw, 36px);
  background: radial-gradient(120% 140% at 0% 0%, rgba(34, 211, 238, .14), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(124, 58, 237, .2), transparent 55%), var(--bg-panel);
  border: 1px solid var(--hairline-strong);
  border-radius: 22px;
}
.post .cta-box { margin-left: max(var(--pad-x), calc((100% - 900px) / 2)); margin-right: max(var(--pad-x), calc((100% - 900px) / 2)); }
.cta-box__kicker { margin: 0 0 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--green); }
.cta-box__title { max-width: 30ch; margin: 0; font-family: var(--font-display); font-size: clamp(17px, 1.8vw, 22px); line-height: 1.45; }
.cta-box__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------ join the signal */
.join { max-width: var(--wrap); margin: clamp(90px, 12vw, 150px) auto 0; padding: 0 var(--pad-x); text-align: center; }
.join__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.15; text-transform: uppercase; }
.join__lead { max-width: 52ch; margin: 18px auto 0; font-size: 17px; line-height: 1.7; color: var(--text-body); }
.join__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; margin-top: 44px; text-align: left; }
.signal {
  --glow: color-mix(in srgb, var(--brand) 45%, transparent);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px 16px;
  padding: 22px;
  color: var(--text-base);
  background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%), var(--bg-panel);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  overflow: hidden;
  transition: transform .35s var(--ease-out), border-color .35s ease, box-shadow .35s ease;
}
.signal:hover { color: #fff; transform: translateY(-3px); border-color: var(--glow); box-shadow: 0 24px 60px -30px var(--glow); }
.signal__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  color: #fff;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(140, 180, 255, .2);
  transition: background .35s ease, color .35s ease, box-shadow .35s ease;
}
.signal__icon .glyph { width: 24px; height: 24px; }
.signal:hover .signal__icon { background: var(--brand); color: var(--brand-ink); box-shadow: 0 0 28px -4px var(--glow); }
.signal__text { display: grid; gap: 4px; }
.signal__name { font-size: 19px; font-weight: 600; }
.signal__handle { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--text-faint); }
.signal__blurb { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.signal__action { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); }
.signal__action .glyph { width: 15px; height: 15px; transition: transform .3s var(--ease-out); }
.signal:hover .signal__action .glyph { transform: translateX(4px); }

/* ---------------------------------------------------------------- footer */
.footer { margin-top: clamp(80px, 10vw, 120px); background: linear-gradient(180deg, rgba(8, 12, 32, 0), rgba(7, 10, 28, .9) 40%); }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px; max-width: var(--wrap); margin: 0 auto; padding: 50px var(--pad-x) 36px; border-top: 1px solid var(--hairline); }
.footer__grid > div { display: grid; align-content: start; gap: 12px; }
.footer__grid a:not(.brand) { font-size: 14px; color: rgba(234, 242, 255, .76); }
.footer__grid a:not(.brand):hover { color: #fff; }
.footer__tagline { max-width: 30ch; margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: var(--text-faint); }
.footer__title { margin: 0 0 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--text-faint); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; max-width: var(--wrap); margin: 0 auto; padding: 20px var(--pad-x) 36px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text-faint); }
.footer__legal a { color: var(--text-body); }

/* --------------------------------------------------------------- consent */
.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 640px;
  margin-inline: auto;
  padding: 12px 12px 12px 20px;
  background: var(--bg-chip-dark);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .9);
}
.consent__text { flex: 1; margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-body); }
.consent__text a { color: rgba(234, 242, 255, .82); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.consent__accept { flex: none; padding: 12px 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--gradient); border: 0; border-radius: 10px; cursor: pointer; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 860px) {
  .lead-card__link { grid-template-columns: minmax(0, 1fr); }
  .lead-card__media { aspect-ratio: 16 / 9; }
  .hero::after { background: linear-gradient(180deg, rgba(11, 17, 48, .55), rgba(11, 17, 48, .92)); }
}
@media (max-width: 640px) {
  .topbar__link--wide { display: none; }
  .brand__word { font-size: 14px; }
  .brand__tag { display: none; }
  .launch { padding: 9px 12px; letter-spacing: .12em; }
  /* One swipeable row of topics instead of four lines of chips above the first article. */
  .topics { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .topics::-webkit-scrollbar { display: none; }
  .topics .chip, .topics__label { flex: none; }
  .prose { font-size: 17px; }
  .prose > p:first-child { font-size: 18.5px; }
  .consent { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}