/* Star-atlas identity: deep indigo night, chart-gold accent, etched serif
     display. Single visual world (committed dark) — every surface painted. */
  :root{
    --sky:#0a0c18; --sky2:#0d1022; --card:#10132a; --line:rgba(212,181,110,.22);
    --gold:#d4b56e; --gold-hi:#f0d9a4; --ink:#e8e4d8; --mut:#9a96a8;
    --triton:#5fd8e8; --dlss:#8be08b; --bridge:#e89a5f; --eg:#c98bde;
    --serif:'Palatino Linotype',Palatino,Georgia,serif;
    --sans:'Segoe UI',system-ui,sans-serif;
    --mono:Consolas,'Cascadia Code',monospace;
  }
  *{box-sizing:border-box; margin:0;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
  body{background:var(--sky); color:var(--ink); font-family:var(--sans);
       font-size:16.5px; line-height:1.6;}
  a{color:var(--gold); text-decoration:none;}
  a:hover{color:var(--gold-hi);}
  a:focus-visible, button:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;}

  /* ── hero: the chart ── */
  header{position:relative; height:92vh; min-height:560px; overflow:hidden;
         border-bottom:1px solid var(--line);}
  #chart{position:absolute; inset:0; width:100%; height:100%; display:block;}
  .hero-copy{position:relative; z-index:2; height:100%; display:flex;
             flex-direction:column; justify-content:center; align-items:center;
             text-align:center; pointer-events:none; padding:0 20px;}
  .hero-copy > *{pointer-events:auto;}
  .word{font-family:var(--serif); font-size:clamp(46px,9vw,96px); font-weight:400;
        letter-spacing:.28em; text-indent:.28em; color:var(--ink); text-wrap:balance;}
  .word b{color:var(--gold); font-weight:400;}
  .defn{font-family:var(--serif); font-style:italic; color:var(--mut);
        font-size:clamp(15px,2vw,18px); margin-top:14px; max-width:52ch;}
  .defn dfn{color:var(--gold); font-style:normal;}
  .hero-hint{position:absolute; bottom:26px; left:0; right:0; text-align:center;
             font-family:var(--mono); font-size:11px; letter-spacing:3px;
             color:var(--mut); z-index:2;}

  /* ── bodies (products) ── */
  main{max-width:960px; margin:0 auto; padding:30px 20px 40px;}
  .body-sec{display:grid; grid-template-columns:56px 1fr; gap:22px;
            padding:54px 0; border-bottom:1px solid rgba(212,181,110,.12);}
  .body-sec:last-of-type{border-bottom:none;}
  .glyph{width:56px; height:56px; flex:none;}
  .glyph svg{width:100%; height:100%;}
  .body-sec h2{font-family:var(--serif); font-size:30px; font-weight:400;
               letter-spacing:.12em; margin-bottom:2px;}
  .kind{font-family:var(--mono); font-size:11px; letter-spacing:3px;
        text-transform:uppercase; margin-bottom:14px; display:block;}
  .body-sec p{color:var(--mut); max-width:64ch; margin-bottom:10px;}
  .body-sec p strong{color:var(--ink); font-weight:600;}
  .feats{list-style:none; padding:0; margin:14px 0 18px; display:grid;
         grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px 22px;}
  .feats li{color:var(--mut); font-size:14.5px; padding-left:16px; position:relative;}
  .feats li::before{content:'✦'; position:absolute; left:0; font-size:10px; top:5px;}
  .links{display:flex; gap:12px; flex-wrap:wrap;}
  .btn{display:inline-block; font-family:var(--mono); font-size:12.5px;
       letter-spacing:1.5px; padding:9px 18px; border:1px solid var(--line);
       border-radius:3px; color:var(--ink); background:var(--card);}
  .btn:hover{border-color:var(--gold); color:var(--gold-hi); background:var(--sky2);}
  .btn.primary{border-color:var(--gold); color:var(--sky); background:var(--gold);}
  .btn.primary:hover{background:var(--gold-hi); color:var(--sky);}
  .soon{font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--mut);
        border:1px dashed rgba(154,150,168,.4); border-radius:3px; padding:9px 18px;}

  /* per-body accents */
  #triton h2{color:var(--triton);} #triton .kind{color:var(--triton);} #triton .feats li::before{color:var(--triton);}
  #dlss h2{color:var(--dlss);} #dlss .kind{color:var(--dlss);} #dlss .feats li::before{color:var(--dlss);}
  #bridge h2{color:var(--bridge);} #bridge .kind{color:var(--bridge);} #bridge .feats li::before{color:var(--bridge);}
  #genesis h2{color:var(--eg);} #genesis .kind{color:var(--eg);} #genesis .feats li::before{color:var(--eg);}

  .partner{display:flex; align-items:center; gap:22px; flex-wrap:wrap;
           background:var(--card); border:1px solid var(--line); border-radius:12px;
           padding:18px 22px; margin:44px 0 10px;}
  .partner p{color:var(--mut); max-width:56ch; font-size:14.5px;}
  .partner p strong{color:var(--ink);}
  .partner .btn{margin-left:auto;}
  code.promo{font-family:var(--mono); color:var(--gold); background:rgba(212,181,110,.1);
             border:1px dashed rgba(212,181,110,.45); border-radius:4px; padding:2px 8px;
             letter-spacing:2px;}
  footer{border-top:1px solid var(--line); padding:34px 20px 44px; text-align:center;
         color:var(--mut); font-size:14px; background:var(--sky2);}
  footer .fmark{font-family:var(--serif); letter-spacing:.3em; text-indent:.3em;
                color:var(--gold); font-size:15px; margin-bottom:10px;}
  footer nav{display:flex; gap:26px; justify-content:center; margin-top:8px; flex-wrap:wrap;}
  footer a{font-family:var(--mono); font-size:12px; letter-spacing:2px;}

  @media (max-width:620px){
    .body-sec{grid-template-columns:1fr;}
    .glyph{width:42px; height:42px;}
  }

