@font-face{font-family:"Michroma";src:url("assets/Michroma-Regular.woff2") format("woff2");font-display:swap}

:root{
  --bg:#050915; --bg2:#0b1633; --accent:#C9A25A; --accent-hi:#ecd08f; --accent-lo:rgba(201,162,90,.35);
  --text:#ddd6c4; --muted:#9a9688; --star:#f3ead2;
  --avatar:clamp(170px,22vmin,236px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
body.imperial{
  --bg:#0c0306; --bg2:#2a070d; --accent:#c8323a; --accent-hi:#ff7a6e; --accent-lo:rgba(200,50,58,.4);
  --text:#ead7cf; --muted:#a88f88; --star:#ffd9c9;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text)}
body{font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;
  background:radial-gradient(ellipse at 50% 55%,var(--bg2) 0%,var(--bg) 70%);transition:background .8s}
.sr,.skip:not(:focus){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:8px;left:8px;z-index:99;background:var(--accent);color:#000;padding:6px 10px}

#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.nebula{position:fixed;inset:-6%;z-index:0;background:url("assets/nebula.webp") center/cover no-repeat;
  opacity:.38;filter:saturate(.9);will-change:transform;transition:opacity .8s,filter .8s}
body.imperial .nebula{filter:grayscale(1) sepia(1) hue-rotate(-35deg) saturate(3.2) brightness(.55)}
.flash{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--fx,50%) var(--fy,50%),rgba(255,250,240,.9) 0%,color-mix(in srgb,var(--wc,#ecd08f) 85%,transparent) 6%,color-mix(in srgb,var(--wc,#ecd08f) 55%,transparent) 16%,color-mix(in srgb,var(--wc,#ecd08f) 22%,transparent) 36%,transparent 68%)}
body.warping .flash{animation:flash .65s ease-in forwards}
@keyframes flash{0%{opacity:0}60%{opacity:.25}100%{opacity:1}}

.stage{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;
  transition:transform .65s cubic-bezier(.6,0,.9,.4),opacity .65s ease-in;transform-origin:var(--fx,50%) var(--fy,50%)}
body.warping .stage{transform:scale(2.6);opacity:0}

.masthead{text-align:center;padding:clamp(18px,4vh,40px) 16px 0}
.name{font-family:"Michroma",sans-serif;font-weight:400;margin:0;color:var(--accent);
  font-size:clamp(22px,3.2vw,40px);letter-spacing:.42em;padding-left:.42em;
  text-shadow:0 1px 0 rgba(0,0,0,.8),0 0 24px var(--accent-lo)}
.tagline{font-family:"Michroma",sans-serif;margin:.7em 0 0;font-size:clamp(10px,1vw,12.5px);letter-spacing:.14em;
  color:var(--muted);text-transform:uppercase}

/* ===== orbit / core ===== */
.orbit{position:relative;flex:1;width:100%;min-height:0}
.core{position:absolute;left:50%;top:50%;width:var(--avatar);height:var(--avatar);transform:translate(-50%,-50%);z-index:3}
.ring{position:absolute;inset:-16%;width:132%;height:132%;overflow:visible;animation:spin 120s linear infinite;pointer-events:none}
.ring-outer{fill:none;stroke:var(--accent);stroke-width:.6;opacity:.55}
.ring-inner{fill:none;stroke:var(--accent);stroke-width:2.2;filter:drop-shadow(0 0 3px var(--accent-lo))}
.ring-ticks line{stroke:var(--accent);stroke-width:.8;opacity:.75}
.ring-ticks line.major{stroke-width:1.6;opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}

.avatar{all:unset;cursor:pointer;position:absolute;inset:0;border-radius:50%;overflow:hidden;display:block;
  box-shadow:0 0 0 3px #0008,0 0 40px 4px var(--accent-lo),0 20px 60px #000c;animation:breathe 7s ease-in-out infinite}
.avatar:focus-visible{outline:2px solid var(--accent-hi);outline-offset:10px}
.avatar img{width:100%;height:100%;display:block;transform:scale(1.04)}
@keyframes breathe{0%,100%{transform:scale(1);box-shadow:0 0 0 3px #0008,0 0 30px 2px var(--accent-lo),0 20px 60px #000c}
  50%{transform:scale(1.03);box-shadow:0 0 0 3px #0008,0 0 56px 10px var(--accent-lo),0 20px 60px #000c}}
/* raven eye sits at (277,140) of the 1024px source; img is scaled 1.04 around center */
.raven-eye{position:absolute;left:26.3%;top:12.2%;width:7%;height:7%;margin:-3.5% 0 0 -3.5%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff6d8 0 8%,var(--accent-hi) 14%,rgba(232,170,80,.45) 32%,transparent 66%);
  mix-blend-mode:screen;animation:eye 5.5s ease-in-out infinite;transform:translate(var(--ex,0),var(--ey,0))}
@keyframes eye{0%,100%{opacity:.75}45%{opacity:1}50%{opacity:.15}54%{opacity:1}}
.void-glow{position:absolute;left:61%;top:48%;width:26%;height:16%;margin:-8% 0 0 -13%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,var(--accent-lo),transparent 70%);mix-blend-mode:screen;opacity:.3;
  transform:translate(var(--vx,0),var(--vy,0));transition:transform .4s var(--ease)}
.avatar.caw .raven-eye{animation:none;opacity:1;transform:translate(var(--ex,0),var(--ey,0)) scale(1.9)}

.live{position:absolute;left:50%;top:calc(100% + 12%);transform:translateX(-50%);z-index:4;text-decoration:none;
  font-family:"Michroma",sans-serif;font-size:11px;letter-spacing:.22em;color:#fff;background:#b0141c;
  padding:4px 10px 4px 9px;border-radius:3px;box-shadow:0 0 0 1px var(--accent),0 0 18px rgba(220,30,40,.6);white-space:nowrap}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:7px;vertical-align:1px;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}

/* ===== link nodes ===== */
.links-nav{position:absolute;inset:0;pointer-events:none}
.links{list-style:none;margin:0;padding:0}
.node{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:auto;will-change:transform}
.node a{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--text);
  transform:translate(-50%,-26px);padding:4px;outline:none}
.star{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(10,18,40,.92) 55%,rgba(10,18,40,.0) 72%);transition:transform .35s var(--ease)}
.star::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent);opacity:.7;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease),opacity .45s var(--ease)}
.star::after{transition:background .45s,box-shadow .45s;content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--star);top:-3px;left:50%;margin-left:-2.5px;
  box-shadow:0 0 6px 2px var(--accent-hi)}
