:root{
    --accent:#9f00a7;            /* MoA magenta */
    --accent-2:#ff4db8;
    --maxw:1200px;
    --r:18px;
  }
  html[data-theme="light"]{
    --bg:#fbfbfa; --bg-2:#ffffff;
    --ink:#111113; --ink-2:#5d5d62; --ink-3:#8a8a90;
    --line:#e7e7e9; --line-2:#111113;
    --card:#ffffff; --card-2:#f5f4f6;
    --tag-line:#dcdce0;
    --accent:#9f00a7; --accent-soft:#9f00a710; --accent-line:#9f00a733;
    --cube-1:var(--accent); --cube-2:#15151a; --cube-3:#c9c9d0;
    --glow:#9f00a712; --mesh-1:#9f00a70e; --mesh-2:#ff4db80a;
    --shadow:0 1px 2px #0000000a,0 14px 40px -22px #00000026;
  }
  html[data-theme="dark"]{
    --bg:#0a0a0c; --bg-2:#0f0f12;
    --ink:#f3f1ee; --ink-2:#a3a09a; --ink-3:#6f6d70;
    --line:#222226; --line-2:#f3f1ee;
    --card:#141416; --card-2:#1a1a1e;
    --tag-line:#33333a;
    --accent:#e561ec; --accent-soft:#e561ec14; --accent-line:#e561ec33;
    --cube-1:var(--accent); --cube-2:#f3f1ee; --cube-3:#56565e;
    --glow:#e561ec18; --mesh-1:#9f00a720; --mesh-2:#ff4db814;
    --shadow:0 1px 2px #00000040,0 18px 50px -26px #00000099;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:"Schibsted Grotesk",-apple-system,system-ui,sans-serif;
    font-size:17.5px; line-height:1.62; letter-spacing:-.005em;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    transition:background .4s ease, color .4s ease;
    overflow-x:hidden;
  }
  /* ambient mesh background */
  body::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(60vw 50vw at 78% -8%, var(--mesh-1), transparent 60%),
      radial-gradient(50vw 50vw at 8% 12%, var(--mesh-2), transparent 55%);
    transition:opacity .4s ease;
  }
  /* ambient connecting-blocks background */
  #bg{position:fixed; inset:0; z-index:0; pointer-events:none; display:block;}
  main.shell, header.bar{position:relative; z-index:1;}
  header.bar{z-index:60;}
  .mono{font-family:"IBM Plex Mono",ui-monospace,monospace;}
  .guille{color:var(--accent); font-weight:700;}
  a{color:inherit; text-decoration:none;}
  ::selection{background:var(--accent); color:#fff;}

  /* progress bar */
  #progress{position:fixed; top:0; left:0; height:2px; width:0;
    background:linear-gradient(90deg,var(--accent),var(--accent-2)); z-index:90; transition:width .1s linear;}

  /* ---------- top bar ---------- */
  header.bar{
    position:sticky; top:0; z-index:60;
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px);
    border-bottom:1px solid var(--line);
  }
  .bar-in{max-width:var(--maxw); margin:0 auto; padding:14px 22px 12px;}
  .bar-row{display:flex; align-items:center; justify-content:space-between; gap:18px;}
  .brand{display:flex; align-items:center; gap:12px; min-width:0;}
  .brand .wm{font-weight:700; letter-spacing:-.02em; white-space:nowrap;}
  .brand .ey{display:block; font-size:11.5px; color:var(--ink-2); letter-spacing:.04em; margin-top:-2px;}
  .navlinks{display:flex; flex-wrap:wrap; gap:7px 6px; margin-top:11px;
    border-top:1px solid var(--line); padding-top:11px;}
  .navlinks a{font-size:14.5px; color:var(--ink-2); padding:8px 16px; border-radius:11px;
    transition:.18s; letter-spacing:-.005em;}
  .navlinks a:hover{color:var(--ink); background:var(--accent-soft);}
  .navlinks a.active{color:var(--accent); background:var(--accent-soft);}
  .ctrls{display:flex; gap:8px; align-items:center;}
  .seg{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
  .seg button{font-family:inherit; font-size:12px; font-weight:600; letter-spacing:.03em;
    background:transparent; color:var(--ink-2); border:0; padding:7px 9px; cursor:pointer; transition:.18s;}
  .seg button.on{background:var(--accent); color:#fff;}
  .seg button:hover:not(.on){color:var(--ink); background:var(--accent-soft);}
  .toggle{font-family:"IBM Plex Mono",monospace; font-size:12px; cursor:pointer;
    display:flex; align-items:center; gap:7px; padding:7px 11px; border-radius:10px;
    border:1px solid var(--line); background:transparent; color:var(--ink-2); transition:.18s;}
  .toggle:hover{color:var(--ink); border-color:var(--accent-line);}
  .toggle .dot{width:9px; height:9px; border-radius:50%; background:var(--accent);
    box-shadow:0 0 0 3px var(--accent-soft);}
  .menu-btn{display:none;}

  main.shell{max-width:var(--maxw); margin:0 auto; padding:0 22px 120px;}
  section{padding-top:74px; scroll-margin-top:74px;}

  /* ---------- hero ---------- */
  .hero{padding-top:60px;}
  .heroflex{display:grid; grid-template-columns:1.55fr .85fr; gap:30px; align-items:center;}
  .eyebrow{font-size:13px; color:var(--ink-2); letter-spacing:.02em; margin:0 0 18px;}
  .eyebrow b{color:var(--ink);}
  h1{font-size:clamp(40px,7.4vw,86px); line-height:.96; letter-spacing:-.035em;
    font-weight:800; margin:0 0 22px;}
  .subtitle{font-size:clamp(19px,2.4vw,25px); color:var(--ink); font-weight:600; margin:0 0 14px; letter-spacing:-.02em;}
  .statement{font-size:18.5px; color:var(--ink-2); max-width:48ch; margin:0;}
  .statement b{color:var(--ink); font-weight:600;}
  .hl{color:var(--accent); font-weight:600;}
  .cluster{width:100%; max-width:320px; justify-self:center; filter:drop-shadow(0 24px 50px var(--glow));}
  .cluster use{animation:float 7s ease-in-out infinite;}
  .cluster use:nth-child(2){animation-delay:.5s} .cluster use:nth-child(3){animation-delay:1s} .cluster use:nth-child(4){animation-delay:1.5s}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  @media (prefers-reduced-motion:reduce){.cluster use{animation:none}}

  .facts{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:48px;
    border-top:1px solid var(--line); padding-top:26px;}
  .fact .n{display:block; font-size:27px; font-weight:600; color:var(--ink); letter-spacing:-.02em;}
  .fact .l{display:block; font-size:11.5px; color:var(--ink-2); letter-spacing:.06em; text-transform:uppercase; margin-top:3px;}

  /* ---------- section label ---------- */
  .seclabel{display:flex; align-items:baseline; gap:16px; margin-bottom:30px; flex-wrap:wrap;}
  .tag{font-size:12px; color:#fff; background:var(--accent); padding:4px 9px; border-radius:7px; letter-spacing:.04em;}
  .seclabel h2{font-size:clamp(26px,3.6vw,38px); margin:0; font-weight:700; letter-spacing:-.025em;}
  .seclabel .count{font-size:12.5px; color:var(--ink-2); margin-left:auto; letter-spacing:.03em;}
  .lead{font-size:19px; color:var(--ink-2); max-width:68ch; margin:-12px 0 30px;}
  .lead b{color:var(--ink); font-weight:600;}

  /* ---------- generic cards ---------- */
  .card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);}

  /* phases / organizers grids */
  .grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  .phase{padding:22px;}
  .phase .pn{font-size:12px; color:var(--accent); letter-spacing:.05em; margin-bottom:9px;}
  .phase h3{margin:0 0 8px; font-size:18px; letter-spacing:-.02em;}
  .phase p{margin:0; font-size:14.5px; color:var(--ink-2);}
  .org{padding:20px; display:flex; flex-direction:column; gap:6px;}
  .org .role{font-size:12px; color:var(--accent); letter-spacing:.04em;}
  .org .nm{font-weight:600; font-size:17px;}
  .org p{margin:2px 0 0; font-size:14px; color:var(--ink-2);}

  /* clusters */
  .clusters{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  .clus{padding:26px; position:relative; overflow:hidden;}
  .clus .yr{font-size:12px; color:var(--accent); letter-spacing:.05em;}
  .clus h3{margin:6px 0 6px; font-size:22px; letter-spacing:-.02em;}
  .clus .de{font-size:13px; color:var(--ink-3); margin:0 0 12px; font-style:italic;}
  .clus p{margin:0 0 14px; font-size:15px; color:var(--ink-2);}
  .chips{display:flex; flex-wrap:wrap; gap:7px;}
  .chip{font-size:11.5px; color:var(--ink-2); border:1px solid var(--tag-line); padding:3px 9px; border-radius:20px;}
  .master{margin-top:18px; padding:26px; display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:start;}
  .master .big{font-size:46px; font-weight:800; color:var(--accent); line-height:1; letter-spacing:-.03em;}
  .master h3{margin:0 0 8px; font-size:20px;}
  .master p{margin:0; font-size:15px; color:var(--ink-2); max-width:70ch;}

  /* invited */
  .invited{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .igroup{padding:20px;}
  .igroup .gt{font-weight:600; font-size:16px; margin-bottom:4px;}
  .igroup .gc{font-size:12px; color:var(--accent); letter-spacing:.04em; margin-bottom:10px;}
  .igroup p{margin:0; font-size:14px; color:var(--ink-2);}
  .privacy{font-size:13px; color:var(--ink-3); margin-top:16px; display:flex; gap:9px; align-items:flex-start;}
  .privacy svg{flex:none; margin-top:3px;}

  /* ---------- thesis / spectrum ---------- */
  .root{padding:30px; margin-bottom:22px; display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;}
  .root .radix{text-align:center;}
  .root .radix .w{font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1;}
  .root .radix .ipa{font-size:13px; color:var(--ink-2); margin-top:4px;}
  .root .radix .mean{font-size:12px; color:var(--accent); letter-spacing:.06em; text-transform:uppercase; margin-top:8px;}
  .root blockquote{margin:0; font-size:19px; color:var(--ink); line-height:1.5; letter-spacing:-.01em;}
  .root blockquote b{color:var(--accent);}

  .spectrum{margin-top:8px;}
  .spectrum .tabs{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:0;}
  .spectrum .tabs button{font-family:inherit; cursor:pointer; border:0; background:var(--card);
    padding:16px 14px; text-align:left; border-right:1px solid var(--line); transition:.2s; color:var(--ink-2);}
  .spectrum .tabs button:last-child{border-right:0;}
  .spectrum .tabs button .k{font-size:11px; letter-spacing:.05em; text-transform:uppercase; display:block; color:var(--ink-3);}
  .spectrum .tabs button .t{font-size:16px; font-weight:600; color:var(--ink); display:block; margin-top:3px; letter-spacing:-.01em;}
  .spectrum .tabs button.on{background:var(--accent); color:#fff;}
  .spectrum .tabs button.on .k,.spectrum .tabs button.on .t{color:#fff;}
  .spectrum .tabs button:hover:not(.on){background:var(--accent-soft);}
  .spectrum .panel{border:1px solid var(--line); border-top:0; border-radius:0 0 14px 14px; padding:24px; background:var(--card-2);}
  .spectrum .panel .viz{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
  .spectrum .panel .disc{font-size:12px; padding:5px 11px; border-radius:8px; border:1px solid var(--accent-line); color:var(--ink);}
  .spectrum .panel p{margin:0; font-size:16px; color:var(--ink-2); max-width:74ch;}
  .spectrum .panel .verdict{margin-top:14px; font-size:14px; color:var(--accent); font-weight:600;}

  .chars{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px;}
  .char{padding:18px; border-left:2px solid var(--accent);}
  .char h4{margin:0 0 5px; font-size:15px; letter-spacing:-.01em;}
  .char p{margin:0; font-size:13.5px; color:var(--ink-2);}

  /* ---------- key takeaways ---------- */
  .takeaways{display:flex; flex-direction:column; gap:16px;}
  .take{display:grid; grid-template-columns:auto 1fr; gap:24px; padding:26px 28px;}
  .take .tk-num{font-size:34px; font-weight:800; color:var(--accent); line-height:1; letter-spacing:-.03em; opacity:.9;}
  .take .tk-head{display:flex; gap:12px; align-items:baseline; margin-bottom:9px; flex-wrap:wrap;}
  .take .tk-tag{font-size:11px; color:#fff; background:var(--accent); padding:3px 9px; border-radius:6px; letter-spacing:.04em;}
  .take .tk-src{font-size:11px; color:var(--ink-3); letter-spacing:.03em;}
  .take h3{margin:0 0 10px; font-size:21px; letter-spacing:-.02em; line-height:1.22;}
  .take p{margin:0; font-size:15.5px; color:var(--ink-2);}
  .take blockquote{margin:16px 0 0; padding:14px 20px; border-left:3px solid var(--accent);
    background:var(--accent-soft); border-radius:0 10px 10px 0; font-size:16px; color:var(--ink); line-height:1.52;}
  .take blockquote::before{content:"\201C"; color:var(--accent); font-weight:700; margin-right:2px;}
  .take blockquote::after{content:"\201D"; color:var(--accent); font-weight:700; margin-left:2px;}
  @media (max-width:680px){ .take{grid-template-columns:1fr; gap:10px; padding:22px;} .take .tk-num{font-size:26px;} }

  /* ---------- themes explorer ---------- */
  .filterbar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; align-items:center;}
  .filterbar .fl{font-size:12px; color:var(--ink-2); letter-spacing:.04em; margin-right:4px;}
  .filterbar button{font-family:inherit; font-size:12.5px; cursor:pointer; border:1px solid var(--tag-line);
    background:transparent; color:var(--ink-2); padding:5px 12px; border-radius:20px; transition:.18s;}
  .filterbar button:hover{border-color:var(--accent-line); color:var(--ink);}
  .filterbar button.on{background:var(--accent); color:#fff; border-color:var(--accent);}

  .feed{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
  .item{padding:24px; cursor:pointer; transition:transform .25s ease, border-color .25s ease, box-shadow .25s; position:relative;}
  .item:hover{transform:translateY(-3px); border-color:var(--accent-line);}
  .item .head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px;}
  .item .idx{font-size:12px; color:var(--ink-2); letter-spacing:.04em;}
  .item .idx b{color:var(--accent);}
  .item h3{margin:0 0 10px; font-size:20px; letter-spacing:-.02em; line-height:1.18;}
  .item .frame{margin:0; font-size:14.5px; color:var(--ink-2);}
  .item .detail{max-height:0; overflow:hidden; transition:max-height .45s ease;}
  .item.open .detail{max-height:1200px;}
  .item ul{margin:14px 0 0; padding-left:18px;}
  .item li{font-size:14px; color:var(--ink-2); margin-bottom:7px;}
  .item li b{color:var(--ink); font-weight:600;}
  .item .em{color:var(--accent); font-style:normal;}
  .item .tags{display:flex; gap:6px; margin-top:14px; flex-wrap:wrap;}
  .item .tags span{font-size:10.5px; color:var(--ink-2); border:1px solid var(--tag-line); padding:3px 8px; border-radius:6px; letter-spacing:.03em;}
  .item .more{display:block; text-align:right; font-size:11px; color:var(--accent); letter-spacing:.05em; margin-top:16px; opacity:.85;}
  .item:hover .more{opacity:1;}
  .cube{width:22px; height:26px;}

  /* ---------- stories ---------- */
  .storybar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px;}

  /* recordings: audio players + transcript downloads */
  .dl-all{display:flex; gap:10px; flex-wrap:wrap; margin:4px 0 22px;}
  .dlbtn{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; text-decoration:none;
         border:1px solid var(--tag-line); border-radius:99px; padding:7px 14px; color:var(--ink-2);
         background:var(--card); transition:border-color .15s,color .15s; white-space:nowrap;}
  .dlbtn:hover{border-color:var(--accent-line); color:var(--accent);}
  .rgroup{font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
          margin:26px 0 4px; font-weight:600;}
  .rec{padding:18px 22px; margin:10px 0;}
  .rec-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px;}
  .rec-num{font-size:22px; font-weight:600; color:var(--accent); min-width:34px;}
  .rec-t{flex:1; min-width:180px;}
  .rec-t h3{margin:0; font-size:16.5px;}
  .rec-w{font-size:11.5px; color:var(--ink-3);}
  .rec audio{width:100%; height:38px; display:block;}
  .audio-miss{font-size:12px; color:var(--ink-3); border:1px dashed var(--tag-line);
              border-radius:10px; padding:8px 12px; display:block; text-align:center;}
  .stories{columns:2; column-gap:16px;}
  @media (max-width:760px){.stories{columns:1;}}
  .story{break-inside:avoid; margin-bottom:16px; padding:22px; cursor:pointer; transition:border-color .2s, transform .2s;}
  .story:hover{border-color:var(--accent-line); transform:translateY(-2px);}
  .story .st-type{font-size:11px; color:var(--accent); letter-spacing:.04em; text-transform:uppercase;}
  .story h3{margin:6px 0 8px; font-size:18.5px; letter-spacing:-.02em; line-height:1.2;}
  .story .core{font-size:14px; color:var(--ink-2); margin:0;}
  .story blockquote{margin:14px 0 0; padding-left:14px; border-left:2px solid var(--accent);
    font-size:14.5px; color:var(--ink); line-height:1.5; max-height:0; overflow:hidden; transition:max-height .5s ease;}
  .story.open blockquote{max-height:900px; margin-top:14px;}
  .story .src{font-size:11px; color:var(--ink-3); margin-top:12px; letter-spacing:.02em;}

  /* footer */
  footer{border-top:1px solid var(--line); margin-top:80px; padding-top:34px; color:var(--ink-2); font-size:14px;}
  footer .ft{display:grid; grid-template-columns:1.4fr 1fr; gap:30px;}
  footer h4{color:var(--ink); font-size:14px; margin:0 0 10px; letter-spacing:.02em;}
  footer a{color:var(--accent);}
  footer .src-list{font-size:13px; color:var(--ink-2); line-height:1.9;}
  .colophon{margin-top:30px; font-size:12px; color:var(--ink-3); border-top:1px solid var(--line); padding-top:18px;}

  /* ---------- comments ---------- */
  .cbtn{display:inline-flex; align-items:center; gap:6px; margin-left:12px; cursor:pointer;
    border:1px solid var(--line); background:transparent; color:var(--ink-2);
    border-radius:9px; padding:5px 10px; font-family:"IBM Plex Mono",monospace; font-size:12px; transition:.18s; white-space:nowrap;}
  .cbtn:hover{border-color:var(--accent-line); color:var(--ink);}
  .cbtn.has{background:var(--accent); color:#fff; border-color:var(--accent);}
  .cbtn .cnt{font-weight:600;}
  .cbtn svg{width:14px; height:14px;}
  /* per-element comment icon, bottom-right corner of each card */
  [data-cid]{position:relative;}
  .cdot{position:absolute; right:9px; bottom:9px; z-index:6; height:25px; min-width:25px; padding:0 5px;
    display:inline-flex; align-items:center; justify-content:center; gap:4px; cursor:pointer;
    border:1px solid var(--line); border-radius:8px; background:var(--card-2); color:var(--ink-3);
    opacity:.5; transition:opacity .16s, color .16s, background .16s, border-color .16s;}
  .card:hover > .cdot, .cdot:focus-visible{opacity:1;}
  .cdot:hover{color:var(--ink); background:var(--card); border-color:var(--accent-line);}
  .cdot svg{width:14px; height:14px;}
  .cdot.has{opacity:1; background:var(--accent); color:#fff; border-color:var(--accent);}
  .cdot .cnt{font:600 11px "IBM Plex Mono",monospace;}
  .item .more{text-align:left;}  /* free the bottom-right corner for the comment icon */
  /* intro / lead text blocks: icon at top-right so it never overlaps wrapped text */
  .lead[data-cid], .statement[data-cid]{padding-right:42px;}
  .lead > .cdot, .statement > .cdot{top:0; bottom:auto;}
  /* floating bubble for general (whole-publication) comments */
  .fab{position:fixed; right:22px; bottom:22px; z-index:95; width:58px; height:58px; border-radius:50%;
       border:0; cursor:pointer; background:var(--accent); color:#fff; display:flex; align-items:center;
       justify-content:center; box-shadow:0 6px 24px -8px #00000066; transition:transform .15s ease;}
  .fab:hover{transform:scale(1.08);}
  .fab svg{width:26px; height:26px;}
  .fab .cnt{position:absolute; top:-5px; right:-5px; background:var(--ink); color:var(--bg);
            font:600 11px "IBM Plex Mono",monospace; min-width:20px; height:20px; border-radius:99px;
            display:inline-flex; align-items:center; justify-content:center; padding:0 5px;
            border:2px solid var(--bg);}
  @media (max-width:680px){ .fab{right:14px; bottom:14px; width:50px; height:50px;} .fab svg{width:22px;height:22px;} }
  /* per-section "+": propose a new part for this section */
  .addbtn{align-self:center; height:30px; min-width:30px; padding:0 6px; border-radius:99px; cursor:pointer;
          border:1px dashed var(--tag-line); background:var(--card); color:var(--ink-3);
          display:inline-flex; align-items:center; justify-content:center; gap:5px;
          transition:color .15s,border-color .15s;}
  .addbtn:hover{color:var(--accent); border-color:var(--accent-line); border-style:solid;}
  .addbtn.has{color:var(--accent); border-color:var(--accent-line); border-style:solid;}
  .addbtn svg{width:15px; height:15px;}
  .addbtn .cnt{font:600 11px "IBM Plex Mono",monospace;}
  .cmodal-back{position:fixed; inset:0; z-index:120; background:#00000088;
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center; padding:20px;
    opacity:0; pointer-events:none; transition:opacity .2s;}
  .cmodal-back.on{opacity:1; pointer-events:auto;}
  .cmodal{position:relative; width:min(560px,100%); max-height:85vh; overflow:auto;
    background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow);
    padding:26px 26px 22px; transform:translateY(10px) scale(.98); transition:transform .2s;}
  .cmodal-back.on .cmodal{transform:none;}
  .cmodal::after{content:""; position:absolute; left:44px; bottom:-13px; width:26px; height:26px;
    background:var(--card); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    transform:rotate(45deg); border-bottom-right-radius:6px;}
  .cmodal h4{margin:0 0 3px; font-size:19px; letter-spacing:-.02em;}
  .cmodal .csub{font-size:12px; color:var(--accent); margin-bottom:18px; letter-spacing:.02em;}
  .clist{display:flex; flex-direction:column; gap:11px; margin-bottom:18px;}
  .cmt{border-left:2px solid var(--accent); padding:9px 13px; background:var(--card-2); border-radius:0 10px 10px 0;}
  .cmt .meta{font-size:11px; color:var(--ink-2); font-family:"IBM Plex Mono",monospace; margin-bottom:4px;}
  .cmt .meta b{color:var(--accent);}
  .cmt .txt{font-size:14.5px; color:var(--ink); white-space:pre-wrap; word-break:break-word;}
  .cempty{font-size:13.5px; color:var(--ink-3); margin-bottom:18px;}
  .cwho{font-size:12px; color:var(--ink-2); margin-bottom:10px;}
  .cwho b{color:var(--ink);} .cwho a{color:var(--accent); cursor:pointer; text-decoration:underline;}
  .cform input, .cform textarea{width:100%; font-family:inherit; font-size:14px; background:var(--bg-2);
    border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--ink); margin-bottom:10px; resize:vertical;}
  .cform textarea{min-height:84px; line-height:1.5;}
  .cform .row{display:flex; gap:10px; align-items:center; justify-content:flex-end;}
  .cform .send{background:var(--accent); color:#fff; border:0; border-radius:10px; padding:9px 20px;
    font-family:inherit; font-weight:600; font-size:14px; cursor:pointer; transition:.18s;}
  .cform .send:hover{filter:brightness(1.08);}
  .cmodal .x{position:absolute; top:14px; right:16px; cursor:pointer; color:var(--ink-2);
    background:none; border:0; font-size:22px; line-height:1; padding:4px;}
  .cmodal .x:hover{color:var(--ink);}
  .chp{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none;}
  .cmt-act{font-family:"IBM Plex Mono",monospace; font-size:11px; margin-left:8px; letter-spacing:.02em;}
  .cmt-act a{color:var(--ink-3); cursor:pointer; margin-right:8px;}
  .cmt-act a:hover{color:var(--accent);}
  .cmt-act .danger{color:var(--accent-2); font-weight:600;} .cmt-act .cdel:hover{color:var(--accent-2);}
  .cedit-ta{width:100%; font-family:inherit; font-size:14px; background:var(--bg-2); border:1px solid var(--line);
    border-radius:8px; padding:8px 10px; color:var(--ink); margin:4px 0 8px; min-height:62px; resize:vertical;}
  .cmt .row{display:flex; gap:12px; align-items:center; justify-content:flex-end;}
  .cmt .row a{font-size:13px; color:var(--ink-2); cursor:pointer;} .cmt .row a:hover{color:var(--ink);}
  .cmt .row .send{padding:6px 15px; font-size:13px;}

  /* ---------- topic map ---------- */
  .graphwrap{position:relative; height:min(66vh,640px); margin-top:6px; border:1px solid var(--line);
    border-radius:var(--r); background:linear-gradient(180deg,var(--card),var(--card-2)); overflow:hidden; box-shadow:var(--shadow);}
  #tgraph{display:block; width:100%; height:100%; cursor:grab; touch-action:none;}
  #tgraph:active{cursor:grabbing;}
  .ghint{position:absolute; left:14px; bottom:12px; font-size:11px; color:var(--ink-3); pointer-events:none;
    background:color-mix(in srgb,var(--card) 72%,transparent); padding:4px 9px; border-radius:7px; letter-spacing:.03em;}
  /* expandable citation context (topic graph modal) */
  .cite .ctx{max-height:0; overflow:hidden; transition:max-height .4s ease;
    font-size:13.5px; color:var(--ink-2); line-height:1.6;}
  .cite.open .ctx{max-height:460px; margin-top:9px; padding-left:11px; border-left:2px solid var(--line);}
  .ctxtog{margin-top:8px; background:none; border:0; color:var(--accent); cursor:pointer;
    font-size:11.5px; letter-spacing:.03em; padding:0;}
  .ctxtog:hover{text-decoration:underline;}
  .ctxtog::after{content:" ▾";}
  .cite.open .ctxtog::after{content:" ▴";}

  /* ---------- discussion board ---------- */
  .bctl{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:20px;}
  .bctl .fl{font-size:12px; color:var(--ink-2); letter-spacing:.04em; margin-right:4px;}
  .bctl button{font-family:inherit; font-size:12.5px; cursor:pointer; border:1px solid var(--tag-line);
    background:transparent; color:var(--ink-2); padding:5px 13px; border-radius:20px; transition:.18s;}
  .bctl button:hover{border-color:var(--accent-line); color:var(--ink);}
  .bctl button.on{background:var(--accent); color:#fff; border-color:var(--accent);}
  .bwrap{display:flex; flex-direction:column; gap:8px;}
  .bgroup{margin-bottom:10px;}
  .bghead{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink); letter-spacing:.02em;
    margin:8px 0 10px; border-bottom:1px solid var(--line); padding-bottom:7px; display:flex; gap:9px; align-items:baseline;}
  .bghead a{color:var(--accent); cursor:pointer;}
  .bghead a:hover{text-decoration:underline;}
  .bghead .gn{color:var(--ink-3);}
  .bwrap .cmt{margin-bottom:8px;}
  .cmt .bsec{color:var(--accent); cursor:pointer; text-decoration:none;}
  .cmt .bsec:hover{text-decoration:underline;}

  /* reveal */
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:none;}
  @media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none;}}

  /* responsive */
  @media (max-width:900px){
    .heroflex{grid-template-columns:1fr;} .cluster{max-width:200px; grid-row:1;}
    .grid4,.invited,.chars{grid-template-columns:1fr 1fr;}
    .clusters,.grid2,.feed{grid-template-columns:1fr;}
    .spectrum .tabs{grid-template-columns:1fr 1fr;}
    .stories{columns:1;}
    .facts{grid-template-columns:1fr 1fr; gap:18px;}
    footer .ft{grid-template-columns:1fr;}
    .root{grid-template-columns:1fr; text-align:center;}
    .master{grid-template-columns:1fr;}
  }
  @media (max-width:620px){
    .navlinks{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:3px;}
    .navlinks::-webkit-scrollbar{display:none;}
    .navlinks{scrollbar-width:none;}
    .navlinks a{white-space:nowrap; flex:none; padding:7px 13px; font-size:13.5px;}
    .grid4,.invited,.chars{grid-template-columns:1fr;}
    .spectrum .tabs{grid-template-columns:1fr 1fr;}
  }

  /* ---------- v2 multi-page chrome ---------- */
  .navlinks a.navold{ margin-left:auto; color:var(--ink-3); border:1px solid var(--tag-line); }
  .navlinks a.navold:hover{ color:var(--accent); border-color:var(--accent-line); background:transparent; }
  @media (max-width:620px){ .navlinks a.navold{ margin-left:0; } }
  /* intro: highlight the "radical" stage among the spectrum cards */
  .phase.spec-radical{ border-color:var(--accent-line); background:var(--accent-soft); }
  .phase.spec-radical .pn{ font-weight:700; }
  /* discussion board: jump links */
  .cmt .bsec{ color:var(--accent); text-decoration:none; } .cmt .bsec:hover{ text-decoration:underline; }

  /* v2: editorial draft marker on contributed/transcript stories */
  .draftbadge{ color:#fff; background:var(--accent-2); padding:1px 7px; border-radius:6px;
    font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
  .story.is-draft{ border-style:dashed; }

  /* ---------- v2: inline, always-visible comment composer (sketch look) ---------- */
  .cinline{ grid-column:1 / -1; margin-top:15px; padding-top:12px; border-top:1px dashed var(--tag-line); }
  .ci-list{ display:flex; flex-direction:column; gap:9px; margin-bottom:11px; }
  .ci-cmt{ border-left:2px solid var(--accent-line); padding:4px 0 4px 11px; }
  .ci-cmt .m{ font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-2); margin-bottom:3px; }
  .ci-cmt .m b{ color:var(--accent); }
  .ci-cmt .t{ font-size:14px; color:var(--ink); white-space:pre-wrap; word-break:break-word; }
  .ci-act{ margin-left:8px; }
  .ci-act a{ color:var(--ink-3); cursor:pointer; margin-right:7px; } .ci-act a:hover{ color:var(--accent); }
  .ci-act .danger{ color:var(--accent-2); font-weight:600; }
  /* the writable field — dashed, hand-note feel; firms up on focus */
  .ci-text{ display:block; width:100%; font-family:inherit; font-size:14px; color:var(--ink);
    background:transparent; border:1.5px dashed var(--accent-line); border-radius:11px;
    padding:9px 13px; min-height:42px; line-height:1.5; resize:none; overflow:hidden;
    transition:border-color .15s, background .15s; }
  .ci-text::placeholder{ color:var(--ink-3); font-style:italic; letter-spacing:.01em; }
  .ci-text:focus{ outline:none; border-style:solid; border-color:var(--accent); background:var(--card-2); }
  .ci-edit-ta{ display:block; width:100%; font-family:inherit; font-size:14px; color:var(--ink);
    background:var(--card-2); border:1.5px dashed var(--accent-line); border-radius:9px;
    padding:8px 11px; min-height:58px; resize:vertical; margin:2px 0 6px; }
  .ci-row{ display:none; gap:9px; align-items:center; justify-content:flex-end; margin-top:9px; }
  .ci-row.on{ display:flex; }
  .ci-name{ flex:1; min-width:0; font-family:inherit; font-size:13.5px; color:var(--ink);
    background:transparent; border:1.5px dashed var(--tag-line); border-radius:9px; padding:7px 11px; }
  .ci-name:focus{ outline:none; border-color:var(--accent-line); }
  .ci-send{ background:var(--accent); color:#fff; border:0; border-radius:9px; padding:8px 17px;
    font-family:inherit; font-weight:600; font-size:13.5px; cursor:pointer; white-space:nowrap; transition:filter .15s; }
  .ci-send:hover{ filter:brightness(1.08); }
  .ci-send:disabled{ opacity:.6; cursor:default; }
  .ci-row a{ font-size:13px; color:var(--ink-2); cursor:pointer; } .ci-row a:hover{ color:var(--ink); }

  /* v2: explanatory prose paragraph under each topic */
  .item .tbody{ margin:12px 0 0; font-size:14.5px; color:var(--ink); line-height:1.6; }
  /* v2: a composer that follows a text block (lead/statement) needs breathing room */
  .cinline-after{ margin-top:20px; margin-bottom:30px; }