/* ===== Design tokens, reset, page shell, ambient FX ===== */
:root{
  --gold:#c8aa6e;
  --gold-bright:#f0e6d2;
  --void:#7b2fbf;
  --void-bright:#b06bff;
  --blue:#0ac8b9;
  --danger:#e04b4b;
  --bg0:#010a13;
  --bg1:#0a1420;
  --bg2:#091428;
}
*{box-sizing:border-box;margin:0;padding:0}

/* Root + body are plain full-width blocks with a solid dark fill.
   NO flex/grid on the body: the layout can't shrink-wrap, so the page
   always fills the whole viewport (no white edge, ever). */
html{background:var(--bg0);overflow-x:hidden}
body{
  width:100%;
  min-height:100vh;
  background:var(--bg0);
  color:var(--gold-bright);
  font-family:"Trebuchet MS","Segoe UI",sans-serif;
  overflow-x:hidden;
  user-select:none;
}
/* Gradient backdrop as a fixed layer — position:fixed;inset:0 always spans the
   full viewport, independent of the document flow. Sits behind all content. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 50% 30%, #12213a 0%, var(--bg1) 45%, var(--bg0) 100%);
}

/* floating void particles */
.particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.particles span{
  position:absolute;bottom:-20px;width:4px;height:4px;border-radius:50%;
  background:var(--void-bright);box-shadow:0 0 8px 2px var(--void);
  opacity:.5;animation:rise linear infinite;
}
@keyframes rise{
  to{transform:translateY(-100vh) translateX(30px);opacity:0}
}

/* smite / kill full-screen flash */
.flash{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0}
.flash.go{animation:flash .3s ease-out}
@keyframes flash{0%{opacity:.42;background:#fff}100%{opacity:0}}

/* Content column — plain block centring (margin:0 auto). The single most
   reliable layout primitive; works identically in every browser. Top-aligned
   with generous padding, so it never gets clipped and always scrolls cleanly. */
.stage{
  position:relative;z-index:1;
  width:100%;max-width:720px;
  margin:0 auto;
  padding:clamp(18px,4vw,40px) clamp(12px,3vw,26px) clamp(28px,5vw,48px);
  text-align:center;
}
.title{
  font-size:clamp(10px,2.6vw,13px);letter-spacing:clamp(3px,1.2vw,5px);text-transform:uppercase;
  color:var(--gold);opacity:.85;margin-bottom:2px;
}
.subtitle{
  font-size:clamp(20px,5.4vw,26px);font-weight:bold;letter-spacing:1px;
  background:linear-gradient(180deg,#f0e6d2,#c8aa6e);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 30px rgba(200,170,110,.15);
  margin-bottom:clamp(10px,2.6vw,18px);
}

/* ===== Accessibility (WCAG 2.2) ===== */
/* 2.4.11 Focus Appearance — visible 2px focus ring on every interactive control */
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px;border-radius:4px}
/* 2.3.3 — respect users who ask for less motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}