/* moved out of inline style= attributes: a strict CSP (style-src 'self',
   no unsafe-inline) blocks inline style attributes too */
.partner img{flex:none;}
.kind.gold{color:var(--gold);}

/* 2026-08-16 (Aryan): only Triton keeps an icon — sections without one
   drop the 56px glyph column instead of leaving a gap */
.body-sec.noicon{grid-template-columns:1fr;}

/* ── grouped product rows (2026-08-16) ────────────────────────────────
   Minecraft mods + the modpack collapse into rows instead of eating a
   full screen each. Native <details>, so it works with the strict CSP
   and without a line of JavaScript. */
.group{margin:52px 0 0;}
.group-head{font-family:var(--serif); font-size:22px; font-weight:400;
  letter-spacing:.1em; color:var(--ink); margin-bottom:14px;
  padding-bottom:10px; border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:12px;}
.group-head span{font-family:var(--mono); font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--mut);}

.item{border:1px solid var(--line); border-radius:10px; background:var(--card);
  margin-bottom:10px; overflow:hidden;}
.item + .item{margin-top:0;}
.item summary{list-style:none; cursor:pointer; padding:16px 18px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.item summary::-webkit-details-marker{display:none;}
.item summary:hover{background:var(--sky2);}
.item summary:focus-visible{outline:2px solid var(--gold); outline-offset:-2px;}
.i-name{font-family:var(--serif); font-size:20px; letter-spacing:.06em;
  color:var(--gold); white-space:nowrap;}
.i-tease{color:var(--mut); font-size:14.5px; flex:1; min-width:200px;}
.i-mark{width:22px; height:22px; flex:none; position:relative; margin-left:auto;}
.i-mark::before, .i-mark::after{content:''; position:absolute; background:var(--gold);
  transition:transform .22s ease, opacity .22s ease;}
.i-mark::before{top:10px; left:3px; width:16px; height:1.5px;}
.i-mark::after{top:3px; left:10px; width:1.5px; height:16px;}
.item[open] .i-mark::after{transform:rotate(90deg); opacity:0;}
.i-body{padding:0 18px 18px; border-top:1px solid var(--line);
  padding-top:16px;}
.i-body p{color:var(--mut); max-width:64ch; margin-bottom:6px;}
.item[open] summary{background:var(--sky2);}
@media (prefers-reduced-motion: reduce){
  .i-mark::before, .i-mark::after{transition:none;}
}

/* flagship badge on Triton (2026-08-16) */
.flag{font-family:var(--mono); font-size:10px; letter-spacing:3px;
  vertical-align:middle; margin-left:12px; padding:4px 10px;
  border:1px solid var(--gold); border-radius:3px; color:var(--gold);
  background:rgba(212,181,110,.08);}