.star svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s,filter .45s}
.star svg .f{fill:var(--accent);stroke:none;transition:fill .45s}
.star svg:has(.f){width:18px;height:18px}
.node a:hover .star svg .f,.node a:focus-visible .star svg .f,.node.active .star svg .f{fill:var(--accent-hi)}
.label{font-family:"Michroma",sans-serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  color:var(--accent-hi);opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease),color .45s,text-shadow .45s;text-shadow:0 0 8px #000,0 0 2px #000}
.node a:hover .star,.node a:focus-visible .star,.node.active .star{transform:scale(1.18)}
.node a:hover .star::before,.node a:focus-visible .star::before,.node.active .star::before{opacity:1;box-shadow:0 0 16px 2px var(--accent-lo),inset 0 0 10px var(--accent-lo)}
.node a:hover .star svg,.node a:focus-visible .star svg,.node.active .star svg{stroke:var(--accent-hi)}
.node a:hover .label,.node a:focus-visible .label,.node.active .label{opacity:1;transform:none}
/* brand color on hover / focus / tap / launch (gold at rest) */
.node a:hover .star::before,.node a:focus-visible .star::before,.node.active .star::before{border-color:var(--brand,var(--accent-hi));
  box-shadow:0 0 16px 2px color-mix(in srgb,var(--brand-glow,var(--accent)) 45%,transparent),inset 0 0 10px color-mix(in srgb,var(--brand,var(--accent)) 30%,transparent)}
