/* Genetic-story slides — ported from comt_story_northstar.html, scoped under
   .ig-slide so it never collides with the page's own h1/h2/.lead, and
   accent-themed per story via --accent / --accent2 (set inline by story.js). */

.ig{display:flex;flex-direction:column;gap:16px;align-items:center;width:100%}

.ig-slide{
  --accent:#33e1ff; --accent2:#5b8cff;
  position:relative;width:100%;max-width:430px;aspect-ratio:9/16;
  background:radial-gradient(120% 80% at 50% -10%, #0f1722 0%, var(--bg) 55%, #04060a 100%);
  border:1px solid var(--line);border-radius:22px;overflow:hidden;
  padding:54px 38px;display:flex;flex-direction:column;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9);
}
.ig-slide::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:34px 34px;mask-image:radial-gradient(circle at 50% 35%,#000 30%,transparent 85%);pointer-events:none}
.ig-slide::after{content:"";position:absolute;width:520px;height:520px;right:-180px;bottom:-200px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 68%);opacity:.5;pointer-events:none}

.ig-slide .top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.ig-slide .top .tag{color:var(--accent)}
.ig-slide .body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px}
.ig-slide .foot{position:relative;z-index:2;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:#5a6678;text-transform:uppercase}

.ig-slide h1{font-family:var(--disp);font-weight:400;line-height:.92;letter-spacing:.01em;font-size:clamp(40px,12vw,58px);text-transform:uppercase}
.ig-slide h1 .hl{background:linear-gradient(180deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ig-slide h2{font-family:var(--disp);font-weight:400;line-height:.92;font-size:clamp(34px,10vw,50px);text-transform:uppercase}
.ig-slide h2 .hl{background:linear-gradient(180deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ig-slide .lead{font-size:18px;line-height:1.5;color:#c3cedb;font-weight:500}
.ig-slide .lead b{color:#fff;font-weight:800}
.ig-slide .lead.muted{color:var(--muted)}
.ig-slide .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ig-slide .rule{width:46px;height:3px;background:var(--accent);border-radius:3px}
.ig-slide .genechip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:8px 13px;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent)}
.ig-slide .tap{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase}
.ig-slide .big{font-family:var(--disp);font-size:clamp(52px,16vw,80px);line-height:.9;color:var(--accent);text-transform:uppercase}
.ig-slide .big small{font-size:.42em;color:#fff;vertical-align:.18em}
.ig-slide .stack{display:flex;flex-direction:column;gap:6px;font-family:var(--disp);font-size:clamp(24px,7.5vw,32px);line-height:1.05;text-transform:uppercase;color:#dfe7f0}
.ig-slide .stack .hl{color:var(--accent)}

.ig-slide .card{position:relative;border-radius:16px;border:1px solid var(--line);background:var(--panel);padding:18px 18px 20px;border-left-width:4px;border-left-color:var(--accent)}
.ig-slide .card .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.ig-slide .card .ico{font-size:22px;margin-bottom:8px}
.ig-slide .card .name{font-family:var(--disp);font-size:28px;text-transform:uppercase;margin:3px 0 8px;color:var(--accent)}
.ig-slide .card p{font-size:13px;line-height:1.45;color:#aab6c4}
.ig-slide .card.gold{border-left-color:var(--gold)} .ig-slide .card.gold .name{color:var(--gold)}
.ig-slide .card.purple{border-left-color:var(--purple)} .ig-slide .card.purple .name{color:var(--purple)}
.ig-slide .card.green{border-left-color:var(--green)} .ig-slide .card.green .name{color:var(--green)}
.ig-slide .card.cyan{border-left-color:var(--cyan)} .ig-slide .card.cyan .name{color:var(--cyan)}
.ig-slide .me{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;background:var(--accent);color:#0a0e15;padding:2px 7px;border-radius:5px;vertical-align:middle;margin-left:8px}

.ig-slide ol{list-style:none;display:flex;flex-direction:column;gap:13px}
.ig-slide ol li{display:flex;gap:14px;align-items:baseline;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:12px}
.ig-slide ol li:last-child{border-bottom:none}
.ig-slide ol .n{font-family:var(--mono);font-weight:700;font-size:14px;min-width:24px}
.ig-slide ol .t{font-size:15px;line-height:1.35;color:#dde5ee;font-weight:600}
.ig-slide ol .t span{color:var(--muted);font-weight:400}
.ig-slide ol.up .n{color:var(--green)} .ig-slide ol.down .n{color:var(--red)}
.ig-slide .quote{margin-top:6px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent);
  padding:14px 16px;border-radius:0 10px 10px 0;font-style:italic;font-size:15px;color:#dfe7f0;line-height:1.45}
.ig-slide .quote.red{border-color:var(--red);background:rgba(255,107,134,.06)}

.ig-slide .cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ig-slide .col{border-radius:14px;border:1px solid var(--line);background:var(--panel);padding:15px 13px}
.ig-slide .col h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:13px}
.ig-slide .col.amp{border-top:3px solid var(--green)} .ig-slide .col.amp h4{color:var(--green)}
.ig-slide .col.cut{border-top:3px solid var(--red)} .ig-slide .col.cut h4{color:var(--red)}
.ig-slide .col .item{margin-bottom:12px}
.ig-slide .col .item b{display:block;font-size:14px;color:#eaf0f6;font-weight:700}
.ig-slide .col .item span{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:#6b7686;text-transform:uppercase}

/* CTA / brand slide */
.ig-slide.cta{justify-content:center;text-align:center;align-items:center}
.ig-slide.cta .body{align-items:center}
.ig-slide.cta .sun{width:54px;height:54px;border-radius:50%;margin:0 auto 18px;
  background:radial-gradient(circle at 50% 40%, #ffe39a, var(--helios) 55%, #c8862a 100%);box-shadow:0 0 50px 6px rgba(245,196,81,.45)}
.ig-slide.cta .big-claim{font-family:var(--disp);font-size:clamp(32px,10vw,44px);line-height:.96;text-transform:uppercase;margin:4px 0}
.ig-slide.cta .sub{font-size:16px;color:#c3cedb;line-height:1.5;max-width:300px;margin:0 auto}
.ig-slide.cta .sub b{color:#fff}
.ig-slide.cta .mark{font-family:var(--disp);font-size:34px;letter-spacing:.06em;margin-top:8px;
  background:linear-gradient(180deg,var(--helios),#e0a83a);-webkit-background-clip:text;background-clip:text;color:transparent}
.ig-slide.cta .eng{margin-top:14px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:#5a6678;text-transform:uppercase}

/* reveal on scroll */
.ig-slide .body > *{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.ig-slide.in .body > *{opacity:1;transform:none}
.ig-slide.in .body > *:nth-child(2){transition-delay:.08s}
.ig-slide.in .body > *:nth-child(3){transition-delay:.16s}
.ig-slide.in .body > *:nth-child(4){transition-delay:.24s}
.ig-slide.in .body > *:nth-child(5){transition-delay:.32s}

/* story controls */
.storypick{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}
.storypick .gene-opt{font-family:var(--mono);font-size:12px;letter-spacing:.04em;cursor:pointer;
  border:1px solid var(--line);background:var(--panel2);color:#c3cedb;padding:9px 13px;border-radius:9px;transition:all .15s}
.storypick .gene-opt:hover{border-color:var(--cyan);color:var(--cyan)}
.storypick .gene-opt.active{border-color:var(--cyan);background:rgba(51,225,255,.1);color:var(--cyan)}
.storyloading{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center;padding:30px 0;line-height:1.8}