/* ============================================================
   THE ATLAS — Base / reset / atmosphere / layout shell
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
* { margin:0; padding:0; }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  min-height:100vh;
  background: var(--void);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.7;
  font-feature-settings: "ss01","cv05";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: auto;
}

/* ---------- Atmosphere layers ---------- */
#bg-canvas{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background: var(--grad-aurora);
}
#bg-canvas canvas{ display:block; }

.vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background: radial-gradient(120% 120% at 50% 50%, transparent 52%, rgba(7,6,12,0.78) 100%);
}
.grain{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Page-transition veil: a gilt-void scrim that wipes between routes */
#page-veil{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  background: var(--grad-veil);
  opacity:0; transform: translateY(-100%);
}
#page-veil.veil-active{
  animation: veilWipe 620ms var(--ease-veil) forwards;
}
@keyframes veilWipe{
  0%{ opacity:0; transform:translateY(-100%); }
  45%{ opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(100%); }
}

/* ---------- Skip link ---------- */
.skip-link{
  position:fixed; top:8px; left:8px; z-index:200;
  background:var(--ink-900); color:var(--gold);
  padding:10px 16px; border-radius:var(--r-md);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em;
  transform:translateY(-160%); transition:transform .25s var(--ease-rise);
  border:1px solid var(--gold-600);
}
.skip-link:focus{ transform:translateY(0); outline:none; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  height:var(--header-h);
  display:flex; align-items:center; gap:var(--space-5);
  padding:0 clamp(20px, 4vw, 56px);
  background: linear-gradient(180deg, rgba(11,10,18,0.92) 0%, rgba(11,10,18,0.72) 70%, transparent 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:1px solid transparent;
  transition: border-color .5s, background .5s;
}
.site-header.scrolled{
  border-bottom:1px solid var(--ink-700);
  background: rgba(11,10,18,0.96);
}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--parchment);
  flex-shrink:0;
}
.brand-mark{
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--gold); position:relative;
  box-shadow:0 0 18px var(--gold-glow);
}
.brand-mark::before{
  content:""; position:absolute; inset:6px; border-radius:50%;
  border:1px solid var(--gold-600);
}
.brand-mark::after{
  content:""; position:absolute; top:50%; left:50%; width:4px; height:4px;
  margin:-2px 0 0 -2px; border-radius:50%; background:var(--gold-100);
  box-shadow:0 0 8px var(--gold);
}
.brand-text{
  font-family:var(--font-chrome); font-weight:700; font-size:1.02rem;
  letter-spacing:.16em; text-transform:uppercase; line-height:1; display:flex; flex-direction:column;
}
.brand-sub{ font-family:var(--font-mono); font-size:9px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--parchment-3); margin-top:3px; }

.primary-nav{
  display:flex; gap:clamp(14px, 1.8vw, 30px); margin-left:auto; align-items:center;
}
.primary-nav a{
  position:relative; text-decoration:none; color:var(--parchment-2);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; padding:6px 2px;
  transition: color .35s var(--ease-rise);
}
.primary-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--grad-hairline); transform:scaleX(0); transform-origin:center;
  transition: transform .4s var(--ease-rise);
}
.primary-nav a:hover{ color:var(--parchment); }
.primary-nav a:hover::after{ transform:scaleX(1); }
.primary-nav a.active{ color:var(--gold); }
.primary-nav a.active::after{ transform:scaleX(1); background:var(--gold); opacity:.8; }

.header-tools{ display:flex; align-items:center; gap:14px; }
.nav-search-btn{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  color:var(--parchment-2); border:1px solid var(--ink-700); text-decoration:none;
  transition: all .4s var(--ease-rise);
}
.nav-search-btn:hover{ color:var(--gold); border-color:var(--gold-600); box-shadow:var(--glow-gold); }

.nav-toggle{ display:none; background:none; border:none; width:44px; height:44px;
  flex-direction:column; justify-content:center; gap:5px; cursor:pointer; }
