* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ink);
  color: var(--stone);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Stage ── */
.stage {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* ── Background layers ── */
.bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.bg-glow {
  position: absolute;
  top: -22%; left: 50%;
  width: 130vw; max-width: 760px; aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%,
      rgba(106,76,255,0.42) 0%,
      rgba(181,61,232,0.26) 32%,
      rgba(255,61,138,0.12) 55%,
      transparent 70%);
  filter: blur(18px);
  opacity: 0.9;
}
.bg-glow--lower {
  top: auto; bottom: -28%;
  width: 110vw; max-width: 640px;
  background: radial-gradient(circle at 50% 50%,
      rgba(0,165,229,0.30) 0%,
      rgba(106,76,255,0.16) 45%,
      transparent 68%);
  opacity: 0.7;
}


/* Lively motion animations — gated behind reduced-motion preference */
@media (prefers-reduced-motion: no-preference) {
  body[data-motion="lively"] .bg-glow { animation: glowDrift 14s ease-in-out infinite alternate; }
  body[data-motion="lively"] .bg-glow--lower { animation: glowDrift 18s ease-in-out infinite alternate-reverse; }
  body[data-motion="lively"][data-bg="gradient"] .bg-grad-band { background-size: 180% 180%; animation: bandShift 12s ease-in-out infinite alternate; }
}
@keyframes glowDrift {
  0%   { transform: translateX(-50%) translateY(0) scale(1); }
  100% { transform: translateX(-50%) translateY(4%) scale(1.12); }
}
@keyframes bandShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ── Column ── */
.col {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  padding: clamp(36px, 8vw, 64px) clamp(22px, 6vw, 34px) 40px;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* ── Masthead ── */
.mast { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mast__mark {
  width: 60px; height: auto;
  filter: var(--glow-mark);
}
@media (prefers-reduced-motion: no-preference) {
  body[data-motion="lively"] .mast__mark { animation: floatMark 5.5s ease-in-out infinite; }
}
@keyframes floatMark {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.mast__eyebrow {
  margin: 22px 0 0;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mist);
}
.mast__eyebrow .dot { width: 5px; height: 5px; background: var(--blue); border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) {
  body[data-motion="lively"] .mast__eyebrow .dot { animation: pulseDot 2s ease-in-out infinite; }
}
@keyframes pulseDot { 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.mast__title {
  margin: 16px 0 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(46px, 14vw, 66px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: #fff;
}
.mast__title .serif {
  font-family: var(--f-serif);
  font-style: italic; font-weight: 400;
  letter-spacing: -0.01em;
}
.mast__sub {
  margin: 18px 0 0;
  max-width: 30ch;
  font-size: 16px; line-height: 1.5;
  color: var(--mist);
}

/* ── Link list ── */
.links {
  margin-top: clamp(30px, 7vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lnk {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  background: rgba(255,255,255,0.018);
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
  isolation: isolate;
}
.lnk:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.26); transform: translateY(-2px); }
.lnk:active { transform: translateY(0); }

.lnk__chip {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.lnk__chip svg { width: 22px; height: 22px; }
.lnk:hover .lnk__chip {
  background: var(--signature);
  border-color: transparent;
  color: #fff;
}

.lnk__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.lnk__name {
  font-family: var(--f-display);
  font-weight: 700; font-size: 19px; letter-spacing: -0.015em;
  color: #fff;
}
.lnk__handle {
  font-family: var(--f-mono);
  font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--mist); opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lnk__arrow {
  flex: 0 0 auto;
  color: var(--mist); opacity: .6;
  transition: transform .18s ease, color .18s ease, opacity .18s ease;
}
.lnk__arrow svg { width: 20px; height: 20px; display: block; }
.lnk:hover .lnk__arrow { transform: translateX(5px); color: #fff; opacity: 1; }

/* Marquee live row */
.lnk--live {
  padding: 20px 22px;
  background: var(--signature);
  border: none;
  color: #fff;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.lnk--live .grain { opacity: 0.16; z-index: 0; }
.lnk--live > * { position: relative; z-index: 1; }
.lnk--live:hover { transform: translateY(-2px); background: var(--signature); }
.lnk--live .lnk__chip {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.34);
  backdrop-filter: blur(2px);
}
.lnk--live:hover .lnk__chip { background: rgba(255,255,255,0.24); }
.lnk--live .lnk__name { font-size: 21px; }
.lnk--live .lnk__handle { color: rgba(255,255,255,0.92); opacity: 1; display: flex; align-items: center; gap: 7px; }
.lnk--live .lnk__arrow { color: #fff; opacity: .9; }

/* Live pulse dot */
.live-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
  animation: livePulse 1.8s ease-out infinite;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
  70%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ── Footer ── */
.foot {
  margin-top: auto;
  padding-top: 38px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
}
.foot__mission {
  font-family: var(--f-serif);
  font-style: italic; font-weight: 400;
  font-size: 17px; line-height: 1.4;
  color: var(--mist);
  max-width: 30ch;
}
.foot__mission em { font-style: italic; color: #fff; }
.foot__site {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--slate);
  transition: color .15s;
}
.foot__site:hover { color: var(--blue); }

/* ── Entrance animation ── */
.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  body[data-motion="subtle"] .reveal,
  body[data-motion="lively"] .reveal {
    animation: revealUp .62s cubic-bezier(.22,.61,.36,1) both;
    animation-delay: var(--d, 0ms);
  }
}
body.anim-done .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }

@keyframes revealUp {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}