/* Shared visual system across all internal pages */
:root{ --gold:#c9a063; --ice:#9bbbd2; }
*{ box-sizing:border-box; }
html,body{ height:100%; background:#03060f; color:#dfeaf3; }
body{
  font-family: ui-sans-serif, system-ui, sans-serif;
  background: radial-gradient(120% 90% at 50% 50%, #0c1b3e 0%, #061128 45%, #02050f 100%);
  height:100vh; overflow:hidden;
}

/* Stars */
.stars{
  position:fixed; inset:-50%; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 23% 17%, #cfe6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 42%, #ffffff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 88%, #b8d8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 87% 73%, #e6f1ff 50%, transparent 51%),
    radial-gradient(1px 1px at 11% 64%, #aecbff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 56% 12%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 51%, #c9dcff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 22%, #ffffff 50%, transparent 51%),
    radial-gradient(1px 1px at 64% 81%, #d9eaff 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 30%, #ffffff 50%, transparent 51%);
  background-size: 600px 600px;
  opacity:.28;
}

/* Orbits */
/* Orbits — pushed hard to the left so the ring bleeds off the edge */
.orbits{ position:fixed; inset:0; pointer-events:none; z-index:1; display:grid; place-items:center; justify-items:start; }
.orbits svg{ width: min(155vh, 132vw); height: min(155vh, 132vw); opacity:.5; transform: translateX(-46%); }
.orbit-ring{ fill:none; stroke:var(--gold); stroke-width:.5; opacity:.18; }
.orbit-ring.thin{ stroke-width:.35; opacity:.12; }
.orbit-axis{ stroke:var(--gold); stroke-width:.4; opacity:.15; stroke-dasharray:1 4; }
.orbit-rotate{ transform-origin:50% 50%; animation: rot 90s linear infinite; }
.orbit-rotate-rev{ transform-origin:50% 50%; animation: rot 140s linear infinite reverse; }
@keyframes rot{ to{ transform: rotate(360deg);} }

/* Type */
.hud{
  font-family:'Courier New', ui-monospace, monospace;
  letter-spacing:.4em; color:#7ea9c9;
  text-transform:uppercase; font-size:11px;
}
.serif{ font-family:'Cormorant Garamond','Times New Roman',serif; font-weight:300; }

/* ============ APP SHELL ============ */
.page-fade{
  position:relative; z-index:5;
  height:100vh; display:flex; flex-direction:column;
  opacity:0; animation: pageIn 1.2s cubic-bezier(.25,.05,.3,1) .05s forwards;
}
@keyframes pageIn{
  0%{ opacity:0; filter: blur(10px) brightness(1.4); transform: scale(1.02); }
  60%{ opacity:.85; }
  100%{ opacity:1; filter: blur(0) brightness(1); transform: scale(1); }
}

/* Top bar */
.topbar{
  flex: 0 0 auto; position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap: 18px; padding: 22px 40px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  font-family:'Courier New',ui-monospace,monospace;
  letter-spacing:.4em; text-transform:uppercase; font-size:11px; color:#dfeaf3;
  text-decoration:none;
}
.brand-mark{ width:13px; height:17px; }
.topbar-right{ display:flex; align-items:center; gap:24px; }
.lang{ display:flex; gap:12px; font-family:'Courier New',ui-monospace,monospace;
  letter-spacing:.4em; text-transform:uppercase; font-size:11px; color:#7ea9c9; }
.lang span{ cursor:pointer; transition: color .2s; }
.lang span:hover{ color:#dfeaf3; }
.lang span.active{ color:#dfeaf3; }

.icon-btn{
  background: transparent; border: 0; cursor: pointer;
  color:#7ea9c9; line-height: 0; padding: 2px; transition: color .2s;
  display:inline-flex; align-items:center; justify-content:center;
}
.icon-btn:hover{ color:#dfeaf3; }
.icon-btn svg{ width:18px; height:18px; display:block; }
.topbar-sep{ width:1px; height:16px; background: rgba(201,160,99,.25); }

/* Content shell: title + scroll on the left, crystal on the right */
.shell{
  flex: 1 1 auto; min-height: 0;
  display:flex; align-items:stretch; gap: 40px;
  padding: 0 0 0 0;
}
.content-col{
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display:flex; flex-direction:column;
  padding: 34px 0 30px 40px;
}
.content-head{ flex: 0 0 auto; padding-right: 40px; }
.eyebrow{
  font-family:'Courier New',ui-monospace,monospace;
  letter-spacing:.4em; text-transform:uppercase; font-size:10px; color:#7ea9c9;
  margin-bottom: 16px;
}
.page-title{
  font-family:'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1.02; letter-spacing: .005em; margin: 0;
  color:#eaf2fb;
}
.page-title em{ font-style:italic; color:#b8d4ec; }
.content-head .rule{
  width: 64px; height:1px; margin: 22px 0 0;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity:.6;
}

/* Scroll region — fills remaining height, minimalist scrollbar */
.content-scroll{
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  margin-top: 24px;
  padding: 4px 34px 40px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,160,99,.28) transparent;
}
.content-scroll::-webkit-scrollbar{ width: 2px; }
.content-scroll::-webkit-scrollbar-track{ background: transparent; }
.content-scroll::-webkit-scrollbar-thumb{
  background: rgba(201,160,99,.28); border-radius: 99px;
}
.content-scroll::-webkit-scrollbar-thumb:hover{ background: rgba(201,160,99,.5); }
.content-scroll .lede{
  max-width: 620px; margin: 0 0 8px;
  color:#9db6cf; font-size: 15px; line-height: 1.7;
  font-family:'Cormorant Garamond', serif; font-weight:300;
  font-size: clamp(17px, 1.7vw, 21px);
}
.content-scroll .lede em{ font-style:italic; color:#dfeaf3; }

/* Side crystal — half size, clickable, MAIN MENU label */
.side-crystal{
  flex: 0 0 auto;
  align-self: center;
  width: 188px;
  padding: 0 40px 0 0;
  display:flex; flex-direction:column; align-items:center; gap: 16px;
  cursor: pointer;
  position: relative; z-index: 6;
}
.side-crystal .crystal-box{
  position: relative;
  width: 116px; height: 132px;
  display:grid; place-items:center;
  transition: transform .4s ease;
}
.side-crystal:hover .crystal-box{ transform: scale(1.06); }
.side-crystal svg{ width:100%; height:100%; overflow:visible; display:block; pointer-events:none; }
.side-crystal .aura{
  position:absolute; inset:-34%; border-radius:50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(155,205,255,.32) 0%,
    rgba(80,170,240,.16) 32%,
    rgba(30,90,180,.05) 62%,
    rgba(0,0,0,0) 76%);
  filter: blur(14px);
  animation: pulse 4s ease-in-out infinite;
  pointer-events:none;
}
.side-crystal:hover .aura{ opacity:1; }
@keyframes pulse{ 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:.95;transform:scale(1.08)} }
.side-crystal .side-label{
  font-family:'Courier New',ui-monospace,monospace;
  letter-spacing:.42em; text-transform:uppercase;
  font-size: 10px; color:#7ea9c9; text-align:center; line-height:1.8;
  transition: color .25s;
}
.side-crystal:hover .side-label{ color:#dfeaf3; }

/* ===== Responsive: below 900px, drop the fixed full-page shell for natural flow ===== */
@media (max-width: 900px){
  html, body{ height:auto; overflow-x:hidden; overflow-y:auto; }
  .page-fade{ height:auto; min-height:100vh; }
  .topbar{ padding:18px 22px; }
  .shell{ flex-direction:column; gap:0; }
  .content-col{ padding:24px 22px 4px; }
  .content-head{ padding-right:0; }
  .content-scroll{
    overflow:visible; min-height:0; margin-top:18px; padding:0 0 26px;
    scrollbar-width:auto; scrollbar-color:auto;
  }
  .content-scroll::-webkit-scrollbar{ width:auto; }
  .orbits svg{ transform: translateX(-32%); width: min(120vh, 150vw); height: min(120vh, 150vw); }

  /* MAIN MENU — compact, laconic return-to-home block, centred after the content */
  .side-crystal{
    display:flex; flex-direction:row; align-items:center; justify-content:center; gap:16px;
    width:auto; align-self:center; padding:6px 22px 30px;
  }
  .side-crystal .crystal-box{ width:62px; height:72px; }
  .side-crystal .side-label{ font-size:11px; letter-spacing:.42em; text-align:left; line-height:1.5; }
  footer{ padding:16px 22px; }
}
@media (max-width: 560px){
  .topbar{ flex-wrap:wrap; gap:12px 16px; }
  .topbar-right{ gap:18px; }
  .content-col{ padding:20px 18px 4px; }
  .page-title{ font-size: clamp(28px, 8.5vw, 42px); }
  footer{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* Footer */
footer{
  flex: 0 0 auto; position:relative; z-index:5;
  padding: 18px 40px;
  color:#7ea9c9; font-family:'Courier New',ui-monospace,monospace;
  letter-spacing:.3em; text-transform:uppercase; font-size:10px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
footer a{ color:#a8c0d6; text-decoration:none; transition: color .2s; }
footer a:hover{ color:#fff; }
footer .foot-links{ display:flex; gap:18px; }

/* ============ Transition (full-screen bloom grown via radius, no transform) ============ */
@property --flashR{ syntax:'<percentage>'; inherits:false; initial-value:12%; }
.flash{
  position:fixed; inset:0;
  --fx:50%; --fy:50%; --flashR:12%;
  background: radial-gradient(circle at var(--fx) var(--fy),
    rgba(255,255,255,.98) 0%,
    rgba(206,234,255,.9) calc(var(--flashR) * 0.18),
    rgba(130,190,240,.7) calc(var(--flashR) * 0.4),
    rgba(70,130,200,.45) calc(var(--flashR) * 0.62),
    rgba(40,80,150,.2) calc(var(--flashR) * 0.82),
    rgba(20,40,90,0) var(--flashR));
  opacity:0;
  pointer-events:none; z-index:200;
  transition: opacity 1.1s ease, --flashR 1.45s cubic-bezier(.3,.05,.6,1);
}
.flash.on{ opacity:1; --flashR: 200%; }
.veil{
  position:fixed; inset:0;
  background: radial-gradient(140% 120% at 50% 50%, #061128 0%, #03070f 55%, #01030a 100%);
  opacity:0; pointer-events:none; z-index:199;
  transition: opacity 1.05s cubic-bezier(.45,0,.55,1);
}
.veil.on{ opacity:1; }
/* Hide the scrollbar rail while the transition plays so no line shows against the bloom */
body.leaving .content-scroll{ scrollbar-width: none; }
body.leaving .content-scroll::-webkit-scrollbar{ width:0; height:0; }

/* Common minor utilities */
.count-line{
  font-family:'Courier New',ui-monospace,monospace;
  letter-spacing:.4em; text-transform:uppercase; font-size:10px; color:#7ea9c9;
  padding: 2px 0 14px;
}
.divider{
  width:60px; height:1px; margin: 28px auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.5;
}