:root{
  --bg:#070608;
  --bg2:#0d0b0f;
  --gold:#e9c876;
  --gold-deep:#b8923f;
  --gold-soft:#f3e2b0;
  --ink:#ece7df;
  --muted:#9a8f7e;
  --line:rgba(233,200,118,.22);
  --line-soft:rgba(233,200,118,.10);
  --card:rgba(24,20,16,.72);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Oswald',sans-serif;
  font-weight:300;
  letter-spacing:.02em;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.bg-glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 50% -10%, rgba(233,200,118,.14), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(184,146,63,.08), transparent 55%),
    radial-gradient(900px 600px at 95% 90%, rgba(120,90,200,.05), transparent 55%);
}
.bg-grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

/* HERO */
.hero{text-align:center;padding:clamp(48px,9vh,110px) 20px 26px}
.crest{
  width:62px;height:62px;margin:0 auto 22px;border-radius:50%;
  display:grid;place-items:center;
  font-family:'Cormorant Garamond',serif;font-weight:700;font-size:26px;
  color:var(--gold-soft);
  border:1px solid var(--line);
  background:radial-gradient(circle at 50% 35%, rgba(233,200,118,.18), rgba(24,20,16,.6));
  box-shadow:0 0 30px rgba(233,200,118,.12), inset 0 0 18px rgba(233,200,118,.08);
  letter-spacing:.04em;
}
.eyebrow{
  font-size:clamp(11px,1.4vw,13px);letter-spacing:.55em;color:var(--gold-deep);
  text-indent:.55em;margin-bottom:10px;font-weight:400;
}
.title{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(46px,9vw,108px);line-height:.96;letter-spacing:.02em;
  background:linear-gradient(180deg,#fbeec2 0%,var(--gold) 42%,var(--gold-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(233,200,118,.18);
}
.subtitle{
  margin-top:14px;color:var(--muted);font-size:clamp(13px,1.8vw,16px);
  letter-spacing:.32em;text-transform:uppercase;font-weight:300;
}

/* STATS */
.stats{
  display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(18px,4vw,52px);
  margin:clamp(30px,5vh,52px) auto 0;max-width:900px;
}
.stat{display:flex;flex-direction:column;align-items:center;min-width:78px}
.stat-num{
  font-family:'JetBrains Mono',monospace;font-weight:500;
  font-size:clamp(22px,3.2vw,34px);color:var(--gold-soft);
  text-shadow:0 0 24px rgba(233,200,118,.25);
}
.stat-label{
  margin-top:6px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
}

/* MAP */
.map-wrap{padding:clamp(40px,7vh,80px) 16px 10px;text-align:center}
.map-label,.map-hint{font-size:11px;letter-spacing:.4em;color:var(--gold-deep);text-transform:uppercase}
.map-hint{color:var(--muted);margin-top:18px;letter-spacing:.22em}
.constellation{
  position:relative;width:min(880px,94vw);height:min(540px,72vw);margin:22px auto 0;
}
.links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.links line{stroke:var(--line);stroke-width:1}
.links line.active{stroke:var(--gold);stroke-width:1.6;filter:drop-shadow(0 0 6px rgba(233,200,118,.5))}
.node{
  position:absolute;transform:translate(-50%,-50%);
  background:var(--card);border:1px solid var(--line);
  color:var(--ink);cursor:pointer;border-radius:14px;
  padding:14px 10px;width:118px;min-height:74px;
  display:grid;place-items:center;gap:4px;text-align:center;
  backdrop-filter:blur(6px);transition:.25s ease;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.node:hover,.node.active{
  border-color:var(--gold);transform:translate(-50%,-50%) scale(1.06);
  box-shadow:0 0 34px rgba(233,200,118,.28), inset 0 0 18px rgba(233,200,118,.06);
}
.node-glyph{font-size:22px;color:var(--gold);line-height:1}
.node-title{
  font-family:'Oswald',sans-serif;font-weight:500;font-size:12.5px;
  letter-spacing:.12em;color:var(--gold-soft);text-transform:uppercase;line-height:1.15;
}
.node-core{
  left:50%;top:50%;
  width:138px;min-height:138px;border-radius:50%;
  border:1px solid var(--line);
  background:radial-gradient(circle at 50% 35%, rgba(233,200,118,.16), rgba(16,13,10,.85));
  box-shadow:0 0 50px rgba(233,200,118,.2), inset 0 0 30px rgba(233,200,118,.1);
}
.node-core .node-title{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:17px;letter-spacing:.18em}
.node-count{font-size:10px;color:var(--muted);letter-spacing:.18em}

/* HUB SECTIONS */
main{max-width:1180px;margin:0 auto;padding:30px 18px 10px}
.hub{padding:54px 0 18px;scroll-margin-top:24px}
.hub-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--line-soft);padding-bottom:14px;margin-bottom:26px}
.hub-glyph{font-size:26px;color:var(--gold)}
.hub-name{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(26px,4vw,40px);color:var(--gold-soft);letter-spacing:.04em;
}
.hub-blurb{color:var(--muted);font-size:14px;letter-spacing:.06em;flex:1;min-width:200px}
.hub-count{font-family:'JetBrains Mono',monospace;color:var(--gold-deep);font-size:13px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:16px}
.tile{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--line-soft);border-radius:14px;
  padding:20px 18px 18px;overflow:hidden;transition:.22s ease;
  min-height:118px;
}
.tile::before{
  content:"";position:absolute;left:0;top:0;height:100%;width:3px;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));opacity:.0;transition:.22s;
}
.tile:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 26px rgba(233,200,118,.12)}
.tile:hover::before{opacity:1}
.tile.live:hover .tile-name{color:var(--gold-soft)}
.tile-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.tile-tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);border:1px solid var(--line-soft);border-radius:20px;padding:3px 9px}
.tile-live{font-size:10px;letter-spacing:.18em;color:#7fc99a;display:flex;align-items:center;gap:6px}
.tile-live .dot{width:6px;height:6px;border-radius:50%;background:#7fc99a;box-shadow:0 0 8px #7fc99a;animation:pulse 2.4s infinite}
.tile-soon{font-size:10px;letter-spacing:.18em;color:var(--muted)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.tile-name{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:21px;color:var(--ink);letter-spacing:.02em;line-height:1.1}
.tile-desc{margin-top:8px;color:var(--muted);font-size:13px;line-height:1.45;font-weight:300}
.tile-arrow{position:absolute;right:16px;bottom:14px;color:var(--gold-deep);font-size:15px;opacity:0;transition:.22s}
.tile.live:hover .tile-arrow{opacity:1;right:13px}

/* FOOTER */
.foot{text-align:center;padding:70px 20px 60px;border-top:1px solid var(--line-soft);margin-top:50px}
.foot-line{font-family:'Cormorant Garamond',serif;font-size:18px;color:var(--gold-soft);letter-spacing:.06em}
.foot-sub{margin-top:8px;color:var(--muted);font-size:12px;letter-spacing:.12em}

/* dim non-active hubs when a hub is focused */
.dimmed{opacity:.32;filter:saturate(.5)}

@media (max-width:620px){
  .constellation{height:118vw}
  .node{width:92px;min-height:62px;padding:10px 6px}
  .node-core{width:104px;min-height:104px}
  .node-title{font-size:11px}
}