/* story.css: "The colony" editorial style for society.html and discoveries.html.
   Cool paper, deep navy ink, one living canvas. Bricolage Grotesque headlines, Literata body. */
body.story {
  --paper: #F5F7FA; --ink: #14213D; --slate: #5C6B80; --night: #0F1B33; --violet: #6D5BFF; --gold: #F0B44C; --line: #DCE2EA; --soft: #EAEFF5;
  --page: var(--paper); --surface: #FFFFFF; --ink-2: #33415C; --muted: var(--slate); --rule: var(--line); --wash: var(--soft); --axis: #AAB4C3;
  --s1: #3E7BFA; --s2: #12A594; --s3: #6D5BFF; --s4: #E8A33D; --s5: #E5567A; --s6: #2E9E4F; --s7: #8A5CF6; --s8: #D9483B; --good: #12A594; --bad: #D9483B;
  --display: "Geist", system-ui, -apple-system, sans-serif; --read: "Geist", system-ui, -apple-system, sans-serif;
  --sans: var(--display); --serif: var(--read);
  background: var(--paper); color: var(--ink); font: 18.5px/1.7 var(--read); letter-spacing: -0.003em; -webkit-font-smoothing: antialiased;
}
html[data-theme="dark"] body.story, body.story.dark { --paper: #0E1729; --ink: #E8EDF5; --slate: #94A3B8; --line: #26344F; --soft: #16223A; --surface: #121D33; --ink-2: #C9D3E1; }
.story a { color: var(--violet); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.story :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }

/* reading column and breakouts */
.col { max-width: 640px; margin: 0 auto; padding: 0 24px; }
.wide { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.story h2 { font: 600 clamp(32px, 4.2vw, 50px)/1.06 var(--display); letter-spacing: -0.03em; margin: 0 0 22px; }
.story h3 { font: 650 24px/1.2 var(--display); letter-spacing: -0.01em; margin: 40px 0 10px; }
.story p { margin: 0 0 1.05em; }
.lede { font-size: 23px; line-height: 1.55; color: var(--ink-2); }
.small { font: 15px/1.5 var(--display); color: var(--slate); }
.chapter { padding-top: 120px; padding-bottom: 40px; }

/* hero: the colony at night */
.hero { position: relative; height: min(100svh, 1000px); min-height: 620px; background: var(--night); color: #fff; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .over { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 24px 64px; pointer-events: none; }
.hero h1 { color: #fff; font: 600 clamp(42px, 6.8vw, 92px)/0.98 var(--display); letter-spacing: -0.04em; margin: 0 0 22px; max-width: 13ch; }
.hero .sub { font: 400 21px/1.5 var(--read); color: #C8D3E6; max-width: 34em; margin: 0; }
.hero .clock { position: absolute; top: 88px; right: 32px; text-align: right; font: 600 15px/1.35 var(--display); color: #9FB0CC; pointer-events: none; }
.hero .clock b { display: block; font: 700 44px/1 var(--display); color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.legend-dots { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 14px/1.4 var(--display); color: #AFC0D9; margin-top: 18px; }
.legend-dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; box-shadow: 0 0 10px currentColor; }

/* scrollytelling: text steps scroll past a pinned colony */
.scrolly { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.stage { position: sticky; top: 72px; height: min(calc(100vh - 96px), 860px); border-radius: 22px; background: var(--night); overflow: hidden; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .cap { position: absolute; left: 22px; bottom: 18px; right: 22px; color: #C8D3E6; font: 15px/1.4 var(--display); }
.stage .cap b { color: #fff; font-size: 30px; display: block; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.beats { padding: min(30vh, 280px) 0 min(40vh, 380px); }
.beat { min-height: min(72vh, 700px); display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .5s ease; }
.beat.on { opacity: 1; }
.beat .when { font: 600 15px var(--display); color: var(--violet); margin-bottom: 8px; }
.beat h3 { margin-top: 0; font-size: 32px; line-height: 1.12; }
.beat blockquote { margin: 18px 0 0; padding: 0 0 0 18px; border-left: 3px solid var(--gold); font-style: italic; color: var(--ink-2); }
.beat blockquote cite { display: block; font: normal 14px var(--display); color: var(--slate); margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .beat { opacity: 1; } }

/* moments: a single column timeline */
.moments2 { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.moments2 li { position: relative; padding: 0 0 34px 28px; }
.moments2 li::before { content: ""; position: absolute; left: -7px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--violet); }
.moments2 .d { font: 600 15px var(--display); color: var(--slate); }
.moments2 h4 { font: 650 22px/1.25 var(--display); margin: 2px 0 6px; }
.moments2 p { margin: 0; color: var(--ink-2); }

/* the chat replay */
.chat { display: grid; grid-template-columns: 300px 1fr; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line), 0 30px 60px -40px rgba(20, 33, 61, .35); overflow: hidden; min-height: 600px; }
.chat .list { background: var(--soft); padding: 16px 10px; overflow-y: auto; max-height: 640px; }
.chat .list button { display: block; width: 100%; text-align: left; border: 0; background: none; font: 500 15.5px/1.35 var(--display); color: var(--ink-2); padding: 10px 12px; border-radius: 12px; cursor: pointer; }
.chat .list button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 33, 61, .08); }
.chat .room { display: flex; flex-direction: column; min-width: 0; }
.chat .top { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.chat .top b { font: 650 18px/1.3 var(--display); }
.chat .feed { padding: 20px 24px; overflow-y: auto; max-height: 560px; flex: 1; }
.bub { display: grid; grid-template-columns: 36px 1fr; gap: 12px; margin-bottom: 16px; animation: bub .4s ease both; }
@keyframes bub { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .bub { animation: none; } }
.bub .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--display); color: #14213D; }
.bub .nm { font: 650 15px var(--display); }
.bub .nm span { font-weight: 400; color: var(--slate); margin-left: 8px; font-size: 13.5px; }
.bub .tx { font: 16.5px/1.55 var(--read); color: var(--ink-2); background: var(--soft); border-radius: 4px 16px 16px 16px; padding: 10px 14px; margin-top: 4px; overflow-wrap: anywhere; }
.typing { font: 14px var(--display); color: var(--slate); }
.pill { font: 600 14px var(--display); border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.pill.dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* numbers inside prose */
.fact { font: 600 clamp(42px, 5.6vw, 72px)/1 var(--display); letter-spacing: -0.03em; color: var(--ink); margin: 34px 0 6px; font-variant-numeric: tabular-nums; }
.factline { margin-bottom: 30px; color: var(--ink-2); }

/* the word machine */
.word { background: var(--night); color: #fff; border-radius: 22px; padding: 46px 44px 34px; min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; }
.word .w { font: 600 clamp(46px, 7.5vw, 100px)/1 var(--display); letter-spacing: -0.03em; word-break: break-word; }
.word .w .cur { display: inline-block; width: .06em; background: var(--gold); margin-left: .05em; animation: blink 1s steps(1) infinite; height: .8em; vertical-align: baseline; }
@keyframes blink { 50% { opacity: 0; } }
.word .m { font: 21px/1.5 var(--read); color: #C8D3E6; max-width: 34em; margin-top: 18px; }
.word .row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 26px; font: 14.5px var(--display); color: #9FB0CC; }
.word .row button { background: #fff; color: var(--night); border: 0; border-radius: 999px; font: 650 14px var(--display); padding: 9px 18px; cursor: pointer; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin: 18px 0; border-top: 1px solid var(--line); }
.pair > div { padding: 16px 18px 16px 0; }
.pair .said { font: 14.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); overflow-wrap: anywhere; }
.pair .meant { font: 18px/1.6 var(--read); color: var(--ink-2); padding-left: 18px; border-left: 1px solid var(--line); }
.gloss { list-style: none; padding: 0; margin: 0; }
.gloss li { display: grid; grid-template-columns: 210px minmax(0, 1fr) 110px; gap: 18px; padding: 12px 0; border-top: 1px solid var(--line); align-items: baseline; }
.gloss b { font: 650 18px var(--display); }
.gloss span { color: var(--ink-2); font-size: 17px; }
.gloss .spark { justify-self: end; }
.search2 { font: 16px var(--display); padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); width: 100%; max-width: 360px; margin: 10px 0 14px; }

/* flow of work */
.flow2 { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 30px 0; }
.flow2 .n { position: relative; z-index: 1; background: var(--surface); border-radius: 16px; padding: 16px 14px; box-shadow: 0 1px 0 var(--line); }
.flow2 .n b { display: block; font: 650 17px var(--display); margin-bottom: 4px; }
.flow2 .n span { font: 14px/1.45 var(--display); color: var(--slate); }
.flow2 .n.lit { box-shadow: 0 0 0 2px var(--violet); }
.flow2 .track { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: var(--line); }
.flow2 .packet { position: absolute; top: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 12px var(--violet); transition: left .7s ease; }

/* mission ticker */
.ticker { border-radius: 22px; background: var(--surface); box-shadow: 0 1px 0 var(--line); overflow: hidden; }
.ticker .tk { display: grid; grid-template-columns: 96px 1fr 120px; gap: 16px; padding: 14px 22px; border-top: 1px solid var(--line); font: 15.5px/1.45 var(--display); align-items: baseline; }
.ticker .tk:first-child { border-top: 0; }
.ticker .tk .t { color: var(--slate); }
.ticker .tk .o { color: var(--slate); font-size: 14px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }

.netbox { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 30px; align-items: center; background: var(--night); border-radius: 22px; padding: 18px 26px; color: #C8D3E6; }
body.story { overflow-x: clip; }
.cast { list-style: none; padding: 0; margin: 0; }
.cast li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 17px; color: var(--ink-2); }
.cast .handle, .log .who { font: 600 15px var(--mono, ui-monospace), monospace; }
.log { background: var(--night); border-radius: 14px; padding: 14px 16px; margin-top: 18px; font: 14px/1.55 "Geist Mono", ui-monospace, monospace; color: #C8D3E6; }
.log .ln + .ln { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #2A3A5A; }
.log .ts { color: #7F8DA6; }
.log .lmsg { color: #EAF0F8; margin-top: 2px; }
/* figures reused from the old pages */
.figure { margin: 46px auto; }
.figure .fcap { font: 14.5px/1.5 var(--display); color: var(--slate); margin-top: 10px; }
.story .treepanel, .story .squad, .story .fork, .story .disc { border-radius: 18px; border-color: var(--line); }
.story .c-sec { max-width: 1080px; }
.story .stackc .ax { font-family: var(--display); }

@media (max-width: 900px) {
  .scrolly { grid-template-columns: 1fr; gap: 0; }
  .stage { top: 60px; height: 42vh; z-index: 0; }
  .beats { padding: 4vh 0 30vh; position: relative; z-index: 1; }
  .beat { min-height: 60vh; }
  .beat > div { background: color-mix(in srgb, var(--paper) 92%, transparent); border-radius: 16px; padding: 18px; }
  .chat { grid-template-columns: 1fr; } .chat .list { max-height: 210px; }
  .pair, .gloss li { grid-template-columns: 1fr; } .pair .meant { border-left: 0; padding-left: 0; }
  .flow2 { grid-template-columns: 1fr 1fr; } .flow2 .track, .flow2 .packet { display: none; }
  .ticker .tk { grid-template-columns: 1fr; gap: 2px; }
  .hero .clock { top: 24px; right: 18px; } .hero .clock b { font-size: 30px; }
  .netbox { grid-template-columns: 1fr; padding: 14px; }
  .hero .over { padding-bottom: 36px; } .hero .sub { font-size: 18px; }
}

/* discoveries */
.dhero { background: radial-gradient(120% 90% at 85% 10%, #1B2B52 0%, var(--night) 60%); }
.dhero .smgrid { position: absolute; right: 4vw; top: 50%; transform: translateY(-58%); display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(4px, .6vw, 9px); width: min(46vw, 620px); }
.dhero .smgrid i { aspect-ratio: 1; border-radius: 22%; background: #20335C; animation: smwave 1.6s cubic-bezier(.2,.7,.2,1) var(--d) both; }
@keyframes smwave { 0% { background: #20335C; box-shadow: none; } 35% { background: #F0B44C; box-shadow: 0 0 18px rgba(240,180,76,.7); } 100% { background: #4C5FD6; box-shadow: 0 0 6px rgba(109,91,255,.25); } }
.dhero .smnote { position: absolute; right: 4vw; top: calc(50% + min(23vw, 310px) - 4%); width: min(46vw, 620px); text-align: right; font: 14px/1.4 var(--display); color: #8FA2C4; }
.dhero h1 { max-width: 12ch; }
.dhero .over .wide { padding: 0; }
@media (prefers-reduced-motion: reduce) { .dhero .smgrid i { animation: none; background: #4C5FD6; } }
.dintro { padding-top: 90px; }
.dfound { padding-top: 20px; }
.dstep .when { font: 600 15px var(--display); }
.dstep .kind-novel { color: #12A594; } .dstep .kind-known { color: var(--violet); } .dstep .kind-meas { color: #C77A10; }
.dgain { font: 750 clamp(56px, 7vw, 92px)/1 var(--display); letter-spacing: -0.035em; margin: 6px 0 14px; font-variant-numeric: tabular-nums; }
.dgain.nogain { font-size: 30px; letter-spacing: -0.01em; color: var(--slate); }
.dline { font-size: 22px; line-height: 1.5; color: var(--ink); }
.ddetails { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 17.5px; color: var(--ink-2); }
.dstep .pill { margin-top: 4px; }
.dstage { position: sticky; top: 72px; height: calc(100vh - 96px); }
.dslide { position: absolute; inset: 0; background: var(--surface); border-radius: 22px; box-shadow: 0 1px 0 var(--line), 0 40px 80px -50px rgba(20,33,61,.45); padding: 30px 34px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: scale(.985); transition: opacity .55s ease, transform .55s ease; pointer-events: none; overflow: hidden; }
.dslide.on { opacity: 1; transform: none; pointer-events: auto; }
.dslide .dcount { font: 600 14px var(--display); color: var(--slate); }
.dslide .dname { font: 700 26px/1.15 var(--display); letter-spacing: -0.015em; margin: 4px 0 18px; }
.dslide .vis.big { border: 0; background: var(--paper); border-radius: 16px; padding: 22px; margin-bottom: 18px; }
.dslide .vis.big svg { display: block; max-height: 42vh; }
.dslide .dspec { font: 18px/1.6 var(--read); color: var(--ink-2); }
.dslide .ba { font: 14px var(--display); }
.dslide .ba .bars { height: 28px; }
.dslide .ba .b0, .dslide .ba .b1 { height: 12px; transition: width 1s cubic-bezier(.2,.7,.2,1) .15s; }
.dprog { position: absolute; left: 0; right: 0; bottom: -18px; display: flex; gap: 5px; justify-content: center; }
.dprog i { width: 18px; height: 4px; border-radius: 2px; background: var(--line); transition: background .3s; }
.dprog i.past { background: #B8C2D3; } .dprog i.on { background: var(--violet); width: 30px; }
.dmobile { display: none; }
.dkilled { padding-top: 110px; }
.dkilled ul { padding-left: 1.1em; margin: 0; }
.dkilled li { margin-bottom: 14px; }
.story .tree .era { font: 650 13px var(--display); text-transform: none; letter-spacing: 0; fill: var(--ink-2); }
.story .tree text { font-family: var(--display); }
.story .treepanel { font: 16px/1.55 var(--display); }
.story .chip { font: 550 14px var(--display); padding: 7px 14px; }
.story .cat-t { font: 15px var(--display); }
.story .cat-t th { font: 650 14px var(--display); text-transform: none; letter-spacing: 0; color: var(--slate); }
.forks2 { list-style: none; padding: 0; margin: 0; }
.forks2 li { padding: 26px 0; border-top: 1px solid var(--line); }
.forks2 .fd { font: 600 15px var(--display); color: var(--violet); }
.forks2 h3 { margin: 4px 0 12px; font-size: 24px; }
.forks2 .opt { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font: 17px/1.5 var(--read); color: var(--ink-2); margin: 8px 0; }
.forks2 .opt.tk { color: var(--ink); }
.forks2 .opt .taken { font: italic 15px var(--read); color: var(--violet); }
.forks2 .opt .res { font-size: 15.5px; color: var(--slate); }
@media (max-width: 900px) {
  .dhero .smgrid { right: 50%; transform: translate(50%, -95%); width: 84vw; opacity: .55; }
  .dhero .smnote { display: none; }
  .dfound .scrolly { display: block; }
  .dstage { display: none; }
  .dmobile { display: block; margin: 8px 0 16px; }
  .dmobile .vis { background: var(--surface); border-radius: 16px; padding: 14px; border: 0; }
  .dstep { opacity: 1; min-height: 0; padding: 40px 0; border-top: 1px solid var(--line); }
  .dstep > div { background: none; padding: 0; }
  .dfound .beats { padding: 0; }
}
.dhero { height: min(100svh, 900px); }
.dhero h1 { color: #fff; font-size: clamp(42px, 5.6vw, 84px); max-width: 10ch; }
.dhero .over .wide { max-width: 1240px; }
.dhero .over h1, .dhero .over .sub { max-width: min(48vw, 640px); }
.dhero .sub { color: #C8D3E6; }
.story .bar a { color: inherit; text-decoration: none; }
@media (max-width: 900px) { .dhero .over h1, .dhero .over .sub { max-width: none; } }
.dhero h1 { font-size: clamp(40px, 4.9vw, 74px); }
.dhero .over h1, .dhero .over .sub { max-width: min(44vw, 600px); }
.dfound .step.dstep { min-height: 86vh; justify-content: center; padding: 60px 0; }
.dstep .when { margin-bottom: 10px; }
.dstep h3 { font-size: 34px; }
.dstep p { font-size: 18px; line-height: 1.7; }
.dstep .dline { font-size: 22px; }
.dstage { top: 92px; height: calc(100vh - 130px); }
.dslide { justify-content: flex-start; padding-top: 40px; }
@media (max-width: 900px) {
  .dhero { height: auto; min-height: 0; padding: 40px 0 48px; }
  .dhero .smgrid { position: relative; right: auto; top: auto; transform: none; width: auto; margin: 0 24px 28px; opacity: 1; gap: 4px; }
  .dhero .over { position: relative; padding: 0 24px; }
  .dhero .over h1, .dhero .over .sub { max-width: none; }
  .dhero .sub { font-size: 18px; }
}

/* discoveries: chapters and sealed findings (owner 11-05) */
.dchap { padding-top: 110px; }
.chnum { font: 600 15px var(--display); color: var(--violet); margin-bottom: 6px; }
.dfound, .dscrolly { margin-top: 10px; }
.dchap .beat.dstep { min-height: 80vh; justify-content: center; padding: 60px 0; }
.dchap .beats { padding: 6vh 0 18vh; }
.sealgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 18px; }
.sealed { position: relative; overflow: hidden; background: var(--night); color: #C8D3E6; border-radius: 18px; padding: 20px 20px 18px; min-height: 230px; display: flex; flex-direction: column; gap: 10px; }
.sealed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.07) 45%, transparent 60%); transform: translateX(-100%); animation: sealshine 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes sealshine { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sealed::after { animation: none; display: none; } }
.sealed .stamp { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font: 650 12.5px var(--display); letter-spacing: .02em; color: #F0B44C; border: 1.5px solid #F0B44C; border-radius: 6px; padding: 3px 8px; transform: rotate(-2deg); }
.sealed .redact { display: grid; gap: 7px; }
.sealed .redact i { display: block; height: 13px; border-radius: 3px; background: #24365C; }
.sealed .redact.thin i { height: 9px; background: #1D2D4E; }
.sealed .sgain { font: 650 44px/1 var(--display); letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; margin-top: 4px; }
.sealed .sgain.none { font-size: 28px; }
.sealed .swhere { font: 15px var(--display); color: #AFC0D9; margin-top: -4px; }
.sealed .sfoot { margin-top: auto; font: 13px var(--display); color: #8FA2C4; }
.dteaser { padding: 110px 0 120px; }
@media (max-width: 900px) { .dchap .beat.dstep { min-height: 0; } }
.dchap .dstage { height: min(calc(100vh - 130px), 760px); }
.dchap .beat.dstep { min-height: min(80vh, 760px); }
.dchap .beats { padding: min(6vh, 60px) 0 min(18vh, 160px); }