.node a:hover .star::after,.node a:focus-visible .star::after,.node.active .star::after{background:#fff;box-shadow:0 0 7px 2px var(--brand,var(--accent-hi))}
.node a:hover .star svg,.node a:focus-visible .star svg,.node.active .star svg{stroke:var(--brand,var(--accent-hi));filter:drop-shadow(0 0 4px var(--brand-glow,transparent))}
.node a:hover .star svg .f,.node a:focus-visible .star svg .f,.node.active .star svg .f{fill:var(--brand,var(--accent-hi))}
.node a:hover .label,.node a:focus-visible .label,.node.active .label{color:var(--brand,var(--accent-hi));text-shadow:0 0 8px #000,0 0 2px #000,0 0 12px color-mix(in srgb,var(--brand-glow,transparent) 60%,transparent)}
.node[data-icon="tiktok"] a:hover .star svg,.node[data-icon="tiktok"] a:focus-visible .star svg,.node[data-icon="tiktok"].active .star svg{filter:drop-shadow(1.5px 1.5px 0 #00F2EA) drop-shadow(0 0 4px rgba(0,242,234,.5))}
.node a:focus-visible .star::before{outline:2px solid var(--accent-hi);outline-offset:4px}
body.hint .label{opacity:.55;transform:none}

/* ===== quote ===== */
.quote{position:absolute;left:50%;bottom:clamp(8px,1.6vh,16px);transform:translate(-50%,8px);margin:0;z-index:5;
  width:min(560px,92vw);text-align:center;padding:10px 20px 9px;opacity:0;transition:opacity .5s,transform .5s var(--ease);
  background:linear-gradient(180deg,rgba(6,10,24,.82),rgba(6,10,24,.6));border-top:1px solid var(--accent-lo);border-bottom:1px solid var(--accent-lo);
  backdrop-filter:blur(3px)}
.quote.show{opacity:1;transform:translate(-50%,0)}
.quote blockquote{margin:0;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(15px,1.5vw,18px);color:var(--text)}
.quote figcaption{margin-top:8px;font-family:"Michroma",sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.quote cite{font-style:normal;color:var(--muted);letter-spacing:.08em;margin-left:.6em}

.foot{padding:0 16px clamp(14px,3vh,28px);text-align:center}
.bio{transition:opacity .4s;margin:0;font-family:"Michroma",sans-serif;font-size:clamp(10px,.95vw,12px);letter-spacing:.16em;color:var(--text);opacity:.8}

.toast{position:fixed;left:50%;top:18px;transform:translate(-50%,-80px);z-index:60;font-family:"Michroma",sans-serif;font-size:11px;
  letter-spacing:.3em;color:var(--accent-hi);background:rgba(0,0,0,.7);border:1px solid var(--accent);padding:8px 16px;transition:transform .5s var(--ease)}
.toast.show{transform:translate(-50%,0)}

/* ===== list mode: mobile, reduced motion ===== */
body.listmode{overflow:auto}
body.listmode .stage{height:auto;min-height:100%}
body.listmode .orbit{flex:none;display:flex;flex-direction:column;align-items:center;padding-top:28px}
body.listmode .core{position:relative;left:auto;top:auto;transform:none;--avatar:156px;width:var(--avatar);height:var(--avatar);margin:22px 0 30px}
body.listmode .live{top:auto;bottom:-46px}
body.listmode .links-nav{position:relative;inset:auto;width:min(340px,86vw);pointer-events:auto;margin:22px 0 8px}
body.listmode .links{position:relative}
body.listmode .node{position:relative;transform:none!important;margin:0 0 10px}
body.listmode .node:nth-child(even){padding-left:22px}
body.listmode .node a{flex-direction:row;gap:16px;transform:none;padding:6px 12px 6px 8px;border:1px solid transparent;border-radius:30px;
  background:linear-gradient(90deg,rgba(8,14,32,.75),rgba(8,14,32,.2))}
body.listmode .node a:hover,body.listmode .node a:focus-visible{border-color:var(--accent-lo)}
body.listmode .label{opacity:1;transform:none;font-size:12px}
body.listmode .quote{position:relative;left:auto;bottom:auto;transform:translateY(8px);margin:0 auto 18px}
body.listmode .quote.show{transform:none}
body.listmode .foot{padding:16px 16px 34px}

body.listmode .node a:hover,body.listmode .node a:focus-visible,body.listmode .node.active a{border-color:color-mix(in srgb,var(--brand,var(--accent)) 55%,transparent)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body.quoting:not(.listmode) .bio{opacity:0}