/* ── iter8 TechNews — listing + article styles ───────────────
   Used by technews.html and the generated technews-*.html pages
   (regenerate pages with: node build-technews.js)               */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { background: #0B0B0F; }
body { font-family: 'Geist', system-ui, sans-serif; color: #FAF7F2;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
::selection { background: #1428A0; color: #FAF7F2; }

.orb { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.orb.a { width: 480px; height: 480px; top: -160px; left: -160px; background: rgba(20,40,160,0.15); }
.orb.b { width: 420px; height: 420px; bottom: -140px; right: -120px; background: rgba(20,40,160,0.09); }
.page { position: relative; z-index: 1; }

.rvl { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.6,.25,1); }
.rvl.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rvl { opacity: 1; transform: none; transition: none; } }

/* ── shared bits ── */
.tn-wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.tn-eyebrow { font-family: 'Geist Mono'; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #8FA0E8; }
.tn-tag { display: inline-flex; font-family: 'Geist Mono'; font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: #C7D0F5;
  background: rgba(20,40,160,0.28); border: 1px solid rgba(58,85,217,0.45);
  padding: 4px 10px; border-radius: 999px; }
.tn-meta { font-family: 'Geist Mono'; font-size: 10.5px; letter-spacing: 0.05em;
  color: rgba(250,247,242,0.42); text-transform: uppercase; }
.tn-meta b { color: rgba(250,247,242,0.7); font-weight: 500; }

/* ── listing: masthead ── */
.tn-mast { padding: 64px 0 44px; border-bottom: 1px solid rgba(250,247,242,0.08); }
.tn-mast .dateline { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.tn-mast .dateline .rule { flex: 1; height: 1px; background: rgba(250,247,242,0.1); min-width: 40px; }
.tn-mast h1 { font-weight: 500; font-size: clamp(38px, 5.4vw, 64px); letter-spacing: -0.04em;
  line-height: 1.02; margin-bottom: 16px; text-wrap: balance; }
.tn-mast .sub { font-size: 16px; line-height: 1.6; color: #C5C2BA; max-width: 560px; }

/* ── listing: featured dispatch ── */
.tn-feat { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px;
  align-items: center; padding: 52px 0; border-bottom: 1px solid rgba(250,247,242,0.08); }
.tn-feat .kick { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tn-feat h2 { font-weight: 500; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.03em;
  line-height: 1.1; margin-bottom: 14px; text-wrap: balance; }
.tn-feat h2 a:hover { color: #C7D0F5; }
.tn-feat .stand { font-size: 15.5px; line-height: 1.6; color: #C5C2BA; margin-bottom: 18px; max-width: 480px; }
.tn-read { display: inline-flex; align-items: center; gap: 8px; font-family: 'Geist Mono';
  font-size: 12px; font-weight: 500; letter-spacing: 0.05em; color: #8FA0E8; }
.tn-read .arr { transition: transform 180ms ease; }
.tn-feat:hover .tn-read .arr, .tn-row:hover .tn-read .arr { transform: translateX(4px); }

/* ── listing: index rows ── */
.tn-index { padding: 10px 0 30px; }
.tn-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 220px; gap: 28px; align-items: center;
  padding: 30px 18px; margin: 0 -18px; border-bottom: 1px solid rgba(250,247,242,0.07);
  border-radius: 12px; transition: background 180ms ease; }
.tn-row:hover { background: rgba(250,247,242,0.03); }
.tn-row .ix { font-family: 'Geist Mono'; font-size: 26px; font-weight: 600; color: rgba(250,247,242,0.18);
  letter-spacing: -0.02em; }
.tn-row:hover .ix { color: #3A55D9; transition: color 180ms ease; }
.tn-row .kick { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tn-row h3 { font-weight: 500; font-size: 21px; letter-spacing: -0.025em; line-height: 1.25; margin-bottom: 8px; }
.tn-row h3 a:hover { color: #C7D0F5; }
.tn-row .ex { font-size: 13.5px; line-height: 1.55; color: #888785; max-width: 560px; }
.tn-row .tn-read { margin-top: 12px; }
@media (max-width: 860px) {
  .tn-feat { grid-template-columns: 1fr; gap: 28px; }
  .tn-row { grid-template-columns: 44px minmax(0, 1fr); }
  .tn-row .cover { display: none; }
  .tn-row .ix { font-size: 20px; }
}

/* ── generative covers (no stock images on this site) ── */
.cover { position: relative; border-radius: 12px; border: 1px solid rgba(250,247,242,0.09);
  background: rgba(28,28,34,0.72); overflow: hidden; padding: 9% 8%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.tn-feat .cover { aspect-ratio: 16 / 10; }
.tn-row .cover { aspect-ratio: 16 / 9; padding: 7% 8%; }
.cover-band { aspect-ratio: unset !important; height: 170px; margin: 30px 0 0;
  display: flex; flex-direction: column; justify-content: center; }

/* cover · checklist (playbook) — boxes tick in sequence */
.cv-check { display: flex; flex-direction: column; justify-content: center; gap: 9%; height: 100%; }
.cv-check .r { display: flex; align-items: center; gap: 5%; }
.cv-check .bx { width: 9%; aspect-ratio: 1; border: 1.5px solid rgba(250,247,242,0.3); border-radius: 22%;
  position: relative; flex-shrink: 0; }
.cv-check .bx::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 90%; color: #7FE8B5; opacity: 0;
  animation: cvTick 7s linear infinite; animation-delay: var(--d); }
.cv-check .ln { height: 12%; min-height: 5px; border-radius: 99px; background: rgba(250,247,242,0.14);
  animation: cvLine 7s linear infinite; animation-delay: var(--d); }
@keyframes cvTick { 0%, 8% { opacity: 0; transform: scale(0.4); } 12%, 88% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; } }
@keyframes cvLine { 0%, 8% { background: rgba(250,247,242,0.14); } 12%, 88% { background: rgba(58,85,217,0.55); } 95%, 100% { background: rgba(250,247,242,0.14); } }

/* cover · timezones (perspective) — offset bars share an overlap window */
.cv-tz { display: flex; flex-direction: column; justify-content: center; gap: 11%; height: 100%; }
.cv-tz .r { display: flex; align-items: center; gap: 5%; }
.cv-tz .city { font-family: 'Geist Mono'; font-size: 10px; letter-spacing: 0.08em; color: rgba(250,247,242,0.55);
  width: 16%; flex-shrink: 0; }
.cv-tz .bar { position: relative; flex: 1; height: 22%; min-height: 9px; border-radius: 99px;
  background: rgba(250,247,242,0.08); overflow: hidden; }
.cv-tz .day { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: rgba(58,85,217,0.4); }
.cv-tz .lap { position: absolute; top: 0; bottom: 0; left: 46%; width: 18%;
  background: rgba(127,232,181,0.45); border-radius: 99px; animation: cvLap 3.2s ease-in-out infinite; }
@keyframes cvLap { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* cover · migration (case study) — a record brick crosses over, forever */
.cv-mig { display: grid; grid-template-columns: 1fr 18% 1fr; align-items: center; height: 100%; }
.cv-mig .col { display: flex; flex-direction: column; gap: 12%; height: 78%; justify-content: center; }
.cv-mig .row { height: 18%; min-height: 9px; border-radius: 5px; }
.cv-mig .old .row { background: rgba(212,208,200,0.13); animation: cvFade 5s linear infinite; animation-delay: var(--d); }
.cv-mig .new .row { background: rgba(20,40,160,0.5); border: 1px solid rgba(58,85,217,0.5);
  opacity: 0.25; animation: cvLand 5s linear infinite; animation-delay: var(--d); }
@keyframes cvFade { 0%, 10% { opacity: 1; } 20%, 85% { opacity: 0.3; } 95%, 100% { opacity: 1; } }
@keyframes cvLand { 0%, 15% { opacity: 0.25; } 25%, 85% { opacity: 1; } 95%, 100% { opacity: 0.25; } }
.cv-mig .fly { position: relative; height: 100%; }
.cv-mig .fly i { position: absolute; top: 46%; left: -20%; width: 55%; height: 8%; min-height: 5px;
  border-radius: 3px; background: linear-gradient(180deg, #FAF7F2 50%, #3A55D9 50%);
  animation: cvFly 5s linear infinite; }
@keyframes cvFly { 0%, 8% { left: -30%; opacity: 0; } 14% { opacity: 1; } 32% { left: 76%; opacity: 1; } 38%, 100% { left: 76%; opacity: 0; } }

/* cover · agent (explainer) — mini bot, branching pulses */
.cv-bot { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 4%; }
.cv-bot .bot { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cv-bot .bot .h { width: 44px; height: 19px; border-radius: 6px; background: #FAF7F2;
  display: flex; align-items: center; justify-content: center; gap: 8px; }
.cv-bot .bot .h i { width: 4.5px; height: 4.5px; border-radius: 50%; background: #0B0B0F;
  animation: cvBlink 4.4s infinite; }
.cv-bot .bot .b { width: 44px; height: 19px; border-radius: 6px; background: #1428A0; }
@keyframes cvBlink { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.15); } }
.cv-bot .wires { flex: 1; display: flex; flex-direction: column; gap: 16%; height: 62%; padding: 0 6%; justify-content: center; }
.cv-bot .w { position: relative; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(250,247,242,0.16) 0 5px, transparent 5px 10px); }
.cv-bot .w::after { content: ''; position: absolute; top: -3px; left: 0; width: 8px; height: 8px;
  border-radius: 50%; background: #3A55D9; box-shadow: 0 0 10px rgba(58,85,217,0.9);
  animation: cvPulse 1.8s linear infinite; animation-delay: var(--d); }
@keyframes cvPulse { from { left: -4%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: 96%; opacity: 0; } }
.cv-bot .outs { display: flex; flex-direction: column; gap: 14%; height: 62%; justify-content: center; }
.cv-bot .o { width: 34px; height: 22px; border-radius: 6px; border: 1px solid rgba(58,85,217,0.5);
  background: rgba(20,40,160,0.18); animation: cvGlow 1.8s linear infinite; animation-delay: var(--d); }
@keyframes cvGlow { 0%, 70% { border-color: rgba(58,85,217,0.4); } 85% { border-color: rgba(127,232,181,0.8); } 100% { border-color: rgba(58,85,217,0.4); } }

/* ── article page ── */
.tn-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
  background: linear-gradient(90deg, #1428A0, #3A55D9); box-shadow: 0 0 12px rgba(58,85,217,0.7); }
.tn-art-head { max-width: 780px; margin: 0 auto; padding: 56px 28px 0; }
.tn-art-head .kick { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.tn-art-head h1 { font-weight: 500; font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -0.035em;
  line-height: 1.08; margin-bottom: 18px; text-wrap: balance; }
.tn-art-head .byline { display: flex; align-items: center; gap: 10px; }
.tn-art-head .avatar { width: 34px; height: 34px; border-radius: 50%; background: #1428A0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono'; font-size: 12px; font-weight: 600; color: #FAF7F2; flex-shrink: 0; }

.tn-art { max-width: 780px; margin: 0 auto; padding: 8px 28px 30px; }
.tn-art .body { font-size: 16.5px; line-height: 1.75; color: #DCD9D1; }
.tn-art .body > p:first-of-type { font-size: 19px; line-height: 1.65; color: #EFEBE2; }
.tn-art .body p { margin: 0 0 22px; }
.tn-art .body h2 { font-weight: 500; font-size: 27px; letter-spacing: -0.03em; line-height: 1.2;
  color: #FAF7F2; margin: 46px 0 16px; padding-top: 22px; position: relative; }
.tn-art .body h2::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 4px;
  border-radius: 2px; background: #1428A0; }
.tn-art .body h3 { font-weight: 500; font-size: 19.5px; letter-spacing: -0.02em; color: #FAF7F2; margin: 30px 0 10px; }
.tn-art .body a { color: #9DB0F2; border-bottom: 1px solid rgba(58,85,217,0.5); transition: color 150ms, border-color 150ms; }
.tn-art .body a:hover { color: #FAF7F2; border-bottom-color: #FAF7F2; }
.tn-art .body strong { color: #FAF7F2; font-weight: 600; }
.tn-art .body ul, .tn-art .body ol { margin: 0 0 22px; padding-left: 24px; }
.tn-art .body li { margin-bottom: 10px; }
.tn-art .body li::marker { color: #8FA0E8; font-family: 'Geist Mono'; }
.tn-art .body hr { border: none; height: 1px; background: rgba(250,247,242,0.1); margin: 40px 0; }
.tn-art .body em { color: #C5C2BA; }
.tn-art .bio { margin-top: 8px; background: rgba(28,28,34,0.72); border: 1px solid rgba(250,247,242,0.09);
  border-radius: 12px; padding: 22px 24px; font-size: 14.5px; line-height: 1.6; color: #C5C2BA; }
.tn-art .bio strong { color: #FAF7F2; }
.tn-art .bio a { color: #9DB0F2; }

/* pagination (renders only when more than one page) */
.tn-pages { display: flex; align-items: center; justify-content: center; gap: 22px;
  padding: 26px 0 44px; font-family: 'Geist Mono'; font-size: 12px; letter-spacing: 0.05em; }
.tn-pages .pg { color: #8FA0E8; padding: 8px 14px; border: 1px solid rgba(58,85,217,0.4);
  border-radius: 8px; transition: border-color 150ms, color 150ms; }
.tn-pages .pg:hover { border-color: #3A55D9; color: #FAF7F2; }
.tn-pages .pg.off { color: rgba(250,247,242,0.2); border-color: rgba(250,247,242,0.08); cursor: default; }
.tn-pages .pg-info { color: rgba(250,247,242,0.4); }

/* more dispatches */
.tn-more { max-width: 1080px; margin: 0 auto; padding: 40px 28px 70px; }
.tn-more .hd { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.tn-more .hd .rule { flex: 1; height: 1px; background: rgba(250,247,242,0.1); }
.tn-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tn-more-card { display: block; background: rgba(28,28,34,0.6); border: 1px solid rgba(250,247,242,0.08);
  border-radius: 11px; padding: 20px; transition: border-color 180ms ease, transform 180ms ease; }
.tn-more-card:hover { border-color: rgba(58,85,217,0.6); transform: translateY(-2px); }
.tn-more-card h4 { font-weight: 500; font-size: 15.5px; letter-spacing: -0.015em; line-height: 1.3; margin: 10px 0 8px; color: #FAF7F2; }
.tn-more-card .ex { font-size: 12.5px; line-height: 1.5; color: #888785; }
.tn-more-card .tn-read { margin-top: 14px; font-size: 11px; }
@media (max-width: 760px) { .tn-more-grid { grid-template-columns: 1fr; } }

/* ── light (contrast) theme — driven by html.light from site-chrome ── */
html.light, html.light body { background: #FAF7F2; color: #0B0B0F; }
html.light .orb.a { background: rgba(20,40,160,0.10); }
html.light .orb.b { background: rgba(20,40,160,0.07); }
html.light .tn-eyebrow { color: #2438C0; }
html.light .tn-meta { color: rgba(11,11,15,0.45); }
html.light .tn-meta b { color: rgba(11,11,15,0.75); }
html.light .tn-mast, html.light .tn-feat { border-bottom-color: rgba(11,11,15,0.10); }
html.light .tn-mast .dateline .rule, html.light .tn-more .hd .rule { background: rgba(11,11,15,0.12); }
html.light .tn-mast .sub, html.light .tn-feat .stand { color: #44443F; }
html.light .tn-feat h2 a:hover, html.light .tn-row h3 a:hover { color: #1428A0; }
html.light .tn-row { border-bottom-color: rgba(11,11,15,0.08); }
html.light .tn-row:hover { background: rgba(11,11,15,0.03); }
html.light .tn-row .ix { color: rgba(11,11,15,0.18); }
html.light .tn-row .ex, html.light .tn-more-card .ex { color: #66655F; }
html.light .tn-read { color: #2438C0; }
/* covers stay dark — branded panels, like screenshots */
html.light .cover { background: #14141B; border-color: rgba(11,11,15,0.14); box-shadow: 0 18px 44px rgba(11,11,15,0.20); }
html.light .tn-pages .pg { color: #2438C0; border-color: rgba(20,40,160,0.35); }
html.light .tn-pages .pg.off { color: rgba(11,11,15,0.25); border-color: rgba(11,11,15,0.10); }
html.light .tn-pages .pg-info { color: rgba(11,11,15,0.45); }
html.light .tn-art .body { color: #33322E; }
html.light .tn-art .body > p:first-of-type { color: #1A1A1F; }
html.light .tn-art .body h2, html.light .tn-art .body h3, html.light .tn-art .body strong { color: #0B0B0F; }
html.light .tn-art .body a { color: #1428A0; border-bottom-color: rgba(20,40,160,0.35); }
html.light .tn-art .body a:hover { color: #0B0B0F; border-bottom-color: #0B0B0F; }
html.light .tn-art .body em { color: #44443F; }
html.light .tn-art .body hr { background: rgba(11,11,15,0.12); }
html.light .tn-art .bio { background: #FFFFFF; border-color: rgba(11,11,15,0.10); color: #44443F; }
html.light .tn-art .bio strong { color: #0B0B0F; }
html.light .tn-more-card { background: #FFFFFF; border-color: rgba(11,11,15,0.10); }
html.light .tn-more-card h4 { color: #0B0B0F; }