.nav-toggle span{ display:block; height:1.5px; width:22px; background:var(--parchment);
  transition: transform .4s var(--ease-rise), opacity .3s; margin:0 auto; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- Main / view container ---------- */
#main{ position:relative; z-index:5; min-height:70vh; outline:none; }
#app{ position:relative; }

.view{ animation: viewIn var(--dur-slow) var(--ease-rise) both; }
@keyframes viewIn{ from{ opacity:0; filter:blur(6px); transform:translateY(14px); }
  to{ opacity:1; filter:blur(0); transform:translateY(0); } }

.wrap{ max-width:var(--content-max); margin:0 auto; padding:0 clamp(20px, 5vw, 56px); }
.wrap-narrow{ max-width:820px; margin:0 auto; padding:0 clamp(20px, 5vw, 40px); }

/* ---------- Footer ---------- */
.site-footer{ position:relative; z-index:5; margin-top:var(--space-9); padding-bottom:var(--space-7); }
.footer-inner{ max-width:var(--content-max); margin:0 auto; padding:0 clamp(20px,5vw,56px); text-align:center; }
.footer-rule{ height:1px; background:var(--grad-hairline); margin-bottom:var(--space-7); }
.footer-thesis{ font-family:var(--font-serif); font-style:italic; font-weight:300;
  font-size:clamp(1.3rem,3vw,1.9rem); color:var(--parchment); }
.footer-thesis::after{ content:""; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:18px 28px; justify-content:center; margin:var(--space-6) 0 var(--space-5); }
.footer-nav a{ color:var(--parchment-3); text-decoration:none; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; transition:color .35s; }
.footer-nav a:hover{ color:var(--gold); }
.footer-meta{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--parchment-4); }

/* ---------- Loading state ---------- */
.atlas-loading{ min-height:60vh; display:grid; place-items:center; }
.atlas-loading .pulse{
  width:54px; height:54px; border-radius:50%; border:1px solid var(--gold-600);
  position:relative; box-shadow:0 0 30px var(--gold-glow);
}
.atlas-loading .pulse::after{ content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--gold); animation: pulseRing 1.6s var(--ease-drift) infinite; }
@keyframes pulseRing{ 0%{ transform:scale(1); opacity:.8; } 100%{ transform:scale(2.2); opacity:0; } }
.atlas-loading .lbl{ position:absolute; margin-top:90px; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--parchment-3); }

/* ---------- Mobile nav ---------- */
@media (max-width: 940px){
  .nav-toggle{ display:flex; }
  .primary-nav{
    position:fixed;
    top:var(--header-h); left:0; right:0;
    height:calc(100dvh - var(--header-h));
    z-index:48;
    flex-direction:column; justify-content:center; gap:28px; margin:0;
    /* Opaque, NO backdrop-filter: a translucent blurred pane nested inside the
       sticky blurred .site-header fails to paint over content (compositing bug),
       leaving the menu see-through on mobile. Solid #0B0A12 fixes it. */
    background:#0B0A12;
    transform:translateX(100%); transition:transform .5s var(--ease-veil);
    padding:0 8vw;
  }
  .primary-nav.open{ transform:translateX(0); }
  .primary-nav a{ font-size:15px; letter-spacing:.12em; }
  body.menu-open{ overflow:hidden; } /* lock background scroll while the menu is open */
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .grain{ display:none; }
}

/* ---------- Focus visibility ---------- */
:focus-visible{ outline:none; box-shadow:var(--ring-focus); border-radius:var(--r-sm); }
a, button{ -webkit-tap-highlight-color: transparent; }

::selection{ background:var(--gold-glow); color:var(--parchment); }

/* scrollbar */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--void); }
::-webkit-scrollbar-thumb{ background:var(--ink-700); border-radius:99px; border:3px solid var(--void); }
::-webkit-scrollbar-thumb:hover{ background:var(--ink-600); }